@webdevarif/dashui 0.3.6 → 0.3.8

package/dist/index.d.mts

@@ -572,7 +572,7 @@ declare const ColorPickerHexOutput: ({ className, ...props }: HTMLAttributes<HTM
 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<HTMLDivElement>;
+type ColorPickerFormatProps = HTMLAttributes<HTMLInputElement>;
 declare const ColorPickerFormat: ({ className, ...props }: ColorPickerFormatProps) => react_jsx_runtime.JSX.Element;
 
 declare function useDisclosure(initial?: boolean): {

package/dist/index.d.ts

@@ -572,7 +572,7 @@ declare const ColorPickerHexOutput: ({ className, ...props }: HTMLAttributes<HTM
 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<HTMLDivElement>;
+type ColorPickerFormatProps = HTMLAttributes<HTMLInputElement>;
 declare const ColorPickerFormat: ({ className, ...props }: ColorPickerFormatProps) => react_jsx_runtime.JSX.Element;
 
 declare function useDisclosure(initial?: boolean): {

package/dist/index.js

@@ -3380,9 +3380,13 @@ var ColorPicker = ({
 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 { hue, saturation, lightness, setSaturation, setLightness } = useColorPicker();
+  const [posX, setPosX] = (0, import_react.useState)(() => saturation / 100);
+  const [posY, setPosY] = (0, import_react.useState)(() => {
+    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 = (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]
@@ -3525,42 +3529,88 @@ var ColorPickerEyeDropper = ({ className, ...props }) => {
 };
 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))
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: cn("relative shrink-0", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+      "select",
+      {
+        value: mode,
+        onChange: (e) => setMode(e.target.value),
+        className: "appearance-none h-7 bg-white/8 border border-white/10 rounded-md text-xs text-white/70 pl-2 pr-6 outline-none hover:border-white/20 cursor-pointer",
+        style: { backgroundColor: "rgba(255,255,255,0.05)" },
+        children: ["HEX", "HSL", "RGB"].map((f) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("option", { value: f, style: { background: "#1a1c2e" }, children: f }, f))
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("svg", { className: "pointer-events-none absolute right-1.5 top-1/2 -translate-y-1/2 w-3 h-3 text-white/40", 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 }) => {
-  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]}`;
+  const { hue, saturation, lightness, alpha, mode, setHue, setSaturation, setLightness, setAlpha } = useColorPicker();
+  const [focused, setFocused] = (0, import_react.useState)(false);
+  const [localVal, setLocalVal] = (0, import_react.useState)("");
+  const computedVal = (() => {
+    try {
+      const c = import_color.default.hsl(hue, saturation, lightness).alpha(alpha / 100);
+      if (mode === "HEX") return c.hex().toUpperCase();
+      if (mode === "HSL") return `${Math.round(hue)} ${Math.round(saturation)}% ${Math.round(lightness)}%`;
+      if (mode === "RGB") {
+        const [r, g, b] = c.rgb().array().map(Math.round);
+        return `${r}, ${g}, ${b}`;
+      }
+    } catch {
     }
-  } catch {
-    displayValue = "";
-  }
+    return "";
+  })();
+  (0, import_react.useEffect)(() => {
+    if (!focused) setLocalVal(computedVal);
+  }, [computedVal, focused]);
+  const tryApply = (raw) => {
+    try {
+      if (mode === "HEX") {
+        const hex = raw.startsWith("#") ? raw : `#${raw}`;
+        const c = (0, import_color.default)(hex);
+        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]);
+        }
+      } 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]);
+          setHue(c.hue());
+          setSaturation(c.saturationl());
+          setLightness(c.lightness());
+        }
+      }
+    } catch {
+    }
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
     "input",
     {
-      readOnly: true,
       type: "text",
-      value: displayValue,
+      value: focused ? localVal : computedVal,
+      onChange: (e) => {
+        setLocalVal(e.target.value);
+        tryApply(e.target.value);
+      },
+      onFocus: () => {
+        setFocused(true);
+        setLocalVal(computedVal);
+      },
+      onBlur: () => {
+        tryApply(localVal);
+        setFocused(false);
+      },
       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",
+        "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
       ),
       ...props
@@ -3658,7 +3708,7 @@ function HslColorInput({ value, onChange, className, inputClassName, disabled })
         sideOffset: 6,
         align: "start",
         className: cn(
-          "z-[9999] rounded-xl shadow-2xl p-3 w-[14rem]",
+          "z-[9999] rounded-xl shadow-2xl p-3 w-[220px]",
           "bg-[#0f1117] border border-white/10",
           "focus:outline-none"
         ),
@@ -3673,9 +3723,9 @@ function HslColorInput({ value, onChange, className, inputClassName, disabled })
               /* @__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.jsxs)("div", { className: "flex items-center gap-1.5 min-w-0", children: [
             /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ColorPickerOutput, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ColorPickerFormat, {})
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ColorPickerFormat, { className: "min-w-0" })
           ] })
         ] }, hexValue)
       }