{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "form-8",
  "type": "registry:component",
  "title": "Form 8",
  "description": "Form 8. A collection of input fields, controls, and actions used to capture and submit user data, such as text, selections, and files.",
  "dependencies": [
    "@hookform/resolvers",
    "lucide-react",
    "react-hook-form",
    "react-icons",
    "sonner",
    "zod"
  ],
  "registryDependencies": [
    "alert",
    "button",
    "command",
    "field",
    "popover"
  ],
  "files": [
    {
      "path": "components/watermelon/form-8.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport { useState } from 'react';\n\nimport { FaCheckDouble, FaLayerGroup } from 'react-icons/fa';\nimport { CheckIcon, ChevronsUpDownIcon } from 'lucide-react';\nimport {\n  HiPaintBrush,\n  HiCodeBracket,\n  HiMegaphone,\n  HiBanknotes,\n  HiCog6Tooth,\n} from 'react-icons/hi2';\nimport { FaHeadphones } 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  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/components/base-ui/command';\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from '@/components/base-ui/field';\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/components/base-ui/popover';\n\nimport { cn } from '@/lib/utils';\n\nconst categories = [\n  { value: 'design', label: 'Design', icon: HiPaintBrush },\n  { value: 'development', label: 'Development', icon: HiCodeBracket },\n  { value: 'marketing', label: 'Marketing', icon: HiMegaphone },\n  { value: 'finance', label: 'Finance', icon: HiBanknotes },\n  { value: 'operations', label: 'Operations', icon: HiCog6Tooth },\n  { value: 'support', label: 'Customer Support', icon: FaHeadphones },\n];\n\nconst FormSchema = z.object({\n  category: z.string().min(1, 'Please select a category.'),\n});\n\nconst Form8 = () => {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n  });\n\n  const [open, setOpen] = useState(false);\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>{data.category} selected successfully</AlertTitle>\n      </Alert>\n    ));\n  }\n\n  return (\n    <form\n      onSubmit={form.handleSubmit(onSubmit)}\n      className=\"w-full max-w-xs space-y-3\"\n    >\n      <Field>\n        <FieldLabel className=\"flex items-center gap-2\">\n          <FaLayerGroup className=\"text-muted-foreground\" />\n          Select Category\n        </FieldLabel>\n\n        <FieldContent>\n          <Controller\n            control={form.control}\n            name=\"category\"\n            render={({ field }) => (\n              <Popover open={open} onOpenChange={setOpen}>\n                <PopoverTrigger asChild>\n                  <Button\n                    variant=\"outline\"\n                    role=\"combobox\"\n                    aria-expanded={open}\n                    className=\"w-full justify-between rounded-sm transition-all hover:scale-[1.01]\"\n                  >\n                    {field.value ? (\n                      (() => {\n                        const selected = categories.find(\n                          (c) => c.value === field.value,\n                        );\n                        if (!selected) return null;\n                        const Icon = selected.icon;\n                        return (\n                          <span className=\"flex items-center gap-2\">\n                            <Icon className=\"size-4\" />\n                            {selected.label}\n                          </span>\n                        );\n                      })()\n                    ) : (\n                      <span className=\"text-muted-foreground\">\n                        Select category...\n                      </span>\n                    )}\n                    <ChevronsUpDownIcon className=\"opacity-50\" />\n                  </Button>\n                </PopoverTrigger>\n\n                <PopoverContent className=\"w-(--radix-popper-anchor-width) rounded-sm p-0\">\n                  <Command className=\"p-0\">\n                    <CommandInput\n                      placeholder=\"Search category...\"\n                      className=\"rounded-sm p-0\"\n                    />\n                    <CommandList>\n                      <CommandEmpty>No results found.</CommandEmpty>\n\n                      <CommandGroup>\n                        {categories.map((item) => {\n                          const Icon = item.icon;\n                          return (\n                            <CommandItem\n                              key={item.value}\n                              value={item.value}\n                              onSelect={() => {\n                                field.onChange(item.value);\n                                setOpen(false);\n                              }}\n                              className=\"flex items-center justify-between rounded-sm\"\n                            >\n                              <span className=\"flex items-center gap-2\">\n                                <Icon className=\"size-4\" />\n                                {item.label}\n                              </span>\n\n                              <CheckIcon\n                                className={cn(\n                                  'transition-all',\n                                  field.value === item.value\n                                    ? 'scale-100 opacity-100'\n                                    : 'scale-75 opacity-0',\n                                )}\n                              />\n                            </CommandItem>\n                          );\n                        })}\n                      </CommandGroup>\n                    </CommandList>\n                  </Command>\n                </PopoverContent>\n              </Popover>\n            )}\n          />\n        </FieldContent>\n\n        <FieldDescription>\n          Choose the category that best fits your selection.\n        </FieldDescription>\n\n        <FieldError>{form.formState.errors.category?.message}</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        Continue\n      </Button>\n    </form>\n  );\n};\n\nexport default Form8;\n"
    }
  ]
}