@povio/ui 2.3.2 → 3.0.0-rc.1

package/dist/components/inputs/DateTime/shared/DateSegmentItem.js

@@ -1,3 +1,4 @@
+import { c } from "react/compiler-runtime";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useRef } from "react";
@@ -12,20 +13,104 @@ var getPlaceholder = (segment) => {
 		default: return segment.placeholder;
 	}
 };
-var DateSegmentItem = ({ segment, state, isDisabled, timePickerOnly, hidePlaceholder }) => {
+var DateSegmentItem = (t0) => {
+	const $ = c(12);
+	const { segment, state, isDisabled, timePickerOnly, hidePlaceholder } = t0;
 	const ref = useRef(null);
 	const { segmentProps } = useDateSegment(segment, state, ref);
-	const isInputEmpty = !state.value;
-	return /* @__PURE__ */ jsx("div", {
-		...segmentProps,
-		ref,
-		className: clsx("box-content rounded-input-rounding-default", isDisabled && isInputEmpty && "text-interactive-text-secondary-disabled", isDisabled && !isInputEmpty && "text-text-default-3", !isDisabled && isInputEmpty && "text-text-default-3 group-focus-within:text-text-default-1", !isDisabled && !isInputEmpty && "text-text-default-1", "focus-within:outline-1 focus-within:outline-interactive-contained-primary-idle focus-within:outline-offset-1", ["hour", "dayPeriod"].includes(segment.type) && !timePickerOnly && "ml-1", hidePlaceholder && "opacity-0"),
-		children: /* @__PURE__ */ jsxs(Fragment, { children: [segment.isPlaceholder && /* @__PURE__ */ jsx("span", {
+	const t1 = segment.type;
+	const t2 = segment.text;
+	let t3;
+	if ($[0] !== segment) {
+		t3 = getPlaceholder(segment);
+		$[0] = segment;
+		$[1] = t3;
+	} else t3 = $[1];
+	const t4 = !state.value;
+	let t5;
+	if ($[2] !== hidePlaceholder || $[3] !== isDisabled || $[4] !== segment.isPlaceholder || $[5] !== segment.text || $[6] !== segment.type || $[7] !== segmentProps || $[8] !== t3 || $[9] !== t4 || $[10] !== timePickerOnly) {
+		t5 = /* @__PURE__ */ jsx(DateSegmentItemView, {
+			ref,
+			segmentProps,
+			type: t1,
+			text: t2,
+			placeholder: t3,
+			isPlaceholder: segment.isPlaceholder,
+			isInputEmpty: t4,
+			isDisabled,
+			timePickerOnly,
+			hidePlaceholder
+		});
+		$[2] = hidePlaceholder;
+		$[3] = isDisabled;
+		$[4] = segment.isPlaceholder;
+		$[5] = segment.text;
+		$[6] = segment.type;
+		$[7] = segmentProps;
+		$[8] = t3;
+		$[9] = t4;
+		$[10] = timePickerOnly;
+		$[11] = t5;
+	} else t5 = $[11];
+	return t5;
+};
+var DateSegmentItemView = (t0) => {
+	const $ = c(19);
+	const { ref, segmentProps, role, type, text, placeholder, isPlaceholder, isInputEmpty, isDisabled, timePickerOnly, hidePlaceholder } = t0;
+	const t1 = role ?? segmentProps?.role;
+	const t2 = isDisabled && isInputEmpty && "text-interactive-text-secondary-disabled";
+	const t3 = isDisabled && !isInputEmpty && "text-text-default-3";
+	const t4 = !isDisabled && isInputEmpty && "text-text-default-3 group-focus-within:text-text-default-1";
+	const t5 = !isDisabled && !isInputEmpty && "text-text-default-1";
+	const t6 = type && (type === "hour" && !timePickerOnly || type === "dayPeriod") && "ml-1";
+	const t7 = hidePlaceholder && "opacity-0";
+	let t8;
+	if ($[0] !== t2 || $[1] !== t3 || $[2] !== t4 || $[3] !== t5 || $[4] !== t6 || $[5] !== t7) {
+		t8 = clsx("box-content rounded-input-rounding-default", t2, t3, t4, t5, "focus-within:outline-1 focus-within:outline-interactive-contained-primary-idle focus-within:outline-offset-1", t6, t7);
+		$[0] = t2;
+		$[1] = t3;
+		$[2] = t4;
+		$[3] = t5;
+		$[4] = t6;
+		$[5] = t7;
+		$[6] = t8;
+	} else t8 = $[6];
+	let t9;
+	if ($[7] !== isPlaceholder || $[8] !== placeholder) {
+		t9 = isPlaceholder && /* @__PURE__ */ jsx("span", {
 			"aria-hidden": "true",
 			className: "pointer-events-none",
-			children: getPlaceholder(segment)
-		}), segment.isPlaceholder ? "" : segment.text] })
-	});
+			children: placeholder
+		});
+		$[7] = isPlaceholder;
+		$[8] = placeholder;
+		$[9] = t9;
+	} else t9 = $[9];
+	const t10 = isPlaceholder ? "" : text;
+	let t11;
+	if ($[10] !== t10 || $[11] !== t9) {
+		t11 = /* @__PURE__ */ jsxs(Fragment, { children: [t9, t10] });
+		$[10] = t10;
+		$[11] = t9;
+		$[12] = t11;
+	} else t11 = $[12];
+	let t12;
+	if ($[13] !== ref || $[14] !== segmentProps || $[15] !== t1 || $[16] !== t11 || $[17] !== t8) {
+		t12 = /* @__PURE__ */ jsx("div", {
+			...segmentProps,
+			role: t1,
+			ref,
+			className: t8,
+			children: t11
+		});
+		$[13] = ref;
+		$[14] = segmentProps;
+		$[15] = t1;
+		$[16] = t11;
+		$[17] = t8;
+		$[18] = t12;
+	} else t12 = $[18];
+	return t12;
 };
 //#endregion
-export { DateSegmentItem, getPlaceholder };
+export { DateSegmentItem, DateSegmentItemView, getPlaceholder };

package/dist/components/inputs/DateTime/shared/DateTimeDialog.js

@@ -1,45 +1,99 @@
-import { UIStyle } from "../../../../config/uiStyle.context.js";
+import { UIOverrides } from "../../../../config/uiOverrides.context.js";
 import { BottomSheet } from "../../../overlays/BottomSheet/BottomSheet.js";
 import { useBreakpoint } from "../../../../hooks/useBreakpoint.js";
-import { popover } from "../../../shared/popover.cva.js";
+import { popoverDefinition } from "../../../shared/popover.cva.js";
+import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import clsx$1 from "clsx";
 import { Dialog, Popover } from "react-aria-components";
 //#region src/components/inputs/DateTime/shared/DateTimeDialog.tsx
-var DateTimeDialog = ({ hideSidebar, children, footer, sidebar, label, isOpen, triggerRef, dialogProps, onOpenChange }) => {
-	const popoverCva = UIStyle.useCva("popover.cva", popover);
+var DateTimeDialog = (t0) => {
+	const $ = c(25);
+	const { hideSidebar, children, footer, sidebar, label, isOpen, triggerRef, dialogProps, onOpenChange } = t0;
+	const popoverCva = UIOverrides.useCva("popover.cva", popoverDefinition);
 	if (useBreakpoint("md")) {
 		if (!isOpen) return null;
-		return /* @__PURE__ */ jsx(Popover, {
-			triggerRef,
-			isOpen,
-			placement: "bottom start",
-			onOpenChange,
-			children: /* @__PURE__ */ jsx(Dialog, {
+		let t1;
+		if ($[0] !== popoverCva) {
+			t1 = clsx$1(popoverCva({}), "flex overflow-hidden");
+			$[0] = popoverCva;
+			$[1] = t1;
+		} else t1 = $[1];
+		const t2 = !hideSidebar && sidebar;
+		let t3;
+		if ($[2] !== children || $[3] !== footer) {
+			t3 = /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-1 flex-col justify-between",
+				children: [children, footer]
+			});
+			$[2] = children;
+			$[3] = footer;
+			$[4] = t3;
+		} else t3 = $[4];
+		let t4;
+		if ($[5] !== t1 || $[6] !== t2 || $[7] !== t3) {
+			t4 = /* @__PURE__ */ jsxs("div", {
+				className: t1,
+				children: [t2, t3]
+			});
+			$[5] = t1;
+			$[6] = t2;
+			$[7] = t3;
+			$[8] = t4;
+		} else t4 = $[8];
+		let t5;
+		if ($[9] !== dialogProps || $[10] !== label || $[11] !== t4) {
+			t5 = /* @__PURE__ */ jsx(Dialog, {
 				...dialogProps,
 				className: "outline-none!",
 				"aria-label": label,
-				children: /* @__PURE__ */ jsxs("div", {
-					className: clsx$1(popoverCva({}), "flex overflow-hidden"),
-					children: [!hideSidebar && sidebar, /* @__PURE__ */ jsxs("div", {
-						className: "flex flex-1 flex-col justify-between",
-						children: [children, footer]
-					})]
-				})
-			})
-		});
+				children: t4
+			});
+			$[9] = dialogProps;
+			$[10] = label;
+			$[11] = t4;
+			$[12] = t5;
+		} else t5 = $[12];
+		let t6;
+		if ($[13] !== isOpen || $[14] !== onOpenChange || $[15] !== t5 || $[16] !== triggerRef) {
+			t6 = /* @__PURE__ */ jsx(Popover, {
+				triggerRef,
+				isOpen,
+				placement: "bottom start",
+				onOpenChange,
+				children: t5
+			});
+			$[13] = isOpen;
+			$[14] = onOpenChange;
+			$[15] = t5;
+			$[16] = triggerRef;
+			$[17] = t6;
+		} else t6 = $[17];
+		return t6;
 	}
-	return /* @__PURE__ */ jsxs(BottomSheet, {
-		label,
-		footer,
-		isOpen,
-		onOpenChange,
-		sheetMarginBottom: 0,
-		isScrollable: true,
-		height: "auto",
-		isDismissable: true,
-		children: [children, !hideSidebar && sidebar]
-	});
+	const t1 = !hideSidebar && sidebar;
+	let t2;
+	if ($[18] !== children || $[19] !== footer || $[20] !== isOpen || $[21] !== label || $[22] !== onOpenChange || $[23] !== t1) {
+		t2 = /* @__PURE__ */ jsxs(BottomSheet, {
+			label,
+			footer,
+			isOpen,
+			onOpenChange,
+			sheetMarginBottom: 0,
+			isScrollable: true,
+			height: "auto",
+			isDismissable: true,
+			children: [children, t1]
+		});
+		$[18] = children;
+		$[19] = footer;
+		$[20] = isOpen;
+		$[21] = label;
+		$[22] = onOpenChange;
+		$[23] = t1;
+		$[24] = t2;
+	} else t2 = $[24];
+	return t2;
 };
 //#endregion
 export { DateTimeDialog };

