@brijbyte/agentic-ui 0.0.1-beta → 0.0.2

package/src/styles/tokens.css

@@ -0,0 +1,404 @@
+/**
+ * @brijbyte/agentic-ui — Design Tokens
+ *
+ * developer-focused design system, loosely inspired by native desktop and mobile UI.
+ * Monospace-first, semantic color tokens, supports light & dark modes.
+ */
+
+/* Establish layer order — must come before any @layer usage */
+@layer theme, base, components, utilities;
+
+@layer theme {
+  :root {
+    /* ─── Typography ──────────────────────────────────────────────── */
+    /*
+     * Display / headline font — Apple "New York" serif (macOS Catalina+).
+     * Falls back to classic readable serifs. Used for page titles and headings.
+     */
+    --font-display: "New York", "Iowan Old Style", "Palatino Linotype", "URW Palladio L", Georgia, serif;
+
+    /*
+     * Mono / UI font — developer-focused monospace stack.
+     * Used for all UI chrome: buttons, inputs, labels, badges, code.
+     */
+    --font-mono:
+      "Berkeley Mono", "JetBrains Mono", "Fira Code", "Cascadia Code", "SF Mono", "Menlo", ui-monospace, "Courier New", monospace;
+
+    /*
+     * Sans — system sans-serif for body prose and long descriptions.
+     */
+    --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
+
+    --font-size-2xs: 0.625rem; /* 10px */
+    --font-size-xs: 0.6875rem; /* 11px */
+    --font-size-sm: 0.75rem; /* 12px */
+    --font-size-md: 0.8125rem; /* 13px — macOS default */
+    --font-size-lg: 0.875rem; /* 14px */
+    --font-size-xl: 1rem; /* 16px */
+    --font-size-2xl: 1.125rem; /* 18px */
+    --font-size-3xl: 1.25rem; /* 20px */
+    --font-size-4xl: 1.5rem; /* 24px */
+
+    --font-weight-regular: 400;
+    --font-weight-medium: 500;
+    --font-weight-semibold: 600;
+    --font-weight-bold: 700;
+
+    --line-height-tight: 1.2;
+    --line-height-normal: 1.4;
+    --line-height-relaxed: 1.6;
+
+    --letter-spacing-tight: -0.02em;
+    --letter-spacing-normal: 0em;
+    --letter-spacing-wide: 0.04em;
+    --letter-spacing-wider: 0.08em;
+
+    /* ─── Spacing (4px grid) ──────────────────────────────────────── */
+    --space-0: 0px;
+    --space-px: 1px;
+    --space-0-5: 2px;
+    --space-1: 4px;
+    --space-1-5: 6px;
+    --space-2: 8px;
+    --space-2-5: 10px;
+    --space-3: 12px;
+    --space-4: 16px;
+    --space-5: 20px;
+    --space-6: 24px;
+    --space-7: 28px;
+    --space-8: 32px;
+    --space-9: 36px;
+    --space-10: 40px;
+    --space-12: 48px;
+    --space-16: 64px;
+    --space-20: 80px;
+    --space-24: 96px;
+
+    /* ─── Border Radius ───────────────────────────────────────────── */
+    --radius-none: 0px;
+    --radius-sm: 4px;
+    --radius-md: 6px;
+    --radius-lg: 8px;
+    --radius-xl: 10px;
+    --radius-2xl: 12px;
+    --radius-full: 9999px;
+
+    /* ─── Border Width ────────────────────────────────────────────── */
+    --border-width-base: 1px;
+    --border-width-medium: 1.5px;
+    --border-width-thick: 2px;
+
+    /* ─── Animation ───────────────────────────────────────────────── */
+    --duration-instant: 0ms;
+    --duration-fast: 100ms;
+    --duration-normal: 150ms;
+    --duration-slow: 200ms;
+    --duration-slower: 300ms;
+
+    /*
+     * Easing curves — use the right one for the job:
+     *   ease-out   → entering elements (starts fast, feels responsive)
+     *   ease-in    → exiting elements (builds speed, disappears cleanly)
+     *   standard   → on-screen movement / morphing between states (ease-in-out)
+     *   spring     → playful or physics-based interactions
+     *   linear     → constant motion (spinners, progress bars, marquees)
+     */
+    --easing-ease-out: cubic-bezier(0, 0, 0.2, 1);
+    --easing-ease-in: cubic-bezier(0.4, 0, 1, 1);
+    --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
+    --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+    --easing-linear: linear;
+
+    /* ─── Z-index Scale ───────────────────────────────────────────── */
+    --z-below: -1;
+    --z-base: 0;
+    --z-raised: 10;
+    --z-dropdown: 100;
+    --z-sticky: 200;
+    --z-overlay: 300;
+    --z-modal: 400;
+    --z-popover: 500;
+    --z-toast: 600;
+    --z-tooltip: 700;
+  }
+
+  /* ═══════════════════════════════════════════════════════════════════
+     LIGHT MODE — semantic tokens
+  ═══════════════════════════════════════════════════════════════════ */
+  :root,
+  [data-theme="light"] {
+    color-scheme: light;
+
+    /* Background layers (inspired by system vibrancy) */
+    --color-canvas: #f0eff0;
+    --color-elevated: #fafafa;
+    --color-sunken: #e8e7e8;
+    --color-overlay: rgba(250, 250, 250, 0.92);
+    --color-sidebar: rgba(244, 243, 244, 0.96);
+
+    /* Surface (card/panel backgrounds) */
+    --color-surface-1: #fafafa;
+    --color-surface-2: #f4f3f4;
+    --color-surface-3: #eeeded;
+    --color-hover: rgba(0, 0, 0, 0.04);
+    --color-active: rgba(0, 0, 0, 0.07);
+    --color-selected: rgba(0, 120, 212, 0.1);
+
+    /* Text */
+    --color-primary: rgba(0, 0, 0, 0.88);
+    --color-secondary: rgba(0, 0, 0, 0.55);
+    --color-tertiary: rgba(0, 0, 0, 0.36);
+    --color-disabled: rgba(0, 0, 0, 0.24);
+    --color-inverse: rgba(255, 255, 255, 0.95);
+    --color-on-accent: #ffffff;
+    --color-code: #0f766e;
+
+    /* Borders */
+    --color-line: rgba(0, 0, 0, 0.12);
+    --color-line-strong: rgba(0, 0, 0, 0.22);
+    --color-line-subtle: rgba(0, 0, 0, 0.06);
+    --color-line-focus: var(--color-focus-ring);
+
+    /* Accent — macOS blue
+     * Semantic names instead of opaque Radix-style numbers:
+     *   tint        → subtle background fill (badges, chips)
+     *   tint-hover  → tint on hover
+     *   (base)      → solid interactive color (buttons, links)
+     *   hover       → solid on hover
+     *   pressed     → solid on press
+     */
+    --color-accent: #0078d4;
+    --color-accent-hover: #006bbf;
+    --color-accent-pressed: #005ea8;
+    --color-accent-tint: rgba(0, 120, 212, 0.1);
+    --color-accent-tint-hover: rgba(0, 120, 212, 0.16);
+
+    /* Focus ring */
+    --color-focus-ring: rgba(0, 120, 212, 0.8);
+
+    /* Elevation / Shadows — light (subtle black shadows) */
+    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.08);
+    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.06);
+    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.06);
+    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.06);
+    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.06);
+    --shadow-popover: 0 8px 24px -4px rgb(0 0 0 / 0.16), 0 2px 6px -2px rgb(0 0 0 / 0.1);
+    --shadow-sheet: 0 -4px 16px 0 rgb(0 0 0 / 0.12);
+    --shadow-inset: inset 0 1px 2px 0 rgb(0 0 0 / 0.08);
+    --shadow-focus: 0 0 0 2px var(--color-canvas), 0 0 0 4px var(--color-focus-ring);
+
+    /* Status — Success */
+    --color-success-bg: #f0fdf4;
+    --color-success-border: #bbf7d0;
+    --color-success-text: #15803d;
+    --color-success-solid: #16a34a;
+
+    /* Status — Warning */
+    --color-warning-bg: #fffbeb;
+    --color-warning-border: #fde68a;
+    --color-warning-text: #92400e;
+    --color-warning-solid: #d97706;
+
+    /* Status — Error */
+    --color-error-bg: #fef2f2;
+    --color-error-border: #fecaca;
+    --color-error-text: #991b1b;
+    --color-error-solid: #dc2626;
+
+    /* Status — Info */
+    --color-info-bg: #eff6ff;
+    --color-info-border: #bfdbfe;
+    --color-info-text: #1d4ed8;
+    --color-info-solid: #2563eb;
+
+    /* Code / terminal palette */
+    --color-code-canvas: #f6f8fa;
+    --color-code-border: #d0d7de;
+    --color-code-comment: #6e7781;
+    --color-code-keyword: #cf222e;
+    --color-code-string: #0a3069;
+    --color-code-number: #0550ae;
+    --color-code-function: #8250df;
+
+    /* Scrollbar */
+    --color-thumb: rgba(0, 0, 0, 0.2);
+    --color-track: transparent;
+  }
+
+  /* ═══════════════════════════════════════════════════════════════════
+     DARK MODE — single source of truth via :where()
+     Both the media query and [data-theme="dark"] point to the same
+     selector block — no duplication, no drift.
+  ═══════════════════════════════════════════════════════════════════ */
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"]),
+    :root:not([data-theme="light"]) [data-theme="dark"] {
+      color-scheme: dark;
+
+      /* Background */
+      --color-canvas: #1c1c1e;
+      --color-elevated: #2c2c2e;
+      --color-sunken: #141416;
+      --color-overlay: rgba(30, 30, 32, 0.92);
+      --color-sidebar: rgba(28, 28, 30, 0.95);
+
+      /* Surface */
+      --color-surface-1: #2c2c2e;
+      --color-surface-2: #3a3a3c;
+      --color-surface-3: #48484a;
+      --color-hover: rgba(255, 255, 255, 0.06);
+      --color-active: rgba(255, 255, 255, 0.1);
+      --color-selected: rgba(10, 132, 255, 0.16);
+
+      /* Text */
+      --color-primary: rgba(255, 255, 255, 0.92);
+      --color-secondary: rgba(255, 255, 255, 0.55);
+      --color-tertiary: rgba(255, 255, 255, 0.36);
+      --color-disabled: rgba(255, 255, 255, 0.24);
+      --color-inverse: rgba(0, 0, 0, 0.88);
+      --color-on-accent: #ffffff;
+      --color-code: #2dd4bf;
+
+      /* Borders */
+      --color-line: rgba(255, 255, 255, 0.12);
+      --color-line-strong: rgba(255, 255, 255, 0.22);
+      --color-line-subtle: rgba(255, 255, 255, 0.06);
+
+      /* Accent — macOS blue dark */
+      --color-accent: #0a84ff;
+      --color-accent-hover: #0071e3;
+      --color-accent-pressed: #005bb5;
+      --color-accent-tint: rgba(10, 132, 255, 0.12);
+      --color-accent-tint-hover: rgba(10, 132, 255, 0.2);
+
+      /* Focus ring */
+      --color-focus-ring: rgba(10, 132, 255, 0.9);
+
+      /* Elevation / Shadows — dark (higher opacity so they read on dark surfaces) */
+      --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.3);
+      --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.3);
+      --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
+      --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.3);
+      --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.3);
+      --shadow-popover: 0 8px 24px -4px rgb(0 0 0 / 0.5), 0 2px 6px -2px rgb(0 0 0 / 0.4);
+      --shadow-sheet: 0 -4px 16px 0 rgb(0 0 0 / 0.4);
+      --shadow-inset: inset 0 1px 2px 0 rgb(0 0 0 / 0.3);
+      --shadow-focus: 0 0 0 2px var(--color-canvas), 0 0 0 4px var(--color-focus-ring);
+
+      /* Status — Success */
+      --color-success-bg: rgba(22, 163, 74, 0.12);
+      --color-success-border: rgba(22, 163, 74, 0.3);
+      --color-success-text: #4ade80;
+      --color-success-solid: #22c55e;
+
+      /* Status — Warning */
+      --color-warning-bg: rgba(217, 119, 6, 0.12);
+      --color-warning-border: rgba(217, 119, 6, 0.3);
+      --color-warning-text: #fbbf24;
+      --color-warning-solid: #f59e0b;
+
+      /* Status — Error */
+      --color-error-bg: rgba(220, 38, 38, 0.12);
+      --color-error-border: rgba(220, 38, 38, 0.3);
+      --color-error-text: #f87171;
+      --color-error-solid: #ef4444;
+
+      /* Status — Info */
+      --color-info-bg: rgba(37, 99, 235, 0.12);
+      --color-info-border: rgba(37, 99, 235, 0.3);
+      --color-info-text: #60a5fa;
+      --color-info-solid: #3b82f6;
+
+      /* Code / terminal palette */
+      --color-code-canvas: #161b22;
+      --color-code-border: rgba(255, 255, 255, 0.1);
+      --color-code-comment: #8b949e;
+      --color-code-keyword: #ff7b72;
+      --color-code-string: #a5d6ff;
+      --color-code-number: #79c0ff;
+      --color-code-function: #d2a8ff;
+
+      /* Scrollbar */
+      --color-thumb: rgba(255, 255, 255, 0.2);
+      --color-track: transparent;
+    }
+  }
+
+  [data-theme="dark"] {
+    color-scheme: dark;
+
+    --color-canvas: #1c1c1e;
+    --color-elevated: #2c2c2e;
+    --color-sunken: #141416;
+    --color-overlay: rgba(30, 30, 32, 0.92);
+    --color-sidebar: rgba(28, 28, 30, 0.95);
+
+    --color-surface-1: #2c2c2e;
+    --color-surface-2: #3a3a3c;
+    --color-surface-3: #48484a;
+    --color-hover: rgba(255, 255, 255, 0.06);
+    --color-active: rgba(255, 255, 255, 0.1);
+    --color-selected: rgba(10, 132, 255, 0.16);
+
+    --color-primary: rgba(255, 255, 255, 0.92);
+    --color-secondary: rgba(255, 255, 255, 0.55);
+    --color-tertiary: rgba(255, 255, 255, 0.36);
+    --color-disabled: rgba(255, 255, 255, 0.24);
+    --color-inverse: rgba(0, 0, 0, 0.88);
+    --color-on-accent: #ffffff;
+    --color-code: #2dd4bf;
+
+    --color-line: rgba(255, 255, 255, 0.12);
+    --color-line-strong: rgba(255, 255, 255, 0.22);
+    --color-line-subtle: rgba(255, 255, 255, 0.06);
+
+    --color-accent: #0a84ff;
+    --color-accent-hover: #0071e3;
+    --color-accent-pressed: #005bb5;
+    --color-accent-tint: rgba(10, 132, 255, 0.12);
+    --color-accent-tint-hover: rgba(10, 132, 255, 0.2);
+
+    --color-focus-ring: rgba(10, 132, 255, 0.9);
+
+    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.3);
+    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.3);
+    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
+    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.3);
+    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.3);
+    --shadow-popover: 0 8px 24px -4px rgb(0 0 0 / 0.5), 0 2px 6px -2px rgb(0 0 0 / 0.4);
+    --shadow-sheet: 0 -4px 16px 0 rgb(0 0 0 / 0.4);
+    --shadow-inset: inset 0 1px 2px 0 rgb(0 0 0 / 0.3);
+    --shadow-focus: 0 0 0 2px var(--color-canvas), 0 0 0 4px var(--color-focus-ring);
+
+    --color-success-bg: rgba(22, 163, 74, 0.12);
+    --color-success-border: rgba(22, 163, 74, 0.3);
+    --color-success-text: #4ade80;
+    --color-success-solid: #22c55e;
+
+    --color-warning-bg: rgba(217, 119, 6, 0.12);
+    --color-warning-border: rgba(217, 119, 6, 0.3);
+    --color-warning-text: #fbbf24;
+    --color-warning-solid: #f59e0b;
+
+    --color-error-bg: rgba(220, 38, 38, 0.12);
+    --color-error-border: rgba(220, 38, 38, 0.3);
+    --color-error-text: #f87171;
+    --color-error-solid: #ef4444;
+
+    --color-info-bg: rgba(37, 99, 235, 0.12);
+    --color-info-border: rgba(37, 99, 235, 0.3);
+    --color-info-text: #60a5fa;
+    --color-info-solid: #3b82f6;
+
+    --color-code-canvas: #161b22;
+    --color-code-border: rgba(255, 255, 255, 0.1);
+    --color-code-comment: #8b949e;
+    --color-code-keyword: #ff7b72;
+    --color-code-string: #a5d6ff;
+    --color-code-number: #79c0ff;
+    --color-code-function: #d2a8ff;
+
+    --color-thumb: rgba(255, 255, 255, 0.2);
+    --color-track: transparent;
+  }
+}

