@razzusharma/accent-theme 1.0.2 → 2.0.2

package/README.md

@@ -1,16 +1,17 @@
 # @razzusharma/accent-theme
 
-A React hook and provider for dynamic accent color theming. Perfect for adding customizable color themes to your React applications.
+🎨 **Zero-config accent color theming for React apps.** Just install, wrap, and use. No CSS changes required!
 
 ## Features
 
+- ✅ **Zero Configuration** - CSS variables auto-injected, no globals.css changes needed
 - 🎨 **8 Built-in Colors** - Teal, Blue, Purple, Rose, Amber, Emerald, Indigo, Cyan
+- 🧩 **Pre-built Components** - Pickers, swatches, menus, buttons - all styled out of the box
+- 🌓 **Dark Mode Ready** - Auto-detects and adapts to next-themes, ThemeProvider, or data-theme
 - 🎯 **TypeScript Support** - Fully typed with generics
 - 💾 **Persistence** - Automatically saves user preference to localStorage
-- 🌓 **Dark Mode Compatible** - Works seamlessly with dark mode
-- 🎛️ **Customizable** - Add your own custom colors
-- 📦 **Zero Dependencies** - Only peer dependencies on React
-- 🪶 **Lightweight** - ~3KB gzipped
+- 📦 **Tailwind Plugin** - Optional plugin for extended utilities
+- 🪶 **Lightweight** - ~5KB gzipped
 
 ## Installation
 
@@ -22,7 +23,7 @@ yarn add @razzusharma/accent-theme
 pnpm add @razzusharma/accent-theme
 ```
 
-## Quick Start
+## Quick Start (It Just Works!)
 
 ### 1. Wrap your app with the provider
 
@@ -38,14 +39,133 @@ function App() {
 }
 ```
 
-### 2. Use the hook in your components
+That's it! CSS variables are auto-injected. No globals.css changes needed.
+
+### 2. Drop in a color picker anywhere
+
+```tsx
+import { AccentColorPicker } from '@razzusharma/accent-theme';
+
+function Navbar() {
+  return (
+    <nav>
+      <AccentColorPicker variant="dropdown" size="sm" />
+    </nav>
+  );
+}
+```
+
+## Pre-built Components
+
+### AccentColorPicker
+
+The main color picker component with multiple variants:
+
+```tsx
+import { AccentColorPicker } from '@razzusharma/accent-theme';
+
+// Dropdown picker (default)
+<AccentColorPicker variant="dropdown" size="md" />
+
+// Inline grid
+<AccentColorPicker variant="inline" columns={4} />
+
+// Menu style
+<AccentColorPicker variant="menu" align="end" />
+```
+
+**Props:**
+- `variant`: `"dropdown" | "inline" | "menu"`
+- `size`: `"sm" | "md" | "lg"`
+- `columns`: Number of columns for inline variant
+- `label`: Label text for dropdown trigger
+- `showColorName`: Show color name in dropdown
+- `onChange`: Callback when color changes
+- `className`: Custom classes
+
+### AccentColorSwatches
+
+Horizontal row of color dots:
+
+```tsx
+import { AccentColorSwatches } from '@razzusharma/accent-theme';
+
+<AccentColorSwatches size="md" gap="md" showCheckmark />
+```
+
+### AccentColorMenu
+
+Dropdown menu with color names:
+
+```tsx
+import { AccentColorMenu } from '@razzusharma/accent-theme';
+
+<AccentColorMenu align="end" label="Theme" />
+```
+
+### AccentColorButton
+
+Button showing current accent color:
+
+```tsx
+import { AccentColorButton } from '@razzusharma/accent-theme';
+
+<AccentColorButton showLabel buttonVariant="ghost" />
+```
+
+### AccentColorGrid
+
+Configurable grid layout:
+
+```tsx
+import { AccentColorGrid } from '@razzusharma/accent-theme';
+
+<AccentColorGrid columns={4} showLabels gap="md" />
+```
+
+### CurrentAccentIndicator
+
+Non-interactive indicator showing current color:
+
+```tsx
+import { CurrentAccentIndicator } from '@razzusharma/accent-theme';
+
+<CurrentAccentIndicator showName pulseOnChange />
+```
+
+### AccentThemeReset
+
+Reset button to go back to default:
+
+```tsx
+import { AccentThemeReset } from '@razzusharma/accent-theme';
+
+<AccentThemeReset variant="button" text="Reset Theme" />
+```
+
+## Provider Configuration
+
+```tsx
+<AccentThemeProvider
+  defaultColor="teal"           // Default accent color
+  customColors={{...}}          // Add custom colors
+  storageKey="accent-color"     // localStorage key
+  cssVariablePrefix="brand"     // Prefix CSS variables (--brand-primary)
+  injectCSS={true}              // Auto-inject base CSS (default: true)
+  enableDarkMode={true}         // Auto-detect dark mode (default: true)
+>
+  {children}
+</AccentThemeProvider>
+```
+
+## Using the Hook
 
 ```tsx
 import { useAccentTheme, useAccentColor } from '@razzusharma/accent-theme';
 
 function MyComponent() {
-  const { accentColor, setAccentColor } = useAccentTheme();
-  const { primary, light, gradient } = useAccentColor();
+  const { accentColor, setAccentColor, resetToDefault } = useAccentTheme();
+  const { primary, light, dark, gradient } = useAccentColor();
 
   return (
     <div style={{ color: primary }}>
@@ -58,33 +178,44 @@ function MyComponent() {
 }
 ```
 
