{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tabs",
  "title": "Tabs",
  "description": "A tabs for switching between views, with a plain tab bar variant.",
  "dependencies": [
    "class-variance-authority",
    "@base-ui/react"
  ],
  "registryDependencies": [
    "@cupertinoui/macos-theme"
  ],
  "files": [
    {
      "path": "registry/macos/ui/tabs.tsx",
      "content": "\"use client\"\n\nimport { Tabs as TabsPrimitive } from \"@base-ui/react/tabs\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\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-3 data-[orientation=horizontal]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n// `default` is a macOS tabs; `line` is a plain text tab bar.\nconst tabsListVariants = cva(\n  \"group/tabs-list inline-flex w-fit items-center justify-center text-mac-label group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"rounded-[6px] bg-mac-control p-0.5 group-data-[orientation=horizontal]/tabs:h-6\",\n        line: \"gap-4 bg-transparent\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction TabsList({\n  className,\n  variant = \"default\",\n  ...props\n}: TabsPrimitive.List.Props &\n  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({\n  className,\n  ...props\n}: TabsPrimitive.Tab.Props) {\n  return (\n    <TabsPrimitive.Tab\n      data-slot=\"tabs-trigger\"\n      className={cn(\n        \"relative inline-flex h-full flex-1 cursor-default items-center justify-center gap-1 px-2.5 text-mac-body font-medium whitespace-nowrap text-mac-label select-none outline-none focus-visible:mac-focus-ring data-disabled:pointer-events-none data-disabled:text-mac-label-tertiary group-data-[orientation=vertical]/tabs:h-5 group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5\",\n        // Tabs: the selected segment is filled with the accent color.\n        \"group-data-[variant=default]/tabs-list:rounded-[5px] group-data-[variant=default]/tabs-list:data-active:bg-mac-accent group-data-[variant=default]/tabs-list:data-active:text-white group-data-[inactive]/window:group-data-[variant=default]/tabs-list:data-active:bg-mac-fill-primary group-data-[inactive]/window:group-data-[variant=default]/tabs-list:data-active:text-mac-label\",\n        // Thin dividers between unselected segments\n        \"group-data-[variant=default]/tabs-list:not-first:before:absolute group-data-[variant=default]/tabs-list:not-first:before:top-1/2 group-data-[variant=default]/tabs-list:not-first:before:left-0 group-data-[variant=default]/tabs-list:not-first:before:h-3.5 group-data-[variant=default]/tabs-list:not-first:before:w-px group-data-[variant=default]/tabs-list:not-first:before:-translate-y-1/2 group-data-[variant=default]/tabs-list:not-first:before:bg-mac-label-tertiary group-data-[variant=default]/tabs-list:data-active:before:hidden group-data-[variant=default]/tabs-list:[[data-active]+&]:before:hidden\",\n        // Line tabs\n        \"group-data-[variant=line]/tabs-list:px-0 group-data-[variant=line]/tabs-list:pb-1 group-data-[variant=line]/tabs-list:text-mac-label-secondary group-data-[variant=line]/tabs-list:hover:text-mac-label group-data-[variant=line]/tabs-list:data-active:text-mac-label\",\n        \"after:absolute after:bg-mac-accent after:opacity-0 group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-0 group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TabsContent({\n  className,\n  ...props\n}: 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, TabsList, TabsTrigger, TabsContent, tabsListVariants }\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}