@razzusharma/accent-theme 2.0.1 → 2.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/index.d.mts +4 -1
  2. package/dist/index.d.ts +4 -1
  3. package/dist/index.js +97 -42
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +98 -43
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +1 -1
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts","../src/AccentThemeProvider.tsx","../src/colors.ts","../src/AccentColorPicker.tsx","../src/utils.ts"],"sourcesContent":["// 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","\"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"],"mappings":"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","names":["React","import_react"]}
1
+ {"version":3,"sources":["../src/index.ts","../src/AccentThemeProvider.tsx","../src/colors.ts","../src/AccentColorPicker.tsx","../src/utils.ts"],"sourcesContent":["// 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","\"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 colors: defaultAccentColors,\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 colors,\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// Palette icon\nconst PaletteIcon = ({ className = \"\" }: { className?: string }) => (\n <svg className={className} fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={1.8}\n 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\"\n />\n <circle cx=\"7.5\" cy=\"10.2\" r=\"1\" />\n <circle cx=\"10.5\" cy=\"7.5\" r=\"1\" />\n <circle cx=\"14.2\" cy=\"7.3\" r=\"1\" />\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 { colors } = useAccentTheme();\n const config = colors[color] || defaultAccentColors[color];\n if (!config) return null;\n\n return React.createElement(\"button\", {\n type: \"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 align = \"end\",\n onChange,\n label = \"Theme\",\n showColorName = true,\n}: AccentColorPickerProps) {\n const { accentColor, setAccentColor, mounted, colors } = 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(colors).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 align,\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 type: \"button\",\n onClick: () => setIsOpen(!isOpen),\n className: `\n flex items-center gap-2 px-3.5 py-2 rounded-full\n text-slate-100 bg-slate-900/70 backdrop-blur-md\n border border-white/10 hover:bg-slate-900/85\n transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2\n focus:ring-offset-slate-950 shadow-lg shadow-slate-950/30\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 ring-1 ring-white/20\",\n style: { background: primary }\n }),\n showColorName && React.createElement(\"span\", {\n key: \"label\",\n className: \"text-sm font-medium text-slate-100\"\n }, colors[accentColor]?.name || label),\n React.createElement(ChevronIcon, {\n key: \"chevron\",\n className: `w-4 h-4 text-rose-300 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-3 p-4\n rounded-2xl z-50 min-w-[290px]\n bg-gradient-to-b from-slate-800/95 to-slate-900/95\n border border-slate-600/40\n shadow-2xl shadow-slate-950/50 backdrop-blur-xl\n `,\n role: \"listbox\"\n }, [\n React.createElement(\"div\", {\n key: \"header\",\n className: \"flex items-start gap-3 mb-3\"\n }, [\n React.createElement(\"div\", {\n key: \"icon-wrap\",\n className: \"w-7 h-7 rounded-full grid place-items-center border border-rose-400/40 bg-rose-500/15\"\n }, React.createElement(PaletteIcon, {\n className: \"w-4 h-4 text-rose-300\"\n })),\n React.createElement(\"div\", { key: \"titles\" }, [\n React.createElement(\"p\", {\n key: \"title\",\n className: \"text-[1.15rem] font-semibold text-slate-100 leading-5\"\n }, \"Theme Color\"),\n React.createElement(\"p\", {\n key: \"subtitle\",\n className: \"text-sm text-slate-300 mt-1\"\n }, \"Choose your preferred accent color\")\n ])\n ]),\n React.createElement(\"div\", {\n key: \"grid\",\n className: \"grid grid-cols-4 gap-3 border-t border-white/10 pt-4\"\n }, Object.entries(colors).map(([color, config]) => {\n const isSelected = accentColor === color;\n return React.createElement(\"button\", {\n key: color,\n type: \"button\",\n onClick: () => handleColorChange(color),\n className: `\n relative w-12 h-12 rounded-xl transition-all duration-200\n hover:-translate-y-0.5 hover:brightness-110\n focus:outline-none focus:ring-2 ring-offset-0\n ${isSelected ? \"ring-2 ring-white/70 scale-[1.03]\" : \"ring-1 ring-white/10\"}\n `,\n style: {\n background: `hsl(${config.primary})`,\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-3 text-white drop-shadow-md\"\n }));\n })),\n React.createElement(\"div\", {\n key: \"footer\",\n className: \"mt-4 pt-4 border-t border-white/10 flex items-center justify-between gap-3\"\n }, [\n React.createElement(\"p\", {\n key: \"current-text\",\n className: \"text-[1.05rem] text-slate-200\"\n }, `Current: ${colors[accentColor]?.name || accentColor}`),\n React.createElement(\"span\", {\n key: \"current-pill\",\n className: \"w-14 h-7 rounded-full ring-1 ring-white/20\",\n style: { background: primary },\n \"aria-hidden\": true\n })\n ])\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, colors } = 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(colors).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, colors } = 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 type: \"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(colors).map(([color, config]) => {\n const isSelected = accentColor === color;\n return React.createElement(\"button\", {\n key: color,\n type: \"button\",\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, colors } = useAccentTheme();\n const { primary } = useAccentColor();\n const colorConfig = colors[accentColor] || 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 type: \"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 type: \"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, colors } = useAccentTheme();\n const { primary } = useAccentColor();\n const config = colors[accentColor] || 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, colors } = 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(colors).map(([color, config]) => {\n const isSelected = accentColor === color;\n \n if (showLabels) {\n return React.createElement(\"button\", {\n key: color,\n type: \"button\",\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"],"mappings":"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","names":["React","import_react"]}
package/dist/index.mjs CHANGED
@@ -88,6 +88,7 @@ var defaultContext = {
88
88
  setAccentColor: () => {
89
89
  },
90
90
  accentConfig: defaultAccentColors.teal,
91
+ colors: defaultAccentColors,
91
92
  mounted: false,
92
93
  defaultColor: "teal",
93
94
  resetToDefault: () => {
@@ -189,6 +190,7 @@ function AccentThemeProvider({
189
190
  accentColor,
190
191
  setAccentColor,
191
192
  accentConfig: colors[accentColor] || colors[defaultColor],
193
+ colors,
192
194
  mounted,
193
195
  defaultColor,
194
196
  resetToDefault
@@ -246,7 +248,7 @@ function useAccentDarkMode() {
246
248
  // src/AccentColorPicker.tsx
247
249
  import * as React2 from "react";
248
250
  import { useState as useState2, useRef, useEffect as useEffect2 } from "react";
249
- import { jsx } from "react/jsx-runtime";
251
+ import { jsx, jsxs } from "react/jsx-runtime";
250
252
  var sizeClasses = {
251
253
  sm: "w-6 h-6",
252
254
  md: "w-8 h-8",
@@ -266,6 +268,20 @@ var CheckmarkIcon = ({ className = "" }) => /* @__PURE__ */ jsx("svg", { classNa
266
268
  }
267
269
  ) });
268
270
  var ChevronIcon = ({ className = "" }) => /* @__PURE__ */ jsx("svg", { className, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) });
271
+ var PaletteIcon = ({ className = "" }) => /* @__PURE__ */ jsxs("svg", { className, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: [
272
+ /* @__PURE__ */ jsx(
273
+ "path",
274
+ {
275
+ strokeLinecap: "round",
276
+ strokeLinejoin: "round",
277
+ strokeWidth: 1.8,
278
+ 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"
279
+ }
280
+ ),
281
+ /* @__PURE__ */ jsx("circle", { cx: "7.5", cy: "10.2", r: "1" }),
282
+ /* @__PURE__ */ jsx("circle", { cx: "10.5", cy: "7.5", r: "1" }),
283
+ /* @__PURE__ */ jsx("circle", { cx: "14.2", cy: "7.3", r: "1" })
284
+ ] });
269
285
  var ResetIcon = ({ className = "" }) => /* @__PURE__ */ jsx("svg", { className, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ 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" }) });
270
286
  function AccentColorSwatch({
271
287
  color,
@@ -275,9 +291,11 @@ function AccentColorSwatch({
275
291
  className = "",
276
292
  showCheckmark = true
277
293
  }) {
278
- const config = defaultAccentColors[color];
294
+ const { colors } = useAccentTheme();
295
+ const config = colors[color] || defaultAccentColors[color];
279
296
  if (!config) return null;
280
297
  return React2.createElement("button", {
298
+ type: "button",
281
299
  onClick,
282
300
  className: `
283
301
  relative rounded-full transition-all duration-200 flex-shrink-0
@@ -303,11 +321,12 @@ function AccentColorPicker({
303
321
  variant = "dropdown",
304
322
  columns = 4,
305
323
  className = "",
324
+ align = "end",
306
325
  onChange,
307
326
  label = "Theme",
308
327
  showColorName = true
309
328
  }) {
310
- const { accentColor, setAccentColor, mounted } = useAccentTheme();
329
+ const { accentColor, setAccentColor, mounted, colors } = useAccentTheme();
311
330
  const { primary } = useAccentColor();
312
331
  const [isOpen, setIsOpen] = useState2(false);
313
332
  const dropdownRef = useRef(null);
@@ -339,7 +358,7 @@ function AccentColorPicker({
339
358
  return React2.createElement("div", {
340
359
  className: `grid ${gapClasses.md} ${className}`,
341
360
  style: { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` }
342
- }, Object.entries(defaultAccentColors).map(([color]) => {
361
+ }, Object.entries(colors).map(([color]) => {
343
362
  const isSelected = accentColor === color;
344
363
  return React2.createElement(AccentColorSwatch, {
345
364
  key: color,
@@ -355,7 +374,8 @@ function AccentColorPicker({
355
374
  size,
356
375
  className,
357
376
  onChange,
358
- label
377
+ label,
378
+ align
359
379
  });
360
380
  }
361
381
  return React2.createElement(
@@ -365,14 +385,14 @@ function AccentColorPicker({
365
385
  className: `relative inline-block ${className}`
366
386
  },
367
387
  React2.createElement("button", {
388
+ type: "button",
368
389
  onClick: () => setIsOpen(!isOpen),
369
390
  className: `
370
- flex items-center gap-2 px-3 py-2 rounded-lg
371
- bg-white dark:bg-gray-800
372
- border border-gray-200 dark:border-gray-700
373
- hover:bg-gray-50 dark:hover:bg-gray-700
374
- transition-colors focus:outline-none focus:ring-2
375
- focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900
391
+ flex items-center gap-2 px-3.5 py-2 rounded-full
392
+ text-slate-100 bg-slate-900/70 backdrop-blur-md
393
+ border border-white/10 hover:bg-slate-900/85
394
+ transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2
395
+ focus:ring-offset-slate-950 shadow-lg shadow-slate-950/30
376
396
  `,
377
397
  style: { ["--tw-ring-color"]: primary },
378
398
  "aria-expanded": isOpen,
@@ -380,16 +400,16 @@ function AccentColorPicker({
380
400
  }, [
381
401
  React2.createElement("div", {
382
402
  key: "swatch",
383
- className: "w-5 h-5 rounded-full shadow-sm",
403
+ className: "w-5 h-5 rounded-full shadow-sm ring-1 ring-white/20",
384
404
  style: { background: primary }
385
405
  }),
386
406
  showColorName && React2.createElement("span", {
387
407
  key: "label",
388
- className: "text-sm font-medium text-gray-700 dark:text-gray-300"
389
- }, defaultAccentColors[accentColor]?.name || label),
408
+ className: "text-sm font-medium text-slate-100"
409
+ }, colors[accentColor]?.name || label),
390
410
  React2.createElement(ChevronIcon, {
391
411
  key: "chevron",
392
- className: `w-4 h-4 text-gray-500 dark:text-gray-400 transition-transform duration-200 ${isOpen ? "rotate-180" : ""}`
412
+ className: `w-4 h-4 text-rose-300 transition-transform duration-200 ${isOpen ? "rotate-180" : ""}`
393
413
  })
394
414
  ]),
395
415
  isOpen && React2.createElement(React2.Fragment, {}, [
@@ -401,45 +421,75 @@ function AccentColorPicker({
401
421
  React2.createElement("div", {
402
422
  key: "dropdown",
403
423
  className: `
404
- absolute right-0 mt-2 p-3
405
- bg-white dark:bg-gray-800
406
- rounded-xl shadow-xl
407
- border border-gray-200 dark:border-gray-700
408
- z-50 min-w-[200px]
424
+ absolute right-0 mt-3 p-4
425
+ rounded-2xl z-50 min-w-[290px]
426
+ bg-gradient-to-b from-slate-800/95 to-slate-900/95
427
+ border border-slate-600/40
428
+ shadow-2xl shadow-slate-950/50 backdrop-blur-xl
409
429
  `,
410
430
  role: "listbox"
411
431
  }, [
432
+ React2.createElement("div", {
433
+ key: "header",
434
+ className: "flex items-start gap-3 mb-3"
435
+ }, [
436
+ React2.createElement("div", {
437
+ key: "icon-wrap",
438
+ className: "w-7 h-7 rounded-full grid place-items-center border border-rose-400/40 bg-rose-500/15"
439
+ }, React2.createElement(PaletteIcon, {
440
+ className: "w-4 h-4 text-rose-300"
441
+ })),
442
+ React2.createElement("div", { key: "titles" }, [
443
+ React2.createElement("p", {
444
+ key: "title",
445
+ className: "text-[1.15rem] font-semibold text-slate-100 leading-5"
446
+ }, "Theme Color"),
447
+ React2.createElement("p", {
448
+ key: "subtitle",
449
+ className: "text-sm text-slate-300 mt-1"
450
+ }, "Choose your preferred accent color")
451
+ ])
452
+ ]),
412
453
  React2.createElement("div", {
413
454
  key: "grid",
414
- className: "grid grid-cols-4 gap-2"
415
- }, Object.entries(defaultAccentColors).map(([color, config]) => {
455
+ className: "grid grid-cols-4 gap-3 border-t border-white/10 pt-4"
456
+ }, Object.entries(colors).map(([color, config]) => {
416
457
  const isSelected = accentColor === color;
417
458
  return React2.createElement("button", {
418
459
  key: color,
460
+ type: "button",
419
461
  onClick: () => handleColorChange(color),
420
462
  className: `
421
- relative w-10 h-10 rounded-lg transition-all duration-200
422
- hover:scale-110 focus:outline-none focus:ring-2 focus:ring-offset-2
423
- focus:ring-offset-white dark:focus:ring-offset-gray-900
424
- ${isSelected ? "ring-2 ring-offset-2 scale-105" : ""}
463
+ relative w-12 h-12 rounded-xl transition-all duration-200
464
+ hover:-translate-y-0.5 hover:brightness-110
465
+ focus:outline-none focus:ring-2 ring-offset-0
466
+ ${isSelected ? "ring-2 ring-white/70 scale-[1.03]" : "ring-1 ring-white/10"}
425
467
  `,
426
468
  style: {
427
- background: `hsl(${config.primary})`,
428
- ["--tw-ring-color"]: `hsl(${config.light})`
469
+ background: `hsl(${config.primary})`
429
470
  },
430
471
  title: config.name,
431
472
  role: "option",
432
473
  "aria-selected": isSelected
433
474
  }, isSelected && React2.createElement(CheckmarkIcon, {
434
- className: "absolute inset-0 w-full h-full p-2 text-white drop-shadow-md"
475
+ className: "absolute inset-0 w-full h-full p-3 text-white drop-shadow-md"
435
476
  }));
436
477
  })),
437
478
  React2.createElement("div", {
438
479
  key: "footer",
439
- className: "mt-3 pt-3 border-t border-gray-100 dark:border-gray-700"
440
- }, React2.createElement("p", {
441
- className: "text-xs text-gray-500 dark:text-gray-400 text-center"
442
- }, `Current: ${defaultAccentColors[accentColor]?.name || accentColor}`))
480
+ className: "mt-4 pt-4 border-t border-white/10 flex items-center justify-between gap-3"
481
+ }, [
482
+ React2.createElement("p", {
483
+ key: "current-text",
484
+ className: "text-[1.05rem] text-slate-200"
485
+ }, `Current: ${colors[accentColor]?.name || accentColor}`),
486
+ React2.createElement("span", {
487
+ key: "current-pill",
488
+ className: "w-14 h-7 rounded-full ring-1 ring-white/20",
489
+ style: { background: primary },
490
+ "aria-hidden": true
491
+ })
492
+ ])
443
493
  ])
444
494
  ])
445
495
  );
@@ -451,7 +501,7 @@ function AccentColorSwatches({
451
501
  showCheckmark = true,
452
502
  gap = "md"
453
503
  }) {
454
- const { accentColor, setAccentColor, mounted } = useAccentTheme();
504
+ const { accentColor, setAccentColor, mounted, colors } = useAccentTheme();
455
505
  const handleColorChange = (color) => {
456
506
  setAccentColor(color);
457
507
  onChange?.(color);
@@ -466,7 +516,7 @@ function AccentColorSwatches({
466
516
  }
467
517
  return React2.createElement("div", {
468
518
  className: `flex flex-wrap ${gapClasses[gap]} ${className}`
469
- }, Object.entries(defaultAccentColors).map(([color]) => {
519
+ }, Object.entries(colors).map(([color]) => {
470
520
  const isSelected = accentColor === color;
471
521
  return React2.createElement(AccentColorSwatch, {
472
522
  key: color,
@@ -485,7 +535,7 @@ function AccentColorMenu({
485
535
  align = "end",
486
536
  label = "Theme"
487
537
  }) {
488
- const { accentColor, setAccentColor, mounted } = useAccentTheme();
538
+ const { accentColor, setAccentColor, mounted, colors } = useAccentTheme();
489
539
  const { primary } = useAccentColor();
490
540
  const [isOpen, setIsOpen] = useState2(false);
491
541
  const menuRef = useRef(null);
@@ -522,6 +572,7 @@ function AccentColorMenu({
522
572
  className: `relative inline-block ${className}`
523
573
  },
524
574
  React2.createElement("button", {
575
+ type: "button",
525
576
  onClick: () => setIsOpen(!isOpen),
526
577
  className: `
527
578
  flex items-center gap-2 px-3 py-2 rounded-lg
@@ -557,10 +608,11 @@ function AccentColorMenu({
557
608
  z-50 min-w-[160px]
558
609
  ${alignClasses[align]}
559
610
  `
560
- }, Object.entries(defaultAccentColors).map(([color, config]) => {
611
+ }, Object.entries(colors).map(([color, config]) => {
561
612
  const isSelected = accentColor === color;
562
613
  return React2.createElement("button", {
563
614
  key: color,
615
+ type: "button",
564
616
  onClick: () => handleColorChange(color),
565
617
  className: `
566
618
  w-full flex items-center gap-3 px-3 py-2 rounded-md
@@ -592,9 +644,9 @@ function AccentColorButton({
592
644
  showLabel = false,
593
645
  buttonVariant = "default"
594
646
  }) {
595
- const { accentColor, mounted } = useAccentTheme();
647
+ const { accentColor, mounted, colors } = useAccentTheme();
596
648
  const { primary } = useAccentColor();
597
- const colorConfig = defaultAccentColors[accentColor];
649
+ const colorConfig = colors[accentColor] || defaultAccentColors[accentColor];
598
650
  const variantClasses = {
599
651
  default: "bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700",
600
652
  ghost: "hover:bg-gray-100 dark:hover:bg-gray-800",
@@ -611,6 +663,7 @@ function AccentColorButton({
611
663
  });
612
664
  }
613
665
  return React2.createElement("button", {
666
+ type: "button",
614
667
  onClick,
615
668
  className: `
616
669
  inline-flex items-center gap-2 rounded-lg
@@ -682,6 +735,7 @@ function AccentThemeReset({
682
735
  });
683
736
  }
684
737
  return React2.createElement("button", {
738
+ type: "button",
685
739
  onClick: handleReset,
686
740
  disabled: isDefault,
687
741
  className: `
@@ -706,9 +760,9 @@ function CurrentAccentIndicator({
706
760
  showName = false,
707
761
  pulseOnChange = false
708
762
  }) {
709
- const { accentColor, mounted } = useAccentTheme();
763
+ const { accentColor, mounted, colors } = useAccentTheme();
710
764
  const { primary } = useAccentColor();
711
- const config = defaultAccentColors[accentColor];
765
+ const config = colors[accentColor] || defaultAccentColors[accentColor];
712
766
  const [isPulsing, setIsPulsing] = useState2(false);
713
767
  const prevColorRef = useRef(accentColor);
714
768
  useEffect2(() => {
@@ -759,7 +813,7 @@ function AccentColorGrid({
759
813
  showLabels = false,
760
814
  gap = "md"
761
815
  }) {
762
- const { accentColor, setAccentColor, mounted } = useAccentTheme();
816
+ const { accentColor, setAccentColor, mounted, colors } = useAccentTheme();
763
817
  const handleColorChange = (color) => {
764
818
  setAccentColor(color);
765
819
  onChange?.(color);
@@ -782,11 +836,12 @@ function AccentColorGrid({
782
836
  }
783
837
  return React2.createElement("div", {
784
838
  className: `grid ${gridCols[columns]} ${gapClasses[gap]} ${className}`
785
- }, Object.entries(defaultAccentColors).map(([color, config]) => {
839
+ }, Object.entries(colors).map(([color, config]) => {
786
840
  const isSelected = accentColor === color;
787
841
  if (showLabels) {
788
842
  return React2.createElement("button", {
789
843
  key: color,
844
+ type: "button",
790
845
  onClick: () => handleColorChange(color),
791
846
  className: `
792
847
  flex flex-col items-center gap-1.5 p-2 rounded-lg