@maanlamp/react-web-ui 0.0.0-stage → 0.1.1

package/dist/lib/calendar/calendar-navigation.js

@@ -0,0 +1,216 @@
+import SvgCheck from "../../vendor/@material-design-icons/svg/outlined/check.js";
+import SvgExpandMore from "../../vendor/@material-design-icons/svg/outlined/expand_more.js";
+import { Icon } from "../../components/icon/icon.js";
+import { useLocale } from "../../components/locale-provider/locale-provider.js";
+import { useTimeZone } from "../../components/time-zone-provider/time-zone-provider.js";
+import { usePopupEdgePadding } from "../popup-edge-padding.js";
+import { useCalendarNavigationState } from "./calendar-state.js";
+import { CalendarYear } from "./calendar-year.js";
+import { dayToPlainDate } from "./temporal-value.js";
+import temporal_module_default from "./temporal.module.js";
+import { c } from "react/compiler-runtime";
+import { useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Field } from "@base-ui/react/field";
+import { Intl } from "temporal-polyfill";
+import { startOfYear } from "@internationalized/date";
+import { Select } from "@base-ui/react/select";
+// src/lib/calendar/calendar-navigation.tsx
+var OwnField = (t0) => {
+	const $ = c(2);
+	const { children } = t0;
+	let t1;
+	if ($[0] !== children) {
+		t1 = /* @__PURE__ */ jsx(Field.Root, {
+			className: temporal_module_default.navField,
+			children
+		});
+		$[0] = children;
+		$[1] = t1;
+	} else t1 = $[1];
+	return t1;
+};
+var CalendarMonthSelect = (t0) => {
+	const $ = c(26);
+	const { state, label } = t0;
+	const locale = useLocale();
+	const timeZone = useTimeZone();
+	const { ref, collisionPadding } = usePopupEdgePadding();
+	const focused = state.focusedDate;
+	let t1;
+	if ($[0] !== focused || $[1] !== locale || $[2] !== timeZone) {
+		const formatter = new Intl.DateTimeFormat(locale, {
+			month: "long",
+			timeZone,
+			calendar: focused.calendar.identifier
+		});
+		const start = startOfYear(focused);
+		t1 = Array.from({ length: focused.calendar.getMonthsInYear(focused) }, (_, index) => start.add({ months: index })).map((month) => ({
+			value: String(month.month),
+			label: formatter.format(dayToPlainDate(month))
+		}));
+		$[0] = focused;
+		$[1] = locale;
+		$[2] = timeZone;
+		$[3] = t1;
+	} else t1 = $[3];
+	const options = t1;
+	const t2 = String(focused.month);
+	let t3;
+	if ($[4] !== focused || $[5] !== state) {
+		t3 = (next) => {
+			if (next !== null) state.setFocusedDate(focused.set({ month: Number(next) }));
+		};
+		$[4] = focused;
+		$[5] = state;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(Select.Value, { className: temporal_module_default.navValue });
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== options) {
+		t5 = /* @__PURE__ */ jsxs("span", {
+			className: temporal_module_default.navLabel,
+			children: [t4, /* @__PURE__ */ jsx("span", {
+				className: temporal_module_default.navSizer,
+				"aria-hidden": "true",
+				children: options.map(_temp)
+			})]
+		});
+		$[8] = options;
+		$[9] = t5;
+	} else t5 = $[9];
+	let t6;
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = /* @__PURE__ */ jsx(Select.Icon, {
+			className: temporal_module_default.navIcon,
+			children: /* @__PURE__ */ jsx(Icon, {
+				svg: SvgExpandMore,
+				label: ""
+			})
+		});
+		$[10] = t6;
+	} else t6 = $[10];
+	let t7;
+	if ($[11] !== label || $[12] !== t5) {
+		t7 = /* @__PURE__ */ jsxs(Select.Trigger, {
+			"aria-label": label,
+			className: temporal_module_default.navTrigger,
+			children: [t5, t6]
+		});
+		$[11] = label;
+		$[12] = t5;
+		$[13] = t7;
+	} else t7 = $[13];
+	let t8;
+	if ($[14] !== options) {
+		t8 = /* @__PURE__ */ jsx(Select.Popup, {
+			className: temporal_module_default.navPopup,
+			children: /* @__PURE__ */ jsx(Select.List, { children: options.map(_temp2) })
+		});
+		$[14] = options;
+		$[15] = t8;
+	} else t8 = $[15];
+	let t9;
+	if ($[16] !== collisionPadding || $[17] !== ref || $[18] !== t8) {
+		t9 = /* @__PURE__ */ jsx(Select.Positioner, {
+			ref,
+			className: temporal_module_default.navPositioner,
+			sideOffset: 4,
+			alignItemWithTrigger: false,
+			collisionPadding,
+			children: t8
+		});
+		$[16] = collisionPadding;
+		$[17] = ref;
+		$[18] = t8;
+		$[19] = t9;
+	} else t9 = $[19];
+	let t10;
+	if ($[20] !== options || $[21] !== t2 || $[22] !== t3 || $[23] !== t7 || $[24] !== t9) {
+		t10 = /* @__PURE__ */ jsxs(Select.Root, {
+			items: options,
+			value: t2,
+			onValueChange: t3,
+			children: [t7, t9]
+		});
+		$[20] = options;
+		$[21] = t2;
+		$[22] = t3;
+		$[23] = t7;
+		$[24] = t9;
+		$[25] = t10;
+	} else t10 = $[25];
+	return t10;
+};
+/**
+* The month and year controls in a calendar header, driven by whichever
+* calendar state is above them. The month list holds the months the focused
+* year actually has; the year list is every year in its era.
+*
+* @example
+* <CalendarNavigation monthLabel="Month" yearLabel="Year" noMatchingYearLabel="No matching year." />
+*/
+var CalendarNavigation = (t0) => {
+	const $ = c(10);
+	const { monthLabel, yearLabel, noMatchingYearLabel } = t0;
+	const containerRef = useRef(null);
+	const state = useCalendarNavigationState();
+	if (state === null) return null;
+	let t1;
+	if ($[0] !== monthLabel || $[1] !== state) {
+		t1 = /* @__PURE__ */ jsx(OwnField, { children: /* @__PURE__ */ jsx(CalendarMonthSelect, {
+			state,
+			label: monthLabel
+		}) });
+		$[0] = monthLabel;
+		$[1] = state;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== noMatchingYearLabel || $[4] !== state || $[5] !== yearLabel) {
+		t2 = /* @__PURE__ */ jsx(OwnField, { children: /* @__PURE__ */ jsx(CalendarYear, {
+			state,
+			container: containerRef,
+			label: yearLabel,
+			noMatchLabel: noMatchingYearLabel
+		}) });
+		$[3] = noMatchingYearLabel;
+		$[4] = state;
+		$[5] = yearLabel;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== t1 || $[8] !== t2) {
+		t3 = /* @__PURE__ */ jsxs("div", {
+			ref: containerRef,
+			className: temporal_module_default.navigation,
+			children: [t1, t2]
+		});
+		$[7] = t1;
+		$[8] = t2;
+		$[9] = t3;
+	} else t3 = $[9];
+	return t3;
+};
+function _temp(option) {
+	return /* @__PURE__ */ jsx("span", { children: option.label }, option.value);
+}
+function _temp2(option_0) {
+	return /* @__PURE__ */ jsxs(Select.Item, {
+		value: option_0.value,
+		className: temporal_module_default.navItem,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: temporal_module_default.navItemIndicator,
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx(Select.ItemIndicator, { children: /* @__PURE__ */ jsx(Icon, {
+				svg: SvgCheck,
+				label: ""
+			}) })
+		}), /* @__PURE__ */ jsx(Select.ItemText, { children: option_0.label })]
+	}, option_0.value);
+}
+export { CalendarNavigation };

