Date Calendar

POC of a Clock component using the Base UI DX.

Anatomy

<Clock.Root>
  <Clock.Hour12List>
    {({ options }) => options.map((option) => <Clock.Cell value={option} />)}
  </Clock.Hour12List>
  <Clock.Hour24List>
    {({ options }) => options.map((option) => <Clock.Cell value={option} />)}
  </Clock.Hour24List>
  <Clock.MinuteList>
    {({ options }) => options.map((option) => <Clock.Cell value={option} />)}
  </Clock.MinuteList>
  <Clock.SecondList>
    {({ options }) => options.map((option) => <Clock.Cell value={option} />)}
  </Clock.SecondList>
  <Clock.MeridiemList>
    {({ options }) => options.map((option) => <Clock.Cell value={option} />)}
  </Clock.MeridiemList>
</Clock.Root>

Multi column layout

Hours without meridiem

Hours with meridiem

WIP

Custom seconds step

<Clock.SecondList step={5}>{/** Options */}</Clock.SecondList>

Custom minutes step

<Clock.MinuteList step={5}>{/** Options */}</Clock.MinuteList>

Single column layout

Basic example

Custom step

<Clock.FullTimeList precision="minute" step={30}>{/** Options */}</Clock.MinuteList>

Custom format

<Clock.Cell format="hh:mm:ss" />