{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "form-5",
  "type": "registry:component",
  "title": "Form 5",
  "description": "Form 5. A collection of input fields, controls, and actions used to capture and submit user data, such as text, selections, and files.",
  "dependencies": [
    "@hookform/resolvers",
    "react-hook-form",
    "react-icons",
    "sonner",
    "zod"
  ],
  "registryDependencies": [
    "alert",
    "button",
    "checkbox",
    "field"
  ],
  "files": [
    {
      "path": "components/watermelon/form-5.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport { FaCheckDouble, FaRocket } from 'react-icons/fa';\n\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { Controller, useForm } from 'react-hook-form';\nimport { toast } from 'sonner';\nimport { z } from 'zod';\n\nimport { Alert, AlertTitle } from '@/components/base-ui/alert';\nimport { Button } from '@/components/base-ui/button';\nimport { Checkbox } from '@/components/base-ui/checkbox';\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from '@/components/base-ui/field';\n\nconst FormSchema = z.object({\n  agree: z.boolean().refine((val) => val === true, {\n    message: 'You need to confirm before continuing.',\n  }),\n});\n\nconst Form5 = () => {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n    defaultValues: { agree: false },\n  });\n\n  function onSubmit() {\n    toast.custom(() => (\n      <Alert className=\"border-success text-success flex items-center gap-2\">\n        <FaCheckDouble className=\"animate-pulse\" />\n        <AlertTitle>You’re all set! Let’s get started 🚀</AlertTitle>\n      </Alert>\n    ));\n  }\n\n  return (\n    <form\n      onSubmit={form.handleSubmit(onSubmit)}\n      className=\"w-full max-w-xs space-y-6\"\n    >\n      <Field>\n        <FieldContent>\n          <Controller\n            control={form.control}\n            name=\"agree\"\n            render={({ field }) => (\n              <div className=\"hover:bg-muted/40 flex items-start space-x-3 rounded-sm border p-3 transition-all\">\n                <Checkbox\n                  checked={field.value}\n                  onCheckedChange={(val) => field.onChange(!!val)}\n                  className=\"bg-muted/50\"\n                />\n\n                <div className=\"space-y-1\">\n                  <FieldLabel className=\"flex items-center gap-2\">\n                    <FaRocket className=\"text-muted-foreground\" />\n                    Enable Your Workspace\n                  </FieldLabel>\n\n                  <FieldDescription>\n                    Activate your workspace to unlock all features and start\n                    building without limits.\n                  </FieldDescription>\n                </div>\n              </div>\n            )}\n          />\n        </FieldContent>\n\n        <FieldError>{form.formState.errors.agree?.message}</FieldError>\n      </Field>\n\n      <Button\n        type=\"submit\"\n        className=\"flex w-full items-center justify-center gap-2 rounded-sm transition-all active:scale-98\"\n      >\n        Get Started\n      </Button>\n    </form>\n  );\n};\n\nexport default Form5;\n"
    }
  ]
}