beez-ui 2.5.0 → 2.6.1

package/dist/components/calendar.js

@@ -1,17 +1,35 @@
 "use client";
 import { c as _c } from "react/compiler-runtime";
+/**
+* Arc's Calendar (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md) on react-day-picker: round day cells
+* on a 4px grid, the month title on the left with quiet pill controls on the right, today marked by a dot under its
+* number, a selected disc that glides between days and an optional Today button. react-day-picker keeps selection
+* modes, ranges, dropdowns, locales and keyboard navigation; only the design and the motion come from Arc.
+*/
 import * as React from "react";
+import { flushSync } from "react-dom";
 import { es } from "react-day-picker/locale";
-import { DayPicker, getDefaultClassNames } from "react-day-picker";
+import { DayPicker, UI, dateMatchModifiers, getDefaultClassNames, useDayPicker } from "react-day-picker";
 import { animate, frame } from "motion/react";
+import { CALENDAR_COPY, CALENDAR_MONTH_ENTER_OPACITY, CALENDAR_MONTH_SPRING, CALENDAR_MONTHS_PER_YEAR, CALENDAR_SELECTED_DAY_SELECTOR, CALENDAR_SELECTION_DISC_ATTRIBUTE, CALENDAR_SELECTION_ENTER_SCALE, CALENDAR_SELECTION_EXIT_DURATION_S } from "../constants/calendar.js";
 import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
-import { MOTION_EASE, MOTION_MONTH_DISTANCE, MOTION_TIMING } from "../motion/tokens.js";
+import { useIsHydrated } from "../hooks/use-is-hydrated.js";
+import { ARC_DURATION, ARC_EASE, ARC_SPRING_MORPH, ARC_SPRING_SNAPPY } from "../motion/arc-tokens.js";
+import { MOTION_MONTH_DISTANCE } from "../motion/tokens.js";
 import { cn } from "../lib/utils.js";
-import { ControlButton, controlButtonVariants } from "./control-button.js";
+import { controlButtonVariants } from "./control-button.js";
 import { ChevronLeft, ChevronRight, ChevronDown } from "lucide-react";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const CalendarSettingsContext = React.createContext({ todayLabel: CALENDAR_COPY.today });
