time input: add formatTime helper

src/lib/TimeInput.svelte

@@ -1,3 +1,19 @@
+<script lang="ts" module>
+	/**
+	 * formatTime returns a human readable 12-hour based string.
+	 *
+	 * @param time The time to format, can be null or undefined.
+	 * @param fallback Optional fallback string to return if time is null or undefined.
+	 *                 If not provided, an empty string will be returned.
+	 *                 If provided, it will be returned when time is null or undefined.
+	 * @returns The time in 12-hour format or the fallback string if undefined.
+	 */
+	export const formatTime = (time: Time | null | undefined, fallback?: string): string => {
+		if (!time) return fallback ?? '';
+		return moment(time.toString(), 'HH:mm:ss').format('h:mm A');
+	};
+</script>
+
 <script lang="ts">
 	import { liveValidator, validate } from '@svelte-toolkit/validate';
 	import Label from './Label.svelte';
@@ -153,8 +169,7 @@
 		updateHiddenInput();
 
 		// update formatted value
-		const date = moment(value, 'HH:mm');
+		formattedValue = formatTime(value);
-		formattedValue = date.format('h:mm A');
 	};
 
 	/**

src/routes/+page.svelte

@@ -14,7 +14,7 @@
 	import RadioGroup from '$lib/RadioGroup.svelte';
 	import StyledRawInput from '$lib/StyledRawInput.svelte';
 	import TextInput from '$lib/TextInput.svelte';
-	import TimeInput from '$lib/TimeInput.svelte';
+	import TimeInput, { formatTime } from '$lib/TimeInput.svelte';
 	import TimezoneInput from '$lib/TimezoneInput.svelte';
 	import ToggleGroup from '$lib/ToggleGroup.svelte';
 	import ToggleSelect from '$lib/ToggleSelect.svelte';
@@ -31,6 +31,7 @@
 	} from 'phosphor-svelte';
 	import { ErrorMessage, type ComboboxOption, type Option } from '$lib';
 	import Tabs from '$lib/Tabs.svelte';
+	import { Time } from '@internationalized/date';
 
 	const comboboxOptions = [
 		{ value: 'option1', label: 'Option 1' },
@@ -46,6 +47,7 @@
 		'item two',
 		{ value: 'complex', label: 'Complex item' }
 	]);
+	let timeValue = $state<Time | null>(null);
 
 	const toolbar = new Toolbar();
 	const fontGroup = toolbar.group();
@@ -261,7 +263,10 @@
 
 	<InputGroup class="gap-8">
 		<TimeInput label="Regular time input" name="example-time-input" />
-		<TimeInput label="Compact time" compact />
+		<TimeInput label="Compact time" compact bind:value={timeValue} />
+	</InputGroup>
+	<InputGroup>
+		<p>Selected time is {formatTime(timeValue, 'undefined')}</p>
 	</InputGroup>
 </div>