shadcn-glass-ui 2.2.3 → 2.3.0

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

@@ -0,0 +1,26 @@
+/**
+ * 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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,9 @@
+/**
+ * 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

@@ -0,0 +1 @@
+{"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/r/checkbox-glass.json

@@ -6,7 +6,8 @@
   "description": "Glass-themed checkbox with:",
   "dependencies": [
     "lucide-react",
-    "react"
+    "react",
+    "shadcn-glass-ui"
   ],
   "registryDependencies": [
     "cn",
@@ -17,7 +18,7 @@
     {
       "path": "components/glass/ui/checkbox-glass.tsx",
       "type": "registry:component",
-      "content": "/**\n * CheckboxGlass Component\n *\n * Glass-themed checkbox with:\n * - Theme-aware styling (glass/light/aurora)\n * - Glow effect on hover\n * - Optional label\n */\n\nimport { forwardRef, type CSSProperties } from 'react';\nimport { Check } from 'lucide-react';\nimport { cn } from '@/lib/utils';\nimport { useHover } from '@/lib/hooks/use-hover';\nimport { useFocus } from '@/lib/hooks/use-focus';\nimport '@/glass-theme.css';\n\n// ========================================\n// PROPS INTERFACE\n// ========================================\n\n/**\n * Props for the CheckboxGlass component\n *\n * A glass-themed checkbox with accessible keyboard navigation, focus management,\n * and touch-friendly targets. Features glow effects and theme-aware styling.\n *\n * @accessibility\n * - **Keyboard Navigation:** Full keyboard support with Enter/Space to toggle, Tab to focus (WCAG 2.1.1)\n * - **Focus Management:** Visible focus ring using `--focus-glow` CSS variable (WCAG 2.4.7)\n * - **Screen Readers:** Dual implementation with native `<input type=\"checkbox\">` (hidden) + visual `<div role=\"checkbox\">`\n * - **ARIA Attributes:** Uses `role=\"checkbox\"` and `aria-checked` for proper state announcement\n * - **Label Association:** Visual label automatically associated with checkbox via `<label>` wrapper\n * - **Touch Targets:** 44x44px minimum touch area per Apple HIG (WCAG 2.5.5 compliance)\n * - **Color Contrast:** Check mark and backgrounds meet WCAG AA contrast ratio 4.5:1\n * - **Motion:** Transitions respect `prefers-reduced-motion` settings\n *\n * @example\n * ```tsx\n * // Basic checkbox with label\n * <CheckboxGlass checked={agreed} onChange={setAgreed} label=\"I agree to terms\" />\n *\n * // Checkbox with accessible name (no visual label)\n * <CheckboxGlass\n *   checked={checked}\n *   onChange={setChecked}\n *   aria-label=\"Select all items\"\n * />\n *\n * // Form integration with validation\n * <form onSubmit={handleSubmit}>\n *   <CheckboxGlass\n *     checked={newsletter}\n *     onChange={setNewsletter}\n *     label=\"Subscribe to newsletter\"\n *     aria-describedby=\"newsletter-help\"\n *   />\n *   <p id=\"newsletter-help\">Receive weekly updates</p>\n *   <CheckboxGlass\n *     checked={terms}\n *     onChange={setTerms}\n *     label=\"Accept terms and conditions\"\n *     required\n *     aria-invalid={submitted && !terms}\n *   />\n *   {submitted && !terms && (\n *     <span role=\"alert\">You must accept the terms</span>\n *   )}\n * </form>\n *\n * // Disabled checkbox (state announced to screen readers)\n * <CheckboxGlass\n *   checked={true}\n *   onChange={() => {}}\n *   label=\"This option is locked\"\n *   disabled\n * />\n *\n * // Checkbox group with fieldset\n * <fieldset>\n *   <legend>Select your interests</legend>\n *   <CheckboxGlass\n *     checked={interests.tech}\n *     onChange={(checked) => setInterests({ ...interests, tech: checked })}\n *     label=\"Technology\"\n *   />\n *   <CheckboxGlass\n *     checked={interests.design}\n *     onChange={(checked) => setInterests({ ...interests, design: checked })}\n *     label=\"Design\"\n *   />\n * </fieldset>\n * ```\n */\nexport interface CheckboxGlassProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {\n  readonly checked: boolean;\n  readonly onChange?: (checked: boolean) => void;\n  readonly label?: string;\n}\n\n// ========================================\n// COMPONENT\n// ========================================\n\nexport const CheckboxGlass = forwardRef<HTMLInputElement, CheckboxGlassProps>(\n  (\n    {\n      className,\n      checked,\n      onChange,\n      label,\n      disabled,\n      ...props\n    },\n    ref\n  ) => {\n    const { isHovered, hoverProps } = useHover();\n    const { isFocusVisible, focusProps } = useFocus({ focusVisible: true });\n\n    const checkboxStyles: CSSProperties = {\n      background: checked ? 'var(--checkbox-checked-bg)' : 'var(--checkbox-bg)',\n      border: `2px solid ${checked ? 'var(--checkbox-checked-bg)' : 'var(--checkbox-border)'}`,\n      boxShadow: isFocusVisible && !disabled\n        ? 'var(--focus-glow)'\n        : isHovered && !disabled\n        ? 'var(--checkbox-glow)'\n        : 'none',\n    };\n\n    return (\n      <label\n        className={cn(\n          'inline-flex items-center gap-2 md:gap-2.5',\n          disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer',\n          className\n        )}\n        onMouseEnter={hoverProps.onMouseEnter}\n        onMouseLeave={hoverProps.onMouseLeave}\n      >\n        <input\n          ref={ref}\n          type=\"checkbox\"\n          checked={checked}\n          onChange={(e) => !disabled && onChange?.(e.target.checked)}\n          disabled={disabled}\n          className=\"sr-only\"\n          {...props}\n        />\n        {/* Touch area wrapper - 44px minimum for Apple HIG compliance */}\n        <span className=\"inline-flex items-center justify-center min-w-11 min-h-11\">\n          {/* Visual checkbox - smaller but within 44px touch area */}\n          <div\n            onClick={() => !disabled && onChange?.(!checked)}\n            onFocus={focusProps.onFocus}\n            onBlur={focusProps.onBlur}\n            className=\"relative w-6 h-6 md:w-5 md:h-5 rounded-md flex items-center justify-center transition-all duration-300\"\n            style={checkboxStyles}\n            role=\"checkbox\"\n            aria-checked={checked}\n            aria-label={label || 'Checkbox'}\n            tabIndex={disabled ? -1 : 0}\n            onKeyDown={(e) => {\n              if (!disabled && (e.key === 'Enter' || e.key === ' ')) {\n                e.preventDefault();\n                onChange?.(!checked);\n              }\n            }}\n          >\n            {checked && (\n              <Check className=\"w-3.5 h-3.5 md:w-3 md:h-3\" style={{ color: 'var(--text-inverse)' }} />\n            )}\n          </div>\n        </span>\n        {label && (\n          <span className=\"text-xs md:text-sm\" style={{ color: 'var(--text-secondary)' }}>\n            {label}\n          </span>\n        )}\n      </label>\n    );\n  }\n);\n\nCheckboxGlass.displayName = 'CheckboxGlass';\n"
+      "content": "/**\n * CheckboxGlass Component\n *\n * Glass-themed checkbox with:\n * - Theme-aware styling (glass/light/aurora)\n * - Glow effect on hover\n * - Optional label\n */\n\nimport * as React from 'react';\nimport { forwardRef, type CSSProperties } from 'react';\nimport { Check, Minus } from 'lucide-react';\nimport { cn } from '@/lib/utils';\nimport { useHover } from '@/lib/hooks/use-hover';\nimport { useFocus } from '@/lib/hooks/use-focus';\nimport '@/glass-theme.css';\n\n// ========================================\n// PROPS INTERFACE\n// ========================================\n\n/**\n * Checked state type compatible with shadcn/ui (Radix UI)\n */\nexport type CheckedState = boolean | 'indeterminate';\n\n/**\n * Props for the CheckboxGlass component\n *\n * A glass-themed checkbox with accessible keyboard navigation, focus management,\n * and touch-friendly targets. Features glow effects and theme-aware styling.\n *\n * **shadcn/ui Compatibility (v2.3.0+):**\n * - Supports `onCheckedChange` callback (shadcn/ui pattern)\n * - Supports `'indeterminate'` state for tri-state checkboxes\n * - Backwards compatible with `onChange` prop\n *\n * @accessibility\n * - **Keyboard Navigation:** Full keyboard support with Enter/Space to toggle, Tab to focus (WCAG 2.1.1)\n * - **Focus Management:** Visible focus ring using `--focus-glow` CSS variable (WCAG 2.4.7)\n * - **Screen Readers:** Dual implementation with native `<input type=\"checkbox\">` (hidden) + visual `<div role=\"checkbox\">`\n * - **ARIA Attributes:** Uses `role=\"checkbox\"` and `aria-checked` for proper state announcement (including 'mixed' for indeterminate)\n * - **Label Association:** Visual label automatically associated with checkbox via `<label>` wrapper\n * - **Touch Targets:** 44x44px minimum touch area per Apple HIG (WCAG 2.5.5 compliance)\n * - **Color Contrast:** Check mark and backgrounds meet WCAG AA contrast ratio 4.5:1\n * - **Motion:** Transitions respect `prefers-reduced-motion` settings\n *\n * @example\n * ```tsx\n * // shadcn/ui compatible API\n * <CheckboxGlass\n *   checked={isChecked}\n *   onCheckedChange={(checked) => setIsChecked(checked === true)}\n * />\n *\n * // Indeterminate state (tri-state checkbox)\n * <CheckboxGlass\n *   checked={allSelected ? true : someSelected ? 'indeterminate' : false}\n *   onCheckedChange={(checked) => {\n *     if (checked === true) selectAll();\n *     else deselectAll();\n *   }}\n *   label=\"Select all\"\n * />\n *\n * // Legacy API (still supported)\n * <CheckboxGlass checked={agreed} onChange={setAgreed} label=\"I agree to terms\" />\n *\n * // Form integration with validation\n * <form onSubmit={handleSubmit}>\n *   <CheckboxGlass\n *     checked={newsletter}\n *     onCheckedChange={setNewsletter}\n *     label=\"Subscribe to newsletter\"\n *     aria-describedby=\"newsletter-help\"\n *   />\n *   <p id=\"newsletter-help\">Receive weekly updates</p>\n * </form>\n *\n * // Disabled checkbox\n * <CheckboxGlass\n *   checked={true}\n *   onCheckedChange={() => {}}\n *   label=\"This option is locked\"\n *   disabled\n * />\n * ```\n *\n * @since v2.3.0 - Added shadcn/ui compatible `onCheckedChange` and `indeterminate` support\n */\nexport interface CheckboxGlassProps extends Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  'onChange' | 'checked' | 'defaultChecked'\n> {\n  /** Checked state: true, false, or 'indeterminate' (shadcn/ui compatible) */\n  readonly checked?: CheckedState;\n  /** Default checked state for uncontrolled usage */\n  readonly defaultChecked?: CheckedState;\n  /**\n   * Callback when checked state changes (shadcn/ui compatible)\n   * @param checked - New checked state\n   */\n  readonly onCheckedChange?: (checked: CheckedState) => void;\n  /**\n   * @deprecated Use `onCheckedChange` instead. Will be removed in v4.0.\n   * Legacy callback for backwards compatibility.\n   */\n  readonly onChange?: (checked: boolean) => void;\n  /** Optional label text */\n  readonly label?: string;\n}\n\n// ========================================\n// COMPONENT\n// ========================================\n\nexport const CheckboxGlass = forwardRef<HTMLInputElement, CheckboxGlassProps>(\n  (\n    {\n      className,\n      checked: controlledChecked,\n      defaultChecked,\n      onCheckedChange,\n      onChange,\n      label,\n      disabled,\n      ...props\n    },\n    ref\n  ) => {\n    const { isHovered, hoverProps } = useHover();\n    const { isFocusVisible, focusProps } = useFocus({ focusVisible: true });\n\n    // Support both controlled and uncontrolled modes\n    const [uncontrolledChecked, setUncontrolledChecked] = React.useState<CheckedState>(\n      defaultChecked ?? false\n    );\n    const isControlled = controlledChecked !== undefined;\n    const checked = isControlled ? controlledChecked : uncontrolledChecked;\n\n    // Determine visual states\n    const isChecked = checked === true;\n    const isIndeterminate = checked === 'indeterminate';\n    const showIndicator = isChecked || isIndeterminate;\n\n    // Handle state change\n    const handleChange = (newChecked: CheckedState) => {\n      if (disabled) return;\n\n      if (!isControlled) {\n        setUncontrolledChecked(newChecked);\n      }\n\n      // Call shadcn/ui compatible callback\n      onCheckedChange?.(newChecked);\n\n      // Call legacy callback (deprecated)\n      if (onChange && typeof newChecked === 'boolean') {\n        onChange(newChecked);\n      }\n    };\n\n    // Toggle to next state (indeterminate -> true, true -> false, false -> true)\n    const toggleChecked = () => {\n      if (isIndeterminate) {\n        handleChange(true);\n      } else {\n        handleChange(!isChecked);\n      }\n    };\n\n    const checkboxStyles: CSSProperties = {\n      background: showIndicator ? 'var(--checkbox-checked-bg)' : 'var(--checkbox-bg)',\n      border: `2px solid ${showIndicator ? 'var(--checkbox-checked-bg)' : 'var(--checkbox-border)'}`,\n      boxShadow:\n        isFocusVisible && !disabled\n          ? 'var(--focus-glow)'\n          : isHovered && !disabled\n            ? 'var(--checkbox-glow)'\n            : 'none',\n    };\n\n    // ARIA checked value for screen readers\n    const ariaChecked = isIndeterminate ? 'mixed' : isChecked;\n\n    return (\n      <label\n        className={cn(\n          'inline-flex items-center gap-2 md:gap-2.5',\n          disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer',\n          className\n        )}\n        onMouseEnter={hoverProps.onMouseEnter}\n        onMouseLeave={hoverProps.onMouseLeave}\n      >\n        <input\n          ref={ref}\n          type=\"checkbox\"\n          checked={isChecked}\n          onChange={(e) => handleChange(e.target.checked)}\n          disabled={disabled}\n          className=\"sr-only\"\n          {...props}\n        />\n        {/* Touch area wrapper - 44px minimum for Apple HIG compliance */}\n        <span className=\"inline-flex items-center justify-center min-w-11 min-h-11\">\n          {/* Visual checkbox - smaller but within 44px touch area */}\n          <div\n            onClick={toggleChecked}\n            onFocus={focusProps.onFocus}\n            onBlur={focusProps.onBlur}\n            className=\"relative w-6 h-6 md:w-5 md:h-5 rounded-md flex items-center justify-center transition-all duration-300\"\n            style={checkboxStyles}\n            role=\"checkbox\"\n            aria-checked={ariaChecked}\n            aria-label={label || 'Checkbox'}\n            tabIndex={disabled ? -1 : 0}\n            onKeyDown={(e) => {\n              if (!disabled && (e.key === 'Enter' || e.key === ' ')) {\n                e.preventDefault();\n                toggleChecked();\n              }\n            }}\n          >\n            {isChecked && (\n              <Check\n                className=\"w-3.5 h-3.5 md:w-3 md:h-3\"\n                style={{ color: 'var(--text-inverse)' }}\n              />\n            )}\n            {isIndeterminate && (\n              <Minus\n                className=\"w-3.5 h-3.5 md:w-3 md:h-3\"\n                style={{ color: 'var(--text-inverse)' }}\n              />\n            )}\n          </div>\n        </span>\n        {label && (\n          <span className=\"text-xs md:text-sm\" style={{ color: 'var(--text-secondary)' }}>\n            {label}\n          </span>\n        )}\n      </label>\n    );\n  }\n);\n\nCheckboxGlass.displayName = 'CheckboxGlass';\n\n/**\n * Checkbox - shadcn/ui compatible alias for CheckboxGlass\n *\n * @example\n * ```tsx\n * import { Checkbox } from 'shadcn-glass-ui'\n *\n * <Checkbox\n *   checked={isChecked}\n *   onCheckedChange={(checked) => setIsChecked(checked === true)}\n * />\n * ```\n *\n * @since v2.3.0\n */\nexport const Checkbox = CheckboxGlass;\n"
     }
   ],
   "categories": [

package/dist/r/tabs-glass.json

@@ -4,7 +4,9 @@
   "type": "registry:ui",
   "title": "Tabs Glass",
   "description": "TabsGlass Component (Compound API only)",
-  "dependencies": [],
+  "dependencies": [
+    "shadcn-glass-ui"
+  ],
   "registryDependencies": [
     "cn",
     "use-focus"
@@ -13,7 +15,7 @@
     {
       "path": "components/glass/ui/tabs-glass.tsx",
       "type": "registry:component",
-      "content": "/* eslint-disable react-refresh/only-export-components */\n/**\n * TabsGlass Component (Compound API only)\n *\n * Glass-themed tab navigation with:\n * - Theme-aware styling (glass/light/aurora)\n * - Active tab indicator\n * - Smooth transitions\n * - Compound component API for advanced composition\n *\n * @example\n * ```tsx\n * <TabsGlass.Root value={activeTab} onValueChange={setActiveTab}>\n *   <TabsGlass.List>\n *     <TabsGlass.Trigger value=\"overview\">Overview</TabsGlass.Trigger>\n *     <TabsGlass.Trigger value=\"analytics\">Analytics</TabsGlass.Trigger>\n *     <TabsGlass.Trigger value=\"settings\">Settings</TabsGlass.Trigger>\n *   </TabsGlass.List>\n *   <TabsGlass.Content value=\"overview\">\n *     Overview content\n *   </TabsGlass.Content>\n *   <TabsGlass.Content value=\"analytics\">\n *     Analytics content\n *   </TabsGlass.Content>\n *   <TabsGlass.Content value=\"settings\">\n *     Settings content\n *   </TabsGlass.Content>\n * </TabsGlass.Root>\n * ```\n *\n * @since v1.0.0 - Legacy API removed (tabs/activeTab/onChange props)\n */\n\nimport {\n  forwardRef,\n  createContext,\n  useContext,\n  type CSSProperties,\n  type FC,\n  type ReactNode,\n} from 'react';\nimport { cn } from '@/lib/utils';\nimport { useFocus } from '@/lib/hooks/use-focus';\nimport '@/glass-theme.css';\n\n// ========================================\n// TYPES\n// ========================================\n\nexport interface TabItem {\n  readonly id: string;\n  readonly label: string;\n}\n\n// ========================================\n// CONTEXT FOR COMPOUND COMPONENTS\n// ========================================\n\ninterface TabsContextValue {\n  value: string;\n  onValueChange?: (value: string) => void;\n}\n\nconst TabsContext = createContext<TabsContextValue | null>(null);\n\nconst useTabsContext = () => {\n  const context = useContext(TabsContext);\n  if (!context) {\n    throw new Error('Tabs compound components must be used within TabsGlass.Root');\n  }\n  return context;\n};\n\n// ========================================\n// COMPOUND COMPONENT: ROOT\n// ========================================\n\n/**\n * Props for TabsGlass.Root component\n *\n * Root component that manages tab state and provides context for child components.\n * Features accessible keyboard navigation and ARIA attributes.\n *\n * @accessibility\n * - **Keyboard Navigation:** Arrow keys navigate between tabs, Tab moves to tab panel content (WCAG 2.1.1)\n * - **Focus Management:** Visible focus ring on active tab using `--focus-glow` CSS variable (WCAG 2.4.7)\n * - **Screen Readers:** Uses `role=\"tablist\"`, `role=\"tab\"`, `role=\"tabpanel\"` for proper tab semantics (WCAG 4.1.3)\n * - **ARIA Attributes:** Tabs marked with `aria-selected`, panels with `aria-hidden` for state announcement\n * - **Active State:** Visual indicator (underline) plus color change for multi-modal feedback\n * - **Touch Targets:** Tab triggers meet minimum 44x44px touch target (WCAG 2.5.5)\n * - **Color Contrast:** Active and inactive tab text meet WCAG AA contrast ratio 4.5:1\n * - **Motion:** Transitions and indicator animations respect `prefers-reduced-motion` settings\n *\n * @example\n * ```tsx\n * // Basic tabs\n * <TabsGlass.Root value={activeTab} onValueChange={setActiveTab}>\n *   <TabsGlass.List>\n *     <TabsGlass.Trigger value=\"overview\">Overview</TabsGlass.Trigger>\n *     <TabsGlass.Trigger value=\"analytics\">Analytics</TabsGlass.Trigger>\n *     <TabsGlass.Trigger value=\"settings\">Settings</TabsGlass.Trigger>\n *   </TabsGlass.List>\n *   <TabsGlass.Content value=\"overview\">\n *     <h2>Overview</h2>\n *     <p>Overview content here</p>\n *   </TabsGlass.Content>\n *   <TabsGlass.Content value=\"analytics\">\n *     <h2>Analytics</h2>\n *     <p>Analytics content here</p>\n *   </TabsGlass.Content>\n *   <TabsGlass.Content value=\"settings\">\n *     <h2>Settings</h2>\n *     <p>Settings content here</p>\n *   </TabsGlass.Content>\n * </TabsGlass.Root>\n *\n * // Tabs with icons (ensure accessible labels)\n * <TabsGlass.Root value={activeTab} onValueChange={setActiveTab}>\n *   <TabsGlass.List>\n *     <TabsGlass.Trigger value=\"home\" aria-label=\"Home dashboard\">\n *       <Home className=\"w-4 h-4\" />\n *     </TabsGlass.Trigger>\n *     <TabsGlass.Trigger value=\"search\" aria-label=\"Search\">\n *       <Search className=\"w-4 h-4\" />\n *     </TabsGlass.Trigger>\n *   </TabsGlass.List>\n *   <TabsGlass.Content value=\"home\">Dashboard content</TabsGlass.Content>\n *   <TabsGlass.Content value=\"search\">Search content</TabsGlass.Content>\n * </TabsGlass.Root>\n *\n * // Disabled tab (announced to screen readers)\n * <TabsGlass.Root value={activeTab} onValueChange={setActiveTab}>\n *   <TabsGlass.List>\n *     <TabsGlass.Trigger value=\"tab1\">Available Tab</TabsGlass.Trigger>\n *     <TabsGlass.Trigger value=\"tab2\" disabled>\n *       Locked Tab\n *     </TabsGlass.Trigger>\n *   </TabsGlass.List>\n *   <TabsGlass.Content value=\"tab1\">Content 1</TabsGlass.Content>\n * </TabsGlass.Root>\n *\n * // Form tabs with proper focus management\n * <TabsGlass.Root value={currentStep} onValueChange={setCurrentStep}>\n *   <TabsGlass.List aria-label=\"Registration steps\">\n *     <TabsGlass.Trigger value=\"account\">Account Info</TabsGlass.Trigger>\n *     <TabsGlass.Trigger value=\"profile\">Profile Details</TabsGlass.Trigger>\n *     <TabsGlass.Trigger value=\"confirm\">Confirmation</TabsGlass.Trigger>\n *   </TabsGlass.List>\n *   <TabsGlass.Content value=\"account\">\n *     <InputGlass label=\"Email\" type=\"email\" />\n *   </TabsGlass.Content>\n *   <TabsGlass.Content value=\"profile\">\n *     <InputGlass label=\"Name\" />\n *   </TabsGlass.Content>\n *   <TabsGlass.Content value=\"confirm\">\n *     <p>Review your information</p>\n *   </TabsGlass.Content>\n * </TabsGlass.Root>\n * ```\n */\ninterface TabsRootProps {\n  /** Current active tab value */\n  value: string;\n  /** Callback when tab value changes */\n  onValueChange?: (value: string) => void;\n  /** Child components */\n  children: ReactNode;\n  /** Optional className for container */\n  className?: string;\n}\n\nconst TabsRoot: FC<TabsRootProps> = ({ value, onValueChange, children, className }) => {\n  return (\n    <TabsContext.Provider value={{ value, onValueChange }}>\n      <div className={cn('tabs-glass-root', className)}>{children}</div>\n    </TabsContext.Provider>\n  );\n};\n\n// ========================================\n// COMPOUND COMPONENT: LIST\n// ========================================\n\ninterface TabsListProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n  className?: string;\n}\n\nconst TabsList = forwardRef<HTMLDivElement, TabsListProps>(\n  ({ children, className, ...props }, ref) => {\n    const containerStyles: CSSProperties = {\n      background: 'var(--tab-container-bg)',\n      border: '1px solid var(--tab-container-border)',\n    };\n\n    return (\n      <div\n        ref={ref}\n        className={cn('inline-flex gap-0.5 md:gap-1 p-0.5 md:p-1 rounded-xl', className)}\n        style={containerStyles}\n        role=\"tablist\"\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nTabsList.displayName = 'TabsList';\n\n// ========================================\n// COMPOUND COMPONENT: TRIGGER\n// ========================================\n\ninterface TabsTriggerProps {\n  /** Value of this tab */\n  value: string;\n  /** Tab label/content */\n  children: ReactNode;\n  /** Optional className */\n  className?: string;\n  /** Disabled state */\n  disabled?: boolean;\n}\n\nconst TabsTrigger = forwardRef<HTMLButtonElement, TabsTriggerProps>(\n  ({ value, children, className, disabled }, ref) => {\n    const { value: activeValue, onValueChange } = useTabsContext();\n    const { isFocusVisible, focusProps } = useFocus({ focusVisible: true });\n    const isActive = activeValue === value;\n\n    const tabStyles: CSSProperties = {\n      background: isActive ? 'var(--tab-active-bg)' : 'var(--tab-bg)',\n      color: isActive ? 'var(--tab-active-text)' : 'var(--text-secondary)',\n      boxShadow: isFocusVisible && !disabled ? 'var(--focus-glow)' : 'none',\n    };\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {\n      if (disabled) return;\n\n      const tablist = e.currentTarget.closest('[role=\"tablist\"]');\n      if (!tablist) return;\n\n      const tabs = Array.from(\n        tablist.querySelectorAll('[role=\"tab\"]:not([disabled])')\n      ) as HTMLButtonElement[];\n      const currentIndex = tabs.indexOf(e.currentTarget);\n\n      let nextIndex = currentIndex;\n\n      switch (e.key) {\n        case 'ArrowRight':\n          e.preventDefault();\n          nextIndex = currentIndex + 1 >= tabs.length ? 0 : currentIndex + 1;\n          break;\n        case 'ArrowLeft':\n          e.preventDefault();\n          nextIndex = currentIndex - 1 < 0 ? tabs.length - 1 : currentIndex - 1;\n          break;\n        case 'Home':\n          e.preventDefault();\n          nextIndex = 0;\n          break;\n        case 'End':\n          e.preventDefault();\n          nextIndex = tabs.length - 1;\n          break;\n        default:\n          return;\n      }\n\n      const nextTab = tabs[nextIndex];\n      if (nextTab) {\n        nextTab.focus();\n        // Get the value from the button's data attribute or find it in context\n        const nextValue = nextTab.getAttribute('data-value');\n        if (nextValue && onValueChange) {\n          onValueChange(nextValue);\n        }\n      }\n    };\n\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        role=\"tab\"\n        aria-selected={isActive}\n        disabled={disabled}\n        data-value={value}\n        className={cn(\n          'relative px-2.5 py-1.5 md:px-4 md:py-2 rounded-lg text-xs md:text-sm font-medium transition-[background-color,color,opacity] duration-300',\n          disabled && 'opacity-50 cursor-not-allowed',\n          className\n        )}\n        style={tabStyles}\n        onClick={() => !disabled && onValueChange?.(value)}\n        onKeyDown={handleKeyDown}\n        onFocus={focusProps.onFocus}\n        onBlur={focusProps.onBlur}\n      >\n        {children}\n        {isActive && (\n          <div\n            className=\"absolute bottom-0 left-1/2 -translate-x-1/2 w-6 md:w-8 h-0.5 rounded-full\"\n            style={{ background: 'var(--tab-indicator)' }}\n          />\n        )}\n      </button>\n    );\n  }\n);\n\nTabsTrigger.displayName = 'TabsTrigger';\n\n// ========================================\n// COMPOUND COMPONENT: CONTENT\n// ========================================\n\ninterface TabsContentProps {\n  /** Value of the tab this content belongs to */\n  value: string;\n  /** Content to display when tab is active */\n  children: ReactNode;\n  /** Optional className */\n  className?: string;\n}\n\nconst TabsContent: FC<TabsContentProps> = ({ value, children, className }) => {\n  const { value: activeValue } = useTabsContext();\n  const isActive = activeValue === value;\n\n  if (!isActive) return null;\n\n  return (\n    <div\n      role=\"tabpanel\"\n      aria-hidden={!isActive}\n      className={cn('animate-in fade-in-0 duration-200', className)}\n    >\n      {children}\n    </div>\n  );\n};\n\n// ========================================\n// EXPORT COMPOUND COMPONENT (v1.0.0+)\n// ========================================\n\n/**\n * TabsGlass - Compound Component API\n *\n * @example\n * ```tsx\n * <TabsGlass.Root value={activeTab} onValueChange={setActiveTab}>\n *   <TabsGlass.List>\n *     <TabsGlass.Trigger value=\"tab1\">Overview</TabsGlass.Trigger>\n *     <TabsGlass.Trigger value=\"tab2\">Analytics</TabsGlass.Trigger>\n *   </TabsGlass.List>\n *   <TabsGlass.Content value=\"tab1\">\n *     <p>Overview content</p>\n *   </TabsGlass.Content>\n *   <TabsGlass.Content value=\"tab2\">\n *     <p>Analytics content</p>\n *   </TabsGlass.Content>\n * </TabsGlass.Root>\n * ```\n *\n * @since v1.0.0 - Legacy API removed (tabs/activeTab/onChange props)\n */\nexport const TabsGlass = {\n  Root: TabsRoot,\n  List: TabsList,\n  Trigger: TabsTrigger,\n  Content: TabsContent,\n};\n"
+      "content": "/* eslint-disable react-refresh/only-export-components */\n/**\n * TabsGlass Component (Compound API only)\n *\n * Glass-themed tab navigation with:\n * - Theme-aware styling (glass/light/aurora)\n * - Active tab indicator\n * - Smooth transitions\n * - Compound component API for advanced composition\n *\n * @example\n * ```tsx\n * <TabsGlass.Root value={activeTab} onValueChange={setActiveTab}>\n *   <TabsGlass.List>\n *     <TabsGlass.Trigger value=\"overview\">Overview</TabsGlass.Trigger>\n *     <TabsGlass.Trigger value=\"analytics\">Analytics</TabsGlass.Trigger>\n *     <TabsGlass.Trigger value=\"settings\">Settings</TabsGlass.Trigger>\n *   </TabsGlass.List>\n *   <TabsGlass.Content value=\"overview\">\n *     Overview content\n *   </TabsGlass.Content>\n *   <TabsGlass.Content value=\"analytics\">\n *     Analytics content\n *   </TabsGlass.Content>\n *   <TabsGlass.Content value=\"settings\">\n *     Settings content\n *   </TabsGlass.Content>\n * </TabsGlass.Root>\n * ```\n *\n * @since v1.0.0 - Legacy API removed (tabs/activeTab/onChange props)\n */\n\nimport {\n  forwardRef,\n  createContext,\n  useContext,\n  useState,\n  type CSSProperties,\n  type FC,\n  type ReactNode,\n} from 'react';\nimport { cn } from '@/lib/utils';\nimport { useFocus } from '@/lib/hooks/use-focus';\nimport '@/glass-theme.css';\n\n// ========================================\n// TYPES\n// ========================================\n\nexport interface TabItem {\n  readonly id: string;\n  readonly label: string;\n}\n\n// ========================================\n// CONTEXT FOR COMPOUND COMPONENTS\n// ========================================\n\ninterface TabsContextValue {\n  value: string;\n  onValueChange?: (value: string) => void;\n}\n\nconst TabsContext = createContext<TabsContextValue | null>(null);\n\nconst useTabsContext = () => {\n  const context = useContext(TabsContext);\n  if (!context) {\n    throw new Error('Tabs compound components must be used within TabsGlass.Root');\n  }\n  return context;\n};\n\n// ========================================\n// COMPOUND COMPONENT: ROOT\n// ========================================\n\n/**\n * Props for TabsGlass.Root component\n *\n * Root component that manages tab state and provides context for child components.\n * Features accessible keyboard navigation and ARIA attributes.\n *\n * @accessibility\n * - **Keyboard Navigation:** Arrow keys navigate between tabs, Tab moves to tab panel content (WCAG 2.1.1)\n * - **Focus Management:** Visible focus ring on active tab using `--focus-glow` CSS variable (WCAG 2.4.7)\n * - **Screen Readers:** Uses `role=\"tablist\"`, `role=\"tab\"`, `role=\"tabpanel\"` for proper tab semantics (WCAG 4.1.3)\n * - **ARIA Attributes:** Tabs marked with `aria-selected`, panels with `aria-hidden` for state announcement\n * - **Active State:** Visual indicator (underline) plus color change for multi-modal feedback\n * - **Touch Targets:** Tab triggers meet minimum 44x44px touch target (WCAG 2.5.5)\n * - **Color Contrast:** Active and inactive tab text meet WCAG AA contrast ratio 4.5:1\n * - **Motion:** Transitions and indicator animations respect `prefers-reduced-motion` settings\n *\n * @example\n * ```tsx\n * // Basic tabs\n * <TabsGlass.Root value={activeTab} onValueChange={setActiveTab}>\n *   <TabsGlass.List>\n *     <TabsGlass.Trigger value=\"overview\">Overview</TabsGlass.Trigger>\n *     <TabsGlass.Trigger value=\"analytics\">Analytics</TabsGlass.Trigger>\n *     <TabsGlass.Trigger value=\"settings\">Settings</TabsGlass.Trigger>\n *   </TabsGlass.List>\n *   <TabsGlass.Content value=\"overview\">\n *     <h2>Overview</h2>\n *     <p>Overview content here</p>\n *   </TabsGlass.Content>\n *   <TabsGlass.Content value=\"analytics\">\n *     <h2>Analytics</h2>\n *     <p>Analytics content here</p>\n *   </TabsGlass.Content>\n *   <TabsGlass.Content value=\"settings\">\n *     <h2>Settings</h2>\n *     <p>Settings content here</p>\n *   </TabsGlass.Content>\n * </TabsGlass.Root>\n *\n * // Tabs with icons (ensure accessible labels)\n * <TabsGlass.Root value={activeTab} onValueChange={setActiveTab}>\n *   <TabsGlass.List>\n *     <TabsGlass.Trigger value=\"home\" aria-label=\"Home dashboard\">\n *       <Home className=\"w-4 h-4\" />\n *     </TabsGlass.Trigger>\n *     <TabsGlass.Trigger value=\"search\" aria-label=\"Search\">\n *       <Search className=\"w-4 h-4\" />\n *     </TabsGlass.Trigger>\n *   </TabsGlass.List>\n *   <TabsGlass.Content value=\"home\">Dashboard content</TabsGlass.Content>\n *   <TabsGlass.Content value=\"search\">Search content</TabsGlass.Content>\n * </TabsGlass.Root>\n *\n * // Disabled tab (announced to screen readers)\n * <TabsGlass.Root value={activeTab} onValueChange={setActiveTab}>\n *   <TabsGlass.List>\n *     <TabsGlass.Trigger value=\"tab1\">Available Tab</TabsGlass.Trigger>\n *     <TabsGlass.Trigger value=\"tab2\" disabled>\n *       Locked Tab\n *     </TabsGlass.Trigger>\n *   </TabsGlass.List>\n *   <TabsGlass.Content value=\"tab1\">Content 1</TabsGlass.Content>\n * </TabsGlass.Root>\n *\n * // Form tabs with proper focus management\n * <TabsGlass.Root value={currentStep} onValueChange={setCurrentStep}>\n *   <TabsGlass.List aria-label=\"Registration steps\">\n *     <TabsGlass.Trigger value=\"account\">Account Info</TabsGlass.Trigger>\n *     <TabsGlass.Trigger value=\"profile\">Profile Details</TabsGlass.Trigger>\n *     <TabsGlass.Trigger value=\"confirm\">Confirmation</TabsGlass.Trigger>\n *   </TabsGlass.List>\n *   <TabsGlass.Content value=\"account\">\n *     <InputGlass label=\"Email\" type=\"email\" />\n *   </TabsGlass.Content>\n *   <TabsGlass.Content value=\"profile\">\n *     <InputGlass label=\"Name\" />\n *   </TabsGlass.Content>\n *   <TabsGlass.Content value=\"confirm\">\n *     <p>Review your information</p>\n *   </TabsGlass.Content>\n * </TabsGlass.Root>\n * ```\n */\n/**\n * Props for TabsGlass Root component (shadcn/ui compatible)\n */\nexport interface TabsRootProps {\n  /** Current active tab value (controlled) */\n  value?: string;\n  /** Default active tab value (uncontrolled) */\n  defaultValue?: string;\n  /** Callback when tab value changes */\n  onValueChange?: (value: string) => void;\n  /** Child components */\n  children: ReactNode;\n  /** Optional className for container */\n  className?: string;\n}\n\nconst TabsRoot: FC<TabsRootProps> = ({\n  value: controlledValue,\n  defaultValue,\n  onValueChange,\n  children,\n  className,\n}) => {\n  // Support both controlled and uncontrolled modes (shadcn/ui pattern)\n  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue ?? '');\n  const isControlled = controlledValue !== undefined;\n  const value = isControlled ? controlledValue : uncontrolledValue;\n\n  const handleValueChange = (newValue: string) => {\n    if (!isControlled) {\n      setUncontrolledValue(newValue);\n    }\n    onValueChange?.(newValue);\n  };\n\n  return (\n    <TabsContext.Provider value={{ value, onValueChange: handleValueChange }}>\n      <div className={cn('tabs-glass-root', className)}>{children}</div>\n    </TabsContext.Provider>\n  );\n};\n\n// ========================================\n// COMPOUND COMPONENT: LIST\n// ========================================\n\nexport interface TabsListProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n  className?: string;\n}\n\nconst TabsList = forwardRef<HTMLDivElement, TabsListProps>(\n  ({ children, className, ...props }, ref) => {\n    const containerStyles: CSSProperties = {\n      background: 'var(--tab-container-bg)',\n      border: '1px solid var(--tab-container-border)',\n    };\n\n    return (\n      <div\n        ref={ref}\n        className={cn('inline-flex gap-0.5 md:gap-1 p-0.5 md:p-1 rounded-xl', className)}\n        style={containerStyles}\n        role=\"tablist\"\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nTabsList.displayName = 'TabsList';\n\n// ========================================\n// COMPOUND COMPONENT: TRIGGER\n// ========================================\n\nexport interface TabsTriggerProps {\n  /** Value of this tab */\n  value: string;\n  /** Tab label/content */\n  children: ReactNode;\n  /** Optional className */\n  className?: string;\n  /** Disabled state */\n  disabled?: boolean;\n}\n\nconst TabsTrigger = forwardRef<HTMLButtonElement, TabsTriggerProps>(\n  ({ value, children, className, disabled }, ref) => {\n    const { value: activeValue, onValueChange } = useTabsContext();\n    const { isFocusVisible, focusProps } = useFocus({ focusVisible: true });\n    const isActive = activeValue === value;\n\n    const tabStyles: CSSProperties = {\n      background: isActive ? 'var(--tab-active-bg)' : 'var(--tab-bg)',\n      color: isActive ? 'var(--tab-active-text)' : 'var(--text-secondary)',\n      boxShadow: isFocusVisible && !disabled ? 'var(--focus-glow)' : 'none',\n    };\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {\n      if (disabled) return;\n\n      const tablist = e.currentTarget.closest('[role=\"tablist\"]');\n      if (!tablist) return;\n\n      const tabs = Array.from(\n        tablist.querySelectorAll('[role=\"tab\"]:not([disabled])')\n      ) as HTMLButtonElement[];\n      const currentIndex = tabs.indexOf(e.currentTarget);\n\n      let nextIndex = currentIndex;\n\n      switch (e.key) {\n        case 'ArrowRight':\n          e.preventDefault();\n          nextIndex = currentIndex + 1 >= tabs.length ? 0 : currentIndex + 1;\n          break;\n        case 'ArrowLeft':\n          e.preventDefault();\n          nextIndex = currentIndex - 1 < 0 ? tabs.length - 1 : currentIndex - 1;\n          break;\n        case 'Home':\n          e.preventDefault();\n          nextIndex = 0;\n          break;\n        case 'End':\n          e.preventDefault();\n          nextIndex = tabs.length - 1;\n          break;\n        default:\n          return;\n      }\n\n      const nextTab = tabs[nextIndex];\n      if (nextTab) {\n        nextTab.focus();\n        // Get the value from the button's data attribute or find it in context\n        const nextValue = nextTab.getAttribute('data-value');\n        if (nextValue && onValueChange) {\n          onValueChange(nextValue);\n        }\n      }\n    };\n\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        role=\"tab\"\n        aria-selected={isActive}\n        disabled={disabled}\n        data-value={value}\n        className={cn(\n          'relative px-2.5 py-1.5 md:px-4 md:py-2 rounded-lg text-xs md:text-sm font-medium transition-[background-color,color,opacity] duration-300',\n          disabled && 'opacity-50 cursor-not-allowed',\n          className\n        )}\n        style={tabStyles}\n        onClick={() => !disabled && onValueChange?.(value)}\n        onKeyDown={handleKeyDown}\n        onFocus={focusProps.onFocus}\n        onBlur={focusProps.onBlur}\n      >\n        {children}\n        {isActive && (\n          <div\n            className=\"absolute bottom-0 left-1/2 -translate-x-1/2 w-6 md:w-8 h-0.5 rounded-full\"\n            style={{ background: 'var(--tab-indicator)' }}\n          />\n        )}\n      </button>\n    );\n  }\n);\n\nTabsTrigger.displayName = 'TabsTrigger';\n\n// ========================================\n// COMPOUND COMPONENT: CONTENT\n// ========================================\n\nexport interface TabsContentProps {\n  /** Value of the tab this content belongs to */\n  value: string;\n  /** Content to display when tab is active */\n  children: ReactNode;\n  /** Optional className */\n  className?: string;\n}\n\nconst TabsContent: FC<TabsContentProps> = ({ value, children, className }) => {\n  const { value: activeValue } = useTabsContext();\n  const isActive = activeValue === value;\n\n  if (!isActive) return null;\n\n  return (\n    <div\n      role=\"tabpanel\"\n      aria-hidden={!isActive}\n      className={cn('animate-in fade-in-0 duration-200', className)}\n    >\n      {children}\n    </div>\n  );\n};\n\n// ========================================\n// EXPORT COMPOUND COMPONENT (v1.0.0+)\n// ========================================\n\n/**\n * TabsGlass - Compound Component API\n *\n * @example\n * ```tsx\n * // Compound API (TabsGlass.Root pattern)\n * <TabsGlass.Root value={activeTab} onValueChange={setActiveTab}>\n *   <TabsGlass.List>\n *     <TabsGlass.Trigger value=\"tab1\">Overview</TabsGlass.Trigger>\n *     <TabsGlass.Trigger value=\"tab2\">Analytics</TabsGlass.Trigger>\n *   </TabsGlass.List>\n *   <TabsGlass.Content value=\"tab1\">\n *     <p>Overview content</p>\n *   </TabsGlass.Content>\n *   <TabsGlass.Content value=\"tab2\">\n *     <p>Analytics content</p>\n *   </TabsGlass.Content>\n * </TabsGlass.Root>\n *\n * // shadcn/ui compatible API (separate imports)\n * import { Tabs, TabsList, TabsTrigger, TabsContent } from 'shadcn-glass-ui'\n * <Tabs defaultValue=\"tab1\">\n *   <TabsList>\n *     <TabsTrigger value=\"tab1\">Overview</TabsTrigger>\n *     <TabsTrigger value=\"tab2\">Analytics</TabsTrigger>\n *   </TabsList>\n *   <TabsContent value=\"tab1\">Overview content</TabsContent>\n *   <TabsContent value=\"tab2\">Analytics content</TabsContent>\n * </Tabs>\n * ```\n *\n * @since v1.0.0 - Legacy API removed (tabs/activeTab/onChange props)\n * @since v2.3.0 - Added shadcn/ui compatible separate exports\n */\nexport const TabsGlass = {\n  Root: TabsRoot,\n  List: TabsList,\n  Trigger: TabsTrigger,\n  Content: TabsContent,\n};\n\n// ========================================\n// SHADCN/UI COMPATIBLE EXPORTS (v2.3.0+)\n// ========================================\n\n/**\n * Tabs - shadcn/ui compatible alias for TabsGlass.Root\n *\n * @example\n * ```tsx\n * import { Tabs, TabsList, TabsTrigger, TabsContent } from 'shadcn-glass-ui'\n *\n * <Tabs defaultValue=\"account\">\n *   <TabsList>\n *     <TabsTrigger value=\"account\">Account</TabsTrigger>\n *     <TabsTrigger value=\"password\">Password</TabsTrigger>\n *   </TabsList>\n *   <TabsContent value=\"account\">Account settings</TabsContent>\n *   <TabsContent value=\"password\">Password settings</TabsContent>\n * </Tabs>\n * ```\n */\nexport const Tabs = TabsRoot;\n\n/**\n * TabsList - shadcn/ui compatible alias for TabsGlass.List\n */\nexport { TabsList };\n\n/**\n * TabsTrigger - shadcn/ui compatible alias for TabsGlass.Trigger\n */\nexport { TabsTrigger };\n\n/**\n * TabsContent - shadcn/ui compatible alias for TabsGlass.Content\n */\nexport { TabsContent };\n"
     }
   ],
   "categories": [

package/dist/{theme-context-_T5r1KG4.js → theme-context-DLS2uAgJ.mjs}

@@ -63,4 +63,4 @@ function getThemeConfig(theme) {
 }
 export { getThemeConfig as a, getNextTheme as i, THEME_CONFIG as n, useTheme as o, ThemeProvider as r, THEMES as t };
 
-//# sourceMappingURL=theme-context-_T5r1KG4.js.map
+//# sourceMappingURL=theme-context-DLS2uAgJ.mjs.map

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

@@ -0,0 +1 @@
+{"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/{theme-context-BEA8K_rq.cjs → theme-context-DmTETrFi.cjs}

@@ -1,4 +1,4 @@
-const require_trust_score_card_glass = require("./trust-score-card-glass-DTS1RdIt.cjs");
+const require_trust_score_card_glass = require("./trust-score-card-glass-3VBi9soW.cjs");
 let react = require("react");
 let lucide_react = require("lucide-react");
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -99,4 +99,4 @@ Object.defineProperty(exports, "useTheme", {
 	}
 });
 
-//# sourceMappingURL=theme-context-BEA8K_rq.cjs.map
+//# sourceMappingURL=theme-context-DmTETrFi.cjs.map

package/dist/{theme-context-BEA8K_rq.cjs.map → theme-context-DmTETrFi.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"theme-context-BEA8K_rq.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"}
+{"version":3,"file":"theme-context-DmTETrFi.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/themes.cjs

@@ -1,4 +1,4 @@
-const require_theme_context = require("./theme-context-BEA8K_rq.cjs");
+const require_theme_context = require("./theme-context-DmTETrFi.cjs");
 exports.THEMES = require_theme_context.THEMES;
 exports.THEME_CONFIG = require_theme_context.THEME_CONFIG;
 exports.ThemeProvider = require_theme_context.ThemeProvider;

package/dist/themes.d.ts

@@ -1,124 +1,2 @@
-import { JSX } from 'react/jsx-runtime';
-import { LucideIcon } from 'lucide-react';
-import { ReactNode } from 'react';
-
-/**
- * Get the next theme in the cycle order.
- *
- * @param current - Current theme
- * @returns Next theme in cycle (light → aurora → glass → light)
- *
- * @example
- * ```tsx
- * const next = getNextTheme('glass'); // returns 'light'
- * ```
- */
-export declare function getNextTheme(current: Theme): Theme;
-
-/**
- * Get configuration for a specific theme.
- *
- * @param theme - Theme to get configuration for
- * @returns Theme configuration with label and icon
- *
- * @example
- * ```tsx
- * const config = getThemeConfig('glass');
- * // { label: 'Glass', icon: Palette }
- * ```
- */
-export declare function getThemeConfig(theme: Theme): ThemeConfig;
-
-/**
- * Available theme options for Glass UI components.
- * - `light` - Light theme with subtle glass effects
- * - `aurora` - Gradient theme with aurora/northern lights effects
- * - `glass` - Dark glassmorphism theme (default)
- */
-export declare type Theme = 'light' | 'aurora' | 'glass';
-
-/**
- * Theme configuration map with labels and icons.
- * Used by ThemeToggleGlass and other theme switching components.
- */
-export declare const THEME_CONFIG: Record<Theme, ThemeConfig>;
-
-/**
- * Configuration for a single theme including display label and icon.
- */
-export declare interface ThemeConfig {
-    /** Human-readable theme name for UI display */
-    readonly label: string;
-    /** Lucide icon component for theme toggle buttons */
-    readonly icon: LucideIcon;
-}
-
-/**
- * Context value returned by useTheme hook.
- */
-export declare interface ThemeContextValue {
-    /** Current active theme */
-    readonly theme: Theme;
-    /** Set a specific theme */
-    readonly setTheme: (theme: Theme) => void;
-    /** Cycle to next theme in order: light → aurora → glass → light */
-    readonly cycleTheme: () => void;
-}
-
-/**
- * Theme provider component that manages theme state and persistence.
- *
- * Wraps your application to provide theme context to all child components.
- * Theme is automatically persisted to localStorage and applied to document.
- *
- * @param props - Provider configuration
- * @param props.children - Child components to wrap
- * @param props.defaultTheme - Initial theme (default: "glass")
- * @param props.storageKey - localStorage key (default: "glass-ui-theme")
- *
- * @example
- * ```tsx
- * <ThemeProvider defaultTheme="glass">
- *   <App />
- * </ThemeProvider>
- * ```
- */
-export declare function ThemeProvider({ children, defaultTheme, storageKey, }: ThemeProviderProps): JSX.Element;
-
-declare interface ThemeProviderProps {
-    /** Child components to wrap with theme context */
-    readonly children: ReactNode;
-    /** Initial theme to use (default: "glass") */
-    readonly defaultTheme?: Theme;
-    /** localStorage key for persistence (default: "glass-ui-theme") */
-    readonly storageKey?: string;
-}
-
-/** Array of all available themes in cycle order */
-export declare const THEMES: readonly Theme[];
-
-/**
- * Hook to access theme context values.
- *
- * Must be used within a ThemeProvider. Returns the current theme,
- * a setter function, and a cycle function.
- *
- * @returns Theme context value with theme, setTheme, and cycleTheme
- * @throws Error if used outside of ThemeProvider
- *
- * @example
- * ```tsx
- * function MyComponent() {
- *   const { theme, setTheme, cycleTheme } = useTheme();
- *
- *   return (
- *     <button onClick={cycleTheme}>
- *       Current: {theme}
- *     </button>
- *   );
- * }
- * ```
- */
-export declare function useTheme(): ThemeContextValue;
-
-export { }
+export { ThemeProvider, useTheme, THEMES, THEME_CONFIG, getNextTheme, getThemeConfig, type Theme, type ThemeConfig, type ThemeContextValue, } from './lib/theme-context';
+//# sourceMappingURL=themes.d.ts.map

package/dist/themes.d.ts.map

@@ -0,0 +1 @@
+{"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"}

package/dist/{themes.js → themes.mjs}

@@ -1,2 +1,2 @@
-import { a as getThemeConfig, i as getNextTheme, n as THEME_CONFIG, o as useTheme, r as ThemeProvider, t as THEMES } from "./theme-context-_T5r1KG4.js";
+import { a as getThemeConfig, i as getNextTheme, n as THEME_CONFIG, o as useTheme, r as ThemeProvider, t as THEMES } from "./theme-context-DLS2uAgJ.mjs";
 export { THEMES, THEME_CONFIG, ThemeProvider, getNextTheme, getThemeConfig, useTheme };