package/dist/components/inputs/DateTime/shared/DateTimeDialogFooter.js

@@ -1,27 +1,76 @@
 import "../../../../config/i18n.js";
 import { TextButton } from "../../../buttons/TextButton/TextButton.js";
+import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useTranslation } from "react-i18next";
 //#region src/components/inputs/DateTime/shared/DateTimeDialogFooter.tsx
-var DateTimeDialogFooter = ({ isValid = true, isDisabled = false, onTodayPress, onApply }) => {
+var DateTimeDialogFooter = (t0) => {
+	const $ = c(16);
+	const { isValid: t1, isDisabled: t2, onTodayPress, onApply } = t0;
+	const isValid = t1 === void 0 ? true : t1;
+	const isDisabled = t2 === void 0 ? false : t2;
 	const { t } = useTranslation("ui");
-	return /* @__PURE__ */ jsxs("footer", {
-		className: clsx("flex shrink-0 items-center gap-2 bg-elevation-fill-default-2 px-4 py-3 md:border-elevation-outline-default-1 md:border-t md:bg-elevation-fill-default-1 md:py-1-5", onTodayPress ? "justify-between" : "justify-end"),
-		children: [onTodayPress && /* @__PURE__ */ jsx(TextButton, {
+	const t3 = onTodayPress ? "justify-between" : "justify-end";
+	let t4;
+	if ($[0] !== t3) {
+		t4 = clsx("flex shrink-0 items-center gap-2 bg-elevation-fill-default-2 px-4 py-3 md:border-elevation-outline-default-1 md:border-t md:bg-elevation-fill-default-1 md:py-1-5", t3);
+		$[0] = t3;
+		$[1] = t4;
+	} else t4 = $[1];
+	let t5;
+	if ($[2] !== isDisabled || $[3] !== onTodayPress || $[4] !== t) {
+		t5 = onTodayPress && /* @__PURE__ */ jsx(TextButton, {
 			type: "button",
 			color: "primary",
 			isDisabled,
 			onPress: onTodayPress,
-			children: t(($) => $.ui.datePicker.today)
-		}), /* @__PURE__ */ jsx(TextButton, {
+			children: t(_temp)
+		});
+		$[2] = isDisabled;
+		$[3] = onTodayPress;
+		$[4] = t;
+		$[5] = t5;
+	} else t5 = $[5];
+	const t6 = !isValid;
+	let t7;
+	if ($[6] !== t) {
+		t7 = t(_temp2);
+		$[6] = t;
+		$[7] = t7;
+	} else t7 = $[7];
+	let t8;
+	if ($[8] !== onApply || $[9] !== t6 || $[10] !== t7) {
+		t8 = /* @__PURE__ */ jsx(TextButton, {
 			type: "button",
 			color: "secondary",
 			onPress: onApply,
-			isDisabled: !isValid,
-			children: t(($) => $.ui.datePicker.save)
-		})]
-	});
+			isDisabled: t6,
+			children: t7
+		});
+		$[8] = onApply;
+		$[9] = t6;
+		$[10] = t7;
+		$[11] = t8;
+	} else t8 = $[11];
+	let t9;
+	if ($[12] !== t4 || $[13] !== t5 || $[14] !== t8) {
+		t9 = /* @__PURE__ */ jsxs("footer", {
+			className: t4,
+			children: [t5, t8]
+		});
+		$[12] = t4;
+		$[13] = t5;
+		$[14] = t8;
+		$[15] = t9;
+	} else t9 = $[15];
+	return t9;
 };
+function _temp($) {
+	return $.ui.datePicker.today;
+}
+function _temp2($_0) {
+	return $_0.ui.datePicker.save;
+}
 //#endregion
 export { DateTimeDialogFooter };

package/dist/components/inputs/DateTime/shared/MonthPicker.js

@@ -1,15 +1,24 @@
 import { Typography } from "../../../text/Typography/Typography.js";
+import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useRef } from "react";
 import { ListBox, ListBoxItem } from "react-aria-components";
 import { useDateFormatter } from "@react-aria/i18n";
 //#region src/components/inputs/DateTime/shared/MonthPicker.tsx
