shadcn-glass-ui 2.0.8 → 2.0.10

package/docs/migration/compound-components-v2.md

@@ -0,0 +1,384 @@
+# Compound Components Migration Guide (v2.0+)
+
+## Overview
+
+As of v2.0.0, five component families have been migrated to the **compound component API** pattern
+following shadcn/ui best practices:
+
+- **AlertGlass** - Alert notifications with Title/Description
+- **AvatarGlass** - User avatars with Image/Fallback
+- **TooltipGlass** - Tooltips with Provider/Trigger/Content
+- **PopoverGlass** - Popovers with Trigger/Content/Anchor
+- **DropdownMenuGlass** - Dropdown menus with full shadcn/ui pattern (alongside simple
+  DropdownGlass)
+
+All components maintain **100% backward compatibility** through wrapper components or simple APIs.
+
+---
+
+## AlertGlass Migration
+
+### Old API (v1.x)
+
+```tsx
+<AlertGlass variant="destructive" title="Error">
+  Something went wrong
+</AlertGlass>
+```
+
+### New API (v2.0+)
+
+```tsx
+<AlertGlass variant="destructive">
+  <AlertGlassTitle>Error</AlertGlassTitle>
+  <AlertGlassDescription>Something went wrong</AlertGlassDescription>
+</AlertGlass>
+```
+
+### Benefits
+
+- ✅ **Flexible composition** - Mix and match Title/Description
+- ✅ **Type safety** - Better TypeScript inference
+- ✅ **shadcn/ui compatible** - Same pattern as shadcn Alert
+- ✅ **Custom styling** - Style Title/Description independently
+
+### Available Components
+
+```tsx
+// Main container
+<AlertGlass variant="default" | "destructive" | "success" | "warning" dismissible onDismiss={() => {}}>
+
+// Sub-components (inherit color from variant)
+<AlertGlassTitle>...</AlertGlassTitle>
+<AlertGlassDescription>...</AlertGlassDescription>
+```
+
+---
+
+## AvatarGlass Migration
+
+### Old API (v1.x)
+
+```tsx
+<AvatarGlass name="John Doe" size="lg" status="online" />
+```
+
+### New API (v2.0+) - Compound
+
+```tsx
+<AvatarGlass size="lg" status="online">
+  <AvatarGlassImage src="/avatar.jpg" alt="John Doe" />
+  <AvatarGlassFallback>JD</AvatarGlassFallback>
+</AvatarGlass>
+```
+
+### Backward Compatible - Simple Wrapper
+
+```tsx
+<AvatarGlassSimple name="John Doe" size="lg" status="online" />
+```
+
+### Benefits
+
+- ✅ **Image control** - Full control over image loading/fallback
+- ✅ **Radix UI based** - Built on `@radix-ui/react-avatar`
+- ✅ **Custom fallback** - Any React element, not just initials
+- ✅ **asChild pattern** - Use any element as container
+
+### Available Components
+
+```tsx
+// Main container
+<AvatarGlass size="sm" | "md" | "lg" | "xl" status="online" | "offline" | "busy" | "away" glowing>
+
+// Sub-components
+<AvatarGlassImage src="..." alt="..." />
+<AvatarGlassFallback>...</AvatarGlassFallback>
+
+// Simple wrapper (backward compatible)
+<AvatarGlassSimple name="..." size="..." status="..." />
+```
+
+---
+
+## TooltipGlass Migration
+
+### Old API (v1.x)
+
+```tsx
+<TooltipGlass content="Tooltip text" side="top">
+  <button>Hover me</button>
+</TooltipGlass>
+```
+
+### New API (v2.0+) - Compound
+
+```tsx
+<TooltipGlassProvider>
+  <TooltipGlass>
+    <TooltipGlassTrigger asChild>
+      <button>Hover me</button>
+    </TooltipGlassTrigger>
+    <TooltipGlassContent side="top">
+      <p>Tooltip text</p>
+    </TooltipGlassContent>
+  </TooltipGlass>
+</TooltipGlassProvider>
+```
+
+### Backward Compatible - Simple Wrapper
+
+```tsx
+<TooltipGlassProvider>
+  <TooltipGlassSimple content="Tooltip text" side="top">
+    <button>Hover me</button>
+  </TooltipGlassSimple>
+</TooltipGlassProvider>
+```
+
+### Benefits
+
+- ✅ **Rich content** - Any React element in tooltip
+- ✅ **Radix UI based** - Built on `@radix-ui/react-tooltip`
+- ✅ **Provider pattern** - Share delay settings across tooltips
+- ✅ **Accessibility** - WCAG 2.1 AA compliant
+
+### Available Components
+
+```tsx
+// Provider (wrap all tooltips to share settings)
+<TooltipGlassProvider delayDuration={0}>
+
+// Root container
+<TooltipGlass>
+
+// Trigger (usually with asChild)
+<TooltipGlassTrigger asChild>
+
+// Content
+<TooltipGlassContent side="top" | "bottom" | "left" | "right" sideOffset={4}>
+
+// Simple wrapper (backward compatible)
+<TooltipGlassSimple content="..." side="..." />
+```
+
+---
+
+## PopoverGlass Migration
+
+### Old API (v1.x)
+
+```tsx
+<PopoverGlass trigger={<button>Open</button>} side="bottom" align="center">
+  <p>Popover content</p>
+</PopoverGlass>
+```
+
+### New API (v2.0+) - Compound
+
+```tsx
+<PopoverGlass>
+  <PopoverGlassTrigger asChild>
+    <button>Open</button>
+  </PopoverGlassTrigger>
+  <PopoverGlassContent side="bottom" align="center">
+    <p>Popover content</p>
+  </PopoverGlassContent>
+</PopoverGlass>
+```
+
+### Backward Compatible - Legacy Wrapper
+
+```tsx
+<PopoverGlassLegacy trigger={<button>Open</button>} side="bottom" align="center">
+  <p>Popover content</p>
+</PopoverGlassLegacy>
+```
+
+### Benefits
+
+- ✅ **Flexible positioning** - Full control over trigger/content
+- ✅ **Radix UI based** - Built on `@radix-ui/react-popover`
+- ✅ **Anchor support** - Position relative to custom anchor
+- ✅ **Portal rendering** - Escape z-index issues
+
+### Available Components
+
+```tsx
+// Root container
+<PopoverGlass>
+
+// Trigger (usually with asChild)
+<PopoverGlassTrigger asChild>
+
+// Content
+<PopoverGlassContent side="top" | "bottom" | "left" | "right" align="start" | "center" | "end">
+
+// Optional anchor
+<PopoverGlassAnchor>
+
+// Legacy wrapper (backward compatible)
+<PopoverGlassLegacy trigger={...} side="..." align="...">
+```
+
+---
+
+## Migration Checklist
+
+When migrating your codebase to compound components:
+
+### 1. AlertGlass
+
+- [ ] Replace `title` prop with `<AlertGlassTitle>`
+- [ ] Wrap children in `<AlertGlassDescription>`
+- [ ] Update imports to include `AlertGlassTitle`, `AlertGlassDescription`
+
+### 2. AvatarGlass
+
+**Option A: Full migration (recommended)**
+
+- [ ] Use `<AvatarGlassImage>` for images
+- [ ] Use `<AvatarGlassFallback>` for fallback content
+- [ ] Update imports to include `AvatarGlassImage`, `AvatarGlassFallback`
+
+**Option B: Quick fix (backward compatible)**
+
+- [ ] Replace `<AvatarGlass>` with `<AvatarGlassSimple>`
+- [ ] Update import to include `AvatarGlassSimple`
+
+### 3. TooltipGlass
+
+**Option A: Full migration (recommended)**
+
+- [ ] Wrap tooltips in `<TooltipGlassProvider>`
+- [ ] Use `<TooltipGlassTrigger asChild>` for trigger
+- [ ] Use `<TooltipGlassContent>` for content
+- [ ] Update imports
+
+**Option B: Quick fix (backward compatible)**
+
+- [ ] Wrap tooltips in `<TooltipGlassProvider>`
+- [ ] Replace `<TooltipGlass>` with `<TooltipGlassSimple>`
+- [ ] Update import to include `TooltipGlassProvider`, `TooltipGlassSimple`
+
+### 4. PopoverGlass
+
+**Option A: Full migration (recommended)**
+
+- [ ] Use `<PopoverGlassTrigger asChild>` for trigger
+- [ ] Use `<PopoverGlassContent>` for content
+- [ ] Update imports
+
+**Option B: Quick fix (backward compatible)**
+
+- [ ] Replace `<PopoverGlass>` with `<PopoverGlassLegacy>`
+- [ ] Update import to include `PopoverGlassLegacy`
+
+### 5. DropdownMenuGlass (New in v2.0)
+
+**No migration needed!** DropdownMenuGlass is a **new addition** alongside the existing
+DropdownGlass.
+
+**DropdownGlass (simple API)** - Already available, no changes:
+
+- [ ] Continue using `items` prop for simple dropdowns
+- [ ] No migration required
+
+**DropdownMenuGlass (compound API)** - New compound component for complex menus:
+
+- [ ] Use for advanced features (checkboxes, radio groups, submenus, labels)
+- [ ] Follow shadcn/ui DropdownMenu pattern
+- [ ] Import from `@/components/glass/ui/dropdown-menu-glass`
+
+**When to use which:**
+
+- Use `DropdownGlass` for simple menus with basic items (quick setup)
+- Use `DropdownMenuGlass` for complex menus with advanced features (full control)
+
+---
+
+## Automated Migration Scripts
+
+### Find all AlertGlass with old API
+
+```bash
+# macOS/Linux
+grep -r "title=" src/ | grep "AlertGlass"
+
+# Find and update (use with caution!)
+find src/ -type f \( -name "*.tsx" -o -name "*.ts" \) -exec sed -i '' \
+  's/<AlertGlass variant="\([^"]*\)" title="\([^"]*\)">\s*\([^<]*\)\s*<\/AlertGlass>/<AlertGlass variant="\1">\n  <AlertGlassTitle>\2<\/AlertGlassTitle>\n  <AlertGlassDescription>\3<\/AlertGlassDescription>\n<\/AlertGlass>/g' \
+  {} +
+```
+
+### Find all AvatarGlass with old API
+
+```bash
+# macOS/Linux
+grep -r "name=" src/ | grep "AvatarGlass"
+```
+
+### Find all TooltipGlass with old API
+
+```bash
+# macOS/Linux
+grep -r "content=" src/ | grep "TooltipGlass"
+```
+
+### Find all PopoverGlass with old API
+
+```bash
+# macOS/Linux
+grep -r "trigger=" src/ | grep "PopoverGlass"
+```
+
+---
+
+## Breaking Changes Summary
+
+**None!** All components maintain 100% backward compatibility through wrapper components:
+
+- `AlertGlass` - No wrapper needed, but `title` prop removed
+- `AvatarGlass` → `AvatarGlassSimple` (wrapper available)
+- `TooltipGlass` → `TooltipGlassSimple` (wrapper available)
+- `PopoverGlass` → `PopoverGlassLegacy` (wrapper available)
+
+---
+
+## TypeScript Support
+
+All compound components have full TypeScript support with:
+
+- ✅ Strict type checking
+- ✅ Autocomplete for props
+- ✅ Generic constraints for `asChild` pattern
+- ✅ Proper `React.forwardRef` types
+
+Example:
+
+```tsx
+import type { ComponentPropsWithoutRef, ElementRef } from 'react';
+
+// Type inference works automatically
+const ref = useRef<ElementRef<typeof AlertGlass>>(null);
+
+// Props are fully typed
+const props: ComponentPropsWithoutRef<typeof AlertGlass> = {
+  variant: 'success',
+  dismissible: true,
+  onDismiss: () => {},
+};
+```
+
+---
+
+## Further Reading
+
+- [shadcn/ui Alert](https://ui.shadcn.com/docs/components/alert) - Reference implementation
+- [Radix UI Primitives](https://www.radix-ui.com/primitives) - Base components
+- [Compound Component Pattern](https://kentcdodds.com/blog/compound-components-with-react-hooks) -
+  Pattern explanation
+
+---
+
+**Questions?** Open an issue at [github.com/your-repo/issues](https://github.com/your-repo/issues)

package/docs/visual-testing-guide.md

@@ -4,9 +4,12 @@ This guide explains how to work with visual regression tests in this project.
 
 ## Overview
 
-The project uses **Vitest 4.0 browser mode** with **Playwright** for visual regression testing. All reference screenshots are generated on **Linux (ubuntu-latest)** in CI to ensure consistency across environments.
+The project uses **Vitest 4.0 browser mode** with **Playwright** for visual regression testing. All
+reference screenshots are generated on **Linux (ubuntu-latest)** in CI to ensure consistency across
+environments.
 
 **Key Points:**
+
 - ✅ Reference screenshots are generated on Linux
 - ✅ All platforms use the same screenshot files (no `-darwin`/`-linux` suffixes)
 - ✅ Automatic workflow for updating screenshots
@@ -15,27 +18,34 @@ The project uses **Vitest 4.0 browser mode** with **Playwright** for visual regr
 ## Running Tests Locally
 
 ### Run all visual tests
+
 ```bash
 npm run test:visual:ci
 ```
 
 ### Update screenshots locally (for reference only)
+
 ```bash
 npm run test:visual:update
 ```
 
-**⚠️ IMPORTANT:** Do NOT commit screenshots generated on macOS. Always use the GitHub Actions workflow to generate production screenshots.
+**⚠️ IMPORTANT:** Do NOT commit screenshots generated on macOS. Always use the GitHub Actions
+workflow to generate production screenshots.
+
+**Cleaning local screenshots:** If you accidentally generated screenshots locally, use this script
+to remove them:
 
-**Cleaning local screenshots:**
-If you accidentally generated screenshots locally, use this script to remove them:
 ```bash
 ./scripts/clean-local-screenshots.sh
 ```
 
-**Protection:** A pre-commit hook automatically blocks commits of new screenshots from non-Linux platforms. If you see this error:
+**Protection:** A pre-commit hook automatically blocks commits of new screenshots from non-Linux
+platforms. If you see this error:
+
 ```
 ❌ ERROR: Cannot commit visual test screenshots from Darwin
 ```
+
 This is working as intended. Use the GitHub Actions workflow instead.
 
 ## Updating Reference Screenshots
@@ -43,23 +53,27 @@ This is working as intended. Use the GitHub Actions workflow instead.
 When you modify UI components and need to update screenshots:
 
 ### Option 1: Using GitHub CLI (Recommended)
+
 ```bash
 gh workflow run update-screenshots.yml
 ```
 
 ### Option 2: Via GitHub Web UI
+
 1. Go to **Actions** → **Update Visual Test Screenshots**
 2. Click **Run workflow**
 3. Optionally provide a custom commit message
 4. Click **Run workflow**
 
 The workflow will:
+
 1. Delete existing screenshots
 2. Generate new screenshots on Linux (ubuntu-latest)
 3. Commit and push changes automatically
 4. Upload screenshots as artifacts
 
 ### Monitoring Workflow Progress
+
 ```bash
 # Check workflow status
 gh run list --workflow=update-screenshots.yml --limit 1
@@ -82,6 +96,7 @@ comparatorOptions: {
 ```
 
 These tolerances account for:
+
 - Font rendering differences between macOS and Linux
 - Subpixel anti-aliasing variations
 - Minor layout shifts (1-2px height differences)
@@ -89,6 +104,7 @@ These tolerances account for:
 ### Screenshot Naming
 
 Screenshots use a unified naming pattern:
+
 ```
 {test-name}-{theme}-chromium.png
 ```
@@ -100,6 +116,7 @@ Example: `button-primary-glass-chromium.png`
 ## Test Structure
 
 ### Visual Test Locations
+
 ```
 src/components/__visual__/
 ├── components.visual.test.tsx       # Individual component tests
@@ -112,6 +129,7 @@ src/components/__visual__/
 ```
 
 ### Screenshot Organization
+
 ```
 src/components/__visual__/__screenshots__/
 ├── components.visual.test.tsx/
@@ -125,11 +143,13 @@ src/components/__visual__/__screenshots__/
 
 ## Git Pre-commit Hook
 
-The repository includes a pre-commit hook that prevents accidentally committing screenshots generated on non-Linux platforms.
+The repository includes a pre-commit hook that prevents accidentally committing screenshots
+generated on non-Linux platforms.
 
 **Setup (Automatic):**
 
-The hook is located at `.git/hooks/pre-commit` and should work automatically. If you encounter issues:
+The hook is located at `.git/hooks/pre-commit` and should work automatically. If you encounter
+issues:
 
 ```bash
 # Ensure Git is using the correct hooks directory
@@ -140,11 +160,13 @@ chmod +x .git/hooks/pre-commit
 ```
 
 **How it works:**
+
 - Blocks commits of new `.png` files in `__screenshots__/` directories
 - Only allows commits from Linux (CI environment)
 - Shows helpful error message with instructions
 
 **Bypassing the hook (not recommended):**
+
 ```bash
 git commit --no-verify  # Skip all git hooks
 ```
@@ -169,6 +191,7 @@ Visual tests run automatically on every push/PR:
 **File:** `.github/workflows/update-screenshots.yml`
 
 Workflow features:
+
 - ✅ Manual trigger only (`workflow_dispatch`)
 - ✅ Runs on Linux (ubuntu-latest)
 - ✅ Deletes old screenshots before regeneration
@@ -181,11 +204,13 @@ Workflow features:
 ### Tests Fail After Component Changes
 
 **Symptoms:**
+
 - CI shows screenshot mismatches
 - Error: "Screenshot does not match the stored reference"
 - Pixel ratio > 0.08 or dimension differences
 
 **Solution:**
+
 1. Review the changes to ensure they're intentional
 2. Run the screenshot update workflow:
    ```bash
@@ -201,15 +226,18 @@ Workflow features:
 ### Local Screenshots Don't Match CI
 
 **Symptoms:**
+
 - Tests pass locally but fail in CI
 - Opposite: tests fail locally but pass in CI
 
 **Cause:**
+
 - Platform differences (macOS vs Linux)
 - Font rendering variations
 - Different screenshot generation environment
 
 **Solution:**
+
 - **DO NOT** commit local screenshots from macOS
 - Always use the GitHub Actions workflow
 - Linux screenshots are the source of truth
@@ -217,13 +245,16 @@ Workflow features:
 ### Workflow Fails to Commit
 
 **Symptoms:**
+
 - Workflow succeeds but no new commit appears
 - Error: "Updates were rejected"
 
 **Cause:**
+
 - Race condition: new commits pushed while workflow was running
 
 **Solution:**
+
 - Workflow includes `git pull --rebase` before push
 - If still failing, manually re-run the workflow
 
@@ -232,12 +263,14 @@ Workflow features:
 ### When to Update Screenshots
 
 Update screenshots when:
+
 - ✅ Intentional UI changes (new features, design updates)
 - ✅ Component refactoring that affects rendering
 - ✅ Theme or styling changes
 - ✅ Breaking changes in dependencies (React, Tailwind, etc.)
 
 Do NOT update screenshots for:
+
 - ❌ Random pixel differences without code changes
 - ❌ Flaky tests (investigate root cause first)
 - ❌ Local development screenshots
@@ -268,6 +301,7 @@ test('MyComponent - default state - glass theme', async () => {
 ```
 
 **Naming convention:**
+
 - Use descriptive names: `{component}-{variant}-{theme}`
 - Include theme: `glass`, `light`, `aurora`
 - Use kebab-case
@@ -275,6 +309,7 @@ test('MyComponent - default state - glass theme', async () => {
 ## Statistics
 
 **Current Coverage:**
+
 - **582 visual tests** (as of v1.0.0)
 - **603 reference screenshots**
 - **99.5% pass rate** in CI
@@ -283,7 +318,7 @@ test('MyComponent - default state - glass theme', async () => {
 ## Related Documentation
 
 - [CLAUDE.md](../CLAUDE.md) - Project overview and architecture
-- [DEPENDENCIES.md](../DEPENDENCIES.md) - Tech stack details
+- [DEPENDENCIES.md](technical/DEPENDENCIES.md) - Tech stack details
 - [visual-tests-audit.md](./visual-tests-audit.md) - Detailed test audit
 - [Migration Guides](./migration/) - Component API changes
 
@@ -292,33 +327,36 @@ test('MyComponent - default state - glass theme', async () => {
 ### Update Screenshots Workflow
 
 **Trigger:**
+
 ```bash
 gh workflow run update-screenshots.yml
 ```
 
 **With custom message:**
+
 ```bash
 gh workflow run update-screenshots.yml -f commit_message="chore: update screenshots after AlertGlass refactor"
 ```
 
 **Check status:**
+
 ```bash
 gh run list --workflow=update-screenshots.yml --limit 1
 ```
 
 **View logs:**
+
 ```bash
 gh run view <run-id> --log
 ```
 
 **Download artifacts:**
+
 ```bash
 gh run download <run-id> -n visual-test-screenshots
 ```
 
 ---
 
-**Last Updated:** 2025-12-05
-**Vitest Version:** 4.0
-**Playwright Version:** Latest
-**Node Version:** 20.16+, 22.19+, or 24+
+**Last Updated:** 2025-12-05 **Vitest Version:** 4.0 **Playwright Version:** Latest **Node
+Version:** 20.16+, 22.19+, or 24+

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "shadcn-glass-ui",
   "private": false,
-  "version": "2.0.8",
-  "description": "Glassmorphism UI components for React — drop-in shadcn/ui compatible, AI-optimized. 58 components, 3 themes, WCAG 2.1 AA.",
+  "version": "2.0.10",
+  "description": "Glassmorphism UI library for React - AI-friendly with 58 components, strict TypeScript, and comprehensive docs",
   "author": "Yhooi2",
   "license": "MIT",
   "keywords": [

package/dist/theme-context-BZoCplcU.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"theme-context-BZoCplcU.js","names":["THEMES: readonly Theme[]","THEME_CONFIG: Record<Theme, ThemeConfig>","DEFAULT_THEME: Theme","value: ThemeContextValue"],"sources":["../src/lib/theme-context.tsx"],"sourcesContent":["// ========================================\n// THEME SYSTEM\n// Multi-theme support with CSS variables\n// ========================================\n\nimport {\n  createContext,\n  useContext,\n  useState,\n  useEffect,\n  useCallback,\n  type ReactNode,\n} from \"react\";\nimport { Sun, Moon, Palette, type LucideIcon } from \"lucide-react\";\n\n// ========================================\n// TYPES\n// ========================================\n\nexport type Theme = \"light\" | \"aurora\" | \"glass\";\n\n/** @deprecated Use Theme instead */\nexport type ThemeName = Theme;\n\nexport interface ThemeConfig {\n  readonly label: string;\n  readonly icon: LucideIcon;\n}\n\nexport interface ThemeContextValue {\n  readonly theme: Theme;\n  readonly setTheme: (theme: Theme) => void;\n  readonly cycleTheme: () => void;\n}\n\n// ========================================\n// CONSTANTS\n// ========================================\n\nexport const THEMES: readonly Theme[] = [\"light\", \"aurora\", \"glass\"] as const;\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport const THEME_CONFIG: Record<Theme, ThemeConfig> = {\n  light: { label: \"Light\", icon: Sun },\n  aurora: { label: \"Aurora\", icon: Moon },\n  glass: { label: \"Glass\", icon: Palette },\n} as const;\n\nconst STORAGE_KEY = \"glass-ui-theme\";\nconst DEFAULT_THEME: Theme = \"glass\";\n\n// ========================================\n// CONTEXT\n// ========================================\n\nconst ThemeContext = createContext<ThemeContextValue | null>(null);\n\n// ========================================\n// PROVIDER\n// ========================================\n\ninterface ThemeProviderProps {\n  readonly children: ReactNode;\n  readonly defaultTheme?: Theme;\n  readonly storageKey?: string;\n}\n\nexport function ThemeProvider({\n  children,\n  defaultTheme = DEFAULT_THEME,\n  storageKey = STORAGE_KEY,\n}: ThemeProviderProps) {\n  const [theme, setThemeState] = useState<Theme>(() => {\n    if (typeof window === \"undefined\") {\n      return defaultTheme;\n    }\n\n    const stored = localStorage.getItem(storageKey);\n    if (stored && THEMES.includes(stored as Theme)) {\n      return stored as Theme;\n    }\n\n    return defaultTheme;\n  });\n\n  // Apply theme to document\n  useEffect(() => {\n    const root = document.documentElement;\n    root.setAttribute(\"data-theme\", theme);\n    localStorage.setItem(storageKey, theme);\n  }, [theme, storageKey]);\n\n  const setTheme = useCallback((newTheme: Theme) => {\n    if (THEMES.includes(newTheme)) {\n      setThemeState(newTheme);\n    }\n  }, []);\n\n  const cycleTheme = useCallback(() => {\n    setThemeState((current) => {\n      const currentIndex = THEMES.indexOf(current);\n      const nextIndex = (currentIndex + 1) % THEMES.length;\n      return THEMES[nextIndex];\n    });\n  }, []);\n\n  const value: ThemeContextValue = {\n    theme,\n    setTheme,\n    cycleTheme,\n  };\n\n  return (\n    <ThemeContext.Provider value={value}>\n      {children}\n    </ThemeContext.Provider>\n  );\n}\n\n// ========================================\n// HOOK\n// ========================================\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport function useTheme(): ThemeContextValue {\n  const context = useContext(ThemeContext);\n\n  if (!context) {\n    throw new Error(\"useTheme must be used within a ThemeProvider\");\n  }\n\n  return context;\n}\n\n// ========================================\n// UTILITIES\n// ========================================\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport function getNextTheme(current: Theme): Theme {\n  const currentIndex = THEMES.indexOf(current);\n  const nextIndex = (currentIndex + 1) % THEMES.length;\n  return THEMES[nextIndex];\n}\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport function getThemeConfig(theme: Theme): ThemeConfig {\n  return THEME_CONFIG[theme];\n}\n"],"mappings":";;;AAuCA,MAAaA,SAA2B;CAAC;CAAS;CAAU;CAAQ;AAGpE,MAAaC,eAA2C;CACtD,OAAO;EAAE,OAAO;EAAS,MAAM;EAAK;CACpC,QAAQ;EAAE,OAAO;EAAU,MAAM;EAAM;CACvC,OAAO;EAAE,OAAO;EAAS,MAAM;EAAS;CACzC;AAED,IAAM,cAAc;AACpB,IAAMC,gBAAuB;AAM7B,IAAM,eAAe,cAAwC,KAAK;AAYlE,SAAgB,cAAc,EAC5B,UACA,eAAe,eACf,aAAa,eACQ;CACrB,MAAM,CAAC,OAAO,iBAAiB,eAAsB;AACnD,MAAI,OAAO,WAAW,YACpB,QAAO;EAGT,MAAM,SAAS,aAAa,QAAQ,WAAW;AAC/C,MAAI,UAAU,OAAO,SAAS,OAAgB,CAC5C,QAAO;AAGT,SAAO;GACP;AAGF,iBAAgB;AACD,WAAS,gBACjB,aAAa,cAAc,MAAM;AACtC,eAAa,QAAQ,YAAY,MAAM;IACtC,CAAC,OAAO,WAAW,CAAC;CAgBvB,MAAMC,QAA2B;EAC/B;EACA,UAhBe,aAAa,aAAoB;AAChD,OAAI,OAAO,SAAS,SAAS,CAC3B,eAAc,SAAS;KAExB,EAAE,CAAC;EAaJ,YAXiB,kBAAkB;AACnC,kBAAe,YAAY;AAGzB,WAAO,QAFc,OAAO,QAAQ,QAAQ,GACV,KAAK,OAAO;KAE9C;KACD,EAAE,CAAC;EAML;AAED,QACE,oBAAC,aAAa,UAAA;EAAgB;EAC3B;GACqB;;AAS5B,SAAgB,WAA8B;CAC5C,MAAM,UAAU,WAAW,aAAa;AAExC,KAAI,CAAC,QACH,OAAM,IAAI,MAAM,+CAA+C;AAGjE,QAAO;;AAQT,SAAgB,aAAa,SAAuB;AAGlD,QAAO,QAFc,OAAO,QAAQ,QAAQ,GACV,KAAK,OAAO;;AAKhD,SAAgB,eAAe,OAA2B;AACxD,QAAO,aAAa"}

package/dist/theme-context-CVW50BKW.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"theme-context-CVW50BKW.cjs","names":["THEMES: readonly Theme[]","THEME_CONFIG: Record<Theme, ThemeConfig>","DEFAULT_THEME: Theme","value: ThemeContextValue"],"sources":["../src/lib/theme-context.tsx"],"sourcesContent":["// ========================================\n// THEME SYSTEM\n// Multi-theme support with CSS variables\n// ========================================\n\nimport {\n  createContext,\n  useContext,\n  useState,\n  useEffect,\n  useCallback,\n  type ReactNode,\n} from \"react\";\nimport { Sun, Moon, Palette, type LucideIcon } from \"lucide-react\";\n\n// ========================================\n// TYPES\n// ========================================\n\nexport type Theme = \"light\" | \"aurora\" | \"glass\";\n\n/** @deprecated Use Theme instead */\nexport type ThemeName = Theme;\n\nexport interface ThemeConfig {\n  readonly label: string;\n  readonly icon: LucideIcon;\n}\n\nexport interface ThemeContextValue {\n  readonly theme: Theme;\n  readonly setTheme: (theme: Theme) => void;\n  readonly cycleTheme: () => void;\n}\n\n// ========================================\n// CONSTANTS\n// ========================================\n\nexport const THEMES: readonly Theme[] = [\"light\", \"aurora\", \"glass\"] as const;\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport const THEME_CONFIG: Record<Theme, ThemeConfig> = {\n  light: { label: \"Light\", icon: Sun },\n  aurora: { label: \"Aurora\", icon: Moon },\n  glass: { label: \"Glass\", icon: Palette },\n} as const;\n\nconst STORAGE_KEY = \"glass-ui-theme\";\nconst DEFAULT_THEME: Theme = \"glass\";\n\n// ========================================\n// CONTEXT\n// ========================================\n\nconst ThemeContext = createContext<ThemeContextValue | null>(null);\n\n// ========================================\n// PROVIDER\n// ========================================\n\ninterface ThemeProviderProps {\n  readonly children: ReactNode;\n  readonly defaultTheme?: Theme;\n  readonly storageKey?: string;\n}\n\nexport function ThemeProvider({\n  children,\n  defaultTheme = DEFAULT_THEME,\n  storageKey = STORAGE_KEY,\n}: ThemeProviderProps) {\n  const [theme, setThemeState] = useState<Theme>(() => {\n    if (typeof window === \"undefined\") {\n      return defaultTheme;\n    }\n\n    const stored = localStorage.getItem(storageKey);\n    if (stored && THEMES.includes(stored as Theme)) {\n      return stored as Theme;\n    }\n\n    return defaultTheme;\n  });\n\n  // Apply theme to document\n  useEffect(() => {\n    const root = document.documentElement;\n    root.setAttribute(\"data-theme\", theme);\n    localStorage.setItem(storageKey, theme);\n  }, [theme, storageKey]);\n\n  const setTheme = useCallback((newTheme: Theme) => {\n    if (THEMES.includes(newTheme)) {\n      setThemeState(newTheme);\n    }\n  }, []);\n\n  const cycleTheme = useCallback(() => {\n    setThemeState((current) => {\n      const currentIndex = THEMES.indexOf(current);\n      const nextIndex = (currentIndex + 1) % THEMES.length;\n      return THEMES[nextIndex];\n    });\n  }, []);\n\n  const value: ThemeContextValue = {\n    theme,\n    setTheme,\n    cycleTheme,\n  };\n\n  return (\n    <ThemeContext.Provider value={value}>\n      {children}\n    </ThemeContext.Provider>\n  );\n}\n\n// ========================================\n// HOOK\n// ========================================\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport function useTheme(): ThemeContextValue {\n  const context = useContext(ThemeContext);\n\n  if (!context) {\n    throw new Error(\"useTheme must be used within a ThemeProvider\");\n  }\n\n  return context;\n}\n\n// ========================================\n// UTILITIES\n// ========================================\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport function getNextTheme(current: Theme): Theme {\n  const currentIndex = THEMES.indexOf(current);\n  const nextIndex = (currentIndex + 1) % THEMES.length;\n  return THEMES[nextIndex];\n}\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport function getThemeConfig(theme: Theme): ThemeConfig {\n  return THEME_CONFIG[theme];\n}\n"],"mappings":";;;;AAuCA,MAAaA,SAA2B;CAAC;CAAS;CAAU;CAAQ;AAGpE,MAAaC,eAA2C;CACtD,OAAO;EAAE,OAAO;EAAS,MAAM,aAAA;EAAK;CACpC,QAAQ;EAAE,OAAO;EAAU,MAAM,aAAA;EAAM;CACvC,OAAO;EAAE,OAAO;EAAS,MAAM,aAAA;EAAS;CACzC;AAED,IAAM,cAAc;AACpB,IAAMC,gBAAuB;AAM7B,IAAM,gBAAA,GAAA,MAAA,eAAuD,KAAK;AAYlE,SAAgB,cAAc,EAC5B,UACA,eAAe,eACf,aAAa,eACQ;CACrB,MAAM,CAAC,OAAO,kBAAA,GAAA,MAAA,gBAAuC;AACnD,MAAI,OAAO,WAAW,YACpB,QAAO;EAGT,MAAM,SAAS,aAAa,QAAQ,WAAW;AAC/C,MAAI,UAAU,OAAO,SAAS,OAAgB,CAC5C,QAAO;AAGT,SAAO;GACP;AAGF,EAAA,GAAA,MAAA,iBAAgB;AACD,WAAS,gBACjB,aAAa,cAAc,MAAM;AACtC,eAAa,QAAQ,YAAY,MAAM;IACtC,CAAC,OAAO,WAAW,CAAC;CAgBvB,MAAMC,QAA2B;EAC/B;EACA,WAAA,GAAA,MAAA,cAhB4B,aAAoB;AAChD,OAAI,OAAO,SAAS,SAAS,CAC3B,eAAc,SAAS;KAExB,EAAE,CAAC;EAaJ,aAAA,GAAA,MAAA,mBAXmC;AACnC,kBAAe,YAAY;AAGzB,WAAO,QAFc,OAAO,QAAQ,QAAQ,GACV,KAAK,OAAO;KAE9C;KACD,EAAE,CAAC;EAML;AAED,QACE,iBAAA,GAAA,kBAAA,KAAC,aAAa,UAAA;EAAgB;EAC3B;GACqB;;AAS5B,SAAgB,WAA8B;CAC5C,MAAM,WAAA,GAAA,MAAA,YAAqB,aAAa;AAExC,KAAI,CAAC,QACH,OAAM,IAAI,MAAM,+CAA+C;AAGjE,QAAO;;AAQT,SAAgB,aAAa,SAAuB;AAGlD,QAAO,QAFc,OAAO,QAAQ,QAAQ,GACV,KAAK,OAAO;;AAKhD,SAAgB,eAAe,OAA2B;AACxD,QAAO,aAAa"}