package/src/switch/index.ts

@@ -0,0 +1,6 @@
+export { Switch } from "./switch";
+export type { SwitchProps } from "./switch";
+
+export { SwitchRoot, SwitchThumb } from "./parts";
+export type { SwitchRootProps, SwitchThumbProps } from "./parts";
+export { SwitchStyles } from "./switch";

package/src/switch/parts.tsx

@@ -0,0 +1,44 @@
+/**
+ * Styled primitives for Switch.
+ *
+ * @example
+ * ```tsx
+ * import { Switch } from '@base-ui/react/switch';
+ * import { SwitchRoot, SwitchThumb } from '@brijbyte/agentic-ui/switch';
+ *
+ * <label htmlFor="sw">
+ *   <SwitchRoot id="sw" onCheckedChange={...}>
+ *     <SwitchThumb />
+ *   </SwitchRoot>
+ *   Dark mode
+ * </label>
+ * ```
+ */
+import { forwardRef } from "react";
+import type { ComponentRef, ComponentPropsWithoutRef } from "react";
+import { Switch as BaseSwitch } from "@base-ui/react/switch";
+import styles from "./switch.module.css";
+
+type BaseRootProps = ComponentPropsWithoutRef<typeof BaseSwitch.Root>;
+type BaseThumbProps = ComponentPropsWithoutRef<typeof BaseSwitch.Thumb>;
+
+export interface SwitchRootProps extends Omit<BaseRootProps, "className"> {
+  className?: string;
+}
+export interface SwitchThumbProps extends Omit<BaseThumbProps, "className"> {
+  className?: string;
+}
+
+export const SwitchRoot = forwardRef<ComponentRef<typeof BaseSwitch.Root>, SwitchRootProps>(function SwitchRoot(
+  { className, ...props },
+  ref,
+) {
+  return <BaseSwitch.Root ref={ref} className={`${styles["thumb-track"]} ${className ?? ""}`} {...props} />;
+});
+
+export const SwitchThumb = forwardRef<ComponentRef<typeof BaseSwitch.Thumb>, SwitchThumbProps>(function SwitchThumb(
+  { className, ...props },
+  ref,
+) {
+  return <BaseSwitch.Thumb ref={ref} className={`${styles.thumb} ${className ?? ""}`} {...props} />;
+});

