@webdevarif/dashui 0.3.2 → 0.3.4

package/dist/index.mjs

@@ -3166,74 +3166,104 @@ function PostSidebarSection({
 
 // src/components/ui/hsl-color-input.tsx
 import { useState as useState7, useRef as useRef4, useEffect as useEffect5, useCallback } from "react";
+import { createPortal } from "react-dom";
 import { HslColorPicker } from "react-colorful";
 import { jsx as jsx49, jsxs as jsxs33 } from "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 formatHsl(c) {
+  return `${Math.round(c.h)} ${Math.round(c.s)}% ${Math.round(c.l)}%`;
 }
-function HslColorInput({
-  value,
-  onChange,
-  className,
-  inputClassName,
-  disabled
-}) {
+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 containerRef = useRef4(null);
+  const [mounted, setMounted] = useState7(false);
+  const triggerRef = useRef4(null);
+  const pickerRef = useRef4(null);
+  useEffect5(() => {
+    setMounted(true);
+  }, []);
   useEffect5(() => {
     setInputVal(value);
   }, [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) => {
-      if (containerRef.current && !containerRef.current.contains(e.target)) {
-        setOpen(false);
-      }
+      const target = e.target;
+      if (pickerRef.current?.contains(target)) return;
+      if (triggerRef.current?.contains(target)) return;
+      setOpen(false);
     };
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
+    document.addEventListener("pointerdown", handler, true);
+    return () => document.removeEventListener("pointerdown", handler, true);
   }, [open]);
-  const hslColor = parseHsl(value);
   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+\s+\d+%?\s+\d+%?$/.test(v.trim()) || /^\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"
+            }
+          )
+        ] })
+      ]
     }
-  };
-  const handleInputBlur = () => {
-    setInputVal(value);
-  };
-  return /* @__PURE__ */ jsxs33("div", { ref: containerRef, className: cn("relative flex items-center gap-1.5", className), children: [
+  );
+  return /* @__PURE__ */ jsxs33("div", { className: cn("flex items-center gap-1.5", className), children: [
     /* @__PURE__ */ jsx49(
       "button",
       {
+        ref: triggerRef,
         type: "button",
         disabled,
-        onClick: () => setOpen((o) => !o),
+        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 focus:ring-1 focus:ring-white/20",
+          "hover:scale-110 hover:border-white/30 focus:outline-none",
           disabled && "opacity-50 cursor-not-allowed"
         ),
         style: { background: cssColor },
-        title: value,
-        "aria-label": "Open color picker"
+        "aria-label": "Pick color"
       }
     ),
     /* @__PURE__ */ jsx49(
@@ -3241,42 +3271,24 @@ function HslColorInput({
       {
         type: "text",
         value: inputVal,
-        onChange: handleInputChange,
-        onBlur: handleInputBlur,
+        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: "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",
-          "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
         )
       }
     ),
-    open && /* @__PURE__ */ jsxs33("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__ */ 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" })
-      ] })
-    ] })
+    mounted && open && createPortal(picker, document.body)
   ] });
 }