@igne-agency/react-web-ui 0.3.0 → 0.4.0

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

@@ -1,6 +1,3 @@
-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";
@@ -9,8 +6,8 @@ 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 { useRef } from "react";
 import { Field } from "@base-ui/react/field";
 import { Intl } from "temporal-polyfill";
 import { startOfYear } from "@internationalized/date";
@@ -31,8 +28,8 @@ var OwnField = (t0) => {
 	return t1;
 };
 var CalendarMonthSelect = (t0) => {
-	const $ = c(26);
-	const { state, label } = t0;
+	const $ = c(29);
+	const { state, label, checkIcon, expandIcon } = t0;
 	const locale = useLocale();
 	const timeZone = useTimeZone();
 	const { ref, collisionPadding } = usePopupEdgePadding();
@@ -84,38 +81,46 @@ var CalendarMonthSelect = (t0) => {
 		$[9] = t5;
 	} else t5 = $[9];
 	let t6;
-	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
-		t6 = /* @__PURE__ */ jsx(Select.Icon, {
+	if ($[10] !== expandIcon) {
+		t6 = expandIcon !== void 0 && /* @__PURE__ */ jsx(Select.Icon, {
 			className: temporal_module_default.navIcon,
-			children: /* @__PURE__ */ jsx(Icon, {
-				svg: SvgExpandMore,
-				label: ""
-			})
+			children: expandIcon
 		});
-		$[10] = t6;
-	} else t6 = $[10];
+		$[10] = expandIcon;
+		$[11] = t6;
+	} else t6 = $[11];
 	let t7;
-	if ($[11] !== label || $[12] !== t5) {
+	if ($[12] !== label || $[13] !== t5 || $[14] !== t6) {
 		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];
+		$[12] = label;
+		$[13] = t5;
+		$[14] = t6;
+		$[15] = t7;
+	} else t7 = $[15];
 	let t8;
-	if ($[14] !== options) {
+	if ($[16] !== checkIcon || $[17] !== options) {
 		t8 = /* @__PURE__ */ jsx(Select.Popup, {
 			className: temporal_module_default.navPopup,
-			children: /* @__PURE__ */ jsx(Select.List, { children: options.map(_temp2) })
+			children: /* @__PURE__ */ jsx(Select.List, { children: options.map((option_0) => /* @__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: checkIcon })
+				}), /* @__PURE__ */ jsx(Select.ItemText, { children: option_0.label })]
+			}, option_0.value)) })
 		});
-		$[14] = options;
-		$[15] = t8;
-	} else t8 = $[15];
+		$[16] = checkIcon;
+		$[17] = options;
+		$[18] = t8;
+	} else t8 = $[18];
 	let t9;
