# rn-duration-select
URL: /docs/native/docyrus/duration-select

Duration picker with hours and minutes grid, supporting multiple display formats.

## Installation

```bash
pnpm dlx @docyrus/cli add @docyrus/rn-duration-select
```

## Usage

```tsx
import { DurationSelect } from '@/components/docyrus-native/duration-select';

const [duration, setDuration] = useState<number | null>(3600); // 1 hour in seconds

```

### Display Formats

```tsx
// Compact: "2h 30m"

// HH:MM: "02:30"

// Decimal: "2.50h"

```

### Custom Increments

```tsx

```

### Format Helper

```tsx
import { formatDurationDisplay } from '@/components/docyrus-native/duration-select';

formatDurationDisplay(5400, 'compact'); // "1h 30m"
formatDurationDisplay(5400, 'HH:MM');   // "01:30"
formatDurationDisplay(5400, 'decimal'); // "1.50h"
```

## API Reference

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `value` | `number \| null \| undefined` | — | Duration value in seconds. |
| `onChange` | `(seconds: number \| null) => void` | — | Callback when the duration changes. Receives `null` when cleared. |
| `format` | `'HH:MM' \| 'compact' \| 'decimal'` | `'compact'` | Display format for the trigger label. |
| `minuteIncrement` | `number` | `15` | Minute step interval in the picker grid. |
| `maxHours` | `number` | `8` | Maximum number of hours shown in the picker grid. |
| `disabled` | `boolean` | `false` | When true, the trigger is non-interactive and visually dimmed. |
| `invalid` | `boolean` | `false` | When true, the trigger border uses the destructive color. |
| `placeholder` | `string` | `'0h 0m'` | Placeholder text when no value is selected. |
| `icon` | `ReactNode` | clock icon | Leading trigger icon (native-only). |
| `className` | `string` | — | Custom style applied to the trigger button. |

Picking a cell commits immediately and closes the sheet; **Clear** calls `onChange(null)`; **Done** just closes.

### Translations

The sheet reads its copy from `<UiTranslationProvider>`:

| Key | Fallback |
|-----|----------|
| `ui.durationSelect.title` | `Select Duration` |
| `ui.durationSelect.hint` | `Choose hours and minutes` |
| `ui.durationSelect.clear` | `Clear` |
| `ui.durationSelect.done` | `Done` |
| `ui.common.durationPicker` | `Duration picker` (trigger accessibility label — same key as web) |
| `ui.common.hours` / `ui.common.minutes` | `hours` / `minutes` (cell accessibility labels — same keys as web) |

## Components

| Component | Description |
|-----------|-------------|
| `DurationSelect` | Trigger + hour/minute grid sheet |

## Exported Functions

| Function | Signature | Description |
|----------|-----------|-------------|
| `formatDurationDisplay` | `(totalSeconds: number, format: DurationFormat) => string` | Formats a duration in seconds to a display string using the specified format. |

## Type Exports

| Type | Description |
|------|-------------|
| `DurationSelectProps` | Props for the DurationSelect component. |
| `DurationFormat` | Display format: `'HH:MM' \| 'compact' \| 'decimal'`. |