{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tabs",
  "title": "Tabs",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "https://ui.hotfix.jobs/r/recipes.json",
    "https://ui.hotfix.jobs/r/tokens.json",
    "https://ui.hotfix.jobs/r/tooltip.json",
    "https://ui.hotfix.jobs/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/components/ui/tabs.tsx",
      "content": "\"use client\";\n\nimport { Tabs as TabsPrimitive } from \"@base-ui/react/tabs\";\nimport { createContext, useContext } from \"react\";\nimport type * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { selectionFocus } from \"@/lib/recipes\";\nimport { Tooltip } from \"@/components/ui/tooltip\";\n\ntype TabsOrientation = \"horizontal\" | \"vertical\";\n\nconst TabsOrientationContext = createContext<TabsOrientation>(\"horizontal\");\n\n/* ---------------------------------- Root --------------------------------- */\n\nexport interface TabsProps\n  extends Omit<\n    React.ComponentProps<typeof TabsPrimitive.Root>,\n    \"value\" | \"defaultValue\" | \"onValueChange\"\n  > {\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  orientation?: TabsOrientation;\n}\n\nexport function Tabs({\n  value,\n  defaultValue,\n  onValueChange,\n  orientation = \"horizontal\",\n  className,\n  children,\n  ...props\n}: TabsProps): React.ReactElement {\n  return (\n    <TabsOrientationContext.Provider value={orientation}>\n      <TabsPrimitive.Root\n        value={value}\n        defaultValue={defaultValue}\n        onValueChange={\n          onValueChange ? (next) => onValueChange(String(next)) : undefined\n        }\n        orientation={orientation}\n        data-slot=\"tabs\"\n        className={cn(\n          orientation === \"vertical\" && \"flex gap-0\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </TabsPrimitive.Root>\n    </TabsOrientationContext.Provider>\n  );\n}\n\n/* --------------------------------- List --------------------------------- */\n\nexport type TabsListProps = React.ComponentProps<typeof TabsPrimitive.List>;\n\nexport function TabsList({\n  className,\n  children,\n  ...props\n}: TabsListProps): React.ReactElement {\n  const orientation = useContext(TabsOrientationContext);\n\n  return (\n    <TabsPrimitive.List\n      data-slot=\"tabs-list\"\n      data-orientation={orientation}\n      className={cn(\n        \"relative flex\",\n        orientation === \"horizontal\"\n          ? \"items-center gap-1\"\n          : \"flex-col items-stretch gap-1\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </TabsPrimitive.List>\n  );\n}\n\n/* -------------------------------- Trigger ------------------------------- */\n\nexport interface TabsTriggerProps\n  extends Omit<React.ComponentProps<typeof TabsPrimitive.Tab>, \"value\"> {\n  value: string;\n  /** Leading node (icon). */\n  icon?: React.ReactNode;\n  /** Trailing badge; numeric badges hide at 0. */\n  badge?: React.ReactNode | number;\n  /** Tooltip for a disabled tab explaining the constraint. */\n  tooltip?: React.ReactNode;\n}\n\nexport function TabsTrigger({\n  value,\n  className,\n  children,\n  disabled,\n  icon,\n  badge,\n  tooltip,\n  ...props\n}: TabsTriggerProps): React.ReactElement {\n  const showBadge = badge != null && (typeof badge !== \"number\" || badge > 0);\n\n  const trigger = (\n    <TabsPrimitive.Tab\n      value={value}\n      disabled={disabled}\n      data-slot=\"tabs-trigger\"\n      className={cn(\n        \"relative inline-flex items-center gap-2 text-small transition-colors duration-[var(--duration-state)] ease-[var(--ease-standard)] disabled:pointer-events-none disabled:opacity-50\",\n        selectionFocus,\n        \"rounded-[var(--radius-8)] px-3 py-2 text-ink-muted hover:bg-layer-hover hover:text-ink\",\n        \"data-[active]:bg-layer-hover data-[active]:text-ink data-[active]:font-medium\",\n        className,\n      )}\n      {...props}\n    >\n      {icon && (\n        <span className=\"shrink-0 [&_svg]:size-4\" data-slot=\"tabs-trigger-icon\">\n          {icon}\n        </span>\n      )}\n      {children}\n      {showBadge && (\n        <span\n          data-slot=\"tabs-trigger-badge\"\n          className=\"text-mini tabular-nums text-ink-muted\"\n        >\n          {badge}\n        </span>\n      )}\n    </TabsPrimitive.Tab>\n  );\n\n  if (tooltip) {\n    return <Tooltip content={tooltip}>{trigger}</Tooltip>;\n  }\n  return trigger;\n}\n\n/* -------------------------------- Panel -------------------------------- */\n\nexport interface TabsPanelProps\n  extends Omit<React.ComponentProps<typeof TabsPrimitive.Panel>, \"value\"> {\n  value: string;\n  /** Keep the panel mounted (hidden) when inactive. */\n  keepMounted?: boolean;\n}\n\nexport function TabsPanel({\n  value,\n  keepMounted,\n  className,\n  children,\n  ...props\n}: TabsPanelProps): React.ReactElement {\n  const orientation = useContext(TabsOrientationContext);\n  return (\n    <TabsPrimitive.Panel\n      value={value}\n      keepMounted={keepMounted}\n      data-slot=\"tabs-panel\"\n      className={cn(\n        orientation === \"horizontal\" ? \"pt-6\" : \"pl-6 flex-1 min-w-0\",\n        \"focus-visible:outline-none\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </TabsPrimitive.Panel>\n  );\n}\n\nexport { TabsPrimitive };\n",
      "type": "registry:ui",
      "target": "components/ui/tabs.tsx"
    }
  ],
  "type": "registry:ui"
}