@aspect-ops/exon-ui 0.0.3 → 0.2.0

package/dist/components/DatePicker/DatePicker.svelte

@@ -0,0 +1,746 @@
+<script lang="ts">
+	import type { InputSize } from '../../types/index.js';
+	import { onMount } from 'svelte';
+
+	interface Props {
+		value?: Date | null;
+		placeholder?: string;
+		min?: Date | null;
+		max?: Date | null;
+		disabled?: boolean;
+		required?: boolean;
+		error?: boolean;
+		size?: InputSize;
+		format?: string;
+		locale?: string;
+		class?: string;
+		onchange?: (date: Date | null) => void;
+		onclear?: () => void;
+	}
+
+	let {
+		value = $bindable(null),
+		placeholder = 'Select date',
+		min = null,
+		max = null,
+		disabled = false,
+		required = false,
+		error = false,
+		size = 'md',
+		format = 'yyyy-MM-dd',
+		locale = 'en-US',
+		class: className = '',
+		onchange,
+		onclear
+	}: Props = $props();
+
+	let isOpen = $state(false);
+	let inputElement: HTMLInputElement | undefined;
+	let calendarElement = $state<HTMLDivElement | undefined>(undefined);
+	let currentMonth = $state(
+		value ? new Date(value.getFullYear(), value.getMonth(), 1) : new Date()
+	);
+	let focusedDate = $state<Date | null>(null);
+
+	const formattedValue = $derived(value ? formatDate(value, format, locale) : '');
+
+	function formatDate(date: Date, fmt: string, loc: string): string {
+		const year = date.getFullYear();
+		const month = String(date.getMonth() + 1).padStart(2, '0');
+		const day = String(date.getDate()).padStart(2, '0');
+
+		// Simple format replacements
+		return fmt
+			.replace('yyyy', String(year))
+			.replace('yy', String(year).slice(-2))
+			.replace('MM', month)
+			.replace('M', String(date.getMonth() + 1))
+			.replace('dd', day)
+			.replace('d', String(date.getDate()));
+	}
+
+	function getDaysInMonth(date: Date): Date[] {
+		const year = date.getFullYear();
+		const month = date.getMonth();
+		const firstDay = new Date(year, month, 1);
+		const lastDay = new Date(year, month + 1, 0);
+
+		const days: Date[] = [];
+
+		// Add padding days from previous month
+		const firstDayOfWeek = firstDay.getDay();
+		for (let i = firstDayOfWeek - 1; i >= 0; i--) {
+			const prevDate = new Date(year, month, -i);
+			days.push(prevDate);
+		}
+
+		// Add current month days
+		for (let day = 1; day <= lastDay.getDate(); day++) {
+			days.push(new Date(year, month, day));
+		}
+
+		// Add padding days from next month
+		const remainingDays = 42 - days.length; // 6 weeks * 7 days
+		for (let i = 1; i <= remainingDays; i++) {
+			days.push(new Date(year, month + 1, i));
+		}
+
+		return days;
+	}
+
+	const calendarDays = $derived(getDaysInMonth(currentMonth));
+
+	function isDateDisabled(date: Date): boolean {
+		if (min && date < min) return true;
+		if (max && date > max) return true;
+		return false;
+	}
+
+	function isToday(date: Date): boolean {
+		const today = new Date();
+		return (
+			date.getDate() === today.getDate() &&
+			date.getMonth() === today.getMonth() &&
+			date.getFullYear() === today.getFullYear()
+		);
+	}
+
+	function isSelected(date: Date): boolean {
+		if (!value) return false;
+		return (
+			date.getDate() === value.getDate() &&
+			date.getMonth() === value.getMonth() &&
+			date.getFullYear() === value.getFullYear()
+		);
+	}
+
+	function isCurrentMonth(date: Date): boolean {
+		return date.getMonth() === currentMonth.getMonth();
+	}
+
+	function selectDate(date: Date) {
+		if (isDateDisabled(date) || disabled) return;
+		value = date;
+		onchange?.(date);
+		isOpen = false;
+		inputElement?.focus();
+	}
+
+	function clearDate() {
+		value = null;
+		onclear?.();
+		onchange?.(null);
+		inputElement?.focus();
+	}
+
+	function openCalendar() {
+		if (disabled) return;
+		isOpen = true;
+		// Set current month to selected date or today
+		currentMonth = value ? new Date(value.getFullYear(), value.getMonth(), 1) : new Date();
+		focusedDate = value || new Date();
+	}
+
+	function closeCalendar() {
+		isOpen = false;
+		focusedDate = null;
+	}
+
+	function previousMonth() {
+		currentMonth = new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1, 1);
+		focusedDate = new Date(currentMonth.getFullYear(), currentMonth.getMonth(), 1);
+	}
+
+	function nextMonth() {
+		currentMonth = new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, 1);
+		focusedDate = new Date(currentMonth.getFullYear(), currentMonth.getMonth(), 1);
+	}
+
+	function handleKeyDown(e: KeyboardEvent) {
+		if (!isOpen || !focusedDate) return;
+
+		const currentIndex = calendarDays.findIndex(
+			(d) =>
+				d.getDate() === focusedDate!.getDate() &&
+				d.getMonth() === focusedDate!.getMonth() &&
+				d.getFullYear() === focusedDate!.getFullYear()
+		);
+
+		if (currentIndex === -1) return;
+
+		let newIndex = currentIndex;
+
+		switch (e.key) {
+			case 'ArrowLeft':
+				e.preventDefault();
+				newIndex = Math.max(0, currentIndex - 1);
+				break;
+			case 'ArrowRight':
+				e.preventDefault();
+				newIndex = Math.min(calendarDays.length - 1, currentIndex + 1);
+				break;
+			case 'ArrowUp':
+				e.preventDefault();
+				newIndex = Math.max(0, currentIndex - 7);
+				break;
+			case 'ArrowDown':
+				e.preventDefault();
+				newIndex = Math.min(calendarDays.length - 1, currentIndex + 7);
+				break;
+			case 'Enter':
+				e.preventDefault();
+				selectDate(focusedDate);
+				return;
+			case 'Escape':
+				e.preventDefault();
+				closeCalendar();
+				return;
+			case 'Tab':
+				// Allow normal tab navigation
+				return;
+		}
+
+		if (newIndex !== currentIndex) {
+			focusedDate = calendarDays[newIndex];
+			// Change month if necessary
+			if (focusedDate.getMonth() !== currentMonth.getMonth()) {
+				currentMonth = new Date(focusedDate.getFullYear(), focusedDate.getMonth(), 1);
+			}
+		}
+	}
+
+	function handleClickOutside(e: MouseEvent) {
+		if (!isOpen) return;
+		const target = e.target as Node;
+		if (
+			calendarElement &&
+			!calendarElement.contains(target) &&
+			inputElement &&
+			!inputElement.contains(target)
+		) {
+			closeCalendar();
+		}
+	}
+
+	onMount(() => {
+		document.addEventListener('click', handleClickOutside);
+		return () => {
+			document.removeEventListener('click', handleClickOutside);
+		};
+	});
+
+	const monthYearLabel = $derived(
+		new Intl.DateTimeFormat(locale, { month: 'long', year: 'numeric' }).format(currentMonth)
+	);
+</script>
+
+<div class="datepicker datepicker--{size} {className}">
+	<div class="datepicker__input-wrapper">
+		<input
+			bind:this={inputElement}
+			type="text"
+			role="combobox"
+			class="datepicker__input"
+			class:datepicker__input--error={error}
+			class:datepicker__input--disabled={disabled}
+			value={formattedValue}
+			{placeholder}
+			{disabled}
+			{required}
+			readonly
+			aria-invalid={error}
+			aria-required={required}
+			aria-haspopup="dialog"
+			aria-expanded={isOpen}
+			aria-controls="datepicker-calendar"
+			onclick={openCalendar}
+			onkeydown={(e) => {
+				if (e.key === 'Enter' || e.key === ' ') {
+					e.preventDefault();
+					openCalendar();
+				}
+			}}
+		/>
+
+		<div class="datepicker__icons">
+			{#if value && !disabled}
+				<button
+					type="button"
+					class="datepicker__clear"
+					aria-label="Clear date"
+					onclick={(e) => {
+						e.stopPropagation();
+						clearDate();
+					}}
+				>
+					<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="datepicker__calendar-icon"
+				aria-label="Open calendar"
+				{disabled}
+				onclick={openCalendar}
+			>
+				<svg
+					width="16"
+					height="16"
+					viewBox="0 0 16 16"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<path
+						d="M12.6667 2.66667H3.33333C2.59695 2.66667 2 3.26362 2 4V13.3333C2 14.0697 2.59695 14.6667 3.33333 14.6667H12.6667C13.403 14.6667 14 14.0697 14 13.3333V4C14 3.26362 13.403 2.66667 12.6667 2.66667Z"
+						stroke="currentColor"
+						stroke-width="1.5"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					/>
+					<path
+						d="M10.6667 1.33333V4"
+						stroke="currentColor"
+						stroke-width="1.5"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					/>
+					<path
+						d="M5.33333 1.33333V4"
+						stroke="currentColor"
+						stroke-width="1.5"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					/>
+					<path
+						d="M2 6.66667H14"
+						stroke="currentColor"
+						stroke-width="1.5"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					/>
+				</svg>
+			</button>
+		</div>
+	</div>
+
+	{#if isOpen}
+		<div
+			bind:this={calendarElement}
+			id="datepicker-calendar"
+			class="datepicker__calendar"
+			role="dialog"
+			aria-label="Choose a date"
+			aria-modal="false"
+			tabindex="-1"
+			onkeydown={handleKeyDown}
+		>
+			<div class="datepicker__header">
+				<button
+					type="button"
+					class="datepicker__nav-button"
+					aria-label="Previous month"
+					onclick={previousMonth}
+					tabindex={0}
+				>
+					<svg
+						width="16"
+						height="16"
+						viewBox="0 0 16 16"
+						fill="none"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<path
+							d="M10 12L6 8L10 4"
+							stroke="currentColor"
+							stroke-width="1.5"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						/>
+					</svg>
+				</button>
+
+				<span class="datepicker__month-year" aria-live="polite">
+					{monthYearLabel}
+				</span>
+
+				<button
+					type="button"
+					class="datepicker__nav-button"
+					aria-label="Next month"
+					onclick={nextMonth}
+					tabindex={0}
+				>
+					<svg
+						width="16"
+						height="16"
+						viewBox="0 0 16 16"
+						fill="none"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<path
+							d="M6 4L10 8L6 12"
+							stroke="currentColor"
+							stroke-width="1.5"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						/>
+					</svg>
+				</button>
+			</div>
+
+			<div class="datepicker__weekdays">
+				{#each ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] as day}
+					<span class="datepicker__weekday" aria-label={day}>{day}</span>
+				{/each}
+			</div>
+
+			<div class="datepicker__days">
+				{#each calendarDays as day}
+					<button
+						type="button"
+						class="datepicker__day"
+						class:datepicker__day--today={isToday(day)}
+						class:datepicker__day--selected={isSelected(day)}
+						class:datepicker__day--disabled={isDateDisabled(day)}
+						class:datepicker__day--outside-month={!isCurrentMonth(day)}
+						class:datepicker__day--focused={focusedDate &&
+							day.getDate() === focusedDate.getDate() &&
+							day.getMonth() === focusedDate.getMonth() &&
+							day.getFullYear() === focusedDate.getFullYear()}
+						disabled={isDateDisabled(day)}
+						aria-label={new Intl.DateTimeFormat(locale, {
+							weekday: 'long',
+							year: 'numeric',
+							month: 'long',
+							day: 'numeric'
+						}).format(day)}
+						aria-current={isSelected(day) ? 'date' : undefined}
+						aria-disabled={isDateDisabled(day)}
+						tabindex={focusedDate &&
+						day.getDate() === focusedDate.getDate() &&
+						day.getMonth() === focusedDate.getMonth() &&
+						day.getFullYear() === focusedDate.getFullYear()
+							? 0
+							: -1}
+						onclick={() => selectDate(day)}
+						onfocus={() => {
+							focusedDate = day;
+						}}
+					>
+						{day.getDate()}
+					</button>
+				{/each}
+			</div>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.datepicker {
+		position: relative;
+		width: 100%;
+	}
+
+	.datepicker__input-wrapper {
+		position: relative;
+		display: flex;
+		align-items: center;
+		width: 100%;
+	}
+
+	.datepicker__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;
+	}
+
+	.datepicker__input::placeholder {
+		color: var(--color-text-muted, #9ca3af);
+	}
+
+	.datepicker__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));
+	}
+
+	.datepicker__input--disabled {
+		background: var(--color-bg-muted, #f3f4f6);
+		cursor: not-allowed;
+		opacity: 0.5;
+	}
+
+	.datepicker__input--error {
+		border-color: var(--color-error, #ef4444);
+	}
+
+	.datepicker__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 */
+	.datepicker--sm .datepicker__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);
+	}
+
+	.datepicker--md .datepicker__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);
+	}
+
+	.datepicker--lg .datepicker__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 */
+	.datepicker__icons {
+		position: absolute;
+		right: var(--space-md, 1rem);
+		display: flex;
+		align-items: center;
+		gap: var(--space-xs, 0.25rem);
+	}
+
+	.datepicker__clear,
+	.datepicker__calendar-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;
+	}
+
+	.datepicker__clear:hover,
+	.datepicker__calendar-icon:hover {
+		background: var(--color-bg-muted, #f3f4f6);
+		color: var(--color-text, #1f2937);
+	}
+
+	.datepicker__calendar-icon:disabled {
+		cursor: not-allowed;
+		opacity: 0.5;
+	}
+
+	/* Calendar */
+	.datepicker__calendar {
+		position: absolute;
+		top: calc(100% + 0.5rem);
+		left: 0;
+		z-index: 50;
+		min-width: 18rem;
+		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: calendar-in 150ms ease-out;
+		font-family: var(--font-family, system-ui, -apple-system, sans-serif);
+	}
+
+	@keyframes calendar-in {
+		from {
+			opacity: 0;
+			transform: translateY(-4px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	.datepicker__header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		margin-bottom: var(--space-md, 1rem);
+	}
+
+	.datepicker__nav-button {
+		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, #1f2937);
+		cursor: pointer;
+		border-radius: var(--radius-sm, 0.25rem);
+		transition: background var(--transition-fast, 150ms ease);
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	.datepicker__nav-button:hover {
+		background: var(--color-bg-muted, #f3f4f6);
+	}
+
+	.datepicker__nav-button:focus {
+		outline: none;
+		box-shadow: 0 0 0 2px var(--color-primary-alpha, rgba(59, 130, 246, 0.2));
+	}
+
+	.datepicker__month-year {
+		font-size: var(--text-sm, 0.875rem);
+		font-weight: 600;
+		color: var(--color-text, #1f2937);
+	}
+
+	.datepicker__weekdays {
+		display: grid;
+		grid-template-columns: repeat(7, 1fr);
+		gap: var(--space-xs, 0.25rem);
+		margin-bottom: var(--space-sm, 0.5rem);
+	}
+
+	.datepicker__weekday {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: var(--space-xs, 0.25rem);
+		font-size: var(--text-xs, 0.75rem);
+		font-weight: 600;
+		color: var(--color-text-muted, #6b7280);
+		text-align: center;
+	}
+
+	.datepicker__days {
+		display: grid;
+		grid-template-columns: repeat(7, 1fr);
+		gap: var(--space-xs, 0.25rem);
+	}
+
+	.datepicker__day {
+		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, #1f2937);
+		font-size: var(--text-sm, 0.875rem);
+		cursor: pointer;
+		border-radius: var(--radius-sm, 0.25rem);
+		transition:
+			background var(--transition-fast, 150ms ease),
+			color var(--transition-fast, 150ms ease);
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	.datepicker__day:hover:not(:disabled) {
+		background: var(--color-bg-muted, #f3f4f6);
+	}
+
+	.datepicker__day:focus {
+		outline: none;
+	}
+
+	.datepicker__day--focused {
+		box-shadow: 0 0 0 2px var(--color-primary-alpha, rgba(59, 130, 246, 0.2));
+	}
+
+	.datepicker__day--today {
+		font-weight: 600;
+		color: var(--color-primary, #3b82f6);
+	}
+
+	.datepicker__day--selected {
+		background: var(--color-primary, #3b82f6);
+		color: var(--color-text-inverse, #ffffff);
+		font-weight: 600;
+	}
+
+	.datepicker__day--selected:hover {
+		background: var(--color-primary, #3b82f6);
+		color: var(--color-text-inverse, #ffffff);
+	}
+
+	.datepicker__day--disabled {
+		color: var(--color-text-muted, #9ca3af);
+		cursor: not-allowed;
+		opacity: 0.5;
+	}
+
+	.datepicker__day--disabled:hover {
+		background: transparent;
+	}
+
+	.datepicker__day--outside-month {
+		color: var(--color-text-muted, #9ca3af);
+		opacity: 0.5;
+	}
+
+	/* Mobile responsive */
+	@media (max-width: 640px) {
+		.datepicker__calendar {
+			position: fixed;
+			top: auto;
+			bottom: 0;
+			left: 0;
+			right: 0;
+			min-width: 100%;
+			max-width: 100%;
+			border-radius: 1rem 1rem 0 0;
+			animation: calendar-slide-up 250ms ease-out;
+			padding-bottom: calc(var(--space-md, 1rem) + env(safe-area-inset-bottom, 0));
+		}
+
+		@keyframes calendar-slide-up {
+			from {
+				opacity: 0;
+				transform: translateY(100%);
+			}
+			to {
+				opacity: 1;
+				transform: translateY(0);
+			}
+		}
+	}
+</style>