Forms · TimeRangePicker

TimeRangePicker

A pair of segmented time inputs (start + end) plus a popover Clock with per-endpoint sliders + AM/PM toggles. Soma owns the range state machine (empty → pending → complete) and the open state; Eidos adds size, variant, intent color, the popover shell and the canonical Footer parts.

parts{compiled.parts.order.length} events{eventRows.length} variants3 sizes3

Working hours {#snippet children({ segments }: InputSnippetProps)} {#each segments as { part, value }, i (`${part}-${i}`)} {value} {/each} {/snippet} {#snippet children({ segments }: InputSnippetProps)} {#each segments as { part, value }, i (`${part}-${i}`)} {value} {/each} {/snippet}

Start {#if granularity === 'second'} {/if} {#if hourCycle === 12} {/if}

End {#if granularity === 'second'} {/if} {#if hourCycle === 12} {/if}

{#if showFooter && (showClear || showCancel || showClose)} {#if showClear}{/if} {#if showCancel}{/if} {#if showClose}{/if} {/if}

trace {#if trace.length === 0} edit, open the clock or play an event to see sema stamps {:else} {#each trace.slice(0, 3) as entry} {entry.event} · {entry.family}{entry.intent ? ' · ' + entry.intent : ''} {fmtTime(entry.at)} {/each} {/if} value {valueLabel}

{#if tab === 'live'}

Controls

soma owns the range state machine, segment editing, validation and the open state. eidos owns visual treatment.

soma props · value + behaviour

value mode {#each ['inline', 'modal'] as v} {/each} granularity {#each ['hour', 'minute', 'second'] as v} {/each} hour cycle {#each [12, 24] as v} {/each} locale states required disabled readonly constraints min 08:00 · max 20:00 seconds readonly close on range complete clock show ruler scale

Footer composition

Each switch decides whether the part is included in the markup. The parts never read these flags — omitting the part hides it, including it always renders.

visibility render footer clear cancel close

eidos props · visual treatment

size {#each ['sm', 'md', 'lg'] as v} {/each} variant {#each ['surface', 'outline', 'ghost'] as v} {/each} color {#each ['primary', 'secondary', 'neutral', 'affirm', 'fulfill', 'risk', 'threat', 'loss'] as v} {/each}

soma headless · provider + sliders svelte

{somaSnippet}

eidos visual · root + attached parts svelte

{eidosSnippet}

{/if} {#if tab === 'api'}

API + reference comparison

Feature	React Aria	Ark	Chakra	UIX	Decision
Paired segmented inputs	yes (Date)	no	no	yes	Soma owns start/end editors.
Per-endpoint sliders	no	no	no	yes	Two slider columns; share generic Slider.
Range state machine	yes (Date)	n/a	n/a	yes	Empty → pending → complete coordinated in soma.
mode='inline' \| 'modal'	no	no	no	yes	Same contract as date / time / color pickers.
Footer = composition	no	no	no	yes	No *Button root props — pure composition.
commit/cancel/clear helpers	manual	manual	manual	yes	Wired by Footer parts via picker-shell context.
closeOnRangeComplete	no	no	no	yes	Auto-dismiss when both endpoints set.

Prop	Owner	Default	Notes
value / placeholder	soma	—	Bindable `TimeRange`.
open	soma	false	Bindable popover state.
mode	soma	inline	`inline` closes on outside-click; `modal` requires footer action.
closeOnRangeComplete	soma	false	Auto-close once both endpoints are set.
minValue / maxValue	soma	—	Validation bounds applied to both endpoints.
granularity	soma	minute	Hour / minute / second.
hourCycle	soma	locale	12h adds dayPeriod toggle per endpoint.
start / endReadonlySegments	soma	[]	Lock segments per endpoint.
size / variant / color	eidos	md / surface / primary	Visual-only data attrs.

{/if} {#if tab === 'morfo'}

Morfo contract

{#each partsList as part} {/each}

Part	Marker	Element	Role	Optional
{part.kebab}	`[{part.marker}]`	<{part.defaultElement}>	{part.role ?? '—'}	{part.optional ? 'yes' : 'no'}

{/if} {#if tab === 'sema'}

sema · events + perceptual signature

TimeRangePicker declares open / dismiss / commit / clear events on its own surface. The underlying TimeRangeField and Popover contribute their own events too.

{#each eventRows as row} {/each}

Owner	Name	Family	Verb	Sequence	Target	Play
{row.owner}	{row.action.name}	{row.action.semantic.family}	{row.action.semantic.verb ?? '—'}	{row.action.semantic.sequence ?? 'pre'}	{row.action.target}

{/if} {#if tab === 'recipe'}

Eidos recipe

Selectors live in src/uix/eidos/components/time-range-picker/time-range-picker.css and reuse the time-field tokens for the field portion. The clock body lays out two endpoint columns (start / end) and inherits slider chrome from the slider recipe.

Selector	Owner	Purpose
`[data-time-range-picker]`	morfo	Root visual scope + size/variant/color tokens.
`[data-time-range-picker-trigger]`	morfo	Open-clock button. Has embedded variant inside the input.
`[data-time-range-picker-clock][data-state]`	morfo	Popover dialog surface. 2-column endpoint grid.
`[data-time-range-picker-hour-slider][data-endpoint]`	morfo	Per-endpoint slider wrapper. Composes generic Slider chrome.
`[data-picker-footer][data-mode]`	eidos	Footer action row shared via picker-shell.

{/if} {#if tab === 'a11y'}

Accessibility

Concern	Contract
Dialog	Clock exposes `role="dialog"` with an accessible name.
Trigger	`aria-haspopup="dialog"` + `aria-expanded` + `aria-controls`.
Segments	Editable segments expose `role="spinbutton"` with min/max/value per endpoint.
Sliders	Native slider semantics — keyboard arrow/page/home/end per endpoint.
Modal	`mode='modal'` blocks outside-click + Escape; consumer must wire Close/Cancel.
Form	Hidden inputs submit ISO strings for both endpoints when `name` is set.

{/if}