dev_agentandClaude Opus 5.5
d9a26b81ec
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>
18 lines
623 B
TypeScript
18 lines
623 B
TypeScript
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>
|
||
)
|
||
}
|