{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "form-4",
  "type": "registry:component",
  "title": "Form 4",
  "description": "Form 4. 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",
    "radio-group"
  ],
  "files": [
    {
      "path": "components/watermelon/form-4.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport { FaBell, FaCheckDouble, FaMoon, FaStar } 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 {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from '@/components/base-ui/field';\nimport { RadioGroup, RadioGroupItem } from '@/components/base-ui/radio-group';\n\nconst FormSchema = z.object({\n  mode: z.string().min(1, {\n    message: 'Please choose a mode to continue.',\n  }),\n});\n\nconst options = [\n  {\n    value: 'focus',\n    label: 'Focus Mode',\n    desc: 'Minimize distractions and stay productive.',\n    icon: FaStar,\n  },\n  {\n    value: 'balanced',\n    label: 'Balanced Mode',\n    desc: 'A mix of productivity and updates.',\n    icon: FaBell,\n  },\n  {\n    value: 'silent',\n    label: 'Silent Mode',\n    desc: 'Pause all interruptions for deep work.',\n    icon: FaMoon,\n  },\n];\n\nconst Form4 = () => {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n    defaultValues: { mode: '' },\n  });\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast.custom(() => (\n      <Alert className=\"border-success text-success flex items-center gap-2\">\n        <FaCheckDouble className=\"animate-pulse\" />\n        <AlertTitle>Mode set to {data.mode}</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>Choose Your Experience Mode</FieldLabel>\n\n        <FieldContent>\n          <Controller\n            control={form.control}\n            name=\"mode\"\n            render={({ field }) => (\n              <RadioGroup\n                onValueChange={field.onChange}\n                value={field.value}\n                className=\"space-y-1\"\n              >\n                {options.map((opt) => {\n                  const Icon = opt.icon;\n                  const active = field.value === opt.value;\n\n                  return (\n                    <label\n                      key={opt.value}\n                      htmlFor={opt.value}\n                      className={`flex cursor-pointer items-center justify-center gap-2 rounded-sm border p-2 shadow-[inset_0px_1px_0px_0px_rgba(255,255,255,1),inset_0px_-1px_0px_0px_rgba(0,0,0,0.05)] transition-all dark:shadow-[inset_0px_1px_1px_0px_rgba(255,255,255,0.25),inset_0px_-1px_0px_0px_rgba(0,0,0,0.7)] ${active ? 'border-primary bg-muted/50' : 'hover:bg-muted/40'}`}\n                    >\n                      <RadioGroupItem\n                        value={opt.value}\n                        id={opt.value}\n                        className=\"\"\n                      />\n\n                      <div className=\"flex flex-1 items-center gap-1\">\n                        <Icon\n                          className={`text-sm transition-all ${\n                            active\n                              ? 'text-primary scale-110'\n                              : 'text-muted-foreground'\n                          }`}\n                        />\n\n                        <div className=\"space-y-0.5\">\n                          <p className=\"text-sm font-medium\">{opt.label}</p>\n                        </div>\n                      </div>\n                    </label>\n                  );\n                })}\n              </RadioGroup>\n            )}\n          />\n        </FieldContent>\n\n        <FieldDescription>\n          Select how you'd like the app to behave during your sessions.\n        </FieldDescription>\n\n        <FieldError>{form.formState.errors.mode?.message}</FieldError>\n      </Field>\n\n      <Button\n        type=\"submit\"\n        className=\"from-primary to-primary/80 flex w-full items-center justify-center gap-2 rounded-sm bg-gradient-to-b shadow-[inset_0px_1px_0px_0px_rgba(255,255,255,0.3),inset_0px_-1px_0px_0px_rgba(0,0,0,0.3)] transition-all active:scale-98 dark:shadow-[inset_0px_1px_1px_0px_rgba(255,255,255,0.25),inset_0px_-1px_0px_0px_rgba(0,0,0,0.3)]\"\n      >\n        Apply Mode\n      </Button>\n    </form>\n  );\n};\n\nexport default Form4;\n"
    }
  ]
}