{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tabs-glass",
  "type": "registry:ui",
  "title": "Tabs Glass",
  "description": "TabsGlass Component (Radix UI based)",
  "dependencies": [
    "@radix-ui/react-tabs",
    "react",
    "shadcn-glass-ui"
  ],
  "registryDependencies": [
    "cn"
  ],
  "files": [
    {
      "path": "components/glass/ui/tabs-glass.tsx",
      "type": "registry:component",
      "content": "/* eslint-disable react-refresh/only-export-components */\n/**\n * TabsGlass Component (Radix UI based)\n *\n * Glass-themed tab navigation built on Radix UI primitives with:\n * - 100% shadcn/ui type compatibility\n * - Theme-aware styling (glass/light/aurora)\n * - Active tab indicator\n * - Full keyboard navigation (Arrow keys, Home, End)\n * - Support for orientation, dir, activationMode\n *\n * @since v2.2.6 - Migrated to Radix UI primitives for full type compatibility\n */\n\nimport * as React from 'react';\nimport * as TabsPrimitive from '@radix-ui/react-tabs';\nimport { cn } from '@/lib/utils';\nimport '@/glass-theme.css';\n\n// ========================================\n// TYPES\n// ========================================\n\n/**\n * Legacy TabItem interface for backwards compatibility\n */\nexport interface TabItem {\n  readonly id: string;\n  readonly label: string;\n}\n\n/**\n * Props for TabsGlass Root component\n *\n * Extends Radix UI Tabs.Root props for 100% shadcn/ui compatibility.\n * All Radix props are supported including: value, defaultValue, onValueChange,\n * orientation, dir, activationMode.\n *\n * **Type Compatibility (v2.3.1+):**\n * - Extends `React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>`\n * - No more `as unknown as` type assertions needed\n * - Full IntelliSense for all Radix props\n *\n * **New props from Radix:**\n * - `orientation`: 'horizontal' | 'vertical' - Tab layout direction\n * - `dir`: 'ltr' | 'rtl' - Text direction for RTL support\n * - `activationMode`: 'automatic' | 'manual' - Tab activation behavior\n *\n * @accessibility\n * - **Keyboard Navigation:** Arrow keys navigate between tabs (respects orientation)\n * - **Focus Management:** Visible focus ring using CSS variables\n * - **Screen Readers:** Radix UI handles all ARIA attributes automatically\n * - **RTL Support:** Full RTL support via `dir` prop\n *\n * @example\n * ```tsx\n * // Basic usage\n * <Tabs defaultValue=\"tab1\">\n *   <TabsList>\n *     <TabsTrigger value=\"tab1\">Tab 1</TabsTrigger>\n *     <TabsTrigger value=\"tab2\">Tab 2</TabsTrigger>\n *   </TabsList>\n *   <TabsContent value=\"tab1\">Content 1</TabsContent>\n *   <TabsContent value=\"tab2\">Content 2</TabsContent>\n * </Tabs>\n *\n * // Vertical tabs\n * <Tabs defaultValue=\"tab1\" orientation=\"vertical\">\n *   <TabsList>\n *     <TabsTrigger value=\"tab1\">Tab 1</TabsTrigger>\n *     <TabsTrigger value=\"tab2\">Tab 2</TabsTrigger>\n *   </TabsList>\n *   <TabsContent value=\"tab1\">Content 1</TabsContent>\n * </Tabs>\n *\n * // Manual activation (click required, not focus)\n * <Tabs defaultValue=\"tab1\" activationMode=\"manual\">\n *   ...\n * </Tabs>\n * ```\n *\n * @since v2.3.0 - Added shadcn/ui compatible separate exports\n * @since v2.2.6 - Migrated to Radix UI primitives\n */\nexport type TabsRootProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>;\n\n/**\n * Props for TabsList component\n */\nexport type TabsListProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>;\n\n/**\n * Props for TabsTrigger component\n */\nexport type TabsTriggerProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>;\n\n/**\n * Props for TabsContent component\n */\nexport type TabsContentProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>;\n\n// ========================================\n// COMPONENTS\n// ========================================\n\n/**\n * TabsRoot - Root container for tabs\n */\nfunction TabsRoot({ className, ...props }: TabsRootProps) {\n  return (\n    <TabsPrimitive.Root data-slot=\"tabs\" className={cn('tabs-glass-root', className)} {...props} />\n  );\n}\n\n/**\n * TabsList - Container for tab triggers\n */\nconst TabsList = React.forwardRef<React.ElementRef<typeof TabsPrimitive.List>, TabsListProps>(\n  ({ className, ...props }, ref) => (\n    <TabsPrimitive.List\n      ref={ref}\n      data-slot=\"tabs-list\"\n      className={cn(\n        'inline-flex gap-0.5 md:gap-1 p-0.5 md:p-1 rounded-xl',\n        'bg-(--tab-container-bg) border border-(--tab-container-border)',\n        className\n      )}\n      {...props}\n    />\n  )\n);\n\nTabsList.displayName = 'TabsList';\n\n/**\n * TabsTrigger - Individual tab button\n */\nconst TabsTrigger = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Trigger>,\n  TabsTriggerProps\n>(({ className, children, ...props }, ref) => (\n  <TabsPrimitive.Trigger\n    ref={ref}\n    data-slot=\"tabs-trigger\"\n    className={cn(\n      'relative px-2.5 py-1.5 md:px-4 md:py-2 rounded-lg',\n      'text-xs md:text-sm font-medium',\n      'transition-[background-color,color,opacity,box-shadow] duration-300',\n      // Inactive state\n      'bg-(--tab-bg) text-(--text-secondary)',\n      // Active state\n      'data-[state=active]:bg-(--tab-active-bg) data-[state=active]:text-(--tab-active-text)',\n      // Focus state\n      'focus-visible:outline-none focus-visible:shadow-(--focus-glow)',\n      // Disabled state\n      'disabled:opacity-50 disabled:cursor-not-allowed',\n      // Indicator (using ::after pseudo-element)\n      'after:absolute after:bottom-0 after:left-1/2 after:-translate-x-1/2',\n      'after:w-6 md:after:w-8 after:h-0.5 after:rounded-full',\n      'after:bg-(--tab-indicator)',\n      'after:opacity-0 data-[state=active]:after:opacity-100',\n      'after:transition-opacity after:duration-300',\n      className\n    )}\n    {...props}\n  >\n    {children}\n  </TabsPrimitive.Trigger>\n));\n\nTabsTrigger.displayName = 'TabsTrigger';\n\n/**\n * TabsContent - Content panel for a tab\n */\nconst TabsContent = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Content>,\n  TabsContentProps\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.Content\n    ref={ref}\n    data-slot=\"tabs-content\"\n    className={cn(\n      'animate-in fade-in-0 duration-200 outline-none',\n      'focus-visible:outline-none',\n      className\n    )}\n    {...props}\n  />\n));\n\nTabsContent.displayName = 'TabsContent';\n\n// ========================================\n// COMPOUND COMPONENT EXPORT\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 * @since v2.2.6 - Migrated to Radix UI primitives\n */\nexport const TabsGlass = {\n  Root: TabsRoot,\n  List: TabsList,\n  Trigger: TabsTrigger,\n  Content: TabsContent,\n};\n\n// ========================================\n// SHADCN/UI COMPATIBLE EXPORTS\n// ========================================\n\n/**\n * Tabs - shadcn/ui compatible alias for TabsGlass.Root\n */\nexport const Tabs = TabsRoot;\n\nexport { TabsList, TabsTrigger, TabsContent };\n"
    }
  ],
  "categories": [
    "ui"
  ],
  "cssVars": {
    "light": {
      "--glass-bg": "rgba(255, 255, 255, 0.1)",
      "--glass-border": "rgba(255, 255, 255, 0.2)",
      "--blur-sm": "8px",
      "--blur-md": "16px",
      "--blur-lg": "24px"
    },
    "dark": {
      "--glass-bg": "rgba(255, 255, 255, 0.05)",
      "--glass-border": "rgba(255, 255, 255, 0.1)",
      "--blur-sm": "8px",
      "--blur-md": "16px",
      "--blur-lg": "24px"
    }
  }
}