# time-picker

Time selection with 12h/24h format, minute stepping, confirm/cancel flow, and floating panel.

## Markup

```html
<div data-c42-timepicker>
  <button data-c42-timepicker-trigger>
    <span data-c42-timepicker-value></span>
  </button>
  <div data-c42-timepicker-panel>
    <input data-c42-timepicker-hour inputmode="numeric" aria-label="Hour" />
    <span>:</span>
    <input data-c42-timepicker-minute inputmode="numeric" aria-label="Minute" />
    <button data-c42-timepicker-period>AM</button>
    <button data-c42-timepicker-cancel>Cancel</button>
    <button data-c42-timepicker-confirm>OK</button>
  </div>
</div>
```

Note: `[data-c42-timepicker-period]` is only needed for 12h format. In 24h mode it is hidden automatically.

## Options

```ts
import { TimePicker } from '@42/core/time-picker';

new TimePicker(root, {
  defaultValue: null,         // '14:30' (always 24h format internally)
  format: '12h',             // '12h' | '24h'
  minuteStep: 1,            // granularity for clamping (1, 5, 15, 30)
  placeholder: 'Select a time',
  closeOnConfirm: true,
  placement: 'bottom-start', // floating-ui Placement
  offset: 4,
});
```

## Events

| Event | Detail |
|-------|--------|
| `timepicker:change` | `{ value: string \| null, hours: number \| null, minutes: number \| null }` |
| `timepicker:open` | — |
| `timepicker:close` | — |

## Behaviour

- Opening the panel shows current value (or empty inputs).
- User edits hour/minute, toggles AM/PM.
- **Confirm** commits the value and fires `timepicker:change`.
- **Cancel** reverts to previous value and closes.
- Value is always stored internally as `HH:MM` (24h). Display adapts to `format`.
- `minuteStep` clamps entered minutes to the nearest multiple.