shadcn-glass-ui 1.0.11 → 2.0.0

package/dist/r/tabs-glass.json

@@ -5,20 +5,15 @@
   "title": "Tabs Glass",
   "description": "TabsGlass Component (Compound API only)",
   "dependencies": [],
-  "registryDependencies": [
-    "cn",
-    "use-focus"
-  ],
+  "registryDependencies": ["cn", "use-focus"],
   "files": [
     {
       "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    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        role=\"tab\"\n        aria-selected={isActive}\n        disabled={disabled}\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        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  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"
     }
   ],
-  "categories": [
-    "ui"
-  ],
+  "categories": ["ui"],
   "cssVars": {
     "light": {
       "--glass-bg": "rgba(255, 255, 255, 0.1)",
@@ -35,4 +30,4 @@
       "--blur-lg": "24px"
     }
   }
-}
+}

package/dist/r/trust-score-card-glass.json

@@ -4,21 +4,14 @@
   "type": "registry:block",
   "title": "Trust Score Card Glass",
   "description": "Trust Score Card Glass component with glass effects",
-  "dependencies": [
-    "lucide-react",
-    "react"
-  ],
-  "registryDependencies": [
-    "cn"
-  ],
+  "dependencies": ["lucide-react", "react"],
+  "registryDependencies": ["cn"],
   "files": [
     {
       "path": "components/glass/sections/trust-score-card-glass.tsx",
       "type": "registry:component",
-      "content": "// ========================================\n// TRUST SCORE CARD GLASS COMPONENT\n// Overall trust score display with metrics\n// ========================================\n\nimport { forwardRef } from \"react\";\nimport { Target } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport { GlassCard } from \"../ui/glass-card\";\nimport { RainbowProgressGlass } from \"../specialized/rainbow-progress-glass\";\nimport { MetricCardGlass, type MetricColor } from \"../composite/metric-card-glass\";\nimport \"@/glass-theme.css\";\n\nexport interface MetricData {\n  readonly label: string;\n  readonly value: number;\n  readonly color: MetricColor;\n}\n\nexport interface TrustScoreCardGlassProps extends React.HTMLAttributes<HTMLDivElement> {\n  readonly score?: number;\n  readonly metrics?: readonly MetricData[];\n}\n\nexport const TrustScoreCardGlass = forwardRef<HTMLDivElement, TrustScoreCardGlassProps>(\n  ({ score = 72, metrics = [], className, ...props }, ref) => {\n    return (\n      <GlassCard\n        ref={ref}\n        className={cn(\"p-4 md:p-5\", className)}\n        intensity=\"strong\"\n        glow=\"cyan\"\n        hover={false}\n        {...props}\n      >\n        <div className=\"flex items-center justify-between mb-3 md:mb-4\">\n          <h2\n            className=\"font-semibold flex items-center gap-1.5 md:gap-2 text-base md:text-lg\"\n            style={{ color: \"var(--text-primary)\" }}\n          >\n            <Target className=\"w-4 h-4 md:w-5 md:h-5\" style={{ color: \"var(--text-accent)\" }} />\n            Overall Trust Score\n          </h2>\n          <div className=\"flex items-center gap-1.5 md:gap-2 animate-[score-pulse_2s_ease-in-out_infinite]\">\n            <span className=\"text-3xl md:text-4xl font-bold bg-linear-to-r from-amber-400 via-emerald-400 to-cyan-400 bg-clip-text text-transparent\">\n              {score}\n            </span>\n            <span className=\"text-lg md:text-xl\" style={{ color: \"var(--text-muted)\" }}>\n              / 100\n            </span>\n          </div>\n        </div>\n        <RainbowProgressGlass value={score} size=\"lg\" showGlow />\n        {metrics.length > 0 && (\n          <div className=\"grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3 md:gap-4 mt-4 md:mt-5\">\n            {metrics.map((m) => (\n              <MetricCardGlass\n                key={m.label}\n                label={m.label}\n                value={m.value}\n                color={m.color}\n              />\n            ))}\n          </div>\n        )}\n      </GlassCard>\n    );\n  }\n);\n\nTrustScoreCardGlass.displayName = \"TrustScoreCardGlass\";\n"
+      "content": "// ========================================\n// TRUST SCORE CARD GLASS COMPONENT\n// Overall trust score display with metrics\n// ========================================\n\nimport { forwardRef } from 'react';\nimport { Target } from 'lucide-react';\nimport { cn } from '@/lib/utils';\nimport { GlassCard } from '../ui/glass-card';\nimport { RainbowProgressGlass } from '../specialized/rainbow-progress-glass';\nimport { MetricCardGlass, type MetricVariant } from '../composite/metric-card-glass';\nimport '@/glass-theme.css';\n\nexport interface MetricData {\n  readonly title: string;\n  readonly value: string | number;\n  readonly variant: MetricVariant;\n}\n\nexport interface TrustScoreCardGlassProps extends React.HTMLAttributes<HTMLDivElement> {\n  readonly score?: number;\n  readonly metrics?: readonly MetricData[];\n}\n\nexport const TrustScoreCardGlass = forwardRef<HTMLDivElement, TrustScoreCardGlassProps>(\n  ({ score = 72, metrics = [], className, ...props }, ref) => {\n    return (\n      <GlassCard\n        ref={ref}\n        className={cn('p-4 md:p-5', className)}\n        intensity=\"strong\"\n        glow=\"cyan\"\n        hover={false}\n        {...props}\n      >\n        <div className=\"flex items-center justify-between mb-3 md:mb-4\">\n          <h2\n            className=\"font-semibold flex items-center gap-1.5 md:gap-2 text-base md:text-lg\"\n            style={{ color: 'var(--text-primary)' }}\n          >\n            <Target className=\"w-4 h-4 md:w-5 md:h-5\" style={{ color: 'var(--text-accent)' }} />\n            Overall Trust Score\n          </h2>\n          <div className=\"flex items-center gap-1.5 md:gap-2 animate-[score-pulse_2s_ease-in-out_infinite]\">\n            <span className=\"text-3xl md:text-4xl font-bold bg-linear-to-r from-amber-400 via-emerald-400 to-cyan-400 bg-clip-text text-transparent\">\n              {score}\n            </span>\n            <span className=\"text-lg md:text-xl\" style={{ color: 'var(--text-muted)' }}>\n              / 100\n            </span>\n          </div>\n        </div>\n        <RainbowProgressGlass value={score} size=\"lg\" showGlow />\n        {metrics.length > 0 && (\n          <div className=\"grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3 md:gap-4 mt-4 md:mt-5\">\n            {metrics.map((m) => (\n              <MetricCardGlass key={m.title} title={m.title} value={m.value} variant={m.variant} />\n            ))}\n          </div>\n        )}\n      </GlassCard>\n    );\n  }\n);\n\nTrustScoreCardGlass.displayName = 'TrustScoreCardGlass';\n"
     }
   ],