package/src/switch/switch.module.css

@@ -0,0 +1,57 @@
+@layer components {
+  .root {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    cursor: pointer;
+    user-select: none;
+  }
+  .root[data-disabled] {
+    opacity: 0.44;
+    cursor: not-allowed;
+  }
+  .thumb-track {
+    position: relative;
+    width: 36px;
+    height: 20px;
+    border-radius: var(--radius-full);
+    background-color: var(--color-surface-3);
+    border: var(--border-width-base) solid var(--color-line);
+    transition:
+      background-color var(--duration-normal) var(--easing-standard),
+      border-color var(--duration-normal) var(--easing-standard),
+      box-shadow var(--duration-fast) var(--easing-standard);
+    outline: none;
+    flex-shrink: 0;
+  }
+  .thumb-track:focus-visible {
+    box-shadow: var(--shadow-focus);
+  }
+  .thumb-track[data-checked] {
+    background-color: var(--color-accent);
+    border-color: var(--color-accent);
+  }
+  .thumb-track[data-checked]:hover {
+    background-color: var(--color-accent-hover);
+    border-color: var(--color-accent-hover);
+  }
+  .thumb {
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 14px;
+    height: 14px;
+    border-radius: var(--radius-full);
+    background-color: #ffffff;
+    box-shadow: var(--shadow-xs);
+    transition: transform var(--duration-normal) var(--easing-spring);
+  }
+  .thumb-track[data-checked] .thumb {
+    transform: translateX(16px);
+  }
+  .label {
+    font-family: var(--font-mono);
+    font-size: var(--font-size-sm);
+    color: var(--color-primary);
+  }
+}

