@razzusharma/accent-theme 2.0.1 → 2.0.2

package/dist/index.d.mts

@@ -14,6 +14,7 @@ interface AccentThemeContextType {
     accentColor: AccentColor;
     setAccentColor: (color: AccentColor) => void;
     accentConfig: AccentColorConfig;
+    colors: Record<string, AccentColorConfig>;
     mounted: boolean;
     defaultColor: AccentColor;
     resetToDefault: () => void;
@@ -35,6 +36,7 @@ interface BaseComponentProps {
 interface AccentColorPickerProps extends BaseComponentProps {
     variant?: "dropdown" | "inline" | "menu";
     columns?: number;
+    align?: "start" | "center" | "end";
     onChange?: (color: AccentColor) => void;
     label?: string;
     showColorName?: boolean;
@@ -92,6 +94,7 @@ declare function useAccentColor(): {
 declare function useAccentDarkMode(): boolean;
 
 declare function AccentColorSwatch({ color, isSelected, onClick, size, className, showCheckmark, }: AccentColorSwatchProps): React.DetailedReactHTMLElement<{
+    type: string;
     onClick: (() => void) | undefined;
     className: string;
     style: {
@@ -102,7 +105,7 @@ declare function AccentColorSwatch({ color, isSelected, onClick, size, className
     "aria-label": string;
     "aria-pressed": boolean | undefined;
 }, HTMLElement> | null;
-declare function AccentColorPicker({ size, variant, columns, className, onChange, label, showColorName, }: AccentColorPickerProps): React.DetailedReactHTMLElement<{
+declare function AccentColorPicker({ size, variant, columns, className, align, onChange, label, showColorName, }: AccentColorPickerProps): React.DetailedReactHTMLElement<{
     className: string;
 }, HTMLElement> | React.FunctionComponentElement<AccentColorMenuProps>;
 declare function AccentColorSwatches({ className, size, onChange, showCheckmark, gap, }: AccentColorSwatchesProps): React.DetailedReactHTMLElement<{

package/dist/index.d.ts

@@ -14,6 +14,7 @@ interface AccentThemeContextType {
     accentColor: AccentColor;
     setAccentColor: (color: AccentColor) => void;
     accentConfig: AccentColorConfig;
+    colors: Record<string, AccentColorConfig>;
     mounted: boolean;
     defaultColor: AccentColor;
     resetToDefault: () => void;
@@ -35,6 +36,7 @@ interface BaseComponentProps {
 interface AccentColorPickerProps extends BaseComponentProps {
     variant?: "dropdown" | "inline" | "menu";
     columns?: number;
+    align?: "start" | "center" | "end";
     onChange?: (color: AccentColor) => void;
     label?: string;
     showColorName?: boolean;
@@ -92,6 +94,7 @@ declare function useAccentColor(): {
 declare function useAccentDarkMode(): boolean;
 
 declare function AccentColorSwatch({ color, isSelected, onClick, size, className, showCheckmark, }: AccentColorSwatchProps): React.DetailedReactHTMLElement<{
+    type: string;
     onClick: (() => void) | undefined;
     className: string;
     style: {
@@ -102,7 +105,7 @@ declare function AccentColorSwatch({ color, isSelected, onClick, size, className
     "aria-label": string;
     "aria-pressed": boolean | undefined;
 }, HTMLElement> | null;
-declare function AccentColorPicker({ size, variant, columns, className, onChange, label, showColorName, }: AccentColorPickerProps): React.DetailedReactHTMLElement<{
+declare function AccentColorPicker({ size, variant, columns, className, align, onChange, label, showColorName, }: AccentColorPickerProps): React.DetailedReactHTMLElement<{
     className: string;
 }, HTMLElement> | React.FunctionComponentElement<AccentColorMenuProps>;
 declare function AccentColorSwatches({ className, size, onChange, showCheckmark, gap, }: AccentColorSwatchesProps): React.DetailedReactHTMLElement<{

package/dist/index.js

@@ -139,6 +139,7 @@ var defaultContext = {
   setAccentColor: () => {
   },
   accentConfig: defaultAccentColors.teal,
+  colors: defaultAccentColors,
   mounted: false,
   defaultColor: "teal",
   resetToDefault: () => {
@@ -240,6 +241,7 @@ function AccentThemeProvider({
     accentColor,
     setAccentColor,
     accentConfig: colors[accentColor] || colors[defaultColor],
+    colors,
     mounted,
     defaultColor,
     resetToDefault
@@ -317,6 +319,20 @@ var CheckmarkIcon = ({ className = "" }) => /* @__PURE__ */ (0, import_jsx_runti
   }
 ) });
 var ChevronIcon = ({ className = "" }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) });
+var PaletteIcon = ({ className = "" }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { className, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "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__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "7.5", cy: "10.2", r: "1" }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "10.5", cy: "7.5", r: "1" }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "14.2", cy: "7.3", r: "1" })
+] });
 var ResetIcon = ({ className = "" }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" }) });
 function AccentColorSwatch({
   color,
@@ -326,9 +342,11 @@ function AccentColorSwatch({
   className = "",
   showCheckmark = true
 }) {
-  const config = defaultAccentColors[color];
+  const { colors } = useAccentTheme();
+  const config = colors[color] || defaultAccentColors[color];
   if (!config) return null;
   return React2.createElement("button", {
+    type: "button",
     onClick,
     className: `
       relative rounded-full transition-all duration-200 flex-shrink-0
@@ -354,11 +372,12 @@ function AccentColorPicker({
   variant = "dropdown",
   columns = 4,
   className = "",
+  align = "end",
   onChange,
   label = "Theme",
   showColorName = true
 }) {
-  const { accentColor, setAccentColor, mounted } = useAccentTheme();
+  const { accentColor, setAccentColor, mounted, colors } = useAccentTheme();
   const { primary } = useAccentColor();
   const [isOpen, setIsOpen] = (0, import_react2.useState)(false);
   const dropdownRef = (0, import_react2.useRef)(null);
@@ -390,7 +409,7 @@ function AccentColorPicker({
     return React2.createElement("div", {
       className: `grid ${gapClasses.md} ${className}`,
       style: { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` }
-    }, Object.entries(defaultAccentColors).map(([color]) => {
+    }, Object.entries(colors).map(([color]) => {
       const isSelected = accentColor === color;
       return React2.createElement(AccentColorSwatch, {
         key: color,
@@ -406,7 +425,8 @@ function AccentColorPicker({
       size,
       className,
       onChange,
-      label
+      label,
+      align
     });
   }
   return React2.createElement(
@@ -416,14 +436,14 @@ function AccentColorPicker({
       className: `relative inline-block ${className}`
     },
     React2.createElement("button", {
+      type: "button",
       onClick: () => setIsOpen(!isOpen),
       className: `
-        flex items-center gap-2 px-3 py-2 rounded-lg 
-        bg-white dark:bg-gray-800 
-        border border-gray-200 dark:border-gray-700 
-        hover:bg-gray-50 dark:hover:bg-gray-700 
-        transition-colors focus:outline-none focus:ring-2 
-        focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900
+        flex items-center gap-2 px-3.5 py-2 rounded-full
+        text-slate-100 bg-slate-900/70 backdrop-blur-md
+        border border-white/10 hover:bg-slate-900/85
+        transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2
+        focus:ring-offset-slate-950 shadow-lg shadow-slate-950/30
       `,
       style: { ["--tw-ring-color"]: primary },
       "aria-expanded": isOpen,
@@ -431,16 +451,16 @@ function AccentColorPicker({
     }, [
       React2.createElement("div", {
         key: "swatch",
-        className: "w-5 h-5 rounded-full shadow-sm",
+        className: "w-5 h-5 rounded-full shadow-sm ring-1 ring-white/20",
         style: { background: primary }
       }),
       showColorName && React2.createElement("span", {
         key: "label",
-        className: "text-sm font-medium text-gray-700 dark:text-gray-300"
-      }, defaultAccentColors[accentColor]?.name || label),
+        className: "text-sm font-medium text-slate-100"
+      }, colors[accentColor]?.name || label),
       React2.createElement(ChevronIcon, {
         key: "chevron",
-        className: `w-4 h-4 text-gray-500 dark:text-gray-400 transition-transform duration-200 ${isOpen ? "rotate-180" : ""}`
+        className: `w-4 h-4 text-rose-300 transition-transform duration-200 ${isOpen ? "rotate-180" : ""}`
       })
     ]),
     isOpen && React2.createElement(React2.Fragment, {}, [
@@ -452,45 +472,75 @@ function AccentColorPicker({
       React2.createElement("div", {
         key: "dropdown",
         className: `
-          absolute right-0 mt-2 p-3 
-          bg-white dark:bg-gray-800 
-          rounded-xl shadow-xl 
-          border border-gray-200 dark:border-gray-700 
-          z-50 min-w-[200px]
+          absolute right-0 mt-3 p-4
+          rounded-2xl z-50 min-w-[290px]
+          bg-gradient-to-b from-slate-800/95 to-slate-900/95
+          border border-slate-600/40
+          shadow-2xl shadow-slate-950/50 backdrop-blur-xl
         `,
         role: "listbox"
       }, [
+        React2.createElement("div", {
+          key: "header",
+          className: "flex items-start gap-3 mb-3"
+        }, [
+          React2.createElement("div", {
+            key: "icon-wrap",
+            className: "w-7 h-7 rounded-full grid place-items-center border border-rose-400/40 bg-rose-500/15"
+          }, React2.createElement(PaletteIcon, {
+            className: "w-4 h-4 text-rose-300"
+          })),
+          React2.createElement("div", { key: "titles" }, [
+            React2.createElement("p", {
+              key: "title",
+              className: "text-[1.15rem] font-semibold text-slate-100 leading-5"
+            }, "Theme Color"),
+            React2.createElement("p", {
+              key: "subtitle",
+              className: "text-sm text-slate-300 mt-1"
+            }, "Choose your preferred accent color")
+          ])
+        ]),
         React2.createElement("div", {
           key: "grid",
-          className: "grid grid-cols-4 gap-2"
-        }, Object.entries(defaultAccentColors).map(([color, config]) => {
+          className: "grid grid-cols-4 gap-3 border-t border-white/10 pt-4"
+        }, Object.entries(colors).map(([color, config]) => {
           const isSelected = accentColor === color;
           return React2.createElement("button", {
             key: color,
+            type: "button",
             onClick: () => handleColorChange(color),
             className: `
-              relative w-10 h-10 rounded-lg transition-all duration-200
-              hover:scale-110 focus:outline-none focus:ring-2 focus:ring-offset-2
-              focus:ring-offset-white dark:focus:ring-offset-gray-900
-              ${isSelected ? "ring-2 ring-offset-2 scale-105" : ""}
+              relative w-12 h-12 rounded-xl transition-all duration-200
+              hover:-translate-y-0.5 hover:brightness-110
+              focus:outline-none focus:ring-2 ring-offset-0
+              ${isSelected ? "ring-2 ring-white/70 scale-[1.03]" : "ring-1 ring-white/10"}
             `,
             style: {
-              background: `hsl(${config.primary})`,
-              ["--tw-ring-color"]: `hsl(${config.light})`
+              background: `hsl(${config.primary})`
             },
             title: config.name,
             role: "option",
             "aria-selected": isSelected
           }, isSelected && React2.createElement(CheckmarkIcon, {
-            className: "absolute inset-0 w-full h-full p-2 text-white drop-shadow-md"
+            className: "absolute inset-0 w-full h-full p-3 text-white drop-shadow-md"
           }));
         })),
         React2.createElement("div", {
           key: "footer",
-          className: "mt-3 pt-3 border-t border-gray-100 dark:border-gray-700"
-        }, React2.createElement("p", {
-          className: "text-xs text-gray-500 dark:text-gray-400 text-center"
-        }, `Current: ${defaultAccentColors[accentColor]?.name || accentColor}`))
+          className: "mt-4 pt-4 border-t border-white/10 flex items-center justify-between gap-3"
+        }, [
+          React2.createElement("p", {
+            key: "current-text",
+            className: "text-[1.05rem] text-slate-200"
+          }, `Current: ${colors[accentColor]?.name || accentColor}`),
+          React2.createElement("span", {
+            key: "current-pill",
+            className: "w-14 h-7 rounded-full ring-1 ring-white/20",
+            style: { background: primary },
+            "aria-hidden": true
+          })
+        ])
       ])
     ])
   );
@@ -502,7 +552,7 @@ function AccentColorSwatches({
   showCheckmark = true,
   gap = "md"
 }) {
-  const { accentColor, setAccentColor, mounted } = useAccentTheme();
+  const { accentColor, setAccentColor, mounted, colors } = useAccentTheme();
   const handleColorChange = (color) => {
     setAccentColor(color);
     onChange?.(color);
@@ -517,7 +567,7 @@ function AccentColorSwatches({
   }
   return React2.createElement("div", {
     className: `flex flex-wrap ${gapClasses[gap]} ${className}`
-  }, Object.entries(defaultAccentColors).map(([color]) => {
+  }, Object.entries(colors).map(([color]) => {
     const isSelected = accentColor === color;
     return React2.createElement(AccentColorSwatch, {
       key: color,
@@ -536,7 +586,7 @@ function AccentColorMenu({
   align = "end",
   label = "Theme"
 }) {
-  const { accentColor, setAccentColor, mounted } = useAccentTheme();
+  const { accentColor, setAccentColor, mounted, colors } = useAccentTheme();
   const { primary } = useAccentColor();
   const [isOpen, setIsOpen] = (0, import_react2.useState)(false);
   const menuRef = (0, import_react2.useRef)(null);
@@ -573,6 +623,7 @@ function AccentColorMenu({
       className: `relative inline-block ${className}`
     },
     React2.createElement("button", {
+      type: "button",
       onClick: () => setIsOpen(!isOpen),
       className: `
         flex items-center gap-2 px-3 py-2 rounded-lg 
@@ -608,10 +659,11 @@ function AccentColorMenu({
         z-50 min-w-[160px]
         ${alignClasses[align]}
       `
-    }, Object.entries(defaultAccentColors).map(([color, config]) => {
+    }, Object.entries(colors).map(([color, config]) => {
       const isSelected = accentColor === color;
       return React2.createElement("button", {
         key: color,
+        type: "button",
         onClick: () => handleColorChange(color),
         className: `
           w-full flex items-center gap-3 px-3 py-2 rounded-md
@@ -643,9 +695,9 @@ function AccentColorButton({
   showLabel = false,
   buttonVariant = "default"
 }) {
-  const { accentColor, mounted } = useAccentTheme();
+  const { accentColor, mounted, colors } = useAccentTheme();
   const { primary } = useAccentColor();
-  const colorConfig = defaultAccentColors[accentColor];
+  const colorConfig = colors[accentColor] || defaultAccentColors[accentColor];
   const variantClasses = {
     default: "bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700",
     ghost: "hover:bg-gray-100 dark:hover:bg-gray-800",
@@ -662,6 +714,7 @@ function AccentColorButton({
     });
   }
   return React2.createElement("button", {
+    type: "button",
     onClick,
     className: `
       inline-flex items-center gap-2 rounded-lg 
@@ -733,6 +786,7 @@ function AccentThemeReset({
     });
   }
   return React2.createElement("button", {
+    type: "button",
     onClick: handleReset,
     disabled: isDefault,
     className: `
@@ -757,9 +811,9 @@ function CurrentAccentIndicator({
   showName = false,
   pulseOnChange = false
 }) {
-  const { accentColor, mounted } = useAccentTheme();
+  const { accentColor, mounted, colors } = useAccentTheme();
   const { primary } = useAccentColor();
-  const config = defaultAccentColors[accentColor];
+  const config = colors[accentColor] || defaultAccentColors[accentColor];
   const [isPulsing, setIsPulsing] = (0, import_react2.useState)(false);
   const prevColorRef = (0, import_react2.useRef)(accentColor);
   (0, import_react2.useEffect)(() => {
@@ -810,7 +864,7 @@ function AccentColorGrid({
   showLabels = false,
   gap = "md"
 }) {
-  const { accentColor, setAccentColor, mounted } = useAccentTheme();
+  const { accentColor, setAccentColor, mounted, colors } = useAccentTheme();
   const handleColorChange = (color) => {
     setAccentColor(color);
     onChange?.(color);
@@ -833,11 +887,12 @@ function AccentColorGrid({
   }
   return React2.createElement("div", {
     className: `grid ${gridCols[columns]} ${gapClasses[gap]} ${className}`
-  }, Object.entries(defaultAccentColors).map(([color, config]) => {
+  }, Object.entries(colors).map(([color, config]) => {
     const isSelected = accentColor === color;
     if (showLabels) {
       return React2.createElement("button", {
         key: color,
+        type: "button",
         onClick: () => handleColorChange(color),
         className: `
           flex flex-col items-center gap-1.5 p-2 rounded-lg