-var MonthPicker = ({ state, onSelectionChange, onDateChange, onCommit, selectedDate }) => {
-	const formatter = useDateFormatter({
-		month: "long",
-		timeZone: state.timeZone
-	});
+var MonthPicker = (t0) => {
+	const $ = c(15);
+	const { state, onSelectionChange, onDateChange, onCommit, selectedDate } = t0;
+	let t1;
+	if ($[0] !== state.timeZone) {
+		t1 = {
+			month: "long",
+			timeZone: state.timeZone
+		};
+		$[0] = state.timeZone;
+		$[1] = t1;
+	} else t1 = $[1];
+	const formatter = useDateFormatter(t1);
 	const numMonths = state.focusedDate.calendar.getMonthsInYear(state.focusedDate);
 	const getMonths = () => {
 		const months = [];
@@ -24,67 +33,103 @@ var MonthPicker = ({ state, onSelectionChange, onDateChange, onCommit, selectedD
 		if (state.maxValue && state.focusedDate.set({ month }) > state.maxValue) return true;
 		return false;
 	};
-	const getSelectedMonth = () => {
-		if (!selectedDate) return null;
-		return selectedDate.month;
-	};
-	const selectedMonth = getSelectedMonth();
+	let t2;
+	if ($[2] !== selectedDate) {
+		const getSelectedMonth = () => {
+			if (!selectedDate) return null;
+			return selectedDate.month;
+		};
+		t2 = getSelectedMonth();
+		$[2] = selectedDate;
+		$[3] = t2;
+	} else t2 = $[3];
+	const selectedMonth = t2;
 	const lastPressedMonthRef = useRef(null);
-	const listBoxSelectionProps = {};
-	if (selectedMonth !== null) listBoxSelectionProps.selectedKeys = [selectedMonth];
-	const parseMonthFromKey = (key) => {
-		if (typeof key === "number") return key;
-		if (typeof key === "string") {
-			const parsedMonth = Number.parseInt(key, 10);
-			if (!Number.isNaN(parsedMonth)) return parsedMonth;
-		}
-		return null;
-	};
-	return /* @__PURE__ */ jsx(ListBox, {
-		autoFocus: true,
-		"aria-label": "Month",
-		selectionMode: "single",
-		layout: "grid",
-		...listBoxSelectionProps,
-		onSelectionChange: (key) => {
-			if (key === "all") return;
-			const selectedKey = [...key][0];
+	let listBoxSelectionProps;
+	if ($[4] !== selectedMonth) {
+		listBoxSelectionProps = {};
+		if (selectedMonth !== null) listBoxSelectionProps.selectedKeys = [selectedMonth];
+		$[4] = selectedMonth;
+		$[5] = listBoxSelectionProps;
+	} else listBoxSelectionProps = $[5];
+	const parseMonthFromKey = _temp;
+	const T0 = ListBox;
+	const t3 = true;
+	const t4 = "Month";
+	const t5 = "single";
+	const t6 = "grid";
+	let t7;
+	if ($[6] !== onDateChange || $[7] !== onSelectionChange || $[8] !== state) {
+		t7 = (key_0) => {
+			if (key_0 === "all") return;
+			const selectedKey = [...key_0][0];
 			const selectedMonthValue = parseMonthFromKey(selectedKey);
 			if (selectedMonthValue !== null) {
 				const nextSelectedDate = state.focusedDate.set({ month: selectedMonthValue });
 				state.setFocusedDate(nextSelectedDate);
 				onDateChange?.(nextSelectedDate);
 			}
-			onSelectionChange(key);
-		},
-		className: "grid size-full min-h-72 grid-cols-3 grid-rows-4 gap-2 p-3 md:w-80",
-		children: getMonths().map((month, index) => {
-			const monthNumber = index + 1;
-			const isDisabled = isMonthDisabled(monthNumber);
-			return /* @__PURE__ */ jsx(ListBoxItem, {
-				id: monthNumber,
-				textValue: month,
-				isDisabled,
-				onPress: () => {
-					const isSecondConsecutivePress = lastPressedMonthRef.current === monthNumber;
-					lastPressedMonthRef.current = monthNumber;
-					const nextSelectedDate = state.focusedDate.set({ month: monthNumber });
-					state.setFocusedDate(nextSelectedDate);
-					onDateChange?.(nextSelectedDate);
-					if (!isSecondConsecutivePress) return;
-					if (selectedMonth === null) return;
-					if (monthNumber !== selectedMonth) return;
-					onCommit?.();
-				},
-				className: clsx("flex items-center justify-center text-interactive-text-secondary-idle", "rounded-button-rounding-m border border-elevation-outline-default-1 border-solid bg-elevation-fill-default-1", "hover:text-interactive-text-secondary-hover", "selected:border-interactive-contained-primary-idle selected:bg-interactive-contained-primary-idle selected:text-interactive-text-secondary-idle-inverted", "focus:outline-none focus-visible:outline-1 focus-visible:outline-interactive-contained-primary-focus focus-visible:outline-offset-1", isDisabled ? "cursor-default opacity-50" : "cursor-pointer"),
-				children: /* @__PURE__ */ jsx(Typography, {
-					as: "span",
-					size: "label-2",
-					children: month
-				})
-			}, monthNumber);
-		})
+			onSelectionChange(key_0);
+		};
+		$[6] = onDateChange;
+		$[7] = onSelectionChange;
+		$[8] = state;
+		$[9] = t7;
+	} else t7 = $[9];
+	const t8 = "grid size-full min-h-72 grid-cols-3 grid-rows-4 gap-2 p-3 md:w-80";
+	const t9 = getMonths().map((month_0, index) => {
+		const monthNumber = index + 1;
+		const isDisabled = isMonthDisabled(monthNumber);
+		return /* @__PURE__ */ jsx(ListBoxItem, {
+			id: monthNumber,
+			textValue: month_0,
+			isDisabled,
+			onPress: () => {
+				const isSecondConsecutivePress = lastPressedMonthRef.current === monthNumber;
+				lastPressedMonthRef.current = monthNumber;
+				const nextSelectedDate_0 = state.focusedDate.set({ month: monthNumber });
+				state.setFocusedDate(nextSelectedDate_0);
+				onDateChange?.(nextSelectedDate_0);
+				if (!isSecondConsecutivePress) return;
+				if (selectedMonth === null) return;
+				if (monthNumber !== selectedMonth) return;
+				onCommit?.();
+			},
+			className: clsx("flex items-center justify-center text-interactive-text-secondary-idle", "rounded-button-rounding-m border border-elevation-outline-default-1 border-solid bg-elevation-fill-default-1", "hover:text-interactive-text-secondary-hover", "selected:border-interactive-contained-primary-idle selected:bg-interactive-contained-primary-idle selected:text-interactive-text-secondary-idle-inverted", "focus:outline-none focus-visible:outline-1 focus-visible:outline-interactive-contained-primary-focus focus-visible:outline-offset-1", isDisabled ? "cursor-default opacity-50" : "cursor-pointer"),
+			children: /* @__PURE__ */ jsx(Typography, {
+				as: "span",
+				size: "label-2",
+				children: month_0
+			})
+		}, monthNumber);
 	});
+	let t10;
+	if ($[10] !== T0 || $[11] !== listBoxSelectionProps || $[12] !== t7 || $[13] !== t9) {
+		t10 = /* @__PURE__ */ jsx(T0, {
+			autoFocus: t3,
+			"aria-label": t4,
+			selectionMode: t5,
+			layout: t6,
+			...listBoxSelectionProps,
+			onSelectionChange: t7,
+			className: t8,
+			children: t9
+		});
+		$[10] = T0;
+		$[11] = listBoxSelectionProps;
+		$[12] = t7;
+		$[13] = t9;
+		$[14] = t10;
+	} else t10 = $[14];
+	return t10;
 };
+function _temp(key) {
+	if (typeof key === "number") return key;
+	if (typeof key === "string") {
+		const parsedMonth = Number.parseInt(key, 10);
+		if (!Number.isNaN(parsedMonth)) return parsedMonth;
+	}
+	return null;
+}
 //#endregion
 export { MonthPicker };