Keyboard-roving presets plus a complete custom date-time flow.
LivePresetCustom
<TimeRangeSelector bind:value onchange={setRange} />Installation
pnpm add @chanrg/4uiImport the stylesheet once, at the root of your app:
import '@chanrg/4ui/styles.css';Usage
import { TimeRangeSelector } from '@chanrg/4ui';<TimeRangeSelector bind:value onchange={setRange} />API reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
presets | TimeRangePreset[] | neutral defaults | Caller-controlled range choices. |
onchange | (range) => void | — | Emits a normalized range. |
CSS variables
| Variable | Description |
|---|---|
--4ui-surface | Primary component surface. |
--4ui-text | Primary foreground color. |
--4ui-border | Default control and panel border. |
Accessibility
- Preset buttons use radio semantics and roving keyboard focus.