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>
43 lines
1.3 KiB
TypeScript
43 lines
1.3 KiB
TypeScript
import type { ComponentPropsWithRef, KeyboardEvent } from 'react'
|
||
import styles from './Toggle.module.css'
|
||
|
||
export type ToggleProps = Omit<
|
||
ComponentPropsWithRef<'button'>,
|
||
'type' | 'role' | 'aria-checked' | 'onChange' | 'onClick' | 'onKeyDown' | 'onKeyUp' | 'children'
|
||
> & {
|
||
checked: boolean
|
||
onCheckedChange: (checked: boolean) => void
|
||
}
|
||
|
||
// 40×24 pill switch (role="switch"). Name it with aria-label or
|
||
// aria-labelledby. Space and Enter are handled here and their native button
|
||
// activation is suppressed, so each key press toggles exactly once.
|
||
export function Toggle({ checked, onCheckedChange, className, ...rest }: ToggleProps) {
|
||
function onKeyDown(event: KeyboardEvent<HTMLButtonElement>) {
|
||
if (event.key !== ' ' && event.key !== 'Enter') return
|
||
event.preventDefault()
|
||
onCheckedChange(!checked)
|
||
}
|
||
|
||
function onKeyUp(event: KeyboardEvent<HTMLButtonElement>) {
|
||
if (event.key === ' ') event.preventDefault()
|
||
}
|
||
|
||
return (
|
||
<button
|
||
type="button"
|
||
role="switch"
|
||
aria-checked={checked}
|
||
className={[styles.toggle, className].filter(Boolean).join(' ')}
|
||
onClick={() => onCheckedChange(!checked)}
|
||
onKeyDown={onKeyDown}
|
||
onKeyUp={onKeyUp}
|
||
{...rest}
|
||
>
|
||
<span className={styles.track} aria-hidden="true">
|
||
<span className={styles.knob} />
|
||
</span>
|
||
</button>
|
||
)
|
||
}
|