{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "form-9",
  "type": "registry:component",
  "title": "Form 9",
  "description": "Form 9. 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",
    "field",
    "input"
  ],
  "files": [
    {
      "path": "components/watermelon/form-9.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport { FaCheckDouble, FaEnvelopeOpenText } from 'react-icons/fa';\n\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { 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 { Input } from '@/components/base-ui/input';\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from '@/components/base-ui/field';\n\nconst FormSchema = z.object({\n  email: z\n    .string()\n    .min(1, 'Email is required')\n    .email('Enter a valid email address'),\n});\n\nconst Form9 = () => {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n    defaultValues: { email: '' },\n  });\n\n  const onSubmit = () => {\n    toast.custom(() => (\n      <Alert className=\"border-success text-success flex items-center gap-2\">\n        <FaCheckDouble className=\"animate-pulse\" />\n        <AlertTitle>\n          Invitation sent! Check your inbox to get started.\n        </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        <FieldLabel className=\"flex items-center gap-2\">\n          <FaEnvelopeOpenText className=\"text-muted-foreground\" />\n          Invite a Teammate\n        </FieldLabel>\n\n        <FieldContent>\n          <Input\n            placeholder=\"Enter teammate's email\"\n            {...form.register('email')}\n            className=\"focus-visible:ring-primary/20 focus-visible:border-primary/50 bg-muted/50 rounded-sm transition-all focus:scale-[1.01]\"\n          />\n        </FieldContent>\n\n        <FieldDescription>\n          Send an invite to collaborate and start working together instantly.\n        </FieldDescription>\n\n        <FieldError className=\"bg-destructive/10 border-destructive/50 rounded-sm border p-1 text-xs shadow-[inset_0px_1px_0px_0px_rgba(255,255,255,1),inset_0px_-1px_0px_0px_rgba(0,0,0,0.05)] dark:shadow-[inset_0px_1px_1px_0px_rgba(255,255,255,0.25),inset_0px_-1px_0px_0px_rgba(0,0,0,0.7)]\">\n          {form.formState.errors.email?.message}\n        </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        Send Invite\n      </Button>\n    </form>\n  );\n};\n\nexport default Form9;\n"
    }
  ]
}