-### 3. Use the built-in color picker
+## Tailwind CSS Integration (Optional)
 
-```tsx
-import { AccentColorPicker } from '@razzusharma/accent-theme';
+For enhanced Tailwind integration, add the plugin:
 
-function Settings() {
-  return (
-    <div>
-      <h2>Choose your theme</h2>
-      <AccentColorPicker variant="inline" columns={4} />
-    </div>
-  );
+```js
+// tailwind.config.js
+import { accentThemePlugin } from '@razzusharma/accent-theme/tailwind';
+
+export default {
+  plugins: [accentThemePlugin],
 }
 ```
 
-## Configuration
+This adds utility classes:
+```html
+<div class="bg-primary text-primary-foreground ring-accent">
+  Content with accent colors
+</div>
+```
+
+### Without the Plugin
+
+If you prefer manual setup, CSS variables are available:
 
-### Provider Props
+```css
+.my-button {
+  background: hsl(var(--primary));
+  color: hsl(var(--primary-foreground));
+}
+```
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `defaultColor` | `string` | `'teal'` | Default accent color |
-| `customColors` | `object` | `undefined` | Add custom colors |
-| `storageKey` | `string` | `'accent-color'` | localStorage key |
-| `cssVariablePrefix` | `string` | `''` | Prefix for CSS variables |
+```html
+<button class="bg-[hsl(var(--primary))] text-white">
+  Click me
+</button>
+```
 
-### Custom Colors
+## Custom Colors
 
 ```tsx
 import { AccentThemeProvider } from '@razzusharma/accent-theme';
@@ -112,32 +243,55 @@ function App() {
 }
 ```
 
+## Dark Mode
+
+The package automatically detects dark mode from:
+- `next-themes`
+- `ThemeProvider`
+- `data-theme="dark"` attribute
+- `class="dark"` on html element
+- `prefers-color-scheme: dark` media query
+
 ## CSS Variables
 
-The library sets these CSS custom properties on the root element:
+The following CSS variables are set on the root element:
 
 ```css
 :root {
-  --primary: 174 72% 35%;        /* HSL values */
+  --primary: 174 72% 35%;           /* HSL values */
   --primary-foreground: 210 40% 98%;
   --accent: 174 72% 45%;
   --ring: 174 72% 45%;
 }
 ```
 
-Use them in your CSS/Tailwind:
-
+With `cssVariablePrefix="brand"`:
 ```css
