@webdevarif/dashui 0.3.4 → 0.3.6

package/dist/index.js

@@ -49,6 +49,14 @@ __export(index_exports, {
   CardHeader: () => CardHeader,
   CardTitle: () => CardTitle,
   Checkbox: () => Checkbox,
+  ColorPicker: () => ColorPicker,
+  ColorPickerAlpha: () => ColorPickerAlpha,
+  ColorPickerEyeDropper: () => ColorPickerEyeDropper,
+  ColorPickerFormat: () => ColorPickerFormat,
+  ColorPickerHexOutput: () => ColorPickerHexOutput,
+  ColorPickerHue: () => ColorPickerHue,
+  ColorPickerOutput: () => ColorPickerOutput,
+  ColorPickerSelection: () => ColorPickerSelection,
   ConfirmDialog: () => ConfirmDialog,
   DashboardLayout: () => DashboardLayout,
   DataTable: () => DataTable,
@@ -135,6 +143,7 @@ __export(index_exports, {
   badgeVariants: () => badgeVariants,
   buttonVariants: () => buttonVariants,
   cn: () => cn,
+  useColorPicker: () => useColorPicker,
   useDisclosure: () => useDisclosure,
   usePagination: () => usePagination,
   useTheme: () => import_next_themes2.useTheme
@@ -3308,137 +3317,376 @@ function PostSidebarSection({
 }
 
 // src/components/ui/hsl-color-input.tsx
+var import_react2 = require("react");
+var import_color2 = __toESM(require("color"));
+var Popover2 = __toESM(require("@radix-ui/react-popover"));
+
+// src/components/ui/color-picker.tsx
+var import_color = __toESM(require("color"));
 var import_react = require("react");
-var import_react_dom = require("react-dom");
-var import_react_colorful = require("react-colorful");
+var Slider = __toESM(require("@radix-ui/react-slider"));
 var import_jsx_runtime49 = require("react/jsx-runtime");
-function parseHsl(value) {
-  if (!value) return { h: 0, s: 0, l: 0 };
-  const parts = value.trim().split(/\s+/);
-  return {
-    h: parseFloat(parts[0]) || 0,
-    s: parseFloat(parts[1]) || 0,
-    l: parseFloat(parts[2]) || 0
-  };
-}
-function formatHsl(c) {
-  return `${Math.round(c.h)} ${Math.round(c.s)}% ${Math.round(c.l)}%`;
-}
-function HslColorInput({ value, onChange, className, inputClassName, disabled }) {
-  const [open, setOpen] = (0, import_react.useState)(false);
-  const [pos, setPos] = (0, import_react.useState)({ top: 0, left: 0 });
-  const [inputVal, setInputVal] = (0, import_react.useState)(value);
-  const [mounted, setMounted] = (0, import_react.useState)(false);
-  const triggerRef = (0, import_react.useRef)(null);
-  const pickerRef = (0, import_react.useRef)(null);
-  (0, import_react.useEffect)(() => {
-    setMounted(true);
-  }, []);
+var ColorPickerContext = (0, import_react.createContext)(void 0);
+var useColorPicker = () => {
+  const ctx = (0, import_react.useContext)(ColorPickerContext);
+  if (!ctx) throw new Error("useColorPicker must be used within ColorPicker");
+  return ctx;
+};
+var ColorPicker = ({
+  defaultValue = "#000000",
+  onChange,
+  className,
+  children,
+  ...props
+}) => {
+  const initial = (() => {
+    try {
+      return (0, import_color.default)(defaultValue);
+    } catch {
+      return (0, import_color.default)("#000000");
+    }
+  })();
+  const [hue, setHueState] = (0, import_react.useState)(initial.hue());
+  const [saturation, setSaturationState] = (0, import_react.useState)(initial.saturationl());
+  const [lightness, setLightnessState] = (0, import_react.useState)(initial.lightness());
+  const [alpha, setAlphaState] = (0, import_react.useState)(initial.alpha() * 100);
+  const [mode, setMode] = (0, import_react.useState)("HEX");
+  const notifyRef = (0, import_react.useRef)(onChange);
   (0, import_react.useEffect)(() => {
-    setInputVal(value);
-  }, [value]);
-  const openPicker = (0, import_react.useCallback)(() => {
-    const rect = triggerRef.current?.getBoundingClientRect();
-    if (!rect) return;
-    const pickerW = 228;
-    let left = rect.left;
-    if (left + pickerW > window.innerWidth - 8) left = window.innerWidth - pickerW - 8;
-    setPos({ top: rect.bottom + 6, left: Math.max(8, left) });
-    setOpen(true);
+    notifyRef.current = onChange;
+  }, [onChange]);
+  const notify = (0, import_react.useCallback)((h, s, l, a) => {
+    const hex = import_color.default.hsl(h, s, l).alpha(a / 100).hexa();
+    notifyRef.current?.(hex);
   }, []);
+  const setHue = (0, import_react.useCallback)((h) => {
+    setHueState(h);
+    notify(h, saturation, lightness, alpha);
+  }, [saturation, lightness, alpha, notify]);
+  const setSaturation = (0, import_react.useCallback)((s) => {
+    setSaturationState(s);
+    notify(hue, s, lightness, alpha);
+  }, [hue, lightness, alpha, notify]);
+  const setLightness = (0, import_react.useCallback)((l) => {
+    setLightnessState(l);
+    notify(hue, saturation, l, alpha);
+  }, [hue, saturation, alpha, notify]);
+  const setAlpha = (0, import_react.useCallback)((a) => {
+    setAlphaState(a);
+    notify(hue, saturation, lightness, a);
+  }, [hue, saturation, lightness, notify]);
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ColorPickerContext.Provider, { value: { hue, saturation, lightness, alpha, setHue, setSaturation, setLightness, setAlpha, mode, setMode }, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: cn("flex flex-col gap-3", className), ...props, children }) });
+};
+var ColorPickerSelection = (0, import_react.memo)(({ className, ...props }) => {
+  const containerRef = (0, import_react.useRef)(null);
+  const [isDragging, setIsDragging] = (0, import_react.useState)(false);
+  const [posX, setPosX] = (0, import_react.useState)(0);
+  const [posY, setPosY] = (0, import_react.useState)(0);
+  const { hue, setSaturation, setLightness } = useColorPicker();
+  const bg = (0, import_react.useMemo)(
+    () => `linear-gradient(0deg,rgba(0,0,0,1),rgba(0,0,0,0)),linear-gradient(90deg,rgba(255,255,255,1),rgba(255,255,255,0)),hsl(${hue},100%,50%)`,
+    [hue]
+  );
+  const handleMove = (0, import_react.useCallback)((e) => {
+    if (!isDragging || !containerRef.current) return;
+    const rect = containerRef.current.getBoundingClientRect();
+    const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+    const y = Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height));
+    setPosX(x);
+    setPosY(y);
+    setSaturation(x * 100);
+    const topL = x < 0.01 ? 100 : 50 + 50 * (1 - x);
+    setLightness(topL * (1 - y));
+  }, [isDragging, setSaturation, setLightness]);
   (0, import_react.useEffect)(() => {
-    if (!open) return;
-    const handler = (e) => {
-      const target = e.target;
-      if (pickerRef.current?.contains(target)) return;
-      if (triggerRef.current?.contains(target)) return;
-      setOpen(false);
+    if (!isDragging) return;
+    const up = () => setIsDragging(false);
+    window.addEventListener("pointermove", handleMove);
+    window.addEventListener("pointerup", up);
+    return () => {
+      window.removeEventListener("pointermove", handleMove);
+      window.removeEventListener("pointerup", up);
     };
-    document.addEventListener("pointerdown", handler, true);
-    return () => document.removeEventListener("pointerdown", handler, true);
-  }, [open]);
-  const cssColor = value ? `hsl(${value})` : "transparent";
-  const picker = /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+  }, [isDragging, handleMove]);
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
     "div",
     {
-      ref: pickerRef,
-      style: { position: "fixed", top: pos.top, left: pos.left, zIndex: 9999 },
-      className: "bg-[#1a1c2e] border border-white/10 rounded-xl shadow-2xl p-3 flex flex-col gap-3",
-      onPointerDown: (e) => e.stopPropagation(),
+      ref: containerRef,
+      className: cn("relative w-full cursor-crosshair rounded-lg", className),
+      style: { background: bg },
+      onPointerDown: (e) => {
+        e.preventDefault();
+        setIsDragging(true);
+        handleMove(e.nativeEvent);
+      },
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+        "div",
+        {
+          className: "pointer-events-none absolute h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white",
+          style: {
+            left: `${posX * 100}%`,
+            top: `${posY * 100}%`,
+            boxShadow: "0 0 0 1px rgba(0,0,0,0.6)"
+          }
+        }
+      )
+    }
+  );
+});
+ColorPickerSelection.displayName = "ColorPickerSelection";
+var ColorPickerHue = ({ className, ...props }) => {
+  const { hue, setHue } = useColorPicker();
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+    Slider.Root,
+    {
+      className: cn("relative flex h-4 w-full touch-none items-center", className),
+      max: 360,
+      step: 1,
+      value: [hue],
+      onValueChange: ([h]) => setHue(h),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Slider.Track, { className: "relative h-3 w-full grow rounded-full bg-[linear-gradient(90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)]", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Slider.Range, { className: "absolute h-full" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Slider.Thumb, { className: "block h-4 w-4 rounded-full border-2 border-white shadow-md focus:outline-none", style: { boxShadow: "0 0 0 1px rgba(0,0,0,0.4)" } })
+      ]
+    }
+  );
+};
+var ColorPickerAlpha = ({ className, ...props }) => {
+  const { alpha, setAlpha, hue, saturation, lightness } = useColorPicker();
+  const solidColor = `hsl(${hue},${saturation}%,${lightness}%)`;
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+    Slider.Root,
+    {
+      className: cn("relative flex h-4 w-full touch-none items-center", className),
+      max: 100,
+      step: 1,
+      value: [alpha],
+      onValueChange: ([a]) => setAlpha(a),
+      ...props,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-          import_react_colorful.HslColorPicker,
+          Slider.Track,
           {
-            color: parseHsl(value),
-            onChange: (c) => {
-              const formatted = formatHsl(c);
-              setInputVal(formatted);
-              onChange(formatted);
-            }
+            className: "relative h-3 w-full grow rounded-full",
+            style: {
+              backgroundImage: `linear-gradient(90deg, transparent, ${solidColor}), url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==")`
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Slider.Range, { className: "absolute h-full" })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex items-center gap-2 px-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "w-5 h-5 rounded border border-white/10 shrink-0", style: { background: cssColor } }),
-          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "text-xs font-mono text-white/40 flex-1 truncate", children: value || "none" }),
-          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-            "button",
-            {
-              onClick: () => setOpen(false),
-              className: "text-white/30 hover:text-white/70 text-xs px-1.5 py-0.5 rounded hover:bg-white/5 transition-colors",
-              children: "Done"
-            }
-          )
-        ] })
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Slider.Thumb, { className: "block h-4 w-4 rounded-full border-2 border-white shadow-md focus:outline-none", style: { boxShadow: "0 0 0 1px rgba(0,0,0,0.4)" } })
       ]
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: cn("flex items-center gap-1.5", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+};
+var ColorPickerHexOutput = ({ className, ...props }) => {
+  const { hue, saturation, lightness, alpha } = useColorPicker();
+  const hex = import_color.default.hsl(hue, saturation, lightness).alpha(alpha / 100).hex();
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: cn("flex items-center gap-1.5 px-1", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "w-5 h-5 rounded border border-white/20 shrink-0", style: { background: `hsl(${hue},${saturation}%,${lightness}%)` } }),
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "text-xs font-mono text-white/50 flex-1", children: hex })
+  ] });
+};
+var ColorPickerEyeDropper = ({ className, ...props }) => {
+  const { setHue, setSaturation, setLightness, setAlpha } = useColorPicker();
+  const pick = async () => {
+    try {
+      const result = await new EyeDropper().open();
+      const c = (0, import_color.default)(result.sRGBHex);
+      setHue(c.hue());
+      setSaturation(c.saturationl());
+      setLightness(c.lightness());
+      setAlpha(100);
+    } catch {
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    "button",
+    {
+      type: "button",
+      onClick: pick,
+      title: "Eye dropper",
+      className: cn(
+        "w-7 h-7 flex items-center justify-center rounded-md",
+        "border border-white/10 text-white/40 hover:text-white/70 hover:border-white/25",
+        "transition-colors shrink-0",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("path", { d: "M9.53 16.122a3 3 0 0 0-5.78 1.128 2.25 2.25 0 0 1-2.4 2.245 4.5 4.5 0 0 0 8.4-2.245c0-.399-.078-.78-.22-1.128Z" }),
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("path", { d: "m13.5 10.5 2.25-2.25m0 0 2.25-2.25M15.75 8.25l2.25 2.25M15.75 8.25 13.5 6m4.5-1.5 1.5-1.5" }),
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("path", { d: "M6.75 7.5 10.5 4.5c.5-.375 1.25-.375 1.5 0l6.75 6.75c.375.5.375 1.25 0 1.5L15 16.5" })
+      ] })
+    }
+  );
+};
+var ColorPickerOutput = ({ className, ...props }) => {
+  const { mode, setMode } = useColorPicker();
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    "select",
+    {
+      value: mode,
+      onChange: (e) => setMode(e.target.value),
+      className: cn(
+        "h-7 bg-white/5 border border-white/10 rounded-md text-xs text-white/60 px-1.5 outline-none",
+        "hover:border-white/20 focus:border-white/30 cursor-pointer shrink-0",
+        className
+      ),
+      children: ["HEX", "HSL", "RGB"].map((f) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("option", { value: f, className: "bg-[#1a1c2e]", children: f }, f))
+    }
+  );
+};
+var ColorPickerFormat = ({ className, ...props }) => {
+  const { hue, saturation, lightness, alpha, mode } = useColorPicker();
+  let displayValue = "";
+  try {
+    const c = import_color.default.hsl(hue, saturation, lightness).alpha(alpha / 100);
+    if (mode === "HEX") displayValue = c.hex();
+    else if (mode === "HSL") displayValue = `${Math.round(hue)} ${Math.round(saturation)}% ${Math.round(lightness)}%`;
+    else if (mode === "RGB") {
+      const rgb = c.rgb().array().map(Math.round);
+      displayValue = `${rgb[0]}, ${rgb[1]}, ${rgb[2]}`;
+    }
+  } catch {
+    displayValue = "";
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    "input",
+    {
+      readOnly: true,
+      type: "text",
+      value: displayValue,
+      className: cn(
+        "flex-1 h-7 bg-white/5 border border-white/10 rounded-md px-2 text-xs text-white/50 font-mono outline-none",
+        className
+      ),
+      ...props
+    }
+  );
+};
+
+// src/components/ui/hsl-color-input.tsx
+var import_jsx_runtime50 = require("react/jsx-runtime");
+function hslToHex(hsl) {
+  if (!hsl) return "#000000";
+  try {
+    const parts = hsl.trim().split(/\s+/);
+    const h = parseFloat(parts[0]) || 0;
+    const s = parseFloat(parts[1]) || 0;
+    const l = parseFloat(parts[2]) || 0;
+    return import_color2.default.hsl(h, s, l).hex();
+  } catch {
+    return "#000000";
+  }
+}
+function hexToHsl(hex) {
+  try {
+    const c = (0, import_color2.default)(hex.startsWith("#") ? hex : `#${hex}`);
+    return `${Math.round(c.hue())} ${Math.round(c.saturationl())}% ${Math.round(c.lightness())}%`;
+  } catch {
+    return "0 0% 0%";
+  }
+}
+function ColorReader({ onHexChange }) {
+  const { hue, saturation, lightness, alpha } = useColorPicker();
+  (0, import_react2.useEffect)(() => {
+    try {
+      const hex = import_color2.default.hsl(hue, saturation, lightness).alpha(alpha / 100).hex();
+      onHexChange(hex);
+    } catch {
+    }
+  }, [hue, saturation, lightness, alpha, onHexChange]);
+  return null;
+}
+function HslColorInput({ value, onChange, className, inputClassName, disabled }) {
+  const [open, setOpen] = (0, import_react2.useState)(false);
+  const hexValue = hslToHex(value);
+  const cssColor = value ? `hsl(${value})` : "transparent";
+  const pendingHexRef = (0, import_react2.useRef)(hexValue);
+  const onChangeRef = (0, import_react2.useRef)(onChange);
+  (0, import_react2.useEffect)(() => {
+    onChangeRef.current = onChange;
+  }, [onChange]);
+  (0, import_react2.useEffect)(() => {
+    if (open) pendingHexRef.current = hexValue;
+  }, [open, hexValue]);
+  const handleHexChange = (0, import_react2.useCallback)((hex) => {
+    pendingHexRef.current = hex;
+  }, []);
+  const handleOpenChange = (0, import_react2.useCallback)((newOpen) => {
+    if (!newOpen && open) {
+      const pending = pendingHexRef.current;
+      if (pending && pending !== hexValue) {
+        onChangeRef.current(hexToHsl(pending));
+      }
+    }
+    setOpen(newOpen);
+  }, [open, hexValue]);
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(Popover2.Root, { open, onOpenChange: disabled ? void 0 : handleOpenChange, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Popover2.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
       "button",
       {
-        ref: triggerRef,
         type: "button",
         disabled,
-        onClick: () => open ? setOpen(false) : openPicker(),
         className: cn(
-          "w-5 h-5 rounded border border-white/10 shrink-0 transition-all",
-          "hover:scale-110 hover:border-white/30 focus:outline-none",
-          disabled && "opacity-50 cursor-not-allowed"
+          "flex items-center gap-2 px-2 py-1 rounded-lg border border-white/10",
+          "bg-white/5 hover:border-white/20 hover:bg-white/[0.08] transition-colors",
+          "text-xs text-white/60 font-mono min-w-[7.5rem] justify-start",
+          "focus:outline-none focus:border-white/30",
+          disabled && "opacity-50 cursor-not-allowed",
+          className
         ),
-        style: { background: cssColor },
-        "aria-label": "Pick color"
+        "aria-label": "Pick color",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+            "span",
+            {
+              className: "w-4 h-4 rounded-full border border-white/20 shrink-0 inline-block",
+              style: { background: cssColor }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { children: hexValue.toUpperCase() })
+        ]
       }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-      "input",
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Popover2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      Popover2.Content,
       {
-        type: "text",
-        value: inputVal,
-        onChange: (e) => {
-          setInputVal(e.target.value);
-          if (/^\d+(\.\d+)?\s+\d+(\.\d+)?%\s+\d+(\.\d+)?%$/.test(e.target.value.trim())) {
-            onChange(e.target.value.trim());
-          }
-        },
-        onBlur: () => setInputVal(value),
-        disabled,
-        placeholder: "H S% L%",
+        sideOffset: 6,
+        align: "start",
         className: cn(
-          "w-28 bg-white/5 border border-white/10 rounded px-1.5 py-0.5",
-          "text-xs text-white/70 font-mono outline-none focus:border-white/30",
-          "placeholder:text-white/20 disabled:opacity-50",
-          inputClassName
-        )
+          "z-[9999] rounded-xl shadow-2xl p-3 w-[14rem]",
+          "bg-[#0f1117] border border-white/10",
+          "focus:outline-none"
+        ),
+        onInteractOutside: () => handleOpenChange(false),
+        children: open && /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(ColorPicker, { defaultValue: hexValue, className: "gap-2.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ColorReader, { onHexChange: handleHexChange }),
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ColorPickerSelection, { className: "h-32 w-full rounded-lg" }),
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ColorPickerEyeDropper, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex flex-col gap-1.5 flex-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ColorPickerHue, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ColorPickerAlpha, {})
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ColorPickerOutput, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ColorPickerFormat, {})
+          ] })
+        ] }, hexValue)
       }
