{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tabs-subtle",
  "title": "TabsSubtle (legacy)",
  "description": "Compatibility adapter for Tabs' segment variant. New integrations should use Tabs with variant=\"segment\".",
  "dependencies": [
    "@base-ui/react",
    "framer-motion"
  ],
  "registryDependencies": [
    "https://zeron-ui.vercel.app/r/surfaces.json",
    "https://zeron-ui.vercel.app/r/tabs.json",
    "utils",
    "https://zeron-ui.vercel.app/r/springs.json",
    "https://zeron-ui.vercel.app/r/icon-context.json",
    "https://zeron-ui.vercel.app/r/use-proximity-hover.json"
  ],
  "files": [
    {
      "path": "src/components/ui/tabs-subtle.tsx",
      "content": "\"use client\";\n\nimport {\n  Children,\n  forwardRef,\n  isValidElement,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport type { IconComponent } from \"@/lib/icon-context\";\nimport { cn } from \"@/lib/utils\";\nimport { Tabs, TabsList, TabItem, type TabBadge } from \"@/components/ui/tabs\";\n\n/**\n * @deprecated Use <Tabs variant=\"segment\">. This wrapper preserves the\n * index-based API for installed projects while delegating all tab interaction\n * and animation to the unified Tabs component.\n */\ninterface TabsSubtleProps extends Omit<HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n  children: ReactNode;\n  selectedIndex: number;\n  onSelect: (index: number) => void;\n  idPrefix?: string;\n  activeLabel?: boolean;\n}\n\nconst TabsSubtle = forwardRef<HTMLDivElement, TabsSubtleProps>(\n  (\n    { children, selectedIndex, onSelect, idPrefix, activeLabel = false, className, ...props },\n    ref\n  ) => {\n    const tabItems = Children.map(children, (child) => {\n      if (!isValidElement<TabsSubtleItemProps>(child)) return child;\n      const { index, ...itemProps } = child.props;\n      return (\n        <TabItem\n          key={child.key}\n          value={String(index)}\n          id={idPrefix ? `${idPrefix}-tab-${index}` : undefined}\n          aria-controls={idPrefix ? `${idPrefix}-panel-${index}` : undefined}\n          {...itemProps}\n        />\n      );\n    });\n\n    return (\n      <Tabs\n        value={String(selectedIndex)}\n        onValueChange={(value) => onSelect(Number(value))}\n        variant=\"segment\"\n      >\n        <TabsList\n          ref={ref}\n          activationMode=\"manual\"\n          labelVisibility={activeLabel ? \"active\" : \"all\"}\n          className={className}\n          {...props}\n        >\n          {tabItems}\n        </TabsList>\n      </Tabs>\n    );\n  }\n);\n\nTabsSubtle.displayName = \"TabsSubtle\";\n\ninterface TabsSubtleItemProps extends HTMLAttributes<HTMLButtonElement> {\n  icon?: IconComponent;\n  label: string;\n  badge?: TabBadge;\n  index: number;\n}\n\nconst TabsSubtleItem = forwardRef<HTMLButtonElement, TabsSubtleItemProps>(\n  ({ index, ...props }, ref) => (\n    <TabItem ref={ref} value={String(index)} {...props} />\n  )\n);\n\nTabsSubtleItem.displayName = \"TabsSubtleItem\";\n\ninterface TabsSubtlePanelProps extends HTMLAttributes<HTMLDivElement> {\n  index: number;\n  selectedIndex: number;\n  idPrefix: string;\n  children: ReactNode;\n}\n\n/**\n * @deprecated Keep panels inside the unified <Tabs> root with <TabPanel>.\n * This remains for the legacy external-panel layout.\n */\nconst TabsSubtlePanel = forwardRef<HTMLDivElement, TabsSubtlePanelProps>(\n  ({ index, selectedIndex, idPrefix, children, className, ...props }, ref) => {\n    const isSelected = selectedIndex === index;\n\n    return (\n      <div\n        ref={ref}\n        id={`${idPrefix}-panel-${index}`}\n        role=\"tabpanel\"\n        aria-labelledby={`${idPrefix}-tab-${index}`}\n        hidden={!isSelected}\n        tabIndex={-1}\n        className={cn(\"outline-none\", className)}\n        {...props}\n      >\n        {isSelected && children}\n      </div>\n    );\n  }\n);\n\nTabsSubtlePanel.displayName = \"TabsSubtlePanel\";\n\nexport { TabsSubtle, TabsSubtleItem, TabsSubtlePanel };\nexport type { TabsSubtleProps, TabsSubtleItemProps, TabsSubtlePanelProps };\nexport default TabsSubtle;\n",
      "type": "registry:ui",
      "target": "components/ui/tabs-subtle.tsx"
    }
  ],
  "type": "registry:ui"
}