{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tabs",
  "title": "Tabs",
  "author": "SAASTRO <https://saastro.io>",
  "description": "Pestañas sobre Base UI, con indicador deslizante.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/ui/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(\"flex flex-col gap-3\", className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * La lista lleva el indicador deslizante de Base UI: una sola pieza que se\n * mueve, en vez de pintar el fondo activo en cada pestaña. Se posiciona con\n * las variables que expone el propio primitivo.\n */\nfunction TabsList({ className, children, ...props }: TabsPrimitive.List.Props) {\n  return (\n    <TabsPrimitive.List\n      data-slot=\"tabs-list\"\n      className={cn(\n        \"relative isolate inline-flex h-8 w-fit items-center justify-center rounded-lg bg-muted p-0.5 text-muted-foreground\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <TabsPrimitive.Indicator\n        data-slot=\"tabs-indicator\"\n        className=\"absolute top-1/2 left-0 -z-10 h-[calc(100%-0.25rem)] w-(--active-tab-width) -translate-y-1/2 translate-x-(--active-tab-left) rounded-[min(var(--radius-md),8px)] bg-background shadow-sm transition-all duration-200 ease-out\"\n      />\n    </TabsPrimitive.List>\n  );\n}\n\nfunction TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {\n  return (\n    <TabsPrimitive.Tab\n      data-slot=\"tabs-trigger\"\n      className={cn(\n        \"inline-flex h-7 flex-1 items-center justify-center gap-1.5 rounded-[min(var(--radius-md),8px)] px-2.5 text-sm font-medium whitespace-nowrap transition-colors outline-none select-none focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 data-active:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\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(\"flex-1 outline-none\", className)}\n      {...props}\n    />\n  );\n}\n\nexport { Tabs, TabsContent, TabsList, TabsTrigger };\n",
      "type": "registry:ui",
      "target": "@ui/tabs.tsx"
    }
  ],
  "meta": {
    "group": "Navigation",
    "iframeHeight": "320px"
  },
  "docs": "Primitivo sobre Base UI. En Base UI se compone con `render={<a/>}`, no con `asChild`. OJO: `render` NO funciona dentro de un fichero .astro.",
  "categories": [
    "ui",
    "navigation"
  ],
  "type": "registry:ui"
}