<!-- source-hash: 874180cd50bd3a257869df027cbe8b99 -->
Segmented `HH:MM:SS` duration input component where each time unit (hours, minutes, seconds) is an independently focusable field with keyboard navigation and auto-advance behavior.

## Key Components

- **`DurationInput`** — Main component export. Renders three linked `<input>` fields separated by colon delimiters.
- **`DurationInputProps`** — Interface accepting `value` (`HH:MM:SS` string), `onChange` callback, optional `invalid` flag, and `className`.
- **`SEGMENT_META`** — Tuple defining per-segment constraints: label, placeholder, and max value (99 for hours, 59 for minutes/seconds).
- **`commit`** — Internal helper that syncs segment state, fires `onChange`, and optionally advances focus to the next segment.
- **`split` / `compose`** — Converts between the `HH:MM:SS` string format and the internal `[HH, MM, SS]` tuple.

## Usage Example

```typescript
import { useState } from "react";
import { DurationInput } from "@openframe/ui";

export function TimerForm() {
  const [duration, setDuration] = useState("01:30:00");

  return (
    <DurationInput
      value={duration}
      onChange={setDuration}
      invalid={duration === "00:00:00"}
    />
  );
}
```

## Keyboard Behavior

| Key | Action |
|---|---|
| `0–9` | Fill current segment; auto-advance when 2 digits entered or unambiguous (e.g., `6–9` in MM/SS) |
| `ArrowUp` / `ArrowDown` | Increment/decrement current segment with wrap-around |
| `ArrowLeft` / `ArrowRight` | Move between segments at boundary |
| `Backspace` | Clear and move to previous segment when empty |
| `:` | Advance to next segment |

Values are clamped to segment maximums (MM/SS ≤ 59, HH ≤ 99), making it impossible to produce an invalid duration. External value changes (e.g., form resets) are adopted without interrupting in-progress edits.