@razzusharma/accent-theme 1.0.1 → 2.0.1

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/AccentThemeProvider.tsx","../src/colors.ts","../src/AccentColorPicker.tsx","../src/utils.ts"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { \n  createContext, \n  useContext, \n  useEffect, \n  useState, \n  useCallback\n} from \"react\";\nimport type { \n  AccentColor, \n  AccentThemeContextType, \n  AccentThemeProviderProps \n} from \"./types\";\nimport { defaultAccentColors, mergeColors } from \"./colors\";\n\nconst defaultContext: AccentThemeContextType = {\n  accentColor: \"teal\",\n  setAccentColor: () => {},\n  accentConfig: defaultAccentColors.teal,\n  mounted: false,\n};\n\nconst AccentThemeContext = createContext<AccentThemeContextType>(defaultContext);\n\nexport function AccentThemeProvider({ \n  children, \n  defaultColor = \"teal\",\n  customColors,\n  storageKey = \"accent-color\",\n  cssVariablePrefix = \"\"\n}: AccentThemeProviderProps) {\n  const colors = mergeColors(defaultAccentColors, customColors);\n  \n  const [accentColor, setAccentColorState] = useState<AccentColor>(defaultColor);\n  const [mounted, setMounted] = useState(false);\n\n  // Get CSS variable names\n  const getVarName = (name: string) => {\n    return cssVariablePrefix ? `${cssVariablePrefix}-${name}` : name;\n  };\n\n  useEffect(() => {\n    setMounted(true);\n    // Check local storage\n    const stored = localStorage.getItem(storageKey) as AccentColor;\n    if (stored && colors[stored]) {\n      setAccentColorState(stored);\n    }\n  }, [storageKey, colors]);\n\n  useEffect(() => {\n    if (!mounted) return;\n    \n    const root = document.documentElement;\n    const config = colors[accentColor];\n    \n    if (!config) return;\n    \n    // Update CSS variables\n    root.style.setProperty(`--${getVarName('primary')}`, config.primary);\n    root.style.setProperty(`--${getVarName('primary-foreground')}`, config.primaryForeground);\n    root.style.setProperty(`--${getVarName('ring')}`, config.light);\n    root.style.setProperty(`--${getVarName('accent')}`, config.light);\n    \n    // Store preference\n    localStorage.setItem(storageKey, accentColor);\n    \n    // Add data attribute for Tailwind selectors\n    root.setAttribute(`data-${getVarName('accent')}`, accentColor);\n  }, [accentColor, mounted, colors, cssVariablePrefix, getVarName]);\n\n  const setAccentColor = useCallback((color: AccentColor) => {\n    if (colors[color]) {\n      setAccentColorState(color);\n    } else {\n      console.warn(`[AccentTheme] Color \"${color}\" not found in available colors`);\n    }\n  }, [colors]);\n\n  const value: AccentThemeContextType = {\n    accentColor,\n    setAccentColor,\n    accentConfig: colors[accentColor] || colors[defaultColor],\n    mounted,\n  };\n\n  return React.createElement(\n    AccentThemeContext.Provider,\n    { value },\n    children\n  );\n}\n\nexport function useAccentTheme() {\n  return useContext(AccentThemeContext);\n}\n\n// Utility hook for getting color values\nexport function useAccentColor() {\n  const { accentConfig, mounted } = useAccentTheme();\n  \n  return {\n    primary: `hsl(${accentConfig.primary})`,\n    primaryForeground: `hsl(${accentConfig.primaryForeground})`,\n    light: `hsl(${accentConfig.light})`,\n    dark: `hsl(${accentConfig.dark})`,\n    gradient: accentConfig.gradient,\n    mounted,\n  };\n}\n","import { AccentColor, AccentColorConfig } from './types';\n\nexport const defaultAccentColors: Record<AccentColor, AccentColorConfig> = {\n  teal: {\n    name: \"Teal\",\n    primary: \"174 72% 35%\",\n    primaryForeground: \"210 40% 98%\",\n    light: \"174 72% 45%\",\n    dark: \"174 72% 25%\",\n    gradient: \"from-teal-500 to-emerald-500\",\n  },\n  blue: {\n    name: \"Ocean Blue\",\n    primary: \"217 91% 45%\",\n    primaryForeground: \"210 40% 98%\",\n    light: \"217 91% 55%\",\n    dark: \"217 91% 35%\",\n    gradient: \"from-blue-500 to-cyan-500\",\n  },\n  purple: {\n    name: \"Royal Purple\",\n    primary: \"270 60% 45%\",\n    primaryForeground: \"210 40% 98%\",\n    light: \"270 60% 55%\",\n    dark: \"270 60% 35%\",\n    gradient: \"from-purple-500 to-pink-500\",\n  },\n  rose: {\n    name: \"Rose Pink\",\n    primary: \"350 80% 50%\",\n    primaryForeground: \"210 40% 98%\",\n    light: \"350 80% 60%\",\n    dark: \"350 80% 40%\",\n    gradient: \"from-rose-500 to-pink-500\",\n  },\n  amber: {\n    name: \"Sunset Amber\",\n    primary: \"35 95% 45%\",\n    primaryForeground: \"210 40% 98%\",\n    light: \"35 95% 55%\",\n    dark: \"35 95% 35%\",\n    gradient: \"from-amber-500 to-orange-500\",\n  },\n  emerald: {\n    name: \"Forest Emerald\",\n    primary: \"150 65% 35%\",\n    primaryForeground: \"210 40% 98%\",\n    light: \"150 65% 45%\",\n    dark: \"150 65% 25%\",\n    gradient: \"from-emerald-500 to-green-500\",\n  },\n  indigo: {\n    name: \"Deep Indigo\",\n    primary: \"240 60% 50%\",\n    primaryForeground: \"210 40% 98%\",\n    light: \"240 60% 60%\",\n    dark: \"240 60% 40%\",\n    gradient: \"from-indigo-500 to-purple-500\",\n  },\n  cyan: {\n    name: \"Electric Cyan\",\n    primary: \"190 90% 45%\",\n    primaryForeground: \"210 40% 98%\",\n    light: \"190 90% 55%\",\n    dark: \"190 90% 35%\",\n    gradient: \"from-cyan-500 to-blue-500\",\n  },\n};\n\nexport function mergeColors(\n  defaultColors: Record<string, AccentColorConfig>,\n  customColors?: Record<string, AccentColorConfig>\n): Record<string, AccentColorConfig> {\n  if (!customColors) return defaultColors;\n  return { ...defaultColors, ...customColors };\n}\n","\"use client\";\n\nimport * as React from \"react\";\nimport { useState } from \"react\";\nimport { useAccentTheme, useAccentColor } from \"./AccentThemeProvider\";\nimport { defaultAccentColors } from \"./colors\";\nimport { AccentColor } from \"./types\";\n\ninterface AccentColorPickerProps {\n  /** Size of the color swatches */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /** Show as a dropdown or inline grid */\n  variant?: \"dropdown\" | \"inline\";\n  /** Number of columns for inline variant */\n  columns?: number;\n  /** Custom className */\n  className?: string;\n  /** Callback when color changes */\n  onChange?: (color: AccentColor) => void;\n}\n\nexport function AccentColorPicker({\n  size = \"md\",\n  variant = \"dropdown\",\n  columns = 4,\n  className = \"\",\n  onChange,\n}: AccentColorPickerProps) {\n  const { accentColor, setAccentColor, mounted } = useAccentTheme();\n  const { primary } = useAccentColor();\n  const [isOpen, setIsOpen] = useState(false);\n\n  const handleColorChange = (color: AccentColor) => {\n    setAccentColor(color);\n    onChange?.(color);\n    if (variant === \"dropdown\") {\n      setIsOpen(false);\n    }\n  };\n\n  const sizeClasses = {\n    sm: \"w-6 h-6\",\n    md: \"w-8 h-8\",\n    lg: \"w-10 h-10\",\n  };\n\n  const selectedSizeClasses = {\n    sm: \"w-7 h-7\",\n    md: \"w-9 h-9\",\n    lg: \"w-11 h-11\",\n  };\n\n  if (!mounted) {\n    return React.createElement(\"div\", {\n      className: `animate-pulse bg-gray-200 rounded-full ${sizeClasses[size]}`\n    });\n  }\n\n  // Inline variant - show all colors\n  if (variant === \"inline\") {\n    return React.createElement(\"div\", {\n      className: `grid gap-2 ${className}`,\n      style: { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` }\n    }, Object.entries(defaultAccentColors).map(([color, config]) => {\n      const isSelected = accentColor === color;\n      return React.createElement(\"button\", {\n        key: color,\n        onClick: () => handleColorChange(color),\n        className: `\n          relative rounded-full transition-all duration-200\n          hover:scale-110 focus:outline-none focus:ring-2 focus:ring-offset-2\n          ${isSelected ? `ring-2 ring-offset-2 scale-110 ${selectedSizeClasses[size]}` : sizeClasses[size]}\n        `,\n        style: {\n          background: `hsl(${config.primary})`,\n          ['--tw-ring-color' as string]: `hsl(${config.light})`,\n        },\n        title: config.name,\n        'aria-label': `Select ${config.name} theme`,\n        'aria-pressed': isSelected,\n      }, isSelected && React.createElement(\"svg\", {\n        className: \"absolute inset-0 w-full h-full p-1.5 text-white\",\n        viewBox: \"0 0 20 20\",\n        fill: \"currentColor\"\n      }, React.createElement(\"path\", {\n        fillRule: \"evenodd\",\n        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\",\n        clipRule: \"evenodd\"\n      })));\n    }));\n  }\n\n  // Dropdown variant\n  return React.createElement(\"div\", { className: `relative ${className}` },\n    React.createElement(\"button\", {\n      onClick: () => setIsOpen(!isOpen),\n      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\",\n      'aria-expanded': isOpen,\n      'aria-haspopup': \"listbox\"\n    }, [\n      React.createElement(\"div\", {\n        key: \"swatch\",\n        className: \"w-5 h-5 rounded-full\",\n        style: { background: primary }\n      }),\n      React.createElement(\"span\", {\n        key: \"label\",\n        className: \"text-sm font-medium text-gray-700 dark:text-gray-300\"\n      }, \"Theme\"),\n      React.createElement(\"svg\", {\n        key: \"chevron\",\n        className: `w-4 h-4 text-gray-500 transition-transform ${isOpen ? \"rotate-180\" : \"\"}`,\n        fill: \"none\",\n        viewBox: \"0 0 24 24\",\n        stroke: \"currentColor\"\n      }, React.createElement(\"path\", {\n        strokeLinecap: \"round\",\n        strokeLinejoin: \"round\",\n        strokeWidth: 2,\n        d: \"M19 9l-7 7-7-7\"\n      }))\n    ]),\n    isOpen && React.createElement(React.Fragment, {}, [\n      React.createElement(\"div\", {\n        key: \"backdrop\",\n        className: \"fixed inset-0 z-40\",\n        onClick: () => setIsOpen(false)\n      }),\n      React.createElement(\"div\", {\n        key: \"dropdown\",\n        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]\",\n        role: \"listbox\"\n      }, [\n        React.createElement(\"div\", {\n          key: \"grid\",\n          className: \"grid grid-cols-4 gap-2\"\n        }, Object.entries(defaultAccentColors).map(([color, config]) => {\n          const isSelected = accentColor === color;\n          return React.createElement(\"button\", {\n            key: color,\n            onClick: () => handleColorChange(color),\n            className: `\n              relative w-10 h-10 rounded-lg transition-all duration-200\n              hover:scale-110 focus:outline-none focus:ring-2 focus:ring-offset-2\n              ${isSelected ? \"ring-2 ring-offset-2 scale-105\" : \"\"}\n            `,\n            style: {\n              background: `hsl(${config.primary})`,\n              ['--tw-ring-color' as string]: `hsl(${config.light})`,\n            },\n            title: config.name,\n            role: \"option\",\n            'aria-selected': isSelected\n          }, isSelected && React.createElement(\"svg\", {\n            className: \"absolute inset-0 w-full h-full p-2 text-white\",\n            viewBox: \"0 0 20 20\",\n            fill: \"currentColor\"\n          }, React.createElement(\"path\", {\n            fillRule: \"evenodd\",\n            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\",\n            clipRule: \"evenodd\"\n          })));\n        })),\n        React.createElement(\"div\", {\n          key: \"footer\",\n          className: \"mt-3 pt-3 border-t border-gray-100 dark:border-gray-700\"\n        }, React.createElement(\"p\", {\n          className: \"text-xs text-gray-500 dark:text-gray-400 text-center\"\n        }, `Current: ${defaultAccentColors[accentColor]?.name || accentColor}`))\n      ])\n    ])\n  );\n}\n\n// Simple swatch component\ninterface AccentColorSwatchProps {\n  color: AccentColor;\n  isSelected?: boolean;\n  onClick?: () => void;\n  size?: \"sm\" | \"md\" | \"lg\";\n}\n\nexport function AccentColorSwatch({ \n  color, \n  isSelected, \n  onClick,\n  size = \"md\"\n}: AccentColorSwatchProps) {\n  const config = defaultAccentColors[color];\n  if (!config) return null;\n\n  const sizeClasses = {\n    sm: \"w-6 h-6\",\n    md: \"w-8 h-8\",\n    lg: \"w-10 h-10\",\n  };\n\n  return React.createElement(\"button\", {\n    onClick,\n    className: `\n      relative rounded-full transition-all duration-200\n      hover:scale-110 focus:outline-none focus:ring-2 focus:ring-offset-2\n      ${sizeClasses[size]}\n      ${isSelected ? \"ring-2 ring-offset-2 scale-110\" : \"\"}\n    `,\n    style: {\n      background: `hsl(${config.primary})`,\n      ['--tw-ring-color' as string]: `hsl(${config.light})`,\n    },\n    title: config.name\n  }, isSelected && React.createElement(\"svg\", {\n    className: \"absolute inset-0 w-full h-full p-1.5 text-white\",\n    viewBox: \"0 0 20 20\",\n    fill: \"currentColor\"\n  }, React.createElement(\"path\", {\n    fillRule: \"evenodd\",\n    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\",\n    clipRule: \"evenodd\"\n  })));\n}\n","import { AccentColorConfig } from './types';\n\n/**\n * Generate CSS custom properties for an accent color\n */\nexport function generateCSSVariables(\n  config: AccentColorConfig,\n  prefix: string = \"\"\n): Record<string, string> {\n  const p = prefix ? `${prefix}-` : \"\";\n  return {\n    [`--${p}primary`]: config.primary,\n    [`--${p}primary-foreground`]: config.primaryForeground,\n    [`--${p}accent`]: config.light,\n    [`--${p}ring`]: config.light,\n  };\n}\n\n/**\n * Apply CSS variables to an element\n */\nexport function applyCSSVariables(\n  element: HTMLElement,\n  variables: Record<string, string>\n): void {\n  Object.entries(variables).forEach(([key, value]) => {\n    element.style.setProperty(key, value);\n  });\n}\n\n/**\n * Create a gradient string from accent color config\n */\nexport function createGradient(\n  config: AccentColorConfig,\n  direction: string = \"to right\"\n): string {\n  return `linear-gradient(${direction}, hsl(${config.light}), hsl(${config.primary}))`;\n}\n\n/**\n * Create a shadow with the accent color\n */\nexport function createShadow(\n  config: AccentColorConfig,\n  intensity: number = 0.3,\n  blur: number = 20\n): string {\n  return `0 4px ${blur}px hsl(${config.primary} / ${intensity})`;\n}\n\n/**\n * Lighten or darken an HSL color\n */\nexport function adjustHSL(\n  hsl: string,\n  adjustments: {\n    hue?: number;\n    saturation?: number;\n    lightness?: number;\n  }\n): string {\n  const [h, s, l] = hsl.split(\" \").map((v) => parseFloat(v));\n  const newH = h + (adjustments.hue || 0);\n  const newS = Math.max(0, Math.min(100, s + (adjustments.saturation || 0)));\n  const newL = Math.max(0, Math.min(100, l + (adjustments.lightness || 0)));\n  return `${newH} ${newS}% ${newL}%`;\n}\n\n/**\n * Get contrasting text color (black or white) for a background\n */\nexport function getContrastColor(\n  hsl: string,\n  threshold: number = 50\n): \"black\" | \"white\" {\n  const [, , l] = hsl.split(\" \").map((v) => parseFloat(v));\n  return l > threshold ? \"black\" : \"white\";\n}\n\n/**\n * Check if code is running on client side\n */\nexport function isClient(): boolean {\n  return typeof window !== \"undefined\";\n}\n\n/**\n * Local storage wrapper with error handling\n */\nexport const storage = {\n  get: (key: string, defaultValue?: string): string | undefined => {\n    if (!isClient()) return defaultValue;\n    try {\n      return localStorage.getItem(key) || defaultValue;\n    } catch {\n      return defaultValue;\n    }\n  },\n  set: (key: string, value: string): void => {\n    if (!isClient()) return;\n    try {\n      localStorage.setItem(key, value);\n    } catch {\n      // Ignore storage errors\n    }\n  },\n  remove: (key: string): void => {\n    if (!isClient()) return;\n    try {\n      localStorage.removeItem(key);\n    } catch {\n      // Ignore storage errors\n    }\n  },\n};\n"],"mappings":"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","names":["React","useState","useState"]}
+{"version":3,"sources":["../src/AccentThemeProvider.tsx","../src/colors.ts","../src/AccentColorPicker.tsx","../src/utils.ts","../src/index.ts"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { \n  createContext, \n  useContext, \n  useEffect, \n  useState, \n  useCallback,\n  useMemo\n} from \"react\";\nimport type { \n  AccentColor, \n  AccentThemeContextType, \n  AccentThemeProviderProps \n} from \"./types\";\nimport { defaultAccentColors, mergeColors } from \"./colors\";\n\nconst STYLE_ID = 'accent-theme-base-styles';\n\nconst defaultContext: AccentThemeContextType = {\n  accentColor: \"teal\",\n  setAccentColor: () => {},\n  accentConfig: defaultAccentColors.teal,\n  mounted: false,\n  defaultColor: \"teal\",\n  resetToDefault: () => {},\n};\n\nconst AccentThemeContext = createContext<AccentThemeContextType>(defaultContext);\n\n// Base CSS that gets injected automatically\nconst BASE_CSS = `\n  :root {\n    --primary: 174 72% 35%;\n    --primary-foreground: 210 40% 98%;\n    --accent: 174 72% 45%;\n    --ring: 174 72% 45%;\n  }\n  \n  .dark {\n    --primary: 174 72% 45%;\n    --primary-foreground: 210 40% 98%;\n    --accent: 174 72% 55%;\n    --ring: 174 72% 55%;\n  }\n`;\n\n// Detect if dark mode is active\nfunction detectDarkMode(): boolean {\n  if (typeof window === 'undefined') return false;\n  \n  const root = document.documentElement;\n  \n  // Check various dark mode indicators\n  const isDark = \n    root.classList.contains('dark') ||\n    root.getAttribute('data-theme') === 'dark' ||\n    root.getAttribute('data-mode') === 'dark' ||\n    document.body.classList.contains('dark') ||\n    window.matchMedia('(prefers-color-scheme: dark)').matches;\n  \n  return isDark;\n}\n\nexport function AccentThemeProvider({ \n  children, \n  defaultColor = \"teal\",\n  customColors,\n  storageKey = \"accent-color\",\n  cssVariablePrefix = \"\",\n  injectCSS = true,\n  enableDarkMode = true,\n}: AccentThemeProviderProps) {\n  const colors = useMemo(() => mergeColors(defaultAccentColors, customColors), [customColors]);\n  \n  const [accentColor, setAccentColorState] = useState<AccentColor>(defaultColor);\n  const [mounted, setMounted] = useState(false);\n  const [isDark, setIsDark] = useState(false);\n\n  // Get CSS variable names\n  const getVarName = useCallback((name: string) => {\n    return cssVariablePrefix ? `${cssVariablePrefix}-${name}` : name;\n  }, [cssVariablePrefix]);\n\n  // Inject base CSS on mount\n  useEffect(() => {\n    if (!injectCSS || typeof document === 'undefined') return;\n    \n    // Check if styles already exist\n    if (!document.getElementById(STYLE_ID)) {\n      const style = document.createElement('style');\n      style.id = STYLE_ID;\n      style.textContent = BASE_CSS;\n      document.head.appendChild(style);\n    }\n  }, [injectCSS]);\n\n  // Initialize from localStorage and detect dark mode\n  useEffect(() => {\n    setMounted(true);\n    \n    // Check local storage\n    const stored = localStorage.getItem(storageKey) as AccentColor;\n    if (stored && colors[stored]) {\n      setAccentColorState(stored);\n    }\n    \n    // Detect dark mode\n    if (!enableDarkMode) return;\n    \n    setIsDark(detectDarkMode());\n    \n    // Watch for theme changes\n    const observer = new MutationObserver(() => {\n      setIsDark(detectDarkMode());\n    });\n    \n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: ['class', 'data-theme', 'data-mode']\n    });\n    \n    return () => observer.disconnect();\n  }, [storageKey, colors, enableDarkMode, defaultColor]);\n\n  // Update CSS variables when color changes\n  useEffect(() => {\n    if (!mounted || typeof document === 'undefined') return;\n    \n    const root = document.documentElement;\n    const config = colors[accentColor];\n    \n    if (!config) return;\n    \n    // Adjust colors for dark mode if enabled\n    const primary = isDark && enableDarkMode ? config.light : config.primary;\n    const accent = isDark && enableDarkMode ? config.light : config.light;\n    \n    // Update CSS variables\n    root.style.setProperty(`--${getVarName('primary')}`, primary);\n    root.style.setProperty(`--${getVarName('primary-foreground')}`, config.primaryForeground);\n    root.style.setProperty(`--${getVarName('ring')}`, accent);\n    root.style.setProperty(`--${getVarName('accent')}`, accent);\n    \n    // Store preference\n    localStorage.setItem(storageKey, accentColor);\n    \n    // Add data attribute for Tailwind selectors\n    root.setAttribute(`data-${getVarName('accent')}`, accentColor);\n    \n    // Dispatch custom event for external listeners\n    window.dispatchEvent(new CustomEvent('accentthemechange', { \n      detail: { color: accentColor, config, isDark } \n    }));\n  }, [accentColor, mounted, colors, cssVariablePrefix, getVarName, isDark, enableDarkMode, storageKey]);\n\n  const setAccentColor = useCallback((color: AccentColor) => {\n    if (colors[color]) {\n      setAccentColorState(color);\n    } else {\n      console.warn(`[AccentTheme] Color \"${color}\" not found in available colors`);\n    }\n  }, [colors]);\n\n  const resetToDefault = useCallback(() => {\n    setAccentColorState(defaultColor);\n    localStorage.removeItem(storageKey);\n  }, [defaultColor, storageKey]);\n\n  const value: AccentThemeContextType = {\n    accentColor,\n    setAccentColor,\n    accentConfig: colors[accentColor] || colors[defaultColor],\n    mounted,\n    defaultColor,\n    resetToDefault,\n  };\n\n  return React.createElement(\n    AccentThemeContext.Provider,\n    { value },\n    children\n  );\n}\n\nexport function useAccentTheme() {\n  return useContext(AccentThemeContext);\n}\n\n// Utility hook for getting color values\nexport function useAccentColor() {\n  const context = useAccentTheme();\n  const { accentConfig, mounted } = context;\n  \n  // Get dark mode from detectDarkMode for the hook\n  const [isDark, setIsDark] = useState(false);\n  \n  useEffect(() => {\n    setIsDark(detectDarkMode());\n    \n    const observer = new MutationObserver(() => {\n      setIsDark(detectDarkMode());\n    });\n    \n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: ['class', 'data-theme', 'data-mode']\n    });\n    \n    return () => observer.disconnect();\n  }, []);\n  \n  return {\n    primary: `hsl(${accentConfig.primary})`,\n    primaryForeground: `hsl(${accentConfig.primaryForeground})`,\n    light: `hsl(${accentConfig.light})`,\n    dark: `hsl(${accentConfig.dark})`,\n    gradient: accentConfig.gradient,\n    mounted,\n    isDark,\n  };\n}\n\n// Hook to detect dark mode\nexport function useAccentDarkMode() {\n  const [isDark, setIsDark] = useState(false);\n  \n  useEffect(() => {\n    setIsDark(detectDarkMode());\n    \n    const observer = new MutationObserver(() => {\n      setIsDark(detectDarkMode());\n    });\n    \n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: ['class', 'data-theme', 'data-mode']\n    });\n    \n    return () => observer.disconnect();\n  }, []);\n  \n  return isDark;\n}\n","import { AccentColor, AccentColorConfig } from './types';\n\nexport const defaultAccentColors: Record<AccentColor, AccentColorConfig> = {\n  teal: {\n    name: \"Teal\",\n    primary: \"174 72% 35%\",\n    primaryForeground: \"210 40% 98%\",\n    light: \"174 72% 45%\",\n    dark: \"174 72% 25%\",\n    gradient: \"from-teal-500 to-emerald-500\",\n  },\n  blue: {\n    name: \"Ocean Blue\",\n    primary: \"217 91% 45%\",\n    primaryForeground: \"210 40% 98%\",\n    light: \"217 91% 55%\",\n    dark: \"217 91% 35%\",\n    gradient: \"from-blue-500 to-cyan-500\",\n  },\n  purple: {\n    name: \"Royal Purple\",\n    primary: \"270 60% 45%\",\n    primaryForeground: \"210 40% 98%\",\n    light: \"270 60% 55%\",\n    dark: \"270 60% 35%\",\n    gradient: \"from-purple-500 to-pink-500\",\n  },\n  rose: {\n    name: \"Rose Pink\",\n    primary: \"350 80% 50%\",\n    primaryForeground: \"210 40% 98%\",\n    light: \"350 80% 60%\",\n    dark: \"350 80% 40%\",\n    gradient: \"from-rose-500 to-pink-500\",\n  },\n  amber: {\n    name: \"Sunset Amber\",\n    primary: \"35 95% 45%\",\n    primaryForeground: \"210 40% 98%\",\n    light: \"35 95% 55%\",\n    dark: \"35 95% 35%\",\n    gradient: \"from-amber-500 to-orange-500\",\n  },\n  emerald: {\n    name: \"Forest Emerald\",\n    primary: \"150 65% 35%\",\n    primaryForeground: \"210 40% 98%\",\n    light: \"150 65% 45%\",\n    dark: \"150 65% 25%\",\n    gradient: \"from-emerald-500 to-green-500\",\n  },\n  indigo: {\n    name: \"Deep Indigo\",\n    primary: \"240 60% 50%\",\n    primaryForeground: \"210 40% 98%\",\n    light: \"240 60% 60%\",\n    dark: \"240 60% 40%\",\n    gradient: \"from-indigo-500 to-purple-500\",\n  },\n  cyan: {\n    name: \"Electric Cyan\",\n    primary: \"190 90% 45%\",\n    primaryForeground: \"210 40% 98%\",\n    light: \"190 90% 55%\",\n    dark: \"190 90% 35%\",\n    gradient: \"from-cyan-500 to-blue-500\",\n  },\n};\n\nexport function mergeColors(\n  defaultColors: Record<string, AccentColorConfig>,\n  customColors?: Record<string, AccentColorConfig>\n): Record<string, AccentColorConfig> {\n  if (!customColors) return defaultColors;\n  return { ...defaultColors, ...customColors };\n}\n","\"use client\";\n\nimport * as React from \"react\";\nimport { useState, useRef, useEffect } from \"react\";\nimport { useAccentTheme, useAccentColor } from \"./AccentThemeProvider\";\nimport { defaultAccentColors } from \"./colors\";\nimport type { \n  AccentColor, \n  AccentColorPickerProps,\n  AccentColorSwatchesProps,\n  AccentColorMenuProps,\n  AccentColorButtonProps,\n  AccentThemeResetProps,\n  CurrentAccentIndicatorProps,\n  AccentColorGridProps,\n  AccentColorSwatchProps\n} from \"./types\";\n\n// Size mappings\nconst sizeClasses = {\n  sm: \"w-6 h-6\",\n  md: \"w-8 h-8\",\n  lg: \"w-10 h-10\",\n};\n\nconst gapClasses = {\n  sm: \"gap-1\",\n  md: \"gap-2\",\n  lg: \"gap-3\",\n};\n\n// Checkmark icon component\nconst CheckmarkIcon = ({ className = \"\" }: { className?: string }) => (\n  <svg className={className} viewBox=\"0 0 20 20\" fill=\"currentColor\">\n    <path\n      fillRule=\"evenodd\"\n      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\"\n      clipRule=\"evenodd\"\n    />\n  </svg>\n);\n\n// Chevron icon\nconst ChevronIcon = ({ className = \"\" }: { className?: string }) => (\n  <svg className={className} fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M19 9l-7 7-7-7\" />\n  </svg>\n);\n\n// Reset icon\nconst ResetIcon = ({ className = \"\" }: { className?: string }) => (\n  <svg className={className} fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n    <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\" />\n  </svg>\n);\n\n// Individual swatch component\nexport function AccentColorSwatch({ \n  color, \n  isSelected, \n  onClick,\n  size = \"md\",\n  className = \"\",\n  showCheckmark = true,\n}: AccentColorSwatchProps) {\n  const config = defaultAccentColors[color];\n  if (!config) return null;\n\n  return React.createElement(\"button\", {\n    onClick,\n    className: `\n      relative rounded-full transition-all duration-200 flex-shrink-0\n      hover:scale-110 focus:outline-none focus:ring-2 focus:ring-offset-2\n      focus:ring-offset-white dark:focus:ring-offset-gray-900\n      ${sizeClasses[size]}\n      ${isSelected ? \"ring-2 ring-offset-2 scale-110\" : \"\"}\n      ${className}\n    `,\n    style: {\n      background: `hsl(${config.primary})`,\n      ['--tw-ring-color' as string]: `hsl(${config.light})`,\n    },\n    title: config.name,\n    \"aria-label\": `Select ${config.name} theme`,\n    \"aria-pressed\": isSelected,\n  }, isSelected && showCheckmark && React.createElement(CheckmarkIcon, {\n    className: \"absolute inset-0 w-full h-full p-1.5 text-white drop-shadow-md\"\n  }));\n}\n\n// Main color picker with multiple variants\nexport function AccentColorPicker({\n  size = \"md\",\n  variant = \"dropdown\",\n  columns = 4,\n  className = \"\",\n  onChange,\n  label = \"Theme\",\n  showColorName = true,\n}: AccentColorPickerProps) {\n  const { accentColor, setAccentColor, mounted } = useAccentTheme();\n  const { primary } = useAccentColor();\n  const [isOpen, setIsOpen] = useState(false);\n  const dropdownRef = useRef<HTMLDivElement>(null);\n\n  // Close dropdown on outside click\n  useEffect(() => {\n    if (variant !== 'dropdown') return;\n    \n    const handleClickOutside = (event: MouseEvent) => {\n      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {\n        setIsOpen(false);\n      }\n    };\n\n    if (isOpen) {\n      document.addEventListener('mousedown', handleClickOutside);\n    }\n    \n    return () => document.removeEventListener('mousedown', handleClickOutside);\n  }, [isOpen, variant]);\n\n  const handleColorChange = (color: AccentColor) => {\n    setAccentColor(color);\n    onChange?.(color);\n    if (variant === \"dropdown\") {\n      setIsOpen(false);\n    }\n  };\n\n  if (!mounted) {\n    return React.createElement(\"div\", {\n      className: `animate-pulse bg-gray-200 dark:bg-gray-700 rounded-lg ${sizeClasses[size]} ${className}`\n    });\n  }\n\n  // Inline variant\n  if (variant === \"inline\") {\n    return React.createElement(\"div\", {\n      className: `grid ${gapClasses.md} ${className}`,\n      style: { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` }\n    }, Object.entries(defaultAccentColors).map(([color]) => {\n      const isSelected = accentColor === color;\n      return React.createElement(AccentColorSwatch, {\n        key: color,\n        color: color as AccentColor,\n        isSelected,\n        onClick: () => handleColorChange(color),\n        size,\n      });\n    }));\n  }\n\n  // Menu variant (uses fixed positioning for better placement)\n  if (variant === \"menu\") {\n    return React.createElement(AccentColorMenu, {\n      size,\n      className,\n      onChange,\n      label,\n    });\n  }\n\n  // Dropdown variant (default)\n  return React.createElement(\"div\", { \n    ref: dropdownRef,\n    className: `relative inline-block ${className}` \n  },\n    React.createElement(\"button\", {\n      onClick: () => setIsOpen(!isOpen),\n      className: `\n        flex items-center gap-2 px-3 py-2 rounded-lg \n        bg-white dark:bg-gray-800 \n        border border-gray-200 dark:border-gray-700 \n        hover:bg-gray-50 dark:hover:bg-gray-700 \n        transition-colors focus:outline-none focus:ring-2 \n        focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900\n      `,\n      style: { ['--tw-ring-color' as string]: primary },\n      \"aria-expanded\": isOpen,\n      \"aria-haspopup\": \"listbox\",\n    }, [\n      React.createElement(\"div\", {\n        key: \"swatch\",\n        className: \"w-5 h-5 rounded-full shadow-sm\",\n        style: { background: primary }\n      }),\n      showColorName && React.createElement(\"span\", {\n        key: \"label\",\n        className: \"text-sm font-medium text-gray-700 dark:text-gray-300\"\n      }, defaultAccentColors[accentColor]?.name || label),\n      React.createElement(ChevronIcon, {\n        key: \"chevron\",\n        className: `w-4 h-4 text-gray-500 dark:text-gray-400 transition-transform duration-200 ${isOpen ? \"rotate-180\" : \"\"}`\n      })\n    ]),\n    isOpen && React.createElement(React.Fragment, {}, [\n      React.createElement(\"div\", {\n        key: \"backdrop\",\n        className: \"fixed inset-0 z-40\",\n        onClick: () => setIsOpen(false)\n      }),\n      React.createElement(\"div\", {\n        key: \"dropdown\",\n        className: `\n          absolute right-0 mt-2 p-3 \n          bg-white dark:bg-gray-800 \n          rounded-xl shadow-xl \n          border border-gray-200 dark:border-gray-700 \n          z-50 min-w-[200px]\n        `,\n        role: \"listbox\"\n      }, [\n        React.createElement(\"div\", {\n          key: \"grid\",\n          className: \"grid grid-cols-4 gap-2\"\n        }, Object.entries(defaultAccentColors).map(([color, config]) => {\n          const isSelected = accentColor === color;\n          return React.createElement(\"button\", {\n            key: color,\n            onClick: () => handleColorChange(color),\n            className: `\n              relative w-10 h-10 rounded-lg transition-all duration-200\n              hover:scale-110 focus:outline-none focus:ring-2 focus:ring-offset-2\n              focus:ring-offset-white dark:focus:ring-offset-gray-900\n              ${isSelected ? \"ring-2 ring-offset-2 scale-105\" : \"\"}\n            `,\n            style: {\n              background: `hsl(${config.primary})`,\n              ['--tw-ring-color' as string]: `hsl(${config.light})`,\n            },\n            title: config.name,\n            role: \"option\",\n            \"aria-selected\": isSelected\n          }, isSelected && React.createElement(CheckmarkIcon, {\n            className: \"absolute inset-0 w-full h-full p-2 text-white drop-shadow-md\"\n          }));\n        })),\n        React.createElement(\"div\", {\n          key: \"footer\",\n          className: \"mt-3 pt-3 border-t border-gray-100 dark:border-gray-700\"\n        }, React.createElement(\"p\", {\n          className: \"text-xs text-gray-500 dark:text-gray-400 text-center\"\n        }, `Current: ${defaultAccentColors[accentColor]?.name || accentColor}`))\n      ])\n    ])\n  );\n}\n\n// Horizontal row of color swatches\nexport function AccentColorSwatches({\n  className = \"\",\n  size = \"md\",\n  onChange,\n  showCheckmark = true,\n  gap = \"md\",\n}: AccentColorSwatchesProps) {\n  const { accentColor, setAccentColor, mounted } = useAccentTheme();\n\n  const handleColorChange = (color: AccentColor) => {\n    setAccentColor(color);\n    onChange?.(color);\n  };\n\n  if (!mounted) {\n    return React.createElement(\"div\", {\n      className: `flex ${gapClasses[gap]} ${className}`\n    }, Array(8).fill(null).map((_, i) => React.createElement(\"div\", {\n      key: i,\n      className: `animate-pulse bg-gray-200 dark:bg-gray-700 rounded-full ${sizeClasses[size]}`\n    })));\n  }\n\n  return React.createElement(\"div\", {\n    className: `flex flex-wrap ${gapClasses[gap]} ${className}`\n  }, Object.entries(defaultAccentColors).map(([color]) => {\n    const isSelected = accentColor === color;\n    return React.createElement(AccentColorSwatch, {\n      key: color,\n      color: color as AccentColor,\n      isSelected,\n      onClick: () => handleColorChange(color),\n      size,\n      showCheckmark,\n    });\n  }));\n}\n\n// Menu dropdown component\nexport function AccentColorMenu({\n  className = \"\",\n  size: _size = \"md\",\n  onChange,\n  align = \"end\",\n  label = \"Theme\",\n}: AccentColorMenuProps) {\n  const { accentColor, setAccentColor, mounted } = useAccentTheme();\n  const { primary } = useAccentColor();\n  const [isOpen, setIsOpen] = useState(false);\n  const menuRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {\n        setIsOpen(false);\n      }\n    };\n\n    if (isOpen) {\n      document.addEventListener('mousedown', handleClickOutside);\n    }\n    \n    return () => document.removeEventListener('mousedown', handleClickOutside);\n  }, [isOpen]);\n\n  const handleColorChange = (color: AccentColor) => {\n    setAccentColor(color);\n    onChange?.(color);\n    setIsOpen(false);\n  };\n\n  const alignClasses = {\n    start: \"left-0\",\n    center: \"left-1/2 -translate-x-1/2\",\n    end: \"right-0\",\n  };\n\n  if (!mounted) {\n    return React.createElement(\"div\", {\n      className: `animate-pulse bg-gray-200 dark:bg-gray-700 rounded-lg w-24 h-9 ${className}`\n    });\n  }\n\n  return React.createElement(\"div\", { \n    ref: menuRef,\n    className: `relative inline-block ${className}` \n  },\n    React.createElement(\"button\", {\n      onClick: () => setIsOpen(!isOpen),\n      className: `\n        flex items-center gap-2 px-3 py-2 rounded-lg \n        bg-white dark:bg-gray-800 \n        border border-gray-200 dark:border-gray-700 \n        hover:bg-gray-50 dark:hover:bg-gray-700 \n        transition-colors focus:outline-none focus:ring-2 \n        focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900\n      `,\n      style: { ['--tw-ring-color' as string]: primary },\n      \"aria-expanded\": isOpen,\n    }, [\n      React.createElement(\"div\", {\n        key: \"swatch\",\n        className: `${sizeClasses.sm} rounded-full shadow-sm`,\n        style: { background: primary }\n      }),\n      React.createElement(\"span\", {\n        key: \"label\",\n        className: \"text-sm font-medium text-gray-700 dark:text-gray-300\"\n      }, label),\n      React.createElement(ChevronIcon, {\n        key: \"chevron\",\n        className: `w-4 h-4 text-gray-500 dark:text-gray-400 transition-transform ${isOpen ? \"rotate-180\" : \"\"}`\n      })\n    ]),\n    isOpen && React.createElement(\"div\", {\n      className: `\n        absolute top-full mt-2 p-2 \n        bg-white dark:bg-gray-800 \n        rounded-lg shadow-xl \n        border border-gray-200 dark:border-gray-700 \n        z-50 min-w-[160px]\n        ${alignClasses[align]}\n      `\n    }, Object.entries(defaultAccentColors).map(([color, config]) => {\n      const isSelected = accentColor === color;\n      return React.createElement(\"button\", {\n        key: color,\n        onClick: () => handleColorChange(color),\n        className: `\n          w-full flex items-center gap-3 px-3 py-2 rounded-md\n          transition-colors\n          ${isSelected ? \"bg-gray-100 dark:bg-gray-700\" : \"hover:bg-gray-50 dark:hover:bg-gray-700/50\"}\n        `,\n      }, [\n        React.createElement(\"div\", {\n          key: \"dot\",\n          className: `w-4 h-4 rounded-full flex-shrink-0`,\n          style: { background: `hsl(${config.primary})` }\n        }),\n        React.createElement(\"span\", {\n          key: \"name\",\n          className: `text-sm ${isSelected ? \"font-medium text-gray-900 dark:text-gray-100\" : \"text-gray-700 dark:text-gray-300\"}`\n        }, config.name),\n        isSelected && React.createElement(CheckmarkIcon, {\n          key: \"check\",\n          className: \"w-4 h-4 ml-auto text-gray-500 dark:text-gray-400\"\n        })\n      ]);\n    }))\n  );\n}\n\n// Button showing current accent color\nexport function AccentColorButton({\n  className = \"\",\n  size = \"md\",\n  onClick,\n  showLabel = false,\n  buttonVariant = \"default\",\n}: AccentColorButtonProps) {\n  const { accentColor, mounted } = useAccentTheme();\n  const { primary } = useAccentColor();\n  const colorConfig = defaultAccentColors[accentColor];\n\n  const variantClasses = {\n    default: \"bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700\",\n    ghost: \"hover:bg-gray-100 dark:hover:bg-gray-800\",\n    outline: \"border-2 border-current hover:bg-gray-50 dark:hover:bg-gray-800\",\n  };\n\n  const sizeStyles = {\n    sm: { button: \"p-1.5\", dot: \"w-4 h-4\" },\n    md: { button: \"p-2\", dot: \"w-5 h-5\" },\n    lg: { button: \"p-2.5\", dot: \"w-6 h-6\" },\n  };\n\n  if (!mounted) {\n    return React.createElement(\"div\", {\n      className: `animate-pulse bg-gray-200 dark:bg-gray-700 rounded-lg ${sizeStyles[size].button}`\n    });\n  }\n\n  return React.createElement(\"button\", {\n    onClick,\n    className: `\n      inline-flex items-center gap-2 rounded-lg \n      transition-colors focus:outline-none focus:ring-2 \n      focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900\n      ${variantClasses[buttonVariant]}\n      ${sizeStyles[size].button}\n      ${className}\n    `,\n    style: { ['--tw-ring-color' as string]: primary },\n    title: colorConfig?.name || accentColor,\n  }, [\n    React.createElement(\"div\", {\n      key: \"dot\",\n      className: `${sizeStyles[size].dot} rounded-full shadow-sm`,\n      style: { background: primary }\n    }),\n    showLabel && React.createElement(\"span\", {\n      key: \"label\",\n      className: \"text-sm font-medium text-gray-700 dark:text-gray-300\"\n    }, colorConfig?.name || accentColor)\n  ]);\n}\n\n// Reset to default button\nexport function AccentThemeReset({\n  className = \"\",\n  size = \"md\",\n  text = \"Reset\",\n  onReset,\n  variant = \"button\",\n}: AccentThemeResetProps) {\n  const { defaultColor, resetToDefault, mounted, accentColor } = useAccentTheme();\n  const { primary } = useAccentColor();\n  \n  const isDefault = accentColor === defaultColor;\n\n  const handleReset = () => {\n    resetToDefault();\n    onReset?.();\n  };\n\n  const sizeStyles = {\n    sm: { button: \"text-xs px-2 py-1\", icon: \"w-3 h-3\" },\n    md: { button: \"text-sm px-3 py-1.5\", icon: \"w-3.5 h-3.5\" },\n    lg: { button: \"text-base px-4 py-2\", icon: \"w-4 h-4\" },\n  };\n\n  const variantClasses = {\n    button: `\n      inline-flex items-center gap-1.5 rounded-md\n      bg-gray-100 dark:bg-gray-800 \n      text-gray-700 dark:text-gray-300\n      hover:bg-gray-200 dark:hover:bg-gray-700\n      disabled:opacity-50 disabled:cursor-not-allowed\n      text-sm px-3 py-1.5\n    `,\n    link: `\n      inline-flex items-center gap-1.5\n      text-gray-500 dark:text-gray-400\n      hover:text-gray-700 dark:hover:text-gray-300\n      underline underline-offset-2\n      disabled:opacity-50 disabled:cursor-not-allowed disabled:no-underline\n    `,\n    subtle: `\n      inline-flex items-center gap-1.5\n      text-gray-400 dark:text-gray-500\n      hover:text-gray-600 dark:hover:text-gray-400\n      disabled:opacity-50 disabled:cursor-not-allowed\n    `,\n  };\n\n  if (!mounted) {\n    return React.createElement(\"div\", {\n      className: `animate-pulse bg-gray-200 dark:bg-gray-700 rounded-md w-20 h-8`\n    });\n  }\n\n  return React.createElement(\"button\", {\n    onClick: handleReset,\n    disabled: isDefault,\n    className: `\n      transition-colors focus:outline-none focus:ring-2 \n      focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900\n      ${variantClasses[variant]}\n      ${className}\n    `,\n    style: variant === 'button' ? { ['--tw-ring-color' as string]: primary } : undefined,\n    title: isDefault ? \"Already using default theme\" : `Reset to default theme`,\n  }, [\n    React.createElement(ResetIcon, {\n      key: \"icon\",\n      className: sizeStyles[size].icon\n    }),\n    React.createElement(\"span\", { key: \"text\" }, text)\n  ]);\n}\n\n// Current color indicator (non-interactive)\nexport function CurrentAccentIndicator({\n  className = \"\",\n  size = \"md\",\n  showName = false,\n  pulseOnChange = false,\n}: CurrentAccentIndicatorProps) {\n  const { accentColor, mounted } = useAccentTheme();\n  const { primary } = useAccentColor();\n  const config = defaultAccentColors[accentColor];\n  const [isPulsing, setIsPulsing] = useState(false);\n  const prevColorRef = useRef(accentColor);\n\n  useEffect(() => {\n    if (pulseOnChange && prevColorRef.current !== accentColor) {\n      setIsPulsing(true);\n      const timer = setTimeout(() => setIsPulsing(false), 500);\n      prevColorRef.current = accentColor;\n      return () => clearTimeout(timer);\n    }\n    return undefined;\n  }, [accentColor, pulseOnChange]);\n\n  if (!mounted) {\n    return React.createElement(\"div\", {\n      className: `flex items-center gap-2 ${className}`\n    }, [\n      React.createElement(\"div\", {\n        key: \"dot\",\n        className: `animate-pulse bg-gray-200 dark:bg-gray-700 rounded-full ${sizeClasses[size]}`\n      }),\n      showName && React.createElement(\"div\", {\n        key: \"name\",\n        className: \"animate-pulse bg-gray-200 dark:bg-gray-700 rounded h-4 w-16\"\n      })\n    ]);\n  }\n\n  return React.createElement(\"div\", {\n    className: `inline-flex items-center gap-2 ${className}`\n  }, [\n    React.createElement(\"div\", {\n      key: \"dot\",\n      className: `\n        ${sizeClasses[size]} rounded-full shadow-sm flex-shrink-0\n        ${isPulsing ? \"animate-ping\" : \"\"}\n      `,\n      style: { background: primary }\n    }),\n    showName && React.createElement(\"span\", {\n      key: \"name\",\n      className: \"text-sm font-medium text-gray-700 dark:text-gray-300\"\n    }, config?.name || accentColor)\n  ]);\n}\n\n// Grid layout for color selection\nexport function AccentColorGrid({\n  className = \"\",\n  size = \"md\",\n  columns = 4,\n  onChange,\n  showLabels = false,\n  gap = \"md\",\n}: AccentColorGridProps) {\n  const { accentColor, setAccentColor, mounted } = useAccentTheme();\n\n  const handleColorChange = (color: AccentColor) => {\n    setAccentColor(color);\n    onChange?.(color);\n  };\n\n  const gridCols = {\n    2: \"grid-cols-2\",\n    3: \"grid-cols-3\",\n    4: \"grid-cols-4\",\n    5: \"grid-cols-5\",\n    6: \"grid-cols-6\",\n    8: \"grid-cols-8\",\n  };\n\n  if (!mounted) {\n    return React.createElement(\"div\", {\n      className: `grid ${gridCols[columns]} ${gapClasses[gap]} ${className}`\n    }, Array(8).fill(null).map((_, i) => React.createElement(\"div\", {\n      key: i,\n      className: `animate-pulse bg-gray-200 dark:bg-gray-700 rounded-lg ${sizeClasses[size]}`\n    })));\n  }\n\n  return React.createElement(\"div\", {\n    className: `grid ${gridCols[columns]} ${gapClasses[gap]} ${className}`\n  }, Object.entries(defaultAccentColors).map(([color, config]) => {\n    const isSelected = accentColor === color;\n    \n    if (showLabels) {\n      return React.createElement(\"button\", {\n        key: color,\n        onClick: () => handleColorChange(color),\n        className: `\n          flex flex-col items-center gap-1.5 p-2 rounded-lg\n          transition-colors\n          ${isSelected ? \"bg-gray-100 dark:bg-gray-700\" : \"hover:bg-gray-50 dark:hover:bg-gray-800\"}\n        `,\n      }, [\n        React.createElement(\"div\", {\n          key: \"dot\",\n          className: `${sizeClasses[size]} rounded-full shadow-sm`,\n          style: { background: `hsl(${config.primary})` }\n        }),\n        React.createElement(\"span\", {\n          key: \"name\",\n          className: `text-xs ${isSelected ? \"font-medium text-gray-900 dark:text-gray-100\" : \"text-gray-600 dark:text-gray-400\"}`\n        }, config.name)\n      ]);\n    }\n\n    return React.createElement(AccentColorSwatch, {\n      key: color,\n      color: color as AccentColor,\n      isSelected,\n      onClick: () => handleColorChange(color),\n      size,\n    });\n  }));\n}\n","import { AccentColorConfig } from './types';\n\n/**\n * Generate CSS custom properties for an accent color\n */\nexport function generateCSSVariables(\n  config: AccentColorConfig,\n  prefix: string = \"\"\n): Record<string, string> {\n  const p = prefix ? `${prefix}-` : \"\";\n  return {\n    [`--${p}primary`]: config.primary,\n    [`--${p}primary-foreground`]: config.primaryForeground,\n    [`--${p}accent`]: config.light,\n    [`--${p}ring`]: config.light,\n  };\n}\n\n/**\n * Apply CSS variables to an element\n */\nexport function applyCSSVariables(\n  element: HTMLElement,\n  variables: Record<string, string>\n): void {\n  Object.entries(variables).forEach(([key, value]) => {\n    element.style.setProperty(key, value);\n  });\n}\n\n/**\n * Create a gradient string from accent color config\n */\nexport function createGradient(\n  config: AccentColorConfig,\n  direction: string = \"to right\"\n): string {\n  return `linear-gradient(${direction}, hsl(${config.light}), hsl(${config.primary}))`;\n}\n\n/**\n * Create a shadow with the accent color\n */\nexport function createShadow(\n  config: AccentColorConfig,\n  intensity: number = 0.3,\n  blur: number = 20\n): string {\n  return `0 4px ${blur}px hsl(${config.primary} / ${intensity})`;\n}\n\n/**\n * Lighten or darken an HSL color\n */\nexport function adjustHSL(\n  hsl: string,\n  adjustments: {\n    hue?: number;\n    saturation?: number;\n    lightness?: number;\n  }\n): string {\n  const [h, s, l] = hsl.split(\" \").map((v) => parseFloat(v));\n  const newH = h + (adjustments.hue || 0);\n  const newS = Math.max(0, Math.min(100, s + (adjustments.saturation || 0)));\n  const newL = Math.max(0, Math.min(100, l + (adjustments.lightness || 0)));\n  return `${newH} ${newS}% ${newL}%`;\n}\n\n/**\n * Get contrasting text color (black or white) for a background\n */\nexport function getContrastColor(\n  hsl: string,\n  threshold: number = 50\n): \"black\" | \"white\" {\n  const [, , l] = hsl.split(\" \").map((v) => parseFloat(v));\n  return l > threshold ? \"black\" : \"white\";\n}\n\n/**\n * Check if code is running on client side\n */\nexport function isClient(): boolean {\n  return typeof window !== \"undefined\";\n}\n\n/**\n * Local storage wrapper with error handling\n */\nexport const storage = {\n  get: (key: string, defaultValue?: string): string | undefined => {\n    if (!isClient()) return defaultValue;\n    try {\n      return localStorage.getItem(key) || defaultValue;\n    } catch {\n      return defaultValue;\n    }\n  },\n  set: (key: string, value: string): void => {\n    if (!isClient()) return;\n    try {\n      localStorage.setItem(key, value);\n    } catch {\n      // Ignore storage errors\n    }\n  },\n  remove: (key: string): void => {\n    if (!isClient()) return;\n    try {\n      localStorage.removeItem(key);\n    } catch {\n      // Ignore storage errors\n    }\n  },\n};\n","// Main exports - Provider and Hooks\nexport { \n  AccentThemeProvider, \n  useAccentTheme, \n  useAccentColor,\n  useAccentDarkMode \n} from './AccentThemeProvider';\n\n// UI Components\nexport { \n  AccentColorPicker, \n  AccentColorSwatch,\n  AccentColorSwatches,\n  AccentColorMenu,\n  AccentColorButton,\n  AccentThemeReset,\n  CurrentAccentIndicator,\n  AccentColorGrid,\n} from './AccentColorPicker';\n\n// Color data\nexport { defaultAccentColors, mergeColors } from './colors';\n\n// Types\nexport type {\n  // Core types\n  AccentColor,\n  AccentColorConfig,\n  AccentThemeContextType,\n  AccentThemeProviderProps,\n  \n  // Component types\n  ComponentSize,\n  BaseComponentProps,\n  AccentColorPickerProps,\n  AccentColorSwatchesProps,\n  AccentColorMenuProps,\n  AccentColorButtonProps,\n  AccentThemeResetProps,\n  CurrentAccentIndicatorProps,\n  AccentColorGridProps,\n  AccentColorSwatchProps,\n} from './types';\n\n// Utilities\nexport {\n  generateCSSVariables,\n  applyCSSVariables,\n  createGradient,\n  createShadow,\n  adjustHSL,\n  getContrastColor,\n  isClient,\n  storage,\n} from './utils';\n\n// Version\nexport const VERSION = '2.0.0';\n"],"mappings":"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","names":["React","useState","useEffect","useState","useEffect"]}