+/** Arc's quiet header control: a fill on hover-capable pointers, a short press and a dimmed, inert disabled state. */
+const calendarHeaderControlClassName = "h-8 rounded-full p-0 text-text-secondary select-none transition-[color,background-color,opacity,scale] duration-(--duration-fast) ease-(--ease-standard) motion-reduce:transition-none hover-fine:not-aria-disabled:bg-surface-muted hover-fine:not-aria-disabled:text-foreground active:not-aria-disabled:scale-[.96] motion-reduce:active:scale-100 aria-disabled:pointer-events-none aria-disabled:cursor-default aria-disabled:opacity-35";
+/**
+* A month grid for picking a day, several days or a range, controlled or uncontrolled like react-day-picker.
+* @param props - Every react-day-picker prop plus the Arc additions `showToday` and `todayLabel`.
+* @returns The calendar, in Spanish by default.
+*/
 function Calendar(t0) {
-	const $ = _c(57);
+	const $ = _c(65);
 	let className;
 	let classNames;
 	let components;
@@ -21,8 +39,10 @@ function Calendar(t0) {
 	let t2;
 	let t3;
 	let t4;
+	let t5;
+	let t6;
 	if ($[0] !== t0) {
-		({className, classNames, showOutsideDays: t1, captionLayout: t2, buttonVariant: t3, locale: t4, formatters, components, ...props} = t0);
+		({className, classNames, showOutsideDays: t1, captionLayout: t2, buttonVariant: t3, locale: t4, formatters, components, showToday: t5, todayLabel: t6, ...props} = t0);
 		$[0] = t0;
 		$[1] = className;
 		$[2] = classNames;
@@ -33,6 +53,8 @@ function Calendar(t0) {
 		$[7] = t2;
 		$[8] = t3;
 		$[9] = t4;
+		$[10] = t5;
+		$[11] = t6;
 	} else {
 		className = $[1];
 		classNames = $[2];
@@ -43,223 +65,995 @@ function Calendar(t0) {
 		t2 = $[7];
 		t3 = $[8];
 		t4 = $[9];
+		t5 = $[10];
+		t6 = $[11];
 	}
 	const showOutsideDays = t1 === undefined ? true : t1;
 	const captionLayout = t2 === undefined ? "label" : t2;
 	const buttonVariant = t3 === undefined ? "ghost" : t3;
 	const locale = t4 === undefined ? es : t4;
+	const showToday = t5 === undefined ? false : t5;
+	const todayLabel = t6 === undefined ? CALENDAR_COPY.today : t6;
 	const defaultClassNames = getDefaultClassNames();
+	const isRange = props.mode === "range";
+	let t7;
+	if ($[12] !== todayLabel) {
+		t7 = { todayLabel };
+		$[12] = todayLabel;
+		$[13] = t7;
+	} else {
+		t7 = $[13];
+	}
+	const settings = t7;
+	const t8 = CalendarSettingsContext;
 	const T0 = DayPicker;
-	const t5 = cn("group/calendar bg-background p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent", String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`, String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className);
-	let t6;
-	if ($[10] !== locale?.code) {
-		t6 = (date) => date.toLocaleString(locale?.code, { month: "short" });
-		$[10] = locale?.code;
-		$[11] = t6;
+	const t9 = cn("group/calendar bg-background p-2 text-foreground [--cell-radius:var(--radius-pill)] [--cell-size:--spacing(9)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent", String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`, String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className);
+	let t10;
+	if ($[14] !== locale?.code) {
+		t10 = (date) => date.toLocaleString(locale?.code, { month: "short" });
+		$[14] = locale?.code;
+		$[15] = t10;
 	} else {
-		t6 = $[11];
+		t10 = $[15];
 	}
-	let t7;
-	if ($[12] !== formatters || $[13] !== t6) {
-		t7 = {
-			formatMonthDropdown: t6,
+	let t11;
+	if ($[16] !== formatters || $[17] !== t10) {
+		t11 = {
+			formatMonthDropdown: t10,
 			...formatters
 		};
-		$[12] = formatters;
-		$[13] = t6;
-		$[14] = t7;
-	} else {
-		t7 = $[14];
-	}
-	const t8 = cn("w-fit", defaultClassNames.root);
-	const t9 = cn("relative flex flex-col gap-4 md:flex-row", defaultClassNames.months);
-	const t10 = cn("flex w-full flex-col gap-4", defaultClassNames.month);
-	const t11 = cn("absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1", defaultClassNames.nav);
-	const t12 = cn(controlButtonVariants({ variant: buttonVariant }), "size-(--cell-size) p-0 select-none aria-disabled:opacity-50", defaultClassNames.button_previous);
-	const t13 = cn(controlButtonVariants({ variant: buttonVariant }), "size-(--cell-size) p-0 select-none aria-disabled:opacity-50", defaultClassNames.button_next);
-	const t14 = cn("flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)", defaultClassNames.month_caption);
-	const t15 = cn("flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium", defaultClassNames.dropdowns);
-	const t16 = cn("relative rounded-(--cell-radius)", defaultClassNames.dropdown_root);
-	const t17 = cn("absolute inset-0 bg-popover opacity-0", defaultClassNames.dropdown);
-	const t18 = cn("font-medium select-none", captionLayout === "label" ? "text-sm" : "flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground", defaultClassNames.caption_label);
-	const t19 = cn("w-full border-collapse", defaultClassNames.month_grid);
-	const t20 = cn("flex", defaultClassNames.weekdays);
-	const t21 = cn("flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none", defaultClassNames.weekday);
-	const t22 = cn("mt-2 flex w-full", defaultClassNames.week);
-	const t23 = cn("w-(--cell-size) select-none", defaultClassNames.week_number_header);
-	const t24 = cn("text-[0.8rem] text-muted-foreground select-none", defaultClassNames.week_number);
-	const t25 = cn("group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)", props.showWeekNumber ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)" : "[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)", defaultClassNames.day);
-	const t26 = cn("relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted", defaultClassNames.range_start);
-	const t27 = cn("rounded-none", defaultClassNames.range_middle);
-	const t28 = cn("relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted", defaultClassNames.range_end);
-	const t29 = cn("rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none", defaultClassNames.today);
-	const t30 = cn("text-muted-foreground aria-selected:text-muted-foreground", defaultClassNames.outside);
-	const t31 = cn("text-muted-foreground opacity-50", defaultClassNames.disabled);
-	const t32 = cn("invisible", defaultClassNames.hidden);
-	let t33;
-	if ($[15] !== classNames || $[16] !== t10 || $[17] !== t11 || $[18] !== t12 || $[19] !== t13 || $[20] !== t14 || $[21] !== t15 || $[22] !== t16 || $[23] !== t17 || $[24] !== t18 || $[25] !== t19 || $[26] !== t20 || $[27] !== t21 || $[28] !== t22 || $[29] !== t23 || $[30] !== t24 || $[31] !== t25 || $[32] !== t26 || $[33] !== t27 || $[34] !== t28 || $[35] !== t29 || $[36] !== t30 || $[37] !== t31 || $[38] !== t32 || $[39] !== t8 || $[40] !== t9) {
-		t33 = {
-			root: t8,
-			months: t9,
-			month: t10,
-			nav: t11,
-			button_previous: t12,
-			button_next: t13,
-			month_caption: t14,
-			dropdowns: t15,
-			dropdown_root: t16,
-			dropdown: t17,
-			caption_label: t18,
-			month_grid: t19,
-			weekdays: t20,
-			weekday: t21,
-			week: t22,
-			week_number_header: t23,
-			week_number: t24,
-			day: t25,
-			range_start: t26,
-			range_middle: t27,
-			range_end: t28,
-			today: t29,
-			outside: t30,
-			disabled: t31,
-			hidden: t32,
+		$[16] = formatters;
+		$[17] = t10;
+		$[18] = t11;
+	} else {
+		t11 = $[18];
+	}
+	const t12 = cn("w-fit", defaultClassNames.root);
+	const t13 = cn("relative flex flex-col gap-6 md:flex-row", defaultClassNames.months);
+	const t14 = cn("group/calendar-month relative flex w-full flex-col gap-3", defaultClassNames.month);
+	const t15 = cn("absolute end-0 top-0 z-20 flex items-center gap-0.5", defaultClassNames.nav);
+	const t16 = cn(controlButtonVariants({ variant: buttonVariant }), calendarHeaderControlClassName, "size-8", defaultClassNames.button_previous);
+	const t17 = cn(controlButtonVariants({ variant: buttonVariant }), calendarHeaderControlClassName, "size-8", defaultClassNames.button_next);
+	const t18 = cn("flex h-8 w-full items-center justify-start pe-18", showToday && "after:invisible after:me-0.5 after:shrink-0 after:px-[11px] after:text-sm after:leading-none after:font-medium after:whitespace-nowrap after:content-[attr(data-today-label)]", defaultClassNames.month_caption);
+	const t19 = cn("flex h-8 w-full min-w-0 items-center justify-start gap-1.5 text-base font-medium", defaultClassNames.dropdowns);
+	const t20 = cn("relative rounded-(--radius-control)", defaultClassNames.dropdown_root);
+	const t21 = cn("absolute inset-0 bg-popover opacity-0", defaultClassNames.dropdown);
+	const t22 = cn("font-medium whitespace-nowrap tabular-nums select-none", captionLayout === "label" ? "min-w-0 truncate text-base" : "flex items-center gap-1 rounded-(--radius-control) text-base [&>svg]:size-3.5 [&>svg]:text-text-muted", defaultClassNames.caption_label);
+	const t23 = cn("w-full border-collapse", defaultClassNames.month_grid);
+	const t24 = cn("flex", !isRange && "gap-1", defaultClassNames.weekdays);
+	const t25 = cn("flex-1 text-xs leading-6 font-medium text-text-muted select-none", defaultClassNames.weekday);
+	const t26 = cn("mt-1 flex w-full", !isRange && "gap-1", defaultClassNames.week);
+	const t27 = cn("w-(--cell-size) select-none", defaultClassNames.week_number_header);
+	const t28 = cn("text-xs text-text-muted select-none", defaultClassNames.week_number);
+	const t29 = cn("group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)", props.showWeekNumber ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)" : "[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)", defaultClassNames.day);
+	const t30 = cn("relative isolate z-0 rounded-l-(--cell-radius) bg-surface-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-surface-muted", defaultClassNames.range_start);
+	const t31 = cn("rounded-none", defaultClassNames.range_middle);
+	const t32 = cn("relative isolate z-0 rounded-r-(--cell-radius) bg-surface-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-surface-muted", defaultClassNames.range_end);
+	const t33 = cn(defaultClassNames.today);
+	const t34 = cn(defaultClassNames.outside);
+	const t35 = cn(defaultClassNames.disabled);
+	const t36 = cn("invisible", defaultClassNames.hidden);
+	let t37;
+	if ($[19] !== classNames || $[20] !== t12 || $[21] !== t13 || $[22] !== t14 || $[23] !== t15 || $[24] !== t16 || $[25] !== t17 || $[26] !== t18 || $[27] !== t19 || $[28] !== t20 || $[29] !== t21 || $[30] !== t22 || $[31] !== t23 || $[32] !== t24 || $[33] !== t25 || $[34] !== t26 || $[35] !== t27 || $[36] !== t28 || $[37] !== t29 || $[38] !== t30 || $[39] !== t31 || $[40] !== t32 || $[41] !== t33 || $[42] !== t34 || $[43] !== t35 || $[44] !== t36) {
+		t37 = {
+			root: t12,
+			months: t13,
+			month: t14,
+			nav: t15,
+			button_previous: t16,
+			button_next: t17,
+			month_caption: t18,
+			dropdowns: t19,
+			dropdown_root: t20,
+			dropdown: t21,
+			caption_label: t22,
+			month_grid: t23,
+			weekdays: t24,
+			weekday: t25,
+			week: t26,
+			week_number_header: t27,
+			week_number: t28,
+			day: t29,
+			range_start: t30,
+			range_middle: t31,
+			range_end: t32,
+			today: t33,
+			outside: t34,
+			disabled: t35,
+			hidden: t36,
 			...classNames
 		};
-		$[15] = classNames;
-		$[16] = t10;
-		$[17] = t11;
-		$[18] = t12;
-		$[19] = t13;
-		$[20] = t14;
-		$[21] = t15;
-		$[22] = t16;
-		$[23] = t17;
-		$[24] = t18;
-		$[25] = t19;
-		$[26] = t20;
-		$[27] = t21;
-		$[28] = t22;
-		$[29] = t23;
-		$[30] = t24;
-		$[31] = t25;
-		$[32] = t26;
-		$[33] = t27;
-		$[34] = t28;
-		$[35] = t29;
-		$[36] = t30;
-		$[37] = t31;
-		$[38] = t32;
-		$[39] = t8;
-		$[40] = t9;
+		$[19] = classNames;
+		$[20] = t12;
+		$[21] = t13;
+		$[22] = t14;
+		$[23] = t15;
+		$[24] = t16;
+		$[25] = t17;
+		$[26] = t18;
+		$[27] = t19;
+		$[28] = t20;
+		$[29] = t21;
+		$[30] = t22;
+		$[31] = t23;
+		$[32] = t24;
+		$[33] = t25;
+		$[34] = t26;
+		$[35] = t27;
+		$[36] = t28;
+		$[37] = t29;
+		$[38] = t30;
+		$[39] = t31;
+		$[40] = t32;
 		$[41] = t33;
+		$[42] = t34;
+		$[43] = t35;
+		$[44] = t36;
+		$[45] = t37;
 	} else {
-		t33 = $[41];
+		t37 = $[45];
 	}
-	let t34;
-	if ($[42] !== locale) {
-		t34 = (t35) => {
-			const { ...props_2 } = t35;
-			return /* @__PURE__ */ _jsx(CalendarDayButton, {
-				locale,
-				...props_2
-			});
-		};
-		$[42] = locale;
-		$[43] = t34;
+	let t38;
+	if ($[46] !== showToday) {
+		t38 = showToday ? {
+			Nav: CalendarNav,
+			MonthCaption: CalendarMonthCaption
+		} : {};
+		$[46] = showToday;
+		$[47] = t38;
 	} else {
-		t34 = $[43];
+		t38 = $[47];
 	}
-	let t35;
-	if ($[44] !== components || $[45] !== t34) {
-		t35 = {
-			Root: _temp,
-			Chevron: _temp2,
-			DayButton: t34,
+	let t39;
+	if ($[48] !== components || $[49] !== t38) {
+		t39 = {
+			Root: CalendarRoot,
+			Chevron: CalendarChevron,
+			DayButton: CalendarDayButtonSlot,
 			Month: CalendarMonth,
-			WeekNumber: _temp3,
+			...t38,
+			WeekNumber: CalendarWeekNumber,
 			...components
 		};
-		$[44] = components;
-		$[45] = t34;
-		$[46] = t35;
+		$[48] = components;
+		$[49] = t38;
+		$[50] = t39;
 	} else {
-		t35 = $[46];
+		t39 = $[50];
 	}
-	let t36;
-	if ($[47] !== T0 || $[48] !== captionLayout || $[49] !== locale || $[50] !== props || $[51] !== showOutsideDays || $[52] !== t33 || $[53] !== t35 || $[54] !== t5 || $[55] !== t7) {
-		t36 = /* @__PURE__ */ _jsx(T0, {
+	let t40;
+	if ($[51] !== T0 || $[52] !== captionLayout || $[53] !== locale || $[54] !== props || $[55] !== showOutsideDays || $[56] !== t11 || $[57] !== t37 || $[58] !== t39 || $[59] !== t9) {
+		t40 = /* @__PURE__ */ _jsx(T0, {
 			showOutsideDays,
-			className: t5,
+			className: t9,
 			captionLayout,
 			locale,
-			formatters: t7,
-			classNames: t33,
-			components: t35,
+			formatters: t11,
+			classNames: t37,
+			components: t39,
+			...props
+		});
+		$[51] = T0;
+		$[52] = captionLayout;
+		$[53] = locale;
+		$[54] = props;
+		$[55] = showOutsideDays;
+		$[56] = t11;
+		$[57] = t37;
+		$[58] = t39;
+		$[59] = t9;
+		$[60] = t40;
+	} else {
+		t40 = $[60];
+	}
+	let t41;
+	if ($[61] !== settings || $[62] !== t40 || $[63] !== t8.Provider) {
+		t41 = /* @__PURE__ */ _jsx(t8.Provider, {
+			value: settings,
+			children: t40
+		});
+		$[61] = settings;
+		$[62] = t40;
+		$[63] = t8.Provider;
+		$[64] = t41;
+	} else {
+		t41 = $[64];
+	}
+	return t41;
+}
+/*
+* The slots below live at module level so their component identity is stable across renders. Inline slot functions
+* would be new component types on every render: React would remount the whole calendar (Root wraps it) and every month
+* would lose its state, which cancels the month slide and the selected disc glide when nothing memoizes them.
+*/
+/** The calendar root, tagged with `data-slot="calendar"`. */
+function CalendarRoot(t0) {
+	const $ = _c(10);
+	let className;
+	let props;
+	let rootRef;
+	if ($[0] !== t0) {
+		({className, rootRef, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = rootRef;
+	} else {
+		className = $[1];
+		props = $[2];
+		rootRef = $[3];
+	}
+	let t1;
+	if ($[4] !== className) {
+		t1 = cn(className);
+		$[4] = className;
+		$[5] = t1;
+	} else {
+		t1 = $[5];
+	}
+	let t2;
+	if ($[6] !== props || $[7] !== rootRef || $[8] !== t1) {
+		t2 = /* @__PURE__ */ _jsx("div", {
+			"data-slot": "calendar",
+			ref: rootRef,
+			className: t1,
+			...props
+		});
+		$[6] = props;
+		$[7] = rootRef;
+		$[8] = t1;
+		$[9] = t2;
+	} else {
+		t2 = $[9];
+	}
+	return t2;
+}
+/** Arc's chevrons for the month controls and the caption dropdowns. */
+function CalendarChevron(t0) {
+	const $ = _c(19);
+	let className;
+	let orientation;
+	let props;
+	if ($[0] !== t0) {
+		({className, orientation, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = orientation;
+		$[3] = props;
+	} else {
+		className = $[1];
+		orientation = $[2];
+		props = $[3];
+	}
+	if (orientation === "left") {
+		let t1;
+		if ($[4] !== className) {
+			t1 = cn("size-4", className);
+			$[4] = className;
+			$[5] = t1;
+		} else {
+			t1 = $[5];
+		}
+		let t2;
+		if ($[6] !== props || $[7] !== t1) {
+			t2 = /* @__PURE__ */ _jsx(ChevronLeft, {
+				className: t1,
+				strokeWidth: 1.75,
+				...props
+			});
+			$[6] = props;
+			$[7] = t1;
+			$[8] = t2;
+		} else {
+			t2 = $[8];
+		}
+		return t2;
+	}
+	if (orientation === "right") {
+		let t1;
+		if ($[9] !== className) {
+			t1 = cn("size-4", className);
+			$[9] = className;
+			$[10] = t1;
+		} else {
+			t1 = $[10];
+		}
+		let t2;
+		if ($[11] !== props || $[12] !== t1) {
+			t2 = /* @__PURE__ */ _jsx(ChevronRight, {
+				className: t1,
+				strokeWidth: 1.75,
+				...props
+			});
+			$[11] = props;
+			$[12] = t1;
+			$[13] = t2;
+		} else {
+			t2 = $[13];
+		}
+		return t2;
+	}
+	let t1;
+	if ($[14] !== className) {
+		t1 = cn("size-4", className);
+		$[14] = className;
+		$[15] = t1;
+	} else {
+		t1 = $[15];
+	}
+	let t2;
+	if ($[16] !== props || $[17] !== t1) {
+		t2 = /* @__PURE__ */ _jsx(ChevronDown, {
+			className: t1,
 			...props
 		});
-		$[47] = T0;
-		$[48] = captionLayout;
-		$[49] = locale;
-		$[50] = props;
-		$[51] = showOutsideDays;
-		$[52] = t33;
-		$[53] = t35;
-		$[54] = t5;
-		$[55] = t7;
-		$[56] = t36;
-	} else {
-		t36 = $[56];
-	}
-	return t36;
+		$[16] = props;
+		$[17] = t1;
+		$[18] = t2;
+	} else {
+		t2 = $[18];
+	}
+	return t2;
 }
-function _temp3(t0) {
-	const { children, ...props_3 } = t0;
-	return /* @__PURE__ */ _jsx("td", {
-		...props_3,
-		children: /* @__PURE__ */ _jsx("div", {
+/** The day button slot, which reads the calendar locale for `data-day`. */
+function CalendarDayButtonSlot(props) {
+	const $ = _c(3);
+	const { dayPickerProps } = useDayPicker();
+	let t0;
+	if ($[0] !== dayPickerProps.locale || $[1] !== props) {
+		t0 = /* @__PURE__ */ _jsx(CalendarDayButton, {
+			locale: dayPickerProps.locale,
+			...props
+		});
+		$[0] = dayPickerProps.locale;
+		$[1] = props;
+		$[2] = t0;
+	} else {
+		t0 = $[2];
+	}
+	return t0;
+}
+/** The month caption, carrying the Today label its reserved space is sized from. Used only with `showToday`. */
+function CalendarMonthCaption(t0) {
+	const $ = _c(5);
+	let props;
+	if ($[0] !== t0) {
+		const { calendarMonth: _calendarMonth, displayIndex: _displayIndex, ...t1 } = t0;
+		props = t1;
+		$[0] = t0;
+		$[1] = props;
+	} else {
+		props = $[1];
+	}
+	const { todayLabel } = React.useContext(CalendarSettingsContext);
+	let t1;
+	if ($[2] !== props || $[3] !== todayLabel) {
+		t1 = /* @__PURE__ */ _jsx("div", {
+			"data-today-label": todayLabel,
+			...props
+		});
+		$[2] = props;
+		$[3] = todayLabel;
+		$[4] = t1;
+	} else {
+		t1 = $[4];
+	}
+	return t1;
+}
+/** A week number cell sized like a day. */
+function CalendarWeekNumber(t0) {
+	const $ = _c(8);
+	let children;
+	let props;
+	if ($[0] !== t0) {
+		({children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = props;
+	} else {
+		children = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== children) {
+		t1 = /* @__PURE__ */ _jsx("div", {
 			className: "flex size-(--cell-size) items-center justify-center text-center",
 			children
-		})
-	});
+		});
+		$[3] = children;
+		$[4] = t1;
+	} else {
+		t1 = $[4];
+	}
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ _jsx("td", {
+			...props,
+			children: t1
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else {
+		t2 = $[7];
+	}
+	return t2;
 }
-function _temp2(t0) {
-	const { className: className_1, orientation, ...props_1 } = t0;
-	if (orientation === "left") {
-		return /* @__PURE__ */ _jsx(ChevronLeft, {
-			className: cn("size-4", className_1),
-			...props_1
+/**
+* react-day-picker's month navigation with Arc's Today button in front of the arrows. Used only with `showToday`,
+* so the default navigation stays untouched otherwise.
+* @param props - Navigation handlers and the neighbouring months react-day-picker passes to its `Nav` slot.
+* @returns The navigation landmark.
+*/
+function CalendarNav(t0) {
+	const $ = _c(51);
+	let navProps;
+	let nextMonth;
+	let onNextClick;
+	let onPreviousClick;
+	let previousMonth;
+	if ($[0] !== t0) {
+		({onPreviousClick, onNextClick, previousMonth, nextMonth, ...navProps} = t0);
+		$[0] = t0;
+		$[1] = navProps;
+		$[2] = nextMonth;
+		$[3] = onNextClick;
+		$[4] = onPreviousClick;
+		$[5] = previousMonth;
+	} else {
+		navProps = $[1];
+		nextMonth = $[2];
+		onNextClick = $[3];
+		onPreviousClick = $[4];
+		previousMonth = $[5];
+	}
+	const { components, classNames, styles, labels: t1 } = useDayPicker();
+	const { labelPrevious, labelNext } = t1;
+	let t2;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ _jsx(CalendarTodayButton, {});
+		$[6] = t2;
+	} else {
+		t2 = $[6];
+	}
+	const T0 = components.PreviousMonthButton;
+	const t3 = classNames[UI.PreviousMonthButton];
+	const t4 = styles?.[UI.PreviousMonthButton];
+	const t5 = previousMonth ? undefined : -1;
+	const t6 = previousMonth ? undefined : true;
+	let t7;
+	if ($[7] !== labelPrevious || $[8] !== previousMonth) {
+		t7 = labelPrevious(previousMonth);
+		$[7] = labelPrevious;
+		$[8] = previousMonth;
+		$[9] = t7;
+	} else {
+		t7 = $[9];
+	}
+	let t8;
+	if ($[10] !== onPreviousClick || $[11] !== previousMonth) {
+		t8 = (event) => {
+			if (previousMonth) {
+				onPreviousClick?.(event);
+			}
+		};
+		$[10] = onPreviousClick;
+		$[11] = previousMonth;
+		$[12] = t8;
+	} else {
+		t8 = $[12];
+	}
+	const t9 = previousMonth ? undefined : true;
+	const t10 = classNames[UI.Chevron];
+	const t11 = styles?.[UI.Chevron];
+	let t12;
+	if ($[13] !== components.Chevron || $[14] !== t10 || $[15] !== t11 || $[16] !== t9) {
+		t12 = /* @__PURE__ */ _jsx(components.Chevron, {
+			disabled: t9,
+			className: t10,
+			style: t11,
+			orientation: "left"
 		});
+		$[13] = components.Chevron;
+		$[14] = t10;
+		$[15] = t11;
+		$[16] = t9;
+		$[17] = t12;
+	} else {
+		t12 = $[17];
 	}
-	if (orientation === "right") {
-		return /* @__PURE__ */ _jsx(ChevronRight, {
-			className: cn("size-4", className_1),
-			...props_1
+	let t13;
+	if ($[18] !== components.PreviousMonthButton || $[19] !== t12 || $[20] !== t3 || $[21] !== t4 || $[22] !== t5 || $[23] !== t6 || $[24] !== t7 || $[25] !== t8) {
+		t13 = /* @__PURE__ */ _jsx(T0, {
+			type: "button",
+			className: t3,
+			style: t4,
+			tabIndex: t5,
+			"aria-disabled": t6,
+			"aria-label": t7,
+			onClick: t8,
+			children: t12
 		});
+		$[18] = components.PreviousMonthButton;
+		$[19] = t12;
+		$[20] = t3;
+		$[21] = t4;
+		$[22] = t5;
+		$[23] = t6;
+		$[24] = t7;
+		$[25] = t8;
+		$[26] = t13;
+	} else {
+		t13 = $[26];
+	}
+	const T1 = components.NextMonthButton;
+	const t14 = classNames[UI.NextMonthButton];
+	const t15 = styles?.[UI.NextMonthButton];
+	const t16 = nextMonth ? undefined : -1;
+	const t17 = nextMonth ? undefined : true;
+	let t18;
+	if ($[27] !== labelNext || $[28] !== nextMonth) {
+		t18 = labelNext(nextMonth);
+		$[27] = labelNext;
+		$[28] = nextMonth;
+		$[29] = t18;
+	} else {
+		t18 = $[29];
+	}
+	let t19;
+	if ($[30] !== nextMonth || $[31] !== onNextClick) {
+		t19 = (event_0) => {
+			if (nextMonth) {
+				onNextClick?.(event_0);
+			}
+		};
+		$[30] = nextMonth;
+		$[31] = onNextClick;
+		$[32] = t19;
+	} else {
+		t19 = $[32];
 	}
-	return /* @__PURE__ */ _jsx(ChevronDown, {
-		className: cn("size-4", className_1),
-		...props_1
-	});
+	const t20 = nextMonth ? undefined : true;
+	const t21 = classNames[UI.Chevron];
+	const t22 = styles?.[UI.Chevron];
+	let t23;
+	if ($[33] !== components.Chevron || $[34] !== t20 || $[35] !== t21 || $[36] !== t22) {
+		t23 = /* @__PURE__ */ _jsx(components.Chevron, {
+			disabled: t20,
+			className: t21,
+			style: t22,
+			orientation: "right"
+		});
+		$[33] = components.Chevron;
+		$[34] = t20;
+		$[35] = t21;
+		$[36] = t22;
+		$[37] = t23;
+	} else {
+		t23 = $[37];
+	}
+	let t24;
+	if ($[38] !== components.NextMonthButton || $[39] !== t14 || $[40] !== t15 || $[41] !== t16 || $[42] !== t17 || $[43] !== t18 || $[44] !== t19 || $[45] !== t23) {
+		t24 = /* @__PURE__ */ _jsx(T1, {
+			type: "button",
+			className: t14,
+			style: t15,
+			tabIndex: t16,
+			"aria-disabled": t17,
+			"aria-label": t18,
+			onClick: t19,
+			children: t23
+		});
+		$[38] = components.NextMonthButton;
+		$[39] = t14;
+		$[40] = t15;
+		$[41] = t16;
+		$[42] = t17;
+		$[43] = t18;
+		$[44] = t19;
+		$[45] = t23;
+		$[46] = t24;
+	} else {
+		t24 = $[46];
+	}
+	let t25;
+	if ($[47] !== navProps || $[48] !== t13 || $[49] !== t24) {
+		t25 = /* @__PURE__ */ _jsxs("nav", {
+			...navProps,
+			children: [
+				t2,
+				t13,
+				t24
+			]
+		});
+		$[47] = navProps;
+		$[48] = t13;
+		$[49] = t24;
+		$[50] = t25;
+	} else {
+		t25 = $[50];
+	}
+	return t25;
+}
+/** Whether two dates fall in the same calendar month. */
+function isSameMonth(firstDate, secondDate) {
+	return firstDate.getFullYear() === secondDate.getFullYear() && firstDate.getMonth() === secondDate.getMonth();
 }
-function _temp(t0) {
-	const { className: className_0, rootRef, ...props_0 } = t0;
-	return /* @__PURE__ */ _jsx("div", {
-		"data-slot": "calendar",
-		ref: rootRef,
-		className: cn(className_0),
-		...props_0
-	});
+/** Months elapsed since year zero, so two dates can be compared by calendar month alone. */
+function toMonthIndex(date) {
+	return date.getFullYear() * CALENDAR_MONTHS_PER_YEAR + date.getMonth();
+}
+/** Whether two dates fall on the same calendar day, read in the dates' own time zone. */
+function isSameDate(firstDate, secondDate) {
+	return isSameMonth(firstDate, secondDate) && firstDate.getDate() === secondDate.getDate();
+}
+/**
+* Finds the rendered day of a date inside the displayed months, so its modifiers can be read from DayPicker.
+* @param months - Months DayPicker displays.
+* @param date - Date to look for.
+* @returns The day in its own month, or `undefined` when that month is not displayed.
+*/
+function findDisplayedDay(months, date) {
+	return months.flatMap((month) => month.weeks.flatMap((week) => week.days)).find((day) => !day.outside && isSameDate(day.date, date));
 }
 /**
-* Renders one displayed month and slides it in from the side the user navigated from.
+* Arc's Today button. Today is DayPicker's own (the `today` prop, or today in its `timeZone`), so the button always
+* agrees with the day marked as today; it is only read once hydrated, so server markup never depends on the server
+* clock, and until then the button rests dimmed.
+* @returns A button that brings today into view and selects it in single mode when it is not disabled.
+*/
+function CalendarTodayButton() {
+	const $ = _c(39);
+	const { months, goToMonth, getModifiers, select, isSelected, dayPickerProps } = useDayPicker();
+	const { todayLabel } = React.useContext(CalendarSettingsContext);
+	const isHydrated = useIsHydrated();
+	const today = isHydrated ? dayPickerProps.today : undefined;
+	let t0;
+	if ($[0] !== months || $[1] !== today) {
+		t0 = today && months.some((month) => isSameMonth(month.date, today));
+		$[0] = months;
+		$[1] = today;
+		$[2] = t0;
+	} else {
+		t0 = $[2];
+	}
+	const isTodayShown = Boolean(t0);
+	let t1;
+	if ($[3] !== months || $[4] !== today) {
+		t1 = today && findDisplayedDay(months, today);
+		$[3] = months;
+		$[4] = today;
+		$[5] = t1;
+	} else {
+		t1 = $[5];
+	}
+	const todayDay = t1;
+	let t2;
+	if ($[6] !== getModifiers || $[7] !== todayDay) {
+		t2 = todayDay ? getModifiers(todayDay) : undefined;
+		$[6] = getModifiers;
+		$[7] = todayDay;
+		$[8] = t2;
+	} else {
+		t2 = $[8];
+	}
+	const displayedTodayModifiers = t2;
+	let t3;
+	if ($[9] !== dayPickerProps || $[10] !== displayedTodayModifiers || $[11] !== today) {
+		t3 = displayedTodayModifiers ? displayedTodayModifiers.disabled || displayedTodayModifiers.hidden : Boolean(today && (dateMatchModifiers(today, dayPickerProps.disabled ?? []) || dateMatchModifiers(today, dayPickerProps.hidden ?? [])));
+		$[9] = dayPickerProps;
+		$[10] = displayedTodayModifiers;
+		$[11] = today;
+		$[12] = t3;
+	} else {
+		t3 = $[12];
+	}
+	const isTodayBlocked = t3;
+	const isTodaySelectable = Boolean(today && select && dayPickerProps.mode === "single" && !isTodayBlocked);
+	let t4;
+	if ($[13] !== isSelected || $[14] !== today) {
+		t4 = today && isSelected?.(today);
+		$[13] = isSelected;
+		$[14] = today;
+		$[15] = t4;
+	} else {
+		t4 = $[15];
+	}
+	const isTodaySelected = Boolean(t4);
+	const isTodayOutOfRange = Boolean(today && (dayPickerProps.startMonth && toMonthIndex(today) < toMonthIndex(dayPickerProps.startMonth) || dayPickerProps.endMonth && toMonthIndex(today) > toMonthIndex(dayPickerProps.endMonth)));
+	const isIdle = !today || !isTodayShown && isTodayOutOfRange || isTodayShown && (!isTodaySelectable || isTodaySelected);
+	let t5;
+	if ($[16] !== getModifiers || $[17] !== months || $[18] !== select) {
+		t5 = {
+			months,
+			getModifiers,
+			select
+		};
+		$[16] = getModifiers;
+		$[17] = months;
+		$[18] = select;
+		$[19] = t5;
+	} else {
+		t5 = $[19];
+	}
+	const latestDayPickerRef = React.useRef(t5);
+	let t6;
+	if ($[20] !== getModifiers || $[21] !== months || $[22] !== select) {
+		t6 = () => {
+			latestDayPickerRef.current = {
+				months,
+				getModifiers,
+				select
+			};
+		};
+		$[20] = getModifiers;
+		$[21] = months;
+		$[22] = select;
+		$[23] = t6;
+	} else {
+		t6 = $[23];
+	}
+	React.useLayoutEffect(t6);
+	let t7;
+	if ($[24] !== today) {
+		t7 = (event) => {
+			const latest = latestDayPickerRef.current;
+			const todayDay_0 = today && findDisplayedDay(latest.months, today);
+			if (!todayDay_0) {
+				return;
+			}
+			const modifiers = latest.getModifiers(todayDay_0);
+			if (modifiers.disabled || modifiers.hidden) {
+				return;
+			}
+			const selectSingle = latest.select;
+			selectSingle?.(todayDay_0.date, modifiers, event);
+		};
+		$[24] = today;
+		$[25] = t7;
+	} else {
+		t7 = $[25];
+	}
+	const selectDisplayedToday = t7;
+	let t8;
+	if ($[26] !== goToMonth || $[27] !== isIdle || $[28] !== isTodaySelectable || $[29] !== isTodaySelected || $[30] !== isTodayShown || $[31] !== selectDisplayedToday || $[32] !== today) {
+		t8 = (event_0) => {
+			if (isIdle || !today) {
+				return;
+			}
+			const shouldSelect = isTodaySelectable && !isTodaySelected;
+			if (!isTodayShown) {
+				flushSync(() => goToMonth(today));
+			}
+			if (shouldSelect) {
+				selectDisplayedToday(event_0);
+			}
+		};
+		$[26] = goToMonth;
+		$[27] = isIdle;
+		$[28] = isTodaySelectable;
+		$[29] = isTodaySelected;
+		$[30] = isTodayShown;
+		$[31] = selectDisplayedToday;
+		$[32] = today;
+		$[33] = t8;
+	} else {
+		t8 = $[33];
+	}
+	const handleClick = t8;
+	const t9 = isIdle || undefined;
+	let t10;
+	if ($[34] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = cn(calendarHeaderControlClassName, "inline-flex cursor-pointer items-center border-0 bg-transparent px-[11px] text-sm leading-none font-medium outline-none focus-visible:ring-3 focus-visible:ring-ring/50 [-webkit-tap-highlight-color:transparent]");
+		$[34] = t10;
+	} else {
+		t10 = $[34];
+	}
+	let t11;
+	if ($[35] !== handleClick || $[36] !== t9 || $[37] !== todayLabel) {
+		t11 = /* @__PURE__ */ _jsx("button", {
+			type: "button",
+			"data-slot": "calendar-today",
+			"aria-disabled": t9,
+			className: t10,
+			onClick: handleClick,
+			children: todayLabel
+		});
+		$[35] = handleClick;
+		$[36] = t9;
+		$[37] = todayLabel;
+		$[38] = t11;
+	} else {
+		t11 = $[38];
+	}
+	return t11;
+}
+/** Offset of a day button inside its month, from layout offsets, so press scales and the month slide never skew it. */
+function measureDayOffset(day, month) {
+	let horizontalOffset = 0;
+	let verticalOffset = 0;
+	let node = day;
+	while (node && node !== month) {
+		horizontalOffset += node.offsetLeft;
+		verticalOffset += node.offsetTop;
+		node = node.offsetParent;
+	}
+	return {
+		x: horizontalOffset,
+		y: verticalOffset
+	};
+}
+/**
+* Arc's selected disc for one month in single selection mode. It glides on a spring between two days of the same
+* month, retargets mid-flight on a new pick, grows in when the selection enters the month and fades out when it leaves.
+* While it paints the selection the month carries {@link CALENDAR_SELECTION_DISC_ATTRIBUTE}, so the selected day drops
+* its own fill; before hydration, and in other modes, the day keeps that fill.
+* @param monthRef - The month container the disc is positioned in.
+* @param monthTime - The month being displayed, so a month change jumps the disc instead of gliding it.
+* @param isEnabled - Whether the calendar is in single selection mode.
+* @returns The ref for the disc element.
+*/
+function useSelectionDisc(monthRef, monthTime, isEnabled) {
+	const $ = _c(12);
+	const discRef = React.useRef(null);
+	let t0;
+	if ($[0] !== monthTime) {
+		t0 = {
+			dayKey: null,
+			monthTime
+		};
+		$[0] = monthTime;
+		$[1] = t0;
+	} else {
+		t0 = $[1];
+	}
+	const placementRef = React.useRef(t0);
+	let t1;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = [];
+		$[2] = t1;
+	} else {
+		t1 = $[2];
+	}
+	const animationsRef = React.useRef(t1);
+	const reduceMotion = usePrefersReducedMotion();
+	let t2;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = () => {
+			animationsRef.current.forEach(_temp);
+			animationsRef.current = [];
+		};
+		$[3] = t2;
+	} else {
+		t2 = $[3];
+	}
+	const stopAnimations = t2;
+	let t3;
+	if ($[4] !== isEnabled || $[5] !== monthRef || $[6] !== monthTime || $[7] !== reduceMotion) {
+		t3 = () => {
+			const month = monthRef.current;
+			const disc = discRef.current;
+			if (!month || !disc) {
+				return;
+			}
+			const selectedDay = isEnabled ? month.querySelector(CALENDAR_SELECTED_DAY_SELECTOR) : null;
+			const dayKey = selectedDay?.getAttribute("data-day") ?? null;
+			const previous = placementRef.current;
+			if (previous.dayKey === dayKey && previous.monthTime === monthTime) {
+				return;
+			}
+			placementRef.current = {
+				dayKey,
+				monthTime
+			};
+			stopAnimations();
+			if (!selectedDay) {
+				month.removeAttribute(CALENDAR_SELECTION_DISC_ATTRIBUTE);
+				if (previous.dayKey === null) {
+					return;
+				}
+				const fade = reduceMotion ? { duration: 0 } : {
+					duration: CALENDAR_SELECTION_EXIT_DURATION_S,
+					ease: [...ARC_EASE.standard]
+				};
+				animationsRef.current = [animate(disc, {
+					opacity: 0,
+					scale: CALENDAR_SELECTION_ENTER_SCALE
+				}, fade)];
+				return;
+			}
+			const offset = measureDayOffset(selectedDay, month);
+			disc.style.width = `${selectedDay.offsetWidth}px`;
+			disc.style.height = `${selectedDay.offsetHeight}px`;
+			month.setAttribute(CALENDAR_SELECTION_DISC_ATTRIBUTE, "visible");
+			const isGlide = previous.dayKey !== null && previous.monthTime === monthTime && !reduceMotion;
+			if (isGlide) {
+				animationsRef.current = [animate(disc, {
+					x: offset.x,
+					y: offset.y
+				}, ARC_SPRING_MORPH)];
+				return;
+			}
+			const isEntering = previous.dayKey === null;
+			animationsRef.current = [animate(disc, {
+				x: offset.x,
+				y: offset.y
+			}, { duration: 0 })];
+			if (isEntering && !reduceMotion) {
+				animationsRef.current.push(animate(disc, { opacity: [0, 1] }, {
+					duration: ARC_DURATION.fast,
+					ease: [...ARC_EASE.enter]
+				}), animate(disc, { scale: [CALENDAR_SELECTION_ENTER_SCALE, 1] }, ARC_SPRING_SNAPPY));
+			} else {
+				animationsRef.current.push(animate(disc, {
+					opacity: 1,
+					scale: 1
+				}, { duration: 0 }));
+			}
+		};
+		$[4] = isEnabled;
+		$[5] = monthRef;
+		$[6] = monthTime;
+		$[7] = reduceMotion;
+		$[8] = t3;
+	} else {
+		t3 = $[8];
+	}
+	React.useLayoutEffect(t3);
+	let t4;
+	let t5;
+	if ($[9] !== monthRef) {
+		t4 = () => {
+			const month_0 = monthRef.current;
+			const disc_0 = discRef.current;
+			if (!month_0 || !disc_0 || typeof ResizeObserver === "undefined") {
+				return;
+			}
+			const observer = new ResizeObserver(() => {
+				const selectedDay_0 = month_0.querySelector(CALENDAR_SELECTED_DAY_SELECTOR);
+				if (!selectedDay_0 || placementRef.current.dayKey === null) {
+					return;
+				}
+				stopAnimations();
+				const offset_0 = measureDayOffset(selectedDay_0, month_0);
+				disc_0.style.width = `${selectedDay_0.offsetWidth}px`;
+				disc_0.style.height = `${selectedDay_0.offsetHeight}px`;
+				animationsRef.current = [animate(disc_0, {
+					x: offset_0.x,
+					y: offset_0.y,
+					opacity: 1,
+					scale: 1
+				}, { duration: 0 })];
+			});
+			observer.observe(month_0);
+			return () => {
+				observer.disconnect();
+				stopAnimations();
+			};
+		};
+		t5 = [monthRef, stopAnimations];
+		$[9] = monthRef;
+		$[10] = t4;
+		$[11] = t5;
+	} else {
+		t4 = $[10];
+		t5 = $[11];
+	}
+	React.useEffect(t4, t5);
+	return discRef;
+}
+function _temp(animation) {
+	return animation.stop();
+}
+/**
+* Renders one displayed month and slides it in from the side the user navigated from, on Arc's month spring.
 * DayPicker keys months by display position, so this instance survives navigation and can
 * compare the new month with the previous one. The first render and reduced motion stay static.
 * @param props - DayPicker month properties, including the month being displayed.
-* @returns The month container with its caption and grid.
+* @returns The month container with its caption, grid and selected disc.
 */
 function CalendarMonth(t0) {
-	const $ = _c(13);
+	const $ = _c(16);
 	let calendarMonth;
 	let children;
 	let displayIndex;
@@ -281,6 +1075,8 @@ function CalendarMonth(t0) {
 	const monthTime = calendarMonth.date.getTime();
 	const previousMonthTimeRef = React.useRef(monthTime);
 	const reduceMotion = usePrefersReducedMotion();
+	const { dayPickerProps } = useDayPicker();
+	const discRef = useSelectionDisc(monthRef, monthTime, dayPickerProps.mode === "single");
 	let t1;
 	let t2;
 	if ($[5] !== monthTime || $[6] !== reduceMotion) {
@@ -303,12 +1099,9 @@ function CalendarMonth(t0) {
 				element.style.transform = original.transform;
 			};
 			const animation = animate(element, {
-				opacity: [0, 1],
+				opacity: [CALENDAR_MONTH_ENTER_OPACITY, 1],
 				transform: [`translateX(${direction * MOTION_MONTH_DISTANCE}px)`, "translateX(0px)"]
-			}, {
-				duration: MOTION_TIMING.monthSwap,
-				ease: [...MOTION_EASE]
-			});
+			}, CALENDAR_MONTH_SPRING);
 			let isActive = true;
 			animation.then(() => frame.postRender(() => {
 				if (isActive) {
@@ -332,23 +1125,43 @@ function CalendarMonth(t0) {
 	}
 	React.useLayoutEffect(t1, t2);
 	let t3;
-	if ($[9] !== children || $[10] !== displayIndex || $[11] !== props) {
-		t3 = /* @__PURE__ */ _jsx("div", {
+	if ($[9] !== discRef) {
+		t3 = /* @__PURE__ */ _jsx("span", {
+			ref: discRef,
+			"aria-hidden": "true",
+			"data-slot": "calendar-selection",
+			className: "pointer-events-none absolute top-0 left-0 z-0 rounded-full bg-accent opacity-0"
+		});
+		$[9] = discRef;
+		$[10] = t3;
+	} else {
+		t3 = $[10];
+	}
+	let t4;
+	if ($[11] !== children || $[12] !== displayIndex || $[13] !== props || $[14] !== t3) {
+		t4 = /* @__PURE__ */ _jsxs("div", {
 			ref: monthRef,
 			"data-slot": "calendar-month",
 			"data-display-index": displayIndex,
 			...props,
-			children
+			children: [t3, children]
 		});
-		$[9] = children;
-		$[10] = displayIndex;
-		$[11] = props;
-		$[12] = t3;
+		$[11] = children;
+		$[12] = displayIndex;
+		$[13] = props;
+		$[14] = t3;
+		$[15] = t4;
 	} else {
-		t3 = $[12];
+		t4 = $[15];
 	}
-	return t3;
+	return t4;
 }
+/**
+* One day of the grid: a round cell whose fill answers hover on fine pointers, presses in slightly and marks today
+* with a dot under its number that takes the number's colour.
+* @param props - react-day-picker day button properties plus the locale used for `data-day`.
+* @returns The day button.
+*/
 function CalendarDayButton(t0) {
 	const $ = _c(21);
 	let className;
@@ -390,49 +1203,48 @@ function CalendarDayButton(t0) {
 		t2 = $[8];
 	}
 	React.useEffect(t1, t2);
-	const T0 = ControlButton;
-	const t3 = "ghost";
-	const t4 = "icon";
-	let t5;
+	const isSelectedSingle = Boolean(modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle);
+	const t3 = "button";
+	let t4;
 	if ($[9] !== day.date || $[10] !== locale?.code) {
-		t5 = day.date.toLocaleDateString(locale?.code);
+		t4 = day.date.toLocaleDateString(locale?.code);
 		$[9] = day.date;
 		$[10] = locale?.code;
-		$[11] = t5;
+		$[11] = t4;
 	} else {
-		t5 = $[11];
+		t4 = $[11];
 	}
-	const t6 = modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle;
-	const t7 = modifiers.range_start;
-	const t8 = modifiers.range_end;
-	const t9 = modifiers.range_middle;
-	const t10 = cn("relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70", defaultClassNames.day, className);
-	let t11;
-	if ($[12] !== T0 || $[13] !== modifiers.range_end || $[14] !== modifiers.range_middle || $[15] !== modifiers.range_start || $[16] !== props || $[17] !== t10 || $[18] !== t5 || $[19] !== t6) {
-		t11 = /* @__PURE__ */ _jsx(T0, {
+	const t5 = modifiers.range_start;
+	const t6 = modifiers.range_end;
+	const t7 = modifiers.range_middle;
+	const t8 = modifiers.today || undefined;
+	const t9 = cn("relative isolate z-10 flex aspect-square w-full min-w-(--cell-size) cursor-pointer flex-col items-center justify-center gap-1 rounded-(--cell-radius) border-0 bg-transparent p-0 text-sm leading-none font-normal text-foreground tabular-nums outline-none select-none [-webkit-tap-highlight-color:transparent] [&>span]:text-xs [&>span]:opacity-70", "transition-[color,background-color,scale] duration-(--duration-fast) ease-(--ease-standard) motion-reduce:transition-none", "hover-fine:not-disabled:not-data-[selected-single=true]:not-data-[range-start=true]:not-data-[range-end=true]:bg-surface-muted active:not-disabled:scale-[.94] motion-reduce:active:scale-100", "focus-visible:ring-3 focus-visible:ring-ring/50 group-data-[focused=true]/day:ring-3 group-data-[focused=true]/day:ring-ring/50", modifiers.outside && "text-text-muted", modifiers.disabled && "cursor-default text-text-muted opacity-40", modifiers.today && "font-medium after:pointer-events-none after:absolute after:bottom-[18%] after:left-1/2 after:size-1 after:-translate-x-1/2 after:rounded-full after:bg-current", "data-[selected-single=true]:bg-accent data-[selected-single=true]:font-medium data-[selected-single=true]:text-accent-foreground group-data-[selection-disc=visible]/calendar-month:data-[selected-single=true]:bg-transparent", "data-[range-start=true]:bg-accent data-[range-start=true]:text-accent-foreground data-[range-end=true]:bg-accent data-[range-end=true]:text-accent-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-surface-muted data-[range-middle=true]:text-foreground", defaultClassNames.day, className);
+	let t10;
+	if ($[12] !== isSelectedSingle || $[13] !== modifiers.range_end || $[14] !== modifiers.range_middle || $[15] !== modifiers.range_start || $[16] !== props || $[17] !== t4 || $[18] !== t8 || $[19] !== t9) {
+		t10 = /* @__PURE__ */ _jsx("button", {
 			ref,
-			variant: t3,
-			size: t4,
-			"data-day": t5,
-			"data-selected-single": t6,
-			"data-range-start": t7,
-			"data-range-end": t8,
-			"data-range-middle": t9,
-			className: t10,
+			type: t3,
+			"data-day": t4,
+			"data-selected-single": isSelectedSingle,
+			"data-range-start": t5,
+			"data-range-end": t6,
+			"data-range-middle": t7,
+			"data-today": t8,
+			className: t9,
 			...props
 		});
-		$[12] = T0;
+		$[12] = isSelectedSingle;
 		$[13] = modifiers.range_end;
 		$[14] = modifiers.range_middle;
 		$[15] = modifiers.range_start;
 		$[16] = props;
-		$[17] = t10;
-		$[18] = t5;
-		$[19] = t6;
-		$[20] = t11;
+		$[17] = t4;
+		$[18] = t8;
+		$[19] = t9;
+		$[20] = t10;
 	} else {
-		t11 = $[20];
+		t10 = $[20];
 	}
-	return t11;
+	return t10;
 }
 export { Calendar, CalendarDayButton };