fix: adjust button placement in checkbox group component

Author: anxndsgn

apps/ui/public/r/p-checkbox-group-5.json

@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/default/particles/p-checkbox-group-5.tsx",
-      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { CheckboxGroup } from \"@/registry/default/ui/checkbox-group\";\nimport {\n  Field,\n  FieldDescription,\n  FieldItem,\n  FieldLabel,\n} from \"@/registry/default/ui/field\";\nimport { Fieldset, FieldsetLegend } from \"@/registry/default/ui/fieldset\";\nimport { Form } from \"@/registry/default/ui/form\";\n\nexport default function Particle() {\n  const [loading, setLoading] = React.useState(false);\n  const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n    const formData = new FormData(e.currentTarget);\n    setLoading(true);\n    await new Promise((r) => setTimeout(r, 800));\n    setLoading(false);\n    const frameworks = formData.getAll(\"frameworks\") as string[];\n    alert(`Selected: ${frameworks.join(\", \") || \"none\"}`);\n  };\n\n  return (\n    <Form className=\"max-w-xl\" onSubmit={onSubmit}>\n      <Field name=\"frameworks\">\n        <Fieldset\n          className=\"gap-4\"\n          render={<CheckboxGroup defaultValue={[\"next\"]} disabled={loading} />}\n        >\n          <FieldsetLegend className=\"font-medium text-sm\">\n            Frameworks\n          </FieldsetLegend>\n          <FieldItem>\n            <Checkbox value=\"next\" />\n            <div className=\"flex flex-col items-start gap-2\">\n              <FieldLabel>Next.js</FieldLabel>\n              <FieldDescription>\n                Next.js is a React framework for building web applications.\n              </FieldDescription>\n            </div>\n          </FieldItem>\n          <FieldItem>\n            <Checkbox value=\"vite\" />\n            <FieldLabel>Vite</FieldLabel>\n          </FieldItem>\n          <FieldItem>\n            <Checkbox value=\"astro\" />\n            <FieldLabel>Astro</FieldLabel>\n          </FieldItem>\n        </Fieldset>\n        <Button disabled={loading} type=\"submit\">\n          Submit\n        </Button>\n      </Field>\n    </Form>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { CheckboxGroup } from \"@/registry/default/ui/checkbox-group\";\nimport {\n  Field,\n  FieldDescription,\n  FieldItem,\n  FieldLabel,\n} from \"@/registry/default/ui/field\";\nimport { Fieldset, FieldsetLegend } from \"@/registry/default/ui/fieldset\";\nimport { Form } from \"@/registry/default/ui/form\";\n\nexport default function Particle() {\n  const [loading, setLoading] = React.useState(false);\n  const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n    const formData = new FormData(e.currentTarget);\n    setLoading(true);\n    await new Promise((r) => setTimeout(r, 800));\n    setLoading(false);\n    const frameworks = formData.getAll(\"frameworks\") as string[];\n    alert(`Selected: ${frameworks.join(\", \") || \"none\"}`);\n  };\n\n  return (\n    <Form className=\"max-w-xl\" onSubmit={onSubmit}>\n      <Field name=\"frameworks\">\n        <Fieldset\n          className=\"gap-4\"\n          render={<CheckboxGroup defaultValue={[\"next\"]} disabled={loading} />}\n        >\n          <FieldsetLegend className=\"font-medium text-sm\">\n            Frameworks\n          </FieldsetLegend>\n          <FieldItem>\n            <Checkbox value=\"next\" />\n            <div className=\"flex flex-col items-start gap-2\">\n              <FieldLabel>Next.js</FieldLabel>\n              <FieldDescription>\n                Next.js is a React framework for building web applications.\n              </FieldDescription>\n            </div>\n          </FieldItem>\n          <FieldItem>\n            <Checkbox value=\"vite\" />\n            <FieldLabel>Vite</FieldLabel>\n          </FieldItem>\n          <FieldItem>\n            <Checkbox value=\"astro\" />\n            <FieldLabel>Astro</FieldLabel>\n          </FieldItem>\n        </Fieldset>\n      </Field>\n      <Button disabled={loading} type=\"submit\">\n        Submit\n      </Button>\n    </Form>\n  );\n}\n",
       "type": "registry:block"
     }
   ],

apps/ui/registry/default/particles/p-checkbox-group-5.tsx

@@ -54,10 +54,10 @@ export default function Particle() {
             <FieldLabel>Astro</FieldLabel>
           </FieldItem>
         </Fieldset>
-        <Button disabled={loading} type="submit">
-          Submit
-        </Button>
       </Field>
+      <Button disabled={loading} type="submit">
+        Submit
+      </Button>
     </Form>
   );
 }