-	if ($[16] !== collisionPadding || $[17] !== ref || $[18] !== t8) {
+	if ($[19] !== collisionPadding || $[20] !== ref || $[21] !== t8) {
 		t9 = /* @__PURE__ */ jsx(Select.Positioner, {
 			ref,
 			className: temporal_module_default.navPositioner,
@@ -124,26 +129,26 @@ var CalendarMonthSelect = (t0) => {
 			collisionPadding,
 			children: t8
 		});
-		$[16] = collisionPadding;
-		$[17] = ref;
-		$[18] = t8;
-		$[19] = t9;
-	} else t9 = $[19];
+		$[19] = collisionPadding;
+		$[20] = ref;
+		$[21] = t8;
+		$[22] = t9;
+	} else t9 = $[22];
 	let t10;
-	if ($[20] !== options || $[21] !== t2 || $[22] !== t3 || $[23] !== t7 || $[24] !== t9) {
+	if ($[23] !== options || $[24] !== t2 || $[25] !== t3 || $[26] !== t7 || $[27] !== 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];
+		$[23] = options;
+		$[24] = t2;
+		$[25] = t3;
+		$[26] = t7;
+		$[27] = t9;
+		$[28] = t10;
+	} else t10 = $[28];
 	return t10;
 };
 /**
@@ -152,65 +157,59 @@ var CalendarMonthSelect = (t0) => {
 * year actually has; the year list is every year in its era.
 *
 * @example
-* <CalendarNavigation monthLabel="Month" yearLabel="Year" noMatchingYearLabel="No matching year." />
+* <CalendarNavigation monthLabel="Month" yearLabel="Year" noMatchingYearLabel="No matching year." checkIcon={<CheckIcon />} />
 */
 var CalendarNavigation = (t0) => {
-	const $ = c(10);
-	const { monthLabel, yearLabel, noMatchingYearLabel } = t0;
+	const $ = c(14);
+	const { monthLabel, yearLabel, noMatchingYearLabel, checkIcon, expandIcon } = t0;
 	const containerRef = useRef(null);
 	const state = useCalendarNavigationState();
 	if (state === null) return null;
 	let t1;
-	if ($[0] !== monthLabel || $[1] !== state) {
+	if ($[0] !== checkIcon || $[1] !== expandIcon || $[2] !== monthLabel || $[3] !== state) {
 		t1 = /* @__PURE__ */ jsx(OwnField, { children: /* @__PURE__ */ jsx(CalendarMonthSelect, {
 			state,
-			label: monthLabel
+			label: monthLabel,
+			checkIcon,
+			expandIcon
 		}) });
-		$[0] = monthLabel;
-		$[1] = state;
-		$[2] = t1;
-	} else t1 = $[2];
+		$[0] = checkIcon;
+		$[1] = expandIcon;
+		$[2] = monthLabel;
+		$[3] = state;
+		$[4] = t1;
+	} else t1 = $[4];
 	let t2;
-	if ($[3] !== noMatchingYearLabel || $[4] !== state || $[5] !== yearLabel) {
+	if ($[5] !== checkIcon || $[6] !== expandIcon || $[7] !== noMatchingYearLabel || $[8] !== state || $[9] !== yearLabel) {
 		t2 = /* @__PURE__ */ jsx(OwnField, { children: /* @__PURE__ */ jsx(CalendarYear, {
 			state,
 			container: containerRef,
 			label: yearLabel,
-			noMatchLabel: noMatchingYearLabel
+			noMatchLabel: noMatchingYearLabel,
+			checkIcon,
+			expandIcon
 		}) });
-		$[3] = noMatchingYearLabel;
-		$[4] = state;
-		$[5] = yearLabel;
-		$[6] = t2;
-	} else t2 = $[6];
+		$[5] = checkIcon;
+		$[6] = expandIcon;
+		$[7] = noMatchingYearLabel;
+		$[8] = state;
+		$[9] = yearLabel;
+		$[10] = t2;
+	} else t2 = $[10];
 	let t3;
-	if ($[7] !== t1 || $[8] !== t2) {
+	if ($[11] !== t1 || $[12] !== t2) {
 		t3 = /* @__PURE__ */ jsxs("div", {
 			ref: containerRef,
 			className: temporal_module_default.navigation,
 			children: [t1, t2]
 		});
-		$[7] = t1;
-		$[8] = t2;
-		$[9] = t3;
-	} else t3 = $[9];
+		$[11] = t1;
+		$[12] = t2;
+		$[13] = t3;
+	} else t3 = $[13];
 	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-year.d.ts

@@ -1,6 +1,7 @@
 import { type ReactNode, type RefObject } from "react";
+import type { CalendarNavigationIcons } from "./calendar-navigation.tsx";
 import { type CalendarNavigationState } from "./calendar-state.ts";
-export type CalendarYearProps = Readonly<{
+export type CalendarYearProps = CalendarNavigationIcons & Readonly<{
     state: CalendarNavigationState;
     /** Holds the popup, so it stays inside the calendar's own popover. */
     container: RefObject<HTMLDivElement | null>;
@@ -15,6 +16,6 @@ export type CalendarYearProps = Readonly<{
  * and filtered by typing.
  *
  * @example
- * <CalendarYear state={state} container={containerRef} label="Year" noMatchLabel="No matching year." />
+ * <CalendarYear state={state} container={containerRef} label="Year" noMatchLabel="No matching year." checkIcon={<CheckIcon />} />
  */
-export declare const CalendarYear: ({ state, container, label, noMatchLabel, }: CalendarYearProps) => ReactNode;
+export declare const CalendarYear: ({ state, container, label, noMatchLabel, checkIcon, expandIcon, }: CalendarYearProps) => ReactNode;

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

@@ -1,13 +1,10 @@
-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 { useEffectEvent, useLayoutEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffectEvent, useLayoutEffect, useRef, useState } from "react";
 import { Combobox } from "@base-ui/react/combobox";
 import { useVirtualizer } from "@tanstack/react-virtual";
 // src/lib/calendar/calendar-year.tsx
@@ -34,11 +31,11 @@ var useYearRows = (count, list) => {
 * and filtered by typing.
 *
 * @example
-* <CalendarYear state={state} container={containerRef} label="Year" noMatchLabel="No matching year." />
+* <CalendarYear state={state} container={containerRef} label="Year" noMatchLabel="No matching year." checkIcon={<CheckIcon />} />
 */
 var CalendarYear = (t0) => {
-	const $ = c(74);
-	const { state, container, label, noMatchLabel } = t0;
+	const $ = c(72);
+	const { state, container, label, noMatchLabel, checkIcon, expandIcon } = t0;
 	const locale = useLocale();
 	const { ref, collisionPadding } = usePopupEdgePadding();
 	const inputRef = useRef(null);
@@ -131,83 +128,70 @@ var CalendarYear = (t0) => {
 		$[19] = t13;
 	} else t13 = $[19];
 	let t14;
-	if ($[20] !== open) {
-		t14 = (event_0) => {
-			event_0.preventDefault();
-			event_0.stopPropagation();
-			inputRef.current?.focus();
-			setOpen(!open);
-		};
-		$[20] = open;
-		$[21] = t14;
-	} else t14 = $[21];
-	let t15;
-	if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
-		t15 = /* @__PURE__ */ jsx(Icon, {
-			svg: SvgExpandMore,
-			label: ""
-		});
-		$[22] = t15;
-	} else t15 = $[22];
-	let t16;
-	if ($[23] !== t14) {
-		t16 = /* @__PURE__ */ jsx(Combobox.Icon, {
+	if ($[20] !== expandIcon || $[21] !== open) {
+		t14 = expandIcon !== void 0 && /* @__PURE__ */ jsx(Combobox.Icon, {
 			className: temporal_module_default.navChevron,
-			onMouseDown: t14,
-			children: t15
+			onMouseDown: (event_0) => {
+				event_0.preventDefault();
+				event_0.stopPropagation();
+				inputRef.current?.focus();
+				setOpen(!open);
+			},
+			children: expandIcon
 		});
-		$[23] = t14;
-		$[24] = t16;
-	} else t16 = $[24];
-	let t17;
-	if ($[25] !== t13 || $[26] !== t16) {
-		t17 = /* @__PURE__ */ jsxs(Combobox.InputGroup, {
+		$[20] = expandIcon;
+		$[21] = open;
+		$[22] = t14;
+	} else t14 = $[22];
+	let t15;
+	if ($[23] !== t13 || $[24] !== t14) {
+		t15 = /* @__PURE__ */ jsxs(Combobox.InputGroup, {
 			className: temporal_module_default.navControl,
-			children: [t13, t16]
+			children: [t13, t14]
 		});
-		$[25] = t13;
-		$[26] = t16;
-		$[27] = t17;
-	} else t17 = $[27];
+		$[23] = t13;
+		$[24] = t14;
+		$[25] = t15;
+	} else t15 = $[25];
+	const t16 = Combobox;
+	const t17 = temporal_module_default;
 	const t18 = Combobox;
 	const t19 = temporal_module_default;
-	const t20 = Combobox;
-	const t21 = temporal_module_default;
-	const t22 = 4;
-	const t23 = Combobox;
-	const t24 = temporal_module_default;
-	let t25;
-	if ($[28] !== noMatchLabel) {
-		t25 = /* @__PURE__ */ jsx(Combobox.Empty, {
+	const t20 = 4;
+	const t21 = Combobox;
+	const t22 = temporal_module_default;
+	let t23;
+	if ($[26] !== noMatchLabel) {
+		t23 = /* @__PURE__ */ jsx(Combobox.Empty, {
 			className: temporal_module_default.yearEmpty,
 			children: noMatchLabel
 		});
-		$[28] = noMatchLabel;
-		$[29] = t25;
-	} else t25 = $[29];
-	const t26 = Combobox;
-	const t27 = temporal_module_default;
-	const t28 = `${totalSize}px`;
-	let t29;
-	if ($[30] !== t28) {
-		t29 = { blockSize: t28 };
-		$[30] = t28;
-		$[31] = t29;
-	} else t29 = $[31];
+		$[26] = noMatchLabel;
+		$[27] = t23;
+	} else t23 = $[27];
+	const t24 = Combobox;
+	const t25 = temporal_module_default;
+	const t26 = `${totalSize}px`;
+	let t27;
+	if ($[28] !== t26) {
+		t27 = { blockSize: t26 };
+		$[28] = t26;
+		$[29] = t27;
+	} else t27 = $[29];
+	let t28;
+	if ($[30] !== rows) {
+		t28 = rows.at(0)?.start ?? 0;
+		$[30] = rows;
+		$[31] = t28;
+	} else t28 = $[31];
+	const t29 = `translateY(${t28}px)`;
 	let t30;
-	if ($[32] !== rows) {
-		t30 = rows.at(0)?.start ?? 0;
-		$[32] = rows;
+	if ($[32] !== t29) {
+		t30 = { transform: t29 };
+		$[32] = t29;
 		$[33] = t30;
 	} else t30 = $[33];
-	const t31 = `translateY(${t30}px)`;
-	let t32;
-	if ($[34] !== t31) {
-		t32 = { transform: t31 };
-		$[34] = t31;
-		$[35] = t32;
-	} else t32 = $[35];
-	const t33 = rows.map((row) => {
+	const t31 = rows.map((row) => {
 		const year_2 = matches[row.index];
 		if (year_2 === void 0) return null;
 		return /* @__PURE__ */ jsxs(Combobox.Item, {
@@ -219,92 +203,89 @@ var CalendarYear = (t0) => {
 			children: [/* @__PURE__ */ jsx("span", {
 				className: temporal_module_default.yearIndicator,
 				"aria-hidden": "true",
-				children: /* @__PURE__ */ jsx(Combobox.ItemIndicator, { children: /* @__PURE__ */ jsx(Icon, {
-					svg: SvgCheck,
-					label: ""
-				}) })
+				children: /* @__PURE__ */ jsx(Combobox.ItemIndicator, { children: checkIcon })
 			}), /* @__PURE__ */ jsx("span", {
 				className: temporal_module_default.yearValue,
 				children: yearLabel(year_2)
 			})]
 		}, row.key);
 	});
-	let t34;
-	if ($[36] !== t32 || $[37] !== t33) {
-		t34 = /* @__PURE__ */ jsx("div", {
-			style: t32,
-			children: t33
+	let t32;
+	if ($[34] !== t30 || $[35] !== t31) {
+		t32 = /* @__PURE__ */ jsx("div", {
+			style: t30,
+			children: t31
 		});
+		$[34] = t30;
+		$[35] = t31;
 		$[36] = t32;
-		$[37] = t33;
-		$[38] = t34;
-	} else t34 = $[38];
-	let t35;
-	if ($[39] !== t29 || $[40] !== t34) {
-		t35 = /* @__PURE__ */ jsx("div", {
-			style: t29,
-			children: t34
+	} else t32 = $[36];
+	let t33;
+	if ($[37] !== t27 || $[38] !== t32) {
+		t33 = /* @__PURE__ */ jsx("div", {
+			style: t27,
+			children: t32
 		});
-		$[39] = t29;
-		$[40] = t34;
-		$[41] = t35;
-	} else t35 = $[41];
-	let t36;
-	if ($[42] !== t26.List || $[43] !== t27.yearList || $[44] !== t35) {
-		t36 = /* @__PURE__ */ jsx(t26.List, {
+		$[37] = t27;
+		$[38] = t32;
+		$[39] = t33;
+	} else t33 = $[39];
+	let t34;
+	if ($[40] !== t24.List || $[41] !== t25.yearList || $[42] !== t33) {
+		t34 = /* @__PURE__ */ jsx(t24.List, {
 			ref: setList,
-			className: t27.yearList,
-			children: t35
+			className: t25.yearList,
+			children: t33
 		});
-		$[42] = t26.List;
-		$[43] = t27.yearList;
-		$[44] = t35;
-		$[45] = t36;
-	} else t36 = $[45];
-	let t37;
-	if ($[46] !== t23.Popup || $[47] !== t24.yearPopup || $[48] !== t25 || $[49] !== t36) {
-		t37 = /* @__PURE__ */ jsxs(t23.Popup, {
-			className: t24.yearPopup,
-			children: [t25, t36]
+		$[40] = t24.List;
+		$[41] = t25.yearList;
+		$[42] = t33;
+		$[43] = t34;
+	} else t34 = $[43];
+	let t35;
+	if ($[44] !== t21.Popup || $[45] !== t22.yearPopup || $[46] !== t23 || $[47] !== t34) {
+		t35 = /* @__PURE__ */ jsxs(t21.Popup, {
+			className: t22.yearPopup,
+			children: [t23, t34]
 		});
-		$[46] = t23.Popup;
-		$[47] = t24.yearPopup;
-		$[48] = t25;
-		$[49] = t36;
-		$[50] = t37;
-	} else t37 = $[50];
-	let t38;
-	if ($[51] !== collisionPadding || $[52] !== ref || $[53] !== t20.Positioner || $[54] !== t21.navPositioner || $[55] !== t37) {
-		t38 = /* @__PURE__ */ jsx(t20.Positioner, {
+		$[44] = t21.Popup;
+		$[45] = t22.yearPopup;
+		$[46] = t23;
+		$[47] = t34;
+		$[48] = t35;
+	} else t35 = $[48];
+	let t36;
+	if ($[49] !== collisionPadding || $[50] !== ref || $[51] !== t18.Positioner || $[52] !== t19.navPositioner || $[53] !== t35) {
+		t36 = /* @__PURE__ */ jsx(t18.Positioner, {
 			ref,
-			className: t21.navPositioner,
-			sideOffset: t22,
+			className: t19.navPositioner,
+			sideOffset: t20,
 			collisionPadding,
-			children: t37
+			children: t35
 		});
-		$[51] = collisionPadding;
-		$[52] = ref;
-		$[53] = t20.Positioner;
-		$[54] = t21.navPositioner;
-		$[55] = t37;
-		$[56] = t38;
-	} else t38 = $[56];
-	let t39;
-	if ($[57] !== container || $[58] !== t18.Portal || $[59] !== t19.navPortal || $[60] !== t38) {
-		t39 = /* @__PURE__ */ jsx(t18.Portal, {
+		$[49] = collisionPadding;
+		$[50] = ref;
+		$[51] = t18.Positioner;
+		$[52] = t19.navPositioner;
+		$[53] = t35;
+		$[54] = t36;
+	} else t36 = $[54];
+	let t37;
+	if ($[55] !== container || $[56] !== t16.Portal || $[57] !== t17.navPortal || $[58] !== t36) {
+		t37 = /* @__PURE__ */ jsx(t16.Portal, {
 			container,
-			className: t19.navPortal,
-			children: t38
+			className: t17.navPortal,
+			children: t36
 		});
-		$[57] = container;
-		$[58] = t18.Portal;
-		$[59] = t19.navPortal;
-		$[60] = t38;
-		$[61] = t39;
-	} else t39 = $[61];
-	let t40;
-	if ($[62] !== focused.year || $[63] !== matches || $[64] !== open || $[65] !== t10 || $[66] !== t11 || $[67] !== t12 || $[68] !== t17 || $[69] !== t39 || $[70] !== t5.Root || $[71] !== t9 || $[72] !== yearLabel) {
-		t40 = /* @__PURE__ */ jsxs(t5.Root, {
+		$[55] = container;
+		$[56] = t16.Portal;
+		$[57] = t17.navPortal;
+		$[58] = t36;
+		$[59] = t37;
+	} else t37 = $[59];
+	let t38;
+	if ($[60] !== focused.year || $[61] !== matches || $[62] !== open || $[63] !== t10 || $[64] !== t11 || $[65] !== t12 || $[66] !== t15 || $[67] !== t37 || $[68] !== t5.Root || $[69] !== t9 || $[70] !== yearLabel) {
+		t38 = /* @__PURE__ */ jsxs(t5.Root, {
 			virtualized: t6,
 			items: matches,
 			filter: t7,
@@ -316,22 +297,22 @@ var CalendarYear = (t0) => {
 			onOpenChange: setOpen,
 			onInputValueChange: t11,
 			onOpenChangeComplete: t12,
-			children: [t17, t39]
+			children: [t15, t37]
 		});
-		$[62] = focused.year;
-		$[63] = matches;
-		$[64] = open;
-		$[65] = t10;
-		$[66] = t11;
-		$[67] = t12;
-		$[68] = t17;
-		$[69] = t39;
-		$[70] = t5.Root;
-		$[71] = t9;
-		$[72] = yearLabel;
-		$[73] = t40;
-	} else t40 = $[73];
-	return t40;
+		$[60] = focused.year;
+		$[61] = matches;
+		$[62] = open;
+		$[63] = t10;
+		$[64] = t11;
+		$[65] = t12;
+		$[66] = t15;
+		$[67] = t37;
+		$[68] = t5.Root;
+		$[69] = t9;
+		$[70] = yearLabel;
+		$[71] = t38;
+	} else t38 = $[71];
+	return t38;
 };
 function _temp(year_1) {
 	return String(year_1);