shadcn-glass-ui 2.2.4 → 2.3.0

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-DBAPfMto.cjs → theme-context-DmTETrFi.cjs}

@@ -1,4 +1,4 @@
-const require_trust_score_card_glass = require("./trust-score-card-glass-_v9hGnCW.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-DBAPfMto.cjs.map
+//# sourceMappingURL=theme-context-DmTETrFi.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"theme-context-DBAPfMto.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-DBAPfMto.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/{trust-score-card-glass-_v9hGnCW.cjs → trust-score-card-glass-3VBi9soW.cjs}

@@ -18,9 +18,9 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 	value: mod,
 	enumerable: true
 }) : target, mod));
-const require_utils = require("./utils-D5ef293O.cjs");
-const require_use_focus = require("./use-focus-DBs46Dxv.cjs");
-const require_theme_context = require("./theme-context-DBAPfMto.cjs");
+const require_utils = require("./utils-DX6rdBol.cjs");
+const require_use_focus = require("./use-focus-CswOSq71.cjs");
+const require_theme_context = require("./theme-context-DmTETrFi.cjs");
 let react = require("react");
 react = __toESM(react);
 let lucide_react = require("lucide-react");
@@ -554,14 +554,31 @@ const ButtonGlass = (0, react.forwardRef)(({ asChild = false, className, variant
 	});
 });
 ButtonGlass.displayName = "ButtonGlass";
-const CheckboxGlass = (0, react.forwardRef)(({ className, checked, onChange, label, disabled, ...props }, ref) => {
+const CheckboxGlass = (0, react.forwardRef)(({ className, checked: controlledChecked, defaultChecked, onCheckedChange, onChange, label, disabled, ...props }, ref) => {
 	const { isHovered, hoverProps } = require_use_focus.useHover();
 	const { isFocusVisible, focusProps } = require_use_focus.useFocus({ focusVisible: true });
+	const [uncontrolledChecked, setUncontrolledChecked] = react.useState(defaultChecked ?? false);
+	const isControlled = controlledChecked !== void 0;
+	const checked = isControlled ? controlledChecked : uncontrolledChecked;
+	const isChecked = checked === true;
+	const isIndeterminate = checked === "indeterminate";
+	const showIndicator = isChecked || isIndeterminate;
+	const handleChange = (newChecked) => {
+		if (disabled) return;
+		if (!isControlled) setUncontrolledChecked(newChecked);
+		onCheckedChange?.(newChecked);
+		if (onChange && typeof newChecked === "boolean") onChange(newChecked);
+	};
+	const toggleChecked = () => {
+		if (isIndeterminate) handleChange(true);
+		else handleChange(!isChecked);
+	};
 	const checkboxStyles = {
-		background: checked ? "var(--checkbox-checked-bg)" : "var(--checkbox-bg)",
-		border: `2px solid ${checked ? "var(--checkbox-checked-bg)" : "var(--checkbox-border)"}`,
+		background: showIndicator ? "var(--checkbox-checked-bg)" : "var(--checkbox-bg)",
+		border: `2px solid ${showIndicator ? "var(--checkbox-checked-bg)" : "var(--checkbox-border)"}`,
 		boxShadow: isFocusVisible && !disabled ? "var(--focus-glow)" : isHovered && !disabled ? "var(--checkbox-glow)" : "none"
 	};
+	const ariaChecked = isIndeterminate ? "mixed" : isChecked;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
 		className: require_utils.cn("inline-flex items-center gap-2 md:gap-2.5", disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer", className),
 		onMouseEnter: hoverProps.onMouseEnter,
@@ -570,34 +587,37 @@ const CheckboxGlass = (0, react.forwardRef)(({ className, checked, onChange, lab
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 				ref,
 				type: "checkbox",
-				checked,
-				onChange: (e) => !disabled && onChange?.(e.target.checked),
+				checked: isChecked,
+				onChange: (e) => handleChange(e.target.checked),
 				disabled,
 				className: "sr-only",
 				...props
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 				className: "inline-flex items-center justify-center min-w-11 min-h-11",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					onClick: () => !disabled && onChange?.(!checked),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					onClick: toggleChecked,
 					onFocus: focusProps.onFocus,
 					onBlur: focusProps.onBlur,
 					className: "relative w-6 h-6 md:w-5 md:h-5 rounded-md flex items-center justify-center transition-all duration-300",
 					style: checkboxStyles,
 					role: "checkbox",
-					"aria-checked": checked,
+					"aria-checked": ariaChecked,
 					"aria-label": label || "Checkbox",
 					tabIndex: disabled ? -1 : 0,
 					onKeyDown: (e) => {
 						if (!disabled && (e.key === "Enter" || e.key === " ")) {
 							e.preventDefault();
-							onChange?.(!checked);
+							toggleChecked();
 						}
 					},
-					children: checked && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, {
+					children: [isChecked && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, {
 						className: "w-3.5 h-3.5 md:w-3 md:h-3",
 						style: { color: "var(--text-inverse)" }
-					})
+					}), isIndeterminate && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Minus, {
+						className: "w-3.5 h-3.5 md:w-3 md:h-3",
+						style: { color: "var(--text-inverse)" }
+					})]
 				})
 			}),
 			label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -609,6 +629,7 @@ const CheckboxGlass = (0, react.forwardRef)(({ className, checked, onChange, lab
 	});
 });
 CheckboxGlass.displayName = "CheckboxGlass";
