Dates@knitui/dates

TimePresets

TimePresets is the preset list shown in the TimePicker dropdown instead of the scroll columns — a flat string[] renders as one SimpleGrid of TimePresetControls; a TimePickerPresetGroup[] renders one labelled TimePresetGroup per entry, all inside the kit ScrollArea.Autosize. Per-cell sizing/colour/interaction live in the TimePresetControl leaf; TimePresets lays out the list, shares size via context, and offers a per-value getControlProps passthrough plus per-slot styles sugar. Accent comes from the active Tamagui theme. Folder-local to TimePicker (not re-exported from the public barrel).

WebiOSAndroid4 style slots9 own props6 examples

Stories Source Tests Open in Storybook

import { TimePresets } from "@knitui/dates";

Playground

Loading playground…

formatClock display mode.

withSecondsWhether seconds are displayed.

false

sizeLabel font size.

maxHeightMax content height in px before it scrolls.

Playground

<TimePresets
  presets={["08:00", "10:30", "12:00", "14:15", "18:00", "21:45"]}
  format="24h"
  amPmLabels={{ am: "AM", pm: "PM" }}
  withSeconds={false}
  maxHeight={200}
  size="sm"
/>

Examples

Default

A flat string[] with the active preset highlighted.

Loading example…

DefaultSource Storybook

Grouped

Labelled groups (TimePickerPresetGroup[]).

Loading example…

GroupedSource Storybook

Twelve Hour

12h formatting via the shared TimeValue.

Loading example…

Twelve HourSource Storybook

Styled Slots

Per-slot styles sugar — recolour every preset cell via the control slot.

Loading example…

Styled SlotsSource Storybook

Sizes

Every size token.

Loading example…

SizesSource Storybook

Props

Prop	Type	Default	Description
`amPmLabels` required	`TimePickerAmPmLabels`	—	AM/PM labels for the `12h` mode.
`format` required	`"12h" \| "24h"` 24h · 12h	`24h`	Clock display mode.
`onChange` required	`(value: string) => void`	—	Called with the pressed preset value.
`presets` required	`string[] \| TimePickerPresetGroup[]`	—	Flat `string[]` of times or labelled {@link TimePickerPresetGroup}s.
`value` required	`string`	—	Currently selected value in 24h format.
`withSeconds` required	`boolean`	`false`	Whether seconds are displayed.
`getControlProps`	`((value: string) => Partial<TimePresetControlProps>) \| undefined`	—	Passes props down to each preset cell, keyed by value (wins over `styles.control`).
`maxHeight`	`number \| undefined`	`200`	Max content height in px before it scrolls.
`scrollAreaProps`	`ScrollAreaProps \| undefined`	—	Props forwarded to the underlying `ScrollArea` (wins over `styles.root`).
`size` system	`CalendarSize \| undefined` xxs · xs · sm · md · lg · xl · xxl	`'sm'`	Label font size.
`styles` system	`SlotStyles<TimePresetsStyles> \| undefined`	—	Per-slot style sugar — props spread onto the matching styled part.

Style slots

Every part of TimePresets can be styled through the styles prop. Explicit props on the component always win over slot styles.

Slot	Usage
`control`	`styles={{ control: { … } }}`
`grid`	`styles={{ grid: { … } }}`
`groups`	`styles={{ groups: { … } }}`
`root`	`styles={{ root: { … } }}`