-  "categories": [
-    "sections"
-  ]
-}
+  "categories": ["sections"]
+}

package/dist/r/year-card-glass.json

@@ -4,22 +4,14 @@
   "type": "registry:block",
   "title": "Year Card Glass",
   "description": "Year Card Glass component with glass effects",
-  "dependencies": [
-    "lucide-react",
-    "react"
-  ],
-  "registryDependencies": [
-    "cn",
-    "variants"
-  ],
+  "dependencies": ["lucide-react", "react"],
+  "registryDependencies": ["cn", "variants"],
   "files": [
     {
       "path": "components/glass/composite/year-card-glass.tsx",
       "type": "registry:component",
-      "content": "// ========================================\n// YEAR CARD GLASS COMPONENT\n// Year card for career timeline\n// ========================================\n\nimport { forwardRef, type CSSProperties } from \"react\";\nimport { ChevronDown, ChevronUp } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport { BadgeGlass } from \"../ui/badge-glass\";\nimport { ProgressGlass } from \"../specialized/progress-glass\";\nimport { ButtonGlass } from \"../ui/button-glass\";\nimport { InteractiveCard } from \"../primitives\";\nimport type { ProgressGradient } from \"@/lib/variants/progress-glass-variants\";\nimport \"@/glass-theme.css\";\n\nexport interface YearCardGlassProps extends React.HTMLAttributes<HTMLDivElement> {\n  readonly year: string | number;\n  readonly emoji: string;\n  readonly label: string;\n  readonly commits: string;\n  readonly progress: number;\n  readonly isExpanded?: boolean;\n  readonly gradient?: ProgressGradient;\n  readonly prs?: number;\n  readonly repos?: number;\n  readonly onShowYear?: () => void;\n}\n\nexport const YearCardGlass = forwardRef<HTMLDivElement, YearCardGlassProps>(\n  (\n    { year, emoji, label, commits, progress, isExpanded = false, gradient = \"blue\", prs = 0, repos = 0, onShowYear, className, onClick, ...props },\n    ref\n  ) => {\n    const expandedStyles: CSSProperties = {\n      background: \"var(--expanded-bg)\",\n      borderColor: \"var(--expanded-border)\",\n    };\n\n    const metricCardStyles: CSSProperties = {\n      background: \"var(--card-bg)\",\n      borderColor: \"var(--card-border)\",\n    };\n\n    return (\n      <InteractiveCard\n        ref={ref}\n        baseBg=\"var(--year-card-bg)\"\n        hoverBg=\"var(--card-hover-bg)\"\n        borderColor=\"var(--year-card-border)\"\n        hoverGlow=\"var(--year-card-hover-glow)\"\n        hoverLift\n        rounded=\"rounded-xl\"\n        className={cn(\"p-2.5 md:p-3 cursor-pointer\", className)}\n        onClick={onClick}\n        role=\"button\"\n        tabIndex={0}\n        onKeyDown={(e) => {\n          if (e.key === \"Enter\" || e.key === \" \") {\n            e.preventDefault();\n            onClick?.(e as unknown as React.MouseEvent<HTMLDivElement>);\n          }\n        }}\n        aria-expanded={isExpanded}\n        aria-label={`${year} year: ${label}, ${commits} commits. ${isExpanded ? 'Collapse' : 'Expand'} details`}\n        {...props}\n      >\n        <div className=\"flex items-center justify-between mb-1.5 md:mb-2\">\n          <div className=\"flex items-center gap-1.5 md:gap-2\">\n            <span className=\"font-semibold text-sm md:text-base\" style={{ color: \"var(--text-primary)\" }}>\n              {year}\n            </span>\n            <BadgeGlass>\n              {emoji} {label}\n            </BadgeGlass>\n          </div>\n          <span\n            className=\"text-xs md:text-sm flex items-center gap-0.5 md:gap-1\"\n            style={{ color: \"var(--text-secondary)\" }}\n          >\n            {commits}\n            {isExpanded ? (\n              <ChevronUp className=\"w-3.5 h-3.5 md:w-4 md:h-4\" />\n            ) : (\n              <ChevronDown className=\"w-3.5 h-3.5 md:w-4 md:h-4\" />\n            )}\n          </span>\n        </div>\n        <ProgressGlass\n          value={progress}\n          gradient={gradient}\n          size=\"sm\"\n        />\n\n        {/* Expanded Section */}\n        {isExpanded && (\n          <div\n            className=\"mt-3 pt-3 border-t space-y-3\"\n            style={expandedStyles}\n          >\n            {/* Stats Grid */}\n            <div className=\"grid grid-cols-3 gap-2 md:gap-3\">\n              <div\n                className=\"p-2 md:p-2.5 rounded-lg border text-center\"\n                style={metricCardStyles}\n              >\n                <div\n                  className=\"text-base md:text-xl font-bold\"\n                  style={{ color: \"var(--text-primary)\" }}\n                >\n                  {commits}\n                </div>\n                <div\n                  className=\"text-[10px] md:text-xs\"\n                  style={{ color: \"var(--text-muted)\" }}\n                >\n                  Commits\n                </div>\n              </div>\n              <div\n                className=\"p-2 md:p-2.5 rounded-lg border text-center\"\n                style={metricCardStyles}\n              >\n                <div\n                  className=\"text-base md:text-xl font-bold\"\n                  style={{ color: \"var(--text-primary)\" }}\n                >\n                  {prs}\n                </div>\n                <div\n                  className=\"text-[10px] md:text-xs\"\n                  style={{ color: \"var(--text-muted)\" }}\n                >\n                  PRs\n                </div>\n              </div>\n              <div\n                className=\"p-2 md:p-2.5 rounded-lg border text-center\"\n                style={metricCardStyles}\n              >\n                <div\n                  className=\"text-base md:text-xl font-bold\"\n                  style={{ color: \"var(--text-primary)\" }}\n                >\n                  {repos}\n                </div>\n                <div\n                  className=\"text-[10px] md:text-xs\"\n                  style={{ color: \"var(--text-muted)\" }}\n                >\n                  Repos\n                </div>\n              </div>\n            </div>\n\n            {/* Show Year Button */}\n            {onShowYear && (\n              <ButtonGlass\n                variant=\"primary\"\n                size=\"sm\"\n                onClick={(e) => {\n                  e.stopPropagation();\n                  onShowYear();\n                }}\n                className=\"w-full\"\n              >\n                Show repos from {year}\n              </ButtonGlass>\n            )}\n          </div>\n        )}\n      </InteractiveCard>\n    );\n  }\n);\n\nYearCardGlass.displayName = \"YearCardGlass\";\n"
+      "content": "// ========================================\n// YEAR CARD GLASS COMPONENT\n// Year card for career timeline / analytics\n// Domain-specific composite component following shadcn/ui patterns\n// ========================================\n\nimport { forwardRef, type CSSProperties, type ReactNode } from 'react';\nimport { ChevronDown, ChevronUp } from 'lucide-react';\nimport { cn } from '@/lib/utils';\nimport { BadgeGlass } from '../ui/badge-glass';\nimport { ProgressGlass } from '../specialized/progress-glass';\nimport { SparklineGlass } from '../specialized/sparkline-glass';\nimport { ButtonGlass } from '../ui/button-glass';\nimport { InteractiveCard } from '../primitives';\nimport { InsightCardGlass } from '../atomic/insight-card-glass';\nimport type { ProgressGradient } from '@/lib/variants/progress-glass-variants';\nimport '@/glass-theme.css';\n\n// ========================================\n// TYPES\n// ========================================\n\nexport interface YearCardGlassInsight {\n  readonly variant?: 'default' | 'tip' | 'highlight' | 'warning' | 'stat' | 'growth' | 'decline';\n  readonly emoji?: string;\n  readonly text: string;\n  readonly detail?: string;\n}\n\nexport interface YearCardGlassStat {\n  readonly label: string;\n  readonly value: string | number;\n  readonly icon?: ReactNode;\n}\n\nexport interface YearCardGlassProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Year to display (string or number) */\n  readonly year: string | number;\n  /** Emoji for the badge */\n  readonly emoji: string;\n  /** Label for the badge (e.g., \"Peak Year\") */\n  readonly label: string;\n  /** Primary metric value (e.g., \"629 commits\") */\n  readonly commits: string;\n  /** Progress percentage (0-100) */\n  readonly progress: number;\n  /** Whether the card is expanded to show details */\n  readonly isExpanded?: boolean;\n  /** Progress bar gradient color */\n  readonly gradient?: ProgressGradient;\n  /** Number of PRs (shown in expanded view) */\n  readonly prs?: number;\n  /** Number of repos (shown in expanded view) */\n  readonly repos?: number;\n  /** Callback when \"Show repos\" button is clicked */\n  readonly onShowYear?: () => void;\n  /** Monthly activity data for sparkline */\n  readonly sparklineData?: readonly number[];\n  /** Labels for sparkline (e.g., month names) */\n  readonly sparklineLabels?: readonly string[];\n  /** Insights to display in expanded view */\n  readonly insights?: readonly YearCardGlassInsight[];\n  /** Custom stats for expanded view (replaces default commits/prs/repos grid) */\n  readonly stats?: readonly YearCardGlassStat[];\n  /** Custom action button text */\n  readonly actionLabel?: string;\n  /** Show sparkline in collapsed view */\n  readonly showSparklineCollapsed?: boolean;\n  /** Custom value formatter for commits display */\n  readonly valueFormatter?: (commits: string) => string;\n  /** Additional content for expanded section */\n  readonly children?: ReactNode;\n}\n\n// ========================================\n// COMPONENT\n// ========================================\n\nexport const YearCardGlass = forwardRef<HTMLDivElement, YearCardGlassProps>(\n  (\n    {\n      year,\n      emoji,\n      label,\n      commits,\n      progress,\n      isExpanded = false,\n      gradient = 'blue',\n      prs = 0,\n      repos = 0,\n      onShowYear,\n      sparklineData,\n      sparklineLabels,\n      insights,\n      stats,\n      actionLabel,\n      showSparklineCollapsed = true,\n      valueFormatter,\n      children,\n      className,\n      onClick,\n      ...props\n    },\n    ref\n  ) => {\n    const expandedStyles: CSSProperties = {\n      background: 'var(--expanded-bg)',\n      borderColor: 'var(--expanded-border)',\n    };\n\n    const metricCardStyles: CSSProperties = {\n      background: 'var(--card-bg)',\n      borderColor: 'var(--card-border)',\n    };\n\n    // Format commits display\n    const displayCommits = valueFormatter ? valueFormatter(commits) : commits;\n\n    // Default stats if none provided\n    const displayStats = stats || [\n      { label: 'Commits', value: commits },\n      { label: 'PRs', value: prs },\n      { label: 'Repos', value: repos },\n    ];\n\n    // Default action label\n    const buttonLabel = actionLabel || `Show repos from ${year}`;\n\n    return (\n      <InteractiveCard\n        ref={ref}\n        baseBg=\"var(--year-card-bg)\"\n        hoverBg=\"var(--card-hover-bg)\"\n        borderColor=\"var(--year-card-border)\"\n        hoverGlow=\"var(--year-card-hover-glow)\"\n        hoverLift\n        rounded=\"rounded-xl\"\n        className={cn('w-full max-w-2xl p-2.5 md:p-3 cursor-pointer', className)}\n        onClick={onClick}\n        role=\"button\"\n        tabIndex={0}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            e.preventDefault();\n            onClick?.(e as unknown as React.MouseEvent<HTMLDivElement>);\n          }\n        }}\n        aria-expanded={isExpanded}\n        aria-label={`${year} year: ${label}, ${commits} commits. ${isExpanded ? 'Collapse' : 'Expand'} details`}\n        {...props}\n      >\n        {/* Header */}\n        <div className=\"flex items-center justify-between mb-1.5 md:mb-2\">\n          <div className=\"flex items-center gap-1.5 md:gap-2\">\n            <span\n              className=\"font-semibold text-sm md:text-base\"\n              style={{ color: 'var(--text-primary)' }}\n            >\n              {year}\n            </span>\n            <BadgeGlass>\n              {emoji} {label}\n            </BadgeGlass>\n          </div>\n          <span\n            className=\"text-xs md:text-sm flex items-center gap-0.5 md:gap-1\"\n            style={{ color: 'var(--text-secondary)' }}\n          >\n            {displayCommits}\n            {isExpanded ? (\n              <ChevronUp className=\"w-3.5 h-3.5 md:w-4 md:h-4\" aria-hidden=\"true\" />\n            ) : (\n              <ChevronDown className=\"w-3.5 h-3.5 md:w-4 md:h-4\" aria-hidden=\"true\" />\n            )}\n          </span>\n        </div>\n\n        {/* Progress + Sparkline (collapsed view) */}\n        <div className=\"flex items-center gap-2\">\n          <div className=\"flex-1\">\n            <ProgressGlass value={progress} gradient={gradient} size=\"sm\" />\n          </div>\n          {showSparklineCollapsed && sparklineData && sparklineData.length > 0 && (\n            <SparklineGlass\n              data={sparklineData}\n              labels={sparklineLabels}\n              height=\"sm\"\n              gap=\"sm\"\n              className=\"w-16 md:w-20\"\n              aria-label={`Activity trend for ${year}`}\n            />\n          )}\n        </div>\n\n        {/* Expanded Section */}\n        {isExpanded && (\n          <div className=\"mt-3 pt-3 border-t space-y-3\" style={expandedStyles}>\n            {/* Stats Grid */}\n            <div\n              className=\"grid gap-2 md:gap-3\"\n              style={{ gridTemplateColumns: `repeat(${Math.min(displayStats.length, 4)}, 1fr)` }}\n            >\n              {displayStats.map((stat, index) => (\n                <div\n                  key={index}\n                  className=\"p-2 md:p-2.5 rounded-lg border text-center\"\n                  style={metricCardStyles}\n                >\n                  {stat.icon && (\n                    <div className=\"mb-1 flex justify-center text-[var(--text-muted)]\">\n                      {stat.icon}\n                    </div>\n                  )}\n                  <div\n                    className=\"text-base md:text-xl font-bold\"\n                    style={{ color: 'var(--text-primary)' }}\n                  >\n                    {stat.value}\n                  </div>\n                  <div className=\"text-(length:--font-size-2xs) md:text-xs text-(--text-muted)\">\n                    {stat.label}\n                  </div>\n                </div>\n              ))}\n            </div>\n\n            {/* Expanded Sparkline with labels (if not shown in collapsed) */}\n            {!showSparklineCollapsed && sparklineData && sparklineData.length > 0 && (\n              <SparklineGlass\n                data={sparklineData}\n                labels={sparklineLabels}\n                showLabels={!!sparklineLabels}\n                height=\"md\"\n                gap=\"sm\"\n                highlightMax\n                className=\"w-full\"\n                aria-label={`Monthly activity for ${year}`}\n              />\n            )}\n\n            {/* Insights */}\n            {insights && insights.length > 0 && (\n              <div className=\"space-y-2\">\n                {insights.map((insight, index) => (\n                  <InsightCardGlass\n                    key={index}\n                    variant={insight.variant}\n                    emoji={insight.emoji}\n                    text={insight.text}\n                    detail={insight.detail}\n                    inline={false}\n                  />\n                ))}\n              </div>\n            )}\n\n            {/* Custom children content */}\n            {children}\n\n            {/* Show Year Button */}\n            {onShowYear && (\n              <ButtonGlass\n                variant=\"primary\"\n                size=\"sm\"\n                onClick={(e) => {\n                  e.stopPropagation();\n                  onShowYear();\n                }}\n                className=\"w-full\"\n              >\n                {buttonLabel}\n              </ButtonGlass>\n            )}\n          </div>\n        )}\n      </InteractiveCard>\n    );\n  }\n);\n\nYearCardGlass.displayName = 'YearCardGlass';\n"
     }
   ],
-  "categories": [
-    "composite"
-  ]
-}
+  "categories": ["composite"]
+}