@razzusharma/accent-theme 1.0.1 → 2.0.1

package/README.md

@@ -1,51 +1,35 @@
-<<<<<<< HEAD
-# @razzu/accent-theme
-=======
 # @razzusharma/accent-theme
->>>>>>> a4f8ab5 (updating readme)
 
-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
 
 ```bash
-<<<<<<< HEAD
-npm install @razzu/accent-theme
-# or
-yarn add @razzu/accent-theme
-# or
-pnpm add @razzu/accent-theme
-=======
 npm install @razzusharma/accent-theme
 # or
 yarn add @razzusharma/accent-theme
 # or
 pnpm add @razzusharma/accent-theme
-
->>>>>>> a4f8ab5 (updating readme)
 ```
 
-## Quick Start
+## Quick Start (It Just Works!)
 
 ### 1. Wrap your app with the provider
 
 ```tsx
-<<<<<<< HEAD
-import { AccentThemeProvider } from '@razzu/accent-theme';
-
-=======
 import { AccentThemeProvider } from '@razzusharma/accent-theme';
->>>>>>> a4f8ab5 (updating readme)
+
 function App() {
   return (
     <AccentThemeProvider>
@@ -53,21 +37,135 @@ function App() {
     </AccentThemeProvider>
   );
 }
+```
+
+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>
 ```
 
-### 2. Use the hook in your components
+## Using the Hook
 
 ```tsx
-<<<<<<< HEAD
-import { useAccentTheme, useAccentColor } from '@razzu/accent-theme';
-=======
 import { useAccentTheme, useAccentColor } from '@razzusharma/accent-theme';
->>>>>>> a4f8ab5 (updating readme)
 
 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 }}>
@@ -78,48 +176,49 @@ function MyComponent() {
     </div>
   );
 }
-
 ```
 
-### 3. Use the built-in color picker
+## Tailwind CSS Integration (Optional)
 
-```tsx
-<<<<<<< HEAD
-import { AccentColorPicker } from '@razzu/accent-theme';
-=======
-import { AccentColorPicker } from '@razzusharma/accent-theme';
->>>>>>> a4f8ab5 (updating readme)
+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],
 }
+```
 
+This adds utility classes:
+```html
+<div class="bg-primary text-primary-foreground ring-accent">
+  Content with accent colors
+</div>
 ```
 
-## Configuration
+### Without the Plugin
 
-### Provider Props
+If you prefer manual setup, CSS variables are available:
+
+```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
-<<<<<<< HEAD
-import { AccentThemeProvider } from '@razzu/accent-theme';
-=======
 import { AccentThemeProvider } from '@razzusharma/accent-theme';
->>>>>>> a4f8ab5 (updating readme)
 
 const customColors = {
   coral: {
@@ -142,35 +241,57 @@ function App() {
     </AccentThemeProvider>
   );
 }
-
 ```
 
+## 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
@@ -183,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();
 ```
 
@@ -196,43 +319,43 @@ const {
   dark,             // hsl() string for dark variant
   gradient,         // Tailwind gradient class
   mounted,          // Hydration flag
+  isDark,           // Current dark mode state
 } = useAccentColor();
 ```
 
-### `AccentColorPicker`
+### Color Config Structure
 
-```tsx
-<AccentColorPicker 
-  size="md"           // 'sm' | 'md' | 'lg'
-  variant="dropdown"  // 'dropdown' | 'inline'
-  columns={4}         // Number of columns for inline
-  onChange={(color) => console.log(color)}
-/>
+```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
+}
 ```
 
-## Tailwind CSS Integration
+## Built-in Colors
 
-Add to your `tailwind.config.js`:
+| 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` |
 
-```js
-module.exports = {
-  theme: {
-    extend: {
-      colors: {
-        primary: 'hsl(var(--primary))',
-        'primary-foreground': 'hsl(var(--primary-foreground))',
-        accent: 'hsl(var(--accent))',
-        ring: 'hsl(var(--ring))',
-      },
-    },
-  },
-}
-```
+## Browser Support
+
+- Chrome/Edge 88+
+- Firefox 78+
+- Safari 14+
+- Supports server-side rendering (Next.js, Remix, etc.)
 
 ## License
 
-<<<<<<< HEAD
-MIT © razzu
-=======
 MIT © razzusharma
->>>>>>> a4f8ab5 (updating readme)

package/dist/index.d.mts

@@ -15,6 +15,8 @@ interface AccentThemeContextType {
     setAccentColor: (color: AccentColor) => void;
     accentConfig: AccentColorConfig;
     mounted: boolean;
+    defaultColor: AccentColor;
+    resetToDefault: () => void;
 }
 interface AccentThemeProviderProps {
     children: ReactNode;
@@ -22,9 +24,61 @@ 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;
+    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 +87,11 @@ 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<{
     onClick: (() => void) | undefined;
     className: string;
     style: {
@@ -59,9 +99,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, 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 +144,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 };