{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tabs",
  "title": "Tabs",
  "description": "Tabbed interface for organizing content into selectable panels.",
  "dependencies": [
    "@base-ui/react",
    "class-variance-authority",
    "lucide-react",
    "motion"
  ],
  "files": [
    {
      "path": "packages/ui/src/tabs.tsx",
      "content": "\"use client\";\n\nimport { Tabs as TabsPrimitive } from \"@base-ui/react/tabs\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  ChevronLeft as ChevronLeftIcon,\n  ChevronRight as ChevronRightIcon,\n} from \"lucide-react\";\nimport { motion, useReducedMotion } from \"motion/react\";\nimport * as React from \"react\";\nimport { cn } from \"./utils\";\n\ntype TabsValue = string | number | null;\ntype TabsListVariant = \"default\" | \"line\";\n\nconst TabsActiveContext = React.createContext<TabsValue>(null);\nconst TabsTriggerContext = React.createContext<{ isActive: boolean }>({\n  isActive: false,\n});\n\n// Slightly bouncier + longer than the previous values so the FLIP scale on\n// the layoutId pill is spread across more frames — matches the v0 reference\n// and makes the mid-morph stretching less prominent.\nconst MORPH_SPRING = { type: \"spring\", duration: 0.4, bounce: 0.15 } as const;\n\n// =============================================================================\n// Tabs (Root)\n// =============================================================================\nexport interface TabsProps extends TabsPrimitive.Root.Props {}\n\nfunction Tabs({\n  className,\n  orientation = \"horizontal\",\n  value,\n  defaultValue,\n  onValueChange,\n  ...props\n}: TabsProps) {\n  const [internalValue, setInternalValue] = React.useState<TabsValue>(\n    defaultValue ?? null\n  );\n  const activeValue = value ?? internalValue;\n\n  const handleValueChange: TabsPrimitive.Root.Props[\"onValueChange\"] = (\n    next,\n    eventDetails\n  ) => {\n    setInternalValue(next);\n    onValueChange?.(next, eventDetails);\n  };\n\n  return (\n    <TabsActiveContext.Provider value={activeValue}>\n      <TabsPrimitive.Root\n        className={cn(\n          \"group/tabs flex gap-2 data-[orientation=horizontal]:flex-col\",\n          className\n        )}\n        data-slot=\"tabs\"\n        defaultValue={defaultValue}\n        onValueChange={handleValueChange}\n        orientation={orientation}\n        value={value}\n        {...props}\n      />\n    </TabsActiveContext.Provider>\n  );\n}\n\n// =============================================================================\n// TabsList\n// =============================================================================\nconst tabsListVariants = cva(\n  \"group/tabs-list relative inline-flex w-fit items-center justify-center rounded-lg p-1 text-muted-foreground data-[shape=pill]:rounded-full data-[variant=line]:rounded-none group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-muted\",\n        line: \"gap-1 bg-transparent\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n);\n\nconst TabsListContext = React.createContext<{\n  morphing: boolean;\n  variant: TabsListVariant;\n  pillId: string;\n}>({\n  morphing: false,\n  variant: \"default\",\n  pillId: \"\",\n});\n\nexport interface TabsListProps\n  extends TabsPrimitive.List.Props,\n    VariantProps<typeof tabsListVariants> {\n  /**\n   * Collapse inactive triggers to icon-only and reveal the label only on the\n   * active tab. Each trigger should pair an icon with `<TabsTriggerLabel>`.\n   */\n  morphing?: boolean;\n  /** Enable horizontal scroll with gradient fades and arrow navigation */\n  scrollable?: boolean;\n  /**\n   * Shape of the tab list and its triggers\n   * @default \"rounded\"\n   */\n  shape?: \"rounded\" | \"pill\";\n}\n\nfunction TabsList({\n  className,\n  variant = \"default\",\n  shape = \"rounded\",\n  scrollable,\n  morphing = false,\n  children,\n  ...props\n}: TabsListProps) {\n  const pillId = React.useId();\n  const contextValue = React.useMemo(\n    () => ({ morphing, variant: variant ?? \"default\", pillId }),\n    [morphing, variant, pillId]\n  );\n\n  if (scrollable) {\n    return (\n      <TabsListContext.Provider value={contextValue}>\n        <ScrollableTabsList\n          className={className}\n          morphing={morphing}\n          shape={shape}\n          variant={variant}\n          {...props}\n        >\n          {children}\n        </ScrollableTabsList>\n      </TabsListContext.Provider>\n    );\n  }\n\n  // In morphing mode the active pill is a motion.span layoutId={pillId}\n  // rendered inside the active TabsTrigger — suppress Base UI's CSS indicator.\n  return (\n    <TabsListContext.Provider value={contextValue}>\n      <TabsPrimitive.List\n        className={cn(tabsListVariants({ variant }), className)}\n        data-morphing={morphing || undefined}\n        data-shape={shape}\n        data-slot=\"tabs-list\"\n        data-variant={variant}\n        {...props}\n      >\n        {!morphing && <TabsIndicator />}\n        {children}\n      </TabsPrimitive.List>\n    </TabsListContext.Provider>\n  );\n}\n\n// =============================================================================\n// ScrollableTabsList (internal)\n// =============================================================================\n/** Pixels to scroll per arrow click in scrollable tabs */\nconst SCROLL_AMOUNT = 150;\n\nfunction ScrollableTabsList({\n  className,\n  variant = \"default\",\n  shape = \"rounded\",\n  morphing = false,\n  children,\n  ...props\n}: Omit<TabsListProps, \"scrollable\">) {\n  const scrollRef = React.useRef<HTMLDivElement | null>(null);\n  const [canScrollLeft, setCanScrollLeft] = React.useState(false);\n  const [canScrollRight, setCanScrollRight] = React.useState(false);\n\n  const updateScrollState = React.useCallback(() => {\n    const el = scrollRef.current;\n    if (!el) {\n      return;\n    }\n    setCanScrollLeft(el.scrollLeft > 0);\n    setCanScrollRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 1);\n  }, []);\n\n  React.useEffect(() => {\n    const el = scrollRef.current;\n    if (!el) {\n      return;\n    }\n\n    updateScrollState();\n\n    el.addEventListener(\"scroll\", updateScrollState, { passive: true });\n    const observer = new ResizeObserver(updateScrollState);\n    observer.observe(el);\n\n    // Also observe the inner list so we detect when items are added/removed\n    const list = el.firstElementChild;\n    if (list) {\n      observer.observe(list);\n    }\n\n    return () => {\n      el.removeEventListener(\"scroll\", updateScrollState);\n      observer.disconnect();\n    };\n  }, [updateScrollState]);\n\n  const scrollLeft = () => {\n    scrollRef.current?.scrollBy({ left: -SCROLL_AMOUNT, behavior: \"smooth\" });\n  };\n\n  const scrollRight = () => {\n    scrollRef.current?.scrollBy({ left: SCROLL_AMOUNT, behavior: \"smooth\" });\n  };\n\n  return (\n    <div className=\"relative\" data-slot=\"tabs-list-wrapper\">\n      {canScrollLeft && (\n        <button\n          aria-label=\"Scroll tabs left\"\n          className=\"absolute top-0 left-0 z-10 flex h-full cursor-pointer items-center justify-center pr-1 pl-0.5\"\n          data-slot=\"tabs-scroll-button\"\n          onClick={scrollLeft}\n          type=\"button\"\n        >\n          <ChevronLeftIcon className=\"size-4 text-muted-foreground\" />\n        </button>\n      )}\n\n      <div\n        className=\"overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\"\n        data-scrollable\n        data-slot=\"tabs-list-scroll\"\n        ref={scrollRef}\n      >\n        <TabsPrimitive.List\n          className={cn(tabsListVariants({ variant }), className)}\n          data-morphing={morphing || undefined}\n          data-shape={shape}\n          data-slot=\"tabs-list\"\n          data-variant={variant}\n          {...props}\n        >\n          {!morphing && <TabsIndicator />}\n          {children}\n        </TabsPrimitive.List>\n      </div>\n\n      {canScrollRight && (\n        <button\n          aria-label=\"Scroll tabs right\"\n          className=\"absolute top-0 right-0 z-10 flex h-full cursor-pointer items-center justify-center pr-0.5 pl-1\"\n          data-slot=\"tabs-scroll-button\"\n          onClick={scrollRight}\n          type=\"button\"\n        >\n          <ChevronRightIcon className=\"size-4 text-muted-foreground\" />\n        </button>\n      )}\n    </div>\n  );\n}\n\n// =============================================================================\n// TabsTrigger\n// =============================================================================\nexport interface TabsTriggerProps extends TabsPrimitive.Tab.Props {}\n\nfunction TabsTrigger({\n  className,\n  children,\n  value,\n  ...props\n}: TabsTriggerProps) {\n  const { morphing, variant, pillId } = React.useContext(TabsListContext);\n  const activeValue = React.useContext(TabsActiveContext);\n  const isActive = activeValue === value;\n  const shouldReduceMotion = useReducedMotion();\n\n  const triggerContext = React.useMemo(() => ({ isActive }), [isActive]);\n\n  return (\n    <TabsTriggerContext.Provider value={triggerContext}>\n      <TabsPrimitive.Tab\n        className={cn(\n          // Base styles\n          \"group/tabs-trigger relative z-[1] inline-flex h-8 flex-1 cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent px-2 py-0.5 font-medium text-muted-foreground text-sm transition-colors hover:text-foreground focus-visible:outline-2 focus-visible:outline-ring/50 focus-visible:outline-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed aria-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n          // Shape-aware styles\n          \"group-data-[shape=pill]/tabs-list:rounded-full group-data-[shape=pill]/tabs-list:px-3\",\n          // Orientation-aware styles\n          \"group-data-[orientation=vertical]/tabs:h-8 group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:flex-initial group-data-[orientation=vertical]/tabs:justify-start\",\n          // Active state (text color only — background/shadow handled by indicator/pill)\n          \"data-active:text-foreground dark:data-active:text-foreground\",\n          // Morphing: triggers size to content so the active one can grow to\n          // fit its label. Width animation lives on TabsTriggerLabel (motion).\n          // Gap collapses to 0 — the label carries its own left padding so the\n          // icon→label spacing animates with the motion spring.\n          \"data-[morphing]:flex-initial data-[morphing]:gap-0\",\n          className\n        )}\n        data-morphing={morphing || undefined}\n        data-slot=\"tabs-trigger\"\n        value={value}\n        {...props}\n      >\n        {morphing && isActive && (\n          <motion.span\n            aria-hidden\n            className={cn(\n              \"absolute -z-[1]\",\n              // Default variant in morphing mode: always a fully-rounded pill,\n              // no shadow. `rounded-full` is self-correcting under FLIP scale\n              // (corners stay clamped at 50% of the shorter axis), and dropping\n              // the shadow avoids the shadow-stretch artifact mid-morph.\n              variant === \"default\" &&\n                \"inset-0 rounded-full bg-background dark:bg-input-bg\",\n              variant === \"line\" &&\n                \"right-0 bottom-0 left-0 h-0.5 bg-foreground\"\n            )}\n            data-slot=\"tabs-morphing-pill\"\n            layoutId={pillId}\n            transition={shouldReduceMotion ? { duration: 0 } : MORPH_SPRING}\n          />\n        )}\n        {children}\n      </TabsPrimitive.Tab>\n    </TabsTriggerContext.Provider>\n  );\n}\n\n// =============================================================================\n// TabsTriggerLabel\n// =============================================================================\nexport interface TabsTriggerLabelProps extends React.ComponentProps<\"span\"> {}\n\n/**\n * Wraps a tab's text label so it can collapse to width 0 when the parent\n * `TabsList` has `morphing` enabled and the trigger is not active. The active\n * tab springs from 0 to natural width via `motion`, and the icon→label\n * spacing lives inside the label so it animates together with the width.\n *\n * Outside `morphing` mode this renders a plain `<span>`.\n */\nfunction TabsTriggerLabel({\n  className,\n  children,\n  ...props\n}: TabsTriggerLabelProps) {\n  const { morphing } = React.useContext(TabsListContext);\n  const { isActive } = React.useContext(TabsTriggerContext);\n  const shouldReduceMotion = useReducedMotion();\n\n  if (!morphing) {\n    return (\n      <span className={className} data-slot=\"tabs-trigger-label\" {...props}>\n        {children}\n      </span>\n    );\n  }\n\n  return (\n    <motion.span\n      animate={{\n        width: isActive ? \"auto\" : 0,\n        opacity: isActive ? 1 : 0,\n      }}\n      className={cn(\n        \"inline-block overflow-hidden whitespace-nowrap\",\n        className\n      )}\n      data-slot=\"tabs-trigger-label\"\n      initial={false}\n      transition={shouldReduceMotion ? { duration: 0 } : MORPH_SPRING}\n      {...(props as React.ComponentProps<typeof motion.span>)}\n    >\n      <span className=\"pl-1.5\">{children}</span>\n    </motion.span>\n  );\n}\n\n// =============================================================================\n// TabsIndicator\n// =============================================================================\nexport interface TabsIndicatorProps extends TabsPrimitive.Indicator.Props {}\n\nfunction TabsIndicator({ className, ...props }: TabsIndicatorProps) {\n  return (\n    <TabsPrimitive.Indicator\n      className={cn(\n        // Positioning via Base UI CSS custom properties\n        \"absolute top-[var(--active-tab-top)] left-[var(--active-tab-left)] h-[var(--active-tab-height)] w-[var(--active-tab-width)]\",\n        // Sliding animation (reduced motion handled globally by base.css)\n        \"transition-[top,right,bottom,left,width,height] duration-200 ease-out\",\n        // Default variant: pill/card sliding behind active tab\n        \"group-data-[variant=default]/tabs-list:rounded-md group-data-[variant=default]/tabs-list:bg-background group-data-[variant=default]/tabs-list:shadow-sm\",\n        \"group-data-[variant=default]/tabs-list:group-data-[shape=pill]/tabs-list:rounded-full\",\n        \"dark:group-data-[variant=default]/tabs-list:bg-input-bg\",\n        // Line variant (horizontal): 2px bar at bottom\n        \"group-data-[variant=line]/tabs-list:data-[orientation=horizontal]:top-auto group-data-[variant=line]/tabs-list:data-[orientation=horizontal]:bottom-0 group-data-[variant=line]/tabs-list:data-[orientation=horizontal]:h-0.5\",\n        \"group-data-[variant=line]/tabs-list:bg-foreground\",\n        // Line variant (vertical): 2px bar on the right edge\n        \"group-data-[variant=line]/tabs-list:data-[orientation=vertical]:-right-1 group-data-[variant=line]/tabs-list:data-[orientation=vertical]:left-auto group-data-[variant=line]/tabs-list:data-[orientation=vertical]:w-0.5\",\n        className\n      )}\n      data-slot=\"tabs-indicator\"\n      renderBeforeHydration\n      {...props}\n    />\n  );\n}\n\n// =============================================================================\n// TabsContent\n// =============================================================================\nexport interface TabsContentProps extends TabsPrimitive.Panel.Props {}\n\nfunction TabsContent({ className, ...props }: TabsContentProps) {\n  return (\n    <TabsPrimitive.Panel\n      className={cn(\"flex-1 text-sm outline-none\", className)}\n      data-slot=\"tabs-content\"\n      {...props}\n    />\n  );\n}\n\nexport {\n  Tabs,\n  TabsContent,\n  TabsIndicator,\n  TabsList,\n  TabsTrigger,\n  TabsTriggerLabel,\n  tabsListVariants,\n};\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}