@brijbyte/agentic-ui 0.0.1-beta → 0.0.1

package/src/styles/tailwind-theme.css

@@ -0,0 +1,142 @@
+/**
+ * @brijbyte/agentic-ui — Tailwind v4 theme integration
+ *
+ * Import this AFTER `@import "tailwindcss"` and AFTER the agentic-ui
+ * token/reset CSS in your app's CSS entry file:
+ *
+ *   @import "tailwindcss";
+ *   @import "@brijbyte/agentic-ui/styles/tokens.css";
+ *   @import "@brijbyte/agentic-ui/styles/reset.css";
+ *   @import "@brijbyte/agentic-ui/tailwind-theme";
+ *
+ * `@theme inline` tells Tailwind v4 to generate utility classes that
+ * reference our CSS custom properties directly — dark mode and theme
+ * overrides work automatically without any Tailwind configuration.
+ *
+ * Generated utility examples:
+ *   bg-bg-base        → background-color: var(--color-bg-base)
+ *   text-text-primary → color: var(--color-text-primary)
+ *   border-border-base→ border-color: var(--color-border-base)
+ *   font-mono         → font-family: var(--font-mono)
+ *   rounded-md        → border-radius: var(--radius-md)
+ *   shadow-sm         → box-shadow: var(--shadow-sm)
+ */
+
+@theme inline {
+  /* ── Backgrounds ────────────────────────────────────────────── */
+  --color-bg-base: var(--color-bg-base);
+  --color-bg-elevated: var(--color-bg-elevated);
+  --color-bg-sunken: var(--color-bg-sunken);
+  --color-bg-overlay: var(--color-bg-overlay);
+  --color-bg-sidebar: var(--color-bg-sidebar);
+
+  /* ── Surfaces ───────────────────────────────────────────────── */
+  --color-surface-1: var(--color-surface-1);
+  --color-surface-2: var(--color-surface-2);
+  --color-surface-3: var(--color-surface-3);
+  --color-surface-hover: var(--color-surface-hover);
+  --color-surface-active: var(--color-surface-active);
+  --color-surface-selected: var(--color-surface-selected);
+
+  /* ── Text ───────────────────────────────────────────────────── */
+  --color-text-primary: var(--color-text-primary);
+  --color-text-secondary: var(--color-text-secondary);
+  --color-text-tertiary: var(--color-text-tertiary);
+  --color-text-disabled: var(--color-text-disabled);
+  --color-text-inverse: var(--color-text-inverse);
+  --color-text-on-accent: var(--color-text-on-accent);
+  --color-text-code: var(--color-text-code);
+
+  /* ── Borders ────────────────────────────────────────────────── */
+  --color-border-base: var(--color-border-base);
+  --color-border-strong: var(--color-border-strong);
+  --color-border-subtle: var(--color-border-subtle);
+  --color-border-focus: var(--color-border-focus);
+
+  /* ── Accent (macOS blue) ────────────────────────────────────── */
+  --color-accent: var(--color-accent);
+  --color-accent-hover: var(--color-accent-hover);
+  --color-accent-pressed: var(--color-accent-pressed);
+  --color-accent-tint: var(--color-accent-tint);
+  --color-accent-tint-hover: var(--color-accent-tint-hover);
+
+  /* ── Focus ──────────────────────────────────────────────────── */
+  --color-focus-ring: var(--color-focus-ring);
+
+  /* ── Status ─────────────────────────────────────────────────── */
+  --color-success-bg: var(--color-success-bg);
+  --color-success-border: var(--color-success-border);
+  --color-success-text: var(--color-success-text);
+  --color-success-solid: var(--color-success-solid);
+
+  --color-warning-bg: var(--color-warning-bg);
+  --color-warning-border: var(--color-warning-border);
+  --color-warning-text: var(--color-warning-text);
+  --color-warning-solid: var(--color-warning-solid);
+
+  --color-error-bg: var(--color-error-bg);
+  --color-error-border: var(--color-error-border);
+  --color-error-text: var(--color-error-text);
+  --color-error-solid: var(--color-error-solid);
+
+  --color-info-bg: var(--color-info-bg);
+  --color-info-border: var(--color-info-border);
+  --color-info-text: var(--color-info-text);
+  --color-info-solid: var(--color-info-solid);
+
+  /* ── Code syntax ────────────────────────────────────────────── */
+  --color-code-bg: var(--color-code-bg);
+  --color-code-border: var(--color-code-border);
+  --color-code-keyword: var(--color-code-keyword);
+  --color-code-string: var(--color-code-string);
+  --color-code-function: var(--color-code-function);
+
+  /* ── Fonts ──────────────────────────────────────────────────── */
+  --font-display: var(--font-display);
+  --font-mono: var(--font-mono);
+  --font-sans: var(--font-sans);
+
+  /* ── Border radius ──────────────────────────────────────────── */
+  --radius-none: var(--radius-none);
+  --radius-sm: var(--radius-sm);
+  --radius-md: var(--radius-md);
+  --radius-lg: var(--radius-lg);
+  --radius-xl: var(--radius-xl);
+  --radius-2xl: var(--radius-2xl);
+  --radius-full: var(--radius-full);
+
+  /* ── Shadows ────────────────────────────────────────────────── */
+  --shadow-xs: var(--shadow-xs);
+  --shadow-sm: var(--shadow-sm);
+  --shadow-md: var(--shadow-md);
+  --shadow-lg: var(--shadow-lg);
+  --shadow-xl: var(--shadow-xl);
+  --shadow-popover: var(--shadow-popover);
+  --shadow-focus: var(--shadow-focus);
+  --shadow-inset: var(--shadow-inset);
+
+  /* ── Line heights ───────────────────────────────────────────── */
+  --leading-tight: var(--line-height-tight);
+  --leading-normal: var(--line-height-normal);
+  --leading-relaxed: var(--line-height-relaxed);
+
+  /* ── Letter spacing ─────────────────────────────────────────── */
+  --tracking-tight: var(--letter-spacing-tight);
+  --tracking-normal: var(--letter-spacing-normal);
+  --tracking-wide: var(--letter-spacing-wide);
+  --tracking-wider: var(--letter-spacing-wider);
+
+  /* ── Easing ─────────────────────────────────────────────────── */
+  --ease-standard: var(--easing-standard);
+  --ease-spring: var(--easing-spring);
+  --ease-in: var(--easing-ease-in);
+  --ease-out: var(--easing-ease-out);
+  --ease-linear: var(--easing-linear);
+
+  /* ── Z-index ────────────────────────────────────────────────── */
+  --z-dropdown: var(--z-dropdown);
+  --z-overlay: var(--z-overlay);
+  --z-modal: var(--z-modal);
+  --z-toast: var(--z-toast);
+  --z-tooltip: var(--z-tooltip);
+}

