Time pickers

import { useState } from 'react';
import { TimePicker, type TimeValue } from '@kyralabs/m3exp-web/react';

export default function Dial() {
  const [time, setTime] = useState<TimeValue>({ hour: 7, minute: 30 });
  return (
    <div>
      <TimePicker value={time} onChange={setTime} layout="vertical" />
      <p>
        Alarm: {String(time.hour).padStart(2, '0')}:{String(time.minute).padStart(2, '0')}
      </p>
    </div>
  );
}

<m3e-time-picker id="alarm" hour="7" minute="30" layout="vertical"></m3e-time-picker>
<p>Alarm: <output id="alarm-value">07:30</output></p>
<script>
  document.getElementById('alarm').addEventListener('change', (event) => {
    const { hour, minute } = event.detail;
    document.getElementById('alarm-value').textContent =
      `${String(hour).padStart(2, '0')}:${String(minute).padStart(2, '0')}`;
  });
</script>

import { TimeInput } from '@kyralabs/m3exp-web/react';

export default function Input() {
  return <TimeInput defaultValue={{ hour: 14, minute: 5 }} is24Hour />;
}

<m3e-time-input hour="14" minute="5" hour-cycle="24"></m3e-time-input>

import { TimeScroll } from '@kyralabs/m3exp-web/react';

export default function Scroll() {
  return <TimeScroll defaultValue={{ hour: 9, minute: 45 }} />;
}

<m3e-time-scroll hour="9" minute="45"></m3e-time-scroll>

import { useState } from 'react';
import { Button, TimePicker, TimePickerDialog, type TimeValue } from '@kyralabs/m3exp-web/react';

export default function Dialog() {
  const [open, setOpen] = useState(false);
  const [time, setTime] = useState<TimeValue>({ hour: 18, minute: 0 });
  const [draft, setDraft] = useState(time);
  return (
    <>
      <Button
        variant="tonal"
        onPress={() => {
          setDraft(time);
          setOpen(true);
        }}
      >
        Pick a time
      </Button>
      <p>
        Time: {String(time.hour).padStart(2, '0')}:{String(time.minute).padStart(2, '0')}
      </p>
      <TimePickerDialog
        aria-label="Select time"
        title="Select time"
        isOpen={open}
        onOpenChange={setOpen}
        dismissButton={
          <Button
            variant="text"
            onPress={() => {
              setOpen(false);
            }}
          >
            Cancel
          </Button>
        }
        confirmButton={
          <Button
            variant="text"
            onPress={() => {
              setTime(draft);
              setOpen(false);
            }}
          >
            OK
          </Button>
        }
      >
        <TimePicker value={draft} onChange={setDraft} />
      </TimePickerDialog>
    </>
  );
}

<button type="button" id="open-time" class="m3e-button m3e-button--tonal">Pick a time</button>
<p>Time: <output id="time-value">18:00</output></p>
<m3e-dialog id="time-dialog" variant="custom" label="Select time">
  <div class="m3e-time-picker-dialog">
    <div class="m3e-time-picker-dialog__title">Select time</div>
    <div class="m3e-time-picker-dialog__content">
      <m3e-time-picker hour="18" minute="0"></m3e-time-picker>
    </div>
    <div class="m3e-time-picker-dialog__actions">
      <span class="m3e-time-picker-dialog__spacer"></span>
      <button type="button" class="m3e-button m3e-button--text" data-action="cancel">Cancel</button>
      <button type="button" class="m3e-button m3e-button--text" data-action="ok">OK</button>
    </div>
  </div>
</m3e-dialog>
<script>
  const dialog = document.getElementById('time-dialog');
  const picker = dialog.querySelector('m3e-time-picker');
  document.getElementById('open-time').addEventListener('click', () => dialog.show());
  dialog.addEventListener('click', (event) => {
    const action = event.target.closest('[data-action]')?.dataset.action;
    if (action === 'ok') {
      document.getElementById('time-value').textContent =
        `${String(picker.hour).padStart(2, '0')}:${String(picker.minute).padStart(2, '0')}`;
    }
    if (action) dialog.close();
  });
</script>