shadcn-zod-formkit 1.27.4 → 1.28.0

package/dist/index.mjs

@@ -4,7 +4,7 @@ import { cva } from 'class-variance-authority';
 import { twMerge } from 'tailwind-merge';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as React3 from 'react';
-import React3__default, { useMemo, useState, useEffect, useRef, useTransition } from 'react';
+import React3__default, { useState, useMemo, useEffect, useRef, useTransition } from 'react';
 import { FormProvider, Controller, useFormContext, useFormState, useFieldArray, useForm } from 'react-hook-form';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { Slot } from '@radix-ui/react-slot';
@@ -2183,6 +2183,28 @@ var ColorInput = class extends BaseInput {
     return /* @__PURE__ */ jsx(FieldColor, { input, form, isSubmitting });
   }
 };
+var PRESET_COLORS = [
+  "#ef4444",
+  // red
+  "#f97316",
+  // orange
+  "#eab308",
+  // yellow
+  "#22c55e",
+  // green
+  "#06b6d4",
+  // cyan
+  "#3b82f6",
+  // blue
+  "#8b5cf6",
+  // purple
+  "#ec4899",
+  // pink
+  "#64748b",
+  // slate
+  "#000000"
+  // black
+];
 var FieldColor = ({ form, input, isSubmitting }) => {
   const [ColorCmp, _setColorCmp] = useState(ColorComp);
   return /* @__PURE__ */ jsx(
@@ -2213,13 +2235,17 @@ var FieldColor = ({ form, input, isSubmitting }) => {
 var ColorComp = React3__default.forwardRef(
   ({ value = "#000000", onChange, onBlur, disabled, className, hideInput = ["hsv"] }, ref) => {
     const [color, setColor] = useColor(value);
-    const [open, setOpen] = React3__default.useState(false);
+    const [open, setOpen] = useState(false);
     React3__default.useEffect(() => {
       if (value !== color.hex) {
         setColor({ ...color, hex: value });
       }
-    }, [color, setColor, value]);
+    }, [value]);
     const handleColorChange = (newColor) => {
+      setColor({ ...color, hex: newColor });
+      onChange?.(newColor);
+    };
+    const handlePickerChange = (newColor) => {
       setColor(newColor);
       onChange?.(newColor.hex);
     };
@@ -2229,21 +2255,38 @@ var ColorComp = React3__default.forwardRef(
         onBlur?.();
       }
     };
-    return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: handleOpenChange, children: [
-      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-        Button,
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2 p-2", children: PRESET_COLORS.map((presetColor) => /* @__PURE__ */ jsx(
+        "button",
         {
-          ref,
-          variant: "outline",
+          type: "button",
           disabled,
-          className: cn("w-full justify-start text-left font-normal", !value && "text-muted-foreground", className),
-          children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx("div", { className: "h-4 w-4 border border-border rounded-sm", style: { backgroundColor: color.hex, width: 20, height: 20 } }),
-            /* @__PURE__ */ jsx("span", { children: color.hex })
-          ] })
-        }
-      ) }),
-      /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-3", align: "start", children: /* @__PURE__ */ jsx(ColorPicker, { color, onChange: handleColorChange, hideInput }) })
+          className: cn(
+            "size-6 rounded-md border-2 transition-all hover:scale-110 disabled:opacity-50 disabled:cursor-not-allowed",
+            color.hex === presetColor ? "border-foreground ring-2 ring-foreground/20" : "border-border hover:border-foreground/50"
+          ),
+          style: { backgroundColor: presetColor },
+          onClick: () => handleColorChange(presetColor),
+          "aria-label": `Select color ${presetColor}`
+        },
+        presetColor
+      )) }),
+      /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: handleOpenChange, children: [
+        /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            ref,
+            variant: "outline",
+            disabled,
+            className: cn("w-full justify-start text-left font-normal", !value && "text-muted-foreground", className),
+            children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx("div", { className: "h-4 w-4 border border-border rounded-sm", style: { backgroundColor: color.hex, width: 20, height: 20 } }),
+              /* @__PURE__ */ jsx("span", { children: color.hex })
+            ] })
+          }
+        ) }),
+        /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-3", align: "start", children: /* @__PURE__ */ jsx(ColorPicker, { color, onChange: handlePickerChange, hideInput }) })
+      ] })
     ] });
   }
 );