package/src/styles/tokens.css

@@ -0,0 +1,400 @@
+/**
+ * @brijbyte/agentic-ui — Design Tokens
+ *
+ * macOS/iOS-inspired developer-focused design system.
+ * Monospace-first, semantic color tokens, supports light & dark modes.
+ */
+@layer base {
+  :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 (macOS vibrancy-inspired) */
+    --color-bg-base: #f5f5f5;
+    --color-bg-elevated: #ffffff;
+    --color-bg-sunken: #ebebeb;
+    --color-bg-overlay: rgba(255, 255, 255, 0.92);
+    --color-bg-sidebar: rgba(246, 246, 246, 0.95);
+
+    /* Surface (card/panel backgrounds) */
+    --color-surface-1: #ffffff;
+    --color-surface-2: #f9f9f9;
+    --color-surface-3: #f4f4f4;
+    --color-surface-hover: rgba(0, 0, 0, 0.04);
+    --color-surface-active: rgba(0, 0, 0, 0.07);
+    --color-surface-selected: rgba(0, 120, 212, 0.1);
+
+    /* Text */
+    --color-text-primary: rgba(0, 0, 0, 0.88);
+    --color-text-secondary: rgba(0, 0, 0, 0.55);
+    --color-text-tertiary: rgba(0, 0, 0, 0.36);
+    --color-text-disabled: rgba(0, 0, 0, 0.24);
+    --color-text-inverse: rgba(255, 255, 255, 0.95);
+    --color-text-on-accent: #ffffff;
+    --color-text-code: #0f766e;
+
+    /* Borders */
+    --color-border-base: rgba(0, 0, 0, 0.12);
+    --color-border-strong: rgba(0, 0, 0, 0.22);
+    --color-border-subtle: rgba(0, 0, 0, 0.06);
+    --color-border-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-bg-base), 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-bg: #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-scrollbar-thumb: rgba(0, 0, 0, 0.2);
+    --color-scrollbar-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-bg-base: #1c1c1e;
+      --color-bg-elevated: #2c2c2e;
+      --color-bg-sunken: #141416;
+      --color-bg-overlay: rgba(30, 30, 32, 0.92);
+      --color-bg-sidebar: rgba(28, 28, 30, 0.95);
+
+      /* Surface */
+      --color-surface-1: #2c2c2e;
+      --color-surface-2: #3a3a3c;
+      --color-surface-3: #48484a;
+      --color-surface-hover: rgba(255, 255, 255, 0.06);
+      --color-surface-active: rgba(255, 255, 255, 0.1);
+      --color-surface-selected: rgba(10, 132, 255, 0.16);
+
+      /* Text */
+      --color-text-primary: rgba(255, 255, 255, 0.92);
+      --color-text-secondary: rgba(255, 255, 255, 0.55);
+      --color-text-tertiary: rgba(255, 255, 255, 0.36);
+      --color-text-disabled: rgba(255, 255, 255, 0.24);
+      --color-text-inverse: rgba(0, 0, 0, 0.88);
+      --color-text-on-accent: #ffffff;
+      --color-text-code: #2dd4bf;
+
+      /* Borders */
+      --color-border-base: rgba(255, 255, 255, 0.12);
+      --color-border-strong: rgba(255, 255, 255, 0.22);
+      --color-border-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-bg-base), 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-bg: #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-scrollbar-thumb: rgba(255, 255, 255, 0.2);
+      --color-scrollbar-track: transparent;
+    }
+  }
+
+  [data-theme="dark"] {
+    color-scheme: dark;
+
+    --color-bg-base: #1c1c1e;
+    --color-bg-elevated: #2c2c2e;
+    --color-bg-sunken: #141416;
+    --color-bg-overlay: rgba(30, 30, 32, 0.92);
+    --color-bg-sidebar: rgba(28, 28, 30, 0.95);
+
+    --color-surface-1: #2c2c2e;
+    --color-surface-2: #3a3a3c;
+    --color-surface-3: #48484a;
+    --color-surface-hover: rgba(255, 255, 255, 0.06);
+    --color-surface-active: rgba(255, 255, 255, 0.1);
+    --color-surface-selected: rgba(10, 132, 255, 0.16);
+
+    --color-text-primary: rgba(255, 255, 255, 0.92);
+    --color-text-secondary: rgba(255, 255, 255, 0.55);
+    --color-text-tertiary: rgba(255, 255, 255, 0.36);
+    --color-text-disabled: rgba(255, 255, 255, 0.24);
+    --color-text-inverse: rgba(0, 0, 0, 0.88);
+    --color-text-on-accent: #ffffff;
+    --color-text-code: #2dd4bf;
+
+    --color-border-base: rgba(255, 255, 255, 0.12);
+    --color-border-strong: rgba(255, 255, 255, 0.22);
+    --color-border-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-bg-base), 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-bg: #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-scrollbar-thumb: rgba(255, 255, 255, 0.2);
+    --color-scrollbar-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,67 @@
+@layer theme, base, components, utilities;
+
+@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-border-base);
+    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-text-primary);
+  }
+}