{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "form-7",
  "type": "registry:component",
  "title": "Form 7",
  "description": "Form 7. 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",
    "textarea"
  ],
  "files": [
    {
      "path": "components/watermelon/form-7.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport { FaCheckDouble, FaCommentDots } 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 {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from '@/components/base-ui/field';\nimport { Textarea } from '@/components/base-ui/textarea';\n\nconst FormSchema = z.object({\n  feedback: z\n    .string()\n    .min(30, 'Please share a bit more detail (at least 30 characters).')\n    .max(300, 'Keep it concise (max 300 characters).'),\n});\n\nconst Form7 = () => {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n    defaultValues: { feedback: '' },\n  });\n\n  function onSubmit() {\n    toast.custom(() => (\n      <Alert className=\"border-success text-success flex items-center gap-2 sm:w-110\">\n        <FaCheckDouble className=\"animate-pulse\" />\n        <AlertTitle>\n          Your input has been recorded. Thanks for helping us improve 🚀\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          <FaCommentDots className=\"text-muted-foreground\" />\n          Tell Us What You Think\n        </FieldLabel>\n\n        <FieldContent>\n          <Textarea\n            placeholder=\"Share your thoughts, ideas, or anything that could make your experience better...\"\n            {...form.register('feedback')}\n            className=\"focus-visible:ring-primary/20 focus-visible:border-primary/50 bg-muted/50 rounded-sm shadow-[inset_0px_1px_0px_0px_rgba(255,255,255,1),inset_0px_-1px_0px_0px_rgba(0,0,0,0.05)] transition-all focus:scale-[1.01] 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          />\n        </FieldContent>\n\n        <FieldDescription>\n          Your insights directly shape future improvements and features.\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.feedback?.message}\n        </FieldError>\n      </Field>\n\n      <Button\n        type=\"submit\"\n        className=\"flex w-full items-center justify-center gap-2 rounded-sm border border-black/5 shadow-xs transition-all text-shadow-xs active:scale-98\"\n      >\n        Submit Feedback\n      </Button>\n    </form>\n  );\n};\n\nexport default Form7;\n"
    }
  ]
}