@horon-ai/react 0.0.0-stage → 0.1.1

package/src/components/skeleton.tsx

@@ -0,0 +1,75 @@
+import type { ComponentProps } from "react";
+
+import { cn } from "../lib/cn";
+import { LiquidGlass } from "./liquid-glass";
+
+export type SkeletonProps = Omit<ComponentProps<"div">, "className"> & {
+  /** `block` has the Figma 6px radius, `pill` is fully round (avatars, buttons). */
+  shape?: "block" | "pill";
+  className?: string;
+};
+
+/** A 7% ink placeholder; size it with classes. */
+export function Skeleton({ shape = "block", className, ...props }: SkeletonProps) {
+  return (
+    <div
+      aria-hidden
+      className={cn(
+        "animate-shimmer bg-overlay-ink-7 bg-[linear-gradient(90deg,transparent_30%,rgba(255,255,255,0.4)_50%,transparent_70%)] bg-size-[200%_100%] bg-no-repeat dark:bg-[linear-gradient(90deg,transparent_30%,rgba(255,255,255,0.06)_50%,transparent_70%)]",
+        shape === "pill" ? "rounded-full" : "rounded-xs",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export type SkeletonCardProps = {
+  type?: "row" | "card" | "text";
+  /** `solid` (default) is an opaque surface card with a default border; `glass` is the thick glass card. */
+  surface?: "solid" | "glass";
+  className?: string;
+};
+
+/** Figma `Skeleton` (in Loading 109:733): Row, Card and Text placeholders on a solid or thick-glass card. */
+export function SkeletonCard({ type = "row", surface = "solid", className }: SkeletonCardProps) {
+  return (
+    <div
+      role="status"
+      aria-label="Loading"
+      className={cn(
+        "relative flex gap-3 overflow-clip rounded-xl p-4",
+        surface === "glass" ? "bg-glass-thick" : "border border-border-default bg-bg-surface",
+        type === "row" ? "w-75 max-w-full items-center" : "w-70 max-w-full flex-col items-start",
+        className,
+      )}
+    >
+      {surface === "glass" && <LiquidGlass />}
+      {type === "row" && (
+        <>
+          <Skeleton shape="pill" className="relative size-9 shrink-0" />
+          <div className="relative flex min-w-0 flex-1 flex-col gap-2">
+            <Skeleton className="h-2.5 w-35 max-sm:max-w-full" />
+            <Skeleton className="h-2 w-50 max-sm:max-w-full" />
+          </div>
+        </>
+      )}
+      {type === "card" && (
+        <>
+          <Skeleton className="relative h-3 w-30 max-sm:max-w-full" />
+          <Skeleton className="relative h-2 w-62 max-sm:max-w-full" />
+          <Skeleton className="relative h-2 w-55 max-sm:max-w-full" />
+          <Skeleton className="relative h-2 w-40 max-sm:max-w-full" />
+          <Skeleton shape="pill" className="relative h-7 w-20 max-sm:max-w-full" />
+        </>
+      )}
+      {type === "text" && (
+        <>
+          <Skeleton className="relative h-2 w-62 max-sm:max-w-full" />
+          <Skeleton className="relative h-2 w-59 max-sm:max-w-full" />
+          <Skeleton className="relative h-2 w-45 max-sm:max-w-full" />
+        </>
+      )}
+    </div>
+  );
+}

package/src/components/slider.tsx

@@ -0,0 +1,29 @@
+import { Slider as BaseSlider } from "@base-ui/react/slider";
+import type { ComponentProps } from "react";
+
+import { cn } from "../lib/cn";
+
+export type SliderProps = Omit<ComponentProps<typeof BaseSlider.Root>, "className" | "children"> & {
+  className?: string;
+  "aria-label"?: string;
+};
+
+/**
+ * Paper settings slider (Voice / Speed): a 20px control, 6px track at 8% ink with an ink fill,
+ * and an 18px white thumb with a 1px hairline and a 0 1 3 12% shadow. Width comes from the caller.
+ */
+export function Slider({ className, "aria-label": ariaLabel, ...props }: SliderProps) {
+  return (
+    <BaseSlider.Root className={cn("relative w-55 max-w-full", className)} {...props}>
+      <BaseSlider.Control className="flex h-5 w-full cursor-pointer touch-none items-center select-none data-disabled:cursor-not-allowed data-disabled:opacity-40">
+        <BaseSlider.Track className="relative h-1.5 w-full rounded-full bg-overlay-ink-8">
+          <BaseSlider.Indicator className="rounded-full bg-interactive-primary" />
+          <BaseSlider.Thumb
+            aria-label={ariaLabel}
+            className="size-[18px] cursor-grab rounded-full border border-border-default bg-bg-default shadow-[0_1px_3px_#0000001f] transition-[scale,box-shadow] duration-120 ease-out-quint hover:scale-105 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-text-brand active:scale-110"
+          />
+        </BaseSlider.Track>
+      </BaseSlider.Control>
+    </BaseSlider.Root>
+  );
+}

package/src/components/source-row.tsx

@@ -0,0 +1,112 @@
+import { Check, WarningCircle } from "@phosphor-icons/react";
+import type { ReactNode } from "react";
+
+import { cn } from "../lib/cn";
+
+export type SourceStatus = "ready" | "indexing" | "failed";
+
+export type SourceRowProps = {
+  status: SourceStatus;
+  /** 16px source icon on the 32px tile. */
+  icon: ReactNode;
+  name: ReactNode;
+  /** Pages and chunks, progress, or the error. */
+  detail: ReactNode;
+  /** 0-100 while indexing. */
+  progress?: number;
+  onRetry?: () => void;
+  /** `card` is a standalone subtle row; `list` is transparent with a 1px divider, for stacking inside a list. */
+  variant?: "card" | "list";
+  /** Pipeline stage states; defaults to Parse, Chunk, Embed, Index derived from `status`. */
+  stages?: SourceStages;
+  className?: string;
+};
+
+export type SourceStage = "done" | "active" | "todo" | "failed";
+export type SourceStages = [SourceStage, SourceStage, SourceStage, SourceStage];
+const stageNames = ["parse", "chunk", "embed", "index"] as const;
+
+const defaultStages: Record<SourceStatus, SourceStages> = {
+  ready: ["done", "done", "done", "done"],
+  indexing: ["done", "done", "active", "todo"],
+  failed: ["done", "done", "failed", "todo"],
+};
+
+const stageFill = { done: "bg-overlay-ink-35", todo: "bg-overlay-ink-8", failed: "bg-accent-red-500-90" } as const;
+const stage = (state: keyof typeof stageFill) =>
+  cn("h-[3px] w-6 overflow-clip rounded-full transition-colors duration-150 sm:w-11", stageFill[state]);
+
+/** Figma `Source row` (Knowledge base): a flat row with a four-stage pipeline (parse, chunk, embed, index). */
+export function SourceRow({
+  status,
+  icon,
+  name,
+  detail,
+  progress = 0,
+  onRetry,
+  variant = "card",
+  stages = defaultStages[status],
+  className,
+}: SourceRowProps) {
+  return (
+    <div
+      className={cn(
+        "flex flex-wrap items-center gap-x-3 gap-y-2 px-2 py-3",
+        variant === "list"
+          ? "relative after:absolute after:inset-x-2 after:bottom-0 after:h-px after:bg-overlay-ink-8 last:after:hidden"
+          : "rounded-[14px] border border-border-default bg-bg-surface px-3",
+        className,
+      )}
+    >
+      <span className="flex size-8 shrink-0 items-center justify-center rounded-[10px] bg-overlay-ink-5 text-text-primary [&>svg]:size-4">
+        {icon}
+      </span>
+      <span className="flex min-w-0 flex-1 flex-col gap-0.5">
+        <span className="truncate text-label-md text-text-primary">{name}</span>
+        <span
+          className={cn(
+            "flex items-center gap-1 text-caption",
+            status === "failed" ? "text-text-danger" : "text-text-secondary",
+          )}
+        >
+          {status === "failed" && <WarningCircle aria-hidden className="size-3 shrink-0" />}
+          <span className="truncate">{detail}</span>
+        </span>
+      </span>
+      <span aria-hidden className="flex shrink-0 items-center gap-1">
+        {stages.map((state, i) => {
+          const stageName = stageNames[i];
+          return state === "active" ? (
+            <span key={stageName} className={stage("todo")}>
+              <span
+                className="block h-full rounded-full bg-status-live transition-[width] duration-400 ease-out-quint"
+                style={{ width: `${progress}%` }}
+              />
+            </span>
+          ) : (
+            <span key={stageName} className={stage(state)} />
+          );
+        })}
+      </span>
+      <span className="flex h-7.5 w-18 shrink-0 items-center justify-end">
+        {status === "ready" && <Check aria-label="Ready" className="size-4 text-text-secondary" />}
+        {status === "indexing" && (
+          <span className="w-9 text-right text-label-md text-text-secondary tabular-nums">
+            <span key={progress} className="inline-block animate-fade-in">
+              {progress}%
+            </span>
+          </span>
+        )}
+        {status === "failed" && (
+          <button
+            type="button"
+            onClick={onRetry}
+            className="flex h-7.5 motion-press cursor-pointer items-center rounded-full bg-overlay-ink-6 px-3 text-label-sm text-text-primary hover:bg-overlay-ink-10 focus-visible:outline-2 focus-visible:outline-text-brand"
+          >
+            Retry
+          </button>
+        )}
+      </span>
+    </div>
+  );
+}

package/src/components/spinner.tsx

@@ -0,0 +1,29 @@
+import { cn } from "../lib/cn";
+
+export type SpinnerSize = "xs" | "sm" | "md" | "lg";
+
+export type SpinnerProps = {
+  /** Named size, or a pixel size for the one-off spinners in agent rows (12, 15, 20). */
+  size?: SpinnerSize | number;
+  label?: string;
+  className?: string;
+};
+
+const sizeClass: Record<SpinnerSize, string> = { xs: "size-3.5", sm: "size-4", md: "size-6", lg: "size-8" };
+
+/** Figma `Spinner` (Loading 109:733): a 10% ink ring with a quarter ink arc, 11% stroke. */
+export function Spinner({ size = "sm", label = "Loading", className }: SpinnerProps) {
+  return (
+    <svg
+      role="status"
+      aria-label={label}
+      viewBox="0 0 100 100"
+      width={typeof size === "number" ? size : undefined}
+      height={typeof size === "number" ? size : undefined}
+      className={cn("shrink-0 animate-spin", typeof size === "number" ? undefined : sizeClass[size], className)}
+    >
+      <circle cx="50" cy="50" r="44.5" fill="none" strokeWidth="11" className="stroke-overlay-ink-10" />
+      <path d="M50 5.5A44.5 44.5 0 0 1 94.5 50" fill="none" strokeWidth="11" className="stroke-interactive-primary" />
+    </svg>
+  );
+}

package/src/components/split-button.tsx

@@ -0,0 +1,72 @@
+import { Button as BaseButton } from "@base-ui/react/button";
+import { CaretDown } from "@phosphor-icons/react";
+import type { ComponentProps, ReactNode } from "react";
+
+import { cn } from "../lib/cn";
+import { Menu, MenuContent, MenuTrigger } from "./menu";
+
+export type SplitButtonProps = Omit<ComponentProps<typeof BaseButton>, "className" | "children"> & {
+  /** Primary action label. */
+  children: ReactNode;
+  /** 16px leading icon. */
+  icon?: ReactNode;
+  /** Menu items (`MenuItem`, `MenuSeparator`) opened by the caret. */
+  menu?: ReactNode;
+  menuLabel?: string;
+  className?: string;
+};
+
+const halfClass =
+  "relative inline-flex h-full cursor-pointer items-center select-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-text-brand data-disabled:cursor-not-allowed";
+
+/** Paper `Split button` (1VGK-0): one primary pill on `Button`'s 32px rung, two hit areas split by a 1x18 bar. */
+export function SplitButton({
+  children,
+  icon,
+  menu,
+  menuLabel = "More actions",
+  disabled,
+  className,
+  ...props
+}: SplitButtonProps) {
+  return (
+    <div
+      className={cn(
+        "inline-flex h-8 shrink-0 items-center rounded-full bg-interactive-primary text-label-md text-interactive-on-primary",
+        // The press and the disabled dim belong to the pill, not to one half: the fill is the container's,
+        // so shrinking a half alone moves the label inside a fixed pill.
+        "transition-[scale,background-color,opacity] duration-150 ease-out-quint",
+        "hover:bg-interactive-primary-hover has-[[data-disabled]]:opacity-40 has-[[data-disabled]]:hover:bg-interactive-primary",
+        "has-[button:active:not(:disabled,[data-disabled],[aria-disabled=true])]:scale-[0.97]",
+        className,
+      )}
+    >
+      <BaseButton
+        disabled={disabled}
+        className={cn(halfClass, "gap-1.5 [&_svg]:size-4", menu ? "rounded-l-full pr-2 pl-3" : "rounded-full px-3")}
+        {...props}
+      >
+        {icon && <span className="flex shrink-0">{icon}</span>}
+        <span className="relative text-trim">{children}</span>
+      </BaseButton>
+      {menu ? (
+        <>
+          <span aria-hidden className="h-4.5 w-px shrink-0 bg-interactive-on-primary opacity-25" />
+          <Menu>
+            <MenuTrigger
+              disabled={disabled}
+              aria-label={menuLabel}
+              className={cn(halfClass, "group rounded-r-full pr-4 pl-2")}
+            >
+              <CaretDown
+                aria-hidden
+                className="size-3.5 transition-transform duration-200 ease-out-quint group-data-popup-open:rotate-180"
+              />
+            </MenuTrigger>
+            <MenuContent align="end">{menu}</MenuContent>
+          </Menu>
+        </>
+      ) : null}
+    </div>
+  );
+}

package/src/components/switch.tsx

@@ -0,0 +1,79 @@
+import { Switch as BaseSwitch } from "@base-ui/react/switch";
+import type { ComponentProps, ReactNode } from "react";
+
+import { cn } from "../lib/cn";
+import type { ControlSize } from "../lib/size";
+
+/** `compact` is the 40x24 Paper bot-memory switch and keeps its own rung. */
+export type SwitchSize = ControlSize | "compact";
+
+export type SwitchProps = Omit<ComponentProps<typeof BaseSwitch.Root>, "className"> & {
+  size?: SwitchSize;
+  label?: ReactNode;
+  className?: string;
+};
+
+const trackClass: Record<SwitchSize, string> = {
+  sm: "h-5 w-8 p-0.5",
+  md: "h-6.5 w-11 p-0.5",
+  lg: "h-7.5 w-13 p-0.5",
+  compact: "h-6 w-10 p-[3px]",
+};
+
+const thumbClass: Record<SwitchSize, string> = {
+  sm: "size-4 data-checked:translate-x-3",
+  md: "size-5.5 data-checked:translate-x-4.5",
+  lg: "size-6.5 data-checked:translate-x-5.5",
+  compact: "size-[18px] data-checked:translate-x-4",
+};
+
+const labelClass: Record<SwitchSize, string> = {
+  sm: "gap-3 text-body-sm",
+  md: "gap-4 text-body-md",
+  lg: "gap-4 text-body-lg",
+  compact: "gap-3 text-body-sm",
+};
+
+/**
+ * Switch: MD 44x26 and SM 32x20 tracks with a white thumb 2px in; LG is 52x30; COMPACT 40x24 with an
+ * 18px thumb 3px in (Paper bot memory). The thumb stays white on the grey track in both themes and
+ * takes the inverse of the ink fill when checked, so the checked state reads the same in dark.
+ */
+export function Switch({ size = "md", label, className, ...props }: SwitchProps) {
+  const control = (
+    <BaseSwitch.Root
+      className={cn(
+        "relative inline-flex shrink-0 cursor-pointer items-center rounded-full bg-border-strong motion-colors",
+        "hover:not-data-disabled:bg-interactive-secondary-hover data-checked:bg-interactive-primary hover:not-data-disabled:data-checked:bg-interactive-primary-hover",
+        "data-disabled:cursor-not-allowed data-disabled:opacity-40",
+        "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-text-brand",
+        trackClass[size],
+        label ? undefined : className,
+      )}
+      {...props}
+    >
+      <BaseSwitch.Thumb
+        className={cn(
+          // The thumb is a flex child of a fixed-width track whose content box can be
+          // narrower than the thumb plus its travel; `shrink-0` holds it at its own
+          // size so the track never reads as a bare bar.
+          "shrink-0 rounded-full bg-text-on-ink transition-[translate,background-color] duration-220 ease-spring data-checked:bg-interactive-on-primary",
+          thumbClass[size],
+        )}
+      />
+    </BaseSwitch.Root>
+  );
+  if (!label) return control;
+  return (
+    <label
+      className={cn(
+        "inline-flex max-w-full min-w-0 cursor-pointer items-center text-text-primary",
+        labelClass[size],
+        className,
+      )}
+    >
+      <span className="min-w-0 flex-1">{label}</span>
+      {control}
+    </label>
+  );
+}

package/src/components/tab-bar.tsx

@@ -0,0 +1,90 @@
+import { type ReactNode, useRef } from "react";
+
+import { cn } from "../lib/cn";
+import type { ControlSize } from "../lib/size";
+import { useActiveIndicator } from "../hooks/use-active-indicator";
+import { LiquidGlass } from "./liquid-glass";
+
+export type TabBarItem = { value: string; label: string; icon: ReactNode };
+export type TabBarSize = ControlSize;
+
+export type TabBarProps = {
+  items: TabBarItem[];
+  value: string;
+  onValueChange?: (value: string) => void;
+  /** `md` is the 64x48 Figma tab; `sm` is 56x40 and `lg` 72x56. */
+  size?: TabBarSize;
+  surface?: "glass" | "flat";
+  "aria-label"?: string;
+  className?: string;
+};
+
+const trackClass: Record<TabBarSize, string> = {
+  sm: "p-1",
+  md: "p-1.5",
+  lg: "p-2",
+};
+
+const tabClass: Record<TabBarSize, string> = {
+  sm: "h-10 w-14 [&_svg]:size-5",
+  md: "h-12 w-16 [&_svg]:size-5.5",
+  lg: "h-14 w-18 [&_svg]:size-6",
+};
+
+/**
+ * Figma `Tab bar` (63:441): the mobile bottom navigation, a regular-glass pill
+ * with icon-only 64x48 tabs and 22px icons; the current tab is a 10% ink pill
+ * that slides to the tab you pick.
+ */
+export function TabBar({
+  items,
+  value,
+  onValueChange,
+  size = "md",
+  surface = "glass",
+  className,
+  ...props
+}: TabBarProps) {
+  const track = useRef<HTMLElement>(null);
+  const { rect, animate } = useActiveIndicator(track, '[aria-current="page"]');
+  return (
+    <nav
+      ref={track}
+      aria-label={props["aria-label"] ?? "Main"}
+      className={cn(
+        // Tabs keep their fixed 56/64/72px tap size; when the row is wider than the
+        // container the track scrolls instead of squeezing the icons.
+        "relative flex w-fit max-w-full min-w-0 items-center gap-1 overflow-x-auto overflow-y-clip rounded-full bg-glass-regular",
+        trackClass[size],
+        className,
+      )}
+    >
+      {surface === "glass" ? <LiquidGlass /> : null}
+      <span
+        aria-hidden
+        className={cn("pointer-events-none absolute rounded-full bg-overlay-ink-10", animate && "motion-indicator")}
+        style={rect ? { ...rect, opacity: 1 } : { opacity: 0 }}
+      />
+      {items.map((item) => {
+        const current = item.value === value;
+        return (
+          <button
+            key={item.value}
+            type="button"
+            aria-label={item.label}
+            aria-current={current ? "page" : undefined}
+            onClick={() => onValueChange?.(item.value)}
+            className={cn(
+              "relative flex shrink-0 motion-press cursor-pointer items-center justify-center rounded-full",
+              tabClass[size],
+              current ? "text-text-primary" : "text-text-secondary hover:bg-overlay-ink-5",
+              "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-text-brand",
+            )}
+          >
+            {item.icon}
+          </button>
+        );
+      })}
+    </nav>
+  );
+}

package/src/components/tabs.tsx

@@ -0,0 +1,162 @@
+import { Tabs as BaseTabs } from "@base-ui/react/tabs";
+import { type ComponentProps, createContext, type ReactNode, useContext } from "react";
+
+import { cn } from "../lib/cn";
+import type { ControlSize } from "../lib/size";
+import { LiquidGlass } from "./liquid-glass";
+
+export type TabsSize = ControlSize;
+
+/** `Tabs` owns the size; every `TabsTab` inside reads it so one list stays on one rung. */
+const TabsSizeContext = createContext<ControlSize>("md");
+
+export type TabsListVariant = "pill" | "underline";
+
+/** `TabsList` owns the variant; its `TabsTab`s read it to drop the pill shape on the underline list. */
+const TabsVariantContext = createContext<TabsListVariant>("pill");
+
+type WithClass<T> = Omit<T, "className"> & { className?: string };
+
+export function Tabs({
+  size = "md",
+  className,
+  ...props
+}: WithClass<ComponentProps<typeof BaseTabs.Root>> & { size?: TabsSize }) {
+  return (
+    <TabsSizeContext.Provider value={size}>
+      <BaseTabs.Root className={cn("flex max-w-full min-w-0 flex-col gap-4", className)} {...props} />
+    </TabsSizeContext.Provider>
+  );
+}
+
+/** Track padding per rung, the same as `SegmentedControl` so the two pill trays line up. */
+const listClass: Record<TabsSize, string> = {
+  sm: "p-[3px]",
+  md: "p-[3px]",
+  lg: "p-1",
+};
+
+/**
+ * Figma `Tabs example` (62:353): a pill tray, solid or regular glass, with the same rungs as
+ * `SegmentedControl` (3/3/4px padding, 2px between tabs). The selection is one indicator that
+ * slides to the active tab (Base UI `Tabs.Indicator` positions it): 10% ink on solid, the thick
+ * glass pill with a soft shadow on glass, as on the segmented control.
+ *
+ * `variant="underline"` is the document variant: no tray, a full-width 1px default border under
+ * the tabs, and a 2px primary bar that slides under the active tab. `surface` does not apply to it.
+ */
+export function TabsList({
+  variant = "pill",
+  surface = "solid",
+  className,
+  children,
+  ...props
+}: WithClass<ComponentProps<typeof BaseTabs.List>> & {
+  /** `pill` (default) is the tray of pill tabs; `underline` is a text row with a sliding underline. */
+  variant?: TabsListVariant;
+  /** `solid` (default) is an opaque surface tray with a default border; `glass` is the regular glass tray. */
+  surface?: "solid" | "glass";
+}) {
+  const size = useContext(TabsSizeContext);
+  if (variant === "underline") {
+    return (
+      <TabsVariantContext.Provider value="underline">
+        <BaseTabs.List
+          className={cn("relative flex w-full items-center gap-6 border-b border-border-default", className)}
+          {...props}
+        >
+          <BaseTabs.Indicator className="absolute -bottom-px left-(--active-tab-left) h-0.5 w-(--active-tab-width) bg-text-primary motion-indicator" />
+          {children}
+        </BaseTabs.List>
+      </TabsVariantContext.Provider>
+    );
+  }
+  return (
+    <BaseTabs.List
+      className={cn(
+        // The tray hugs its tabs and caps at the container; tabs keep their label
+        // padding and type, so an over-wide set scrolls rather than squeezing.
+        "relative flex w-full max-w-fit min-w-0 items-center gap-0.5 overflow-x-auto overflow-y-clip rounded-full",
+        listClass[size],
+        surface === "glass" ? "bg-glass-regular" : "border border-border-default bg-bg-surface",
+        className,
+      )}
+      {...props}
+    >
+      {surface === "glass" && <LiquidGlass />}
+      <BaseTabs.Indicator
+        className={cn(
+          "absolute top-(--active-tab-top) left-(--active-tab-left) h-(--active-tab-height) w-(--active-tab-width) overflow-clip rounded-full motion-indicator",
+          surface === "glass"
+            ? "bg-glass-thick shadow-[0_1px_3px_rgba(0,0,0,0.08)] dark:bg-overlay-ink-10"
+            : "bg-overlay-ink-10",
+        )}
+      >
+        {surface === "glass" && <LiquidGlass />}
+      </BaseTabs.Indicator>
+      {children}
+    </BaseTabs.List>
+  );
+}
+
+/** One tab per rung: the `SegmentedControl` segment heights and padding (26/30/36px, 10/16/16px). */
+const tabClass: Record<TabsSize, string> = {
+  sm: "h-6.5 gap-1 px-2.5 text-label-sm [&_svg]:size-3.5",
+  md: "h-7.5 gap-1.5 px-4 text-label-md [&_svg]:size-4",
+  lg: "h-9 gap-2 px-4 text-label-lg [&_svg]:size-5",
+};
+
+const countClass: Record<TabsSize, string> = {
+  sm: "h-4.5 px-1.5",
+  md: "h-5 px-1.5",
+  lg: "h-6 px-2",
+};
+
+/** Figma `Tabs` (62:335): a pill tab; the list's indicator draws the selection under the active tab. */
+export function TabsTab({
+  className,
+  icon,
+  count,
+  children,
+  ...props
+}: WithClass<ComponentProps<typeof BaseTabs.Tab>> & {
+  /** Leading icon, 14px (sm), 16px (md) or 20px (lg) (Settings `Tabs with count`). */
+  icon?: ReactNode;
+  /** Count pill after the label; turns solid on the active tab. */
+  count?: number;
+}) {
+  const size = useContext(TabsSizeContext);
+  const underline = useContext(TabsVariantContext) === "underline";
+  return (
+    <BaseTabs.Tab
+      className={cn(
+        "group/tab relative inline-flex cursor-pointer items-center justify-center whitespace-nowrap text-text-secondary",
+        underline ? "rounded-xs" : "rounded-full",
+        tabClass[size],
+        // The underline row keeps each rung's height and type but drops the pill's side padding.
+        underline && "px-0",
+        "motion-colors hover:text-text-primary data-active:text-text-primary",
+        "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-text-brand data-disabled:cursor-not-allowed data-disabled:opacity-40",
+        className,
+      )}
+      {...props}
+    >
+      {icon}
+      <span className="text-trim">{children}</span>
+      {count !== undefined && (
+        <span
+          className={cn(
+            "inline-flex items-center rounded-full bg-overlay-ink-6 text-label-sm text-text-secondary motion-colors group-data-active/tab:bg-interactive-primary group-data-active/tab:text-interactive-on-primary",
+            countClass[size],
+          )}
+        >
+          <span className="text-trim">{count}</span>
+        </span>
+      )}
+    </BaseTabs.Tab>
+  );
+}
+
+export function TabsPanel({ className, ...props }: WithClass<ComponentProps<typeof BaseTabs.Panel>>) {
+  return <BaseTabs.Panel className={cn("animate-swap-move outline-none", className)} {...props} />;
+}