shadcn-glass-ui 2.3.1 → 2.4.0

package/dist/lib/variants/toggle-glass-variants.d.ts

@@ -1,26 +0,0 @@
-/**
- * ToggleGlass CVA Variants
- * Extracted for Fast Refresh compatibility
- *
- * shadcn/ui compatible:
- * - sizes: default (was 'md'), sm, lg
- * - variants: default, outline
- */
-/**
- * Toggle size types (shadcn/ui compatible)
- * - default: Standard size (was 'md')
- * - sm: Small
- * - lg: Large
- */
-export type ToggleGlassSize = 'default' | 'sm' | 'lg';
-/**
- * Toggle variant types (shadcn/ui compatible)
- * - default: Filled toggle with glass effect
- * - outline: Border only toggle
- */
-export type ToggleGlassVariant = 'default' | 'outline';
-export declare const toggleSizes: (props?: ({
-    size?: "default" | "sm" | "lg" | null | undefined;
-    variant?: "default" | "outline" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-//# sourceMappingURL=toggle-glass-variants.d.ts.map

package/dist/lib/variants/toggle-glass-variants.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"toggle-glass-variants.d.ts","sourceRoot":"","sources":["../../../src/lib/variants/toggle-glass-variants.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAIH;;;;;GAKG;AACH,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI,CAAC;AAEtD;;;;GAIG;AACH,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,SAAS,CAAC;AAEvD,eAAO,MAAM,WAAW;;;8EAgBtB,CAAC"}

package/dist/lib/variants/tooltip-glass-variants.d.ts

@@ -1,9 +0,0 @@
-/**
- * TooltipGlass CVA Variants
- * Extracted for Fast Refresh compatibility
- */
-export type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
-export declare const tooltipPositions: (props?: ({
-    position?: "bottom" | "left" | "right" | "top" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-//# sourceMappingURL=tooltip-glass-variants.d.ts.map

package/dist/lib/variants/tooltip-glass-variants.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"tooltip-glass-variants.d.ts","sourceRoot":"","sources":["../../../src/lib/variants/tooltip-glass-variants.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,MAAM,MAAM,eAAe,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAElE,eAAO,MAAM,gBAAgB;;8EAe5B,CAAC"}

package/dist/theme-context-7NcW0KZL.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"theme-context-7NcW0KZL.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 for Glass UI Components\n *\n * Multi-theme support with CSS variables for glass, light, and aurora themes.\n * Provides ThemeProvider context and useTheme hook for theme management.\n *\n * @module theme-context\n *\n * @example\n * ```tsx\n * // Wrap your app with ThemeProvider\n * import { ThemeProvider } from 'shadcn-glass-ui';\n *\n * function App() {\n *   return (\n *     <ThemeProvider defaultTheme=\"glass\">\n *       <YourApp />\n *     </ThemeProvider>\n *   );\n * }\n * ```\n *\n * @example\n * ```tsx\n * // Use the theme hook in components\n * import { useTheme } from 'shadcn-glass-ui';\n *\n * function ThemeSwitcher() {\n *   const { theme, setTheme, cycleTheme } = useTheme();\n *\n *   return (\n *     <div>\n *       <p>Current theme: {theme}</p>\n *       <button onClick={cycleTheme}>Cycle Theme</button>\n *       <button onClick={() => setTheme('glass')}>Set Glass</button>\n *     </div>\n *   );\n * }\n * ```\n *\n * @see {@link docs/THEME_CREATION_GUIDE.md} for creating custom themes\n * @see {@link docs/TOKEN_ARCHITECTURE.md} for CSS variable system\n */\n\nimport { createContext, useContext, useState, useEffect, useCallback, type ReactNode } from 'react';\nimport { Sun, Moon, Palette, type LucideIcon } from 'lucide-react';\n\n// ========================================\n// TYPES\n// ========================================\n\n/**\n * Available theme options for Glass UI components.\n * - `light` - Light theme with subtle glass effects\n * - `aurora` - Gradient theme with aurora/northern lights effects\n * - `glass` - Dark glassmorphism theme (default)\n */\nexport type Theme = 'light' | 'aurora' | 'glass';\n\n/** @deprecated Use Theme instead */\nexport type ThemeName = Theme;\n\n/**\n * Configuration for a single theme including display label and icon.\n */\nexport interface ThemeConfig {\n  /** Human-readable theme name for UI display */\n  readonly label: string;\n  /** Lucide icon component for theme toggle buttons */\n  readonly icon: LucideIcon;\n}\n\n/**\n * Context value returned by useTheme hook.\n */\nexport interface ThemeContextValue {\n  /** Current active theme */\n  readonly theme: Theme;\n  /** Set a specific theme */\n  readonly setTheme: (theme: Theme) => void;\n  /** Cycle to next theme in order: light → aurora → glass → light */\n  readonly cycleTheme: () => void;\n}\n\n// ========================================\n// CONSTANTS\n// ========================================\n\n/** Array of all available themes in cycle order */\nexport const THEMES: readonly Theme[] = ['light', 'aurora', 'glass'] as const;\n\n/**\n * Theme configuration map with labels and icons.\n * Used by ThemeToggleGlass and other theme switching components.\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  /** Child components to wrap with theme context */\n  readonly children: ReactNode;\n  /** Initial theme to use (default: \"glass\") */\n  readonly defaultTheme?: Theme;\n  /** localStorage key for persistence (default: \"glass-ui-theme\") */\n  readonly storageKey?: string;\n}\n\n/**\n * Theme provider component that manages theme state and persistence.\n *\n * Wraps your application to provide theme context to all child components.\n * Theme is automatically persisted to localStorage and applied to document.\n *\n * @param props - Provider configuration\n * @param props.children - Child components to wrap\n * @param props.defaultTheme - Initial theme (default: \"glass\")\n * @param props.storageKey - localStorage key (default: \"glass-ui-theme\")\n *\n * @example\n * ```tsx\n * <ThemeProvider defaultTheme=\"glass\">\n *   <App />\n * </ThemeProvider>\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 <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;\n}\n\n// ========================================\n// HOOK\n// ========================================\n\n/**\n * Hook to access theme context values.\n *\n * Must be used within a ThemeProvider. Returns the current theme,\n * a setter function, and a cycle function.\n *\n * @returns Theme context value with theme, setTheme, and cycleTheme\n * @throws Error if used outside of ThemeProvider\n *\n * @example\n * ```tsx\n * function MyComponent() {\n *   const { theme, setTheme, cycleTheme } = useTheme();\n *\n *   return (\n *     <button onClick={cycleTheme}>\n *       Current: {theme}\n *     </button>\n *   );\n * }\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/**\n * Get the next theme in the cycle order.\n *\n * @param current - Current theme\n * @returns Next theme in cycle (light → aurora → glass → light)\n *\n * @example\n * ```tsx\n * const next = getNextTheme('glass'); // returns 'light'\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/**\n * Get configuration for a specific theme.\n *\n * @param theme - Theme to get configuration for\n * @returns Theme configuration with label and icon\n *\n * @example\n * ```tsx\n * const config = getThemeConfig('glass');\n * // { label: 'Glass', icon: Palette }\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":";;;;AAyFA,MAAaA,SAA2B;CAAC;CAAS;CAAU;CAAQ;AAOpE,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;AAiClE,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,QAAO,iBAAA,GAAA,kBAAA,KAAC,aAAa,UAAA;EAAgB;EAAQ;GAAiC;;AA8BhF,SAAgB,WAA8B;CAC5C,MAAM,WAAA,GAAA,MAAA,YAAqB,aAAa;AAExC,KAAI,CAAC,QACH,OAAM,IAAI,MAAM,+CAA+C;AAGjE,QAAO;;AAmBT,SAAgB,aAAa,SAAuB;AAGlD,QAAO,QAFc,OAAO,QAAQ,QAAQ,GACV,KAAK,OAAO;;AAiBhD,SAAgB,eAAe,OAA2B;AACxD,QAAO,aAAa"}

package/dist/theme-context-DLS2uAgJ.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"theme-context-DLS2uAgJ.mjs","names":["THEMES: readonly Theme[]","THEME_CONFIG: Record<Theme, ThemeConfig>","DEFAULT_THEME: Theme","value: ThemeContextValue"],"sources":["../src/lib/theme-context.tsx"],"sourcesContent":["/**\n * Theme System for Glass UI Components\n *\n * Multi-theme support with CSS variables for glass, light, and aurora themes.\n * Provides ThemeProvider context and useTheme hook for theme management.\n *\n * @module theme-context\n *\n * @example\n * ```tsx\n * // Wrap your app with ThemeProvider\n * import { ThemeProvider } from 'shadcn-glass-ui';\n *\n * function App() {\n *   return (\n *     <ThemeProvider defaultTheme=\"glass\">\n *       <YourApp />\n *     </ThemeProvider>\n *   );\n * }\n * ```\n *\n * @example\n * ```tsx\n * // Use the theme hook in components\n * import { useTheme } from 'shadcn-glass-ui';\n *\n * function ThemeSwitcher() {\n *   const { theme, setTheme, cycleTheme } = useTheme();\n *\n *   return (\n *     <div>\n *       <p>Current theme: {theme}</p>\n *       <button onClick={cycleTheme}>Cycle Theme</button>\n *       <button onClick={() => setTheme('glass')}>Set Glass</button>\n *     </div>\n *   );\n * }\n * ```\n *\n * @see {@link docs/THEME_CREATION_GUIDE.md} for creating custom themes\n * @see {@link docs/TOKEN_ARCHITECTURE.md} for CSS variable system\n */\n\nimport { createContext, useContext, useState, useEffect, useCallback, type ReactNode } from 'react';\nimport { Sun, Moon, Palette, type LucideIcon } from 'lucide-react';\n\n// ========================================\n// TYPES\n// ========================================\n\n/**\n * Available theme options for Glass UI components.\n * - `light` - Light theme with subtle glass effects\n * - `aurora` - Gradient theme with aurora/northern lights effects\n * - `glass` - Dark glassmorphism theme (default)\n */\nexport type Theme = 'light' | 'aurora' | 'glass';\n\n/** @deprecated Use Theme instead */\nexport type ThemeName = Theme;\n\n/**\n * Configuration for a single theme including display label and icon.\n */\nexport interface ThemeConfig {\n  /** Human-readable theme name for UI display */\n  readonly label: string;\n  /** Lucide icon component for theme toggle buttons */\n  readonly icon: LucideIcon;\n}\n\n/**\n * Context value returned by useTheme hook.\n */\nexport interface ThemeContextValue {\n  /** Current active theme */\n  readonly theme: Theme;\n  /** Set a specific theme */\n  readonly setTheme: (theme: Theme) => void;\n  /** Cycle to next theme in order: light → aurora → glass → light */\n  readonly cycleTheme: () => void;\n}\n\n// ========================================\n// CONSTANTS\n// ========================================\n\n/** Array of all available themes in cycle order */\nexport const THEMES: readonly Theme[] = ['light', 'aurora', 'glass'] as const;\n\n/**\n * Theme configuration map with labels and icons.\n * Used by ThemeToggleGlass and other theme switching components.\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  /** Child components to wrap with theme context */\n  readonly children: ReactNode;\n  /** Initial theme to use (default: \"glass\") */\n  readonly defaultTheme?: Theme;\n  /** localStorage key for persistence (default: \"glass-ui-theme\") */\n  readonly storageKey?: string;\n}\n\n/**\n * Theme provider component that manages theme state and persistence.\n *\n * Wraps your application to provide theme context to all child components.\n * Theme is automatically persisted to localStorage and applied to document.\n *\n * @param props - Provider configuration\n * @param props.children - Child components to wrap\n * @param props.defaultTheme - Initial theme (default: \"glass\")\n * @param props.storageKey - localStorage key (default: \"glass-ui-theme\")\n *\n * @example\n * ```tsx\n * <ThemeProvider defaultTheme=\"glass\">\n *   <App />\n * </ThemeProvider>\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 <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;\n}\n\n// ========================================\n// HOOK\n// ========================================\n\n/**\n * Hook to access theme context values.\n *\n * Must be used within a ThemeProvider. Returns the current theme,\n * a setter function, and a cycle function.\n *\n * @returns Theme context value with theme, setTheme, and cycleTheme\n * @throws Error if used outside of ThemeProvider\n *\n * @example\n * ```tsx\n * function MyComponent() {\n *   const { theme, setTheme, cycleTheme } = useTheme();\n *\n *   return (\n *     <button onClick={cycleTheme}>\n *       Current: {theme}\n *     </button>\n *   );\n * }\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/**\n * Get the next theme in the cycle order.\n *\n * @param current - Current theme\n * @returns Next theme in cycle (light → aurora → glass → light)\n *\n * @example\n * ```tsx\n * const next = getNextTheme('glass'); // returns 'light'\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/**\n * Get configuration for a specific theme.\n *\n * @param theme - Theme to get configuration for\n * @returns Theme configuration with label and icon\n *\n * @example\n * ```tsx\n * const config = getThemeConfig('glass');\n * // { label: 'Glass', icon: Palette }\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":";;;AAyFA,MAAaA,SAA2B;CAAC;CAAS;CAAU;CAAQ;AAOpE,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;AAiClE,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,QAAO,oBAAC,aAAa,UAAA;EAAgB;EAAQ;GAAiC;;AA8BhF,SAAgB,WAA8B;CAC5C,MAAM,UAAU,WAAW,aAAa;AAExC,KAAI,CAAC,QACH,OAAM,IAAI,MAAM,+CAA+C;AAGjE,QAAO;;AAmBT,SAAgB,aAAa,SAAuB;AAGlD,QAAO,QAFc,OAAO,QAAQ,QAAQ,GACV,KAAK,OAAO;;AAiBhD,SAAgB,eAAe,OAA2B;AACxD,QAAO,aAAa"}

package/dist/themes.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"themes.d.ts","sourceRoot":"","sources":["../src/themes.ts"],"names":[],"mappings":"AAKA,OAAO,EACL,aAAa,EACb,QAAQ,EACR,MAAM,EACN,YAAY,EACZ,YAAY,EACZ,cAAc,EACd,KAAK,KAAK,EACV,KAAK,WAAW,EAChB,KAAK,iBAAiB,GACvB,MAAM,qBAAqB,CAAC"}