{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tabs",
  "title": "Tabs",
  "description": "Tabs with layoutId pill morph + panel layout height (Motion.dev layout).",
  "dependencies": [
    "@base-ui/react",
    "class-variance-authority",
    "motion"
  ],
  "registryDependencies": [
    "@atroui/utils",
    "@atroui/motion"
  ],
  "files": [
    {
      "path": "registry/default/ui/tabs.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Tabs as TabsPrimitive } from \"@base-ui/react/tabs\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { LayoutGroup, motion, useReducedMotion } from \"motion/react\"\n\nimport { easeOutSoft, layoutTween } from \"@/lib/motion\"\nimport { cn } from \"@/lib/utils\"\n\nconst TabsPillContext = React.createContext(\"atro-tabs-pill\")\nconst TabsListVariantContext = React.createContext<\"default\" | \"line\">(\n  \"default\"\n)\n\n/** Peer-switch panel — opacity + y (Zajno fade+transform), easeOutSoft. */\nconst panelFade = {\n  duration: 0.2,\n  ease: easeOutSoft,\n} as const\n\nconst PILL_CLASS =\n  \"absolute z-0 inset-0 bg-background shadow-sm ring-1 ring-border-subtle/70 \" +\n  \"group-data-[variant=line]/tabs-list:inset-x-2 group-data-[variant=line]/tabs-list:top-auto \" +\n  \"group-data-[variant=line]/tabs-list:bottom-0 group-data-[variant=line]/tabs-list:h-0.5 \" +\n  \"group-data-[variant=line]/tabs-list:bg-foreground \" +\n  \"group-data-[variant=line]/tabs-list:shadow-none group-data-[variant=line]/tabs-list:ring-0\"\n\nfunction withoutDomAnimationHandlers<T extends Record<string, unknown>>(\n  props: T\n) {\n  const {\n    onAnimationStart: _onAnimationStart,\n    onDrag: _onDrag,\n    onDragStart: _onDragStart,\n    onDragEnd: _onDragEnd,\n    ...rest\n  } = props\n  return rest\n}\n\n/**\n * Tabs — Motion.dev Base UI pattern:\n * LayoutGroup + layoutId pill morph + layout height on panel.\n * Mira muted list / soft-rect chrome.\n */\nfunction Tabs({\n  className,\n  orientation = \"horizontal\",\n  ...props\n}: TabsPrimitive.Root.Props) {\n  const layoutId = React.useId()\n\n  return (\n    <TabsPillContext.Provider value={`${layoutId}-pill`}>\n      <LayoutGroup id={layoutId}>\n        <TabsPrimitive.Root\n          data-slot=\"tabs\"\n          data-orientation={orientation}\n          className={cn(\n            \"group/tabs flex gap-2 data-horizontal:flex-col\",\n            className\n          )}\n          {...props}\n        />\n      </LayoutGroup>\n    </TabsPillContext.Provider>\n  )\n}\n\nconst tabsListVariants = cva(\n  \"relative inline-flex w-fit items-center justify-center rounded-[var(--radius)] p-0.5 text-muted-foreground group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-muted/50\",\n        line: \"gap-1 rounded-none bg-transparent p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction TabsList({\n  className,\n  variant = \"default\",\n  ...props\n}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {\n  return (\n    <TabsListVariantContext.Provider value={variant ?? \"default\"}>\n      <TabsPrimitive.List\n        data-slot=\"tabs-list\"\n        data-variant={variant}\n        className={cn(tabsListVariants({ variant }), className)}\n        {...props}\n      />\n    </TabsListVariantContext.Provider>\n  )\n}\n\nfunction TabsTrigger({\n  className,\n  children,\n  ...props\n}: TabsPrimitive.Tab.Props) {\n  const reduce = useReducedMotion()\n  const pillId = React.useContext(TabsPillContext)\n  const listVariant = React.useContext(TabsListVariantContext)\n  // borderRadius via style so layoutId scale-correction stays soft-rect / line-flat\n  const pillStyle = {\n    borderRadius: listVariant === \"line\" ? 0 : \"calc(var(--radius) - 2px)\",\n  } as const\n\n  return (\n    <TabsPrimitive.Tab\n      data-slot=\"tabs-trigger\"\n      {...props}\n      className={cn(\n        \"relative z-[1] inline-flex h-8 flex-1 items-center justify-center gap-1.5 rounded-[calc(var(--radius)-2px)] px-3 text-sm font-medium whitespace-nowrap text-muted-foreground outline-none transition-colors duration-200\",\n        \"hover:text-foreground\",\n        \"focus-visible:ring-2 focus-visible:ring-ring/20\",\n        \"disabled:pointer-events-none disabled:opacity-50\",\n        \"data-active:text-foreground\",\n        \"group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start\",\n        \"group-data-[variant=line]/tabs-list:rounded-none group-data-[variant=line]/tabs-list:px-2\",\n        \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        \"motion-reduce:transition-none\",\n        className\n      )}\n      render={(htmlProps, state) => (\n        <button type=\"button\" {...htmlProps}>\n          {state.active\n            ? reduce\n              ? (\n                  <span className={PILL_CLASS} style={pillStyle} aria-hidden />\n                )\n              : (\n                  <motion.span\n                    layoutId={pillId}\n                    className={PILL_CLASS}\n                    style={pillStyle}\n                    transition={layoutTween}\n                    aria-hidden\n                  />\n                )\n            : null}\n          <span className=\"relative z-[1] inline-flex items-center justify-center gap-1.5\">\n            {children}\n          </span>\n        </button>\n      )}\n    />\n  )\n}\n\n/**\n * No-op kept for API compatibility. The active mark morphs via\n * `layoutId` on TabsTrigger (theme-toggle pill pattern).\n */\nfunction TabsIndicator(_props: TabsPrimitive.Indicator.Props) {\n  return null\n}\n\nfunction TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {\n  const reduce = useReducedMotion()\n\n  return (\n    <TabsPrimitive.Panel\n      data-slot=\"tabs-content\"\n      {...props}\n      className={cn(\"flex-1 outline-none overflow-hidden\", className)}\n      render={\n        reduce\n          ? undefined\n          : (htmlProps, state) => (\n              <motion.div\n                {...withoutDomAnimationHandlers(\n                  htmlProps as Record<string, unknown>\n                )}\n                layout\n                initial={false}\n                animate={{\n                  opacity: state.hidden ? 0 : 1,\n                  y: state.hidden ? 4 : 0,\n                }}\n                transition={{\n                  opacity: panelFade,\n                  y: panelFade,\n                  layout: layoutTween,\n                }}\n              />\n            )\n      }\n    />\n  )\n}\n\nexport {\n  Tabs,\n  TabsContent,\n  TabsIndicator,\n  TabsList,\n  TabsTrigger,\n  tabsListVariants,\n}\n",
      "type": "registry:ui",
      "target": "components/ui/tabs.tsx"
    }
  ],
  "type": "registry:ui"
}