package/src/switch/switch.tsx

@@ -0,0 +1,33 @@
+import { useId } from "react";
+import type { ReactNode } from "react";
+import { Switch as BaseSwitch } from "@base-ui/react/switch";
+import styles from "./switch.module.css";
+
+export interface SwitchProps {
+  checked?: boolean;
+  defaultChecked?: boolean;
+  disabled?: boolean;
+  required?: boolean;
+  name?: string;
+  value?: string;
+  /** Called when checked state changes. `eventDetails` is the base-ui event details object. */
+  onCheckedChange?: (checked: boolean, eventDetails: unknown) => void;
+  children?: ReactNode;
+  id?: string;
+  className?: string;
+}
+
+export function Switch({ children, id, className, onCheckedChange, ...props }: SwitchProps) {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const switchId = id ?? useId();
+
+  return (
+    <label className={`${styles.root} ${className ?? ""}`} htmlFor={switchId}>
+      <BaseSwitch.Root id={switchId} className={styles["thumb-track"]} onCheckedChange={onCheckedChange as never} {...props}>
+        <BaseSwitch.Thumb className={styles.thumb} />
+      </BaseSwitch.Root>
+      {children && <span className={styles.label}>{children}</span>}
+    </label>
+  );
+}
+export { styles as SwitchStyles };

