@webdevarif/dashui 0.3.11 → 0.3.13

package/dist/index.mjs

@@ -3213,8 +3213,7 @@ var ColorPicker = ({
     notifyRef.current = onChange;
   }, [onChange]);
   const notify = useCallback((h, s, l, a) => {
-    const hex = Color.hsl(h, s, l).alpha(a / 100).hexa();
-    notifyRef.current?.(hex);
+    notifyRef.current?.(Color.hsl(h, s, l).alpha(a / 100).hexa());
   }, []);
   const setHue = useCallback((h) => {
     setHueState(h);
@@ -3232,7 +3231,7 @@ 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, mode, setMode }, children: /* @__PURE__ */ jsx49("div", { className: cn("flex flex-col gap-3", className), ...props, children }) });
+  return /* @__PURE__ */ jsx49(ColorPickerContext.Provider, { value: { hue, saturation, lightness, alpha, mode, setHue, setSaturation, setLightness, setAlpha, setMode }, children: /* @__PURE__ */ jsx49("div", { className: cn("flex flex-col gap-3", className), ...props, children }) });
 };
 var ColorPickerSelection = memo(({ className, ...props }) => {
   const containerRef = useRef4(null);
@@ -3256,8 +3255,7 @@ var ColorPickerSelection = memo(({ className, ...props }) => {
     setPosX(x);
     setPosY(y);
     setSaturation(x * 100);
-    const topL = x < 0.01 ? 100 : 50 + 50 * (1 - x);
-    setLightness(topL * (1 - y));
+    setLightness((x < 0.01 ? 100 : 50 + 50 * (1 - x)) * (1 - y));
   }, [isDragging, setSaturation, setLightness]);
   useEffect5(() => {
     if (!isDragging) return;
@@ -3285,11 +3283,7 @@ var ColorPickerSelection = memo(({ className, ...props }) => {
         "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)"
-          }
+          style: { left: `${posX * 100}%`, top: `${posY * 100}%`, boxShadow: "0 0 0 1px rgba(0,0,0,0.6)" }
         }
       )
     }
@@ -3298,85 +3292,42 @@ var ColorPickerSelection = memo(({ className, ...props }) => {
 ColorPickerSelection.displayName = "ColorPickerSelection";
 var ColorPickerHue = ({ className, ...props }) => {
   const { hue, setHue } = useColorPicker();
-  return /* @__PURE__ */ jsxs33(
-    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__ */ jsx49(Slider.Track, { className: "relative h-3 w-full grow rounded-full bg-[linear-gradient(90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)]", children: /* @__PURE__ */ jsx49(Slider.Range, { className: "absolute h-full" }) }),
-        /* @__PURE__ */ jsx49(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__ */ jsxs33(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__ */ jsx49(Slider.Track, { className: "relative h-3 w-full grow rounded-full bg-[linear-gradient(90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)]", children: /* @__PURE__ */ jsx49(Slider.Range, { className: "absolute h-full" }) }),
+    /* @__PURE__ */ jsx49(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__ */ jsxs33(
-    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__ */ jsx49(
-          Slider.Track,
-          {
-            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__ */ jsx49(Slider.Range, { className: "absolute h-full" })
-          }
-        ),
-        /* @__PURE__ */ jsx49(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 ColorPickerHexOutput = ({ className, ...props }) => {
-  const { hue, saturation, lightness, alpha } = useColorPicker();
-  const hex = Color.hsl(hue, saturation, lightness).alpha(alpha / 100).hex();
-  return /* @__PURE__ */ jsxs33("div", { className: cn("flex items-center gap-1.5 px-1", className), ...props, children: [
-    /* @__PURE__ */ jsx49("div", { className: "w-5 h-5 rounded border border-white/20 shrink-0", style: { background: `hsl(${hue},${saturation}%,${lightness}%)` } }),
-    /* @__PURE__ */ jsx49("span", { className: "text-xs font-mono text-white/50 flex-1", children: hex })
+  return /* @__PURE__ */ jsxs33(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__ */ jsx49(Slider.Track, { className: "relative h-3 w-full grow rounded-full", style: {
+      backgroundImage: `linear-gradient(90deg,transparent,hsl(${hue},${saturation}%,${lightness}%)),url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==")`
+    }, children: /* @__PURE__ */ jsx49(Slider.Range, { className: "absolute h-full" }) }),
+    /* @__PURE__ */ jsx49(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 ColorPickerEyeDropper = ({ className, ...props }) => {
   const { setHue, setSaturation, setLightness, setAlpha } = useColorPicker();
-  const pick = async () => {
-    try {
-      const result = await new EyeDropper().open();
-      const c = Color(result.sRGBHex);
-      setHue(c.hue());
-      setSaturation(c.saturationl());
-      setLightness(c.lightness());
-      setAlpha(100);
-    } catch {
-    }
-  };
   return /* @__PURE__ */ jsx49(
     "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
-      ),
+      onClick: async () => {
+        try {
+          const r = await new EyeDropper().open();
+          const c = Color(r.sRGBHex);
+          setHue(c.hue());
+          setSaturation(c.saturationl());
+          setLightness(c.lightness());
+          setAlpha(100);
+        } catch {
+        }
+      },
+      className: cn("shrink-0 focus:outline-none", className),
+      style: { width: 32, height: 32, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: 6, border: "1px solid rgba(255,255,255,0.12)", backgroundColor: "rgba(255,255,255,0.05)", color: "rgba(255,255,255,0.5)", cursor: "pointer" },
       ...props,
-      children: /* @__PURE__ */ jsxs33("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+      children: /* @__PURE__ */ jsxs33("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
         /* @__PURE__ */ jsx49("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__ */ jsx49("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__ */ jsx49("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" })
@@ -3386,17 +3337,31 @@ var ColorPickerEyeDropper = ({ className, ...props }) => {
 };
 var ColorPickerOutput = ({ className, ...props }) => {
   const { mode, setMode } = useColorPicker();
-  return /* @__PURE__ */ jsxs33(Select, { value: mode, onValueChange: setMode, children: [
-    /* @__PURE__ */ jsx49(SelectTrigger, { className: cn("h-7 w-[4.5rem] shrink-0 text-xs px-2 border-white/10 bg-white/5 text-white/70 rounded-md", className), children: /* @__PURE__ */ jsx49(SelectValue, {}) }),
-    /* @__PURE__ */ jsx49(SelectContent, { className: "bg-[#1a1c2e] border border-white/10 text-white min-w-[4.5rem]", children: ["HEX", "HSL", "RGB"].map((f) => /* @__PURE__ */ jsx49(
-      SelectItem,
+  return /* @__PURE__ */ jsxs33("div", { className: cn("relative shrink-0", className), ...props, children: [
+    /* @__PURE__ */ jsx49(
+      "select",
       {
-        value: f,
-        className: "text-xs text-white/70 focus:bg-white/10 focus:text-white data-[state=checked]:text-white",
-        children: f
-      },
-      f
-    )) })
+        value: mode,
+        onChange: (e) => setMode(e.target.value),
+        style: {
+          height: 32,
+          width: 72,
+          backgroundColor: "rgba(255,255,255,0.06)",
+          border: "1px solid rgba(255,255,255,0.12)",
+          borderRadius: 6,
+          color: "rgba(255,255,255,0.75)",
+          fontSize: 12,
+          paddingLeft: 8,
+          paddingRight: 24,
+          outline: "none",
+          cursor: "pointer",
+          appearance: "none",
+          WebkitAppearance: "none"
+        },
+        children: ["HEX", "HSL", "RGB"].map((f) => /* @__PURE__ */ jsx49("option", { value: f, style: { backgroundColor: "#1e2130", color: "rgba(255,255,255,0.8)" }, children: f }, f))
+      }
+    ),
+    /* @__PURE__ */ jsx49("svg", { style: { position: "absolute", right: 6, top: "50%", transform: "translateY(-50%)", width: 12, height: 12, color: "rgba(255,255,255,0.35)", pointerEvents: "none" }, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: /* @__PURE__ */ jsx49("path", { d: "m6 9 6 6 6-6" }) })
   ] });
 };
 var ColorPickerFormat = ({ className, ...props }) => {
@@ -3422,23 +3387,22 @@ var ColorPickerFormat = ({ className, ...props }) => {
   const tryApply = (raw) => {
     try {
       if (mode === "HEX") {
-        const hex = raw.startsWith("#") ? raw : `#${raw}`;
-        const c = Color(hex);
+        const c = Color(raw.startsWith("#") ? raw : `#${raw}`);
         setHue(c.hue());
         setSaturation(c.saturationl());
         setLightness(c.lightness());
         setAlpha(c.alpha() * 100);
       } else if (mode === "HSL") {
-        const parts = raw.split(/[\s,%]+/).filter(Boolean);
-        if (parts.length >= 3) {
-          setHue(+parts[0]);
-          setSaturation(+parts[1]);
-          setLightness(+parts[2]);
+        const p = raw.split(/[\s,%]+/).filter(Boolean);
+        if (p.length >= 3) {
+          setHue(+p[0]);
+          setSaturation(+p[1]);
+          setLightness(+p[2]);
         }
       } else if (mode === "RGB") {
-        const parts = raw.split(/[\s,]+/).filter(Boolean);
-        if (parts.length >= 3) {
-          const c = Color.rgb(+parts[0], +parts[1], +parts[2]);
+        const p = raw.split(/[\s,]+/).filter(Boolean);
+        if (p.length >= 3) {
+          const c = Color.rgb(+p[0], +p[1], +p[2]);
           setHue(c.hue());
           setSaturation(c.saturationl());
           setLightness(c.lightness());
@@ -3464,15 +3428,32 @@ var ColorPickerFormat = ({ className, ...props }) => {
         tryApply(localVal);
         setFocused(false);
       },
-      className: cn(
-        "flex-1 min-w-0 h-7 bg-white/5 border border-white/10 rounded-md px-2",
-        "text-xs text-white/70 font-mono outline-none focus:border-white/30",
-        className
-      ),
+      style: {
+        flex: 1,
+        minWidth: 0,
+        height: 32,
+        backgroundColor: "rgba(255,255,255,0.05)",
+        border: "1px solid rgba(255,255,255,0.12)",
+        borderRadius: 6,
+        padding: "0 8px",
+        color: "rgba(255,255,255,0.75)",
+        fontSize: 12,
+        fontFamily: "monospace",
+        outline: "none"
+      },
+      className,
       ...props
     }
   );
 };
+var ColorPickerHexOutput = ({ className, ...props }) => {
+  const { hue, saturation, lightness } = useColorPicker();
+  const hex = Color.hsl(hue, saturation, lightness).hex();
+  return /* @__PURE__ */ jsxs33("div", { className: cn("flex items-center gap-1.5 px-0.5", className), ...props, children: [
+    /* @__PURE__ */ jsx49("div", { className: "w-5 h-5 rounded border border-white/20 shrink-0", style: { background: `hsl(${hue},${saturation}%,${lightness}%)` } }),
+    /* @__PURE__ */ jsx49("span", { className: "text-xs font-mono text-white/50", children: hex })
+  ] });
+};
 
 // src/components/ui/hsl-color-input.tsx
 import { jsx as jsx50, jsxs as jsxs34 } from "react/jsx-runtime";