package/dist/lib/calendar/calendar-state.d.ts

@@ -0,0 +1,20 @@
+import { type ContextType } from "react";
+import { CalendarStateContext, RangeCalendarStateContext } from "react-aria-components";
+export type CalendarNavigationState = NonNullable<ContextType<typeof CalendarStateContext> | ContextType<typeof RangeCalendarStateContext>>;
+/**
+ * Whichever calendar state is above this component, single or range, or `null`
+ * outside both.
+ *
+ * @example
+ * const state = useCalendarNavigationState();
+ */
+export declare const useCalendarNavigationState: () => CalendarNavigationState | null;
+/**
+ * Every year the focused date's era holds, narrowed by the field's own
+ * `minValue` and `maxValue`.
+ *
+ * @example
+ * eraYears(state); // [1, 2, …, 9999] for a Gregorian AD date
+ */
+export declare const eraYears: (state: CalendarNavigationState) => readonly number[];
+//# sourceMappingURL=calendar-state.d.ts.map

package/dist/lib/calendar/calendar-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar-state.d.ts","sourceRoot":"","sources":["../../../src/lib/calendar/calendar-state.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,WAAW,EAAc,MAAM,OAAO,CAAC;AACrD,OAAO,EACN,oBAAoB,EACpB,yBAAyB,EACzB,MAAM,uBAAuB,CAAC;AAE/B,MAAM,MAAM,uBAAuB,GAAG,WAAW,CAC9C,WAAW,CAAC,OAAO,oBAAoB,CAAC,GACxC,WAAW,CAAC,OAAO,yBAAyB,CAAC,CAC/C,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,0BAA0B,QAClC,uBAAuB,GAAG,IAI7B,CAAC;AAEH;;;;;;GAMG;AACH,eAAO,MAAM,QAAQ,UACb,uBAAuB,KAC5B,SAAS,MAAM,EAwBjB,CAAC"}

