{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tabs",
  "title": "Tabs",
  "description": "Composable tabbed navigation with horizontal and vertical layouts and complete keyboard interaction.",
  "dependencies": [
    "@base-ui/react"
  ],
  "files": [
    {
      "path": "registry/rivetui/components/tabs/tabs.tsx",
      "content": "\"use client\";\n\nimport { Tabs as TabsPrimitive } from \"@base-ui/react/tabs\";\n\nimport { cn } from \"@/lib/utils\";\n\nfunction Tabs({ className, ...props }: TabsPrimitive.Root.Props) {\n  return (\n    <TabsPrimitive.Root\n      data-slot=\"tabs\"\n      className={cn(\n        \"flex w-full min-w-0 flex-col overflow-hidden border border-border bg-background sm:data-[orientation=vertical]:grid sm:data-[orientation=vertical]:grid-cols-[minmax(8rem,12rem)_minmax(0,1fr)] sm:data-[orientation=vertical]:items-stretch\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction TabsList({ className, activateOnFocus = true, ...props }: TabsPrimitive.List.Props) {\n  return (\n    <TabsPrimitive.List\n      data-slot=\"tabs-list\"\n      activateOnFocus={activateOnFocus}\n      className={cn(\n        \"flex min-h-11 w-full max-w-full items-stretch overflow-x-auto overflow-y-hidden border-b border-border bg-muted/15 data-[orientation=vertical]:min-h-0 data-[orientation=vertical]:flex-col data-[orientation=vertical]:overflow-visible sm:data-[orientation=vertical]:border-r sm:data-[orientation=vertical]:border-b-0\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {\n  return (\n    <TabsPrimitive.Tab\n      data-slot=\"tabs-trigger\"\n      className={cn(\n        \"relative inline-flex min-h-11 flex-none cursor-pointer items-center justify-center gap-2 border-r border-border px-4 font-mono text-[0.6875rem] font-medium tracking-[0.12em] whitespace-nowrap text-muted-foreground uppercase outline-none transition-[background-color,box-shadow,color,opacity] duration-100 after:pointer-events-none after:absolute after:inset-x-0 after:-bottom-px after:h-px after:bg-transparent hover:not-data-disabled:bg-muted/50 hover:not-data-disabled:text-foreground focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring/40 data-active:bg-background data-active:text-foreground data-active:after:bg-background data-disabled:pointer-events-none data-disabled:opacity-40 data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start data-[orientation=vertical]:border-r-0 data-[orientation=vertical]:border-b data-[orientation=vertical]:after:hidden data-[orientation=vertical]:last:border-b-0 motion-reduce:transition-none\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {\n  return (\n    <TabsPrimitive.Panel\n      data-slot=\"tabs-content\"\n      className={cn(\n        \"min-w-0 bg-background p-4 outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring/40\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Tabs, TabsContent, TabsList, TabsTrigger };\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}