package/src/tabs/index.ts

@@ -0,0 +1,6 @@
+export { Tabs } from "./tabs";
+export type { TabsProps, TabItem } from "./tabs";
+
+export { TabsList, TabsTab, TabsPanel } from "./parts";
+export type { TabsListProps, TabsTabProps, TabsPanelProps } from "./parts";
+export { TabsStyles } from "./tabs";

package/src/tabs/parts.tsx

@@ -0,0 +1,48 @@
+/**
+ * Styled primitives for Tabs.
+ *
+ * @example
+ * ```tsx
+ * import { Tabs } from '@base-ui/react/tabs';
+ * import { TabsList, TabsTab, TabsPanel } from '@brijbyte/agentic-ui/tabs';
+ *
+ * <Tabs.Root defaultValue="a">
+ *   <TabsList>
+ *     <TabsTab value="a">Tab A</TabsTab>
+ *     <TabsTab value="b">Tab B</TabsTab>
+ *   </TabsList>
+ *   <TabsPanel value="a">Content A</TabsPanel>
+ *   <TabsPanel value="b">Content B</TabsPanel>
+ * </Tabs.Root>
+ * ```
+ */
+import { forwardRef } from "react";
+import type { ComponentRef, ComponentPropsWithoutRef } from "react";
+import { Tabs as BaseTabs } from "@base-ui/react/tabs";
+import styles from "./tabs.module.css";
+
+type BaseListProps = ComponentPropsWithoutRef<typeof BaseTabs.List>;
+type BaseTabProps = ComponentPropsWithoutRef<typeof BaseTabs.Tab>;
+type BasePanelProps = ComponentPropsWithoutRef<typeof BaseTabs.Panel>;
+
+export interface TabsListProps extends Omit<BaseListProps, "className"> {
+  className?: string;
+}
+export interface TabsTabProps extends Omit<BaseTabProps, "className"> {
+  className?: string;
+}
+export interface TabsPanelProps extends Omit<BasePanelProps, "className"> {
+  className?: string;
+}
+
+export const TabsList = forwardRef<ComponentRef<typeof BaseTabs.List>, TabsListProps>(function TabsList({ className, ...props }, ref) {
+  return <BaseTabs.List ref={ref} className={`${styles.list} ${className ?? ""}`} {...props} />;
+});
+
+export const TabsTab = forwardRef<ComponentRef<typeof BaseTabs.Tab>, TabsTabProps>(function TabsTab({ className, ...props }, ref) {
+  return <BaseTabs.Tab ref={ref} className={`${styles.tab} ${className ?? ""}`} {...props} />;
+});
+
+export const TabsPanel = forwardRef<ComponentRef<typeof BaseTabs.Panel>, TabsPanelProps>(function TabsPanel({ className, ...props }, ref) {
+  return <BaseTabs.Panel ref={ref} className={`${styles.panel} ${className ?? ""}`} {...props} />;
+});

