{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tabs",
  "type": "registry:ui",
  "dependencies": [
    "@base-ui/react",
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "tabs.tsx",
      "target": "components/ui/tabs.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\nimport { Tabs as Base } from \"@base-ui/react/tabs\";\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type TabsVariant = \"pill\" | \"underline\";\n\nexport type TabsProps = Base.Root.Props;\n\nconst TabsRoot = React.forwardRef<HTMLDivElement, TabsProps>((props, ref) => (\n  <Base.Root ref={ref} {...props} />\n));\nTabsRoot.displayName = \"Tabs\";\n\nexport type TabsListProps = React.ComponentPropsWithoutRef<typeof Base.List> & {\n  variant?: TabsVariant;\n};\n\nexport const TabsList = React.forwardRef<HTMLDivElement, TabsListProps>(\n  (\n    { className, activateOnFocus = true, variant = \"pill\", children, ...props },\n    ref,\n  ) => (\n    <Base.List\n      ref={ref}\n      activateOnFocus={activateOnFocus}\n      className={cn(\n        \"relative isolate flex data-[orientation=vertical]:flex-col\",\n        variant === \"underline\"\n          ? \"gap-4 border-b border-border data-[orientation=vertical]:border-b-0 data-[orientation=vertical]:border-r\"\n          : \"gap-1\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <TabsIndicator variant={variant} />\n    </Base.List>\n  ),\n);\nTabsList.displayName = \"TabsList\";\n\nexport type TabsTabProps = React.ComponentPropsWithoutRef<typeof Base.Tab>;\n\nexport const TabsTab = React.forwardRef<HTMLButtonElement, TabsTabProps>(\n  ({ className, ...props }, ref) => (\n    <Base.Tab\n      ref={ref}\n      className={cn(\n        \"relative z-10 rounded-md px-3 py-2 text-sm text-muted outline-none\",\n        \"transition-control duration-fast ease-soft motion-reduce:transition-none\",\n        \"hover:text-ink data-[active]:text-ink\",\n        \"focus-visible:ring-focus\",\n        \"active:scale-[0.98] motion-reduce:transform-none\",\n        \"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50\",\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nTabsTab.displayName = \"TabsTab\";\n\nexport type TabsPanelProps = React.ComponentPropsWithoutRef<typeof Base.Panel>;\n\nexport const TabsPanel = React.forwardRef<HTMLDivElement, TabsPanelProps>(\n  ({ className, ...props }, ref) => (\n    <Base.Panel\n      ref={ref}\n      className={cn(\"pt-4 text-sm text-ink outline-none\", className)}\n      {...props}\n    />\n  ),\n);\nTabsPanel.displayName = \"TabsPanel\";\n\ntype TabsIndicatorProps = React.ComponentPropsWithoutRef<\n  typeof Base.Indicator\n> & { variant?: TabsVariant };\n\nconst TabsIndicator = React.forwardRef<HTMLSpanElement, TabsIndicatorProps>(\n  ({ className, variant = \"pill\", ...props }, ref) =>\n    variant === \"underline\" ? (\n      <Base.Indicator\n        ref={ref}\n        className={cn(\n          \"absolute bottom-0 z-0 h-px w-(--active-tab-width) translate-x-(--active-tab-left) hairline-accent transition-layout duration-slow ease-spring motion-reduce:transition-none\",\n          \"data-[orientation=vertical]:top-0 data-[orientation=vertical]:right-0 data-[orientation=vertical]:bottom-auto data-[orientation=vertical]:h-(--active-tab-height) data-[orientation=vertical]:w-px data-[orientation=vertical]:translate-x-0 data-[orientation=vertical]:translate-y-(--active-tab-top)\",\n          className,\n        )}\n        {...props}\n      />\n    ) : (\n      <Base.Indicator\n        ref={ref}\n        className={cn(\n          \"absolute top-0 left-0 z-0 h-(--active-tab-height) w-(--active-tab-width) translate-x-(--active-tab-left) translate-y-(--active-tab-top) rounded-md bg-surface-2 shadow-raised transition-layout duration-slow ease-spring motion-reduce:transition-none\",\n          className,\n        )}\n        {...props}\n      />\n    ),\n);\nTabsIndicator.displayName = \"TabsIndicator\";\n\nexport const Tabs = Object.assign(TabsRoot, {\n  List: TabsList,\n  Tab: TabsTab,\n  Panel: TabsPanel,\n});\n"
    }
  ]
}