package/dist/styles.css

@@ -0,0 +1,75 @@
+/**
+ * Accent Theme - Base Styles
+ * 
+ * Import this file in your CSS if you prefer not to use the injectCSS prop:
+ * 
+ * @import '@razzusharma/accent-theme/styles.css';
+ * 
+ * Or in your JS/TS:
+ * import '@razzusharma/accent-theme/styles.css';
+ */
+
+:root {
+  /* Default accent color (teal) */
+  --primary: 174 72% 35%;
+  --primary-foreground: 210 40% 98%;
+  --accent: 174 72% 45%;
+  --ring: 174 72% 45%;
+  
+  /* Aliases for convenience */
+  --accent-color: 174 72% 35%;
+  --accent-light: 174 72% 45%;
+  --accent-dark: 174 72% 25%;
+}
+
+/* Dark mode adjustments */
+.dark,
+[data-theme="dark"],
+[data-mode="dark"] {
+  --primary: 174 72% 45%;
+  --primary-foreground: 210 40% 98%;
+  --accent: 174 72% 55%;
+  --ring: 174 72% 55%;
+  
+  --accent-color: 174 72% 45%;
+  --accent-light: 174 72% 55%;
+  --accent-dark: 174 72% 35%;
+}
+
+/* Utility classes that work without Tailwind */
+.accent-bg {
+  background-color: hsl(var(--accent));
+}
+
+.accent-bg-primary {
+  background-color: hsl(var(--primary));
+}
+
+.accent-text {
+  color: hsl(var(--accent));
+}
+
+.accent-text-primary {
+  color: hsl(var(--primary));
+}
+
+.accent-border {
+  border-color: hsl(var(--accent));
+}
+
+.accent-ring:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px hsl(var(--ring));
+}
+
+/* Animation for color transitions */
+.accent-transition {
+  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
+}
+
+/* Reduced motion preference */
+@media (prefers-reduced-motion: reduce) {
+  .accent-transition {
+    transition: none;
+  }
+}

