{
  "name": "color-picker-form-demo",
  "type": "registry:example",
  "dependencies": [
    "@hookform/resolvers/zod",
    "react-hook-form",
    "zod"
  ],
  "registryDependencies": [
    "color-picker",
    "button",
    "form"
  ],
  "files": [
    {
      "path": "examples/color-picker-form-demo.tsx",
      "type": "registry:example",
      "content": "\"use client\";\n\nimport { zodResolver } from \"@hookform/resolvers/zod\";\nimport * as React from \"react\";\nimport { useForm } from \"react-hook-form\";\nimport { toast } from \"sonner\";\nimport * as z from \"zod\";\n\nimport { Button } from \"@/registry/bases/radix/ui/button\";\nimport {\n  ColorPicker,\n  ColorPickerAlphaSlider,\n  ColorPickerArea,\n  ColorPickerContent,\n  ColorPickerEyeDropper,\n  ColorPickerFormatSelect,\n  ColorPickerHueSlider,\n  ColorPickerInput,\n  ColorPickerSwatch,\n  ColorPickerTrigger,\n} from \"@/registry/bases/radix/ui/color-picker\";\nimport {\n  Form,\n  FormControl,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/bases/radix/ui/form\";\n\nconst formSchema = z.object({\n  primaryColor: z\n    .string()\n    .min(1, \"Primary color is required\")\n    .regex(/^#([0-9A-F]{3}){1,2}$/i, \"Must be a valid hex color\"),\n  secondaryColor: z\n    .string()\n    .min(1, \"Secondary color is required\")\n    .regex(/^#([0-9A-F]{3}){1,2}$/i, \"Must be a valid hex color\"),\n  accentColor: z\n    .string()\n    .min(1, \"Accent color is required\")\n    .regex(/^#([0-9A-F]{3}){1,2}$/i, \"Must be a valid hex color\"),\n});\n\ntype FormValues = z.infer<typeof formSchema>;\n\nexport default function ColorPickerFormDemo() {\n  const form = useForm<FormValues>({\n    resolver: zodResolver(formSchema),\n    defaultValues: {\n      primaryColor: \"#3b82f6\",\n      secondaryColor: \"#10b981\",\n      accentColor: \"#f59e0b\",\n    },\n  });\n\n  const onSubmit = React.useCallback((input: FormValues) => {\n    toast.success(\n      <div className=\"space-y-2\">\n        <div className=\"font-medium\">Theme Colors Updated!</div>\n        <pre className=\"w-full text-xs\">{JSON.stringify(input, null, 2)}</pre>\n      </div>,\n    );\n  }, []);\n\n  const onReset = React.useCallback(() => {\n    form.reset();\n  }, [form]);\n\n  return (\n    <Form {...form}>\n      <form\n        onSubmit={form.handleSubmit(onSubmit)}\n        className=\"flex w-full max-w-md flex-col gap-4 rounded-md border p-6 shadow-sm\"\n      >\n        <div className=\"flex flex-col gap-1\">\n          <h3 className=\"text-lg font-semibold\">Theme Colors</h3>\n          <p className=\"text-sm text-muted-foreground\">\n            Configure your application's color scheme\n          </p>\n        </div>\n        <FormField\n          control={form.control}\n          name=\"primaryColor\"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>Primary Color</FormLabel>\n              <FormControl>\n                <ColorPicker\n                  value={field.value}\n                  onValueChange={field.onChange}\n                  defaultFormat=\"hex\"\n                >\n                  <div className=\"flex items-center gap-3\">\n                    <ColorPickerTrigger asChild>\n                      <Button\n                        variant=\"outline\"\n                        className=\"flex items-center gap-2 px-3\"\n                      >\n                        <ColorPickerSwatch className=\"size-4\" />\n                        {field.value}\n                      </Button>\n                    </ColorPickerTrigger>\n                  </div>\n                  <ColorPickerContent>\n                    <ColorPickerArea />\n                    <div className=\"flex items-center gap-2\">\n                      <ColorPickerEyeDropper />\n                      <div className=\"flex flex-1 flex-col gap-2\">\n                        <ColorPickerHueSlider />\n                        <ColorPickerAlphaSlider />\n                      </div>\n                    </div>\n                    <div className=\"flex items-center gap-2\">\n                      <ColorPickerFormatSelect />\n                      <ColorPickerInput />\n                    </div>\n                  </ColorPickerContent>\n                </ColorPicker>\n              </FormControl>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <FormField\n          control={form.control}\n          name=\"secondaryColor\"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>Secondary Color</FormLabel>\n              <FormControl>\n                <ColorPicker\n                  value={field.value}\n                  onValueChange={field.onChange}\n                  defaultFormat=\"hex\"\n                >\n                  <div className=\"flex items-center gap-3\">\n                    <ColorPickerTrigger asChild>\n                      <Button\n                        variant=\"outline\"\n                        className=\"flex items-center gap-2 px-3\"\n                      >\n                        <ColorPickerSwatch className=\"size-4\" />\n                        {field.value}\n                      </Button>\n                    </ColorPickerTrigger>\n                  </div>\n                  <ColorPickerContent>\n                    <ColorPickerArea />\n                    <div className=\"flex items-center gap-2\">\n                      <ColorPickerEyeDropper />\n                      <div className=\"flex flex-1 flex-col gap-2\">\n                        <ColorPickerHueSlider />\n                        <ColorPickerAlphaSlider />\n                      </div>\n                    </div>\n                    <div className=\"flex items-center gap-2\">\n                      <ColorPickerFormatSelect />\n                      <ColorPickerInput />\n                    </div>\n                  </ColorPickerContent>\n                </ColorPicker>\n              </FormControl>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <FormField\n          control={form.control}\n          name=\"accentColor\"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>Accent Color</FormLabel>\n              <FormControl>\n                <ColorPicker\n                  value={field.value}\n                  onValueChange={field.onChange}\n                  defaultFormat=\"hex\"\n                >\n                  <div className=\"flex items-center gap-3\">\n                    <ColorPickerTrigger asChild>\n                      <Button\n                        variant=\"outline\"\n                        className=\"flex items-center gap-2 px-3\"\n                      >\n                        <ColorPickerSwatch className=\"size-4\" />\n                        {field.value}\n                      </Button>\n                    </ColorPickerTrigger>\n                  </div>\n                  <ColorPickerContent>\n                    <ColorPickerArea />\n                    <div className=\"flex items-center gap-2\">\n                      <ColorPickerEyeDropper />\n                      <div className=\"flex flex-1 flex-col gap-2\">\n                        <ColorPickerHueSlider />\n                        <ColorPickerAlphaSlider />\n                      </div>\n                    </div>\n                    <div className=\"flex items-center gap-2\">\n                      <ColorPickerFormatSelect />\n                      <ColorPickerInput />\n                    </div>\n                  </ColorPickerContent>\n                </ColorPicker>\n              </FormControl>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <div className=\"flex justify-end gap-2\">\n          <Button type=\"button\" variant=\"outline\" onClick={onReset}>\n            Reset\n          </Button>\n          <Button type=\"submit\">Save Theme</Button>\n        </div>\n      </form>\n    </Form>\n  );\n}\n",
      "target": ""
    }
  ]
}