{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tabs",
  "title": "Tabs",
  "description": "Switches between views of one subject in place.",
  "dependencies": [
    "@base-ui/react@^1.9.0"
  ],
  "registryDependencies": [
    "https://sproutboat.com/ikada/r/theme.json",
    "https://sproutboat.com/ikada/r/cn.json"
  ],
  "files": [
    {
      "path": "registry/ikada/ui/tabs.tsx",
      "content": "\"use client\";\n\nimport { Tabs as BaseTabs } from \"@base-ui/react/tabs\";\nimport type { ComponentProps } from \"react\";\nimport { cn, focusRing, pebble, traySurface, type WithClass } from \"@/components/ikada/lib/cn\";\n\n/** Switches between views of one subject in place. Compose with TabsList, TabsTab and TabsPanel. */\nexport function Tabs({ className, ...props }: WithClass<ComponentProps<typeof BaseTabs.Root>>) {\n  return <BaseTabs.Root data-slot=\"tabs\" className={cn(\"flex flex-col\", className)} {...props} />;\n}\n\n/**\n * A recessed 10px tray (padding 4) holding 6px tabs. The raised pebble, shared with\n * SegmentedControl, is one element that slides to the active tab on the snappy spring.\n */\nexport function TabsList({ className, children, ...props }: WithClass<ComponentProps<typeof BaseTabs.List>>) {\n  return (\n    <BaseTabs.List\n      data-slot=\"tabs-list\"\n      className={cn(\n        \"relative inline-flex max-w-full gap-0.5 self-start overflow-x-auto p-1 [scrollbar-width:none]\",\n        traySurface,\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <BaseTabs.Indicator\n        className={cn(\n          pebble,\n          \"h-(--active-tab-height) w-(--active-tab-width) translate-x-(--active-tab-left) translate-y-(--active-tab-top) rounded-sm\",\n        )}\n      />\n    </BaseTabs.List>\n  );\n}\n\n/** One tab. Its label stays above the pebble. */\nexport function TabsTab({ className, ...props }: WithClass<ComponentProps<typeof BaseTabs.Tab>>) {\n  return (\n    <BaseTabs.Tab\n      data-slot=\"tabs-tab\"\n      className={cn(\n        \"relative z-10 flex h-8 shrink-0 items-center whitespace-nowrap rounded-sm px-3 text-sb-base font-semibold text-fg-muted\",\n        \"transition-colors duration-(--sb-duration-hover) ease-hover\",\n        \"hover:text-fg data-active:text-fg data-disabled:cursor-not-allowed data-disabled:opacity-50\",\n        \"before:absolute before:inset-x-0 before:top-1/2 before:h-10 before:-translate-y-1/2 before:content-[''] pointer-fine:before:hidden\",\n        \"pointer-coarse:min-h-11\",\n        focusRing,\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** The content shown for the matching tab. */\nexport function TabsPanel({ className, ...props }: WithClass<ComponentProps<typeof BaseTabs.Panel>>) {\n  return (\n    <BaseTabs.Panel\n      data-slot=\"tabs-panel\"\n      className={cn(\n        \"pt-4 outline-hidden focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n",
      "type": "registry:ui",
      "target": "@components/ikada/tabs.tsx"
    }
  ],
  "categories": [
    "navigation"
  ],
  "type": "registry:ui"
}