package/dist/lib/calendar/calendar-state.js

@@ -0,0 +1,33 @@
+import { useContext } from "react";
+import { CalendarStateContext, RangeCalendarStateContext } from "react-aria-components";
+import { toCalendar, toCalendarDate } from "@internationalized/date";
+// src/lib/calendar/calendar-state.ts
+/**
+* Whichever calendar state is above this component, single or range, or `null`
+* outside both.
+*
+* @example
+* const state = useCalendarNavigationState();
+*/
+var useCalendarNavigationState = () => {
+	const single = useContext(CalendarStateContext);
+	const range = useContext(RangeCalendarStateContext);
+	return single ?? range;
+};
+/**
+* Every year the focused date's era holds, narrowed by the field's own
+* `minValue` and `maxValue`.
+*
+* @example
+* eraYears(state); // [1, 2, …, 9999] for a Gregorian AD date
+*/
+var eraYears = (state) => {
+	const focused = state.focusedDate;
+	const min = state.minValue ?? null;
+	const max = state.maxValue ?? null;
+	const first = Math.max(1, min === null ? 1 : toCalendar(toCalendarDate(min), focused.calendar).year);
+	const inEra = focused.calendar.getYearsInEra(focused);
+	const last = max === null ? inEra : Math.min(inEra, toCalendar(toCalendarDate(max), focused.calendar).year);
+	return Array.from({ length: Math.max(0, last - first + 1) }, (_, index) => first + index);
+};
+export { eraYears, useCalendarNavigationState };

package/dist/lib/calendar/calendar-year.d.ts

@@ -0,0 +1,21 @@
+import { type ReactNode, type RefObject } from "react";
+import { type CalendarNavigationState } from "./calendar-state.ts";
+export type CalendarYearProps = Readonly<{
+    state: CalendarNavigationState;
+    /** Holds the popup, so it stays inside the calendar's own popover. */
+    container: RefObject<HTMLDivElement | null>;
+    /** Accessible name of the year input, such as "Year". */
+    label: string;
+    /** What the list says when no year matches the typed text. */
+    noMatchLabel: string;
+}>;
+/**
+ * The year control in a calendar header: every year in the focused date's era,
+ * virtualized so the scrollbar spans the whole era rather than a loaded window,
+ * and filtered by typing.
+ *
+ * @example
+ * <CalendarYear state={state} container={containerRef} label="Year" noMatchLabel="No matching year." />
+ */
+export declare const CalendarYear: ({ state, container, label, noMatchLabel, }: CalendarYearProps) => ReactNode;
+//# sourceMappingURL=calendar-year.d.ts.map

