From 910b266cd1aa0b56babdbbed2b7e58cfacdaf547 Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Tue, 19 May 2026 02:20:05 +0000
Subject: [PATCH 1/3] feat(design-library): add form input and navigation
 components

Add 7 Tier 1 design library components ported from the platform repo:
- Input + Textarea (single-line and multi-line text fields with labels, icons, error/helper text)
- Toggle (on/off switch with label and helper text)
- Checkbox (tri-state Radix checkbox with label support)
- Radio (generic RadioGroup + Radio with Radix primitives)
- Tabs (compound Radix tabs with themed styling)
- SegmentControl (pill-shaped segmented control using Button)
- Slider (single-thumb and range mode with Radix primitives)

Convention compliance applied during port:
- Removed all 'use client' directives (Vite SPA)
- Converted forwardRef to ref-as-prop (React 19)
- Function declarations for all components
- data-slot attributes on all root elements
- Relative .js imports for NodeNext resolution
- Named exports only (no default exports)
- Exported variant functions and helper utilities for testing

Part of LUM-1543

Co-Authored-By: ashlee@vellum.ai <ashlee@vellum.ai>
---
 packages/design-library/bun.lock              |  24 ++
 packages/design-library/package.json          |   4 +
 .../src/components/checkbox.tsx               | 139 ++++++++
 .../design-library/src/components/input.tsx   | 299 ++++++++++++++++++
 .../design-library/src/components/radio.tsx   | 177 +++++++++++
 .../src/components/segment-control.tsx        |  96 ++++++
 .../design-library/src/components/slider.tsx  | 161 ++++++++++
 .../design-library/src/components/tabs.tsx    | 102 ++++++
 .../design-library/src/components/toggle.tsx  | 127 ++++++++
 packages/design-library/src/index.ts          |  50 +++
 10 files changed, 1179 insertions(+)
 create mode 100644 packages/design-library/src/components/checkbox.tsx
 create mode 100644 packages/design-library/src/components/input.tsx
 create mode 100644 packages/design-library/src/components/radio.tsx
 create mode 100644 packages/design-library/src/components/segment-control.tsx
 create mode 100644 packages/design-library/src/components/slider.tsx
 create mode 100644 packages/design-library/src/components/tabs.tsx
 create mode 100644 packages/design-library/src/components/toggle.tsx

