@razzusharma/accent-theme 2.0.2 → 2.0.3

package/dist/index.mjs

@@ -259,7 +259,17 @@ var gapClasses = {
   md: "gap-2",
   lg: "gap-3"
 };
-var CheckmarkIcon = ({ className = "" }) => /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx(
+var sizePixels = {
+  sm: 24,
+  md: 32,
+  lg: 40
+};
+var gapPixels = {
+  sm: 4,
+  md: 8,
+  lg: 12
+};
+var CheckmarkIcon = ({ className = "", style }) => /* @__PURE__ */ jsx("svg", { className, style, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx(
   "path",
   {
     fillRule: "evenodd",
@@ -306,14 +316,35 @@ function AccentColorSwatch({
       ${className}
     `,
     style: {
+      width: `${sizePixels[size]}px`,
+      height: `${sizePixels[size]}px`,
+      borderRadius: "9999px",
+      position: "relative",
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flexShrink: 0,
+      border: "none",
+      padding: 0,
+      cursor: "pointer",
       background: `hsl(${config.primary})`,
-      ["--tw-ring-color"]: `hsl(${config.light})`
+      ["--tw-ring-color"]: `hsl(${config.light})`,
+      boxShadow: isSelected ? `0 0 0 2px #fff, 0 0 0 4px hsl(${config.light})` : void 0
     },
     title: config.name,
     "aria-label": `Select ${config.name} theme`,
     "aria-pressed": isSelected
   }, isSelected && showCheckmark && React2.createElement(CheckmarkIcon, {
-    className: "absolute inset-0 w-full h-full p-1.5 text-white drop-shadow-md"
+    className: "absolute inset-0 w-full h-full p-1.5 text-white drop-shadow-md",
+    style: {
+      position: "absolute",
+      inset: 0,
+      width: "100%",
+      height: "100%",
+      padding: "6px",
+      color: "#fff",
+      pointerEvents: "none"
+    }
   }));
 }
 function AccentColorPicker({
@@ -357,7 +388,11 @@ function AccentColorPicker({
   if (variant === "inline") {
     return React2.createElement("div", {
       className: `grid ${gapClasses.md} ${className}`,
-      style: { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` }
+      style: {
+        display: "grid",
+        gap: `${gapPixels.md}px`,
+        gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`
+      }
     }, Object.entries(colors).map(([color]) => {
       const isSelected = accentColor === color;
       return React2.createElement(AccentColorSwatch, {
@@ -382,7 +417,11 @@ function AccentColorPicker({
     "div",
     {
       ref: dropdownRef,
-      className: `relative inline-block ${className}`
+      className: `relative inline-block ${className}`,
+      style: {
+        position: "relative",
+        display: "inline-block"
+      }
     },
     React2.createElement("button", {
       type: "button",
@@ -427,11 +466,30 @@ function AccentColorPicker({
           border border-slate-600/40
           shadow-2xl shadow-slate-950/50 backdrop-blur-xl
         `,
-        role: "listbox"
+        role: "listbox",
+        style: {
+          position: "absolute",
+          right: 0,
+          marginTop: "12px",
+          padding: "16px",
+          borderRadius: "16px",
+          zIndex: 50,
+          minWidth: "290px",
+          background: "linear-gradient(to bottom, rgba(30,41,59,0.95), rgba(15,23,42,0.95))",
+          border: "1px solid rgba(71,85,105,0.4)",
+          boxShadow: "0 24px 48px rgba(2,6,23,0.5)",
+          backdropFilter: "blur(16px)"
+        }
       }, [
         React2.createElement("div", {
           key: "header",
-          className: "flex items-start gap-3 mb-3"
+          className: "flex items-start gap-3 mb-3",
+          style: {
+            display: "flex",
+            alignItems: "flex-start",
+            gap: "12px",
+            marginBottom: "12px"
+          }
         }, [
           React2.createElement("div", {
             key: "icon-wrap",
@@ -442,17 +500,36 @@ function AccentColorPicker({
           React2.createElement("div", { key: "titles" }, [
             React2.createElement("p", {
               key: "title",
-              className: "text-[1.15rem] font-semibold text-slate-100 leading-5"
+              className: "text-[1.15rem] font-semibold text-slate-100 leading-5",
+              style: {
+                margin: 0,
+                fontSize: "1.15rem",
+                lineHeight: 1.25,
+                fontWeight: 600,
+                color: "#f1f5f9"
+              }
             }, "Theme Color"),
             React2.createElement("p", {
               key: "subtitle",
-              className: "text-sm text-slate-300 mt-1"
+              className: "text-sm text-slate-300 mt-1",
+              style: {
+                margin: "4px 0 0",
+                fontSize: "0.875rem",
+                color: "#cbd5e1"
+              }
             }, "Choose your preferred accent color")
           ])
         ]),
         React2.createElement("div", {
           key: "grid",
-          className: "grid grid-cols-4 gap-3 border-t border-white/10 pt-4"
+          className: "grid grid-cols-4 gap-3 border-t border-white/10 pt-4",
+          style: {
+            display: "grid",
+            gridTemplateColumns: "repeat(4, minmax(0, 1fr))",
+            gap: "12px",
+            borderTop: "1px solid rgba(255,255,255,0.1)",
+            paddingTop: "16px"
+          }
         }, Object.entries(colors).map(([color, config]) => {
           const isSelected = accentColor === color;
           return React2.createElement("button", {
@@ -466,22 +543,52 @@ function AccentColorPicker({
               ${isSelected ? "ring-2 ring-white/70 scale-[1.03]" : "ring-1 ring-white/10"}
             `,
             style: {
-              background: `hsl(${config.primary})`
+              width: "48px",
+              height: "48px",
+              borderRadius: "12px",
+              border: "none",
+              cursor: "pointer",
+              position: "relative",
+              background: `hsl(${config.primary})`,
+              boxShadow: isSelected ? "0 0 0 2px rgba(255,255,255,0.7)" : "0 0 0 1px rgba(255,255,255,0.1)"
             },
             title: config.name,
             role: "option",
             "aria-selected": isSelected
           }, isSelected && React2.createElement(CheckmarkIcon, {
-            className: "absolute inset-0 w-full h-full p-3 text-white drop-shadow-md"
+            className: "absolute inset-0 w-full h-full p-3 text-white drop-shadow-md",
+            style: {
+              position: "absolute",
+              inset: 0,
+              width: "100%",
+              height: "100%",
+              padding: "12px",
+              color: "#fff",
+              pointerEvents: "none"
+            }
           }));
         })),
         React2.createElement("div", {
           key: "footer",
-          className: "mt-4 pt-4 border-t border-white/10 flex items-center justify-between gap-3"
+          className: "mt-4 pt-4 border-t border-white/10 flex items-center justify-between gap-3",
+          style: {
+            marginTop: "16px",
+            paddingTop: "16px",
+            borderTop: "1px solid rgba(255,255,255,0.1)",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            gap: "12px"
+          }
         }, [
           React2.createElement("p", {
             key: "current-text",
-            className: "text-[1.05rem] text-slate-200"
+            className: "text-[1.05rem] text-slate-200",
+            style: {
+              margin: 0,
+              fontSize: "1.05rem",
+              color: "#e2e8f0"
+            }
           }, `Current: ${colors[accentColor]?.name || accentColor}`),
           React2.createElement("span", {
             key: "current-pill",
@@ -562,14 +669,23 @@ function AccentColorMenu({
   };
   if (!mounted) {
     return React2.createElement("div", {
-      className: `animate-pulse bg-gray-200 dark:bg-gray-700 rounded-lg w-24 h-9 ${className}`
+      className: `animate-pulse bg-gray-200 dark:bg-gray-700 rounded-lg w-24 h-9 ${className}`,
+      style: {
+        width: "96px",
+        height: "36px",
+        borderRadius: "8px"
+      }
     });
   }
   return React2.createElement(
     "div",
     {
       ref: menuRef,
-      className: `relative inline-block ${className}`
+      className: `relative inline-block ${className}`,
+      style: {
+        position: "relative",
+        display: "inline-block"
+      }
     },
     React2.createElement("button", {
       type: "button",
@@ -607,7 +723,22 @@ function AccentColorMenu({
         border border-gray-200 dark:border-gray-700 
         z-50 min-w-[160px]
         ${alignClasses[align]}
-      `
+      `,
+      style: {
+        position: "absolute",
+        top: "100%",
+        marginTop: "8px",
+        padding: "8px",
+        background: "#ffffff",
+        borderRadius: "8px",
+        boxShadow: "0 12px 30px rgba(15,23,42,0.18)",
+        border: "1px solid #e5e7eb",
+        zIndex: 50,
+        minWidth: "160px",
+        left: align === "start" ? 0 : align === "center" ? "50%" : void 0,
+        right: align === "end" ? 0 : void 0,
+        transform: align === "center" ? "translateX(-50%)" : void 0
+      }
     }, Object.entries(colors).map(([color, config]) => {
       const isSelected = accentColor === color;
       return React2.createElement("button", {
@@ -618,20 +749,48 @@ function AccentColorMenu({
           w-full flex items-center gap-3 px-3 py-2 rounded-md
           transition-colors
           ${isSelected ? "bg-gray-100 dark:bg-gray-700" : "hover:bg-gray-50 dark:hover:bg-gray-700/50"}
-        `
+        `,
+        style: {
+          width: "100%",
+          display: "flex",
+          alignItems: "center",
+          gap: "12px",
+          padding: "8px 12px",
+          borderRadius: "6px",
+          border: "none",
+          cursor: "pointer",
+          background: isSelected ? "#f3f4f6" : "transparent"
+        }
       }, [
         React2.createElement("div", {
           key: "dot",
           className: `w-4 h-4 rounded-full flex-shrink-0`,
-          style: { background: `hsl(${config.primary})` }
+          style: {
+            width: "16px",
+            height: "16px",
+            borderRadius: "9999px",
+            flexShrink: 0,
+            background: `hsl(${config.primary})`
+          }
         }),
         React2.createElement("span", {
           key: "name",
-          className: `text-sm ${isSelected ? "font-medium text-gray-900 dark:text-gray-100" : "text-gray-700 dark:text-gray-300"}`
+          className: `text-sm ${isSelected ? "font-medium text-gray-900 dark:text-gray-100" : "text-gray-700 dark:text-gray-300"}`,
+          style: {
+            fontSize: "14px",
+            fontWeight: isSelected ? 500 : 400,
+            color: isSelected ? "#111827" : "#374151"
+          }
         }, config.name),
         isSelected && React2.createElement(CheckmarkIcon, {
           key: "check",
-          className: "w-4 h-4 ml-auto text-gray-500 dark:text-gray-400"
+          className: "w-4 h-4 ml-auto text-gray-500 dark:text-gray-400",
+          style: {
+            width: "16px",
+            height: "16px",
+            marginLeft: "auto",
+            color: "#6b7280"
+          }
         })
       ]);
     }))
@@ -870,6 +1029,237 @@ function AccentColorGrid({
   }));
 }
 
+// src/AccentThemeWidget.tsx
+import { useEffect as useEffect3, useMemo as useMemo2, useRef as useRef2, useState as useState3 } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var CheckIcon = () => /* @__PURE__ */ jsx2("svg", { viewBox: "0 0 20 20", fill: "currentColor", style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsx2(
+  "path",
+  {
+    fillRule: "evenodd",
+    d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",
+    clipRule: "evenodd"
+  }
+) });
+var PaletteIcon2 = () => /* @__PURE__ */ jsxs2("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", style: { width: "14px", height: "14px" }, children: [
+  /* @__PURE__ */ jsx2(
+    "path",
+    {
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 1.8,
+      d: "M12 3a9 9 0 100 18h1.4a2.6 2.6 0 000-5.2H11a1.5 1.5 0 010-3h4.8a3.2 3.2 0 003.2-3.2C19 6 15.9 3 12 3z"
+    }
+  ),
+  /* @__PURE__ */ jsx2("circle", { cx: "7.5", cy: "10.2", r: "1" }),
+  /* @__PURE__ */ jsx2("circle", { cx: "10.5", cy: "7.5", r: "1" }),
+  /* @__PURE__ */ jsx2("circle", { cx: "14.2", cy: "7.3", r: "1" })
+] });
+function AccentThemeWidget({
+  className = "",
+  title = "Theme Color",
+  subtitle = "Choose your preferred accent color",
+  position = "top-right",
+  offset = 20,
+  defaultOpen = true,
+  collapsible = true,
+  showCurrent = true,
+  onChange
+}) {
+  const { accentColor, setAccentColor, mounted, colors } = useAccentTheme();
+  const { primary } = useAccentColor();
+  const [isOpen, setIsOpen] = useState3(defaultOpen);
+  const panelRef = useRef2(null);
+  useEffect3(() => {
+    if (!collapsible || !isOpen) return;
+    const handleClickOutside = (event) => {
+      if (panelRef.current && !panelRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [isOpen, collapsible]);
+  const placementStyle = useMemo2(() => {
+    if (position === "inline") {
+      return { position: "relative", display: "inline-block" };
+    }
+    const base = { position: "fixed", zIndex: 80 };
+    if (position === "top-right") base.top = `${offset}px`, base.right = `${offset}px`;
+    if (position === "top-left") base.top = `${offset}px`, base.left = `${offset}px`;
+    if (position === "bottom-right") base.bottom = `${offset}px`, base.right = `${offset}px`;
+    if (position === "bottom-left") base.bottom = `${offset}px`, base.left = `${offset}px`;
+    return base;
+  }, [position, offset]);
+  const handleColorChange = (color) => {
+    setAccentColor(color);
+    onChange?.(color);
+  };
+  if (!mounted) {
+    return /* @__PURE__ */ jsx2(
+      "div",
+      {
+        className,
+        style: {
+          ...placementStyle,
+          width: "228px",
+          height: "196px",
+          borderRadius: "14px",
+          background: "rgba(31,41,55,0.75)",
+          border: "1px solid rgba(255,255,255,0.12)"
+        }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs2("div", { className, style: placementStyle, ref: panelRef, children: [
+    collapsible ? /* @__PURE__ */ jsx2(
+      "button",
+      {
+        type: "button",
+        onClick: () => setIsOpen((prev) => !prev),
+        "aria-label": "Toggle theme color panel",
+        style: {
+          width: "38px",
+          height: "38px",
+          borderRadius: "9999px",
+          border: "1px solid rgba(168,85,247,0.45)",
+          background: "radial-gradient(circle at 35% 30%, rgba(168,85,247,0.42), rgba(15,23,42,0.9))",
+          color: "#c4b5fd",
+          display: "grid",
+          placeItems: "center",
+          cursor: "pointer",
+          marginLeft: position.endsWith("left") ? 0 : "auto",
+          marginBottom: isOpen ? "8px" : 0,
+          boxShadow: "0 8px 24px rgba(76,29,149,0.35)"
+        },
+        children: /* @__PURE__ */ jsx2(PaletteIcon2, {})
+      }
+    ) : null,
+    isOpen ? /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        role: "dialog",
+        "aria-label": "Theme color picker",
+        style: {
+          width: "228px",
+          padding: "12px",
+          borderRadius: "14px",
+          background: "linear-gradient(180deg, rgba(30,41,59,0.96), rgba(15,23,42,0.96))",
+          border: "1px solid rgba(100,116,139,0.45)",
+          boxShadow: "0 24px 50px rgba(2,6,23,0.5)",
+          color: "#f8fafc",
+          backdropFilter: "blur(14px)"
+        },
+        children: [
+          /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "flex-start", gap: "8px", marginBottom: "12px" }, children: [
+            /* @__PURE__ */ jsx2(
+              "div",
+              {
+                "aria-hidden": true,
+                style: {
+                  width: "20px",
+                  height: "20px",
+                  borderRadius: "9999px",
+                  border: "1px solid rgba(168,85,247,0.45)",
+                  display: "grid",
+                  placeItems: "center",
+                  color: "#c4b5fd"
+                },
+                children: /* @__PURE__ */ jsx2(PaletteIcon2, {})
+              }
+            ),
+            /* @__PURE__ */ jsxs2("div", { children: [
+              /* @__PURE__ */ jsx2("p", { style: { margin: 0, fontSize: "1.1rem", fontWeight: 700, lineHeight: 1.15 }, children: title }),
+              /* @__PURE__ */ jsx2("p", { style: { margin: "2px 0 0", fontSize: "0.8rem", color: "#94a3b8" }, children: subtitle })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx2(
+            "div",
+            {
+              style: {
+                borderTop: "1px solid rgba(255,255,255,0.1)",
+                paddingTop: "12px",
+                display: "grid",
+                gridTemplateColumns: "repeat(4, minmax(0, 1fr))",
+                gap: "8px"
+              },
+              children: Object.entries(colors).map(([color, config]) => {
+                const selected = accentColor === color;
+                return /* @__PURE__ */ jsx2(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => handleColorChange(color),
+                    title: config.name,
+                    "aria-label": `Select ${config.name}`,
+                    style: {
+                      width: "42px",
+                      height: "42px",
+                      borderRadius: "10px",
+                      border: "none",
+                      cursor: "pointer",
+                      position: "relative",
+                      background: `hsl(${config.primary})`,
+                      boxShadow: selected ? "0 0 0 2px rgba(255,255,255,0.68)" : "0 0 0 1px rgba(255,255,255,0.1)"
+                    },
+                    children: selected ? /* @__PURE__ */ jsx2(
+                      "span",
+                      {
+                        style: {
+                          position: "absolute",
+                          inset: 0,
+                          display: "block",
+                          color: "#fff",
+                          padding: "10px",
+                          pointerEvents: "none"
+                        },
+                        children: /* @__PURE__ */ jsx2(CheckIcon, {})
+                      }
+                    ) : null
+                  },
+                  color
+                );
+              })
+            }
+          ),
+          showCurrent ? /* @__PURE__ */ jsxs2(
+            "div",
+            {
+              style: {
+                marginTop: "12px",
+                paddingTop: "10px",
+                borderTop: "1px solid rgba(255,255,255,0.1)",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                gap: "8px"
+              },
+              children: [
+                /* @__PURE__ */ jsxs2("p", { style: { margin: 0, color: "#e2e8f0", fontSize: "0.95rem" }, children: [
+                  "Current: ",
+                  colors[accentColor]?.name || accentColor
+                ] }),
+                /* @__PURE__ */ jsx2(
+                  "span",
+                  {
+                    "aria-hidden": true,
+                    style: {
+                      width: "46px",
+                      height: "20px",
+                      borderRadius: "9999px",
+                      background: primary,
+                      boxShadow: "inset 0 0 0 1px rgba(255,255,255,0.25)"
+                    }
+                  }
+                )
+              ]
+            }
+          ) : null
+        ]
+      }
+    ) : null
+  ] });
+}
+
 // src/utils.ts
 function generateCSSVariables(config, prefix = "") {
   const p = prefix ? `${prefix}-` : "";
@@ -931,7 +1321,7 @@ var storage = {
 };
 
 // src/index.ts
-var VERSION = "2.0.0";
+var VERSION = "2.0.2";
 export {
   AccentColorButton,
   AccentColorGrid,
@@ -941,6 +1331,7 @@ export {
   AccentColorSwatches,
   AccentThemeProvider,
   AccentThemeReset,
+  AccentThemeWidget,
   CurrentAccentIndicator,
   VERSION,
   adjustHSL,