{
  "name": "angle-slider-form-demo",
  "type": "registry:example",
  "dependencies": [
    "@hookform/resolvers",
    "react-hook-form",
    "zod",
    "sonner"
  ],
  "registryDependencies": [
    "angle-slider",
    "button",
    "form"
  ],
  "files": [
    {
      "path": "examples/angle-slider-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\";\nimport {\n  AngleSlider,\n  AngleSliderRange,\n  AngleSliderThumb,\n  AngleSliderTrack,\n  AngleSliderValue,\n} from \"@/registry/bases/base/ui/angle-slider\";\nimport { Button } from \"@/registry/bases/base/ui/button\";\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/bases/base/ui/form\";\n\nconst formSchema = z.object({\n  rotation: z.array(z.number()).length(1),\n  range: z.array(z.number()).length(2),\n});\n\ntype FormSchema = z.infer<typeof formSchema>;\n\nexport default function AngleSliderFormDemo() {\n  const form = useForm<FormSchema>({\n    resolver: zodResolver(formSchema),\n    defaultValues: {\n      rotation: [45],\n      range: [90, 270],\n    },\n  });\n\n  const onSubmit = React.useCallback((data: FormSchema) => {\n    toast.success(\n      <pre className=\"w-full\">{JSON.stringify(data, null, 2)}</pre>,\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 flex-col gap-4\"\n      >\n        <div className=\"grid grid-cols-2 gap-4\">\n          <FormField\n            control={form.control}\n            name=\"rotation\"\n            render={({ field }) => (\n              <FormItem className=\"place-items-center rounded-lg border p-6\">\n                <FormLabel>Rotation angle</FormLabel>\n                <FormControl>\n                  <AngleSlider\n                    value={field.value}\n                    onValueChange={field.onChange}\n                    max={360}\n                    min={0}\n                    step={1}\n                    size={60}\n                    name={field.name}\n                  >\n                    <AngleSliderTrack>\n                      <AngleSliderRange />\n                    </AngleSliderTrack>\n                    <AngleSliderThumb />\n                    <AngleSliderValue />\n                  </AngleSlider>\n                </FormControl>\n                <FormDescription>\n                  Set the rotation angle in degrees (0-360°)\n                </FormDescription>\n                <FormMessage />\n              </FormItem>\n            )}\n          />\n          <FormField\n            control={form.control}\n            name=\"range\"\n            render={({ field }) => (\n              <FormItem className=\"place-items-center rounded-lg border p-6\">\n                <FormLabel>Angle range</FormLabel>\n                <FormControl>\n                  <AngleSlider\n                    value={field.value}\n                    onValueChange={field.onChange}\n                    max={360}\n                    min={0}\n                    step={5}\n                    size={60}\n                    minStepsBetweenThumbs={1}\n                    name={field.name}\n                  >\n                    <AngleSliderTrack>\n                      <AngleSliderRange />\n                    </AngleSliderTrack>\n                    <AngleSliderThumb index={0} />\n                    <AngleSliderThumb index={1} />\n                    <AngleSliderValue />\n                  </AngleSlider>\n                </FormControl>\n                <FormDescription>\n                  Define a range of angles for the operation\n                </FormDescription>\n                <FormMessage />\n              </FormItem>\n            )}\n          />\n        </div>\n        <div className=\"flex items-center justify-end gap-2\">\n          <Button type=\"button\" variant=\"outline\" onClick={onReset}>\n            Reset\n          </Button>\n          <Button type=\"submit\">Submit</Button>\n        </div>\n      </form>\n    </Form>\n  );\n}\n",
      "target": ""
    }
  ]
}