color-picker-form-demo

1"use client";
2 
3import { zodResolver } from "@hookform/resolvers/zod";
4import * as React from "react";
5import { useForm } from "react-hook-form";
6import { toast } from "sonner";
7import * as z from "zod";
8import { Button } from "@/registry/bases/base/ui/button";
9import {
10  ColorPicker,
11  ColorPickerAlphaSlider,
12  ColorPickerArea,
13  ColorPickerContent,
14  ColorPickerEyeDropper,
15  ColorPickerFormatSelect,
16  ColorPickerHueSlider,
17  ColorPickerInput,
18  ColorPickerSwatch,
19  ColorPickerTrigger,
20} from "@/registry/bases/base/ui/color-picker";
21import {
22  Form,
23  FormControl,
24  FormField,
25  FormItem,
26  FormLabel,
27  FormMessage,
28} from "@/registry/bases/base/ui/form";
29 
30const formSchema = z.object({
31  primaryColor: z
32    .string()
33    .min(1, "Primary color is required")
34    .regex(/^#([0-9A-F]{3}){1,2}$/i, "Must be a valid hex color"),
35  secondaryColor: z
36    .string()
37    .min(1, "Secondary color is required")
38    .regex(/^#([0-9A-F]{3}){1,2}$/i, "Must be a valid hex color"),
39  accentColor: z
40    .string()
41    .min(1, "Accent color is required")
42    .regex(/^#([0-9A-F]{3}){1,2}$/i, "Must be a valid hex color"),
43});
44 
45type FormValues = z.infer<typeof formSchema>;
46 
47export default function ColorPickerFormDemo() {
48  const form = useForm<FormValues>({
49    resolver: zodResolver(formSchema),
50    defaultValues: {
51      primaryColor: "#3b82f6",
52      secondaryColor: "#10b981",
53      accentColor: "#f59e0b",
54    },
55  });
56 
57  const onSubmit = React.useCallback((input: FormValues) => {
58    toast.success(
59      <div className="space-y-2">
60        <div className="font-medium">Theme Colors Updated!</div>
61        <pre className="w-full text-xs">{JSON.stringify(input, null, 2)}</pre>
62      </div>,
63    );
64  }, []);
65 
66  const onReset = React.useCallback(() => {
67    form.reset();
68  }, [form]);
69 
70  return (
71    <Form {...form}>
72      <form
73        onSubmit={form.handleSubmit(onSubmit)}
74        className="flex w-full max-w-md flex-col gap-4 rounded-md border p-6 shadow-sm"
75      >
76        <div className="flex flex-col gap-1">
77          <h3 className="font-semibold text-lg">Theme Colors</h3>
78          <p className="text-muted-foreground text-sm">
79            Configure your application's color scheme
80          </p>
81        </div>
82        <FormField
83          control={form.control}
84          name="primaryColor"
85          render={({ field }) => (
86            <FormItem>
87              <FormLabel>Primary Color</FormLabel>
88              <FormControl>
89                <ColorPicker
90// … truncated