@webdevarif/dashui 0.3.3 → 0.3.4

package/dist/index.mjs

@@ -3165,9 +3165,9 @@ function PostSidebarSection({
 }
 
 // src/components/ui/hsl-color-input.tsx
-import { useState as useState7, useEffect as useEffect5, useCallback } from "react";
+import { useState as useState7, useRef as useRef4, useEffect as useEffect5, useCallback } from "react";
+import { createPortal } from "react-dom";
 import { HslColorPicker } from "react-colorful";
-import * as Popover2 from "@radix-ui/react-popover";
 import { jsx as jsx49, jsxs as jsxs33 } from "react/jsx-runtime";
 function parseHsl(value) {
   if (!value) return { h: 0, s: 0, l: 0 };
@@ -3178,83 +3178,117 @@ function parseHsl(value) {
     l: parseFloat(parts[2]) || 0
   };
 }
-function formatHsl(color) {
-  return `${Math.round(color.h)} ${Math.round(color.s)}% ${Math.round(color.l)}%`;
+function formatHsl(c) {
+  return `${Math.round(c.h)} ${Math.round(c.s)}% ${Math.round(c.l)}%`;
 }
 function HslColorInput({ value, onChange, className, inputClassName, disabled }) {
+  const [open, setOpen] = useState7(false);
+  const [pos, setPos] = useState7({ top: 0, left: 0 });
   const [inputVal, setInputVal] = useState7(value);
+  const [mounted, setMounted] = useState7(false);
+  const triggerRef = useRef4(null);
+  const pickerRef = useRef4(null);
+  useEffect5(() => {
+    setMounted(true);
+  }, []);
   useEffect5(() => {
     setInputVal(value);
   }, [value]);
-  const hslColor = parseHsl(value);
+  const openPicker = useCallback(() => {
+    const rect = triggerRef.current?.getBoundingClientRect();
+    if (!rect) return;
+    const pickerW = 228;
+    let left = rect.left;
+    if (left + pickerW > window.innerWidth - 8) left = window.innerWidth - pickerW - 8;
+    setPos({ top: rect.bottom + 6, left: Math.max(8, left) });
+    setOpen(true);
+  }, []);
+  useEffect5(() => {
+    if (!open) return;
+    const handler = (e) => {
+      const target = e.target;
+      if (pickerRef.current?.contains(target)) return;
+      if (triggerRef.current?.contains(target)) return;
+      setOpen(false);
+    };
+    document.addEventListener("pointerdown", handler, true);
+    return () => document.removeEventListener("pointerdown", handler, true);
+  }, [open]);
   const cssColor = value ? `hsl(${value})` : "transparent";
-  const handlePickerChange = useCallback((color) => {
-    const formatted = formatHsl(color);
-    setInputVal(formatted);
-    onChange(formatted);
-  }, [onChange]);
-  const handleInputChange = (e) => {
-    const v = e.target.value;
-    setInputVal(v);
-    if (/^\d+(\.\d+)?\s+\d+(\.\d+)?%?\s+\d+(\.\d+)?%?$/.test(v.trim())) {
-      onChange(v);
+  const picker = /* @__PURE__ */ jsxs33(
+    "div",
+    {
+      ref: pickerRef,
+      style: { position: "fixed", top: pos.top, left: pos.left, zIndex: 9999 },
+      className: "bg-[#1a1c2e] border border-white/10 rounded-xl shadow-2xl p-3 flex flex-col gap-3",
+      onPointerDown: (e) => e.stopPropagation(),
+      children: [
+        /* @__PURE__ */ jsx49(
+          HslColorPicker,
+          {
+            color: parseHsl(value),
+            onChange: (c) => {
+              const formatted = formatHsl(c);
+              setInputVal(formatted);
+              onChange(formatted);
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs33("div", { className: "flex items-center gap-2 px-1", children: [
+          /* @__PURE__ */ jsx49("div", { className: "w-5 h-5 rounded border border-white/10 shrink-0", style: { background: cssColor } }),
+          /* @__PURE__ */ jsx49("span", { className: "text-xs font-mono text-white/40 flex-1 truncate", children: value || "none" }),
+          /* @__PURE__ */ jsx49(
+            "button",
+            {
+              onClick: () => setOpen(false),
+              className: "text-white/30 hover:text-white/70 text-xs px-1.5 py-0.5 rounded hover:bg-white/5 transition-colors",
+              children: "Done"
+            }
+          )
+        ] })
+      ]
     }
-  };
+  );
   return /* @__PURE__ */ jsxs33("div", { className: cn("flex items-center gap-1.5", className), children: [
-    /* @__PURE__ */ jsxs33(Popover2.Root, { children: [
-      /* @__PURE__ */ jsx49(Popover2.Trigger, { asChild: true, disabled, children: /* @__PURE__ */ jsx49(
-        "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__ */ jsx49(Popover2.Portal, { children: /* @__PURE__ */ jsxs33(
-        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__ */ jsx49(HslColorPicker, { color: hslColor, onChange: handlePickerChange }),
-            /* @__PURE__ */ jsxs33("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx49("div", { className: "w-6 h-6 rounded border border-white/10 shrink-0", style: { background: cssColor } }),
-              /* @__PURE__ */ jsx49("span", { className: "text-xs font-mono text-white/50 truncate", children: value || "none" })
-            ] }),
-            /* @__PURE__ */ jsx49(Popover2.Arrow, { className: "fill-white/10" })
-          ]
-        }
-      ) })
-    ] }),
+    /* @__PURE__ */ jsx49(
+      "button",
+      {
+        ref: triggerRef,
+        type: "button",
+        disabled,
+        onClick: () => open ? setOpen(false) : openPicker(),
+        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__ */ jsx49(
       "input",
       {
         type: "text",
         value: inputVal,
-        onChange: handleInputChange,
+        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),
         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 disabled:cursor-not-allowed",
+          "text-xs text-white/70 font-mono outline-none focus:border-white/30",
+          "placeholder:text-white/20 disabled:opacity-50",
           inputClassName
         )
       }
-    )
+    ),
+    mounted && open && createPortal(picker, document.body)
   ] });
 }