@joewinke/jatui 0.41.1 → 0.42.0

package/dist/components/calendar/MonthGrid.svelte

@@ -0,0 +1,361 @@
+<script lang="ts" module>
+	import type { Snippet } from 'svelte';
+	import type { DateRange, Weekday } from './calendarGrid';
+
+	/** What a `day` snippet receives for each rendered cell. */
+	export interface MonthGridDay {
+		date: Date;
+		iso: string;
+		inMonth: boolean;
+		disabled: boolean;
+		selected: boolean;
+		today: boolean;
+		inRange: boolean;
+	}
+
+	export interface MonthGridProps {
+		/** Any date inside the month to show. */
+		month: Date;
+		/** The roving-focus day. Only the cell for this day is in the tab order. */
+		focusedDate: Date;
+		/** First column: 0 = Sunday … 6 = Saturday. */
+		weekStart?: Weekday;
+		locale?: string;
+		/** Single selection. */
+		selected?: Date | null;
+		/** Range band (pass the hover preview as `end` while picking). */
+		range?: DateRange | null;
+		isDisabled?: (date: Date) => boolean;
+		/** Keyboard clamps (selection rules belong to `isDisabled`). */
+		min?: Date | null;
+		max?: Date | null;
+		/** Render leading/trailing days from the adjacent months (dimmed). */
+		showOutsideDays?: boolean;
+		/** Always six rows, so the panel never changes height. */
+		fixedWeeks?: boolean;
+		/** Hide the weekday header row. */
+		hideWeekdays?: boolean;
+		/** Tint every enabled in-month day (booking calendars: "these days are open"). */
+		highlightEnabled?: boolean;
+		size?: 'sm' | 'md' | 'lg';
+		/** Accessible name; defaults to "March 2026". */
+		ariaLabel?: string;
+		rtl?: boolean;
+		/** Click / Enter / Space on an enabled day. */
+		onSelect?: (date: Date) => void;
+		/** Focus moved (keyboard or pointer). The host shifts `month` when it leaves the view. */
+		onFocusDate?: (date: Date) => void;
+		/** Pointer over a day (null on leave) — drives the range hover preview. */
+		onHover?: (date: Date | null) => void;
+		/** Extra words for a day's accessible name ("3 slots left"); the `day` snippet is visual only. */
+		describeDay?: (date: Date) => string | undefined;
+		/** Extra content under the day number (availability dots, counts). */
+		day?: Snippet<[MonthGridDay]>;
+		class?: string;
+	}
+</script>
+
+<script lang="ts">
+	import { tick } from 'svelte';
+	import {
+		buildMonthMatrix,
+		formatLongDate,
+		formatMonthYear,
+		isSameDay,
+		nextFocusDate,
+		rangeCellState,
+		toIsoDate,
+		weekdayLabels
+	} from './calendarGrid';
+
+	let {
+		month,
+		focusedDate,
+		weekStart = 0,
+		locale,
+		selected = null,
+		range = null,
+		isDisabled = () => false,
+		min = null,
+		max = null,
+		showOutsideDays = true,
+		fixedWeeks = false,
+		hideWeekdays = false,
+		highlightEnabled = false,
+		size = 'md',
+		ariaLabel,
+		rtl = false,
+		onSelect,
+		onFocusDate,
+		onHover,
+		describeDay,
+		day,
+		class: className = ''
+	}: MonthGridProps = $props();
+
+	let gridEl = $state<HTMLTableElement | null>(null);
+
+	const weeks = $derived(buildMonthMatrix(month, weekStart, fixedWeeks));
+	const labels = $derived(weekdayLabels(weekStart, locale, size === 'sm' ? 'narrow' : 'short'));
+	const focusIso = $derived(toIsoDate(focusedDate));
+	const label = $derived(ariaLabel ?? formatMonthYear(month, locale));
+	// The focused day may sit in a sibling month panel (two-month range view). When
+	// it is not in THIS panel, the first in-month day keeps the panel reachable by Tab.
+	// Each date appears once per matrix, so the iso alone identifies the tab stop.
+	const tabIso = $derived.by(() => {
+		const cells = weeks.flat();
+		if (cells.some((c) => c.inMonth && c.iso === focusIso)) return focusIso;
+		return cells.find((c) => c.inMonth)?.iso ?? '';
+	});
+
+	const today = new Date();
+
+	/** Move DOM focus to `date`'s cell, searching the whole calendar so a sibling panel can take it. */
+	async function focusCell(date: Date) {
+		await tick();
+		const iso = toIsoDate(date);
+		const root = gridEl?.closest('[data-calendar-root]') ?? gridEl;
+		const cell = root?.querySelector<HTMLElement>(`[data-iso="${iso}"]:not([data-outside])`) ??
+			root?.querySelector<HTMLElement>(`[data-iso="${iso}"]`);
+		cell?.focus();
+	}
+
+	function handleKeydown(e: KeyboardEvent, date: Date, disabled: boolean) {
+		if (e.key === 'Enter' || e.key === ' ') {
+			e.preventDefault();
+			if (!disabled) onSelect?.(date);
+			return;
+		}
+		if (e.altKey || e.ctrlKey || e.metaKey) return;
+		const next = nextFocusDate(date, e.key, { weekStart, min, max, rtl, shiftKey: e.shiftKey });
+		if (!next) return;
+		e.preventDefault();
+		onFocusDate?.(next);
+		void focusCell(next);
+	}
+
+	function handleClick(date: Date, disabled: boolean) {
+		onFocusDate?.(date);
+		if (!disabled) onSelect?.(date);
+	}
+</script>
+
+<table
+	bind:this={gridEl}
+	class="jatui-month-grid jatui-month-grid--{size} {className}"
+	role="grid"
+	aria-label={label}
+	dir={rtl ? 'rtl' : undefined}
+	onpointerleave={() => onHover?.(null)}
+>
+	{#if !hideWeekdays}
+		<thead>
+			<tr>
+				{#each labels as l (l.long)}
+					<th scope="col" abbr={l.long} class="jatui-month-grid__weekday">{l.short}</th>
+				{/each}
+			</tr>
+		</thead>
+	{/if}
+	<tbody>
+		{#each weeks as week (week[0].iso)}
+			<tr>
+				{#each week as cell (cell.iso)}
+					{#if !cell.inMonth && !showOutsideDays}
+						<td role="gridcell" aria-hidden="true" class="jatui-month-grid__cell"></td>
+					{:else}
+						{@const disabled = isDisabled(cell.date)}
+						{@const isSelected = isSameDay(cell.date, selected)}
+						{@const band = rangeCellState(cell.date, cell.column, range)}
+						{@const isToday = isSameDay(cell.date, today)}
+						{@const solid = isSelected || band.isStart || band.isEnd}
+						<td
+							role="gridcell"
+							aria-selected={solid || band.inRange ? 'true' : 'false'}
+							class="jatui-month-grid__cell"
+							class:is-band={band.inRange && !(band.isStart && band.isEnd)}
+							class:band-start={band.bandStart}
+							class:band-end={band.bandEnd}
+							class:band-from-start={band.isStart}
+							class:band-to-end={band.isEnd}
+						>
+							<button
+								type="button"
+								class="jatui-month-grid__day"
+								class:is-solid={solid}
+								class:is-today={isToday}
+								class:is-outside={!cell.inMonth}
+								class:is-disabled={disabled}
+								class:is-open={highlightEnabled && cell.inMonth && !disabled}
+								data-iso={cell.iso}
+								data-outside={cell.inMonth ? undefined : ''}
+								tabindex={cell.iso === tabIso ? 0 : -1}
+								aria-label={[formatLongDate(cell.date, locale), describeDay?.(cell.date)].filter(Boolean).join(', ')}
+								aria-disabled={disabled ? 'true' : undefined}
+								aria-current={isToday ? 'date' : undefined}
+								onclick={() => handleClick(cell.date, disabled)}
+								onkeydown={(e) => handleKeydown(e, cell.date, disabled)}
+								onpointerenter={() => onHover?.(cell.date)}
+							>
+								<span class="jatui-month-grid__num">{cell.date.getDate()}</span>
+								{#if day}
+									<span class="jatui-month-grid__extra" aria-hidden="true">{@render day({
+										date: cell.date,
+										iso: cell.iso,
+										inMonth: cell.inMonth,
+										disabled,
+										selected: solid,
+										today: isToday,
+										inRange: band.inRange
+									})}</span>
+								{/if}
+							</button>
+						</td>
+					{/if}
+				{/each}
+			</tr>
+		{/each}
+	</tbody>
+</table>
+
+<style>
+	.jatui-month-grid {
+		--_cell: 2.25rem;
+		--_accent: var(--jatui-cal-accent, var(--jatui-selection-solid, var(--color-primary)));
+		--_accent-fg: var(--jatui-cal-accent-fg, var(--jatui-selection-solid-fg, var(--color-primary-content)));
+		--_band: var(--jatui-cal-band, var(--jatui-selection-bg, color-mix(in oklab, var(--color-primary) 14%, transparent)));
+		border-collapse: separate;
+		border-spacing: 0 2px;
+		table-layout: fixed;
+		width: 100%;
+		min-width: calc(var(--_cell) * 7);
+	}
+	.jatui-month-grid--sm {
+		--_cell: 2rem;
+	}
+	.jatui-month-grid--lg {
+		--_cell: 2.75rem;
+	}
+	.jatui-month-grid__weekday {
+		padding-block: 0.25rem;
+		text-align: center;
+		font-size: 0.75rem;
+		font-weight: 500;
+		color: color-mix(in oklab, var(--color-base-content) 55%, transparent);
+	}
+	.jatui-month-grid__cell {
+		position: relative;
+		padding: 0;
+		text-align: center;
+	}
+	/* The range band lives on the cell, so it bridges the gap between days. */
+	.jatui-month-grid__cell.is-band::before {
+		content: '';
+		position: absolute;
+		inset-block: 0;
+		inset-inline: 0;
+		background: var(--_band);
+		pointer-events: none;
+	}
+	.jatui-month-grid__cell.is-band.band-from-start::before {
+		inset-inline-start: 50%;
+	}
+	.jatui-month-grid__cell.is-band.band-to-end::before {
+		inset-inline-end: 50%;
+	}
+	.jatui-month-grid__cell.is-band.band-start:not(.band-from-start)::before {
+		border-start-start-radius: var(--radius-field, 0.5rem);
+		border-end-start-radius: var(--radius-field, 0.5rem);
+	}
+	.jatui-month-grid__cell.is-band.band-end:not(.band-to-end)::before {
+		border-start-end-radius: var(--radius-field, 0.5rem);
+		border-end-end-radius: var(--radius-field, 0.5rem);
+	}
+	.jatui-month-grid__day {
+		position: relative;
+		display: inline-flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		gap: 1px;
+		width: var(--_cell);
+		max-width: 100%;
+		aspect-ratio: 1;
+		border-radius: var(--radius-field, 0.5rem);
+		font-size: 0.875rem;
+		font-variant-numeric: tabular-nums;
+		color: var(--color-base-content);
+		background: transparent;
+		cursor: pointer;
+		/* Both layers always render; selection fades on colour and radius only. */
+		transition:
+			background-color var(--motion-fast, 120ms) var(--motion-standard, ease),
+			color var(--motion-fast, 120ms) var(--motion-standard, ease);
+	}
+	.jatui-month-grid__day:hover:not(.is-solid):not(.is-disabled) {
+		background: var(--jatui-hover-bg, color-mix(in oklab, var(--color-base-content) 7%, transparent));
+	}
+	.jatui-month-grid__day:focus-visible {
+		outline: var(--jatui-focus-ring-width, 2px) solid var(--jatui-focus-ring, var(--color-primary));
+		outline-offset: calc(var(--jatui-focus-ring-width, 2px) * -1 + 1px);
+		z-index: 1;
+	}
+	.jatui-month-grid__extra {
+		display: inline-flex;
+		line-height: 0;
+	}
+	.jatui-month-grid__day.is-today:not(.is-solid) {
+		font-weight: 700;
+		color: var(--_accent);
+		box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--_accent) 55%, transparent);
+	}
+	.jatui-month-grid__day.is-open:not(.is-solid) {
+		background: var(--_band);
+		color: var(--_accent);
+		font-weight: 600;
+	}
+	.jatui-month-grid__day.is-open:not(.is-solid):hover {
+		background: color-mix(in oklab, var(--_accent) 26%, transparent);
+	}
+	.jatui-month-grid__day.is-solid {
+		background: var(--_accent);
+		color: var(--_accent-fg);
+		font-weight: 600;
+	}
+	.jatui-month-grid__day.is-outside:not(.is-solid) {
+		color: color-mix(in oklab, var(--color-base-content) 40%, transparent);
+	}
+	.jatui-month-grid__day.is-disabled {
+		cursor: not-allowed;
+		color: color-mix(in oklab, var(--color-base-content) 30%, transparent);
+	}
+	.jatui-month-grid__day.is-disabled .jatui-month-grid__num {
+		text-decoration: line-through;
+		text-decoration-color: color-mix(in oklab, var(--color-base-content) 25%, transparent);
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.jatui-month-grid__day {
+			transition: none;
+		}
+	}
+	:global([data-motion='calm']) .jatui-month-grid__day {
+		transition-duration: 0ms;
+	}
+	@media (forced-colors: active) {
+		.jatui-month-grid__day.is-open:not(.is-solid) {
+		background: var(--_band);
+		color: var(--_accent);
+		font-weight: 600;
+	}
+	.jatui-month-grid__day.is-open:not(.is-solid):hover {
+		background: color-mix(in oklab, var(--_accent) 26%, transparent);
+	}
+	.jatui-month-grid__day.is-solid {
+			outline: 2px solid Highlight;
+		}
+		.jatui-month-grid__cell.is-band::before {
+			background: Highlight;
+			opacity: 0.25;
+		}
+	}
+</style>

package/dist/components/calendar/MonthGrid.svelte.d.ts

@@ -0,0 +1,55 @@
+import type { Snippet } from 'svelte';
+import type { DateRange, Weekday } from './calendarGrid';
+/** What a `day` snippet receives for each rendered cell. */
+export interface MonthGridDay {
+    date: Date;
+    iso: string;
+    inMonth: boolean;
+    disabled: boolean;
+    selected: boolean;
+    today: boolean;
+    inRange: boolean;
+}
+export interface MonthGridProps {
+    /** Any date inside the month to show. */
+    month: Date;
+    /** The roving-focus day. Only the cell for this day is in the tab order. */
+    focusedDate: Date;
+    /** First column: 0 = Sunday … 6 = Saturday. */
+    weekStart?: Weekday;
+    locale?: string;
+    /** Single selection. */
+    selected?: Date | null;
+    /** Range band (pass the hover preview as `end` while picking). */
+    range?: DateRange | null;
+    isDisabled?: (date: Date) => boolean;
+    /** Keyboard clamps (selection rules belong to `isDisabled`). */
+    min?: Date | null;
+    max?: Date | null;
+    /** Render leading/trailing days from the adjacent months (dimmed). */
+    showOutsideDays?: boolean;
+    /** Always six rows, so the panel never changes height. */
+    fixedWeeks?: boolean;
+    /** Hide the weekday header row. */
+    hideWeekdays?: boolean;
+    /** Tint every enabled in-month day (booking calendars: "these days are open"). */
+    highlightEnabled?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    /** Accessible name; defaults to "March 2026". */
+    ariaLabel?: string;
+    rtl?: boolean;
+    /** Click / Enter / Space on an enabled day. */
+    onSelect?: (date: Date) => void;
+    /** Focus moved (keyboard or pointer). The host shifts `month` when it leaves the view. */
+    onFocusDate?: (date: Date) => void;
+    /** Pointer over a day (null on leave) — drives the range hover preview. */
+    onHover?: (date: Date | null) => void;
+    /** Extra words for a day's accessible name ("3 slots left"); the `day` snippet is visual only. */
+    describeDay?: (date: Date) => string | undefined;
+    /** Extra content under the day number (availability dots, counts). */
+    day?: Snippet<[MonthGridDay]>;
+    class?: string;
+}
+declare const MonthGrid: import("svelte").Component<MonthGridProps, {}, "">;
+type MonthGrid = ReturnType<typeof MonthGrid>;
+export default MonthGrid;

package/dist/components/calendar/calendarGrid.d.ts

@@ -0,0 +1,219 @@
+/**
+ * Calendar grid core — the pure half of every jatui date surface.
+ *
+ * CalendarPicker, DatePicker, DateRangePicker (calendar mode), BookingScheduler
+ * and EventCalendar's month switcher all render the same month panel. This
+ * module owns everything about that panel that is not markup, so it can be
+ * unit-tested without a DOM:
+ *
+ * - Local-calendar date math on plain `Date`s (always local midnight) and the
+ *   ISO `YYYY-MM-DD` strings jatui uses at its edges (native `<input
+ *   type="date">` values, `AvailabilityCounts` keys).
+ * - Locale-aware week start (`Intl.Locale#getWeekInfo`, with a region table
+ *   fallback for engines that lack it).
+ * - The month matrix (leading/trailing days from the adjacent months).
+ * - The APG date-grid keyboard model: arrows, Home/End, PageUp/PageDown
+ *   (+Shift for years), clamped to min/max, mirrored for RTL.
+ * - Range state: normalising, membership, band edges, day counts, presets.
+ * - Typed entry: parse and format in the locale's own field order, so en-US
+ *   reads MM/DD/YYYY and en-GB DD/MM/YYYY (never a hardcoded order).
+ *
+ * No `@internationalized/date`: everything here is plain `Date` + `Intl`.
+ */
+/** 0 = Sunday … 6 = Saturday (the `Date#getDay` numbering). */
+export type Weekday = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+/** An inclusive date range. Either end may be open while a range is being picked. */
+export interface DateRange {
+    start: Date | null;
+    end: Date | null;
+}
+/** The ISO-string form of a range — what DateRangePicker binds. */
+export interface IsoDateRange {
+    start: string | null;
+    end: string | null;
+}
+/** Local midnight of `d`. */
+export declare function startOfDay(d: Date): Date;
+export declare function isSameDay(a: Date | null | undefined, b: Date | null | undefined): boolean;
+export declare function isSameMonth(a: Date, b: Date): boolean;
+/** `d` plus `n` calendar days (DST-safe: works on the date fields, not ms). */
+export declare function addDays(d: Date, n: number): Date;
+/**
+ * `d` plus `n` months, clamping the day so Jan 31 + 1 month is Feb 28/29
+ * rather than rolling into March.
+ */
+export declare function addMonths(d: Date, n: number): Date;
+export declare function startOfMonth(d: Date): Date;
+export declare function endOfMonth(d: Date): Date;
+export declare function daysInMonth(year: number, month: number): number;
+/** Whole calendar days from `a` to `b` (positive when `b` is later). */
+export declare function dayDiff(a: Date, b: Date): number;
+/** First day of the week containing `d`. */
+export declare function startOfWeek(d: Date, weekStart?: Weekday): Date;
+export declare function endOfWeek(d: Date, weekStart?: Weekday): Date;
+/** Compare by calendar day: negative, 0 or positive. */
+export declare function compareDays(a: Date, b: Date): number;
+/** Clamp a day into [min, max] (either bound optional). */
+export declare function clampDay(d: Date, min?: Date | null, max?: Date | null): Date;
+/** `YYYY-MM-DD` for the LOCAL calendar day (never `toISOString`, which shifts to UTC). */
+export declare function toIsoDate(d: Date): string;
+/**
+ * Parse `YYYY-MM-DD` as LOCAL midnight (`new Date('2026-03-04')` is UTC
+ * midnight, a day early west of Greenwich). Anything else, or an impossible
+ * date like 2026-02-30, returns null.
+ */
+export declare function parseIsoDate(s: string | null | undefined): Date | null;
+/** Accept a Date, an ISO string or nothing; always hand back local midnight or null. */
+export declare function toDay(v: Date | string | null | undefined): Date | null;
+/**
+ * The first day of the week for `locale` (default: the runtime locale).
+ * `Intl.Locale#getWeekInfo` (or the older `weekInfo` getter) when the engine
+ * has it, else the CLDR region table above.
+ */
+export declare function weekStartForLocale(locale?: string): Weekday;
+/** Resolve a `weekStart` prop: a number wins, `'locale'` (or undefined) asks the locale. */
+export declare function resolveWeekStart(weekStart: Weekday | 'locale' | undefined, locale?: string): Weekday;
+/** Weekday column labels in display order, e.g. `['Mo', 'Tu', …]` for a Monday start. */
+export declare function weekdayLabels(weekStart?: Weekday, locale?: string, width?: 'narrow' | 'short' | 'long'): {
+    short: string;
+    long: string;
+}[];
+export declare function formatMonthYear(d: Date, locale?: string): string;
+/** "Wednesday, March 4, 2026" — the accessible name of a day cell. */
+export declare function formatLongDate(d: Date, locale?: string): string;
+/** "Mar 4, 2026" — trigger labels and range chips. */
+export declare function formatMediumDate(d: Date, locale?: string): string;
+export interface MonthCell {
+    date: Date;
+    iso: string;
+    /** Belongs to the displayed month (false for leading/trailing days). */
+    inMonth: boolean;
+    /** 0-6 column in display order. */
+    column: number;
+}
+/**
+ * The weeks of `month` (any date inside it), each exactly seven cells, padded
+ * with days from the adjacent months. `fixedWeeks` always returns six rows so
+ * a panel never changes height between months.
+ */
+export declare function buildMonthMatrix(month: Date, weekStart?: Weekday, fixedWeeks?: boolean): MonthCell[][];
+export interface GridKeyOptions {
+    weekStart?: Weekday;
+    min?: Date | null;
+    max?: Date | null;
+    /** Mirror Left/Right for right-to-left layouts. */
+    rtl?: boolean;
+}
+/**
+ * The day focus moves to for `key`, or null when the key is not a grid key.
+ *
+ * | Key | Move |
+ * |---|---|
+ * | ←/→ | ∓1 day (mirrored in RTL) |
+ * | ↑/↓ | ∓1 week |
+ * | Home/End | first/last day of the week |
+ * | PageUp/PageDown | ∓1 month (Shift: ∓1 year), day clamped to the month length |
+ *
+ * The result is clamped to [min, max]. Disabled dates stay focusable (APG:
+ * they are announced as unavailable rather than skipped), so the caller only
+ * gates selection.
+ */
+export declare function nextFocusDate(current: Date, key: string, opts?: GridKeyOptions & {
+    shiftKey?: boolean;
+}): Date | null;
+export interface DateRules {
+    min?: Date | string | null;
+    max?: Date | string | null;
+    /** Return false to disable a date. */
+    isDateEnabled?: (date: Date) => boolean;
+    /** Disable Saturdays and Sundays. */
+    weekdaysOnly?: boolean;
+}
+/** One predicate out of min/max/weekday/custom rules. */
+export declare function makeIsDisabled(rules: DateRules): (date: Date) => boolean;
+/** Order a range's ends (a range picked right-to-left is still start ≤ end). */
+export declare function normalizeRange(range: DateRange): DateRange;
+export declare function isInRange(d: Date, range: DateRange | null | undefined): boolean;
+/** Inclusive day count of a complete range, else 0. */
+export declare function rangeDayCount(range: DateRange | null | undefined): number;
+/**
+ * How a cell paints inside a range band.
+ *
+ * `bandStart`/`bandEnd` round the band's own ends AND the row ends (the first
+ * and last column), so a range wrapping onto the next week reads as two
+ * capsules rather than one bar running off the grid edge.
+ */
+export interface RangeCellState {
+    inRange: boolean;
+    isStart: boolean;
+    isEnd: boolean;
+    bandStart: boolean;
+    bandEnd: boolean;
+}
+export declare function rangeCellState(d: Date, column: number, range: DateRange | null | undefined): RangeCellState;
+/**
+ * The next range after clicking `date`, picking ends in order:
+ * no start (or a complete range) → start a new range; a start → close it
+ * (swapping when the second click is earlier).
+ */
+export declare function pickRangeDate(range: DateRange, date: Date): DateRange;
+export declare function toIsoRange(range: DateRange): IsoDateRange;
+export declare function fromIsoRange(range: IsoDateRange | null | undefined): DateRange;
+export interface RangePreset {
+    /** Stable id (used for the active highlight). */
+    id: string;
+    label: string;
+    /** The range, or a function of "now" so presets stay current. `start: null` = open ("All time"). */
+    range: IsoDateRange | ((now: Date) => IsoDateRange);
+}
+/** Resolve a preset's range against `now`. */
+export declare function resolvePreset(preset: RangePreset, now?: Date): IsoDateRange;
+/** Today, Yesterday, Last 7 days, Last 30 days, This month, Last month, This year, Last year. */
+export declare function defaultRangePresets(): RangePreset[];
+/** The id of the preset `range` equals, if any. */
+export declare function matchPreset(range: IsoDateRange, presets: RangePreset[], now?: Date): string | null;
+type Field = 'year' | 'month' | 'day';
+/** The locale's numeric field order, e.g. `['month','day','year']` for en-US. */
+export declare function dateFieldOrder(locale?: string): Field[];
+/** The separator the locale uses between numeric date fields ("/", ".", "-"). */
+export declare function dateSeparator(locale?: string): string;
+/** A placeholder hint, e.g. "MM/DD/YYYY" (en-US) or "DD.MM.YYYY" (de-DE). */
+export declare function datePlaceholder(locale?: string): string;
+/** Format for the typed-entry field: numeric, zero-padded, locale order. */
+export declare function formatTypedDate(d: Date | null, locale?: string): string;
+/**
+ * Parse what a person typed. Accepts ISO `YYYY-MM-DD` anywhere, else three
+ * numeric groups in the locale's field order with any separator. Two-digit
+ * years land in 2000–2099. Impossible dates (31/02) return null.
+ */
+export declare function parseTypedDate(text: string, locale?: string): Date | null;
+export type CalendarAccent = 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error' | 'neutral';
+/**
+ * Inline custom properties that re-tint a month panel. `'primary'` (and
+ * anything unknown) returns '' so the jatui selection tokens apply as-is.
+ * The old `accentColor` prop interpolated `bg-${accentColor}` classes, which
+ * Tailwind's scanner never emits; this replaces it with token vars.
+ */
+export declare function calendarAccentStyle(accent: string | undefined): string;
+/**
+ * "Mar 4 – 10, 2026" via `Intl.DateTimeFormat#formatRange` (which collapses
+ * the shared month/year), "From Mar 4, 2026" / "Until …" for open ends, '' for
+ * an empty range.
+ */
+export declare function formatRangeLabel(range: DateRange, locale?: string): string;
+/** The default calendar-mode presets plus the "All time" (open) sentinel. */
+export declare function defaultRangePresetsWithAll(): RangePreset[];
+/**
+ * The first visible month after focus moves to `date`, for `months` panels
+ * starting at `viewMonth`: unchanged while the day is on screen, otherwise
+ * the minimum shift that brings it back (it lands in the first panel when
+ * moving backwards, the last when moving forwards).
+ */
+export declare function followFocus(viewMonth: Date, date: Date, months?: number): Date;
+/** Whether the panels may step back / forward without leaving [min, max]. */
+export declare function canStepMonth(viewMonth: Date, dir: -1 | 1, opts?: {
+    min?: Date | null;
+    max?: Date | null;
+    months?: number;
+}): boolean;
+export {};