{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tabs",
  "title": "Tabs",
  "description": "Primary and secondary tabs with the sliding active indicator.",
  "dependencies": [
    "@base-ui/react@^1.7.0",
    "class-variance-authority@^0.7.1"
  ],
  "registryDependencies": [
    "https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json",
    "https://guillermo-rebolledo.github.io/materialcn/r/utils.json"
  ],
  "files": [
    {
      "path": "src/components/ui/tabs.tsx",
      "content": "\"use client\"\n\nimport { Tabs as TabsPrimitive } from \"@base-ui/react/tabs\"\nimport { type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\nimport { tabsListVariants } from \"./tabs-variants\"\n\nfunction Tabs({\n  className,\n  orientation = \"horizontal\",\n  ...props\n}: TabsPrimitive.Root.Props) {\n  return (\n    <TabsPrimitive.Root\n      data-slot=\"tabs\"\n      data-orientation={orientation}\n      orientation={orientation}\n      className={cn(\n        \"group/tabs flex gap-2 data-horizontal:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TabsList({\n  className,\n  variant = \"default\",\n  ...props\n}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {\n  return (\n    <TabsPrimitive.List\n      data-slot=\"tabs-list\"\n      data-variant={variant}\n      className={cn(tabsListVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction TabsTrigger({ className, children, ...props }: TabsPrimitive.Tab.Props) {\n  return (\n    <TabsPrimitive.Tab\n      data-slot=\"tabs-trigger\"\n      className={cn(\n        \"relative inline-flex flex-1 cursor-pointer items-center justify-center gap-2 whitespace-nowrap\",\n        \"text-m3-title-sm text-muted-foreground outline-none\",\n        \"transition-[color,background-color] duration-(--m3-spring-effects-fast-duration) ease-(--m3-spring-effects-fast)\",\n        \"group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start\",\n        \"hover:not-data-disabled:text-m3-on-surface\",\n        \"focus-visible:outline-m3-secondary focus-visible:outline-3 focus-visible:-outline-offset-3\",\n        \"disabled:pointer-events-none disabled:text-m3-on-surface/38 aria-disabled:pointer-events-none aria-disabled:text-m3-on-surface/38\",\n        \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-6\",\n        // Segmented: the active tab becomes a filled pill.\n        \"group-data-[variant=default]/tabs-list:h-full group-data-[variant=default]/tabs-list:rounded-m3-full group-data-[variant=default]/tabs-list:px-4\",\n        \"group-data-[variant=default]/tabs-list:data-active:bg-m3-secondary-container group-data-[variant=default]/tabs-list:data-active:text-m3-on-secondary-container\",\n        \"group-data-[variant=segmented]/tabs-list:h-full group-data-[variant=segmented]/tabs-list:rounded-m3-full group-data-[variant=segmented]/tabs-list:px-4\",\n        \"group-data-[variant=segmented]/tabs-list:data-active:bg-m3-secondary-container group-data-[variant=segmented]/tabs-list:data-active:text-m3-on-secondary-container\",\n        // Primary / secondary rows are 48dp; the kit's icon-and-label tab grows\n        // to 64dp with the icon stacked 2dp above the label (10 / 8 padding).\n        \"group-data-[variant=line]/tabs-list:h-12 group-data-[variant=line]/tabs-list:px-4 group-data-[variant=line]/tabs-list:has-[svg]:h-16\",\n        \"group-data-[variant=primary]/tabs-list:h-12 group-data-[variant=primary]/tabs-list:px-4 group-data-[variant=primary]/tabs-list:has-[svg]:h-16\",\n        \"group-data-[variant=secondary]/tabs-list:h-12 group-data-[variant=secondary]/tabs-list:px-4 group-data-[variant=secondary]/tabs-list:has-[svg]:h-16\",\n        \"group-data-[variant=line]/tabs-list:data-active:text-m3-primary\",\n        \"group-data-[variant=primary]/tabs-list:data-active:text-m3-primary\",\n        \"group-data-[variant=secondary]/tabs-list:data-active:text-foreground\",\n        // Secondary indicator: 2dp, square, spanning the whole trigger.\n        \"after:absolute after:bg-m3-primary after:opacity-0\",\n        \"after:transition-opacity after:duration-(--m3-spring-effects-fast-duration)\",\n        \"group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-0 group-data-horizontal/tabs:after:h-0.5\",\n        \"group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:right-0 group-data-vertical/tabs:after:w-0.5\",\n        \"group-data-[variant=secondary]/tabs-list:data-active:after:opacity-100\",\n        className\n      )}\n      {...props}\n    >\n      <span\n        data-slot=\"tabs-trigger-label\"\n        className={cn(\n          \"relative flex items-center gap-2\",\n          \"group-has-[svg]/tabs-list:flex-col group-has-[svg]/tabs-list:gap-0.5\",\n          \"group-data-vertical/tabs:flex-row\",\n          // Primary indicator: a 3dp rounded pill as wide as the label, not\n          // the trigger (kit: a 20dp shape under a 24dp label box).\n          \"after:pointer-events-none after:absolute after:rounded-t-m3-full after:bg-m3-primary after:opacity-0\",\n          \"after:transition-opacity after:duration-(--m3-spring-effects-fast-duration)\",\n          \"group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:-bottom-3.5 group-data-horizontal/tabs:after:h-[3px]\",\n          \"group-data-horizontal/tabs:group-has-[svg]/tabs-list:after:-bottom-[9px]\",\n          \"group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-4 group-data-vertical/tabs:after:w-[3px] group-data-vertical/tabs:after:rounded-l-m3-full group-data-vertical/tabs:after:rounded-tr-none\",\n          \"in-data-[variant=line]:in-data-active:after:opacity-100\",\n          \"in-data-[variant=primary]:in-data-active:after:opacity-100\",\n        )}\n      >\n        {children}\n      </span>\n    </TabsPrimitive.Tab>\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 text-m3-body-md text-m3-on-surface outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }\n",
      "type": "registry:ui"
    },
    {
      "path": "src/components/ui/tabs-variants.ts",
      "content": "/**\n * Variant definitions live beside the component rather than inside it.\n *\n * React Fast Refresh only treats a module as a hot boundary when every export\n * either is a component or keeps a stable identity across re-evaluations.\n * `cva()` builds a fresh object each time its module runs, so exporting it from\n * the component file demoted that file to a full page reload on every edit.\n * Re-exported from here, the binding's identity survives edits to the component.\n */\n\nimport { cva } from \"class-variance-authority\"\n\n/**\n * Material 3 tabs.\n *\n * `line` is M3's primary tab: full-width, no container, and an active indicator\n * that is a 3dp pill sitting on the divider beneath the row. `default` keeps\n * shadcn's segmented look, restyled onto the surface ramp.\n */\nexport const tabsListVariants = cva(\n  \"group/tabs-list inline-flex w-fit items-center justify-center rounded-m3-full p-1 text-muted-foreground group-data-horizontal/tabs:h-12 group-data-horizontal/tabs:data-[variant=line]:h-fit group-data-horizontal/tabs:data-[variant=primary]:h-fit group-data-horizontal/tabs:data-[variant=secondary]:h-fit group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:w-full data-[variant=line]:rounded-none data-[variant=line]:p-0 data-[variant=line]:border-b data-[variant=line]:border-m3-outline-variant data-[variant=primary]:w-full data-[variant=primary]:rounded-none data-[variant=primary]:border-b data-[variant=primary]:border-m3-outline-variant data-[variant=primary]:p-0 data-[variant=secondary]:w-full data-[variant=secondary]:rounded-none data-[variant=secondary]:border-b data-[variant=secondary]:border-m3-outline-variant data-[variant=secondary]:p-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-m3-surface-container-highest\",\n        segmented: \"bg-m3-surface-container-highest\",\n        line: \"gap-0 bg-transparent\",\n        primary: \"gap-0 bg-transparent\",\n        secondary: \"gap-0 bg-transparent\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n",
      "type": "registry:ui"
    }
  ],
  "categories": [
    "navigation"
  ],
  "type": "registry:ui"
}