-.my-button {
-  background: hsl(var(--primary));
-  color: hsl(var(--primary-foreground));
+:root {
+  --brand-primary: 174 72% 35%;
+  --brand-primary-foreground: 210 40% 98%;
+  --brand-accent: 174 72% 45%;
+  --brand-ring: 174 72% 45%;
 }
 ```
 
-```html
-<button class="bg-[hsl(var(--primary))] text-white">
-  Click me
-</button>
+## Importing CSS Manually
+
+If you prefer to disable auto-injection and import CSS manually:
+
+```tsx
+// Disable auto-injection
+<AccentThemeProvider injectCSS={false}>
+```
+
+```tsx
+// Import CSS in your app
+import '@razzusharma/accent-theme/styles.css';
+```
+
+Or in CSS:
+```css
+@import '@razzusharma/accent-theme/styles.css';
 ```
 
 ## API Reference
@@ -150,6 +304,8 @@ const {
   setAccentColor,   // Function to change color
   accentConfig,     // Full color config object
   mounted,          // Hydration flag
+  defaultColor,     // Default color name
+  resetToDefault,   // Reset function
 } = useAccentTheme();
 ```
 
@@ -163,39 +319,43 @@ const {
   dark,             // hsl() string for dark variant
   gradient,         // Tailwind gradient class
   mounted,          // Hydration flag
+  isDark,           // Current dark mode state
 } = useAccentColor();
 ```
 
-### `AccentColorPicker`
-
-```tsx
-<AccentColorPicker 
-  size="md"           // 'sm' | 'md' | 'lg'
-  variant="dropdown"  // 'dropdown' | 'inline'
-  columns={4}         // Number of columns for inline
-  onChange={(color) => console.log(color)}
-/>
-```
-
-## Tailwind CSS Integration
+### Color Config Structure
 
-Add to your `tailwind.config.js`:
-
-```js
-module.exports = {
-  theme: {
-    extend: {
-      colors: {
-        primary: 'hsl(var(--primary))',
-        'primary-foreground': 'hsl(var(--primary-foreground))',
-        accent: 'hsl(var(--accent))',
-        ring: 'hsl(var(--ring))',
-      },
-    },
-  },
+```ts
+interface AccentColorConfig {
+  name: string;              // Display name
+  primary: string;           // HSL value "174 72% 35%"
+  primaryForeground: string; // HSL value for text
+  light: string;             // Lighter variant
+  dark: string;              // Darker variant
+  gradient: string;          // Tailwind gradient classes
 }
 ```
 
+## Built-in Colors
+
+| Color | Name | Primary |
+|-------|------|---------|
+| teal | Teal | `#199c88` |
+| blue | Ocean Blue | `#0b6dc6` |
+| purple | Royal Purple | `#7c3aed` |
+| rose | Rose Pink | `#e11d48` |
+| amber | Sunset Amber | `#d97706` |
+| emerald | Forest Emerald | `#208562` |
+| indigo | Deep Indigo | `#4f46e5` |
+| cyan | Electric Cyan | `#0ba5c9` |
+
+## Browser Support
+
+- Chrome/Edge 88+
+- Firefox 78+
+- Safari 14+
+- Supports server-side rendering (Next.js, Remix, etc.)
+
 ## License
 
 MIT © razzusharma

package/dist/index.d.mts

@@ -14,7 +14,10 @@ interface AccentThemeContextType {
     accentColor: AccentColor;
     setAccentColor: (color: AccentColor) => void;
     accentConfig: AccentColorConfig;
+    colors: Record<string, AccentColorConfig>;
     mounted: boolean;
+    defaultColor: AccentColor;
+    resetToDefault: () => void;
 }
 interface AccentThemeProviderProps {
     children: ReactNode;
@@ -22,9 +25,62 @@ interface AccentThemeProviderProps {
     customColors?: Record<string, AccentColorConfig>;
     storageKey?: string;
     cssVariablePrefix?: string;
+    injectCSS?: boolean;
+    enableDarkMode?: boolean;
+}
+type ComponentSize = "sm" | "md" | "lg";
+interface BaseComponentProps {
+    className?: string;
+    size?: ComponentSize;
+}
+interface AccentColorPickerProps extends BaseComponentProps {
+    variant?: "dropdown" | "inline" | "menu";
+    columns?: number;
+    align?: "start" | "center" | "end";
+    onChange?: (color: AccentColor) => void;
+    label?: string;
+    showColorName?: boolean;
+}
+interface AccentColorSwatchesProps extends BaseComponentProps {
+    onChange?: (color: AccentColor) => void;
+    showCheckmark?: boolean;
+    gap?: "sm" | "md" | "lg";
+}
+interface AccentColorMenuProps extends BaseComponentProps {
+    onChange?: (color: AccentColor) => void;
+    align?: "start" | "center" | "end";
+    label?: string;
+}
+interface AccentColorButtonProps extends BaseComponentProps {
+    onClick?: () => void;
+    showLabel?: boolean;
+    buttonVariant?: "default" | "ghost" | "outline";
+}
+interface AccentThemeResetProps extends BaseComponentProps {
+    text?: string;
+    onReset?: () => void;
+    variant?: "button" | "link" | "subtle";
+}
+interface CurrentAccentIndicatorProps extends BaseComponentProps {
+    showName?: boolean;
+    pulseOnChange?: boolean;
+}
+interface AccentColorGridProps extends BaseComponentProps {
+    columns?: 2 | 3 | 4 | 5 | 6 | 8;
+    onChange?: (color: AccentColor) => void;
+    showLabels?: boolean;
+    gap?: "sm" | "md" | "lg";
+}
+interface AccentColorSwatchProps {
+    color: AccentColor;
+    isSelected?: boolean;
+    onClick?: () => void;
+    size?: ComponentSize;
+    className?: string;
+    showCheckmark?: boolean;
 }
 
-declare function AccentThemeProvider({ children, defaultColor, customColors, storageKey, cssVariablePrefix }: AccentThemeProviderProps): React.FunctionComponentElement<React.ProviderProps<AccentThemeContextType>>;
+declare function AccentThemeProvider({ children, defaultColor, customColors, storageKey, cssVariablePrefix, injectCSS, enableDarkMode, }: AccentThemeProviderProps): React.FunctionComponentElement<React.ProviderProps<AccentThemeContextType>>;
 declare function useAccentTheme(): AccentThemeContextType;
 declare function useAccentColor(): {
     primary: string;
@@ -33,25 +89,12 @@ declare function useAccentColor(): {
     dark: string;
     gradient: string;
     mounted: boolean;
+    isDark: boolean;
 };
+declare function useAccentDarkMode(): boolean;
 
-interface AccentColorPickerProps {
-    size?: "sm" | "md" | "lg";
-    variant?: "dropdown" | "inline";
-    columns?: number;
-    className?: string;
-    onChange?: (color: AccentColor) => void;
-}
-declare function AccentColorPicker({ size, variant, columns, className, onChange, }: AccentColorPickerProps): React.DetailedReactHTMLElement<{
-    className: string;
-}, HTMLElement>;
-interface AccentColorSwatchProps {
-    color: AccentColor;
-    isSelected?: boolean;
-    onClick?: () => void;
-    size?: "sm" | "md" | "lg";
-}
-declare function AccentColorSwatch({ color, isSelected, onClick, size }: AccentColorSwatchProps): React.DetailedReactHTMLElement<{
+declare function AccentColorSwatch({ color, isSelected, onClick, size, className, showCheckmark, }: AccentColorSwatchProps): React.DetailedReactHTMLElement<{
+    type: string;
     onClick: (() => void) | undefined;
     className: string;
     style: {
@@ -59,9 +102,33 @@ declare function AccentColorSwatch({ color, isSelected, onClick, size }: AccentC
         background: string;
     };
     title: string;
+    "aria-label": string;
+    "aria-pressed": boolean | undefined;
 }, HTMLElement> | null;
+declare function AccentColorPicker({ size, variant, columns, className, align, onChange, label, showColorName, }: AccentColorPickerProps): React.DetailedReactHTMLElement<{
+    className: string;
+}, HTMLElement> | React.FunctionComponentElement<AccentColorMenuProps>;
+declare function AccentColorSwatches({ className, size, onChange, showCheckmark, gap, }: AccentColorSwatchesProps): React.DetailedReactHTMLElement<{
+    className: string;
+}, HTMLElement>;
+declare function AccentColorMenu({ className, size: _size, onChange, align, label, }: AccentColorMenuProps): React.DetailedReactHTMLElement<{
+    className: string;
+}, HTMLElement>;
+declare function AccentColorButton({ className, size, onClick, showLabel, buttonVariant, }: AccentColorButtonProps): React.DetailedReactHTMLElement<{
+    className: string;
+}, HTMLElement>;
+declare function AccentThemeReset({ className, size, text, onReset, variant, }: AccentThemeResetProps): React.DetailedReactHTMLElement<{
+    className: string;
+}, HTMLElement>;
+declare function CurrentAccentIndicator({ className, size, showName, pulseOnChange, }: CurrentAccentIndicatorProps): React.DetailedReactHTMLElement<{
+    className: string;
+}, HTMLElement>;
+declare function AccentColorGrid({ className, size, columns, onChange, showLabels, gap, }: AccentColorGridProps): React.DetailedReactHTMLElement<{
+    className: string;
+}, HTMLElement>;
 
 declare const defaultAccentColors: Record<AccentColor, AccentColorConfig>;
+declare function mergeColors(defaultColors: Record<string, AccentColorConfig>, customColors?: Record<string, AccentColorConfig>): Record<string, AccentColorConfig>;
 
 declare function generateCSSVariables(config: AccentColorConfig, prefix?: string): Record<string, string>;
 declare function applyCSSVariables(element: HTMLElement, variables: Record<string, string>): void;
@@ -80,4 +147,6 @@ declare const storage: {
     remove: (key: string) => void;
 };
 
-export { type AccentColor, type AccentColorConfig, AccentColorPicker, AccentColorSwatch, type AccentThemeContextType, AccentThemeProvider, type AccentThemeProviderProps, adjustHSL, applyCSSVariables, createGradient, createShadow, defaultAccentColors, generateCSSVariables, getContrastColor, isClient, storage, useAccentColor, useAccentTheme };
+declare const VERSION = "2.0.0";
+
+export { type AccentColor, AccentColorButton, type AccentColorButtonProps, type AccentColorConfig, AccentColorGrid, type AccentColorGridProps, AccentColorMenu, type AccentColorMenuProps, AccentColorPicker, type AccentColorPickerProps, AccentColorSwatch, type AccentColorSwatchProps, AccentColorSwatches, type AccentColorSwatchesProps, type AccentThemeContextType, AccentThemeProvider, type AccentThemeProviderProps, AccentThemeReset, type AccentThemeResetProps, type BaseComponentProps, type ComponentSize, CurrentAccentIndicator, type CurrentAccentIndicatorProps, VERSION, adjustHSL, applyCSSVariables, createGradient, createShadow, defaultAccentColors, generateCSSVariables, getContrastColor, isClient, mergeColors, storage, useAccentColor, useAccentDarkMode, useAccentTheme };

package/dist/index.d.ts

@@ -14,7 +14,10 @@ interface AccentThemeContextType {
     accentColor: AccentColor;
     setAccentColor: (color: AccentColor) => void;
     accentConfig: AccentColorConfig;
+    colors: Record<string, AccentColorConfig>;
     mounted: boolean;
+    defaultColor: AccentColor;
+    resetToDefault: () => void;
 }
 interface AccentThemeProviderProps {
     children: ReactNode;
@@ -22,9 +25,62 @@ interface AccentThemeProviderProps {
     customColors?: Record<string, AccentColorConfig>;
     storageKey?: string;
     cssVariablePrefix?: string;
+    injectCSS?: boolean;
+    enableDarkMode?: boolean;
+}
+type ComponentSize = "sm" | "md" | "lg";
+interface BaseComponentProps {
+    className?: string;
+    size?: ComponentSize;
+}
+interface AccentColorPickerProps extends BaseComponentProps {
+    variant?: "dropdown" | "inline" | "menu";
+    columns?: number;
+    align?: "start" | "center" | "end";
+    onChange?: (color: AccentColor) => void;
+    label?: string;
+    showColorName?: boolean;
+}
+interface AccentColorSwatchesProps extends BaseComponentProps {
+    onChange?: (color: AccentColor) => void;
+    showCheckmark?: boolean;
+    gap?: "sm" | "md" | "lg";
+}
+interface AccentColorMenuProps extends BaseComponentProps {
+    onChange?: (color: AccentColor) => void;
+    align?: "start" | "center" | "end";
+    label?: string;
+}
+interface AccentColorButtonProps extends BaseComponentProps {
+    onClick?: () => void;
+    showLabel?: boolean;
+    buttonVariant?: "default" | "ghost" | "outline";
+}
+interface AccentThemeResetProps extends BaseComponentProps {
+    text?: string;
+    onReset?: () => void;
+    variant?: "button" | "link" | "subtle";
+}
+interface CurrentAccentIndicatorProps extends BaseComponentProps {
+    showName?: boolean;
+    pulseOnChange?: boolean;
+}
+interface AccentColorGridProps extends BaseComponentProps {
+    columns?: 2 | 3 | 4 | 5 | 6 | 8;
+    onChange?: (color: AccentColor) => void;
+    showLabels?: boolean;
+    gap?: "sm" | "md" | "lg";
+}
+interface AccentColorSwatchProps {
+    color: AccentColor;
+    isSelected?: boolean;
+    onClick?: () => void;
+    size?: ComponentSize;
+    className?: string;
+    showCheckmark?: boolean;
 }
 
-declare function AccentThemeProvider({ children, defaultColor, customColors, storageKey, cssVariablePrefix }: AccentThemeProviderProps): React.FunctionComponentElement<React.ProviderProps<AccentThemeContextType>>;
+declare function AccentThemeProvider({ children, defaultColor, customColors, storageKey, cssVariablePrefix, injectCSS, enableDarkMode, }: AccentThemeProviderProps): React.FunctionComponentElement<React.ProviderProps<AccentThemeContextType>>;
 declare function useAccentTheme(): AccentThemeContextType;
 declare function useAccentColor(): {
     primary: string;
@@ -33,25 +89,12 @@ declare function useAccentColor(): {
     dark: string;
     gradient: string;
     mounted: boolean;
+    isDark: boolean;
 };
+declare function useAccentDarkMode(): boolean;
 
-interface AccentColorPickerProps {
-    size?: "sm" | "md" | "lg";
-    variant?: "dropdown" | "inline";
-    columns?: number;
-    className?: string;
-    onChange?: (color: AccentColor) => void;
-}
-declare function AccentColorPicker({ size, variant, columns, className, onChange, }: AccentColorPickerProps): React.DetailedReactHTMLElement<{
-    className: string;
-}, HTMLElement>;
-interface AccentColorSwatchProps {
-    color: AccentColor;
-    isSelected?: boolean;
-    onClick?: () => void;
-    size?: "sm" | "md" | "lg";
-}
-declare function AccentColorSwatch({ color, isSelected, onClick, size }: AccentColorSwatchProps): React.DetailedReactHTMLElement<{
+declare function AccentColorSwatch({ color, isSelected, onClick, size, className, showCheckmark, }: AccentColorSwatchProps): React.DetailedReactHTMLElement<{
+    type: string;
     onClick: (() => void) | undefined;
     className: string;
     style: {
@@ -59,9 +102,33 @@ declare function AccentColorSwatch({ color, isSelected, onClick, size }: AccentC
         background: string;
     };
     title: string;
+    "aria-label": string;
+    "aria-pressed": boolean | undefined;
 }, HTMLElement> | null;
+declare function AccentColorPicker({ size, variant, columns, className, align, onChange, label, showColorName, }: AccentColorPickerProps): React.DetailedReactHTMLElement<{
+    className: string;
+}, HTMLElement> | React.FunctionComponentElement<AccentColorMenuProps>;
+declare function AccentColorSwatches({ className, size, onChange, showCheckmark, gap, }: AccentColorSwatchesProps): React.DetailedReactHTMLElement<{
+    className: string;
+}, HTMLElement>;
+declare function AccentColorMenu({ className, size: _size, onChange, align, label, }: AccentColorMenuProps): React.DetailedReactHTMLElement<{
+    className: string;
+}, HTMLElement>;
+declare function AccentColorButton({ className, size, onClick, showLabel, buttonVariant, }: AccentColorButtonProps): React.DetailedReactHTMLElement<{
+    className: string;
+}, HTMLElement>;
+declare function AccentThemeReset({ className, size, text, onReset, variant, }: AccentThemeResetProps): React.DetailedReactHTMLElement<{
+    className: string;
+}, HTMLElement>;
+declare function CurrentAccentIndicator({ className, size, showName, pulseOnChange, }: CurrentAccentIndicatorProps): React.DetailedReactHTMLElement<{
+    className: string;
+}, HTMLElement>;
+declare function AccentColorGrid({ className, size, columns, onChange, showLabels, gap, }: AccentColorGridProps): React.DetailedReactHTMLElement<{
+    className: string;
+}, HTMLElement>;
 
 declare const defaultAccentColors: Record<AccentColor, AccentColorConfig>;
+declare function mergeColors(defaultColors: Record<string, AccentColorConfig>, customColors?: Record<string, AccentColorConfig>): Record<string, AccentColorConfig>;
 
 declare function generateCSSVariables(config: AccentColorConfig, prefix?: string): Record<string, string>;
 declare function applyCSSVariables(element: HTMLElement, variables: Record<string, string>): void;
@@ -80,4 +147,6 @@ declare const storage: {
     remove: (key: string) => void;
 };
 
-export { type AccentColor, type AccentColorConfig, AccentColorPicker, AccentColorSwatch, type AccentThemeContextType, AccentThemeProvider, type AccentThemeProviderProps, adjustHSL, applyCSSVariables, createGradient, createShadow, defaultAccentColors, generateCSSVariables, getContrastColor, isClient, storage, useAccentColor, useAccentTheme };
+declare const VERSION = "2.0.0";
+
+export { type AccentColor, AccentColorButton, type AccentColorButtonProps, type AccentColorConfig, AccentColorGrid, type AccentColorGridProps, AccentColorMenu, type AccentColorMenuProps, AccentColorPicker, type AccentColorPickerProps, AccentColorSwatch, type AccentColorSwatchProps, AccentColorSwatches, type AccentColorSwatchesProps, type AccentThemeContextType, AccentThemeProvider, type AccentThemeProviderProps, AccentThemeReset, type AccentThemeResetProps, type BaseComponentProps, type ComponentSize, CurrentAccentIndicator, type CurrentAccentIndicatorProps, VERSION, adjustHSL, applyCSSVariables, createGradient, createShadow, defaultAccentColors, generateCSSVariables, getContrastColor, isClient, mergeColors, storage, useAccentColor, useAccentDarkMode, useAccentTheme };