Add core UI primitives in web/src/ui
CI / ci (push) Successful in 2m32s
Independent review Codex gpt-6-sol high: CHANGES_REQUIRED (2 medium)
CI / ci (pull_request) Successful in 1m35s

Button, IconButton, Tag, Chip, TextInput, Segmented, Toggle, Checkbox,
Slider, Card and ListRow, styled with CSS Modules over the design tokens.
Every interactive primitive keeps a hit area of at least 44 px; visually
smaller controls draw their face inside a larger hit box.

Vitest now injects CSS Modules into jsdom (css: true) so tests assert the
sizes the stylesheets declare, alongside roles, aria states and keyboard
behaviour (Segmented arrow keys, Toggle Space/Enter, Chip "Remove X").

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
2026-10-03 16:23:42 -04:00
co-authored by Claude Opus 5.5
parent 496f2e5375
commit d9a26b81ec
36 changed files with 1333 additions and 0 deletions
+17
View File
@@ -0,0 +1,17 @@
import type { ComponentPropsWithRef, ReactNode } from 'react'
import styles from './Checkbox.module.css'
export type CheckboxProps = Omit<ComponentPropsWithRef<'input'>, 'type'> & {
label: ReactNode
}
// Native checkbox, styled. The wrapping label is the hit area (at least
// 44×44), so tapping the text toggles it too.
export function Checkbox({ label, className, ...rest }: CheckboxProps) {
return (
<label className={[styles.root, className].filter(Boolean).join(' ')}>
<input type="checkbox" className={styles.input} {...rest} />
<span className={styles.label}>{label}</span>
</label>
)
}