@webdevarif/dashui 0.3.11 → 0.3.13

package/dist/index.d.mts

@@ -552,11 +552,11 @@ interface ColorPickerContextValue {
     saturation: number;
     lightness: number;
     alpha: number;
+    mode: string;
     setHue: (h: number) => void;
     setSaturation: (s: number) => void;
     setLightness: (l: number) => void;
     setAlpha: (a: number) => void;
-    mode: string;
     setMode: (mode: string) => void;
 }
 declare const useColorPicker: () => ColorPickerContextValue;
@@ -568,12 +568,12 @@ declare const ColorPicker: ({ defaultValue, onChange, className, children, ...pr
 declare const ColorPickerSelection: React.MemoExoticComponent<({ className, ...props }: HTMLAttributes<HTMLDivElement>) => react_jsx_runtime.JSX.Element>;
 declare const ColorPickerHue: ({ className, ...props }: Omit<ComponentProps<typeof Slider.Root>, "value" | "onValueChange" | "max" | "step">) => react_jsx_runtime.JSX.Element;
 declare const ColorPickerAlpha: ({ className, ...props }: Omit<ComponentProps<typeof Slider.Root>, "value" | "onValueChange" | "max" | "step">) => react_jsx_runtime.JSX.Element;
-declare const ColorPickerHexOutput: ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => react_jsx_runtime.JSX.Element;
 declare const ColorPickerEyeDropper: ({ className, ...props }: HTMLAttributes<HTMLButtonElement>) => react_jsx_runtime.JSX.Element;
 type ColorPickerOutputProps = HTMLAttributes<HTMLDivElement>;
 declare const ColorPickerOutput: ({ className, ...props }: ColorPickerOutputProps) => react_jsx_runtime.JSX.Element;
 type ColorPickerFormatProps = HTMLAttributes<HTMLInputElement>;
 declare const ColorPickerFormat: ({ className, ...props }: ColorPickerFormatProps) => react_jsx_runtime.JSX.Element;
+declare const ColorPickerHexOutput: ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => react_jsx_runtime.JSX.Element;
 
 declare function useDisclosure(initial?: boolean): {
     isOpen: boolean;

package/dist/index.d.ts

@@ -552,11 +552,11 @@ interface ColorPickerContextValue {
     saturation: number;
     lightness: number;
     alpha: number;
+    mode: string;
     setHue: (h: number) => void;
     setSaturation: (s: number) => void;
     setLightness: (l: number) => void;
     setAlpha: (a: number) => void;
-    mode: string;
     setMode: (mode: string) => void;
 }
 declare const useColorPicker: () => ColorPickerContextValue;
@@ -568,12 +568,12 @@ declare const ColorPicker: ({ defaultValue, onChange, className, children, ...pr
 declare const ColorPickerSelection: React.MemoExoticComponent<({ className, ...props }: HTMLAttributes<HTMLDivElement>) => react_jsx_runtime.JSX.Element>;
 declare const ColorPickerHue: ({ className, ...props }: Omit<ComponentProps<typeof Slider.Root>, "value" | "onValueChange" | "max" | "step">) => react_jsx_runtime.JSX.Element;
 declare const ColorPickerAlpha: ({ className, ...props }: Omit<ComponentProps<typeof Slider.Root>, "value" | "onValueChange" | "max" | "step">) => react_jsx_runtime.JSX.Element;
-declare const ColorPickerHexOutput: ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => react_jsx_runtime.JSX.Element;
 declare const ColorPickerEyeDropper: ({ className, ...props }: HTMLAttributes<HTMLButtonElement>) => react_jsx_runtime.JSX.Element;
 type ColorPickerOutputProps = HTMLAttributes<HTMLDivElement>;
 declare const ColorPickerOutput: ({ className, ...props }: ColorPickerOutputProps) => react_jsx_runtime.JSX.Element;
 type ColorPickerFormatProps = HTMLAttributes<HTMLInputElement>;
 declare const ColorPickerFormat: ({ className, ...props }: ColorPickerFormatProps) => react_jsx_runtime.JSX.Element;
+declare const ColorPickerHexOutput: ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => react_jsx_runtime.JSX.Element;
 
 declare function useDisclosure(initial?: boolean): {
     isOpen: boolean;

package/dist/index.js

@@ -3356,8 +3356,7 @@ var ColorPicker = ({
     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);
+    notifyRef.current?.(import_color.default.hsl(h, s, l).alpha(a / 100).hexa());
   }, []);
   const setHue = (0, import_react.useCallback)((h) => {
     setHueState(h);
@@ -3375,7 +3374,7 @@ var ColorPicker = ({
     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 }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ColorPickerContext.Provider, { value: { hue, saturation, lightness, alpha, mode, setHue, setSaturation, setLightness, setAlpha, 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);
@@ -3399,8 +3398,7 @@ var ColorPickerSelection = (0, import_react.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]);
   (0, import_react.useEffect)(() => {
     if (!isDragging) return;
@@ -3428,11 +3426,7 @@ var ColorPickerSelection = (0, import_react.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)" }
         }
       )
     }
@@ -3441,85 +3435,42 @@ var ColorPickerSelection = (0, import_react.memo)(({ className, ...props }) => {
 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)" } })
-      ]
-    }
-  );
+  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)(
-          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__ */ (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 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 })
+  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)(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__ */ (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 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
-      ),
+      onClick: async () => {
+        try {
+          const r = await new EyeDropper().open();
+          const c = (0, import_color.default)(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__ */ (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: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("svg", { width: "14", height: "14", 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" })
@@ -3529,17 +3480,31 @@ var ColorPickerEyeDropper = ({ className, ...props }) => {
 };
 var ColorPickerOutput = ({ className, ...props }) => {
   const { mode, setMode } = useColorPicker();
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(Select, { value: mode, onValueChange: setMode, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(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__ */ (0, import_jsx_runtime49.jsx)(SelectValue, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(SelectContent, { className: "bg-[#1a1c2e] border border-white/10 text-white min-w-[4.5rem]", children: ["HEX", "HSL", "RGB"].map((f) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-      SelectItem,
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: cn("relative shrink-0", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+      "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__ */ (0, import_jsx_runtime49.jsx)("option", { value: f, style: { backgroundColor: "#1e2130", color: "rgba(255,255,255,0.8)" }, children: f }, f))
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("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__ */ (0, import_jsx_runtime49.jsx)("path", { d: "m6 9 6 6 6-6" }) })
   ] });
 };
 var ColorPickerFormat = ({ className, ...props }) => {
@@ -3565,23 +3530,22 @@ var ColorPickerFormat = ({ className, ...props }) => {
   const tryApply = (raw) => {
     try {
       if (mode === "HEX") {
-        const hex = raw.startsWith("#") ? raw : `#${raw}`;
-        const c = (0, import_color.default)(hex);
+        const c = (0, import_color.default)(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 = import_color.default.rgb(+parts[0], +parts[1], +parts[2]);
+        const p = raw.split(/[\s,]+/).filter(Boolean);
+        if (p.length >= 3) {
+          const c = import_color.default.rgb(+p[0], +p[1], +p[2]);
           setHue(c.hue());
           setSaturation(c.saturationl());
           setLightness(c.lightness());
@@ -3607,15 +3571,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 = import_color.default.hsl(hue, saturation, lightness).hex();
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: cn("flex items-center gap-1.5 px-0.5", 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", children: hex })
+  ] });
+};
 
 // src/components/ui/hsl-color-input.tsx
 var import_jsx_runtime50 = require("react/jsx-runtime");