Module Solidtype_heroui.Time_field

HeroUI's TimeField: Kobalte's TimeField.Root, a field's <div>, with HeroUI's classes from Styles.TimeField, whose value is a time of day, each of its parts -- hour, minute, second and AM or PM -- a segment typed into or stepped by the arrow keys, within its min_value and max_value. Its Label names it, its Description describes it, its Field_error shows while it is invalid, and it submits its value with a form, by Kobalte's hidden input.

  <Time_field name="start">
    <Label>"Time"</Label>
    <Time_field.Group>
      <Time_field.Input>
        (fun segment ->
          <Time_field.Segment segment=(fun () -> S.get segment) />)
      </Time_field.Input>
    </Time_field.Group>
  </Time_field>

Its value is Kobalte's Solidtype_kobalte.Types.Time, an hour, a minute and a second. A value of Js.Nullable.null controls it empty, as React's null does, and on_change is told None once every segment is erased. A part is used inside a Time_field: elsewhere it raises Invalid_argument as it is made.

type segment = [
  1. | `hour
  2. | `minute
  3. | `second
  4. | `dayPeriod
]

A segment's part of the time, AM or PM its `dayPeriod.

module Group : sig ... end

The box the input sits in, React Aria's group, with HeroUI's Styles.DateInputGroup: a <div role="group">.

module Prefix : sig ... end

What sits before the input in its group, an icon: a <div>.

module Suffix : sig ... end

What sits after the input in its group: a <div>.

module Input : sig ... end

The time's segments, Kobalte's input: it renders children for each segment, in order, and the literals between them, as React Aria's does -- ":" between the hour, the minute and the second, and a space before AM or PM, each a <span data-type="literal"> a reader skips.

module Segment : sig ... end

One segment, Kobalte's spin button: its text the part's value, or dashes while it has none, which it declares as data-placeholder.

module Props : sig ... end