-    ),
-    mounted && open && (0, import_react_dom.createPortal)(picker, document.body)
+    ) })
   ] });
 }
 
 // src/hooks/index.ts
-var import_react2 = require("react");
+var import_react3 = require("react");
 function useDisclosure(initial = false) {
-  const [isOpen, setIsOpen] = (0, import_react2.useState)(initial);
+  const [isOpen, setIsOpen] = (0, import_react3.useState)(initial);
   return {
     isOpen,
     open: () => setIsOpen(true),
@@ -3448,15 +3696,15 @@ function useDisclosure(initial = false) {
   };
 }
 function usePagination(total, pageSize = 20) {
-  const [page, setPage] = (0, import_react2.useState)(1);
+  const [page, setPage] = (0, import_react3.useState)(1);
   const totalPages = Math.ceil(total / pageSize);
   return { page, setPage, pageSize, total, totalPages };
 }
 
 // src/components/auth/AuthShell.tsx
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 function AuthShell({ children, pattern = "dots", maxWidth = "520px" }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
     "div",
     {
       style: {
@@ -3471,7 +3719,7 @@ function AuthShell({ children, pattern = "dots", maxWidth = "520px" }) {
         overflow: "hidden"
       },
       children: [
-        pattern === "dots" && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+        pattern === "dots" && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
           "div",
           {
             "aria-hidden": true,
@@ -3485,7 +3733,7 @@ function AuthShell({ children, pattern = "dots", maxWidth = "520px" }) {
             }
           }
         ),
-        pattern === "grid" && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+        pattern === "grid" && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
           "div",
           {
             "aria-hidden": true,
@@ -3499,16 +3747,16 @@ function AuthShell({ children, pattern = "dots", maxWidth = "520px" }) {
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { style: { position: "relative", zIndex: 1, width: "100%", maxWidth }, children })
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { style: { position: "relative", zIndex: 1, width: "100%", maxWidth }, children })
       ]
     }
   );
 }
 
 // src/components/auth/AuthCard.tsx
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 function AuthCard({ children, padding = "24px 28px" }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
     "div",
     {
       style: {
@@ -3525,10 +3773,10 @@ function AuthCard({ children, padding = "24px 28px" }) {
 }
 
 // src/components/auth/AuthLogo.tsx
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 function AuthLogo({ appName = "Builify CMS", letter = "B", imageUrl, size = 36 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", gap: "10px", marginBottom: "28px" }, children: [
-    imageUrl ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", gap: "10px", marginBottom: "28px" }, children: [
+    imageUrl ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
       "img",
       {
         src: imageUrl,
@@ -3537,7 +3785,7 @@ function AuthLogo({ appName = "Builify CMS", letter = "B", imageUrl, size = 36 }
         height: size,
         style: { borderRadius: "calc(var(--radius, 0.5rem) * 1.2)", flexShrink: 0, display: "block" }
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+    ) : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
       "div",
       {
         style: {
@@ -3556,7 +3804,7 @@ function AuthLogo({ appName = "Builify CMS", letter = "B", imageUrl, size = 36 }
         children: letter
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
       "span",
       {
         style: {
@@ -3572,10 +3820,10 @@ function AuthLogo({ appName = "Builify CMS", letter = "B", imageUrl, size = 36 }
 }
 
 // src/components/auth/AuthHeader.tsx
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 function AuthHeader({ title, description }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { style: { marginBottom: "24px", textAlign: "center" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { style: { marginBottom: "24px", textAlign: "center" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
       "h1",
       {
         style: {
@@ -3588,7 +3836,7 @@ function AuthHeader({ title, description }) {
         children: title
       }
     ),
-    description && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+    description && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
       "p",
       {
         style: {
@@ -3604,12 +3852,12 @@ function AuthHeader({ title, description }) {
 }
 
 // src/components/auth/AuthField.tsx
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 function AuthField({ label, error, hint, rightLabel, id, ...props }) {
   const fieldId = id ?? label.toLowerCase().replace(/\s+/g, "-");
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
         "label",
         {
           htmlFor: fieldId,
@@ -3621,9 +3869,9 @@ function AuthField({ label, error, hint, rightLabel, id, ...props }) {
           children: label
         }
       ),
-      rightLabel && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { style: { fontSize: "0.8125rem" }, children: rightLabel })
+      rightLabel && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { style: { fontSize: "0.8125rem" }, children: rightLabel })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
       "input",
       {
         id: fieldId,
@@ -3653,13 +3901,13 @@ function AuthField({ label, error, hint, rightLabel, id, ...props }) {
         ...props
       }
     ),
-    error && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("p", { style: { fontSize: "0.8rem", color: "var(--destructive)", margin: 0 }, children: error }),
-    hint && !error && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("p", { style: { fontSize: "0.8rem", color: "var(--muted-foreground)", margin: 0 }, children: hint })
+    error && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("p", { style: { fontSize: "0.8rem", color: "var(--destructive)", margin: 0 }, children: error }),
+    hint && !error && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("p", { style: { fontSize: "0.8rem", color: "var(--muted-foreground)", margin: 0 }, children: hint })
   ] });
 }
 
 // src/components/auth/AuthButton.tsx
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 function AuthButton({
   loading,
   variant = "primary",
@@ -3702,7 +3950,7 @@ function AuthButton({
       color: "var(--foreground)"
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
     "button",
     {
       disabled: loading || disabled,
@@ -3714,8 +3962,8 @@ function AuthButton({
         e.currentTarget.style.filter = "none";
       },
       ...props,
-      children: loading ? /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_jsx_runtime55.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+      children: loading ? /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx_runtime56.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
           "span",
           {
             style: {
@@ -3736,19 +3984,19 @@ function AuthButton({
 }
 
 // src/components/auth/AuthDivider.tsx
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 function AuthDivider({ label = "or" }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "12px", margin: "20px 0" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { style: { flex: 1, height: 1, background: "var(--border)" } }),
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { style: { fontSize: "0.75rem", color: "var(--muted-foreground)", userSelect: "none" }, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { style: { flex: 1, height: 1, background: "var(--border)" } })
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "12px", margin: "20px 0" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { style: { flex: 1, height: 1, background: "var(--border)" } }),
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { style: { fontSize: "0.75rem", color: "var(--muted-foreground)", userSelect: "none" }, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { style: { flex: 1, height: 1, background: "var(--border)" } })
   ] });
 }
 
 // src/components/auth/AuthFootnote.tsx
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 function AuthFootnote({ text, linkText, linkHref }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("p", { style: {
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("p", { style: {
     textAlign: "center",
     marginTop: "20px",
     fontSize: "0.8125rem",
@@ -3756,7 +4004,7 @@ function AuthFootnote({ text, linkText, linkHref }) {
   }, children: [
     text,
     " ",
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
       "a",
       {
         href: linkHref,
@@ -3796,6 +4044,14 @@ var import_next_themes2 = require("next-themes");
   CardHeader,
   CardTitle,
   Checkbox,
+  ColorPicker,
+  ColorPickerAlpha,
+  ColorPickerEyeDropper,
+  ColorPickerFormat,
+  ColorPickerHexOutput,
+  ColorPickerHue,
+  ColorPickerOutput,
+  ColorPickerSelection,
   ConfirmDialog,
   DashboardLayout,
   DataTable,
@@ -3882,6 +4138,7 @@ var import_next_themes2 = require("next-themes");
   badgeVariants,
   buttonVariants,
   cn,
+  useColorPicker,
   useDisclosure,
   usePagination,
   useTheme