@aspect-ops/exon-ui 0.0.3 → 0.2.0

package/dist/components/TimePicker/TimePicker.svelte

@@ -0,0 +1,803 @@
+<script lang="ts">
+	import type { InputSize } from '../../types/index.js';
+	import { onMount } from 'svelte';
+
+	interface Props {
+		value?: string;
+		format?: '12h' | '24h';
+		minuteStep?: number;
+		min?: string;
+		max?: string;
+		disabled?: boolean;
+		error?: boolean;
+		size?: InputSize;
+		placeholder?: string;
+		class?: string;
+		onchange?: (value: string) => void;
+	}
+
+	let {
+		value = $bindable(''),
+		format = '24h',
+		minuteStep = 1,
+		min = undefined,
+		max = undefined,
+		disabled = false,
+		error = false,
+		size = 'md',
+		placeholder = 'Select time',
+		class: className = '',
+		onchange
+	}: Props = $props();
+
+	let isOpen = $state(false);
+	let inputElement: HTMLInputElement | undefined;
+	let pickerElement = $state<HTMLDivElement | undefined>(undefined);
+	let hourScrollElement = $state<HTMLDivElement | undefined>(undefined);
+	let minuteScrollElement = $state<HTMLDivElement | undefined>(undefined);
+	let periodScrollElement = $state<HTMLDivElement | undefined>(undefined);
+	let selectedHour = $state(0);
+	let selectedMinute = $state(0);
+	let period = $state<'AM' | 'PM'>('AM');
+	let focusedColumn: 'hour' | 'minute' | 'period' = $state('hour');
+
+	// Generate hour/minute options
+	const hours = $derived(
+		format === '12h'
+			? Array.from({ length: 12 }, (_, i) => i + 1)
+			: Array.from({ length: 24 }, (_, i) => i)
+	);
+	const minutes = $derived(Array.from({ length: 60 / minuteStep }, (_, i) => i * minuteStep));
+
+	// Parse value to update internal state
+	$effect(() => {
+		if (value) {
+			const parsed = parseTimeValue(value);
+			if (parsed) {
+				selectedHour = parsed.hour;
+				selectedMinute = parsed.minute;
+				period = parsed.period;
+			}
+		}
+	});
+
+	function parseTimeValue(timeStr: string): {
+		hour: number;
+		minute: number;
+		period: 'AM' | 'PM';
+	} | null {
+		const match = timeStr.match(/^(\d{1,2}):(\d{2})$/);
+		if (!match) return null;
+
+		let hour = parseInt(match[1], 10);
+		const minute = parseInt(match[2], 10);
+
+		if (format === '12h') {
+			const isPM = hour >= 12;
+			if (hour === 0) hour = 12;
+			else if (hour > 12) hour -= 12;
+			return {
+				hour,
+				minute,
+				period: isPM ? 'PM' : 'AM'
+			};
+		} else {
+			return {
+				hour,
+				minute,
+				period: hour >= 12 ? 'PM' : 'AM'
+			};
+		}
+	}
+
+	function formatTimeValue(hour: number, minute: number, per: 'AM' | 'PM'): string {
+		if (format === '12h') {
+			// Convert 12h format to 24h HH:mm
+			let h24 = hour;
+			if (per === 'PM' && hour !== 12) {
+				h24 = hour + 12;
+			} else if (per === 'AM' && hour === 12) {
+				h24 = 0;
+			}
+			return `${String(h24).padStart(2, '0')}:${String(minute).padStart(2, '0')}`;
+		} else {
+			return `${String(hour).padStart(2, '0')}:${String(minute).padStart(2, '0')}`;
+		}
+	}
+
+	function formatDisplayValue(timeStr: string): string {
+		if (!timeStr) return '';
+		const parsed = parseTimeValue(timeStr);
+		if (!parsed) return timeStr;
+
+		if (format === '12h') {
+			return `${parsed.hour}:${String(parsed.minute).padStart(2, '0')} ${parsed.period}`;
+		} else {
+			return `${String(parsed.hour).padStart(2, '0')}:${String(parsed.minute).padStart(2, '0')}`;
+		}
+	}
+
+	const displayValue = $derived(formatDisplayValue(value));
+
+	function isTimeDisabled(hour: number, minute: number, per: 'AM' | 'PM'): boolean {
+		const timeStr = formatTimeValue(hour, minute, per);
+		if (min && timeStr < min) return true;
+		if (max && timeStr > max) return true;
+		return false;
+	}
+
+	function selectTime(hour: number, minute: number, per: 'AM' | 'PM') {
+		if (isTimeDisabled(hour, minute, per) || disabled) return;
+		selectedHour = hour;
+		selectedMinute = minute;
+		period = per;
+
+		const newValue = formatTimeValue(hour, minute, per);
+		value = newValue;
+		onchange?.(newValue);
+	}
+
+	function confirmSelection() {
+		selectTime(selectedHour, selectedMinute, period);
+		closePicker();
+	}
+
+	function clearTime() {
+		value = '';
+		onchange?.('');
+		inputElement?.focus();
+	}
+
+	function openPicker() {
+		if (disabled) return;
+		isOpen = true;
+
+		// Initialize from current value or set to current time
+		if (value) {
+			const parsed = parseTimeValue(value);
+			if (parsed) {
+				selectedHour = parsed.hour;
+				selectedMinute = parsed.minute;
+				period = parsed.period;
+			}
+		} else {
+			const now = new Date();
+			let hour = now.getHours();
+			const minute = Math.floor(now.getMinutes() / minuteStep) * minuteStep;
+
+			if (format === '12h') {
+				period = hour >= 12 ? 'PM' : 'AM';
+				if (hour === 0) hour = 12;
+				else if (hour > 12) hour -= 12;
+			} else {
+				period = hour >= 12 ? 'PM' : 'AM';
+			}
+
+			selectedHour = hour;
+			selectedMinute = minute;
+		}
+
+		// Scroll to selected values after DOM updates
+		setTimeout(() => {
+			scrollToSelected();
+		}, 10);
+	}
+
+	function closePicker() {
+		isOpen = false;
+	}
+
+	function scrollToSelected() {
+		const scrollToOption = (container: HTMLDivElement | undefined, value: number) => {
+			if (!container) return;
+			const option = container.querySelector(`[data-value="${value}"]`) as HTMLElement;
+			if (option) {
+				const containerHeight = container.clientHeight;
+				const optionTop = option.offsetTop;
+				const optionHeight = option.offsetHeight;
+				container.scrollTop = optionTop - containerHeight / 2 + optionHeight / 2;
+			}
+		};
+
+		scrollToOption(hourScrollElement, selectedHour);
+		scrollToOption(minuteScrollElement, selectedMinute);
+		if (format === '12h' && periodScrollElement) {
+			const periodValue = period === 'AM' ? 0 : 1;
+			scrollToOption(periodScrollElement, periodValue);
+		}
+	}
+
+	function handleKeyDown(e: KeyboardEvent) {
+		if (!isOpen) return;
+
+		switch (e.key) {
+			case 'ArrowUp':
+				e.preventDefault();
+				if (focusedColumn === 'hour') {
+					const currentIndex = hours.indexOf(selectedHour);
+					const newIndex = currentIndex > 0 ? currentIndex - 1 : hours.length - 1;
+					selectedHour = hours[newIndex];
+				} else if (focusedColumn === 'minute') {
+					const currentIndex = minutes.indexOf(selectedMinute);
+					const newIndex = currentIndex > 0 ? currentIndex - 1 : minutes.length - 1;
+					selectedMinute = minutes[newIndex];
+				} else if (focusedColumn === 'period') {
+					period = period === 'AM' ? 'PM' : 'AM';
+				}
+				scrollToSelected();
+				break;
+			case 'ArrowDown':
+				e.preventDefault();
+				if (focusedColumn === 'hour') {
+					const currentIndex = hours.indexOf(selectedHour);
+					const newIndex = currentIndex < hours.length - 1 ? currentIndex + 1 : 0;
+					selectedHour = hours[newIndex];
+				} else if (focusedColumn === 'minute') {
+					const currentIndex = minutes.indexOf(selectedMinute);
+					const newIndex = currentIndex < minutes.length - 1 ? currentIndex + 1 : 0;
+					selectedMinute = minutes[newIndex];
+				} else if (focusedColumn === 'period') {
+					period = period === 'AM' ? 'PM' : 'AM';
+				}
+				scrollToSelected();
+				break;
+			case 'Tab':
+				e.preventDefault();
+				if (e.shiftKey) {
+					// Shift+Tab - move backward
+					if (focusedColumn === 'period') focusedColumn = 'minute';
+					else if (focusedColumn === 'minute') focusedColumn = 'hour';
+					else if (focusedColumn === 'hour' && format === '12h') focusedColumn = 'period';
+				} else {
+					// Tab - move forward
+					if (focusedColumn === 'hour') focusedColumn = 'minute';
+					else if (focusedColumn === 'minute' && format === '12h') focusedColumn = 'period';
+					else if (focusedColumn === 'minute') focusedColumn = 'hour';
+					else if (focusedColumn === 'period') focusedColumn = 'hour';
+				}
+				break;
+			case 'Enter':
+				e.preventDefault();
+				confirmSelection();
+				break;
+			case 'Escape':
+				e.preventDefault();
+				closePicker();
+				inputElement?.focus();
+				break;
+		}
+	}
+
+	function handleClickOutside(e: MouseEvent) {
+		if (!isOpen) return;
+		const target = e.target as Node;
+		if (
+			pickerElement &&
+			!pickerElement.contains(target) &&
+			inputElement &&
+			!inputElement.contains(target)
+		) {
+			closePicker();
+		}
+	}
+
+	onMount(() => {
+		document.addEventListener('click', handleClickOutside);
+		return () => {
+			document.removeEventListener('click', handleClickOutside);
+		};
+	});
+</script>
+
+<div class="timepicker timepicker--{size} {className}">
+	<div class="timepicker__input-wrapper">
+		<input
+			bind:this={inputElement}
+			type="text"
+			role="combobox"
+			class="timepicker__input"
+			class:timepicker__input--error={error}
+			class:timepicker__input--disabled={disabled}
+			value={displayValue}
+			{placeholder}
+			{disabled}
+			readonly
+			aria-invalid={error}
+			aria-haspopup="dialog"
+			aria-expanded={isOpen}
+			aria-controls="timepicker-dropdown"
+			onclick={openPicker}
+			onkeydown={(e) => {
+				if (e.key === 'Enter' || e.key === ' ') {
+					e.preventDefault();
+					openPicker();
+				}
+			}}
+		/>
+
+		<div class="timepicker__icons">
+			{#if value && !disabled}
+				<button
+					type="button"
+					class="timepicker__clear"
+					aria-label="Clear time"
+					onclick={(e) => {
+						e.stopPropagation();
+						clearTime();
+					}}
+				>
+					<svg
+						width="16"
+						height="16"
+						viewBox="0 0 16 16"
+						fill="none"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<path
+							d="M12 4L4 12M4 4L12 12"
+							stroke="currentColor"
+							stroke-width="1.5"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						/>
+					</svg>
+				</button>
+			{/if}
+
+			<button
+				type="button"
+				class="timepicker__clock-icon"
+				aria-label="Open time picker"
+				{disabled}
+				onclick={openPicker}
+			>
+				<svg
+					width="16"
+					height="16"
+					viewBox="0 0 16 16"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<circle
+						cx="8"
+						cy="8"
+						r="6"
+						stroke="currentColor"
+						stroke-width="1.5"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					/>
+					<path
+						d="M8 4.66667V8L10 10"
+						stroke="currentColor"
+						stroke-width="1.5"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					/>
+				</svg>
+			</button>
+		</div>
+	</div>
+
+	{#if isOpen}
+		<div
+			bind:this={pickerElement}
+			id="timepicker-dropdown"
+			class="timepicker__picker"
+			role="dialog"
+			aria-label="Choose a time"
+			aria-modal="false"
+			tabindex="-1"
+			onkeydown={handleKeyDown}
+		>
+			<div class="timepicker__columns">
+				<!-- Hour column -->
+				<div class="timepicker__column">
+					<div class="timepicker__column-label">Hour</div>
+					<div
+						bind:this={hourScrollElement}
+						class="timepicker__scroll"
+						aria-label="Select hour"
+						onfocus={() => {
+							focusedColumn = 'hour';
+						}}
+					>
+						{#each hours as hour}
+							<button
+								type="button"
+								class="timepicker__option"
+								class:timepicker__option--selected={hour === selectedHour}
+								class:timepicker__option--focused={focusedColumn === 'hour' &&
+									hour === selectedHour}
+								data-value={hour}
+								disabled={isTimeDisabled(hour, selectedMinute, period)}
+								tabindex={focusedColumn === 'hour' && hour === selectedHour ? 0 : -1}
+								onclick={() => {
+									selectedHour = hour;
+									focusedColumn = 'hour';
+								}}
+							>
+								{format === '12h' ? hour : String(hour).padStart(2, '0')}
+							</button>
+						{/each}
+					</div>
+				</div>
+
+				<!-- Minute column -->
+				<div class="timepicker__column">
+					<div class="timepicker__column-label">Min</div>
+					<div
+						bind:this={minuteScrollElement}
+						class="timepicker__scroll"
+						aria-label="Select minute"
+						onfocus={() => {
+							focusedColumn = 'minute';
+						}}
+					>
+						{#each minutes as minute}
+							<button
+								type="button"
+								class="timepicker__option"
+								class:timepicker__option--selected={minute === selectedMinute}
+								class:timepicker__option--focused={focusedColumn === 'minute' &&
+									minute === selectedMinute}
+								data-value={minute}
+								disabled={isTimeDisabled(selectedHour, minute, period)}
+								tabindex={focusedColumn === 'minute' && minute === selectedMinute ? 0 : -1}
+								onclick={() => {
+									selectedMinute = minute;
+									focusedColumn = 'minute';
+								}}
+							>
+								{String(minute).padStart(2, '0')}
+							</button>
+						{/each}
+					</div>
+				</div>
+
+				<!-- Period column (12h only) -->
+				{#if format === '12h'}
+					<div class="timepicker__column">
+						<div class="timepicker__column-label">&nbsp;</div>
+						<div
+							bind:this={periodScrollElement}
+							class="timepicker__scroll"
+							aria-label="Select AM or PM"
+							onfocus={() => {
+								focusedColumn = 'period';
+							}}
+						>
+							{#each ['AM', 'PM'] as per, idx}
+								<button
+									type="button"
+									class="timepicker__option"
+									class:timepicker__option--selected={per === period}
+									class:timepicker__option--focused={focusedColumn === 'period' && per === period}
+									data-value={idx}
+									tabindex={focusedColumn === 'period' && per === period ? 0 : -1}
+									onclick={() => {
+										period = per as 'AM' | 'PM';
+										focusedColumn = 'period';
+									}}
+								>
+									{per}
+								</button>
+							{/each}
+						</div>
+					</div>
+				{/if}
+			</div>
+
+			<div class="timepicker__actions">
+				<button
+					type="button"
+					class="timepicker__action-button timepicker__action-button--cancel"
+					onclick={closePicker}
+				>
+					Cancel
+				</button>
+				<button
+					type="button"
+					class="timepicker__action-button timepicker__action-button--confirm"
+					onclick={confirmSelection}
+				>
+					OK
+				</button>
+			</div>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.timepicker {
+		position: relative;
+		width: 100%;
+	}
+
+	.timepicker__input-wrapper {
+		position: relative;
+		display: flex;
+		align-items: center;
+		width: 100%;
+	}
+
+	.timepicker__input {
+		width: 100%;
+		min-height: var(--touch-target-min, 44px);
+		padding: var(--space-sm, 0.5rem) var(--space-md, 1rem);
+		padding-right: 4rem;
+		border: 1px solid var(--color-border, #e5e7eb);
+		border-radius: var(--radius-md, 0.375rem);
+		background: var(--color-bg, #ffffff);
+		color: var(--color-text, #1f2937);
+		font-family: inherit;
+		font-size: var(--text-sm, 0.875rem);
+		line-height: 1.5;
+		cursor: pointer;
+		transition:
+			border-color var(--transition-fast, 150ms ease),
+			box-shadow var(--transition-fast, 150ms ease);
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	.timepicker__input::placeholder {
+		color: var(--color-text-muted, #9ca3af);
+	}
+
+	.timepicker__input:focus {
+		outline: none;
+		border-color: var(--color-primary, #3b82f6);
+		box-shadow: 0 0 0 3px var(--color-primary-alpha, rgba(59, 130, 246, 0.1));
+	}
+
+	.timepicker__input--disabled {
+		background: var(--color-bg-muted, #f3f4f6);
+		cursor: not-allowed;
+		opacity: 0.5;
+	}
+
+	.timepicker__input--error {
+		border-color: var(--color-error, #ef4444);
+	}
+
+	.timepicker__input--error:focus {
+		border-color: var(--color-error, #ef4444);
+		box-shadow: 0 0 0 3px var(--color-error-alpha, rgba(239, 68, 68, 0.1));
+	}
+
+	/* Sizes */
+	.timepicker--sm .timepicker__input {
+		min-height: var(--touch-target-min, 44px);
+		padding: var(--space-xs, 0.25rem) var(--space-sm, 0.5rem);
+		padding-right: 3.5rem;
+		font-size: var(--text-xs, 0.75rem);
+	}
+
+	.timepicker--md .timepicker__input {
+		min-height: var(--touch-target-min, 44px);
+		padding: var(--space-sm, 0.5rem) var(--space-md, 1rem);
+		padding-right: 4rem;
+		font-size: var(--text-sm, 0.875rem);
+	}
+
+	.timepicker--lg .timepicker__input {
+		min-height: 3.25rem;
+		padding: var(--space-md, 1rem) var(--space-lg, 1.5rem);
+		padding-right: 4.5rem;
+		font-size: var(--text-base, 1rem);
+	}
+
+	/* Icons */
+	.timepicker__icons {
+		position: absolute;
+		right: var(--space-md, 1rem);
+		display: flex;
+		align-items: center;
+		gap: var(--space-xs, 0.25rem);
+	}
+
+	.timepicker__clear,
+	.timepicker__clock-icon {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		min-width: var(--touch-target-min, 44px);
+		min-height: var(--touch-target-min, 44px);
+		padding: var(--space-xs, 0.25rem);
+		border: none;
+		background: transparent;
+		color: var(--color-text-muted, #6b7280);
+		cursor: pointer;
+		border-radius: var(--radius-sm, 0.25rem);
+		transition: background var(--transition-fast, 150ms ease);
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	.timepicker__clear:hover,
+	.timepicker__clock-icon:hover {
+		background: var(--color-bg-muted, #f3f4f6);
+		color: var(--color-text, #1f2937);
+	}
+
+	.timepicker__clock-icon:disabled {
+		cursor: not-allowed;
+		opacity: 0.5;
+	}
+
+	/* Picker */
+	.timepicker__picker {
+		position: absolute;
+		top: calc(100% + 0.5rem);
+		left: 0;
+		z-index: 50;
+		min-width: 16rem;
+		padding: var(--space-md, 1rem);
+		border: 1px solid var(--color-border, #e5e7eb);
+		border-radius: var(--radius-md, 0.375rem);
+		background: var(--color-bg, #ffffff);
+		box-shadow: var(--shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.1));
+		animation: picker-in 150ms ease-out;
+		font-family: var(--font-family, system-ui, -apple-system, sans-serif);
+	}
+
+	@keyframes picker-in {
+		from {
+			opacity: 0;
+			transform: translateY(-4px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	.timepicker__columns {
+		display: flex;
+		gap: var(--space-sm, 0.5rem);
+		margin-bottom: var(--space-md, 1rem);
+	}
+
+	.timepicker__column {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+
+	.timepicker__column-label {
+		font-size: var(--text-xs, 0.75rem);
+		font-weight: 600;
+		color: var(--color-text-muted, #6b7280);
+		margin-bottom: var(--space-xs, 0.25rem);
+		text-align: center;
+	}
+
+	.timepicker__scroll {
+		width: 100%;
+		max-height: 12rem;
+		overflow-y: auto;
+		border: 1px solid var(--color-border, #e5e7eb);
+		border-radius: var(--radius-sm, 0.25rem);
+		scroll-snap-type: y mandatory;
+		scroll-behavior: smooth;
+		-webkit-overflow-scrolling: touch;
+	}
+
+	.timepicker__option {
+		width: 100%;
+		min-height: var(--touch-target-min, 44px);
+		padding: var(--space-sm, 0.5rem);
+		border: none;
+		background: transparent;
+		color: var(--color-text, #1f2937);
+		font-size: var(--text-sm, 0.875rem);
+		cursor: pointer;
+		transition:
+			background var(--transition-fast, 150ms ease),
+			color var(--transition-fast, 150ms ease);
+		scroll-snap-align: center;
+		-webkit-tap-highlight-color: transparent;
+		text-align: center;
+	}
+
+	.timepicker__option:hover:not(:disabled) {
+		background: var(--color-bg-muted, #f3f4f6);
+	}
+
+	.timepicker__option:focus {
+		outline: none;
+	}
+
+	.timepicker__option--focused {
+		box-shadow: 0 0 0 2px var(--color-primary-alpha, rgba(59, 130, 246, 0.2));
+	}
+
+	.timepicker__option--selected {
+		background: var(--color-primary, #3b82f6);
+		color: var(--color-text-inverse, #ffffff);
+		font-weight: 600;
+	}
+
+	.timepicker__option--selected:hover {
+		background: var(--color-primary, #3b82f6);
+		color: var(--color-text-inverse, #ffffff);
+	}
+
+	.timepicker__option:disabled {
+		color: var(--color-text-muted, #9ca3af);
+		cursor: not-allowed;
+		opacity: 0.5;
+	}
+
+	.timepicker__option:disabled:hover {
+		background: transparent;
+	}
+
+	/* Actions */
+	.timepicker__actions {
+		display: flex;
+		justify-content: flex-end;
+		gap: var(--space-sm, 0.5rem);
+		padding-top: var(--space-sm, 0.5rem);
+		border-top: 1px solid var(--color-border, #e5e7eb);
+	}
+
+	.timepicker__action-button {
+		min-height: var(--touch-target-min, 44px);
+		padding: var(--space-sm, 0.5rem) var(--space-md, 1rem);
+		border: none;
+		border-radius: var(--radius-sm, 0.25rem);
+		font-size: var(--text-sm, 0.875rem);
+		font-weight: 500;
+		cursor: pointer;
+		transition:
+			background var(--transition-fast, 150ms ease),
+			color var(--transition-fast, 150ms ease);
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	.timepicker__action-button--cancel {
+		background: transparent;
+		color: var(--color-text, #1f2937);
+	}
+
+	.timepicker__action-button--cancel:hover {
+		background: var(--color-bg-muted, #f3f4f6);
+	}
+
+	.timepicker__action-button--confirm {
+		background: var(--color-primary, #3b82f6);
+		color: var(--color-text-inverse, #ffffff);
+	}
+
+	.timepicker__action-button--confirm:hover {
+		background: var(--color-primary-dark, #2563eb);
+	}
+
+	/* Mobile responsive */
+	@media (max-width: 640px) {
+		.timepicker__picker {
+			position: fixed;
+			top: auto;
+			bottom: 0;
+			left: 0;
+			right: 0;
+			min-width: 100%;
+			max-width: 100%;
+			border-radius: 1rem 1rem 0 0;
+			animation: picker-slide-up 250ms ease-out;
+			padding-bottom: calc(var(--space-md, 1rem) + env(safe-area-inset-bottom, 0));
+		}
+
+		@keyframes picker-slide-up {
+			from {
+				opacity: 0;
+				transform: translateY(100%);
+			}
+			to {
+				opacity: 1;
+				transform: translateY(0);
+			}
+		}
+	}
+</style>