diff --git a/packages/design-library/bun.lock b/packages/design-library/bun.lock
index 258385ed3f..7b5e52302b 100644
--- a/packages/design-library/bun.lock
+++ b/packages/design-library/bun.lock
@@ -5,8 +5,12 @@
     "": {
       "name": "@vellum/design-library",
       "dependencies": {
+        "@radix-ui/react-checkbox": "1.3.3",
         "@radix-ui/react-popover": "1.1.15",
+        "@radix-ui/react-radio-group": "1.3.8",
+        "@radix-ui/react-slider": "1.3.6",
         "@radix-ui/react-slot": "1.2.4",
+        "@radix-ui/react-tabs": "1.1.13",
         "class-variance-authority": "0.7.1",
         "clsx": "2.1.1",
         "lucide-react": "1.16.0",
@@ -233,14 +237,22 @@
 
     "@oxc-resolver/binding-win32-x64-msvc": ["@oxc-resolver/binding-win32-x64-msvc@11.19.1", "", { "os": "win32", "cpu": "x64" }, "sha512-6hIU3RQu45B+VNTY4Ru8ppFwjVS/S5qwYyGhBotmjxfEKk41I2DlGtRfGJndZ5+6lneE2pwloqunlOyZuX/XAw=="],
 
+    "@radix-ui/number": ["@radix-ui/number@1.1.1", "", {}, "sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g=="],
+
     "@radix-ui/primitive": ["@radix-ui/primitive@1.1.3", "", {}, "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg=="],
 
     "@radix-ui/react-arrow": ["@radix-ui/react-arrow@1.1.7", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w=="],
 
+    "@radix-ui/react-checkbox": ["@radix-ui/react-checkbox@1.3.3", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-use-previous": "1.1.1", "@radix-ui/react-use-size": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-wBbpv+NQftHDdG86Qc0pIyXk5IR3tM8Vd0nWLKDcX8nNn4nXFOFwsKuqw2okA/1D/mpaAkmuyndrPJTYDNZtFw=="],
+
+    "@radix-ui/react-collection": ["@radix-ui/react-collection@1.1.7", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw=="],
+
     "@radix-ui/react-compose-refs": ["@radix-ui/react-compose-refs@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg=="],
 
     "@radix-ui/react-context": ["@radix-ui/react-context@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA=="],
 
+    "@radix-ui/react-direction": ["@radix-ui/react-direction@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw=="],
+
     "@radix-ui/react-dismissable-layer": ["@radix-ui/react-dismissable-layer@1.1.11", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-escape-keydown": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg=="],
 
     "@radix-ui/react-focus-guards": ["@radix-ui/react-focus-guards@1.1.3", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw=="],
@@ -259,8 +271,16 @@
 
     "@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
 
+    "@radix-ui/react-radio-group": ["@radix-ui/react-radio-group@1.3.8", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-roving-focus": "1.1.11", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-use-previous": "1.1.1", "@radix-ui/react-use-size": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-VBKYIYImA5zsxACdisNQ3BjCBfmbGH3kQlnFVqlWU4tXwjy7cGX8ta80BcrO+WJXIn5iBylEH3K6ZTlee//lgQ=="],
+
+    "@radix-ui/react-roving-focus": ["@radix-ui/react-roving-focus@1.1.11", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-collection": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-controllable-state": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA=="],
+
+    "@radix-ui/react-slider": ["@radix-ui/react-slider@1.3.6", "", { "dependencies": { "@radix-ui/number": "1.1.1", "@radix-ui/primitive": "1.1.3", "@radix-ui/react-collection": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-use-layout-effect": "1.1.1", "@radix-ui/react-use-previous": "1.1.1", "@radix-ui/react-use-size": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-JPYb1GuM1bxfjMRlNLE+BcmBC8onfCi60Blk7OBqi2MLTFdS+8401U4uFjnwkOr49BLmXxLC6JHkvAsx5OJvHw=="],
+
     "@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.4", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA=="],
 
+    "@radix-ui/react-tabs": ["@radix-ui/react-tabs@1.1.13", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-roving-focus": "1.1.11", "@radix-ui/react-use-controllable-state": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-7xdcatg7/U+7+Udyoj2zodtI9H/IIopqo+YOIcZOq1nJwXWBZ9p8xiu5llXlekDbZkca79a/fozEYQXIA4sW6A=="],
+
     "@radix-ui/react-use-callback-ref": ["@radix-ui/react-use-callback-ref@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg=="],
 
     "@radix-ui/react-use-controllable-state": ["@radix-ui/react-use-controllable-state@1.2.2", "", { "dependencies": { "@radix-ui/react-use-effect-event": "0.0.2", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg=="],
@@ -271,6 +291,8 @@
 
     "@radix-ui/react-use-layout-effect": ["@radix-ui/react-use-layout-effect@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ=="],
 
+    "@radix-ui/react-use-previous": ["@radix-ui/react-use-previous@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ=="],
+
     "@radix-ui/react-use-rect": ["@radix-ui/react-use-rect@1.1.1", "", { "dependencies": { "@radix-ui/rect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w=="],
 
     "@radix-ui/react-use-size": ["@radix-ui/react-use-size@1.1.1", "", { "dependencies": { "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ=="],
@@ -675,6 +697,8 @@
 
     "@babel/helper-compilation-targets/semver": ["semver@6.3.1", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="],
 
+    "@radix-ui/react-collection/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
+
     "@radix-ui/react-popover/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
 
     "@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
diff --git a/packages/design-library/package.json b/packages/design-library/package.json
index 89a64943ba..0e314ed371 100644
--- a/packages/design-library/package.json
+++ b/packages/design-library/package.json
@@ -36,8 +36,12 @@
     "vite": "8.0.11"
   },
   "dependencies": {
+    "@radix-ui/react-checkbox": "1.3.3",
     "@radix-ui/react-popover": "1.1.15",
+    "@radix-ui/react-radio-group": "1.3.8",
+    "@radix-ui/react-slider": "1.3.6",
     "@radix-ui/react-slot": "1.2.4",
+    "@radix-ui/react-tabs": "1.1.13",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "lucide-react": "1.16.0",
diff --git a/packages/design-library/src/components/checkbox.tsx b/packages/design-library/src/components/checkbox.tsx
new file mode 100644
index 0000000000..021fdc8300
--- /dev/null
+++ b/packages/design-library/src/components/checkbox.tsx
@@ -0,0 +1,139 @@
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check, Minus } from "lucide-react";
+import { type ComponentProps, type ReactNode, useId } from "react";
+
+import { Typography } from "./typography.js";
+import { cn } from "../utils/cn.js";
+
+export type CheckboxState = boolean | "indeterminate";
+
+export interface CheckboxProps
+  extends Omit<ComponentProps<typeof CheckboxPrimitive.Root>, "checked" | "onCheckedChange"> {
+  checked: CheckboxState;
+  onCheckedChange?: (checked: CheckboxState) => void;
+  label?: ReactNode;
+  helperText?: ReactNode;
+  "aria-label"?: string;
+}
+
+/**
+ * Checkbox wrapping `@radix-ui/react-checkbox`. Inherits keyboard handling,
+ * focus management, and a11y attributes (`aria-checked`, `data-state`).
+ *
+ * - Pass `checked` / `onCheckedChange` for controlled use.
+ * - Pass `"indeterminate"` as `checked` to render the tri-state dash.
+ * - Pass `label` for a clickable label, `helperText` for secondary copy.
+ */
+function Checkbox({
+  checked,
+  onCheckedChange,
+  label,
+  helperText,
+  disabled = false,
+  id,
+  name,
+  className,
+  ref,
+  "aria-label": ariaLabel,
+  ...rest
+}: CheckboxProps) {
+  const reactId = useId();
+  const resolvedId = id ?? reactId;
+  const labelId = label ? `${resolvedId}-label` : undefined;
+  const helperTextId = helperText ? `${resolvedId}-helper` : undefined;
+
+  const isIndeterminate = checked === "indeterminate";
+
+  const rootClasses = cn(
+    "inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-[4px]",
+    "border transition-colors outline-none cursor-pointer",
+    "focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-0",
+    "bg-[var(--surface-lift)] border-[var(--border-base)]",
+    "data-[state=checked]:bg-[var(--system-positive-strong)] data-[state=checked]:border-transparent",
+    "data-[state=indeterminate]:bg-[var(--system-positive-strong)] data-[state=indeterminate]:border-transparent",
+    "disabled:cursor-not-allowed disabled:bg-[var(--surface-overlay)]",
+    "disabled:data-[state=checked]:bg-[var(--surface-overlay)]",
+    "disabled:data-[state=indeterminate]:bg-[var(--surface-overlay)]",
+    "disabled:border-[var(--border-base)]",
+  );
+
+  const iconClasses = cn(
+    "h-3 w-3",
+    disabled
+      ? "text-[color:var(--content-disabled)]"
+      : "text-[color:var(--aux-white)]",
+  );
+
+  const checkbox = (
+    <CheckboxPrimitive.Root
+      {...rest}
+      ref={ref}
+      id={resolvedId}
+      name={name}
+      checked={checked}
+      disabled={disabled}
+      onCheckedChange={onCheckedChange}
+      aria-label={!label ? ariaLabel : undefined}
+      aria-labelledby={label ? labelId : undefined}
+      aria-describedby={helperTextId}
+      data-slot="checkbox"
+      className={rootClasses}
+    >
+      <CheckboxPrimitive.Indicator
+        forceMount
+        className="flex items-center justify-center"
+      >
+        {isIndeterminate ? (
+          <Minus className={iconClasses} strokeWidth={3} aria-hidden="true" />
+        ) : checked === true ? (
+          <Check className={iconClasses} strokeWidth={3} aria-hidden="true" />
+        ) : null}
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+
+  if (!label && !helperText) {
+    return <span className={className}>{checkbox}</span>;
+  }
+
+  return (
+    <div
+      data-slot="checkbox"
+      className={cn(
+        "flex gap-2.5",
+        helperText ? "items-start" : "items-center",
+        className,
+      )}
+    >
+      {checkbox}
+      <div className="flex min-w-0 flex-col gap-0.5">
+        {label ? (
+          <Typography
+            as="label"
+            variant="body-medium-default"
+            id={labelId}
+            htmlFor={resolvedId}
+            className={cn(
+              "cursor-pointer select-none",
+              disabled
+                ? "cursor-not-allowed text-[color:var(--content-disabled)]"
+                : "text-[color:var(--content-default)]",
+            )}
+          >
+            {label}
+          </Typography>
+        ) : null}
+        {helperText ? (
+          <span
+            id={helperTextId}
+            className="text-body-small-default text-[color:var(--content-secondary)]"
+          >
+            {helperText}
+          </span>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+export { Checkbox };
diff --git a/packages/design-library/src/components/input.tsx b/packages/design-library/src/components/input.tsx
new file mode 100644
index 0000000000..633a4f11be
--- /dev/null
+++ b/packages/design-library/src/components/input.tsx
@@ -0,0 +1,299 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import {
+  type ComponentProps,
+  type ReactNode,
+  useId,
+} from "react";
+
+import { Typography } from "./typography.js";
+import { cn } from "../utils/cn.js";
+
+/**
+ * Shared text-input primitive backing both `Input` (single-line) and
+ * `Textarea` (multi-line). Visual parity with the macOS design system input:
+ * an `--surface-active` fill, a `--border-base` hairline that shifts to
+ * `--border-element` on focus (or `--system-negative-strong` on error), and
+ * `--content-default` text with a `--content-tertiary` placeholder.
+ *
+ * All colors resolve via CSS variable tokens, so the field inherits the
+ * app's light/dark theming automatically.
+ */
+const fieldVariants = cva(
+  [
+    "block w-full rounded-md border bg-[var(--field-bg)]",
+    "text-body-medium-lighter text-[var(--content-default)]",
+    "placeholder:text-[var(--content-tertiary)]",
+    "transition-[border-color,background-color] duration-150 ease-out",
+    "outline-none",
+    "disabled:cursor-not-allowed disabled:opacity-60",
+  ].join(" "),
+  {
+    variants: {
+      invalid: {
+        true: [
+          "border-[var(--system-negative-strong)]",
+          "focus-visible:border-[var(--system-negative-strong)]",
+        ].join(" "),
+        false: [
+          "border-[var(--field-border)]",
+          "focus-visible:border-[var(--border-active)]",
+        ].join(" "),
+      },
+      density: {
+        input: "h-9 px-3 py-1.5",
+        textarea: "min-h-[72px] px-3 py-2 resize-y",
+      },
+      hasLeftIcon: { true: "", false: "" },
+      hasRightIcon: { true: "", false: "" },
+    },
+    compoundVariants: [
+      { density: "input", hasLeftIcon: true, class: "pl-9" },
+      { density: "input", hasRightIcon: true, class: "pr-9" },
+    ],
+    defaultVariants: {
+      invalid: false,
+      density: "input",
+      hasLeftIcon: false,
+      hasRightIcon: false,
+    },
+  },
+);
+
+type FieldVariantProps = VariantProps<typeof fieldVariants>;
+
+interface FieldWrapperProps {
+  readonly id: string;
+  readonly label?: ReactNode;
+  readonly helperText?: ReactNode;
+  readonly errorText?: ReactNode;
+  readonly fullWidth: boolean;
+  readonly disabled: boolean;
+  readonly className?: string;
+  readonly children: ReactNode;
+}
+
+function FieldWrapper({
+  id,
+  label,
+  helperText,
+  errorText,
+  fullWidth,
+  disabled,
+  className,
+  children,
+}: FieldWrapperProps) {
+  const descriptionId = errorText
+    ? `${id}-error`
+    : helperText
+      ? `${id}-helper`
+      : undefined;
+
+  return (
+    <div
+      data-slot="field-wrapper"
+      className={cn(
+        "flex flex-col gap-1.5",
+        fullWidth ? "w-full" : "w-fit",
+        className,
+      )}
+    >
+      {label ? (
+        <Typography
+          as="label"
+          variant="body-small-default"
+          htmlFor={id}
+          className={cn(
+            "text-[var(--content-secondary)]",
+            disabled && "opacity-60",
+          )}
+        >
+          {label}
+        </Typography>
+      ) : null}
+      {children}
+      {errorText ? (
+        <span
+          id={descriptionId}
+          role="alert"
+          data-testid="input-error"
+          className="text-body-small-default text-[var(--system-negative-strong)]"
+        >
+          {errorText}
+        </span>
+      ) : helperText ? (
+        <span
+          id={descriptionId}
+          className="text-body-small-default text-[var(--content-tertiary)]"
+        >
+          {helperText}
+        </span>
+      ) : null}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Input (single-line)
+// ---------------------------------------------------------------------------
+
+export interface InputProps
+  extends Omit<ComponentProps<"input">, "size"> {
+  label?: ReactNode;
+  helperText?: ReactNode;
+  errorText?: ReactNode;
+  leftIcon?: ReactNode;
+  rightIcon?: ReactNode;
+  fullWidth?: boolean;
+  wrapperClassName?: string;
+}
+
+function Input({
+  label,
+  helperText,
+  errorText,
+  leftIcon,
+  rightIcon,
+  fullWidth = false,
+  wrapperClassName,
+  className,
+  id,
+  disabled,
+  ref,
+  "aria-invalid": ariaInvalid,
+  "aria-describedby": ariaDescribedBy,
+  ...rest
+}: InputProps) {
+  const reactId = useId();
+  const inputId = id ?? `input-${reactId}`;
+  const isInvalid = errorText != null || ariaInvalid === true;
+  const describedBy = errorText
+    ? `${inputId}-error`
+    : helperText
+      ? `${inputId}-helper`
+      : undefined;
+
+  return (
+    <FieldWrapper
+      id={inputId}
+      label={label}
+      helperText={helperText}
+      errorText={errorText}
+      fullWidth={fullWidth}
+      disabled={disabled === true}
+      className={wrapperClassName}
+    >
+      <div className="relative flex items-center">
+        {leftIcon ? (
+          <span
+            aria-hidden
+            data-testid="input-left-icon"
+            className="pointer-events-none absolute left-3 flex items-center text-[var(--content-tertiary)]"
+          >
+            {leftIcon}
+          </span>
+        ) : null}
+        <input
+          {...rest}
+          ref={ref}
+          id={inputId}
+          disabled={disabled}
+          aria-invalid={isInvalid || undefined}
+          aria-describedby={ariaDescribedBy ?? describedBy}
+          data-slot="input"
+          className={cn(
+            fieldVariants({
+              invalid: isInvalid,
+              density: "input",
+              hasLeftIcon: leftIcon != null,
+              hasRightIcon: rightIcon != null,
+            }),
+            className,
+          )}
+        />
+        {rightIcon ? (
+          <span
+            aria-hidden
+            data-testid="input-right-icon"
+            className="pointer-events-none absolute right-3 flex items-center text-[var(--content-tertiary)]"
+          >
+            {rightIcon}
+          </span>
+        ) : null}
+      </div>
+    </FieldWrapper>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Textarea (multi-line)
+// ---------------------------------------------------------------------------
+
+export interface TextareaProps extends ComponentProps<"textarea"> {
+  label?: ReactNode;
+  helperText?: ReactNode;
+  errorText?: ReactNode;
+  fullWidth?: boolean;
+  wrapperClassName?: string;
+}
+
+function Textarea({
+  label,
+  helperText,
+  errorText,
+  fullWidth = false,
+  wrapperClassName,
+  className,
+  id,
+  disabled,
+  ref,
+  "aria-invalid": ariaInvalid,
+  "aria-describedby": ariaDescribedBy,
+  ...rest
+}: TextareaProps) {
+  const reactId = useId();
+  const textareaId = id ?? `textarea-${reactId}`;
+  const isInvalid = errorText != null || ariaInvalid === true;
+  const describedBy = errorText
+    ? `${textareaId}-error`
+    : helperText
+      ? `${textareaId}-helper`
+      : undefined;
+
+  return (
+    <FieldWrapper
+      id={textareaId}
+      label={label}
+      helperText={helperText}
+      errorText={errorText}
+      fullWidth={fullWidth}
+      disabled={disabled === true}
+      className={wrapperClassName}
+    >
+      <textarea
+        {...rest}
+        ref={ref}
+        id={textareaId}
+        disabled={disabled}
+        aria-invalid={isInvalid || undefined}
+        aria-describedby={ariaDescribedBy ?? describedBy}
+        data-slot="textarea"
+        className={cn(
+          fieldVariants({
+            invalid: isInvalid,
+            density: "textarea",
+            hasLeftIcon: false,
+            hasRightIcon: false,
+          }),
+          className,
+        )}
+      />
+    </FieldWrapper>
+  );
+}
+
+export {
+  Input,
+  Textarea,
+  fieldVariants,
+  type FieldVariantProps,
+};
diff --git a/packages/design-library/src/components/radio.tsx b/packages/design-library/src/components/radio.tsx
new file mode 100644
index 0000000000..6fa0f5ed19
--- /dev/null
+++ b/packages/design-library/src/components/radio.tsx
@@ -0,0 +1,177 @@
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { type CSSProperties, type ReactNode, useId } from "react";
+
+import { Typography } from "./typography.js";
+import { cn } from "../utils/cn.js";
+
+export interface RadioGroupProps<T extends string> {
+  readonly value: T;
+  readonly onValueChange: (value: T) => void;
+  readonly name?: string;
+  readonly disabled?: boolean;
+  readonly orientation?: "vertical" | "horizontal";
+  readonly required?: boolean;
+  readonly className?: string;
+  readonly style?: CSSProperties;
+  readonly children: ReactNode;
+  readonly "aria-label"?: string;
+  readonly "aria-labelledby"?: string;
+}
+
+/**
+ * Single-select radio group wrapping `@radix-ui/react-radio-group`.
+ * Preserves Radix's roving tabindex / arrow-key navigation and
+ * `aria-checked` semantics. Generic over `T extends string` so callers
+ * can narrow the value type.
+ */
+function RadioGroup<T extends string>({
+  value,
+  onValueChange,
+  name,
+  disabled,
+  orientation = "vertical",
+  required,
+  className,
+  style,
+  children,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+}: RadioGroupProps<T>) {
+  const layoutClass =
+    orientation === "horizontal"
+      ? "flex flex-row flex-wrap items-center gap-4"
+      : "flex flex-col gap-2.5";
+
+  return (
+    <RadioGroupPrimitive.Root
+      value={value}
+      onValueChange={(next) => onValueChange(next as T)}
+      name={name}
+      disabled={disabled}
+      required={required}
+      orientation={orientation}
+      className={cn(layoutClass, className)}
+      style={style}
+      aria-label={ariaLabel}
+      aria-labelledby={ariaLabelledBy}
+      data-slot="radio-group"
+    >
+      {children}
+    </RadioGroupPrimitive.Root>
+  );
+}
+
+export interface RadioProps<T extends string> {
+  readonly value: T;
+  readonly label?: ReactNode;
+  readonly helperText?: ReactNode;
+  readonly disabled?: boolean;
+  readonly id?: string;
+  readonly className?: string;
+  readonly "aria-label"?: string;
+}
+
+/**
+ * Single radio option for use inside a `RadioGroup`. Outer ring is 16×16
+ * with an 8×8 inner dot when selected.
+ */
+function Radio<T extends string>({
+  value,
+  label,
+  helperText,
+  disabled,
+  id,
+  className,
+  "aria-label": ariaLabel,
+}: RadioProps<T>) {
+  const reactId = useId();
+  const inputId = id ?? `radio-${reactId}`;
+  const helperId = helperText ? `${inputId}-helper` : undefined;
+
+  const ringSelectedColor = disabled
+    ? "var(--content-disabled)"
+    : "var(--system-positive-strong)";
+  const ringBg = disabled ? "var(--surface-overlay)" : "transparent";
+
+  return (
+    <div
+      data-slot="radio"
+      className={cn(
+        "flex gap-2",
+        helperText ? "items-start" : "items-center",
+        className,
+      )}
+    >
+      <RadioGroupPrimitive.Item
+        id={inputId}
+        value={value}
+        disabled={disabled}
+        aria-label={!label ? ariaLabel : undefined}
+        aria-describedby={helperId}
+        className={cn(
+          "relative inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full border transition-colors",
+          "border-[color:var(--radio-border)]",
+          "[--radio-border:var(--border-element)]",
+          "data-[state=checked]:border-transparent",
+          "disabled:[--radio-border:var(--content-disabled)]",
+          "disabled:cursor-not-allowed",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1",
+          "focus-visible:ring-[color-mix(in_srgb,var(--system-positive-strong)_30%,transparent)]",
+        )}
+        style={{ background: ringBg }}
+      >
+        <RadioGroupPrimitive.Indicator
+          forceMount
+          className="flex h-full w-full items-center justify-center rounded-full data-[state=unchecked]:opacity-0"
+          style={{ background: ringSelectedColor }}
+        >
+          <span
+            aria-hidden
+            className="block h-2 w-2 rounded-full"
+            style={{
+              background: disabled
+                ? "var(--surface-overlay)"
+                : "var(--aux-white)",
+            }}
+          />
+        </RadioGroupPrimitive.Indicator>
+      </RadioGroupPrimitive.Item>
+      {(label || helperText) && (
+        <div className="flex min-w-0 flex-col gap-0.5">
+          {label ? (
+            <Typography
+              as="label"
+              variant="body-medium-lighter"
+              htmlFor={inputId}
+              className={cn(
+                disabled ? "cursor-not-allowed" : "cursor-pointer",
+                disabled
+                  ? "text-[color:var(--content-disabled)]"
+                  : "text-[color:var(--content-default)]",
+              )}
+            >
+              {label}
+            </Typography>
+          ) : null}
+          {helperText ? (
+            <Typography
+              as="span"
+              variant="body-small-default"
+              id={helperId}
+              className={cn(
+                "leading-4",
+                disabled
+                  ? "text-[color:var(--content-disabled)]"
+                  : "text-[color:var(--content-tertiary)]",
+              )}
+            >
+              {helperText}
+            </Typography>
+          ) : null}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export { RadioGroup, Radio };
diff --git a/packages/design-library/src/components/segment-control.tsx b/packages/design-library/src/components/segment-control.tsx
new file mode 100644
index 0000000000..0be028d390
--- /dev/null
+++ b/packages/design-library/src/components/segment-control.tsx
@@ -0,0 +1,96 @@
+import { type ReactNode } from "react";
+
+import { Button } from "./button.js";
+import { cn } from "../utils/cn.js";
+
+export interface SegmentControlItem<T extends string> {
+  value: T;
+  label: string;
+  icon?: ReactNode;
+  disabled?: boolean;
+}
+
+export interface SegmentControlProps<T extends string> {
+  items: SegmentControlItem<T>[];
+  value: T;
+  onChange: (next: T) => void;
+  ariaLabel?: string;
+  /**
+   * When true, each segment renders only its `icon` and uses `label` as the
+   * button's `aria-label`.
+   */
+  iconOnly?: boolean;
+  className?: string;
+}
+
+/**
+ * Pure selection helper verifiable in tests without a DOM environment.
+ * Returns the next value, or `null` when the click is a no-op (same-value
+ * click or click on a disabled segment).
+ */
+export function resolveSegmentSelection<T extends string>(
+  items: SegmentControlItem<T>[],
+  currentValue: T,
+  clickedValue: T,
+): T | null {
+  const item = items.find((candidate) => candidate.value === clickedValue);
+  if (!item) return null;
+  if (item.disabled) return null;
+  if (item.value === currentValue) return null;
+  return item.value;
+}
+
+export function SegmentControl<T extends string>({
+  items,
+  value,
+  onChange,
+  ariaLabel,
+  iconOnly = false,
+  className,
+}: SegmentControlProps<T>) {
+  return (
+    <div
+      role="radiogroup"
+      aria-label={ariaLabel}
+      data-slot="segment-control"
+      className={cn(
+        "inline-flex rounded-lg bg-[var(--surface-active)] p-0.5",
+        !iconOnly && "w-full",
+        className,
+      )}
+    >
+      {items.map((item) => {
+        const isActive = item.value === value;
+        const isDisabled = Boolean(item.disabled);
+        return (
+          <Button
+            key={item.value}
+            variant="ghost"
+            role="radio"
+            aria-checked={isActive}
+            aria-label={iconOnly ? item.label : undefined}
+            disabled={isDisabled}
+            onClick={() => {
+              const next = resolveSegmentSelection(items, value, item.value);
+              if (next !== null) {
+                onChange(next);
+              }
+            }}
+            className={cn(
+              "min-w-[30px] cursor-pointer justify-center gap-1.5 rounded-md border-0 text-body-medium-default",
+              iconOnly
+                ? "h-7 px-[5px] py-1 max-md:h-9 max-md:min-w-9 max-md:px-2"
+                : "h-auto flex-1 px-3 py-1.5",
+              isActive
+                ? "bg-[var(--surface-overlay)] text-[var(--content-emphasised)] shadow-sm hover:bg-[var(--surface-overlay)]"
+                : "bg-transparent text-[var(--content-tertiary)] hover:bg-transparent hover:text-[var(--content-emphasised)]",
+            )}
+          >
+            {item.icon}
+            {!iconOnly && item.label}
+          </Button>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/packages/design-library/src/components/slider.tsx b/packages/design-library/src/components/slider.tsx
new file mode 100644
index 0000000000..13db75a9a4
--- /dev/null
+++ b/packages/design-library/src/components/slider.tsx
@@ -0,0 +1,161 @@
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import { type ReactNode, useId } from "react";
+
+import { cn } from "../utils/cn.js";
+
+export type SliderValue = number | [number, number];
+
+export function isRangeValue(value: SliderValue): value is [number, number] {
+  return Array.isArray(value);
+}
+
+export function toValueArray(value: SliderValue): number[] {
+  return isRangeValue(value) ? [value[0], value[1]] : [value];
+}
+
+export function fromValueArray(
+  next: number[],
+  isRange: boolean,
+  min: number,
+  max: number,
+): SliderValue {
+  if (isRange) {
+    return [next[0] ?? min, next[1] ?? max];
+  }
+  return next[0] ?? min;
+}
+
+export function formatDisplayValue(value: SliderValue): string {
+  if (isRangeValue(value)) {
+    return `${value[0]} – ${value[1]}`;
+  }
+  return String(value);
+}
+
+export interface SliderProps {
+  value: SliderValue;
+  onValueChange: (next: SliderValue) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  disabled?: boolean;
+  label?: ReactNode;
+  showValue?: boolean;
+  formatValue?: (value: SliderValue) => string;
+  name?: string;
+  id?: string;
+  "aria-label"?: string;
+  className?: string;
+}
+
+export function Slider({
+  value,
+  onValueChange,
+  min = 0,
+  max = 100,
+  step = 1,
+  disabled = false,
+  label,
+  showValue = false,
+  formatValue,
+  name,
+  id,
+  "aria-label": ariaLabel,
+  className,
+}: SliderProps) {
+  const reactId = useId();
+  const resolvedId = id ?? reactId;
+  const labelId = label ? `${resolvedId}-label` : undefined;
+
+  const isRange = isRangeValue(value);
+  const valueArray = toValueArray(value);
+
+  const handleValueChange = (next: number[]) => {
+    onValueChange(fromValueArray(next, isRange, min, max));
+  };
+
+  const displayValue = formatValue
+    ? formatValue(value)
+    : formatDisplayValue(value);
+
+  const thumbClasses = cn(
+    "block h-4 w-4 rounded-full bg-[var(--aux-white)]",
+    "border-2 border-[var(--system-positive-strong)]",
+    "shadow-sm transition-colors",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-0",
+    disabled
+      ? "cursor-not-allowed border-[var(--border-disabled)]"
+      : "cursor-grab active:cursor-grabbing",
+  );
+
+  return (
+    <div data-slot="slider" className={cn("flex flex-col gap-1.5", className)}>
+      {(label || showValue) && (
+        <div className="flex items-center justify-between gap-3">
+          {label ? (
+            <span
+              id={labelId}
+              className={cn(
+                "text-body-medium-default",
+                disabled
+                  ? "text-[var(--content-disabled)]"
+                  : "text-[var(--content-default)]",
+              )}
+            >
+              {label}
+            </span>
+          ) : (
+            <span />
+          )}
+          {showValue ? (
+            <span
+              className={cn(
+                "text-body-medium-lighter tabular-nums",
+                disabled
+                  ? "text-[var(--content-disabled)]"
+                  : "text-[var(--content-secondary)]",
+              )}
+            >
+              {displayValue}
+            </span>
+          ) : null}
+        </div>
+      )}
+      <SliderPrimitive.Root
+        id={resolvedId}
+        name={name}
+        value={valueArray}
+        onValueChange={handleValueChange}
+        min={min}
+        max={max}
+        step={step}
+        disabled={disabled}
+        aria-label={!label ? ariaLabel : undefined}
+        aria-labelledby={label ? labelId : undefined}
+        className={cn(
+          "relative flex w-full touch-none items-center select-none",
+          "h-5",
+          disabled && "opacity-60",
+        )}
+      >
+        <SliderPrimitive.Track
+          className={cn(
+            "relative h-1 w-full grow overflow-hidden rounded-full",
+            "bg-[var(--border-disabled)]",
+          )}
+        >
+          <SliderPrimitive.Range
+            className={cn(
+              "absolute h-full rounded-full",
+              disabled
+                ? "bg-[var(--border-element)]"
+                : "bg-[var(--system-positive-strong)]",
+            )}
+          />
+        </SliderPrimitive.Track>
+        <SliderPrimitive.Thumb className={thumbClasses} />
+        {isRange ? <SliderPrimitive.Thumb className={thumbClasses} /> : null}
+      </SliderPrimitive.Root>
+    </div>
+  );
+}
diff --git a/packages/design-library/src/components/tabs.tsx b/packages/design-library/src/components/tabs.tsx
new file mode 100644
index 0000000000..e1f3ab605a
--- /dev/null
+++ b/packages/design-library/src/components/tabs.tsx
@@ -0,0 +1,102 @@
+import * as RadixTabs from "@radix-ui/react-tabs";
+import { type ComponentProps } from "react";
+
+import { cn } from "../utils/cn.js";
+
+// ---------------------------------------------------------------------------
+// Root
+// ---------------------------------------------------------------------------
+
+export type TabsRootProps = ComponentProps<typeof RadixTabs.Root>;
+
+function TabsRoot({ className, ref, ...rest }: TabsRootProps) {
+  return (
+    <RadixTabs.Root
+      ref={ref}
+      data-slot="tabs"
+      className={className}
+      {...rest}
+    />
+  );
+}
+
+// ---------------------------------------------------------------------------
+// List
+// ---------------------------------------------------------------------------
+
+export type TabsListProps = ComponentProps<typeof RadixTabs.List>;
+
+function TabsList({ className, ref, ...rest }: TabsListProps) {
+  return (
+    <RadixTabs.List
+      ref={ref}
+      data-slot="tabs-list"
+      className={cn(
+        "flex items-center border-b border-[var(--border-base)]",
+        className,
+      )}
+      {...rest}
+    />
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Trigger
+// ---------------------------------------------------------------------------
+
+export type TabsTriggerProps = ComponentProps<typeof RadixTabs.Trigger>;
+
+function TabsTrigger({ className, ref, ...rest }: TabsTriggerProps) {
+  return (
+    <RadixTabs.Trigger
+      ref={ref}
+      data-slot="tabs-trigger"
+      className={cn(
+        "relative -mb-px inline-flex cursor-pointer items-center gap-1.5 border-b-2 border-transparent bg-transparent px-2.5 py-[7px]",
+        "text-body-medium-default whitespace-nowrap",
+        "text-[var(--content-tertiary)] transition-colors",
+        "outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-0",
+        "hover:bg-[var(--ghost-hover)] hover:text-[var(--content-default)]",
+        "data-[state=active]:border-[var(--primary-base)] data-[state=active]:text-[var(--content-default)]",
+        "data-[state=active]:hover:bg-transparent",
+        "disabled:cursor-not-allowed disabled:text-[var(--content-disabled)]",
+        "disabled:hover:bg-transparent disabled:hover:text-[var(--content-disabled)]",
+        className,
+      )}
+      {...rest}
+    />
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Panel
+// ---------------------------------------------------------------------------
+
+export type TabsPanelProps = ComponentProps<typeof RadixTabs.Content>;
+
+function TabsPanel({ className, ref, ...rest }: TabsPanelProps) {
+  return (
+    <RadixTabs.Content
+      ref={ref}
+      data-slot="tabs-panel"
+      className={cn(
+        "outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-0",
+        className,
+      )}
+      {...rest}
+    />
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Compound export
+// ---------------------------------------------------------------------------
+
+const Tabs = {
+  Root: TabsRoot,
+  List: TabsList,
+  Trigger: TabsTrigger,
+  Panel: TabsPanel,
+} as const;
+
+export { Tabs, TabsRoot, TabsList, TabsTrigger, TabsPanel };
diff --git a/packages/design-library/src/components/toggle.tsx b/packages/design-library/src/components/toggle.tsx
new file mode 100644
index 0000000000..bfed31d7f6
--- /dev/null
+++ b/packages/design-library/src/components/toggle.tsx
@@ -0,0 +1,127 @@
+import { type ReactNode, useId } from "react";
+
+import { Typography } from "./typography.js";
+import { cn } from "../utils/cn.js";
+
+export interface ToggleProps {
+  checked: boolean;
+  onChange: (next: boolean) => void;
+  label?: ReactNode;
+  helperText?: ReactNode;
+  disabled?: boolean;
+  id?: string;
+  "aria-label"?: string;
+  className?: string;
+}
+
+/**
+ * Pure click-handler contract used by the `<button>` and verifiable in tests
+ * without a DOM environment.
+ */
+export function handleToggleClick(
+  checked: boolean,
+  disabled: boolean,
+  onChange: (next: boolean) => void,
+): void {
+  if (disabled) return;
+  onChange(!checked);
+}
+
+/**
+ * On/off toggle switch. Track is 36×24 px with a 20×20 px knob offset 2 px
+ * from the edges. Uses CSS variable tokens for light/dark theming.
+ */
+export function Toggle({
+  checked,
+  onChange,
+  label,
+  helperText,
+  disabled = false,
+  id,
+  "aria-label": ariaLabel,
+  className,
+}: ToggleProps) {
+  const reactId = useId();
+  const buttonId = id ?? reactId;
+  const labelId = label ? `${buttonId}-label` : undefined;
+  const helperTextId = helperText ? `${buttonId}-helper` : undefined;
+
+  const toggle = () => handleToggleClick(checked, disabled, onChange);
+
+  const trackClasses = cn(
+    "relative inline-flex h-6 w-9 shrink-0 items-center rounded-full transition-colors",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2",
+    disabled
+      ? "cursor-not-allowed bg-[var(--primary-disabled)]"
+      : checked
+        ? "cursor-pointer bg-[var(--system-positive-strong)]"
+        : "cursor-pointer bg-[var(--surface-active)]",
+  );
+
+  const knobClasses = cn(
+    "absolute top-0.5 inline-block h-5 w-5 rounded-full shadow transition-transform",
+    disabled ? "bg-[var(--content-disabled)]" : "bg-[var(--aux-white)]",
+    checked ? "left-0.5 translate-x-3" : "left-0.5 translate-x-0",
+  );
+
+  const toggleButton = (
+    <button
+      type="button"
+      role="switch"
+      id={buttonId}
+      aria-checked={checked}
+      aria-label={!label ? ariaLabel : undefined}
+      aria-labelledby={label ? labelId : undefined}
+      aria-describedby={helperTextId}
+      disabled={disabled}
+      onClick={toggle}
+      data-slot="toggle"
+      className={trackClasses}
+    >
+      <span className={knobClasses} />
+    </button>
+  );
+
+  if (!label && !helperText) {
+    return <span className={className}>{toggleButton}</span>;
+  }
+
+  return (
+    <div
+      data-slot="toggle"
+      className={cn(
+        "flex gap-2.5",
+        helperText ? "items-start" : "items-center",
+        className,
+      )}
+    >
+      {toggleButton}
+      <div className="flex min-w-0 flex-col gap-0.5">
+        {label ? (
+          <Typography
+            as="label"
+            variant="body-medium-default"
+            id={labelId}
+            htmlFor={buttonId}
+            className={cn(
+              "text-body-medium-default",
+              disabled
+                ? "cursor-not-allowed text-[var(--content-disabled)]"
+                : "cursor-pointer text-[var(--content-default)]",
+            )}
+          >
+            {label}
+          </Typography>
+        ) : null}
+        {helperText ? (
+          <span
+            id={helperTextId}
+            className="text-body-small-default text-[var(--content-tertiary)]"
+          >
+            {helperText}
+          </span>
+        ) : null}
+      </div>
+    </div>
+  );
+}
diff --git a/packages/design-library/src/index.ts b/packages/design-library/src/index.ts
index 861dcef015..8ac25dd7da 100644
--- a/packages/design-library/src/index.ts
+++ b/packages/design-library/src/index.ts
@@ -39,6 +39,56 @@ export {
   Popover,
   type PopoverContentProps,
 } from "./components/popover.js";
+export {
+  Input,
+  Textarea,
+  fieldVariants,
+  type InputProps,
+  type TextareaProps,
+  type FieldVariantProps,
+} from "./components/input.js";
+export {
+  Toggle,
+  handleToggleClick,
+  type ToggleProps,
+} from "./components/toggle.js";
+export {
+  Checkbox,
+  type CheckboxProps,
+  type CheckboxState,
+} from "./components/checkbox.js";
+export {
+  RadioGroup,
+  Radio,
+  type RadioGroupProps,
+  type RadioProps,
+} from "./components/radio.js";
+export {
+  Tabs,
+  TabsRoot,
+  TabsList,
+  TabsTrigger,
+  TabsPanel,
+  type TabsRootProps,
+  type TabsListProps,
+  type TabsTriggerProps,
+  type TabsPanelProps,
+} from "./components/tabs.js";
+export {
+  SegmentControl,
+  resolveSegmentSelection,
+  type SegmentControlItem,
+  type SegmentControlProps,
+} from "./components/segment-control.js";
+export {
+  Slider,
+  isRangeValue,
+  toValueArray,
+  fromValueArray,
+  formatDisplayValue,
+  type SliderProps,
+  type SliderValue,
+} from "./components/slider.js";
 export { cn } from "./utils/cn.js";
 export {
   PortalContainerProvider,

From 06850def5997c3df3e8b3aaa7edb3d8f397f783b Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Tue, 19 May 2026 02:27:40 +0000
Subject: [PATCH 2/3] fix: add missing data-slot attrs and keyboard nav for
 SegmentControl

- Toggle: add data-slot="toggle" to root <span> in no-label code path
- Checkbox: add data-slot="checkbox" to root <span> in no-label code path
- SegmentControl: implement roving tabindex + arrow/Home/End key handling
  for the radiogroup role (WAI-ARIA radiogroup pattern)

Co-Authored-By: ashlee@vellum.ai <ashlee@vellum.ai>
---
 .../src/components/checkbox.tsx               |  2 +-
 .../src/components/segment-control.tsx        | 67 ++++++++++++++++++-
 .../design-library/src/components/toggle.tsx  |  2 +-
 3 files changed, 68 insertions(+), 3 deletions(-)

diff --git a/packages/design-library/src/components/checkbox.tsx b/packages/design-library/src/components/checkbox.tsx
index 021fdc8300..a62e1971cd 100644
--- a/packages/design-library/src/components/checkbox.tsx
+++ b/packages/design-library/src/components/checkbox.tsx
@@ -93,7 +93,7 @@ function Checkbox({
   );
 
   if (!label && !helperText) {
-    return <span className={className}>{checkbox}</span>;
+    return <span data-slot="checkbox" className={className}>{checkbox}</span>;
   }
 
   return (
diff --git a/packages/design-library/src/components/segment-control.tsx b/packages/design-library/src/components/segment-control.tsx
index 0be028d390..edb082d62d 100644
--- a/packages/design-library/src/components/segment-control.tsx
+++ b/packages/design-library/src/components/segment-control.tsx
@@ -1,4 +1,4 @@
-import { type ReactNode } from "react";
+import { type KeyboardEvent, type ReactNode, useCallback, useRef } from "react";
 
 import { Button } from "./button.js";
 import { cn } from "../utils/cn.js";
@@ -40,6 +40,24 @@ export function resolveSegmentSelection<T extends string>(
   return item.value;
 }
 
+/**
+ * Finds the next enabled item index in the given direction, wrapping around.
+ */
+function findEnabledIndex<T extends string>(
+  items: SegmentControlItem<T>[],
+  fromIndex: number,
+  direction: 1 | -1,
+): number {
+  const len = items.length;
+  let idx = (fromIndex + direction + len) % len;
+  let attempts = 0;
+  while (items[idx]?.disabled && attempts < len) {
+    idx = (idx + direction + len) % len;
+    attempts++;
+  }
+  return idx;
+}
+
 export function SegmentControl<T extends string>({
   items,
   value,
@@ -48,11 +66,57 @@ export function SegmentControl<T extends string>({
   iconOnly = false,
   className,
 }: SegmentControlProps<T>) {
+  const groupRef = useRef<HTMLDivElement>(null);
+
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLDivElement>) => {
+      const currentIndex = items.findIndex((item) => item.value === value);
+      if (currentIndex === -1) return;
+
+      let nextIndex: number | null = null;
+
+      switch (event.key) {
+        case "ArrowRight":
+        case "ArrowDown":
+          nextIndex = findEnabledIndex(items, currentIndex, 1);
+          break;
+        case "ArrowLeft":
+        case "ArrowUp":
+          nextIndex = findEnabledIndex(items, currentIndex, -1);
+          break;
+        case "Home":
+          nextIndex = findEnabledIndex(items, items.length - 1, 1);
+          break;
+        case "End":
+          nextIndex = findEnabledIndex(items, 0, -1);
+          break;
+        default:
+          return;
+      }
+
+      event.preventDefault();
+      const nextItem = items[nextIndex];
+      if (!nextItem || nextItem.disabled) return;
+
+      if (nextItem.value !== value) {
+        onChange(nextItem.value);
+      }
+
+      const buttons = groupRef.current?.querySelectorAll<HTMLButtonElement>(
+        '[role="radio"]',
+      );
+      buttons?.[nextIndex]?.focus();
+    },
+    [items, value, onChange],
+  );
+
   return (
     <div
+      ref={groupRef}
       role="radiogroup"
       aria-label={ariaLabel}
       data-slot="segment-control"
+      onKeyDown={handleKeyDown}
       className={cn(
         "inline-flex rounded-lg bg-[var(--surface-active)] p-0.5",
         !iconOnly && "w-full",
@@ -70,6 +134,7 @@ export function SegmentControl<T extends string>({
             aria-checked={isActive}
             aria-label={iconOnly ? item.label : undefined}
             disabled={isDisabled}
+            tabIndex={isActive ? 0 : -1}
             onClick={() => {
               const next = resolveSegmentSelection(items, value, item.value);
               if (next !== null) {
diff --git a/packages/design-library/src/components/toggle.tsx b/packages/design-library/src/components/toggle.tsx
index bfed31d7f6..642b558218 100644
--- a/packages/design-library/src/components/toggle.tsx
+++ b/packages/design-library/src/components/toggle.tsx
@@ -83,7 +83,7 @@ export function Toggle({
   );
 
   if (!label && !helperText) {
-    return <span className={className}>{toggleButton}</span>;
+    return <span data-slot="toggle" className={className}>{toggleButton}</span>;
   }
 
   return (

From 2738ff36c170c4459749e566fd7fad0fd6998257 Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Tue, 19 May 2026 02:31:48 +0000
Subject: [PATCH 3/3] fix: use --surface-hover token for tabs, remove redundant
 Typography class in toggle

- TabsTrigger: replace --ghost-hover with --surface-hover (correct semantic
  token for nav-like elements; --ghost-hover is only defined in dark/velvet)
- Toggle: remove duplicate text-body-medium-default className since Typography
  variant='body-medium-default' already applies it

Co-Authored-By: ashlee@vellum.ai <ashlee@vellum.ai>
---
 packages/design-library/src/components/tabs.tsx   | 2 +-
 packages/design-library/src/components/toggle.tsx | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/design-library/src/components/tabs.tsx b/packages/design-library/src/components/tabs.tsx
index e1f3ab605a..2cc536c3af 100644
--- a/packages/design-library/src/components/tabs.tsx
+++ b/packages/design-library/src/components/tabs.tsx
@@ -56,7 +56,7 @@ function TabsTrigger({ className, ref, ...rest }: TabsTriggerProps) {
         "text-body-medium-default whitespace-nowrap",
         "text-[var(--content-tertiary)] transition-colors",
         "outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-0",
-        "hover:bg-[var(--ghost-hover)] hover:text-[var(--content-default)]",
+        "hover:bg-[var(--surface-hover)] hover:text-[var(--content-default)]",
         "data-[state=active]:border-[var(--primary-base)] data-[state=active]:text-[var(--content-default)]",
         "data-[state=active]:hover:bg-transparent",
         "disabled:cursor-not-allowed disabled:text-[var(--content-disabled)]",
diff --git a/packages/design-library/src/components/toggle.tsx b/packages/design-library/src/components/toggle.tsx
index 642b558218..5cd8e5ea11 100644
--- a/packages/design-library/src/components/toggle.tsx
+++ b/packages/design-library/src/components/toggle.tsx
@@ -104,7 +104,6 @@ export function Toggle({
             id={labelId}
             htmlFor={buttonId}
             className={cn(
-              "text-body-medium-default",
               disabled
                 ? "cursor-not-allowed text-[var(--content-disabled)]"
                 : "cursor-pointer text-[var(--content-default)]",