1d:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsPage"] 1e:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsTitle"] 1f:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsDescription"] 20:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsBody"] 21:I[26731,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"ComponentPreview"] 22:I[25325,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"CodeTabs"] 23:T126b,"use client"; import type { ComponentProps, ReactElement, ReactNode } from "react"; import * as TabsPrimitive from "@radix-ui/react-tabs"; import { cn } from "@/registry/tier-2-primitives/lib/cn"; import { focusRing } from "@/registry/tier-2-primitives/lib/cva"; import { IconSlot } from "@/registry/tier-2-primitives/icon-slot"; /** * Tabs. * * Radix Tabs, which implements the WAI-ARIA tabs pattern: Tab reaches the * tablist once, then Left/Right move between tabs and wrap, Home/End jump to * the ends. Only the selected tab is in the tab order, so a person doesn't have * to tab through nine tabs to reach the panel. * * TWO WAYS TO USE IT * `{(id) => …}` is the short form and covers most * screens. For panels that differ structurally, use the composition parts * (`TabsRoot`, `TabsList`, `TabsTrigger`, `TabsContent`) — the names shadcn * uses, so shadcn call sites port across unchanged. */ export type TabItem = { id: string; label: string; /** Leading icon as a node: `icon={}`. */ icon?: ReactElement; /** A count or a status beside the label. */ badge?: ReactNode; disabled?: boolean; }; export type TabsProps = { tabs: TabItem[]; /** Controlled selection. Omit for uncontrolled. */ value?: string; defaultValue?: string; onValueChange?: (id: string) => void; /** Render the panel for the active tab. */ children?: (activeId: string) => ReactNode; variant?: "underline" | "segmented"; className?: string; }; export function Tabs({ tabs, value, defaultValue, onValueChange, children, variant = "underline", className, }: TabsProps) { const first = tabs[0]?.id; return ( {tabs.map((tab) => ( {tab.icon && } {tab.label} {tab.badge} ))} {children && tabs.map((tab) => ( {children(tab.id)} ))} ); } /* ------------------------------------------------------------ composition */ export function TabsRoot({ className, ...props }: ComponentProps) { return ; } export function TabsList({ className, variant = "underline", ...props }: ComponentProps & { variant?: "underline" | "segmented" }) { return ( ); } export function TabsTrigger({ className, variant = "underline", ...props }: ComponentProps & { variant?: "underline" | "segmented" }) { return ( ); } export function TabsContent({ className, ...props }: ComponentProps) { return ( ); } /** * Segmented control — tabs that switch a view in place rather than paging. * Same primitive, different visual weight. */ export function SegmentedControl(props: Omit) { return ; } 24:T973b,

"use client";

import type { ComponentProps, ReactElement, ReactNode } from "react";
import * as TabsPrimitive from "@radix-ui/react-tabs";
import { cn } from "@/registry/tier-2-primitives/lib/cn";
import { focusRing } from "@/registry/tier-2-primitives/lib/cva";
import { IconSlot } from "@/registry/tier-2-primitives/icon-slot";

/**
 * Tabs.
 *
 * Radix Tabs, which implements the WAI-ARIA tabs pattern: Tab reaches the
 * tablist once, then Left/Right move between tabs and wrap, Home/End jump to
 * the ends. Only the selected tab is in the tab order, so a person doesn't have
 * to tab through nine tabs to reach the panel.
 *
 * TWO WAYS TO USE IT
 *   `<Tabs tabs={[…]}>{(id) => …}</Tabs>` is the short form and covers most
 *   screens. For panels that differ structurally, use the composition parts
 *   (`TabsRoot`, `TabsList`, `TabsTrigger`, `TabsContent`) — the names shadcn
 *   uses, so shadcn call sites port across unchanged.
 */
export type TabItem = {
  id: string;
  label: string;
  /** Leading icon as a node: `icon={<Icon name="package" />}`. */
  icon?: ReactElement;
  /** A count or a status beside the label. */
  badge?: ReactNode;
  disabled?: boolean;
};

export type TabsProps = {
  tabs: TabItem[];
  /** Controlled selection. Omit for uncontrolled. */
  value?: string;
  defaultValue?: string;
  onValueChange?: (id: string) => void;
  /** Render the panel for the active tab. */
  children?: (activeId: string) => ReactNode;
  variant?: "underline" | "segmented";
  className?: string;
};

