{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tabs",
  "dependencies": ["@base-ui/react"],
  "registryDependencies": ["utils"],
  "files": [
    {
      "path": "registry/ui/tabs.tsx",
      "content": "'use client';\n\nimport { Tabs as TabsPrimitive } from '@base-ui/react/tabs';\nimport * as React from 'react';\n\nimport { cn } from '@/registry/lib/utils';\n\ntype TabsVariant = 'soft' | 'solid';\n\nconst TabsContext = React.createContext<{ variant: TabsVariant }>({ variant: 'soft' });\n\nfunction Tabs({ className, ...props }: TabsPrimitive.Root.Props) {\n  return (\n    <TabsPrimitive.Root\n      data-slot=\"tabs\"\n      className={cn(\n        'flex flex-col gap-2 data-[orientation=vertical]:flex-row data-[orientation=vertical]:items-start',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction TabsSurface({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      data-slot=\"tabs-surface\"\n      className={cn('w-fit rounded-md bg-hover/50 p-1 dark:bg-surface-2', className)}\n      {...props}\n    />\n  );\n}\n\nfunction TabsList({\n  className,\n  variant = 'soft',\n  track = true,\n  transition = false,\n  children,\n  ...props\n}: TabsPrimitive.List.Props & {\n  variant?: TabsVariant;\n  track?: boolean;\n  transition?: boolean;\n}) {\n  const isSoft = variant === 'soft';\n\n  return (\n    <TabsContext.Provider value={{ variant }}>\n      <TabsPrimitive.List\n        data-slot=\"tabs-list\"\n        data-variant={variant}\n        className={cn(\n          'relative flex w-fit items-center',\n          'data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-start',\n          isSoft && 'gap-0.5',\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <TabsPrimitive.Indicator\n          data-slot=\"tabs-indicator\"\n          data-variant={variant}\n          className={cn(\n            'pointer-events-none absolute',\n            transition &&\n              'motion-safe:transition-[translate,width,height] motion-safe:duration-200 motion-safe:ease-in-out',\n            [\n              // Anchor to bottom-left; translate to exact tab position for both orientations\n              'bottom-0 left-0 z-0 rounded-sm',\n              'h-(--active-tab-height) w-(--active-tab-width)',\n              'translate-x-(--active-tab-left) -translate-y-(--active-tab-bottom)',\n              isSoft ? 'bg-active' : 'bg-fill',\n            ]\n          )}\n        />\n      </TabsPrimitive.List>\n    </TabsContext.Provider>\n  );\n}\n\nfunction TabsTab({ className, ...props }: TabsPrimitive.Tab.Props) {\n  const { variant } = React.useContext(TabsContext);\n  const isSoft = variant === 'soft';\n  return (\n    <TabsPrimitive.Tab\n      data-slot=\"tabs-tab\"\n      data-variant={variant}\n      className={cn(\n        'relative z-10 inline-flex cursor-default select-none items-center justify-center rounded-sm',\n        'data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start',\n        'whitespace-nowrap px-2 py-1 text-sm font-medium',\n        'text-secondary hover:not-data-active:text-primary data-active:transition-colors',\n        isSoft ? 'data-active:text-primary' : 'data-active:text-on-fill',\n        'focus-visible:outline-2 focus-visible:outline-focus focus-visible:outline-offset-2',\n        'data-disabled:pointer-events-none data-disabled:text-disabled',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction TabsPanel({ className, ...props }: TabsPrimitive.Panel.Props) {\n  return (\n    <TabsPrimitive.Panel\n      data-slot=\"tabs-panel\"\n      className={cn('text-sm outline-none', className)}\n      {...props}\n    />\n  );\n}\n\nexport { Tabs, TabsSurface, TabsList, TabsTab, TabsPanel };\nexport type { TabsVariant };\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}