Time Field

<script lang="ts">
	import { TimeField } from 'bits-ui';
	import { Time } from '@internationalized/date';

	let value = $state(new Time(9, 30));

	function adjust(minutes: number) {
		value = value.add({ minutes });
	}
</script>

<div class="mx-auto grid w-full max-w-md gap-4">
	<TimeField.Root bind:value granularity="minute" hourCycle={12} locale="en-US">
		<div class="grid gap-2">
		<TimeField.Label class="text-sm font-medium text-ink-200">Daily stand-up</TimeField.Label>
		<TimeField.Input
			name="stand-up-time"
			class="input flex min-h-11 items-center focus-within:border-brand-600 data-invalid:border-accent-500"
		>
			{#snippet children({ segments })}
				{#each segments as { part, value: segmentValue }, i (part + i)}
					{#if part === 'literal'}
						<TimeField.Segment {part} class="px-0.5 text-ink-600">
							{segmentValue}
						</TimeField.Segment>
					{:else}
						<TimeField.Segment
							{part}
							class="rounded-md px-1.5 py-1 font-mono text-sm tabular-nums outline-none hover:bg-ink-850 focus:bg-brand-500 focus:text-ink-950 data-invalid:text-accent-500 aria-[valuetext=Empty]:text-ink-600"
						>
							{segmentValue}
						</TimeField.Segment>
					{/if}
				{/each}
			{/snippet}
		</TimeField.Input>
		</div>
	</TimeField.Root>

	<div class="flex flex-wrap items-center gap-2">
		<button type="button" class="btn btn-sm" onclick={() => adjust(-15)}>−15 min</button>
		<button type="button" class="btn btn-sm" onclick={() => adjust(15)}>+15 min</button>
		<span class="chip ml-auto font-mono">{value.toString()}</span>
	</div>
</div>

<script lang="ts">
	import { TimeField } from 'bits-ui';
	import { CalendarDateTime, Time } from '@internationalized/date';

	let preciseTime = $state(new Time(14, 7, 35));
	let scheduledTime = $state(new CalendarDateTime(2026, 10, 21, 18, 45));
</script>

<div class="grid gap-5 sm:grid-cols-2">
	<div class="grid content-start gap-2">
		<TimeField.Root
			bind:value={preciseTime}
			granularity="second"
			hourCycle={24}
			locale="en-GB"
		>
			<TimeField.Label class="text-sm font-medium text-ink-200">Render deadline</TimeField.Label>
			<TimeField.Input
				name="render-deadline"
				class="input flex min-h-11 items-center focus-within:border-brand-600 data-invalid:border-accent-500"
			>
				{#snippet children({ segments })}
					{#each segments as { part, value: segmentValue }, i (part + i)}
						{#if part === 'literal'}
							<TimeField.Segment {part} class="px-0.5 text-ink-600">
								{segmentValue}
							</TimeField.Segment>
						{:else}
							<TimeField.Segment
								{part}
								class="rounded-md px-1 py-1 font-mono text-sm tabular-nums outline-none hover:bg-ink-850 focus:bg-brand-500 focus:text-ink-950 data-invalid:text-accent-500 aria-[valuetext=Empty]:text-ink-600"
							>
								{segmentValue}
							</TimeField.Segment>
						{/if}
					{/each}
				{/snippet}
			</TimeField.Input>
		</TimeField.Root>
		<p class="muted text-xs">Time · second precision · 24-hour</p>
		<code class="text-xs text-brand-400">{preciseTime.toString()}</code>
	</div>

	<div class="grid content-start gap-2">
		<TimeField.Root
			bind:value={scheduledTime}
			granularity="minute"
			hourCycle={12}
			locale="en-US"
		>
			<TimeField.Label class="text-sm font-medium text-ink-200">Release call</TimeField.Label>
			<TimeField.Input
				name="release-call"
				class="input flex min-h-11 items-center focus-within:border-brand-600 data-invalid:border-accent-500"
			>
				{#snippet children({ segments })}
					{#each segments as { part, value: segmentValue }, i (part + i)}
						{#if part === 'literal'}
							<TimeField.Segment {part} class="px-0.5 text-ink-600">
								{segmentValue}
							</TimeField.Segment>
						{:else}
							<TimeField.Segment
								{part}
								class="rounded-md px-1 py-1 font-mono text-sm tabular-nums outline-none hover:bg-ink-850 focus:bg-brand-500 focus:text-ink-950 data-invalid:text-accent-500 aria-[valuetext=Empty]:text-ink-600"
							>
								{segmentValue}
							</TimeField.Segment>
						{/if}
					{/each}
				{/snippet}
			</TimeField.Input>
		</TimeField.Root>
		<p class="muted text-xs">CalendarDateTime · minute precision · 12-hour</p>
		<code class="text-xs text-brand-400">{scheduledTime.toString()}</code>
	</div>
</div>