@joewinke/jatui 0.41.0 → 0.42.0

package/dist/components/DateRangePicker.svelte

@@ -2,16 +2,81 @@
 	/**
 	 * DateRangePicker Component
 	 * DaisyUI dropdown for filtering by date range with quick presets
+	 *
+	 * Two modes (jatui-lfxyy):
+	 * - `mode="presets"` (default, unchanged): the compact filter-bar dropdown —
+	 *   string presets (`selectedRange`) plus native From/To inputs.
+	 * - `mode="calendar"`: a two-month range calendar with a preset sidebar,
+	 *   hover preview, typed start/end fields, an "N days selected" pill and
+	 *   Apply/Cancel. Binds `value: { start, end }` as `YYYY-MM-DD` strings
+	 *   (open ends are null). `onRangeChange` still fires in the legacy shape —
+	 *   `(presetId | 'custom', from?, to?)` — so a filter bar can switch modes
+	 *   without touching its handler.
 	 */
 
+	import { tick } from 'svelte';
 	import { formatShortDate } from '../utils/dateFormatters';
+	import { floating, type Placement } from '../actions/floating';
+	import MonthGrid from './calendar/MonthGrid.svelte';
+	import CalendarHeader from './calendar/CalendarHeader.svelte';
+	import { createCalendarGrid } from './calendar/createCalendarGrid';
+	import {
+		calendarAccentStyle,
+		datePlaceholder,
+		defaultRangePresetsWithAll,
+		formatMonthYear,
+		formatRangeLabel,
+		formatTypedDate,
+		fromIsoRange,
+		makeIsDisabled,
+		matchPreset,
+		normalizeRange,
+		parseTypedDate,
+		pickRangeDate,
+		rangeDayCount,
+		resolvePreset,
+		resolveWeekStart,
+		toDay,
+		toIsoRange,
+		type DateRange,
+		type IsoDateRange,
+		type RangePreset,
+		type Weekday
+	} from './calendar/calendarGrid';
 
 	interface Props {
-		selectedRange: string; // 'today' | 'yesterday' | 'week' | 'month' | 'all' | 'custom'
+		selectedRange?: string; // 'today' | 'yesterday' | 'week' | 'month' | 'all' | 'custom'
 		customFrom?: string | null; // ISO date for custom range
 		customTo?: string | null; // ISO date for custom range
-		onRangeChange: (range: string, from?: string, to?: string) => void;
+		onRangeChange?: (range: string, from?: string, to?: string) => void;
 		compact?: boolean;
+		/** `presets` (default): the original dropdown. `calendar`: the range calendar. */
+		mode?: 'presets' | 'calendar';
+		/** Calendar mode: the committed range (bindable). */
+		value?: IsoDateRange;
+		/** Calendar mode: fires on commit with the range and the matching preset id (or null). */
+		onChange?: (range: IsoDateRange, presetId: string | null) => void;
+		/** Calendar mode: quick-select sidebar. Defaults to Today … Last year + All time. */
+		presets?: RangePreset[];
+		/** Calendar mode: month panels side by side (1 or 2). */
+		months?: 1 | 2;
+		/** Calendar mode: `apply` (default) holds the pick until Apply; `instant` commits on the second click. */
+		commit?: 'apply' | 'instant';
+		min?: string | Date | null;
+		max?: string | Date | null;
+		isDateEnabled?: (date: Date) => boolean;
+		weekStart?: Weekday | 'locale';
+		locale?: string;
+		/** Trigger text for an empty (all-time) range. */
+		placeholder?: string;
+		/** Accessible name for the trigger and dialog. */
+		label?: string;
+		/** Form field names for the two ends. */
+		nameStart?: string;
+		nameEnd?: string;
+		accentColor?: string;
+		placement?: Placement;
+		zIndex?: number;
 	}
 
 	let {
@@ -19,9 +84,156 @@
 		customFrom = null,
 		customTo = null,
 		onRangeChange,
-		compact = false
+		compact = false,
+		mode = 'presets',
+		value = $bindable({ start: null, end: null }),
+		onChange,
+		presets: presetsProp,
+		months = 2,
+		commit = 'apply',
+		min,
+		max,
+		isDateEnabled,
+		weekStart = 'locale',
+		locale,
+		placeholder = 'All time',
+		label = 'Date range',
+		nameStart,
+		nameEnd,
+		accentColor,
+		placement = 'bottom-end',
+		zIndex = 60
 	}: Props = $props();
 