export function Tabs({
  tabs,
  value,
  defaultValue,
  onValueChange,
  children,
  variant = "underline",
  className,
}: TabsProps) {
  const first = tabs[0]?.id;

  return (
    <TabsRoot
      value={value}
      defaultValue={defaultValue ?? first}
      onValueChange={onValueChange}
      className={className}
    >
      <TabsList variant={variant}>
        {tabs.map((tab) => (
          <TabsTrigger key={tab.id} value={tab.id} variant={variant} disabled={tab.disabled}>
            {tab.icon && <IconSlot icon={tab.icon} size={15} />}
            {tab.label}
            {tab.badge}
          </TabsTrigger>
        ))}
      </TabsList>
      {children &&
        tabs.map((tab) => (
          <TabsContent key={tab.id} value={tab.id}>
            {children(tab.id)}
          </TabsContent>
        ))}
    </TabsRoot>
  );
}

/* ------------------------------------------------------------ composition */

export function TabsRoot({ className, ...props }: ComponentProps<typeof TabsPrimitive.Root>) {
  return <TabsPrimitive.Root data-slot="tabs" className={cn("font-ui", className)} {...props} />;
}

export function TabsList({
  className,
  variant = "underline",
  ...props
}: ComponentProps<typeof TabsPrimitive.List> & { variant?: "underline" | "segmented" }) {
  return (
    <TabsPrimitive.List
      data-slot="tabs-list"
      className={cn(
        variant === "segmented"
          ? "inline-flex gap-[3px] rounded-md bg-surface-sunken p-[3px]"
          : "flex gap-1 border-b border-border-subtle",
        className,
      )}
      {...props}
    />
  );
}

export function TabsTrigger({
  className,
  variant = "underline",
  ...props
}: ComponentProps<typeof TabsPrimitive.Trigger> & { variant?: "underline" | "segmented" }) {
  return (
    <TabsPrimitive.Trigger
      data-slot="tabs-trigger"
      className={cn(
        "inline-flex items-center gap-2 text-label font-semibold whitespace-nowrap",
        "transition-[background-color,color,border-color] motion-instant",
        "disabled:cursor-not-allowed disabled:opacity-45",
        focusRing,
        variant === "segmented"
          ? cn(
              "rounded-sm px-4 py-[7px] text-text-secondary hover:text-text-primary",
              "data-[state=active]:bg-surface-raised data-[state=active]:text-text-primary data-[state=active]:shadow-e1",
            )
          : cn(
              "-mb-px border-b-2 border-transparent px-4 py-3 text-text-secondary hover:text-text-primary",
              "data-[state=active]:border-surface-accent data-[state=active]:text-text-primary",
            ),
        className,
      )}
      {...props}
    />
  );
}

export function TabsContent({ className, ...props }: ComponentProps<typeof TabsPrimitive.Content>) {
  return (
    <TabsPrimitive.Content
      data-slot="tabs-content"
      className={cn("animate-woohl-fade pt-5 outline-none", className)}
      {...props}
    />
  );
}

/**
 * Segmented control — tabs that switch a view in place rather than paging.
 * Same primitive, different visual weight.
 */
export function SegmentedControl(props: Omit<TabsProps, "variant">) {
  return <Tabs variant="segmented" {...props} />;
}

13:["$","$L1d",null,{"children":[["$","p",null,{"className":"text-text-accent text-caption font-bold tracking-wide uppercase","children":"Composites"}],["$","$L1e",null,{"children":"Tabs"}],["$","$L1f",null,{"children":"Underline and segmented variants, array-driven or composed."}],["$","$L20",null,{"children":[["$","$L21",null,{"slug":"tabs"}],["$","div",null,{"className":"mt-6","children":["$","$L22",null,{"command":"bunx --bun shadcn@latest add @woohl/tabs","source":"$23","highlighted":"$24","npm":["@radix-ui/react-tabs"],"registry":["@woohl/cva","@woohl/icon-slot","@woohl/tokens","@woohl/utils"],"props":"$undefined"}]}]]}]]}]