Hours Dial · Youj

Installation & usage

npm i @youj/react

For an app already set up with npx @youj/cli init, which installs the peers (@youj/core, @youj/motion, motion and Base UI) and wires the provider. New app? Start at Installation.

Use an hours dial for a stretch of the day: a sleep schedule, quiet hours, a shift, opening hours. The face is a whole day, midnight at the top and turning clockwise, with a ruler of quarter-hour ticks all the way round. A hollow handle marks the start and a solid one the end; the ticks between them light in the tone, and the center reads the length large in mono with the two times under it. For one bounded value on an arc, such as a temperature or a volume, use a Dial; for a single time, a Time Picker.

import { HoursDial } from '@youj/react'

<HoursDial
  label="Sleep schedule"
  caption="Asleep"
  value={sleep}
  onValueChange={setSleep}
/>

The value is { start, end } in minutes after midnight (0–1439); an end before the start runs past midnight, so { start: 1350, end: 420 } is 22:30 to 07:00. step (15 minutes) is what an arrow key moves and what a drag snaps to, and largeStep (an hour) is what Page Up and Down move. The handles never meet: the window stays at least a step long and a step short of a whole day. tone colors the lit stretch (the accent, a chart color or neutral), caption puts a mono capital over the length, and the times read in the provider's locale (12- or 24-hour as it writes them). It's uncontrolled with defaultValue.

Reference

Propsvalue, defaultValue, onValueChange… (11)

Props

HoursDial props
Prop	Type	Default
`value`	`HoursDialValue`	–
`defaultValue`	`HoursDialValue` default { start: 22 * 60 + 30, end: 7 * 60 }	`{ start: 22 * 60 + 30, end: 7 * 60 }`
`onValueChange`	`(value: HoursDialValue) => void`	–
`step`	`number` Minutes per arrow key and the snap of a drag; a divisor of 60 suits best. default 15	`15`
`largeStep`	`number` Minutes per Page Up/Down. default 60	`60`
`tone`	`HoursDialTone` `'accent''neutral''chart-1''chart-2''chart-3''chart-4''chart-5'` The lit stretch's color. default 'accent'	`'accent'`
`locale`	`string` Default: the YoujProvider locale.	–
`label`	`string` Accessible name of the pair of handles. Default: the labels' "Time range".	–
`caption`	`ReactNode` A mono capital over the length: "Asleep".	–
`disabled`	`boolean` default false	`false`
`sound`	`boolean` Plays the tick cue at every step. default true	`true`
Other props pass through: extends `ComponentProps<'div'>`.

StylingParts and data attributes

MotionKeyboard or click, drag, hover or drag · reduced motion

Motion

Motion tokens
Moment	Tokens	Value
Keyboard or clickthe handles and the lit stretch glide to the new times together, the short way round, retargeting mid-flight	`spring.snappy` 0.2s, bounce 0	0.2s, bounce 0
Draga handle, or the whole window, follows the pointer 1:1, snapping to the step	`duration.instantease.standard` 80ms · cubic-bezier(0.2, 0, 0, 1)	80mscubic-bezier(0.2, 0, 0, 1)
Hover or dragthe handle grows a little	`duration.fastease.standard` 140ms · cubic-bezier(0.2, 0, 0, 1)	140mscubic-bezier(0.2, 0, 0, 1)

Reduced motion

Every change jumps.

Reduced motion

The handles and the lit stretch jump to each new time.

AccessibilityKeyboard, focus