+	// ── Calendar mode ────────────────────────────────────────────────────────
+
+	const calPresets = $derived(presetsProp ?? defaultRangePresetsWithAll());
+	const firstDay = $derived(resolveWeekStart(weekStart, locale));
+	const minDay = $derived(toDay(min ?? null));
+	const maxDay = $derived(toDay(max ?? null));
+	const isDisabled = $derived(makeIsDisabled({ min: minDay, max: maxDay, isDateEnabled }));
+	const committedRange = $derived(fromIsoRange(value));
+	const activePresetId = $derived(matchPreset(value ?? { start: null, end: null }, calPresets));
+	const calLabel = $derived.by(() => {
+		const preset = calPresets.find((p) => p.id === activePresetId);
+		if (preset) return preset.label;
+		return formatRangeLabel(committedRange, locale) || placeholder;
+	});
+
+	let calOpen = $state(false);
+	let triggerEl = $state<HTMLButtonElement | null>(null);
+	let popEl = $state<HTMLDivElement | null>(null);
+	let pending = $state<DateRange>({ start: null, end: null });
+	let hover = $state<Date | null>(null);
+	const cal = createCalendarGrid({ min: () => minDay, max: () => maxDay, months: () => months });
+	let startText = $state('');
+	let endText = $state('');
+	let message = $state('');
+	let lastDismiss = 0;
+
+	/** The band to paint: the pending range, or the hover preview while the end is open. */
+	const shown = $derived<DateRange>(
+		pending.start && !pending.end && hover ? normalizeRange({ start: pending.start, end: hover }) : pending
+	);
+	const shownCount = $derived(rangeDayCount(shown));
+	const pendingPresetId = $derived(matchPreset(toIsoRange(pending), calPresets));
+
+	function syncTexts() {
+		startText = formatTypedDate(pending.start, locale);
+		endText = formatTypedDate(pending.end, locale);
+	}
+
+	async function openCalendar() {
+		pending = { ...committedRange };
+		hover = null;
+		message = '';
+		cal.reset(pending.start ?? pending.end);
+		syncTexts();
+		calOpen = true;
+		await tick();
+		popEl?.querySelector<HTMLElement>('.jatui-month-grid__day[tabindex="0"]')?.focus();
+	}
+
+	function closeCalendar() {
+		calOpen = false;
+		lastDismiss = performance.now();
+	}
+
+	function toggleCalendar() {
+		if (calOpen) return closeCalendar();
+		if (performance.now() - lastDismiss < 250) return;
+		void openCalendar();
+	}
+
+	function commitRange(range: DateRange) {
+		const iso = toIsoRange(normalizeRange(range));
+		const presetId = matchPreset(iso, calPresets);
+		value = iso;
+		onChange?.(iso, presetId);
+		onRangeChange?.(presetId ?? 'custom', iso.start ?? undefined, iso.end ?? undefined);
+		closeCalendar();
+	}
+
+	function pickDate(date: Date) {
+		pending = pickRangeDate(pending, date);
+		hover = null;
+		message = '';
+		syncTexts();
+		if (commit === 'instant' && pending.start && pending.end) commitRange(pending);
+	}
+
+	function choosePreset(preset: RangePreset) {
+		pending = fromIsoRange(resolvePreset(preset));
+		hover = null;
+		message = '';
+		syncTexts();
+		if (pending.start) cal.reset(pending.start);
+		if (commit === 'instant') commitRange(pending);
+	}
+
+	function handleFocusDate(date: Date) {
+		// Keyboard users get the same preview a pointer does.
+		if (pending.start && !pending.end) hover = date;
+		cal.focus(date);
+	}
+
+	function commitTypedEnd(which: 'start' | 'end') {
+		const text = which === 'start' ? startText : endText;
+		const current = formatTypedDate(pending[which], locale);
+		if (text.trim() === current) return;
+		if (!text.trim()) {
+			pending = { ...pending, [which]: null };
+			return;
+		}
+		const parsed = parseTypedDate(text, locale);
+		if (!parsed || isDisabled(parsed)) {
+			message = parsed ? 'That date is not available.' : `Couldn't read that date — use ${datePlaceholder(locale)}.`;
+			syncTexts();
+			return;
+		}
+		message = '';
+		pending = normalizeRange({ ...pending, [which]: parsed });
+		syncTexts();
+		handleFocusDate(parsed);
+	}
+
+	function typedKeydown(e: KeyboardEvent, which: 'start' | 'end') {
+		if (e.key === 'Enter') {
+			e.preventDefault();
+			commitTypedEnd(which);
+		} else if (e.key === 'Escape') {
+			const current = formatTypedDate(pending[which], locale);
+			const text = which === 'start' ? startText : endText;
+			if (text !== current) {
+				e.stopPropagation();
+				syncTexts();
+				message = '';
+			}
+		}
+	}
+
+	// ── Presets mode (original) ──────────────────────────────────────────────
+
 	// Local state for custom date inputs
 	// svelte-ignore state_referenced_locally
 	let localFrom = $state(customFrom || '');