+const Checkbox = CheckboxGlass;
 var circularProgressVariants = (0, class_variance_authority.cva)("relative inline-flex items-center justify-center p-4", {
 	variants: { size: {
 		sm: "w-20 h-20",
@@ -1571,11 +1592,18 @@ var useTabsContext = () => {
 	if (!context) throw new Error("Tabs compound components must be used within TabsGlass.Root");
 	return context;
 };
-var TabsRoot = ({ value, onValueChange, children, className }) => {
+var TabsRoot = ({ value: controlledValue, defaultValue, onValueChange, children, className }) => {
+	const [uncontrolledValue, setUncontrolledValue] = (0, react.useState)(defaultValue ?? "");
+	const isControlled = controlledValue !== void 0;
+	const value = isControlled ? controlledValue : uncontrolledValue;
+	const handleValueChange = (newValue) => {
+		if (!isControlled) setUncontrolledValue(newValue);
+		onValueChange?.(newValue);
+	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TabsContext.Provider, {
 		value: {
 			value,
-			onValueChange
+			onValueChange: handleValueChange
 		},
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: require_utils.cn("tabs-glass-root", className),
@@ -1676,6 +1704,7 @@ const TabsGlass = {
 	Trigger: TabsTrigger,
 	Content: TabsContent
 };
+const Tabs = TabsRoot;
 const toggleSizes = (0, class_variance_authority.cva)("relative rounded-full transition-all duration-300", {
 	variants: {
 		size: {
@@ -4296,6 +4325,12 @@ Object.defineProperty(exports, "CareerStatsHeaderGlass", {
 		return CareerStatsHeaderGlass;
 	}
 });
+Object.defineProperty(exports, "Checkbox", {
+	enumerable: true,
+	get: function() {
+		return Checkbox;
+	}
+});
 Object.defineProperty(exports, "CheckboxGlass", {
 	enumerable: true,
 	get: function() {
@@ -4644,12 +4679,36 @@ Object.defineProperty(exports, "StatusIndicatorGlass", {
 		return StatusIndicatorGlass;
 	}
 });
+Object.defineProperty(exports, "Tabs", {
+	enumerable: true,
+	get: function() {
+		return Tabs;
+	}
+});
+Object.defineProperty(exports, "TabsContent", {
+	enumerable: true,
+	get: function() {
+		return TabsContent;
+	}
+});
 Object.defineProperty(exports, "TabsGlass", {
 	enumerable: true,
 	get: function() {
 		return TabsGlass;
 	}
 });
+Object.defineProperty(exports, "TabsList", {
+	enumerable: true,
+	get: function() {
+		return TabsList;
+	}
+});
+Object.defineProperty(exports, "TabsTrigger", {
+	enumerable: true,
+	get: function() {
+		return TabsTrigger;
+	}
+});
 Object.defineProperty(exports, "ThemeToggleGlass", {
 	enumerable: true,
 	get: function() {
@@ -4831,4 +4890,4 @@ Object.defineProperty(exports, "toggleSizes", {
 	}
 });
 
-//# sourceMappingURL=trust-score-card-glass-_v9hGnCW.cjs.map
+//# sourceMappingURL=trust-score-card-glass-3VBi9soW.cjs.map