{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tabs",
  "title": "Tabs",
  "author": "AniBT <https://anibt.net>",
  "description": "AniBT tabs: 32px tabs over a stitched line; the current tab wears the tilted washi tape, the site's one \"you are here\" mark.",
  "dependencies": [
    "class-variance-authority",
    "radix-ui"
  ],
  "registryDependencies": [
    "@anibt/theme"
  ],
  "files": [
    {
      "path": "registry/anibt/ui/tabs.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Tabs as TabsPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\n/**\n * Tabs — the AniBT 「贴纸手账」 tab strip (Radix Tabs).\n *\n * 32px tabs (13/600 `--anibt-ink2`, the pink wash under the pointer) over a\n * stitched line; the current tab turns to ink and wears a strip of washi tape\n * under its label, tilted 1.5° — the site's one \"you are here\" mark. The\n * recipes are `anibt-tabs`, `anibt-tab` and `anibt-tab-on` from\n * `@anibt/theme`. A disabled tab keeps a readable muted ink.\n *\n * The strip scrolls sideways instead of wrapping: a tab is one line, and\n * eight of them on a 390px phone have to go somewhere.\n *\n * For a sunk track with a sticker thumb (a view switch, a filter) use\n * `SegmentedControl` or `ToggleGroup`: that is a choice, not navigation.\n * `TabsList`'s `variant` (`default` / `line`) exists only so code written for\n * shadcn's tabs keeps compiling; both draw the taped strip.\n */\n\nfunction Tabs({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>) {\n  return <TabsPrimitive.Root data-slot=\"tabs\" className={cn(\"flex min-w-0 flex-col gap-3\", className)} {...props} />\n}\n\nconst tabsListVariants = cva(\n  \"anibt-tabs w-full justify-start overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\",\n  {\n    variants: {\n      variant: {\n        default: \"\",\n        line: \"\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction TabsList({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.List> & 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, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {\n  return (\n    <TabsPrimitive.Trigger\n      data-slot=\"tabs-trigger\"\n      className={cn(\n        \"anibt-tab cursor-pointer justify-center outline-hidden data-[state=active]:anibt-tab-on\",\n        \"focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring focus-visible:outline-solid\",\n        \"disabled:pointer-events-none disabled:text-muted-foreground\",\n        \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[state=active]:[&_svg:not([class*='text-'])]:text-anibt-mark\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {\n  return (\n    <TabsPrimitive.Content\n      data-slot=\"tabs-content\"\n      className={cn(\n        \"min-w-0 flex-1 rounded-[10px] outline-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:outline-solid\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }\n",
      "type": "registry:ui"
    }
  ],
  "categories": [
    "navigation"
  ],
  "type": "registry:ui"
}