@joewinke/jatui 0.41.0 → 0.42.0

package/dist/components/CalendarPicker.svelte

@@ -5,13 +5,33 @@
 	 *
 	 * Pass `getAvailability` callback to load availability data for the visible date range.
 	 * Pass `isDateEnabled` to control which dates are selectable.
+	 *
+	 * Built on the shared calendar grid (jatui-lfxyy): a real `role="grid"` with the
+	 * APG keyboard model (arrows, Home/End, PageUp/PageDown, Shift+Page for years),
+	 * locale-aware week start (opt in with `weekStart="locale"`), token-coloured
+	 * availability dots and a static accent map (the old `hover:bg-${accentColor}`
+	 * classes were never emitted by Tailwind).
 	 */
 
 	import type { AvailabilityCounts } from '../types/booking';
+	import MonthGrid from './calendar/MonthGrid.svelte';
+	import CalendarHeader from './calendar/CalendarHeader.svelte';
+	import { createCalendarGrid } from './calendar/createCalendarGrid';
+	import {
+		addDays,
+		buildMonthMatrix,
+		calendarAccentStyle,
+		compareDays,
+		formatMonthYear,
+		resolveWeekStart,
+		startOfDay,
+		toIsoDate,
+		type Weekday
+	} from './calendar/calendarGrid';
 
 	export type { AvailabilityCounts };
 
-	const DAYS_SHORT = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+	type Level = 'none' | 'low' | 'medium' | 'high' | 'full';
 
 	let {
 		onSelect,
@@ -21,6 +41,12 @@
 		minNoticeHours = 24,
 		weekdaysOnly = true,
 		accentColor = 'primary',
+		selectedDate = $bindable(null),
+		weekStart = 0,
+		locale,
+		showLegend,
+		size = 'md',
+		class: className = ''
 	}: {
 		onSelect: (date: Date) => void;
 		getAvailability?: (startDate: Date, endDate: Date) => Promise<AvailabilityCounts>;
@@ -28,263 +54,222 @@
 		maxDaysInAdvance?: number;
 		minNoticeHours?: number;
 		weekdaysOnly?: boolean;
+		/** primary | secondary | accent | info | success | warning | error | neutral */
 		accentColor?: string;
+		/** The picked day (bindable). Shown as the solid cell. */
+		selectedDate?: Date | null;
+		/** First column (0 = Sunday, the default) or `'locale'` for the viewer's convention. */
+		weekStart?: Weekday | 'locale';
+		/** BCP 47 locale for month/weekday names. Defaults to the runtime locale. */
+		locale?: string;
+		/** Availability legend under the grid. Defaults to on when `getAvailability` is set. */
+		showLegend?: boolean;
+		size?: 'sm' | 'md' | 'lg';
+		class?: string;
 	} = $props();
 
-	let viewDate = $state(new Date());
+	const firstDay = $derived(resolveWeekStart(weekStart, locale));
 	let availabilityCounts = $state(new Map<string, { available: number; total: number }>());
 	let isLoadingAvailability = $state(false);
+	let requestId = 0;
 
-	const calendarDays = $derived(() => {
-		const year = viewDate.getFullYear();
-		const month = viewDate.getMonth();
-
-		const firstDay = new Date(year, month, 1);
-		const startDate = new Date(firstDay);
-		startDate.setDate(startDate.getDate() - startDate.getDay());
-
-		const days: Date[] = [];
-		const current = new Date(startDate);
+	function today(): Date {
+		return startOfDay(new Date());
+	}
 
-		for (let i = 0; i < 42; i++) {
-			days.push(new Date(current));
-			current.setDate(current.getDate() + 1);
-		}
-
-		return days;
-	});
+	const maxDate = $derived(addDays(today(), maxDaysInAdvance));
 
 	function defaultIsDateEnabled(date: Date): boolean {
-		const today = new Date();
-		today.setHours(0, 0, 0, 0);
-
-		if (date < today) return false;
-
-		const maxDate = new Date(today);
-		maxDate.setDate(maxDate.getDate() + maxDaysInAdvance);
-		if (date > maxDate) return false;
+		const t = today();
+		if (compareDays(date, t) < 0) return false;
+		if (compareDays(date, maxDate) > 0) return false;
 
 		const minNoticeDate = new Date();
 		minNoticeDate.setHours(minNoticeDate.getHours() + minNoticeHours);
-		minNoticeDate.setHours(0, 0, 0, 0);
-		if (date < minNoticeDate) return false;
+		if (compareDays(date, minNoticeDate) < 0) return false;
 
 		if (weekdaysOnly) {
 			const dayOfWeek = date.getDay();
 			if (dayOfWeek === 0 || dayOfWeek === 6) return false;
 		}
-
 		return true;
 	}
 