package/dist/tailwind.d.mts

@@ -0,0 +1,3 @@
+declare const accentThemePlugin: any;
+
+export { accentThemePlugin, accentThemePlugin as default };

package/dist/tailwind.d.ts

@@ -0,0 +1,3 @@
+declare const accentThemePlugin: any;
+
+export { accentThemePlugin, accentThemePlugin as default };

package/dist/tailwind.js

@@ -0,0 +1,107 @@
+// Tailwind plugin for accent-theme
+
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/tailwind.ts
+var tailwind_exports = {};
+__export(tailwind_exports, {
+  accentThemePlugin: () => accentThemePlugin,
+  default: () => tailwind_default
+});
+module.exports = __toCommonJS(tailwind_exports);
+var plugin = require("tailwindcss/plugin");
+var accentThemePlugin = plugin(
+  // Add base styles
+  function({ addBase }) {
+    addBase({
+      ":root": {
+        "--primary": "174 72% 35%",
+        "--primary-foreground": "210 40% 98%",
+        "--accent": "174 72% 45%",
+        "--ring": "174 72% 45%"
+      },
+      ".dark": {
+        "--primary": "174 72% 45%",
+        "--primary-foreground": "210 40% 98%",
+        "--accent": "174 72% 55%",
+        "--ring": "174 72% 55%"
+      }
+    });
+  },
+  // Extend theme
+  {
+    theme: {
+      extend: {
+        colors: {
+          primary: {
+            DEFAULT: "hsl(var(--primary))",
+            foreground: "hsl(var(--primary-foreground))"
+          },
+          accent: "hsl(var(--accent))",
+          ring: "hsl(var(--ring))"
+        },
+        backgroundColor: {
+          primary: "hsl(var(--primary))",
+          accent: "hsl(var(--accent))"
+        },
+        textColor: {
+          primary: "hsl(var(--primary))",
+          "primary-foreground": "hsl(var(--primary-foreground))",
+          accent: "hsl(var(--accent))"
+        },
+        borderColor: {
+          primary: "hsl(var(--primary))",
+          accent: "hsl(var(--accent))"
+        },
+        ringColor: {
+          primary: "hsl(var(--primary))",
+          accent: "hsl(var(--accent))",
+          ring: "hsl(var(--ring))"
+        },
+        ringOffsetColor: {
+          primary: "hsl(var(--primary))",
+          accent: "hsl(var(--accent))"
+        },
+        outlineColor: {
+          primary: "hsl(var(--primary))",
+          accent: "hsl(var(--accent))"
+        },
+        fill: {
+          primary: "hsl(var(--primary))",
+          accent: "hsl(var(--accent))"
+        },
+        stroke: {
+          primary: "hsl(var(--primary))",
+          accent: "hsl(var(--accent))"
+        }
+      }
+    }
+  }
+);
+var tailwind_default = accentThemePlugin;
+if (typeof module !== "undefined" && module.exports) {
+  module.exports = accentThemePlugin;
+  module.exports.accentThemePlugin = accentThemePlugin;
+  module.exports.default = accentThemePlugin;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  accentThemePlugin
+});