package/src/tabs/tabs.module.css

@@ -0,0 +1,79 @@
+@layer components {
+  .root {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+  }
+  /* ─── Tab List ──────────────────────────────────────── */
+  .list {
+    display: flex;
+    align-items: center;
+    gap: var(--space-px);
+    border-bottom: var(--border-width-base) solid var(--color-line);
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+  .list::-webkit-scrollbar {
+    display: none;
+  }
+  /* ─── Tab trigger ────────────────────────────────────── */
+  .tab {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1-5);
+    padding: var(--space-1-5) var(--space-3);
+    font-family: var(--font-mono);
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-regular);
+    color: var(--color-tertiary);
+    border: none;
+    background: none;
+    cursor: pointer;
+    outline: none;
+    white-space: nowrap;
+    position: relative;
+    margin-bottom: -1px;
+    border-bottom: 3px solid transparent;
+    transition:
+      color var(--duration-fast) var(--easing-standard),
+      border-color var(--duration-fast) var(--easing-standard);
+    user-select: none;
+  }
+  .tab:hover:not([data-disabled]) {
+    color: var(--color-primary);
+    border-bottom-color: var(--color-line-strong);
+  }
+  .tab:focus-visible {
+    outline: none;
+  }
+  .tab:focus-visible::after {
+    content: "";
+    position: absolute;
+    inset: 2px 2px 8px;
+    border-radius: var(--radius-sm);
+    box-shadow: var(--shadow-focus);
+    pointer-events: none;
+  }
+  .tab[data-active] {
+    color: var(--color-primary);
+    font-weight: var(--font-weight-medium);
+    border-bottom-color: var(--color-accent);
+  }
+  .tab[data-disabled] {
+    opacity: 0.44;
+    cursor: not-allowed;
+  }
+  /* ─── Tab panel ─────────────────────────────────────── */
+  .panel {
+    padding-top: var(--space-4);
+    outline: none;
+    transition: opacity 150ms var(--easing-ease-out);
+  }
+  .panel[data-starting-style] {
+    opacity: 0;
+  }
+  .panel:focus-visible {
+    box-shadow: var(--shadow-focus);
+    border-radius: var(--radius-sm);
+  }
+}