package/dist/lib/calendar/calendar-year.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar-year.d.ts","sourceRoot":"","sources":["../../../src/lib/calendar/calendar-year.tsx"],"names":[],"mappings":"AAIA,OAAO,EACN,KAAK,SAAS,EACd,KAAK,SAAS,EAId,MAAM,OAAO,CAAC;AAIf,OAAO,EACN,KAAK,uBAAuB,EAE5B,MAAM,qBAAqB,CAAC;AA0B7B,MAAM,MAAM,iBAAiB,GAAG,QAAQ,CAAC;IACxC,KAAK,EAAE,uBAAuB,CAAC;IAC/B,sEAAsE;IACtE,SAAS,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC5C,yDAAyD;IACzD,KAAK,EAAE,MAAM,CAAC;IACd,8DAA8D;IAC9D,YAAY,EAAE,MAAM,CAAC;CACrB,CAAC,CAAC;AAEH;;;;;;;GAOG;AACH,eAAO,MAAM,YAAY,+CAKtB,iBAAiB,KAAG,SAoJtB,CAAC"}

package/dist/lib/calendar/calendar-year.js

@@ -0,0 +1,334 @@
+import SvgCheck from "../../vendor/@material-design-icons/svg/outlined/check.js";
+import SvgExpandMore from "../../vendor/@material-design-icons/svg/outlined/expand_more.js";
+import { Icon } from "../../components/icon/icon.js";
+import { useLocale } from "../../components/locale-provider/locale-provider.js";
+import { usePopupEdgePadding } from "../popup-edge-padding.js";
+import { eraYears } from "./calendar-state.js";
+import temporal_module_default from "./temporal.module.js";
+import { c } from "react/compiler-runtime";
+import { useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Combobox } from "@base-ui/react/combobox";
+import { useVirtualizer } from "@tanstack/react-virtual";
+// src/lib/calendar/calendar-year.tsx
+var ROW_ESTIMATE = 40;
+var OVERSCAN = 8;
+var useYearRows = (count, list) => {
+	const virtualizer = useVirtualizer({
+		count,
+		getScrollElement: () => list,
+		estimateSize: () => ROW_ESTIMATE,
+		overscan: OVERSCAN
+	});
+	return {
+		rows: virtualizer.getVirtualItems(),
+		totalSize: virtualizer.getTotalSize(),
+		measureElement: virtualizer.measureElement,
+		scrollToIndex: virtualizer.scrollToIndex,
+		scrollToOffset: virtualizer.scrollToOffset
+	};
+};
+/**
+* The year control in a calendar header: every year in the focused date's era,
+* virtualized so the scrollbar spans the whole era rather than a loaded window,
+* and filtered by typing.
+*
+* @example
+* <CalendarYear state={state} container={containerRef} label="Year" noMatchLabel="No matching year." />
+*/
+var CalendarYear = (t0) => {
+	const $ = c(72);
+	const { state, container, label, noMatchLabel } = t0;
+	const locale = useLocale();
+	const { ref, collisionPadding } = usePopupEdgePadding();
+	const inputRef = useRef(null);
+	const [open, setOpen] = useState(false);
+	const [list, setList] = useState(null);
+	const [query, setQuery] = useState("");
+	const focused = state.focusedDate;
+	const formatter = new Intl.NumberFormat(locale, { useGrouping: false });
+	const yearLabel = (year) => formatter.format(year);
+	let t1;
+	if ($[0] !== query || $[1] !== state) {
+		const search = query.trim();
+		const years = eraYears(state);
+		t1 = search === "" ? years : years.filter((year_0) => String(year_0).includes(search));
+		$[0] = query;
+		$[1] = state;
+		$[2] = t1;
+	} else t1 = $[2];
+	const matches = t1;
+	const { rows, totalSize, measureElement, scrollToIndex, scrollToOffset } = useYearRows(matches.length, list);
+	let t2;
+	if ($[3] !== focused.year || $[4] !== list || $[5] !== matches || $[6] !== scrollToIndex) {
+		t2 = () => {
+			if (list === null) return;
+			const index = matches.indexOf(focused.year);
+			if (index >= 0) scrollToIndex(index, { align: "center" });
+		};
+		$[3] = focused.year;
+		$[4] = list;
+		$[5] = matches;
+		$[6] = scrollToIndex;
+		$[7] = t2;
+	} else t2 = $[7];
+	let t3;
+	if ($[8] !== list) {
+		t3 = [list];
+		$[8] = list;
+		$[9] = t3;
+	} else t3 = $[9];
+	useLayoutEffect(t2, t3);
+	const t4 = Combobox;
+	const t5 = true;
+	const t6 = null;
+	const t7 = focused.year;
+	let t8;
+	if ($[10] !== focused || $[11] !== state) {
+		t8 = (next) => {
+			if (next !== null) state.setFocusedDate(focused.set({ year: next }));
+		};
+		$[10] = focused;
+		$[11] = state;
+		$[12] = t8;
+	} else t8 = $[12];
+	const t9 = _temp;
+	let t10;
+	if ($[13] !== scrollToOffset) {
+		t10 = (next_0, details) => {
+			if (details.reason === "input-change") {
+				setQuery(next_0);
+				scrollToOffset(0);
+			}
+		};
+		$[13] = scrollToOffset;
+		$[14] = t10;
+	} else t10 = $[14];
+	let t11;
+	if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+		t11 = (next_1) => {
+			if (!next_1) setQuery("");
+		};
+		$[15] = t11;
+	} else t11 = $[15];
+	let t12;
+	if ($[16] !== label) {
+		t12 = /* @__PURE__ */ jsx(Combobox.Input, {
+			ref: inputRef,
+			"aria-label": label,
+			className: temporal_module_default.navInput,
+			onFocus: _temp2
+		});
+		$[16] = label;
+		$[17] = t12;
+	} else t12 = $[17];
+	let t13;
+	if ($[18] !== open) {
+		t13 = (event_0) => {
+			event_0.preventDefault();
+			event_0.stopPropagation();
+			inputRef.current?.focus();
+			setOpen(!open);
+		};
+		$[18] = open;
+		$[19] = t13;
+	} else t13 = $[19];
+	let t14;
+	if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
+		t14 = /* @__PURE__ */ jsx(Icon, {
+			svg: SvgExpandMore,
+			label: ""
+		});
+		$[20] = t14;
+	} else t14 = $[20];
+	let t15;
+	if ($[21] !== t13) {
+		t15 = /* @__PURE__ */ jsx(Combobox.Icon, {
+			className: temporal_module_default.navChevron,
+			onMouseDown: t13,
+			children: t14
+		});
+		$[21] = t13;
+		$[22] = t15;
+	} else t15 = $[22];
+	let t16;
+	if ($[23] !== t12 || $[24] !== t15) {
+		t16 = /* @__PURE__ */ jsxs(Combobox.InputGroup, {
+			className: temporal_module_default.navControl,
+			children: [t12, t15]
+		});
+		$[23] = t12;
+		$[24] = t15;
+		$[25] = t16;
+	} else t16 = $[25];
+	const t17 = Combobox;
+	const t18 = temporal_module_default;
+	const t19 = Combobox;
+	const t20 = temporal_module_default;
+	const t21 = 4;
+	const t22 = Combobox;
+	const t23 = temporal_module_default;
+	let t24;
+	if ($[26] !== noMatchLabel) {
+		t24 = /* @__PURE__ */ jsx(Combobox.Empty, {
+			className: temporal_module_default.yearEmpty,
+			children: noMatchLabel
+		});
+		$[26] = noMatchLabel;
+		$[27] = t24;
+	} else t24 = $[27];
+	const t25 = Combobox;
+	const t26 = temporal_module_default;
+	const t27 = `${totalSize}px`;
+	let t28;
+	if ($[28] !== t27) {
+		t28 = { blockSize: t27 };
+		$[28] = t27;
+		$[29] = t28;
+	} else t28 = $[29];
+	let t29;
+	if ($[30] !== rows) {
+		t29 = rows.at(0)?.start ?? 0;
+		$[30] = rows;
+		$[31] = t29;
+	} else t29 = $[31];
+	const t30 = `translateY(${t29}px)`;
+	let t31;
+	if ($[32] !== t30) {
+		t31 = { transform: t30 };
+		$[32] = t30;
+		$[33] = t31;
+	} else t31 = $[33];
+	const t32 = rows.map((row) => {
+		const year_2 = matches[row.index];
+		if (year_2 === void 0) return null;
+		return /* @__PURE__ */ jsxs(Combobox.Item, {
+			ref: measureElement,
+			"data-index": row.index,
+			value: year_2,
+			index: row.index,
+			className: temporal_module_default.yearOption,
+			children: [/* @__PURE__ */ jsx("span", {
+				className: temporal_module_default.yearIndicator,
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ jsx(Combobox.ItemIndicator, { children: /* @__PURE__ */ jsx(Icon, {
+					svg: SvgCheck,
+					label: ""
+				}) })
+			}), /* @__PURE__ */ jsx("span", {
+				className: temporal_module_default.yearValue,
+				children: yearLabel(year_2)
+			})]
+		}, row.key);
+	});
+	let t33;
+	if ($[34] !== t31 || $[35] !== t32) {
+		t33 = /* @__PURE__ */ jsx("div", {
+			style: t31,
+			children: t32
+		});
+		$[34] = t31;
+		$[35] = t32;
+		$[36] = t33;
+	} else t33 = $[36];
+	let t34;
+	if ($[37] !== t28 || $[38] !== t33) {
+		t34 = /* @__PURE__ */ jsx("div", {
+			style: t28,
+			children: t33
+		});
+		$[37] = t28;
+		$[38] = t33;
+		$[39] = t34;
+	} else t34 = $[39];
+	let t35;
+	if ($[40] !== t25.List || $[41] !== t26.yearList || $[42] !== t34) {
+		t35 = /* @__PURE__ */ jsx(t25.List, {
+			ref: setList,
+			className: t26.yearList,
+			children: t34
+		});
+		$[40] = t25.List;
+		$[41] = t26.yearList;
+		$[42] = t34;
+		$[43] = t35;
+	} else t35 = $[43];
+	let t36;
+	if ($[44] !== t22.Popup || $[45] !== t23.yearPopup || $[46] !== t24 || $[47] !== t35) {
+		t36 = /* @__PURE__ */ jsxs(t22.Popup, {
+			className: t23.yearPopup,
+			children: [t24, t35]
+		});
+		$[44] = t22.Popup;
+		$[45] = t23.yearPopup;
+		$[46] = t24;
+		$[47] = t35;
+		$[48] = t36;
+	} else t36 = $[48];
+	let t37;
+	if ($[49] !== collisionPadding || $[50] !== ref || $[51] !== t19.Positioner || $[52] !== t20.navPositioner || $[53] !== t36) {
+		t37 = /* @__PURE__ */ jsx(t19.Positioner, {
+			ref,
+			className: t20.navPositioner,
+			sideOffset: t21,
+			collisionPadding,
+			children: t36
+		});
+		$[49] = collisionPadding;
+		$[50] = ref;
+		$[51] = t19.Positioner;
+		$[52] = t20.navPositioner;
+		$[53] = t36;
+		$[54] = t37;
+	} else t37 = $[54];
+	let t38;
+	if ($[55] !== container || $[56] !== t17.Portal || $[57] !== t18.navPortal || $[58] !== t37) {
+		t38 = /* @__PURE__ */ jsx(t17.Portal, {
+			container,
+			className: t18.navPortal,
+			children: t37
+		});
+		$[55] = container;
+		$[56] = t17.Portal;
+		$[57] = t18.navPortal;
+		$[58] = t37;
+		$[59] = t38;
+	} else t38 = $[59];
+	let t39;
+	if ($[60] !== focused.year || $[61] !== matches || $[62] !== open || $[63] !== t10 || $[64] !== t11 || $[65] !== t16 || $[66] !== t38 || $[67] !== t4.Root || $[68] !== t8 || $[69] !== t9 || $[70] !== yearLabel) {
+		t39 = /* @__PURE__ */ jsxs(t4.Root, {
+			virtualized: t5,
+			items: matches,
+			filter: t6,
+			value: t7,
+			onValueChange: t8,
+			itemToStringLabel: yearLabel,
+			itemToStringValue: t9,
+			open,
+			onOpenChange: setOpen,
+			onInputValueChange: t10,
+			onOpenChangeComplete: t11,
+			children: [t16, t38]
+		});
+		$[60] = focused.year;
+		$[61] = matches;
+		$[62] = open;
+		$[63] = t10;
+		$[64] = t11;
+		$[65] = t16;
+		$[66] = t38;
+		$[67] = t4.Root;
+		$[68] = t8;
+		$[69] = t9;
+		$[70] = yearLabel;
+		$[71] = t39;
+	} else t39 = $[71];
+	return t39;
+};
+function _temp(year_1) {
+	return String(year_1);
+}
+function _temp2(event) {
+	return event.currentTarget.select();
+}
+export { CalendarYear };