package/dist/tailwind.mjs

@@ -0,0 +1,89 @@
+// Tailwind plugin for accent-theme
+
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// src/tailwind.ts
+var plugin = __require("tailwindcss/plugin");
+var accentThemePlugin = plugin(
+  // Add base styles
+  function({ addBase }) {
+    addBase({
+      ":root": {
+        "--primary": "174 72% 35%",
+        "--primary-foreground": "210 40% 98%",
+        "--accent": "174 72% 45%",
+        "--ring": "174 72% 45%"
+      },
+      ".dark": {
+        "--primary": "174 72% 45%",
+        "--primary-foreground": "210 40% 98%",
+        "--accent": "174 72% 55%",
+        "--ring": "174 72% 55%"
+      }
+    });
+  },
+  // Extend theme
+  {
+    theme: {
+      extend: {
+        colors: {
+          primary: {
+            DEFAULT: "hsl(var(--primary))",
+            foreground: "hsl(var(--primary-foreground))"
+          },
+          accent: "hsl(var(--accent))",
+          ring: "hsl(var(--ring))"
+        },
+        backgroundColor: {
+          primary: "hsl(var(--primary))",
+          accent: "hsl(var(--accent))"
+        },
+        textColor: {
+          primary: "hsl(var(--primary))",
+          "primary-foreground": "hsl(var(--primary-foreground))",
+          accent: "hsl(var(--accent))"
+        },
+        borderColor: {
+          primary: "hsl(var(--primary))",
+          accent: "hsl(var(--accent))"
+        },
+        ringColor: {
+          primary: "hsl(var(--primary))",
+          accent: "hsl(var(--accent))",
+          ring: "hsl(var(--ring))"
+        },
+        ringOffsetColor: {
+          primary: "hsl(var(--primary))",
+          accent: "hsl(var(--accent))"
+        },
+        outlineColor: {
+          primary: "hsl(var(--primary))",
+          accent: "hsl(var(--accent))"
+        },
+        fill: {
+          primary: "hsl(var(--primary))",
+          accent: "hsl(var(--accent))"
+        },
+        stroke: {
+          primary: "hsl(var(--primary))",
+          accent: "hsl(var(--accent))"
+        }
+      }
+    }
+  }
+);
+var tailwind_default = accentThemePlugin;
+if (typeof module !== "undefined" && module.exports) {
+  module.exports = accentThemePlugin;
+  module.exports.accentThemePlugin = accentThemePlugin;
+  module.exports.default = accentThemePlugin;
+}
+export {
+  accentThemePlugin,
+  tailwind_default as default
+};

