TimePicker

<form
  className="flex gap-xs items-end"
  onSubmit={(event) => {
    event.preventDefault();
    const formData = new FormData(event.currentTarget);
    alert(JSON.stringify(Object.fromEntries(formData)));
  }}
>
  <HvTimePicker
    name="scheduleTime"
    label="Time Picker"
    defaultValue={{ hours: 5, minutes: 30, seconds: 14 }}
  />
  <br />
  <HvButton type="submit" variant="subtle">
    Submit
  </HvButton>
</form>

import { useState } from "react";


export default function Demo() {
  const [value, setValue] = useState<HvTimePickerProps["value"]>(null);


  const prettyValue = value
    ? `${value.hours}h ${value.minutes}'${value.seconds}"`
    : "—";


  return (
    <div className="grid gap-sm justify-start">
      <HvTypography variant="title4">Date: {prettyValue}</HvTypography>
      <HvTimePicker
        label="Time Picker"
        placeholder="Select a time"
        value={value}
        onChange={setValue}
      />
      <HvButton
        variant="subtle"
        disabled={!value}
        onClick={() => {
          setValue((d) => d && { ...d, minutes: (d.minutes + 1) % 60 });
        }}
      >
        +1 minute
      </HvButton>
    </div>
  );
}