@webdevarif/dashui 0.3.1 → 0.3.2

package/dist/index.mjs

@@ -3164,10 +3164,126 @@ function PostSidebarSection({
   ] });
 }
 
+// src/components/ui/hsl-color-input.tsx
+import { useState as useState7, useRef as useRef4, useEffect as useEffect5, useCallback } from "react";
+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 };
+}
+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] = useState7(false);
+  const [inputVal, setInputVal] = useState7(value);
+  const containerRef = useRef4(null);
+  useEffect5(() => {
+    setInputVal(value);
+  }, [value]);
+  useEffect5(() => {
+    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 = 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 handleInputBlur = () => {
+    setInputVal(value);
+  };
+  return /* @__PURE__ */ jsxs33("div", { ref: containerRef, className: cn("relative flex items-center gap-1.5", className), children: [
+    /* @__PURE__ */ jsx49(
+      "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"
+      }
+    ),
+    /* @__PURE__ */ jsx49(
+      "input",
+      {
+        type: "text",
+        value: inputVal,
+        onChange: handleInputChange,
+        onBlur: handleInputBlur,
+        disabled,
+        placeholder: "0 0% 0%",
+        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",
+          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" })
+      ] })
+    ] })
+  ] });
+}
+
 // src/hooks/index.ts
-import { useState as useState7 } from "react";
+import { useState as useState8 } from "react";
 function useDisclosure(initial = false) {
-  const [isOpen, setIsOpen] = useState7(initial);
+  const [isOpen, setIsOpen] = useState8(initial);
   return {
     isOpen,
     open: () => setIsOpen(true),
@@ -3177,15 +3293,15 @@ function useDisclosure(initial = false) {
   };
 }
 function usePagination(total, pageSize = 20) {
-  const [page, setPage] = useState7(1);
+  const [page, setPage] = useState8(1);
   const totalPages = Math.ceil(total / pageSize);
   return { page, setPage, pageSize, total, totalPages };
 }
 
 // src/components/auth/AuthShell.tsx
-import { jsx as jsx49, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs34 } from "react/jsx-runtime";
 function AuthShell({ children, pattern = "dots", maxWidth = "520px" }) {
-  return /* @__PURE__ */ jsxs33(
+  return /* @__PURE__ */ jsxs34(
     "div",
     {
       style: {
@@ -3200,7 +3316,7 @@ function AuthShell({ children, pattern = "dots", maxWidth = "520px" }) {
         overflow: "hidden"
       },
       children: [
-        pattern === "dots" && /* @__PURE__ */ jsx49(
+        pattern === "dots" && /* @__PURE__ */ jsx50(
           "div",
           {
             "aria-hidden": true,
@@ -3214,7 +3330,7 @@ function AuthShell({ children, pattern = "dots", maxWidth = "520px" }) {
             }
           }
         ),
-        pattern === "grid" && /* @__PURE__ */ jsx49(
+        pattern === "grid" && /* @__PURE__ */ jsx50(
           "div",
           {
             "aria-hidden": true,
@@ -3228,16 +3344,16 @@ function AuthShell({ children, pattern = "dots", maxWidth = "520px" }) {
             }
           }
         ),
-        /* @__PURE__ */ jsx49("div", { style: { position: "relative", zIndex: 1, width: "100%", maxWidth }, children })
+        /* @__PURE__ */ jsx50("div", { style: { position: "relative", zIndex: 1, width: "100%", maxWidth }, children })
       ]
     }
   );
 }
 
 // src/components/auth/AuthCard.tsx
-import { jsx as jsx50 } from "react/jsx-runtime";
+import { jsx as jsx51 } from "react/jsx-runtime";
 function AuthCard({ children, padding = "24px 28px" }) {
-  return /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsx51(
     "div",
     {
       style: {
@@ -3254,10 +3370,10 @@ function AuthCard({ children, padding = "24px 28px" }) {
 }
 
 // src/components/auth/AuthLogo.tsx
-import { jsx as jsx51, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs35 } from "react/jsx-runtime";
 function AuthLogo({ appName = "Builify CMS", letter = "B", imageUrl, size = 36 }) {
-  return /* @__PURE__ */ jsxs34("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", gap: "10px", marginBottom: "28px" }, children: [
-    imageUrl ? /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsxs35("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", gap: "10px", marginBottom: "28px" }, children: [
+    imageUrl ? /* @__PURE__ */ jsx52(
       "img",
       {
         src: imageUrl,
@@ -3266,7 +3382,7 @@ function AuthLogo({ appName = "Builify CMS", letter = "B", imageUrl, size = 36 }
         height: size,
         style: { borderRadius: "calc(var(--radius, 0.5rem) * 1.2)", flexShrink: 0, display: "block" }
       }
-    ) : /* @__PURE__ */ jsx51(
+    ) : /* @__PURE__ */ jsx52(
       "div",
       {
         style: {
@@ -3285,7 +3401,7 @@ function AuthLogo({ appName = "Builify CMS", letter = "B", imageUrl, size = 36 }
         children: letter
       }
     ),
-    /* @__PURE__ */ jsx51(
+    /* @__PURE__ */ jsx52(
       "span",
       {
         style: {
@@ -3301,10 +3417,10 @@ function AuthLogo({ appName = "Builify CMS", letter = "B", imageUrl, size = 36 }
 }
 
 // src/components/auth/AuthHeader.tsx
-import { jsx as jsx52, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs36 } from "react/jsx-runtime";
 function AuthHeader({ title, description }) {
-  return /* @__PURE__ */ jsxs35("div", { style: { marginBottom: "24px", textAlign: "center" }, children: [
-    /* @__PURE__ */ jsx52(
+  return /* @__PURE__ */ jsxs36("div", { style: { marginBottom: "24px", textAlign: "center" }, children: [
+    /* @__PURE__ */ jsx53(
       "h1",
       {
         style: {
@@ -3317,7 +3433,7 @@ function AuthHeader({ title, description }) {
         children: title
       }
     ),
-    description && /* @__PURE__ */ jsx52(
+    description && /* @__PURE__ */ jsx53(
       "p",
       {
         style: {
@@ -3333,12 +3449,12 @@ function AuthHeader({ title, description }) {
 }
 
 // src/components/auth/AuthField.tsx
-import { jsx as jsx53, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs37 } from "react/jsx-runtime";
 function AuthField({ label, error, hint, rightLabel, id, ...props }) {
   const fieldId = id ?? label.toLowerCase().replace(/\s+/g, "-");
-  return /* @__PURE__ */ jsxs36("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: [
-    /* @__PURE__ */ jsxs36("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
-      /* @__PURE__ */ jsx53(
+  return /* @__PURE__ */ jsxs37("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: [
+    /* @__PURE__ */ jsxs37("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
+      /* @__PURE__ */ jsx54(
         "label",
         {
           htmlFor: fieldId,
@@ -3350,9 +3466,9 @@ function AuthField({ label, error, hint, rightLabel, id, ...props }) {
           children: label
         }
       ),
-      rightLabel && /* @__PURE__ */ jsx53("span", { style: { fontSize: "0.8125rem" }, children: rightLabel })
+      rightLabel && /* @__PURE__ */ jsx54("span", { style: { fontSize: "0.8125rem" }, children: rightLabel })
     ] }),
-    /* @__PURE__ */ jsx53(
+    /* @__PURE__ */ jsx54(
       "input",
       {
         id: fieldId,
@@ -3382,13 +3498,13 @@ function AuthField({ label, error, hint, rightLabel, id, ...props }) {
         ...props
       }
     ),
-    error && /* @__PURE__ */ jsx53("p", { style: { fontSize: "0.8rem", color: "var(--destructive)", margin: 0 }, children: error }),
-    hint && !error && /* @__PURE__ */ jsx53("p", { style: { fontSize: "0.8rem", color: "var(--muted-foreground)", margin: 0 }, children: hint })
+    error && /* @__PURE__ */ jsx54("p", { style: { fontSize: "0.8rem", color: "var(--destructive)", margin: 0 }, children: error }),
+    hint && !error && /* @__PURE__ */ jsx54("p", { style: { fontSize: "0.8rem", color: "var(--muted-foreground)", margin: 0 }, children: hint })
   ] });
 }
 
 // src/components/auth/AuthButton.tsx
-import { Fragment as Fragment5, jsx as jsx54, jsxs as jsxs37 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx55, jsxs as jsxs38 } from "react/jsx-runtime";
 function AuthButton({
   loading,
   variant = "primary",
@@ -3431,7 +3547,7 @@ function AuthButton({
       color: "var(--foreground)"
     }
   };
-  return /* @__PURE__ */ jsx54(
+  return /* @__PURE__ */ jsx55(
     "button",
     {
       disabled: loading || disabled,
@@ -3443,8 +3559,8 @@ function AuthButton({
         e.currentTarget.style.filter = "none";
       },
       ...props,
-      children: loading ? /* @__PURE__ */ jsxs37(Fragment5, { children: [
-        /* @__PURE__ */ jsx54(
+      children: loading ? /* @__PURE__ */ jsxs38(Fragment5, { children: [
+        /* @__PURE__ */ jsx55(
           "span",
           {
             style: {
@@ -3465,19 +3581,19 @@ function AuthButton({
 }
 
 // src/components/auth/AuthDivider.tsx
-import { jsx as jsx55, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs39 } from "react/jsx-runtime";
 function AuthDivider({ label = "or" }) {
-  return /* @__PURE__ */ jsxs38("div", { style: { display: "flex", alignItems: "center", gap: "12px", margin: "20px 0" }, children: [
-    /* @__PURE__ */ jsx55("div", { style: { flex: 1, height: 1, background: "var(--border)" } }),
-    /* @__PURE__ */ jsx55("span", { style: { fontSize: "0.75rem", color: "var(--muted-foreground)", userSelect: "none" }, children: label }),
-    /* @__PURE__ */ jsx55("div", { style: { flex: 1, height: 1, background: "var(--border)" } })
+  return /* @__PURE__ */ jsxs39("div", { style: { display: "flex", alignItems: "center", gap: "12px", margin: "20px 0" }, children: [
+    /* @__PURE__ */ jsx56("div", { style: { flex: 1, height: 1, background: "var(--border)" } }),
+    /* @__PURE__ */ jsx56("span", { style: { fontSize: "0.75rem", color: "var(--muted-foreground)", userSelect: "none" }, children: label }),
+    /* @__PURE__ */ jsx56("div", { style: { flex: 1, height: 1, background: "var(--border)" } })
   ] });
 }
 
 // src/components/auth/AuthFootnote.tsx
-import { jsx as jsx56, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs40 } from "react/jsx-runtime";
 function AuthFootnote({ text, linkText, linkHref }) {
-  return /* @__PURE__ */ jsxs39("p", { style: {
+  return /* @__PURE__ */ jsxs40("p", { style: {
     textAlign: "center",
     marginTop: "20px",
     fontSize: "0.8125rem",
@@ -3485,7 +3601,7 @@ function AuthFootnote({ text, linkText, linkHref }) {
   }, children: [
     text,
     " ",
-    /* @__PURE__ */ jsx56(
+    /* @__PURE__ */ jsx57(
       "a",
       {
         href: linkHref,
@@ -3556,6 +3672,7 @@ export {
   FormField,
   FormLayout,
   FormSection,
+  HslColorInput,
   ImagePickerField,
   Input,
   Label2 as Label,