{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tabs",
  "title": "Tabs",
  "description": "Condensed uppercase labels with a heavy accent bar that slides between tabs.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "https://spotcheckui.com/r/spotcheck-base.json"
  ],
  "files": [
    {
      "path": "registry/spotcheck/components/spotcheck/tabs.tsx",
      "content": "\"use client\"\n\nimport { Tabs as BaseTabs } from \"@base-ui/react/tabs\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport const Tabs = BaseTabs.Root\n\ntype ClassName = { className?: string }\n\nexport function TabsList({ className, children, ...props }: Omit<BaseTabs.List.Props, \"className\"> & ClassName) {\n  return (\n    <BaseTabs.List\n      className={cn(\"border-ink relative flex [scrollbar-width:none] overflow-x-auto border-b-(length:--rule)\", className)}\n      {...props}\n    >\n      {children}\n      <BaseTabs.Indicator\n        renderBeforeHydration\n        className=\"bg-accent-ink absolute bottom-0 left-(--active-tab-left) h-[5px] w-(--active-tab-width) transition-[left,width] duration-300 ease-[cubic-bezier(.2,.8,.2,1)] motion-reduce:transition-none\"\n      />\n    </BaseTabs.List>\n  )\n}\n\nexport function TabsTab({ className, ...props }: Omit<BaseTabs.Tab.Props, \"className\"> & ClassName) {\n  return (\n    <BaseTabs.Tab\n      className={cn(\n        \"spotcheck-heading spotcheck-focus text-mute data-active:text-ink cursor-pointer px-3.5 pt-2 pb-2.5 text-lg whitespace-nowrap -outline-offset-2\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport function TabsPanel({ className, ...props }: Omit<BaseTabs.Panel.Props, \"className\"> & ClassName) {\n  return <BaseTabs.Panel className={cn(\"spotcheck-focus pt-3.5 font-(family-name:--f-body)\", className)} {...props} />\n}\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "core"
  ],
  "type": "registry:component"
}