@webdevarif/dashui 0.3.5 → 0.3.7

package/dist/index.mjs

@@ -3165,7 +3165,7 @@ function PostSidebarSection({
 }
 
 // src/components/ui/hsl-color-input.tsx
-import { useState as useState8, useEffect as useEffect6, useCallback as useCallback2 } from "react";
+import { useState as useState8, useRef as useRef5, useEffect as useEffect6, useCallback as useCallback2 } from "react";
 import Color2 from "color";
 import * as Popover2 from "@radix-ui/react-popover";
 
@@ -3207,6 +3207,7 @@ var ColorPicker = ({
   const [saturation, setSaturationState] = useState7(initial.saturationl());
   const [lightness, setLightnessState] = useState7(initial.lightness());
   const [alpha, setAlphaState] = useState7(initial.alpha() * 100);
+  const [mode, setMode] = useState7("HEX");
   const notifyRef = useRef4(onChange);
   useEffect5(() => {
     notifyRef.current = onChange;
@@ -3231,14 +3232,18 @@ var ColorPicker = ({
     setAlphaState(a);
     notify(hue, saturation, lightness, a);
   }, [hue, saturation, lightness, notify]);
-  return /* @__PURE__ */ jsx49(ColorPickerContext.Provider, { value: { hue, saturation, lightness, alpha, setHue, setSaturation, setLightness, setAlpha }, children: /* @__PURE__ */ jsx49("div", { className: cn("flex flex-col gap-3", className), ...props, children }) });
+  return /* @__PURE__ */ jsx49(ColorPickerContext.Provider, { value: { hue, saturation, lightness, alpha, setHue, setSaturation, setLightness, setAlpha, mode, setMode }, children: /* @__PURE__ */ jsx49("div", { className: cn("flex flex-col gap-3", className), ...props, children }) });
 };
 var ColorPickerSelection = memo(({ className, ...props }) => {
   const containerRef = useRef4(null);
   const [isDragging, setIsDragging] = useState7(false);
-  const [posX, setPosX] = useState7(0);
-  const [posY, setPosY] = useState7(0);
-  const { hue, setSaturation, setLightness } = useColorPicker();
+  const { hue, saturation, lightness, setSaturation, setLightness } = useColorPicker();
+  const [posX, setPosX] = useState7(() => saturation / 100);
+  const [posY, setPosY] = useState7(() => {
+    const x = saturation / 100;
+    const topL = x < 0.01 ? 100 : 50 + 50 * (1 - x);
+    return topL > 0 ? Math.max(0, Math.min(1, 1 - lightness / topL)) : 0;
+  });
   const bg = useMemo2(
     () => `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]
@@ -3379,10 +3384,54 @@ var ColorPickerEyeDropper = ({ className, ...props }) => {
     }
   );
 };
+var ColorPickerOutput = ({ className, ...props }) => {
+  const { mode, setMode } = useColorPicker();
+  return /* @__PURE__ */ jsx49(
+    "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__ */ jsx49("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 = Color.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__ */ jsx49(
+    "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
 import { jsx as jsx50, jsxs as jsxs34 } from "react/jsx-runtime";
-function hslStringToHex(hsl) {
+function hslToHex(hsl) {
   if (!hsl) return "#000000";
   try {
     const parts = hsl.trim().split(/\s+/);
@@ -3394,13 +3443,10 @@ function hslStringToHex(hsl) {
     return "#000000";
   }
 }
-function hexToHslString(hex) {
+function hexToHsl(hex) {
   try {
-    const c = Color2(hex);
-    const h = Math.round(c.hue());
-    const s = Math.round(c.saturationl());
-    const l = Math.round(c.lightness());
-    return `${h} ${s}% ${l}%`;
+    const c = Color2(hex.startsWith("#") ? hex : `#${hex}`);
+    return `${Math.round(c.hue())} ${Math.round(c.saturationl())}% ${Math.round(c.lightness())}%`;
   } catch {
     return "0 0% 0%";
   }
@@ -3408,88 +3454,93 @@ function hexToHslString(hex) {
 function ColorReader({ onHexChange }) {
   const { hue, saturation, lightness, alpha } = useColorPicker();
   useEffect6(() => {
-    const hex = Color2.hsl(hue, saturation, lightness).alpha(alpha / 100).hex();
-    onHexChange(hex);
+    try {
+      const hex = Color2.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] = useState8(false);
-  const [inputVal, setInputVal] = useState8(value);
-  useEffect6(() => {
-    setInputVal(value);
-  }, [value]);
-  const hexValue = hslStringToHex(value);
+  const hexValue = hslToHex(value);
   const cssColor = value ? `hsl(${value})` : "transparent";
-  const handlePickerHex = useCallback2((hex) => {
-    const hsl = hexToHslString(hex);
-    setInputVal(hsl);
-    onChange(hsl);
+  const pendingHexRef = useRef5(hexValue);
+  const onChangeRef = useRef5(onChange);
+  useEffect6(() => {
+    onChangeRef.current = onChange;
   }, [onChange]);
-  return /* @__PURE__ */ jsxs34("div", { className: cn("flex items-center gap-1.5", className), children: [
-    /* @__PURE__ */ jsxs34(Popover2.Root, { open, onOpenChange: disabled ? void 0 : setOpen, children: [
-      /* @__PURE__ */ jsx50(Popover2.Trigger, { asChild: true, children: /* @__PURE__ */ jsx50(
-        "button",
-        {
-          type: "button",
-          disabled,
-          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"
-          ),
-          style: { background: cssColor },
-          "aria-label": "Pick color"
-        }
-      ) }),
-      /* @__PURE__ */ jsx50(Popover2.Portal, { children: /* @__PURE__ */ jsx50(
-        Popover2.Content,
-        {
-          sideOffset: 8,
-          align: "start",
-          className: cn(
-            "z-[9999] rounded-xl shadow-2xl p-3 w-[220px]",
-            "bg-[#1a1c2e] border border-white/10",
-            "focus:outline-none"
-          ),
-          onInteractOutside: () => setOpen(false),
-          children: open && /* @__PURE__ */ jsxs34(ColorPicker, { defaultValue: hexValue, children: [
-            /* @__PURE__ */ jsx50(ColorReader, { onHexChange: handlePickerHex }),
-            /* @__PURE__ */ jsx50(ColorPickerSelection, { className: "h-36 rounded-lg" }),
-            /* @__PURE__ */ jsxs34("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx50(ColorPickerEyeDropper, {}),
-              /* @__PURE__ */ jsxs34("div", { className: "flex flex-col gap-1.5 flex-1", children: [
-                /* @__PURE__ */ jsx50(ColorPickerHue, {}),
-                /* @__PURE__ */ jsx50(ColorPickerAlpha, {})
-              ] })
-            ] }),
-            /* @__PURE__ */ jsx50(ColorPickerHexOutput, {})
-          ] })
-        }
-      ) })
-    ] }),
-    /* @__PURE__ */ jsx50(
-      "input",
+  useEffect6(() => {
+    if (open) pendingHexRef.current = hexValue;
+  }, [open, hexValue]);
+  const handleHexChange = useCallback2((hex) => {
+    pendingHexRef.current = hex;
+  }, []);
+  const handleOpenChange = useCallback2((newOpen) => {
+    if (!newOpen && open) {
+      const pending = pendingHexRef.current;
+      if (pending && pending !== hexValue) {
+        onChangeRef.current(hexToHsl(pending));
+      }
+    }
+    setOpen(newOpen);
+  }, [open, hexValue]);
+  return /* @__PURE__ */ jsxs34(Popover2.Root, { open, onOpenChange: disabled ? void 0 : handleOpenChange, children: [
+    /* @__PURE__ */ jsx50(Popover2.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs34(
+      "button",
       {
-        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),
+        type: "button",
         disabled,
-        placeholder: "H S% L%",
         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
-        )
+          "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
+        ),
+        "aria-label": "Pick color",
+        children: [
+          /* @__PURE__ */ jsx50(
+            "span",
+            {
+              className: "w-4 h-4 rounded-full border border-white/20 shrink-0 inline-block",
+              style: { background: cssColor }
+            }
+          ),
+          /* @__PURE__ */ jsx50("span", { children: hexValue.toUpperCase() })
+        ]
       }
-    )
+    ) }),
+    /* @__PURE__ */ jsx50(Popover2.Portal, { children: /* @__PURE__ */ jsx50(
+      Popover2.Content,
+      {
+        sideOffset: 6,
+        align: "start",
+        className: cn(
+          "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__ */ jsxs34(ColorPicker, { defaultValue: hexValue, className: "gap-2.5", children: [
+          /* @__PURE__ */ jsx50(ColorReader, { onHexChange: handleHexChange }),
+          /* @__PURE__ */ jsx50(ColorPickerSelection, { className: "h-32 w-full rounded-lg" }),
+          /* @__PURE__ */ jsxs34("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx50(ColorPickerEyeDropper, {}),
+            /* @__PURE__ */ jsxs34("div", { className: "flex flex-col gap-1.5 flex-1", children: [
+              /* @__PURE__ */ jsx50(ColorPickerHue, {}),
+              /* @__PURE__ */ jsx50(ColorPickerAlpha, {})
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs34("div", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsx50(ColorPickerOutput, {}),
+            /* @__PURE__ */ jsx50(ColorPickerFormat, {})
+          ] })
+        ] }, hexValue)
+      }
+    ) })
   ] });
 }
 
@@ -3856,8 +3907,10 @@ export {
   ColorPicker,
   ColorPickerAlpha,
   ColorPickerEyeDropper,
+  ColorPickerFormat,
   ColorPickerHexOutput,
   ColorPickerHue,
+  ColorPickerOutput,
   ColorPickerSelection,
   ConfirmDialog,
   DashboardLayout,