@@ -56,7 +268,7 @@
 		showCustom = false;
 		localFrom = '';
 		localTo = '';
-		onRangeChange(preset);
+		onRangeChange?.(preset);
 
 		// Close dropdown
 		if (document.activeElement instanceof HTMLElement) {
@@ -66,7 +278,7 @@
 
 	function handleCustomApply() {
 		if (localFrom || localTo) {
-			onRangeChange('custom', localFrom || undefined, localTo || undefined);
+			onRangeChange?.('custom', localFrom || undefined, localTo || undefined);
 
 			// Close dropdown
 			if (document.activeElement instanceof HTMLElement) {
@@ -80,6 +292,141 @@
 	}
 </script>
 
+{#if mode === 'calendar'}
+	<button
+		bind:this={triggerEl}
+		type="button"
+		class="{compact ? 'px-2 py-1 text-[10px]' : 'px-2.5 py-1.5 text-xs'} rounded cursor-pointer transition-all flex items-center gap-1.5 font-mono tracking-wider whitespace-nowrap bg-base-200 border border-base-300 text-base-content/60"
+		aria-haspopup="dialog"
+		aria-expanded={calOpen}
+		aria-label="{label}: {calLabel}"
+		onclick={toggleCalendar}
+	>
+		<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 text-primary" aria-hidden="true">
+			<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5" />
+		</svg>
+		<span>{calLabel}</span>
+		<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-3 h-3 text-base-content/50" aria-hidden="true">
+			<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+		</svg>
+	</button>
+	{#if nameStart}<input type="hidden" name={nameStart} value={value?.start ?? ''} />{/if}
+	{#if nameEnd}<input type="hidden" name={nameEnd} value={value?.end ?? ''} />{/if}
+
+	{#if calOpen}
+		<div
+			bind:this={popEl}
+			role="dialog"
+			aria-label={label}
+			class="jatui-range bg-base-100 rounded-box border border-base-300"
+			style="z-index: {zIndex}; {calendarAccentStyle(accentColor)}"
+			data-calendar-root
+			use:floating={{ anchor: triggerEl, placement, offset: 6, onDismiss: closeCalendar }}
+		>
+			{#if calPresets.length > 0}
+				<div class="jatui-range__presets" role="group" aria-label="Quick ranges">
+					{#each calPresets as preset (preset.id)}
+						<button
+							type="button"
+							class="jatui-range__preset"
+							class:is-active={pendingPresetId === preset.id}
+							aria-pressed={pendingPresetId === preset.id}
+							onclick={() => choosePreset(preset)}
+						>
+							{preset.label}
+						</button>
+					{/each}
+				</div>
+			{/if}
+
+			<div class="jatui-range__main">
+				<div class="jatui-range__fields">
+					<label class="jatui-range__field">
+						<span>Start</span>
+						<input
+							type="text"
+							inputmode="numeric"
+							autocomplete="off"
+							dir="ltr"
+							class="input input-sm font-mono"
+							placeholder={datePlaceholder(locale)}
+							bind:value={startText}
+							onkeydown={(e) => typedKeydown(e, 'start')}
+							onblur={() => commitTypedEnd('start')}
+						/>
+					</label>
+					<span class="jatui-range__dash" aria-hidden="true">–</span>
+					<label class="jatui-range__field">
+						<span>End</span>
+						<input
+							type="text"
+							inputmode="numeric"
+							autocomplete="off"
+							dir="ltr"
+							class="input input-sm font-mono"
+							placeholder={datePlaceholder(locale)}
+							bind:value={endText}
+							onkeydown={(e) => typedKeydown(e, 'end')}
+							onblur={() => commitTypedEnd('end')}
+						/>
+					</label>
+				</div>
+				<p class="jatui-range__msg" role="status" aria-live="polite">{message}</p>
+
+				<div class="jatui-range__panels" class:is-two={months === 2}>
+					{#each cal.panels as m, i (m.getTime())}
+						<div class="jatui-range__panel">
+							<CalendarHeader
+								label={formatMonthYear(m, locale)}
+								onPrev={() => cal.shift(-1)}
+								onNext={() => cal.shift(1)}
+								canPrev={cal.canPrev}
+								canNext={cal.canNext}
+								hidePrev={i > 0}
+								hideNext={i < cal.panels.length - 1}
+								size="sm"
+							/>
+							<MonthGrid
+								month={m}
+								focusedDate={cal.focusedDate}
+								weekStart={firstDay}
+								{locale}
+								range={shown}
+								{isDisabled}
+								min={minDay}
+								max={maxDay}
+								showOutsideDays={false}
+								fixedWeeks
+								size="sm"
+								onSelect={pickDate}
+								onFocusDate={handleFocusDate}
+								onHover={(d) => (hover = d)}
+							/>
+						</div>
+					{/each}
+				</div>
+
+				<div class="jatui-range__footer">
+					<span class="jatui-range__count" aria-live="polite">
+						{#if shownCount > 0}
+							{shownCount} day{shownCount === 1 ? '' : 's'} selected
+						{:else if pending.start}
+							Pick an end date
+						{:else}
+							Any date
+						{/if}
+					</span>
+					<span class="jatui-range__actions">
+						<button type="button" class="btn btn-ghost btn-sm" onclick={closeCalendar}>Cancel</button>
+						{#if commit === 'apply'}
+							<button type="button" class="btn btn-primary btn-sm" onclick={() => commitRange(pending)}>Apply</button>
+						{/if}
+					</span>
+				</div>
+			</div>
+		</div>
+	{/if}
+{:else}
 <!-- Date Range Picker -->
 <div class="dropdown dropdown-end">
 	<!-- Trigger Button -->
@@ -192,3 +539,122 @@
 		</div>
 	</div>
 </div>
+{/if}
+
+<style>
+	.jatui-range {
+		display: flex;
+		gap: 0.75rem;
+		width: max-content;
+		max-width: calc(100vw - 1rem);
+		padding: 0.75rem;
+	}
+	.jatui-range__presets {
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+		min-width: 8rem;
+		padding-inline-end: 0.75rem;
+		border-inline-end: 1px solid var(--jatui-separator, var(--color-base-300));
+	}
+	.jatui-range__preset {
+		padding: 0.375rem 0.5rem;
+		border-radius: var(--radius-field, 0.375rem);
+		font-size: 0.8125rem;
+		text-align: start;
+		white-space: nowrap;
+		color: color-mix(in oklab, var(--color-base-content) 75%, transparent);
+		cursor: pointer;
+	}
+	.jatui-range__preset:hover {
+		background: var(--jatui-hover-bg, color-mix(in oklab, var(--color-base-content) 7%, transparent));
+	}
+	.jatui-range__preset.is-active {
+		background: var(--jatui-cal-band, var(--jatui-selection-bg, color-mix(in oklab, var(--color-primary) 14%, transparent)));
+		color: var(--color-base-content);
+		font-weight: 600;
+	}
+	.jatui-range__preset:focus-visible {
+		outline: var(--jatui-focus-ring-width, 2px) solid var(--jatui-focus-ring, var(--color-primary));
+		outline-offset: -2px;
+	}
+	.jatui-range__main {
+		display: flex;
+		flex-direction: column;
+		min-width: 0;
+	}
+	.jatui-range__fields {
+		display: flex;
+		align-items: flex-end;
+		gap: 0.5rem;
+	}
+	.jatui-range__field {
+		display: flex;
+		flex-direction: column;
+		gap: 0.125rem;
+		flex: 1;
+		font-size: 0.75rem;
+		color: color-mix(in oklab, var(--color-base-content) 55%, transparent);
+	}
+	.jatui-range__field input {
+		width: 100%;
+		min-width: 0;
+	}
+	.jatui-range__dash {
+		padding-block-end: 0.375rem;
+		color: color-mix(in oklab, var(--color-base-content) 45%, transparent);
+	}
+	.jatui-range__msg {
+		margin: 0.25rem 0 0;
+		font-size: 0.75rem;
+		color: var(--color-error);
+	}
+	.jatui-range__msg:empty {
+		margin: 0;
+	}
+	.jatui-range__panels {
+		display: grid;
+		gap: 1.25rem;
+		margin-block-start: 0.75rem;
+	}
+	.jatui-range__panels.is-two {
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+	}
+	.jatui-range__footer {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 0.75rem;
+		margin-block-start: 0.5rem;
+		padding-block-start: 0.5rem;
+		border-block-start: 1px solid var(--jatui-separator, var(--color-base-300));
+	}
+	.jatui-range__count {
+		padding: 0.125rem 0.5rem;
+		border-radius: 9999px;
+		font-size: 0.75rem;
+		font-variant-numeric: tabular-nums;
+		background: var(--jatui-hover-bg, color-mix(in oklab, var(--color-base-content) 7%, transparent));
+		color: color-mix(in oklab, var(--color-base-content) 75%, transparent);
+	}
+	.jatui-range__actions {
+		display: inline-flex;
+		gap: 0.375rem;
+	}
+	@media (max-width: 40rem) {
+		.jatui-range {
+			flex-direction: column;
+		}
+		.jatui-range__presets {
+			flex-direction: row;
+			flex-wrap: wrap;
+			padding-inline-end: 0;
+			padding-block-end: 0.5rem;
+			border-inline-end: 0;
+			border-block-end: 1px solid var(--jatui-separator, var(--color-base-300));
+		}
+		.jatui-range__panels.is-two {
+			grid-template-columns: minmax(0, 1fr);
+		}
+	}
+</style>

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

@@ -1,10 +1,39 @@
+import { type Placement } from '../actions/floating';
+import { type IsoDateRange, type RangePreset, type Weekday } from './calendar/calendarGrid';
 interface Props {
-    selectedRange: string;
+    selectedRange?: string;
     customFrom?: string | null;
     customTo?: string | null;
-    onRangeChange: (range: string, from?: string, to?: string) => void;
+    onRangeChange?: (range: string, from?: string, to?: string) => void;
     compact?: boolean;
+    /** `presets` (default): the original dropdown. `calendar`: the range calendar. */
+    mode?: 'presets' | 'calendar';
+    /** Calendar mode: the committed range (bindable). */
+    value?: IsoDateRange;
+    /** Calendar mode: fires on commit with the range and the matching preset id (or null). */
+    onChange?: (range: IsoDateRange, presetId: string | null) => void;
+    /** Calendar mode: quick-select sidebar. Defaults to Today … Last year + All time. */
+    presets?: RangePreset[];
+    /** Calendar mode: month panels side by side (1 or 2). */
+    months?: 1 | 2;
+    /** Calendar mode: `apply` (default) holds the pick until Apply; `instant` commits on the second click. */
+    commit?: 'apply' | 'instant';
+    min?: string | Date | null;
+    max?: string | Date | null;
+    isDateEnabled?: (date: Date) => boolean;
+    weekStart?: Weekday | 'locale';
+    locale?: string;
+    /** Trigger text for an empty (all-time) range. */
+    placeholder?: string;
+    /** Accessible name for the trigger and dialog. */
+    label?: string;
+    /** Form field names for the two ends. */
+    nameStart?: string;
+    nameEnd?: string;
+    accentColor?: string;
+    placement?: Placement;
+    zIndex?: number;
 }
-declare const DateRangePicker: import("svelte").Component<Props, {}, "">;
+declare const DateRangePicker: import("svelte").Component<Props, {}, "value">;
 type DateRangePicker = ReturnType<typeof DateRangePicker>;
 export default DateRangePicker;