{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tabs",
  "type": "registry:ui",
  "title": "Tabs",
  "description": "Pill or underlined tabs with one indicator that slides to the active tab.",
  "dependencies": [
    "radix-ui",
    "class-variance-authority"
  ],
  "registryDependencies": [
    "@wibo/utils",
    "@wibo/use-sliding-indicator"
  ],
  "files": [
    {
      "path": "src/components/tabs.tsx",
      "type": "registry:ui",
      "content": "import { createContext, useContext, type ComponentProps } from \"react\";\nimport { Tabs as TabsPrimitive } from \"radix-ui\";\nimport { cva } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\nimport { indicatorClass, useSlidingIndicator } from \"@/lib/use-sliding-indicator\";\n\ntype TabsVariant = \"pill\" | \"line\";\n\nconst TabsVariantContext = createContext<TabsVariant>(\"pill\");\n\n/**\n * Switch between views of the same object. `pill` is a track with a 4 % fill\n * and a darker pill under the active tab; `line` underlines the active tab.\n * In both, one indicator slides from the old tab to the new one.\n */\nfunction Tabs({ className, ...props }: ComponentProps<typeof TabsPrimitive.Root>) {\n  return (\n    <TabsPrimitive.Root\n      data-slot=\"tabs\"\n      className={cn(\"flex flex-col gap-3\", className)}\n      {...props}\n    />\n  );\n}\n\nconst tabsListVariants = cva(\"relative isolate inline-flex w-fit items-center text-muted-foreground\", {\n  variants: {\n    variant: {\n      pill: \"h-8.5 gap-0.5 rounded-control bg-foreground/4 p-0.5\",\n      line: \"h-9 w-full max-w-full justify-start gap-4 overflow-x-auto border-b border-border [scrollbar-width:none]\",\n    },\n  },\n  defaultVariants: { variant: \"pill\" },\n});\n\nconst indicatorVariants = {\n  pill: \"rounded-md bg-foreground/9\",\n  line: \"bg-foreground\",\n} as const;\n\nfunction TabsList({\n  className,\n  variant = \"pill\",\n  children,\n  ...props\n}: ComponentProps<typeof TabsPrimitive.List> & { variant?: TabsVariant }) {\n  const { containerRef, activeRef } = useSlidingIndicator<HTMLDivElement>({\n    item: \"[data-slot=tabs-trigger]\",\n    active: \"[data-slot=tabs-trigger][data-state=active]\",\n    shape: variant === \"line\" ? \"underline\" : \"fill\",\n  });\n  return (\n    <TabsVariantContext.Provider value={variant}>\n      <TabsPrimitive.List\n        ref={containerRef}\n        data-slot=\"tabs-list\"\n        data-variant={variant}\n        data-indicator=\"off\"\n        className={cn(tabsListVariants({ variant }), className)}\n        {...props}\n      >\n        <span\n          ref={activeRef}\n          aria-hidden=\"true\"\n          data-slot=\"tabs-indicator\"\n          className={cn(indicatorClass, indicatorVariants[variant])}\n        />\n        {children}\n      </TabsPrimitive.List>\n    </TabsVariantContext.Provider>\n  );\n}\n\nconst tabsTriggerVariants = cva(\n  \"press inline-flex shrink-0 cursor-pointer items-center justify-center gap-1.5 text-label font-medium whitespace-nowrap outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        pill: \"h-full rounded-md px-3 in-data-[indicator=off]:data-[state=active]:bg-foreground/9\",\n        line: \"-mb-px h-full border-b-2 border-transparent px-0.5 in-data-[indicator=off]:data-[state=active]:border-foreground\",\n      },\n    },\n    defaultVariants: { variant: \"pill\" },\n  },\n);\n\nfunction TabsTrigger({ className, ...props }: ComponentProps<typeof TabsPrimitive.Trigger>) {\n  const variant = useContext(TabsVariantContext);\n  return (\n    <TabsPrimitive.Trigger\n      data-slot=\"tabs-trigger\"\n      className={cn(tabsTriggerVariants({ variant }), className)}\n      {...props}\n    />\n  );\n}\n\nfunction TabsContent({ className, ...props }: ComponentProps<typeof TabsPrimitive.Content>) {\n  return (\n    <TabsPrimitive.Content\n      data-slot=\"tabs-content\"\n      className={cn(\"flex-1 outline-none data-[state=active]:animate-fade-in\", className)}\n      {...props}\n    />\n  );\n}\n\nexport { Tabs, TabsContent, TabsList, TabsTrigger };\n"
    }
  ]
}