{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tabs",
  "title": "Tabs",
  "description": "A component for toggling between related panels on the same page.",
  "dependencies": [
    "@base-ui/react",
    "class-variance-authority"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/tabs.tsx",
      "content": "\"use client\";\n\nimport { Tabs as BaseTabs } from \"@base-ui/react/tabs\";\nimport { cn } from \"@/registry/lib/utils\";\n\nfunction Tabs({\n  className,\n  orientation = \"horizontal\",\n  ...props\n}: BaseTabs.Root.Props) {\n  return (\n    <BaseTabs.Root\n      className={cn(\n        \"flex gap-2 flex-col data-[orientation=vertical]:flex-row\",\n        className,\n      )}\n      data-slot=\"tabs\"\n      orientation={orientation}\n      {...props}\n    />\n  );\n}\n\nfunction TabsList({ className, children, ...props }: BaseTabs.List.Props) {\n  return (\n    <BaseTabs.List\n      className={cn(\n        \"relative z-0 inline-flex\",\n        \"data-[orientation=horizontal]:flex-row data-[orientation=vertical]:flex-col\",\n        className,\n      )}\n      data-slot=\"tabs-list\"\n      {...props}\n    >\n      {children}\n    </BaseTabs.List>\n  );\n}\nfunction TabIndicator({ className, ...props }: BaseTabs.Indicator.Props) {\n  return (\n    <BaseTabs.Indicator\n      className={cn(\n        \"absolute z-0 w-(--active-tab-width) h-(--active-tab-height) transition-all duration-300 translate-x-(--active-tab-left) -translate-y-(--active-tab-bottom)\",\n        className,\n      )}\n      data-slot=\"tab-indicator\"\n      {...props}\n    />\n  );\n}\n\nfunction TabsTab({ className, ...props }: BaseTabs.Tab.Props) {\n  return (\n    <BaseTabs.Tab\n      className={cn(\n        \"relative flex z-1 items-center justify-center gap-1.5 select-none\",\n        \"break-keep whitespace-nowrap h-[calc(100%-1px)]\",\n        \"rounded-md px-2 py-1.5\",\n        \"text-sm font-medium text-muted-foreground data-active:text-foreground\",\n        \"transition-colors duration-200 ease-in\",\n        \"data-disabled:pointer-events-none data-disabled:opacity-50\",\n        \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        \"data-[orientation=horizontal]:flex-1 data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start\",\n        \"relative before:absolute before:inset-x-0 before:inset-y-1.5 before:rounded-md\",\n        \"focus-visible:outline focus-visible:outline-ring focus-visible:ring-4 focus-visible:ring-ring/10\",\n        className,\n      )}\n      data-slot=\"tabs-tab\"\n      {...props}\n    />\n  );\n}\n\nfunction TabsPanel({ className, ...props }: BaseTabs.Panel.Props) {\n  return (\n    <BaseTabs.Panel\n      className={cn(\n        \"flex-1 rounded-md\",\n        \"focus-visible:outline focus-visible:outline-ring focus-visible:ring-4 focus-visible:ring-ring/10\",\n        className,\n      )}\n      data-slot=\"tabs-panel\"\n      {...props}\n    />\n  );\n}\n\nfunction TabsListContent({\n  className,\n  children,\n  ...props\n}: BaseTabs.List.Props) {\n  return (\n    <BaseTabs.List\n      className={cn(\n        \"relative z-0 inline-flex items-center rounded-md gap-1 px-1.5 bg-muted text-muted-foreground min-h-9\",\n        \"data-[orientation=horizontal]:flex-row\",\n        \"data-[orientation=vertical]:flex-col data-[orientation=vertical]:h-fit data-[orientation=vertical]:py-1.5\",\n        className,\n      )}\n      data-slot=\"tabs-list\"\n      {...props}\n    >\n      {children}\n      <TabIndicator\n        className={cn(\n          \"rounded-md bg-secondary\",\n          \"top-1/2 -translate-y-1/2 left-0 data-[orientation=horizontal]:h-[calc(100%-8px)]\",\n          \"data-[orientation=vertical]:left-1/2 data-[orientation=vertical]:-translate-x-1/2 data-[orientation=vertical]:top-0 data-[orientation=vertical]:translate-y-(--active-tab-top)\",\n        )}\n        data-slot=\"tab-indicator\"\n      />\n    </BaseTabs.List>\n  );\n}\n\nexport {\n  Tabs,\n  TabsList,\n  TabsTab,\n  TabsPanel,\n  TabIndicator,\n  // Composite component\n  TabsListContent,\n};\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}