@webdevarif/dashui 0.3.2 → 0.3.3

package/dist/index.d.mts

@@ -543,7 +543,7 @@ interface HslColorInputProps {
     inputClassName?: string;
     disabled?: boolean;
 }
-declare function HslColorInput({ value, onChange, className, inputClassName, disabled, }: HslColorInputProps): react_jsx_runtime.JSX.Element;
+declare function HslColorInput({ value, onChange, className, inputClassName, disabled }: HslColorInputProps): react_jsx_runtime.JSX.Element;
 
 declare function useDisclosure(initial?: boolean): {
     isOpen: boolean;

package/dist/index.d.ts

@@ -543,7 +543,7 @@ interface HslColorInputProps {
     inputClassName?: string;
     disabled?: boolean;
 }
-declare function HslColorInput({ value, onChange, className, inputClassName, disabled, }: HslColorInputProps): react_jsx_runtime.JSX.Element;
+declare function HslColorInput({ value, onChange, className, inputClassName, disabled }: HslColorInputProps): react_jsx_runtime.JSX.Element;
 
 declare function useDisclosure(initial?: boolean): {
     isOpen: boolean;

package/dist/index.js

@@ -3310,41 +3310,25 @@ function PostSidebarSection({
 // src/components/ui/hsl-color-input.tsx
 var import_react = require("react");
 var import_react_colorful = require("react-colorful");
+var Popover2 = __toESM(require("@radix-ui/react-popover"));
 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+/);
-  const h = parseFloat(parts[0]) || 0;
-  const s = parseFloat(parts[1]) || 0;
-  const l = parseFloat(parts[2]) || 0;
-  return { h, s, l };
+  return {
+    h: parseFloat(parts[0]) || 0,
+    s: parseFloat(parts[1]) || 0,
+    l: parseFloat(parts[2]) || 0
+  };
 }
 function formatHsl(color) {
   return `${Math.round(color.h)} ${Math.round(color.s)}% ${Math.round(color.l)}%`;
 }
-function HslColorInput({
-  value,
-  onChange,
-  className,
-  inputClassName,
-  disabled
-}) {
-  const [open, setOpen] = (0, import_react.useState)(false);
+function HslColorInput({ value, onChange, className, inputClassName, disabled }) {
   const [inputVal, setInputVal] = (0, import_react.useState)(value);
-  const containerRef = (0, import_react.useRef)(null);
   (0, import_react.useEffect)(() => {
     setInputVal(value);
   }, [value]);
-  (0, import_react.useEffect)(() => {
-    if (!open) return;
-    const handler = (e) => {
-      if (containerRef.current && !containerRef.current.contains(e.target)) {
-        setOpen(false);
-      }
-    };
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, [open]);
   const hslColor = parseHsl(value);
   const cssColor = value ? `hsl(${value})` : "transparent";
   const handlePickerChange = (0, import_react.useCallback)((color) => {
@@ -3355,39 +3339,56 @@ function HslColorInput({
   const handleInputChange = (e) => {
     const v = e.target.value;
     setInputVal(v);
-    if (/^\d+\s+\d+%?\s+\d+%?$/.test(v.trim()) || /^\d+(\.\d+)?\s+\d+(\.\d+)?%\s+\d+(\.\d+)?%$/.test(v.trim())) {
+    if (/^\d+(\.\d+)?\s+\d+(\.\d+)?%?\s+\d+(\.\d+)?%?$/.test(v.trim())) {
       onChange(v);
     }
   };
-  const handleInputBlur = () => {
-    setInputVal(value);
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { ref: containerRef, className: cn("relative flex items-center gap-1.5", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-      "button",
-      {
-        type: "button",
-        disabled,
-        onClick: () => setOpen((o) => !o),
-        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 focus:ring-1 focus:ring-white/20",
-          disabled && "opacity-50 cursor-not-allowed"
-        ),
-        style: { background: cssColor },
-        title: value,
-        "aria-label": "Open color picker"
-      }
-    ),
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: cn("flex items-center gap-1.5", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(Popover2.Root, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Popover2.Trigger, { asChild: true, disabled, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+        "button",
+        {
+          type: "button",
+          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 focus:ring-1 focus:ring-white/20",
+            disabled && "opacity-50 cursor-not-allowed"
+          ),
+          style: { background: cssColor },
+          "aria-label": "Open color picker"
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Popover2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+        Popover2.Content,
+        {
+          sideOffset: 8,
+          align: "start",
+          className: cn(
+            "z-[9999] rounded-xl shadow-2xl p-3",
+            "bg-[#1a1c2e] border border-white/10",
+            "flex flex-col gap-3",
+            "animate-in fade-in-0 zoom-in-95"
+          ),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_react_colorful.HslColorPicker, { color: hslColor, onChange: handlePickerChange }),
+            /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "w-6 h-6 rounded border border-white/10 shrink-0", style: { background: cssColor } }),
+              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "text-xs font-mono text-white/50 truncate", children: value || "none" })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Popover2.Arrow, { className: "fill-white/10" })
+          ]
+        }
+      ) })
+    ] }),
     /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       "input",
       {
         type: "text",
         value: inputVal,
         onChange: handleInputChange,
-        onBlur: handleInputBlur,
+        onBlur: () => setInputVal(value),
         disabled,
-        placeholder: "0 0% 0%",
+        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",
@@ -3396,30 +3397,7 @@ function HslColorInput({
           inputClassName
         )
       }
-    ),
-    open && /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: cn(
-      "absolute z-50 top-full left-0 mt-2",
-      "bg-[#1a1c2e] border border-white/10 rounded-xl shadow-2xl p-3",
-      "flex flex-col gap-3"
-    ), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-        import_react_colorful.HslColorPicker,
-        {
-          color: hslColor,
-          onChange: handlePickerChange
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-          "div",
-          {
-            className: "w-6 h-6 rounded border border-white/10 shrink-0",
-            style: { background: cssColor }
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "text-xs font-mono text-white/50 truncate", children: value || "none" })
-      ] })
-    ] })
+    )
   ] });
 }