---

## TimeInput
Segmented time-of-day field — hour / minute (/ second) cells in a
single unified control, with per-segment Arrow-key stepping, digit auto-advance,
and 12- or 24-hour display. Fills the last form-family gap (Calendar, DatePicker
and DateRangePicker cover dates; this covers time). The value is always a
canonical 24-hour `HH:MM` (or `HH:MM:SS`) string regardless of display format,
and `null` when empty.

**Import:** `import { TimeInput } from '@urbicon-ui/blocks';`

### Examples
```svelte
<script>
  let time = $state('09:30');
</script>
<TimeInput label="Start" bind:value={time} />
```

```svelte
<TimeInput format="12h" withSeconds min="08:00" max="18:00" bind:value={time} />
```

### Variants
- intent: danger, default, success, warning (default: default)
- variant: filled, ghost, outlined (default: outlined)
- size: lg, md, sm (default: md)
- disabled: true (default: false)
- fullWidth: true (default: false)
- messageType: error, helper (default: helper)
- readonly: true (default: false)
- required: true (default: false)
- tier: commit, modify (default: modify)

### Api
| Prop | Type | Required | Default | Description |
| --- | --- | :---: | --- | --- |
| ...TimeInputVariants | `VariantProps` | no |  | Styling variants from TimeInputVariants |
| aria-label | `string` | no |  | Accessible name for the field group when no visible `label` is set. |
| class | `string` | no |  | Extra classes merged onto the root wrapper. |
| disabled | `boolean` | no | false | Whether the TimeInput is disabled and non-interactive |
| error | `string` | no |  | Error message below the field. When set it overrides `helper`, colours the field danger, and marks the segments `aria-invalid`. |
| format | `'12h' | '24h'` | no | '24h' | Display the hour as 12-hour with an AM/PM segment. The value stays 24-hour. |
| fullWidth | `boolean` | no | false | Stretch the field to the full width of its container. |
| helper | `string` | no |  | Helper text below the field — hidden when `error` is present. |
| icon | `Snippet` | no |  | A custom leading icon; replaces the default clock. |
| id | `string` | no |  | Root id; the segments derive their ids and ARIA wiring from it. |
| label | `string` | no |  | Label text displayed above the field, linked via `aria-labelledby`. |
| max | `string` | no |  | Latest allowed time, canonical 24-hour `HH:MM`(`:SS`). Values above it are clamped down on blur. |
| min | `string` | no |  | Earliest allowed time, canonical 24-hour `HH:MM`(`:SS`). Values below it are clamped up on blur. |
| name | `string` | no |  | Name for a hidden input carrying the canonical value, for native form submission. |
| onValueChange | `(value: string | null) => void` | no |  | Fires after any change with the canonical 24-hour value (or `null`). |
| preset | `string` | no |  | Apply a named preset registered via `<BlocksProvider presets={{ TimeInput: {...} }}>`. |
| readonly | `boolean` | no | false | Readonly property for the TimeInput component |
| required | `boolean` | no | false | Adds a required asterisk to the label. |
| showIcon | `boolean` | no | true | Show the leading clock icon. |
| slotClasses | `Partial<Record<TimeInputSlots, string>>` | no |  | Per-slot class overrides merged with tv() styles. Slots: wrapper (what `class` also targets) | label | field | icon | segment | separator | meridiem | message. |
| unstyled | `boolean` | no |  | Remove all default tv() classes — only user-provided classes apply. |
| value | `string | null` | no |  | Current time as a canonical 24-hour `HH:MM` / `HH:MM:SS` string; `null` when empty. The stored format never changes with `format`. Supports `bind:value`. |
| withSeconds | `boolean` | no | false | Add a seconds segment. |
| intent | `'danger' | 'default' | 'success' | 'warning'` | no | default | Controls the color theme and semantic meaning of the TimeInput. Affects the overall appearance and user perception. Available options: danger, default, success, warning. |
| variant | `'filled' | 'ghost' | 'outlined'` | no | outlined | Controls the visual style and presentation of the TimeInput. Determines the component's visual treatment. Available options: filled, ghost, outlined. |
| size | `'lg' | 'md' | 'sm'` | no | md | Controls the dimensions, padding, and text size of the TimeInput. Affects the component's physical footprint. Available options: lg, md, sm. |
| messageType | `'error' | 'helper'` | no | helper | Controls the messageType behavior and appearance of the TimeInput component. Available options: error, helper. |
| tier | `'commit' | 'modify'` | no | modify | Controls the tier behavior and appearance of the TimeInput component. Available options: commit, modify. |

Inherited from:
- Omit<TimeInputVariants, 'error'> (omit-pattern)

### Types
```ts
type SlotNames = keyof ReturnType<T> & string
```

```ts
type VariantProps = Omit<
  Exclude<Parameters<T>[0], undefined>,
  'class'
>
```

### Slots (slotClasses keys)
`wrapper`, `label`, `field`, `icon`, `segment`, `separator`, `meridiem`, `message`