-	function checkDateEnabled(date: Date): boolean {
-		if (isDateEnabled) return isDateEnabled(date);
-		return defaultIsDateEnabled(date);
+	function isDisabled(date: Date): boolean {
+		return isDateEnabled ? !isDateEnabled(date) : !defaultIsDateEnabled(date);
 	}
 
-	function isToday(date: Date): boolean {
-		const today = new Date();
-		return (
-			date.getDate() === today.getDate() &&
-			date.getMonth() === today.getMonth() &&
-			date.getFullYear() === today.getFullYear()
-		);
-	}
+	// Past months and months beyond the booking window are not reachable — but a
+	// custom `isDateEnabled` owns its own rules, so only the defaults clamp.
+	const minNav = $derived(isDateEnabled ? null : today());
+	const maxNav = $derived(isDateEnabled ? null : maxDate);
+	const cal = createCalendarGrid({ initial: () => selectedDate, min: () => minNav, max: () => maxNav });
 
-	function isCurrentMonth(date: Date): boolean {
-		return date.getMonth() === viewDate.getMonth();
+	function handleSelect(date: Date) {
+		selectedDate = date;
+		onSelect(date);
 	}
 
-	function prevMonth() {
-		const newDate = new Date(viewDate);
-		newDate.setMonth(newDate.getMonth() - 1);
-		viewDate = newDate;
-	}
-
-	function nextMonth() {
-		const newDate = new Date(viewDate);
-		newDate.setMonth(newDate.getMonth() + 1);
-		viewDate = newDate;
-	}
-
-	function handleDateClick(date: Date) {
-		if (checkDateEnabled(date)) {
-			onSelect(date);
-		}
-	}
-
-	const canGoPrev = $derived(() => {
-		const today = new Date();
-		return (
-			viewDate.getMonth() > today.getMonth() ||
-			viewDate.getFullYear() > today.getFullYear()
-		);
-	});
-
-	const canGoNext = $derived(() => {
-		const today = new Date();
-		const maxDate = new Date(today);
-		maxDate.setDate(maxDate.getDate() + maxDaysInAdvance);
-		return (
-			viewDate.getMonth() < maxDate.getMonth() ||
-			viewDate.getFullYear() < maxDate.getFullYear()
-		);
-	});
-
-	async function loadAvailability() {
+	async function loadAvailability(month: Date) {
 		if (!getAvailability) return;
-
+		const id = ++requestId;
 		isLoadingAvailability = true;
 		try {
-			const days = calendarDays();
-			const startDate = days[0];
-			const endDate = days[days.length - 1];
-
-			const counts = await getAvailability(startDate, endDate);
+			// Always the full six-week matrix, as before — callers size their query on it.
+			const days = buildMonthMatrix(month, firstDay, true).flat();
+			const counts = await getAvailability(days[0].date, days[days.length - 1].date);
+			if (id !== requestId) return; // a newer month won the race
 			// AvailabilityCounts is a Map, but tolerate plain-object returns too —
 			// Object.entries(aMap) is [] and silently kills the dots.
-			const entries =
-				counts instanceof Map ? counts.entries() : Object.entries(counts ?? {});
+			const entries = counts instanceof Map ? counts.entries() : Object.entries(counts ?? {});
 			const map = new Map<string, { available: number; total: number }>();
-			for (const [key, value] of entries) {
-				map.set(key, value);
-			}
+			for (const [key, value] of entries) map.set(key, value);
 			availabilityCounts = map;
 		} catch {
 			// Silently ignore — dots won't show
 		} finally {
-			isLoadingAvailability = false;
+			if (id === requestId) isLoadingAvailability = false;
 		}
 	}
 
 	$effect(() => {
-		const _ = viewDate.getMonth();
-		loadAvailability();
+		void loadAvailability(cal.viewMonth);
 	});
 
-	function getAvailabilityLevel(date: Date): 'none' | 'low' | 'medium' | 'high' | 'full' {
+	function getAvailabilityLevel(date: Date): Level {
 		// Key by LOCAL calendar date — toISOString() shifts to UTC and is off by
 		// one day for positive-offset timezones (calendar days are local midnights).
-		const dateStr = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
-		const counts = availabilityCounts.get(dateStr);
-
+		const counts = availabilityCounts.get(toIsoDate(date));
 		if (!counts || counts.total === 0) return 'none';
-
 		const ratio = counts.available / counts.total;
 		if (ratio === 0) return 'full';
 		if (ratio <= 0.25) return 'low';
 		if (ratio <= 0.6) return 'medium';
 		return 'high';
 	}
-</script>
 
-<div class="calendar-picker">
-	<!-- Month Navigation -->
-	<div class="flex items-center justify-between mb-6">
-		<button
-			onclick={prevMonth}
-			disabled={!canGoPrev()}
-			class="btn btn-ghost btn-sm btn-circle disabled:opacity-30"
-			aria-label="Previous month"
-		>
-			<!-- ChevronLeft -->
-			<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
-			</svg>
-		</button>
+	const DOTS: Record<Level, { n: number; tone: string; label: string }> = {
+		high: { n: 3, tone: 'positive', label: 'many slots' },
+		medium: { n: 2, tone: 'caution', label: 'some slots' },
+		low: { n: 1, tone: 'negative', label: 'few slots' },
+		full: { n: 1, tone: 'neutral', label: 'fully booked' },
+		none: { n: 0, tone: 'neutral', label: '' }
+	};
 
-		<h3 class="text-lg font-semibold">
-			{viewDate.toLocaleDateString('en-US', { month: 'long', year: 'numeric' })}
-		</h3>
-
-		<button
-			onclick={nextMonth}
-			disabled={!canGoNext()}
-			class="btn btn-ghost btn-sm btn-circle disabled:opacity-30"
-			aria-label="Next month"
-		>
-			<!-- ChevronRight -->
-			<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
-			</svg>
-		</button>
-	</div>
-
-	<!-- Day Headers -->
-	<div class="grid grid-cols-7 gap-1 mb-2">
-		{#each DAYS_SHORT as day}
-			<div class="text-center text-[0.8125rem] text-base-content/45 py-2">
-				{day}
-			</div>
-		{/each}
-	</div>
-
-	<!-- Calendar Grid -->
-	<div class="grid grid-cols-7 gap-1">
-		{#each calendarDays() as date}
-			{@const available = checkDateEnabled(date)}
-			{@const today = isToday(date)}
-			{@const currentMonth = isCurrentMonth(date)}
-			{@const availLevel = getAvailabilityLevel(date)}
-
-			<button
-				onclick={() => handleDateClick(date)}
-				disabled={!available}
-				class="aspect-square flex flex-col items-center justify-center rounded-lg text-[0.9375rem] font-medium
-					transition-all duration-200 relative
-					{currentMonth ? '' : 'opacity-30'}
-					{available
-						? `hover:bg-${accentColor} hover:text-${accentColor}-content cursor-pointer bg-${accentColor}/15 text-${accentColor}`
-						: 'text-base-content/30 cursor-not-allowed'}
-					{today ? `ring-2 ring-${accentColor} ring-offset-2 ring-offset-base-100` : ''}"
-			>
-				<span>{date.getDate()}</span>
-				{#if currentMonth && available && !isLoadingAvailability}
-					<div class="flex gap-0.5 mt-0.5">
-						{#if availLevel === 'high'}
-							<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
-							<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
-							<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
-						{:else if availLevel === 'medium'}
-							<span class="w-1.5 h-1.5 rounded-full bg-amber-400"></span>
-							<span class="w-1.5 h-1.5 rounded-full bg-amber-400"></span>
-						{:else if availLevel === 'low'}
-							<span class="w-1.5 h-1.5 rounded-full bg-rose-400"></span>
-						{:else if availLevel === 'full'}
-							<span class="w-1.5 h-1.5 rounded-full bg-base-content/20"></span>
-						{/if}
-					</div>
-				{/if}
-			</button>
-		{/each}
-	</div>
+	const legendOn = $derived(showLegend ?? !!getAvailability);
+</script>
 
-	<!-- Legend -->
-	{#if getAvailability}
-		<div class="flex flex-wrap items-center gap-x-5 gap-y-2 mt-6 pt-4 border-t border-base-300 text-[0.75rem]">
-			<div class="flex items-center gap-2">
-				<div class="flex gap-0.5">
-					<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
-					<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
-					<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
-				</div>
-				<span class="text-base-content/60">Many slots</span>
-			</div>
-			<div class="flex items-center gap-2">
-				<div class="flex gap-0.5">
-					<span class="w-1.5 h-1.5 rounded-full bg-amber-400"></span>
-					<span class="w-1.5 h-1.5 rounded-full bg-amber-400"></span>
-				</div>
-				<span class="text-base-content/60">Some slots</span>
-			</div>
-			<div class="flex items-center gap-2">
-				<span class="w-1.5 h-1.5 rounded-full bg-rose-400"></span>
-				<span class="text-base-content/60">Few slots</span>
-			</div>
-			<div class="flex items-center gap-2">
-				<div class="w-4 h-4 rounded ring-2 ring-{accentColor}"></div>
-				<span class="text-base-content/60">Today</span>
-			</div>
+<div class="calendar-picker {className}" data-calendar-root style={calendarAccentStyle(accentColor)}>
+	<CalendarHeader
+		label={formatMonthYear(cal.viewMonth, locale)}
+		onPrev={() => cal.shift(-1)}
+		onNext={() => cal.shift(1)}
+		canPrev={cal.canPrev}
+		canNext={cal.canNext}
+		size={size === 'sm' ? 'sm' : 'md'}
+	/>
+
+	<MonthGrid
+		month={cal.viewMonth}
+		focusedDate={cal.focusedDate}
+		weekStart={firstDay}
+		{locale}
+		selected={selectedDate}
+		{isDisabled}
+		min={minNav}
+		max={maxNav}
+		fixedWeeks
+		highlightEnabled
+		{size}
+		onSelect={handleSelect}
+		onFocusDate={cal.focus}
+		describeDay={(date) => (isLoadingAvailability || isDisabled(date) ? undefined : DOTS[getAvailabilityLevel(date)].label || undefined)}
+	>
+		{#snippet day(d)}
+			{@const level = d.inMonth && !d.disabled && !isLoadingAvailability ? getAvailabilityLevel(d.date) : 'none'}
+			{#if DOTS[level].n > 0}
+				<span class="calendar-picker__dots" data-tone={DOTS[level].tone}>
+					{#each { length: DOTS[level].n } as _, i (i)}
+						<span class="calendar-picker__dot"></span>
+					{/each}
+				</span>
+			{/if}
+		{/snippet}
+	</MonthGrid>
+
+	{#if legendOn}
+		<div class="calendar-picker__legend">
+			<span class="calendar-picker__legend-item">
+				<span class="calendar-picker__dots" data-tone="positive" aria-hidden="true">
+					<span class="calendar-picker__dot"></span><span class="calendar-picker__dot"></span><span class="calendar-picker__dot"></span>
+				</span>
+				Many slots
+			</span>
+			<span class="calendar-picker__legend-item">
+				<span class="calendar-picker__dots" data-tone="caution" aria-hidden="true">
+					<span class="calendar-picker__dot"></span><span class="calendar-picker__dot"></span>
+				</span>
+				Some slots
+			</span>
+			<span class="calendar-picker__legend-item">
+				<span class="calendar-picker__dots" data-tone="negative" aria-hidden="true"><span class="calendar-picker__dot"></span></span>
+				Few slots
+			</span>
+			<span class="calendar-picker__legend-item">
+				<span class="calendar-picker__today-swatch" aria-hidden="true"></span>
+				Today
+			</span>
 		</div>
 	{/if}
 </div>
+
+<style>
+	.calendar-picker__dots {
+		display: inline-flex;
+		gap: 2px;
+		--_dot: var(--jatui-status-neutral, color-mix(in oklab, var(--color-base-content) 40%, transparent));
+	}
+	.calendar-picker__dots[data-tone='positive'] {
+		--_dot: var(--jatui-status-positive, var(--color-success));
+	}
+	.calendar-picker__dots[data-tone='caution'] {
+		--_dot: var(--jatui-status-caution, var(--color-warning));
+	}
+	.calendar-picker__dots[data-tone='negative'] {
+		--_dot: var(--jatui-status-negative, var(--color-error));
+	}
+	.calendar-picker__dot {
+		width: 0.3125rem;
+		height: 0.3125rem;
+		border-radius: 9999px;
+		background: var(--_dot);
+	}
+	/* On the solid (picked) day the dots take the accent's content colour. */
+	:global(.jatui-month-grid__day.is-solid) .calendar-picker__dot {
+		background: currentColor;
+		opacity: 0.85;
+	}
+	.calendar-picker__legend {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 0.5rem 1.25rem;
+		margin-block-start: 1rem;
+		padding-block-start: 0.75rem;
+		border-block-start: 1px solid var(--jatui-separator, var(--color-base-300));
+		font-size: 0.75rem;
+		color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
+	}
+	.calendar-picker__legend-item {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.5rem;
+	}
+	.calendar-picker__today-swatch {
+		width: 0.875rem;
+		height: 0.875rem;
+		border-radius: var(--radius-field, 0.25rem);
+		box-shadow: inset 0 0 0 1px
+			color-mix(in oklab, var(--jatui-cal-accent, var(--jatui-selection-solid, var(--color-primary))) 55%, transparent);
+	}
+</style>

package/dist/components/CalendarPicker.svelte.d.ts

@@ -4,8 +4,15 @@
      *
      * Pass `getAvailability` callback to load availability data for the visible date range.
      * Pass `isDateEnabled` to control which dates are selectable.
+     *
+     * Built on the shared calendar grid (jatui-lfxyy): a real `role="grid"` with the
+     * APG keyboard model (arrows, Home/End, PageUp/PageDown, Shift+Page for years),
+     * locale-aware week start (opt in with `weekStart="locale"`), token-coloured
+     * availability dots and a static accent map (the old `hover:bg-${accentColor}`
+     * classes were never emitted by Tailwind).
      */
 import type { AvailabilityCounts } from '../types/booking';
+import { type Weekday } from './calendar/calendarGrid';
 type $$ComponentProps = {
     onSelect: (date: Date) => void;
     getAvailability?: (startDate: Date, endDate: Date) => Promise<AvailabilityCounts>;
@@ -13,10 +20,21 @@ type $$ComponentProps = {
     maxDaysInAdvance?: number;
     minNoticeHours?: number;
     weekdaysOnly?: boolean;
+    /** primary | secondary | accent | info | success | warning | error | neutral */
     accentColor?: string;
+    /** The picked day (bindable). Shown as the solid cell. */
+    selectedDate?: Date | null;
+    /** First column (0 = Sunday, the default) or `'locale'` for the viewer's convention. */
+    weekStart?: Weekday | 'locale';
+    /** BCP 47 locale for month/weekday names. Defaults to the runtime locale. */
+    locale?: string;
+    /** Availability legend under the grid. Defaults to on when `getAvailability` is set. */
+    showLegend?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    class?: string;
 };
 declare const CalendarPicker: import("svelte").Component<$$ComponentProps, {
     AvailabilityCounts: typeof AvailabilityCounts;
-}, "">;
+}, "selectedDate">;
 type CalendarPicker = ReturnType<typeof CalendarPicker>;
 export default CalendarPicker;