feat(design-library): add form input and navigation components

[ashleeradka]

Prompt / plan

Port Tier 1 design library components from the platform repo to reduce diff noise in subsequent domain migration PRs. These 7 components cover 98 import sites across the platform codebase.

Components added:

• Input + Textarea — single-line and multi-line text fields with labels, icons, error/helper text. Shared fieldVariants CVA.
• Toggle — on/off switch with label and helper text. Exports handleToggleClick for testing.
• Checkbox — tri-state Radix checkbox (boolean | "indeterminate") with label support.
• Radio — generic RadioGroup<T> + Radio<T> with Radix primitives.
• Tabs — compound Radix tabs (Root/List/Trigger/Panel) with themed styling.
• SegmentControl — pill-shaped segmented control using Button. Exports resolveSegmentSelection for testing.
• Slider — single-thumb and range mode with Radix primitives. Exports value conversion helpers.

Convention compliance applied during port:

• Removed all "use client" directives (Vite SPA, no SSR)
• Converted forwardRef → ref as regular prop (React 19)
• Function declarations for all components (not arrow/const)
• data-slot attributes on all root elements (shadcn/ui v4 convention)
• Relative .js imports for NodeNext resolution
• Named exports only (no default exports)
• Exported variant functions and helper utilities alongside components
• ComponentProps<"element"> instead of HTMLAttributes for element-specific props + ref

New Radix dependencies added (exact versions matching platform):

• @radix-ui/react-tabs@1.1.13
• @radix-ui/react-checkbox@1.3.3
• @radix-ui/react-radio-group@1.3.8
• @radix-ui/react-slider@1.3.6

Part of LUM-1543

Test plan

• bunx tsc --noEmit passes in both packages/design-library/ and apps/web/
• No existing imports are broken (all prior exports preserved)
• CI lint + typecheck + build

Link to Devin session: https://app.devin.ai/sessions/536ceadb023a4059908b0609b9833bc1
Requested by: @ashleeradka

---

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring

[linear]

LUM-1543

[devin-ai-integration]

Devin Review found 2 potential issues.

View 3 additional findings in Devin Review.

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 910b266cd1

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

[vex-assistant-bot]

✦ APPROVE

Value: Eliminates ~98 platform import sites' worth of diff noise from upcoming domain migration PRs by landing the 7 most-used design-library components in one clean PR.

What this does: Ports Input, Textarea, Toggle, Checkbox, RadioGroup/Radio, Tabs, Slider, and SegmentControl from the platform repo into packages/design-library/. All components use Radix UI primitives, CSS variable tokens, and useId()-based a11y wiring.

---

Responding to bot findings:

Devin flagged data-slot missing from the no-label <span> wrapper in both Checkbox and Toggle. Partially valid:

• Checkbox (line 96) — confirmed. The no-label path returns <span className={className}>{checkbox}</span> without data-slot="checkbox". The inner CheckboxPrimitive.Root still carries the slot, but the outer wrapper is inconsistent with the labeled path's <div data-slot="checkbox">. Worth a quick fix for selector consistency.
• Toggle (line 86) — Devin's finding is incorrect here. The no-label span already reads <span data-slot="toggle" className={className}>. This one is fine as-is.

Codex P2 — SegmentControl keyboard navigation: Real gap. The component advertises role="radiogroup" + role="radio" but only handles onClick — AT users expect arrow keys to move between segments. Since this is a faithful port (not worse than the platform), acceptable to land now and file a follow-up ticket.

---

My observations:

--ghost-hover in tabs.tsx (non-blocking): TabsTrigger uses hover:bg-[var(--ghost-hover)]. Per the anti-patterns KB, --ghost-hover is exclusively for the ghost Button primitive — nav items, list rows, and tab triggers should use --surface-hover. This is a faithful port of whatever the platform uses, so not blocking this PR, but worth aligning in a follow-up cleanup pass.

Toggle Typography className redundancy (nit): toggle.tsx passes variant="body-medium-default" and then also adds "text-body-medium-default" to className. The other six components (checkbox, radio) pass the variant alone without repeating the class in className. Inconsistent but not broken.

Everything else is clean:

• Radix primitives used correctly throughout — forceMount on Indicator for explicit icon control, roving tabindex inherited from RadioGroupPrimitive, aria-labelledby/aria-describedby wired up properly
• FieldWrapper + fieldVariants (CVA) extracts the shared field chrome cleanly — both Input and Textarea share it without duplication
• resolveSegmentSelection and handleToggleClick extracted as pure functions — testable without DOM
• SliderValue = number | [number, number] union + isRangeValue / toValueArray / fromValueArray helpers are a nice touch for type-safe range mode
• Token discipline consistent: no hex values, no ad-hoc Tailwind colors, all through CSS vars

---

Merge gate: Devin didn't APPROVE (found issues), Codex didn't 👍. Needs one more human or bot sign-off before merge. Suggest triggering a Devin re-review once the data-slot span is patched in Checkbox.

Reviewed at 910b266c

Vellum Constitution — Yours: design-library components that are token-consistent and Radix-backed let every future migration PR trust its building blocks without second-guessing the primitives.

[devin-ai-integration]

All findings from the bot review (at 910b266c) have been addressed in two follow-up commits:

06850de — data-slot + keyboard nav fixes:

• Checkbox: added data-slot="checkbox" to no-label <span> root
• Toggle: added data-slot="toggle" to no-label <span> root (bot was incorrect that it was already there — both paths had the same bug)
• SegmentControl: implemented full WAI-ARIA radiogroup keyboard pattern — roving tabindex, Arrow Left/Right/Up/Down, Home/End, wraps around, skips disabled items

2738ff36 — token + redundancy fixes:

• TabsTrigger: --ghost-hover → --surface-hover (correct semantic token; --ghost-hover wasn't even defined in light theme)
• Toggle: removed duplicate text-body-medium-default className (already applied by Typography variant="body-medium-default")