add DurationInput component

src/routes/+page.svelte

@@ -1,5 +1,10 @@
 <script lang="ts">
-	import { CalendarDate, today, getLocalTimeZone } from '@internationalized/date';
+	import {
+		CalendarDate,
+		today,
+		getLocalTimeZone,
+		type TimeDuration
+	} from '@internationalized/date';
 	import Button from '$lib/Button.svelte';
 	import ActionSelect from '$lib/ActionSelect.svelte';
 	import Checkbox, { type CheckboxState } from '$lib/Checkbox.svelte';
@@ -33,6 +38,7 @@
 	import { onMount, type Component } from 'svelte';
 	import ErrorBox from '$lib/ErrorBox.svelte';
 	import TextareaInput from '$lib/TextareaInput.svelte';
+	import DurationInput, { formatDuration } from '$lib/DurationInput.svelte';
 
 	// Lazy-load heavy components
 	let PhoneInput = createLazyComponent(() => import('$lib/PhoneInput.svelte'));
@@ -60,6 +66,7 @@
 		{ value: 'complex', label: 'Complex item' }
 	]);
 	let timeValue = $state<Time | null>(null);
+	let durationValue = $state<TimeDuration | null>(null);
 
 	const toolbar = new Toolbar();
 	const fontGroup = toolbar.group();
@@ -286,11 +293,18 @@
 </div>
 
 <div class="component">
-	<p class="title">Time Input</p>
+	<p class="title">Time & Duration Input</p>
 
 	<InputGroup class="gap-8">
 		<TimeInput label="Regular time input" name="example-time-input" />
 		<TimeInput label="Compact time" compact bind:value={timeValue} />
+		<DurationInput
+			label="Duration input"
+			name="example-duration-input"
+			precision={{ min: 'hours', max: 'seconds' }}
+			bind:value={durationValue}
+		/>
+		<DurationInput label="Compact duration" compact />
 	</InputGroup>
 	<InputGroup>
 		<p>Selected time is {formatTime(timeValue, 'undefined')} ({timeValue?.toString()})</p>
@@ -301,6 +315,7 @@
 		>
 			Set 3:00 PM
 		</Button>
+		<p>Precise duration is {formatDuration(durationValue)}</p>
 	</InputGroup>
 </div>