package/package.json

@@ -1,10 +1,33 @@
 {
   "name": "@razzusharma/accent-theme",
-  "version": "1.0.1",
-  "description": "Dynamic accent color theming for React apps",
+  "version": "2.0.1",
+  "description": "Zero-config dynamic accent color theming for React apps - truly plug and play!",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    },
+    "./tailwind": {
+      "import": {
+        "types": "./dist/tailwind.d.ts",
+        "default": "./dist/tailwind.mjs"
+      },
+      "require": {
+        "types": "./dist/tailwind.d.ts",
+        "default": "./dist/tailwind.js"
+      }
+    },
+    "./styles.css": "./dist/styles.css"
+  },
   "files": [
     "dist"
   ],
@@ -13,7 +36,8 @@
     "dev": "tsup --watch",
     "lint": "eslint src --ext .ts,.tsx",
     "typecheck": "tsc --noEmit",
-    "clean": "rm -rf dist"
+    "clean": "rm -rf dist",
+    "prepublishOnly": "npm run build"
   },
   "keywords": [
     "react",
@@ -22,7 +46,10 @@
     "colors",
     "theming",
     "tailwind",
-    "css-variables"
+    "css-variables",
+    "shadcn",
+    "zero-config",
+    "plug-and-play"
   ],
   "author": "Raju Sharma Dahal <razzu236@gmail.com>",
   "license": "MIT",