@optiaxiom/react 3.4.2 → 3.5.0

package/dist/cjs/Calendar-B5LRazO4.js

@@ -0,0 +1,883 @@
+"use client";
+const require_box = require("./box-B2PXBdH7.js");
+const require_recipeRuntime = require("./recipeRuntime-BV5B1H9r.js");
+const require_button = require("./button-BO_WcwyT.js");
+const require_SuggestionPopover = require("./SuggestionPopover-Bu_sY4dq.js");
+const require_text = require("./text-BWyl3PQL.js");
+const require_group = require("./group.js");
+const require_VisuallyHidden = require("./VisuallyHidden-DK0Wtj7A.js");
+const require_LocaleContext = require("./LocaleContext-C3x9rY0T.js");
+const require_tooltip = require("./tooltip-DgIDNGYv.js");
+const require_select = require("./select-4Cy3SWkh.js");
+let react = require("react");
+require("./assets/layers.css.ts.vanilla-CTOkUrdE.css");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _radix_ui_react_context = require("@radix-ui/react-context");
+let _radix_ui_react_compose_refs = require("@radix-ui/react-compose-refs");
+let _radix_ui_react_use_controllable_state = require("@radix-ui/react-use-controllable-state");
+let _optiaxiom_icons_IconAngleDown = require("@optiaxiom/icons/IconAngleDown");
+let _optiaxiom_icons_IconChevronRight = require("@optiaxiom/icons/IconChevronRight");
+let _optiaxiom_icons_IconChevronLeft = require("@optiaxiom/icons/IconChevronLeft");
+let react_day_picker = require("react-day-picker");
+require("./assets/Calendar.css.ts.vanilla--K3sd-wz.css");
+require("./assets/CalendarDayButton.css.ts.vanilla-D4TW-51q.css");
+require("./assets/CalendarGrid.css.ts.vanilla-BlEmaKy4.css");
+require("./assets/CalendarMonths.css.ts.vanilla-CtgCrNdt.css");
+require("./assets/CalendarNextMonthButton.css.ts.vanilla-BLY1PQvD.css");
+require("./assets/CalendarPreviousMonthButton.css.ts.vanilla-dS6NoyFu.css");
+//#region src/utils/memoize.ts
+/**
+* Memoizes `build` by a string key, caching each result so expensive
+* constructions (e.g. `Intl` formatters) only happen once per key.
+*/
+const memoize = (build) => {
+	const cache = /* @__PURE__ */ new Map();
+	return (key) => {
+		if (!cache.has(key)) cache.set(key, build(key));
+		return cache.get(key);
+	};
+};
+//#endregion
+//#region src/utils/formatDate.ts
+const dateTimeFormat = (locale, options) => new Intl.DateTimeFormat(locale, options).format;
+/**
+* Bare numbers go through `NumberFormat` rather than `DateTimeFormat` because
+* the latter appends date-unit suffixes in some locales (e.g. `5日` in `zh`),
+* which we don't want for day/year cells.
+*/
+const numberFormat = (locale) => new Intl.NumberFormat(locale, { useGrouping: false }).format;
+const buildTokens = (locale) => ({
+	ccccc: dateTimeFormat(locale, { weekday: "narrow" }),
+	d: (date) => numberFormat(locale)(date.getDate()),
+	LLL: dateTimeFormat(locale, { month: "short" }),
+	LLLL: dateTimeFormat(locale, { month: "long" }),
+	"LLLL yyyy": dateTimeFormat(locale, {
+		month: "long",
+		year: "numeric"
+	}),
+	yyyy: (date) => numberFormat(locale)(date.getFullYear())
+});
+/**
+* `Intl` formatter construction is expensive, so we memoize the token map per
+* locale. The values are stable for a given locale.
+*/
+const tokensFor = memoize(buildTokens);
+/**
+* A locale-aware `formatDate(locale, date, token)` modeled on date-fns's
+* `format`, but backed by `Intl` and limited to the tokens we actually use:
+*
+* - `d` — day of month (`5`)
+* - `yyyy` — year (`2025`)
+* - `LLL` — standalone short month (`Jan`)
+* - `LLLL` — standalone full month (`January`)
+* - `LLLL yyyy` — month and year (`January 2025`)
+* - `ccccc` — standalone narrow weekday (`S`)
+*
+* Add new tokens to the map above as components need them, rather than parsing
+* arbitrary format strings.
+*/
+const formatDate = (locale, date, token) => tokensFor(locale)[token](date);
+//#endregion
+//#region src/utils/toInstant.ts
+/**
+* Convert string to an instant Date object with time and timezone.
+*/
+function toInstant(str) {
+	const rawDate = str && typeof str === "string" ? new Date(str.includes("T") ? str : str + "T00:00") : void 0;
+	return isValidDate(rawDate) ? rawDate : void 0;
+}
+const isValidDate = (date) => date ? !isNaN(+date) : false;
+//#endregion
+//#region src/utils/toPlainDateTime.ts
+/**
+* Convert an instant Date to a local date and time string without timezone.
+*/
+const toPlainDateTime = (date) => (/* @__PURE__ */ new Date(date.getTime() - new Date(date).getTimezoneOffset() * 60 * 1e3)).toISOString().slice(0, -1);
+//#endregion
+//#region src/utils/toPlainDate.ts
+/**
+* Convert an instant Date to a local date string without time and timezone.
+*/
+const toPlainDate = (date) => toPlainDateTime(date).split("T")[0];
+//#endregion
+//#region src/utils/toPlainTime.ts
+/**
+* Convert an instant Date to a local time string in hh:mm format.
+*
+* Rounds to the nearest time based on the step attribute.
+*/
+const toPlainTime = (date, step = "60") => {
+	const stepInMinutes = (typeof step === "string" ? parseInt(step) : step) / 60;
+	const [hour, minute] = toPlainDateTime(date).split("T")[1].slice(0, 5).split(":");
+	return hour + ":" + (Math.floor(parseInt(minute) / stepInMinutes) * stepInMinutes).toString().padStart(2, "0");
+};
+//#endregion
+//#region src/clock/utils.ts
+/**
+* `Intl` construction is expensive, so we memoize per locale. Values are stable
+* for a given locale.
+*/
+const localeData = memoize((locale) => {
+	const intlLocale = new Intl.Locale(locale);
+	const hourCycles = "getHourCycles" in intlLocale && typeof intlLocale.getHourCycles === "function" ? intlLocale.getHourCycles() : ["h12"];
+	return {
+		dayPeriodFormatter: new Intl.DateTimeFormat(locale, {
+			hour: "numeric",
+			hour12: true
+		}),
+		is24Hour: hourCycles[0] === "h23",
+		numberFormatter: new Intl.NumberFormat(locale, { useGrouping: false })
+	};
+});
+const is24Hour = (locale) => localeData(locale).is24Hour;
+/**
+* Transliterates the digits of an already-formatted numeric string (e.g.
+* `"05"`) into the locale's numbering system (e.g. `"०५"` for `mr-IN`),
+* preserving any existing padding. This is digit transliteration rather than a
+* date format because the clock's value is a `HH:mm` string, not a `Date` — the
+* underlying Latin value stays unchanged so the time contract is preserved.
+*/
+const toLabel = (locale, value) => value.split("").map((digit) => localeData(locale).numberFormatter.format(Number(digit))).join("");
+/**
+* Returns the localized AM/PM label — date-fns's `aaa` token, via `Intl`. Yields
+* `"ص"`/`"م"` for `ar`, but still `"AM"`/`"PM"` for locales like `mr` that use
+* them by convention.
+*/
+const toMeridiemLabel = (locale, meridiem) => localeData(locale).dayPeriodFormatter.formatToParts(new Date(2025, 0, 1, meridiem === "AM" ? 9 : 21)).find((part) => part.type === "dayPeriod")?.value ?? meridiem;
+const format = (is24Hour, { hour, meridiem, minute }) => {
+	return (is24Hour ? hour : ((parseInt(hour) === 12 ? 0 : parseInt(hour)) + (meridiem === "PM" ? 12 : 0)).toString().padStart(2, "0")) + ":" + minute;
+};
+const parse = (is24Hour, value, step = 1) => {
+	const now = /* @__PURE__ */ new Date();
+	const [hour, minute] = (value ? value : `${now.getHours()}:${now.getMinutes()}`).split(":");
+	return {
+		hour: is24Hour ? parseInt(hour).toString().padStart(2, "0") : (parseInt(hour) % 12 === 0 ? 12 : parseInt(hour) % 12).toString(),
+		meridiem: parseInt(hour) < 12 ? "AM" : "PM",
+		minute: (Math.floor(parseInt(minute) / step) * step).toString().padStart(2, "0")
+	};
+};
+const range = (min, max, step = 1) => Array.from({ length: Math.floor((max - min) / step) + 1 }, (_, index) => (min + index * step).toString());
+//#endregion
+//#region src/clock/Clock.tsx
+const Clock = (0, react.forwardRef)(({ defaultValue = "", onValueChange, step = "60", value: valueProp, ...props }, ref) => {
+	const { locale } = require_LocaleContext.useLocaleContext("@optiaxiom/react/Clock");
+	const hour24 = is24Hour(locale);
+	const [value, setValue] = (0, _radix_ui_react_use_controllable_state.useControllableState)({
+		caller: "@optiaxiom/react/Clock",
+		defaultProp: defaultValue,
+		onChange: onValueChange,
+		prop: valueProp
+	});
+	const stepInMinutes = (typeof step === "string" ? parseInt(step) : step) / 60;
+	const parsed = parse(hour24, value, stepInMinutes);
+	const hours = hour24 ? range(0, 23).map((hour) => hour.padStart(2, "0")) : range(1, 12);
+	const minutes = range(0, 59, stepInMinutes).map((minute) => minute.padStart(2, "0"));
+	const periods = ["AM", "PM"];
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_group.Group, {
+		gap: "4",
+		ref,
+		...props,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_select.Select, {
+				onValueChange: (hour) => hour && setValue(format(hour24, {
+					...parsed,
+					hour
+				})),
+				options: hours.map((hour) => ({
+					label: toLabel(locale, hour),
+					value: hour
+				})),
+				value: parsed.hour,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_select.SelectTrigger, {
+					"aria-label": "Select hour",
+					flex: "1",
+					placeholder: "HH"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_select.SelectContent, {})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_select.Select, {
+				onValueChange: (minute) => minute && setValue(format(hour24, {
+					...parsed,
+					minute
+				})),
+				options: minutes.map((minute) => ({
+					ariaLabel: `${parseInt(minute)}`,
+					label: toLabel(locale, minute),
+					value: minute
+				})),
+				value: parsed.minute,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_select.SelectTrigger, {
+					"aria-label": "Select minute",
+					flex: "1",
+					placeholder: "MM"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_select.SelectContent, {})]
+			}),
+			!hour24 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_select.Select, {
+				onValueChange: (meridiem) => (meridiem === "AM" || meridiem === "PM") && setValue(format(hour24, {
+					...parsed,
+					meridiem
+				})),
+				options: periods.map((period) => ({
+					label: toMeridiemLabel(locale, period),
+					value: period
+				})),
+				value: parsed.meridiem,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_select.SelectTrigger, {
+					"aria-label": "Select AM or PM",
+					flex: "1",
+					placeholder: "--"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_select.SelectContent, {})]
+			})
+		]
+	});
+});
+Clock.displayName = "@optiaxiom/react/Clock";
+//#endregion
+//#region src/calendar/Calendar.css.ts
+var picker = require_recipeRuntime.recipeRuntime({ variants: { side: {
+	bottom: {},
+	left: {},
+	right: {},
+	top: "szvvg8"
+} } });
+//#endregion
+//#region src/calendar/CalendarContext.ts
+const [CalendarProvider, useCalendarContext] = (0, _radix_ui_react_context.createContext)("@optiaxiom/react/Calendar");
+//#endregion
+//#region src/calendar/utils.ts
+const withMonth = (date, month) => {
+	const next = new Date(date);
+	next.setDate(1);
+	next.setMonth(month);
+	next.setDate(Math.min(date.getDate(), getDaysOfMonth(next)));
+	return next;
+};
+const withYear = (date, year) => {
+	const next = new Date(date);
+	next.setDate(1);
+	next.setFullYear(year);
+	next.setDate(Math.min(date.getDate(), getDaysOfMonth(next)));
+	return next;
+};
+const getDaysOfMonth = (date) => {
+	return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
+};
+//#endregion
+//#region src/calendar/CalendarCaptionLabel.tsx
+function CalendarCaptionLabel({ children, ...props }) {
+	const { month, setView, view } = useCalendarContext("@optiaxiom/react/CalendarCaptionLabel");
+	const { locale } = require_LocaleContext.useLocaleContext("@optiaxiom/react/CalendarCaptionLabel");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_button.Button, {
+		appearance: "subtle",
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_optiaxiom_icons_IconAngleDown.IconAngleDown, {}),
+		iconPosition: "end",
+		onClick: () => {
+			if (view === "month") setView("year");
+			else setView("month");
+		},
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_day_picker.CaptionLabel, {
+			...props,
+			children: view === "year" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+				formatDate(locale, month, "yyyy"),
+				" -",
+				" ",
+				formatDate(locale, withYear(month, month.getFullYear() + 11), "yyyy")
+			] }) : view === "month" ? formatDate(locale, month, "yyyy") : children
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_VisuallyHidden.VisuallyHidden, { children: view === "month" ? "change year" : "change month" })]
+	});
+}
+CalendarCaptionLabel.displayName = "@optiaxiom/react/CalendarCaptionLabel";
+//#endregion
+//#region src/calendar/CalendarChevron.tsx
+function CalendarChevron({ orientation, ...props }) {
+	return orientation === "left" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_optiaxiom_icons_IconChevronLeft.IconChevronLeft, { ...props }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_optiaxiom_icons_IconChevronRight.IconChevronRight, { ...props });
+}
+CalendarChevron.displayName = "@optiaxiom/react/CalendarChevron";
+//#endregion
+//#region src/calendar/CalendarDay.tsx
+function CalendarDay({ children, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_box.Box, {
+		asChild: true,
+		flex: "1",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_day_picker.Day, {
+			...props,
+			children
+		})
+	});
+}
+CalendarDay.displayName = "@optiaxiom/react/CalendarDay";
+//#endregion
+//#region src/calendar/CalendarDayButton.css.ts
+var button$2 = require_recipeRuntime.recipeRuntime({
+	base: [{
+		color: "fg.default",
+		fontSize: "md",
+		size: "md",
+		transition: "colors"
+	}, "_1q00kn3"],
+	variants: {
+		appearance: {
+			"default": "_1dk8zus",
+			holiday: [{ color: "fg.error" }, "jxdwid"],
+			range_middle: "_12i0r8k",
+			selected: ["_12b4mki"],
+			weekend: [{ color: "fg.tertiary" }, "s2rcpx"]
+		},
+		range: {
+			end: ["_14d29x0"],
+			middle: ["_18akgol"],
+			start: ["uayji4"]
+		}
+	}
+});
+var today = require_recipeRuntime.recipeRuntime({ base: [{
+	mx: "auto",
+	rounded: "full"
+}, "ji9wip"] });
+//#endregion
+//#region src/calendar/CalendarDayButton.tsx
+function CalendarDayButton({ children, className, color: _color, day, disabled, modifiers, ...props }) {
+	const { setTo } = useCalendarContext("@optiaxiom/react/CalendarDayButton");
+	const ref = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		if (modifiers.focused) ref.current?.focus();
+	}, [modifiers.focused]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_box.Box, {
+		asChild: true,
+		...button$2({
+			appearance: modifiers.range_middle ? "range_middle" : modifiers.selected ? "selected" : modifiers.holiday ? "holiday" : modifiers.weekend ? "weekend" : "default",
+			range: modifiers.outside || modifiers.range_start && modifiers.range_end ? void 0 : modifiers.range_start ? "start" : modifiers.range_middle ? "middle" : modifiers.range_end ? "end" : void 0
+		}, className),
+		onFocus: () => {
+			setTo(day.date);
+		},
+		onPointerEnter: () => {
+			if (!(modifiers.outside || disabled)) setTo(day.date);
+		},
+		onPointerLeave: () => {
+			if (!(modifiers.outside || disabled)) setTo(void 0);
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+			disabled: modifiers.outside || disabled,
+			ref,
+			...props,
+			children: [children, modifiers.today && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_box.Box, { ...today() })]
+		})
+	});
+}
+CalendarDayButton.displayName = "@optiaxiom/react/CalendarDayButton";
+//#endregion
+//#region src/calendar/CalendarMonthCaption.tsx
+function CalendarMonthCaption({ children, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_box.Box, {
+		asChild: true,
+		mb: "16",
+		mr: "64",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_day_picker.MonthCaption, {
+			...props,
+			children
+		})
+	});
+}
+CalendarMonthCaption.displayName = "@optiaxiom/react/CalendarMonthCaption";
+//#endregion
+//#region src/calendar/CalendarGrid.css.ts
+var grid$1 = require_recipeRuntime.recipeRuntime({ base: [{
+	display: "flex",
+	flexDirection: "column",
+	gap: "2"
+}, "m2du0n"] });
+//#endregion
+//#region src/calendar/CalendarGrid.tsx
+const grid = [
+	0,
+	1,
+	2
+].map((row) => [
+	0,
+	1,
+	2,
+	3
+].map((col) => row * 4 + col));
+const intentMap = {
+	ArrowDown: 4,
+	ArrowLeft: -1,
+	ArrowRight: 1,
+	ArrowUp: -4
+};
+function CalendarGrid({ onPageChange, onValueChange, options, value }) {
+	const { month, view } = useCalendarContext("@optiaxiom/react/CalendarGrid");
+	const [highlightedIndex, setHighlightedIndex] = (0, react.useState)(value);
+	const cellsRef = (0, react.useRef)([]);
+	(0, react.useEffect)(() => {
+		cellsRef.current[highlightedIndex]?.focus();
+	}, [highlightedIndex]);
+	const ref = (0, react.useRef)(null);
+	const lastMonthRef = (0, react.useRef)();
+	const lastViewRef = (0, react.useRef)();
+	(0, react.useEffect)(() => {
+		if (!ref.current) return;
+		if (lastMonthRef.current && view === lastViewRef.current) ref.current.animate([{
+			opacity: 0,
+			translate: month > lastMonthRef.current ? "20px" : "-20px"
+		}, {
+			opacity: 1,
+			translate: "0px"
+		}], { duration: 150 });
+		else ref.current.animate([{
+			opacity: 0,
+			scale: lastViewRef.current === "year" ? 1.03 : .97
+		}, {
+			opacity: 1,
+			scale: 1
+		}], { duration: 150 });
+		lastMonthRef.current = month;
+		lastViewRef.current = view;
+	}, [month, view]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_box.Box, {
+		ref,
+		role: "grid",
+		...grid$1(),
+		children: grid.map((row, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_box.Box, {
+			display: "flex",
+			flex: "1",
+			gap: "2",
+			role: "row",
+			children: row.map((index, j) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_box.Box, {
+				display: "flex",
+				flex: "1",
+				role: "gridcell",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
+					appearance: "subtle",
+					"aria-label": Array.isArray(options[index]) ? options[index][1] : void 0,
+					h: "auto",
+					justifyContent: "center",
+					onClick: () => {
+						onValueChange(index);
+					},
+					onKeyDown: (event) => {
+						let intent = highlightedIndex + (intentMap[event.key] ?? 0);
+						if (intent === highlightedIndex) return;
+						if (intent < 0) {
+							onPageChange(-1);
+							intent += 12;
+						} else if (intent >= 12) {
+							onPageChange(1);
+							intent %= 12;
+						}
+						setHighlightedIndex(intent);
+					},
+					px: "0",
+					ref: (node) => cellsRef.current[index] = node,
+					tabIndex: highlightedIndex === index ? 0 : -1,
+					w: "full",
+					children: Array.isArray(options[index]) ? options[index][0] : options[index]
+				})
+			}, j))
+		}, i))
+	}, view);
+}
+CalendarGrid.displayName = "@optiaxiom/react/CalendarGrid";
+//#endregion
+//#region src/calendar/CalendarMonthGrid.tsx
+function CalendarMonthGrid({ children, ...props }) {
+	const { month, setMonth, setView, view } = useCalendarContext("@optiaxiom/react/CalendarMonthGrid");
+	const { locale } = require_LocaleContext.useLocaleContext("@optiaxiom/react/CalendarMonthGrid");
+	const months = Array.from({ length: 12 }, (_, month) => {
+		const date = new Date(2e3, month, 1);
+		return [formatDate(locale, date, "LLL"), formatDate(locale, date, "LLLL")];
+	});
+	const ref = (0, react.useRef)(null);
+	const lastMonthRef = (0, react.useRef)();
+	const lastViewRef = (0, react.useRef)();
+	(0, react.useEffect)(() => {
+		if (view !== "day") {
+			lastMonthRef.current = void 0;
+			lastViewRef.current = view;
+			return;
+		}
+		if (lastMonthRef.current) ref.current?.querySelector("tbody")?.animate([{
+			opacity: 0,
+			translate: month > lastMonthRef.current ? "20px" : "-20px"
+		}, {
+			opacity: 1,
+			translate: "0px"
+		}], { duration: 150 });
+		else if (lastViewRef.current) {
+			ref.current?.animate([{
+				opacity: 0,
+				scale: 1.03
+			}, {
+				opacity: 1,
+				scale: 1
+			}], { duration: 150 });
+			const days = Array.from(ref.current?.querySelectorAll("tbody button:not([disabled])") ?? []);
+			(days.find((day) => day.textContent === formatDate(locale, month, "d")) ?? days[0])?.focus();
+		}
+		lastMonthRef.current = month;
+		lastViewRef.current = view;
+	}, [
+		locale,
+		month,
+		view
+	]);
+	if (view === "year") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CalendarGrid, {
+		onPageChange: (dir) => {
+			setMonth(withYear(month, month.getFullYear() + dir * 12));
+		},
+		onValueChange: (value) => {
+			setMonth(withYear(month, month.getFullYear() + value));
+			setView("month");
+		},
+		options: Array.from({ length: 12 }).map((_, index) => {
+			const year = formatDate(locale, withYear(month, month.getFullYear() + index), "yyyy");
+			return [year, year];
+		}),
+		value: 0
+	});
+	else if (view === "month") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CalendarGrid, {
+		onPageChange: (dir) => {
+			setMonth(withYear(month, month.getFullYear() + dir));
+		},
+		onValueChange: (value) => {
+			setMonth(withMonth(month, value));
+			setView("day");
+		},
+		options: months,
+		value: month.getMonth()
+	});
+	else return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_box.Box, {
+		ref,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_box.Box, {
+			asChild: true,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_day_picker.MonthGrid, {
+				...props,
+				children
+			})
+		})
+	});
+}
+CalendarMonthGrid.displayName = "@optiaxiom/react/CalendarMonthGrid";
+//#endregion
+//#region src/calendar/CalendarMonths.css.ts
+var months = require_recipeRuntime.recipeRuntime({ base: [{
+	alignItems: "start",
+	gap: "16"
+}, "_1qwj49j"] });
+//#endregion
+//#region src/calendar/CalendarMonths.tsx
+function CalendarMonths({ children, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_group.Group, {
+		asChild: true,
+		...months(),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_day_picker.Months, {
+			...props,
+			children
+		})
+	});
+}
+CalendarMonths.displayName = "@optiaxiom/react/CalendarMonths";
+//#endregion
+//#region src/calendar/CalendarNextMonthButton.css.ts
+var button$1 = require_recipeRuntime.recipeRuntime({ base: "_1szhfcy" });
+//#endregion
+//#region src/calendar/CalendarNextMonthButton.tsx
+function CalendarNextMonthButton({ "aria-label": _ariaLabel, children, className, color: _color, onClick, ...props }) {
+	const { month, setMonth, view } = useCalendarContext("@optiaxiom/react/CalendarNextMonthButton");
+	const label = "Go to the " + (view === "year" ? "next year range" : view === "month" ? "next year" : "next month");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_tooltip.Tooltip, {
+		content: label,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
+			appearance: "subtle",
+			"aria-label": label,
+			icon: children,
+			onClick: (event) => {
+				if (view === "day") onClick?.(event);
+				else setMonth(withYear(month, month.getFullYear() + (view === "year" ? 12 : 1)));
+			},
+			...button$1({}, className),
+			...props
+		})
+	});
+}
+CalendarNextMonthButton.displayName = "@optiaxiom/react/CalendarNextMonthButton";
+//#endregion
+//#region src/calendar/CalendarPreviousMonthButton.css.ts
+var button = require_recipeRuntime.recipeRuntime({ base: "rt2zha" });
+//#endregion
+//#region src/calendar/CalendarPreviousMonthButton.tsx
+function CalendarPreviousMonthButton({ "aria-label": _ariaLabel, children, className, color: _color, onClick, ...props }) {
+	const { month, setMonth, view } = useCalendarContext("@optiaxiom/react/CalendarPreviousMonthButton");
+	const label = "Go to the " + (view === "year" ? "previous year range" : view === "month" ? "previous year" : "previous month");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_tooltip.Tooltip, {
+		content: label,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
+			appearance: "subtle",
+			"aria-label": label,
+			icon: children,
+			onClick: (event) => {
+				if (view === "day") onClick?.(event);
+				else setMonth(withYear(month, month.getFullYear() - (view === "year" ? 12 : 1)));
+			},
+			...button({}, className),
+			...props
+		})
+	});
+}
+CalendarPreviousMonthButton.displayName = "@optiaxiom/react/CalendarPreviousMonthButton";
+//#endregion
+//#region src/calendar/CalendarWeek.tsx
+function CalendarWeek({ children, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_box.Box, {
+		asChild: true,
+		display: "flex",
+		gap: "2",
+		mt: "2",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_day_picker.Week, {
+			...props,
+			children
+		})
+	});
+}
+CalendarWeek.displayName = "@optiaxiom/react/CalendarWeek";
+//#endregion
+//#region src/calendar/CalendarWeekday.tsx
+function CalendarWeekday({ children, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_box.Box, {
+		asChild: true,
+		color: "fg.tertiary",
+		flex: "1",
+		fontSize: "sm",
+		fontWeight: "400",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_day_picker.Weekday, {
+			...props,
+			children
+		})
+	});
+}
+CalendarWeekday.displayName = "@optiaxiom/react/CalendarWeekday";
+//#endregion
+//#region src/calendar/CalendarWeekdays.tsx
+function CalendarWeekdays({ children, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_box.Box, {
+		asChild: true,
+		display: "flex",
+		flexDirection: "column",
+		mb: "6",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", {
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_box.Box, {
+				asChild: true,
+				display: "flex",
+				gap: "2",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", {
+					...props,
+					children
+				})
+			})
+		})
+	});
+}
+CalendarWeekdays.displayName = "@optiaxiom/react/CalendarWeekdays";
+//#endregion
+//#region src/calendar/toTimeZoneName.ts
+/**
+* `Intl` construction is expensive, so we memoize the formatter per locale.
+*/
+const formatterFor = memoize((locale) => new Intl.DateTimeFormat(locale, { timeZoneName: "long" }));
+const toTimeZoneName = (locale, date) => {
+	return formatterFor(locale).formatToParts(date).find((part) => part.type === "timeZoneName")?.value ?? "";
+};
+//#endregion
+//#region src/calendar/Calendar.tsx
+/**
+* Derive the first day of the week from the locale via `Intl.Locale`, falling
+* back to Sunday when `getWeekInfo` is unavailable.
+*/
+const weekStartsOnFor = (locale) => {
+	const intlLocale = new Intl.Locale(locale);
+	return ("getWeekInfo" in intlLocale && typeof intlLocale.getWeekInfo === "function" ? intlLocale.getWeekInfo() : { firstDay: 0 }).firstDay % 7;
+};
+const components = {
+	CaptionLabel: CalendarCaptionLabel,
+	Chevron: CalendarChevron,
+	Day: CalendarDay,
+	DayButton: CalendarDayButton,
+	MonthCaption: CalendarMonthCaption,
+	MonthGrid: CalendarMonthGrid,
+	Months: CalendarMonths,
+	NextMonthButton: CalendarNextMonthButton,
+	PreviousMonthButton: CalendarPreviousMonthButton,
+	Week: CalendarWeek,
+	Weekday: CalendarWeekday,
+	Weekdays: CalendarWeekdays
+};
+/**
+* Base date picker component.
+*
+* @category date
+* @since 0.12.1
+* @experimental
+*/
+const Calendar = (0, react.forwardRef)(({ defaultValue = null, holiday, max, min, mode = "single", onDateSelect, onValueChange, placeholder, step, today, type = "date", value: valueProp, weekend, ...props }, outerRef) => {
+	const { side } = require_SuggestionPopover.usePopoverContentContext("@optiaxiom/react/Calendar");
+	const { locale } = require_LocaleContext.useLocaleContext("@optiaxiom/react/Calendar");
+	const weekStartsOn = weekStartsOnFor(locale);
+	/**
+	* Override `react-day-picker`'s default formatters with locale-aware ones so
+	* the calendar localizes without a date-fns locale object.
+	*/
+	const formatters = {
+		formatCaption: (month) => formatDate(locale, month, "LLLL yyyy"),
+		formatDay: (day) => formatDate(locale, day, "d"),
+		formatWeekdayName: (weekday) => formatDate(locale, weekday, "ccccc")
+	};
+	const [view, setView] = (0, react.useState)("day");
+	const [value, setValue] = (0, _radix_ui_react_use_controllable_state.useControllableState)({
+		caller: "@optiaxiom/react/Calendar",
+		defaultProp: defaultValue,
+		onChange: onValueChange,
+		prop: valueProp
+	});
+	const now = /* @__PURE__ */ new Date();
+	const placeholderDate = placeholder ? toInstant(placeholder.includes("-") ? placeholder : `${toPlainDate(now)}T${placeholder}`) ?? now : now;
+	const time = type === "date" ? "00:00" : toPlainTime(value instanceof Date ? value : placeholderDate, step);
+	const [month, setMonth] = (0, react.useState)(value && typeof value === "object" && "from" in value ? value.from : value instanceof Date ? value : today ?? placeholderDate);
+	const innerRef = (0, react.useRef)(null);
+	const ref = (0, _radix_ui_react_compose_refs.useComposedRefs)(innerRef, outerRef);
+	const [from, setFrom] = (0, react.useState)();
+	const [to, setTo] = (0, react.useState)();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CalendarProvider, {
+		month,
+		setMonth,
+		setTo,
+		setView,
+		view,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_group.Group, {
+			bg: "bg.default",
+			color: "fg.default",
+			flexDirection: "column",
+			fontSize: "md",
+			gap: "4",
+			...props,
+			ref,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_box.Box, {
+				asChild: true,
+				...picker({ side }),
+				children: mode === "single" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_day_picker.DayPicker, {
+					autoFocus: true,
+					components,
+					disabled: [...min ? [{ before: min }] : [], ...max ? [{ after: max }] : []],
+					formatters,
+					mode: "single",
+					modifiers: {
+						holiday,
+						weekend
+					},
+					month,
+					navLayout: "after",
+					onMonthChange: setMonth,
+					onSelect: (value) => {
+						const date = value ? /* @__PURE__ */ new Date(toPlainDate(value) + "T" + (time ?? "00:00")) : value ?? null;
+						setValue(date);
+						onDateSelect?.(date);
+					},
+					required: true,
+					selected: value instanceof Date ? value : void 0,
+					today,
+					weekStartsOn
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_day_picker.DayPicker, {
+					autoFocus: true,
+					components,
+					disabled: [...min ? [{ before: min }] : [], ...max ? [{ after: max }] : []],
+					fixedWeeks: true,
+					formatters,
+					mode: "range",
+					modifiers: {
+						holiday,
+						weekend
+					},
+					month,
+					navLayout: "after",
+					onMonthChange: setMonth,
+					onSelect: (newValue) => {
+						if (!from) {
+							const oldFrom = value && typeof value === "object" && "from" in value ? value.from : void 0;
+							const newFrom = oldFrom && newValue?.from && newValue.from < oldFrom ? newValue.from : newValue?.to;
+							setFrom(newFrom);
+							if (newFrom) onDateSelect?.(newFrom);
+						} else {
+							setFrom(void 0);
+							const start = to && to < from ? to : from;
+							const end = to && to < from ? toInstant(toPlainDate(from) + "T23:59:59.999") : to ? toInstant(toPlainDate(to) + "T23:59:59.999") : void 0;
+							if (end) onDateSelect?.(end);
+							setValue(end ? {
+								from: start,
+								to: end
+							} : null);
+						}
+					},
+					required: true,
+					selected: from ? to && to < from ? {
+						from: to,
+						to: from
+					} : {
+						from,
+						to
+					} : value && typeof value === "object" && "from" in value ? value : void 0,
+					showOutsideDays: true,
+					today,
+					weekStartsOn
+				})
+			}), type === "datetime-local" && mode == "single" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_group.Group, {
+				flexDirection: "column",
+				gap: "8",
+				mt: "8",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Clock, {
+					onValueChange: (time) => {
+						setValue(/* @__PURE__ */ new Date(toPlainDate(value instanceof Date ? value : placeholderDate) + "T" + time));
+					},
+					step,
+					value: time
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text.Text, {
+					color: "fg.tertiary",
+					fontSize: "sm",
+					textAlign: "center",
+					w: "full",
+					children: toTimeZoneName(locale, value instanceof Date ? value : placeholderDate)
+				})]
+			})]
+		})
+	});
+});
+Calendar.displayName = "@optiaxiom/react/Calendar";
+//#endregion
+Object.defineProperty(exports, "Calendar", {
+	enumerable: true,
+	get: function() {
+		return Calendar;
+	}
+});
+Object.defineProperty(exports, "memoize", {
+	enumerable: true,
+	get: function() {
+		return memoize;
+	}
+});
+Object.defineProperty(exports, "toInstant", {
+	enumerable: true,
+	get: function() {
+		return toInstant;
+	}
+});
+Object.defineProperty(exports, "toPlainDate", {
+	enumerable: true,
+	get: function() {
+		return toPlainDate;
+	}
+});
+Object.defineProperty(exports, "toPlainDateTime", {
+	enumerable: true,
+	get: function() {
+		return toPlainDateTime;
+	}
+});