{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "components-base-tabs",
  "title": "Tabs",
  "description": "A component for toggling between related panels on the same page.",
  "registryDependencies": [
    "@animate-ui/primitives-base-tabs"
  ],
  "files": [
    {
      "path": "registry/components/base/tabs/index.tsx",
      "content": "import * as React from 'react';\n\nimport {\n  Tabs as TabsPrimitive,\n  TabsList as TabsListPrimitive,\n  TabsTab as TabsTabPrimitive,\n  TabsPanel as TabsPanelPrimitive,\n  TabsPanels as TabsPanelsPrimitive,\n  TabsHighlight as TabsHighlightPrimitive,\n  TabsHighlightItem as TabsHighlightItemPrimitive,\n  type TabsProps as TabsPrimitiveProps,\n  type TabsListProps as TabsListPrimitiveProps,\n  type TabsTabProps as TabsTabPrimitiveProps,\n  type TabsPanelProps as TabsPanelPrimitiveProps,\n  type TabsPanelsProps as TabsPanelsPrimitiveProps,\n} from '@/components/animate-ui/primitives/base/tabs';\nimport { cn } from '@/lib/utils';\n\ntype TabsProps = TabsPrimitiveProps;\n\nfunction Tabs({ className, ...props }: TabsProps) {\n  return (\n    <TabsPrimitive\n      className={cn('flex flex-col gap-2', className)}\n      {...props}\n    />\n  );\n}\n\ntype TabsListProps = TabsListPrimitiveProps;\n\nfunction TabsList({ className, ...props }: TabsListProps) {\n  return (\n    <TabsHighlightPrimitive className=\"absolute z-0 inset-0 border border-transparent rounded-md bg-background dark:border-input dark:bg-input/30 shadow-sm\">\n      <TabsListPrimitive\n        className={cn(\n          'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',\n          className,\n        )}\n        {...props}\n      />\n    </TabsHighlightPrimitive>\n  );\n}\n\ntype TabsTabProps = TabsTabPrimitiveProps;\n\nfunction TabsTab({ className, ...props }: TabsTabProps) {\n  return (\n    <TabsHighlightItemPrimitive value={props.value} className=\"flex-1\">\n      <TabsTabPrimitive\n        className={cn(\n          \"data-[selected]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md w-full px-2 py-1 text-sm font-medium whitespace-nowrap transition-colors duration-500 ease-in-out focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n          className,\n        )}\n        {...props}\n      />\n    </TabsHighlightItemPrimitive>\n  );\n}\n\ntype TabsPanelsProps = TabsPanelsPrimitiveProps;\n\nfunction TabsPanels(props: TabsPanelsProps) {\n  return <TabsPanelsPrimitive {...props} />;\n}\n\ntype TabsPanelProps = TabsPanelPrimitiveProps;\n\nfunction TabsPanel({ className, ...props }: TabsPanelProps) {\n  return (\n    <TabsPanelPrimitive\n      className={cn('flex-1 outline-none', className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Tabs,\n  TabsList,\n  TabsTab,\n  TabsPanels,\n  TabsPanel,\n  type TabsProps,\n  type TabsListProps,\n  type TabsTabProps,\n  type TabsPanelsProps,\n  type TabsPanelProps,\n};\n",
      "type": "registry:ui",
      "target": "components/animate-ui/components/base/tabs.tsx"
    }
  ],
  "type": "registry:ui"
}