@povio/ui 3.4.0-rc.9 → 4.0.0-rc.2

package/dist/date-time.utils-Cu9TVj46.d.ts

@@ -0,0 +1,45 @@
+import { CalendarDate, CalendarDateTime, DateValue, ZonedDateTime } from "@internationalized/date";
+//#region src/utils/date-time.utils.d.ts
+declare namespace DateTimeUtils {
+  interface LocalizedDateFormatOptions {
+    shouldForceLeadingZeros?: boolean;
+  }
+  export interface LocalizedDatePart {
+    type: Intl.DateTimeFormatPartTypes;
+    value: string;
+    placeholder: string;
+    isPlaceholder: boolean;
+  }
+  export function getDatePlaceholder(locale?: string, options?: LocalizedDateFormatOptions): string;
+  export function getTimePlaceholder(locale?: string): string;
+  export function getDateTimePlaceholder(locale?: string, options?: LocalizedDateFormatOptions): string;
+  export function getDateRangePlaceholder(locale?: string, options?: LocalizedDateFormatOptions): string;
+  export function formatCalendarDateLocalized(calendarDate: CalendarDate, locale?: string, options?: LocalizedDateFormatOptions): string;
+  export function formatCalendarDatePartsLocalized(calendarDate?: CalendarDate | null, locale?: string, options?: LocalizedDateFormatOptions): LocalizedDatePart[];
+  export function formatCalendarDateTimePartsLocalized(calendarDateTime?: Pick<CalendarDateTime, "day" | "month" | "year" | "hour" | "minute"> | null, locale?: string, options?: LocalizedDateFormatOptions): LocalizedDatePart[];
+  export function formatTimeLocalized(timeValue: {
+    hour: number;
+    minute: number;
+  }, locale?: string, options?: LocalizedDateFormatOptions): string;
+  export function formatTimePartsLocalized(timeValue?: {
+    hour: number;
+    minute: number;
+  } | null, locale?: string, options?: LocalizedDateFormatOptions): LocalizedDatePart[];
+  export function formatCalendarDateTimeLocalized(calendarDateTime: Pick<CalendarDateTime, "day" | "month" | "year" | "hour" | "minute">, locale?: string, options?: LocalizedDateFormatOptions): string;
+  export function fromISOtoZonedDateTime(isoString: string, timeZone?: string): ZonedDateTime;
+  export function fromDateValueToISO(dateValue: DateValue, timeZone?: string): string;
+  export function fromDateValueFieldsToUTCISO(dateValue: DateValue): string;
+  export function getCurrentWallClockCalendarDateTime(): CalendarDateTime;
+  export function fromDateValueToOffsetISO(dateValue: DateValue, timeZone?: string): string;
+  export function fromLocalToZonedDateTime(date: Date, timeZone?: string): ZonedDateTime;
+  export function fromDateValueToLocal(dateValue: DateValue, timeZone?: string): Date;
+  export function fromCalendarDateToUTCISO(calendarDate: CalendarDate, options?: {
+    endOfDay?: boolean;
+  }): string;
+  export function fromUTCISOToCalendarDate(isoString: string): CalendarDate;
+  export function fromCalendarDateTimeToUTCISO(calendarDateTime: CalendarDateTime): string;
+  export function fromUTCISOToCalendarDateTime(isoString: string, timeZone?: string): CalendarDateTime;
+  export {};
+}
+//#endregion
+export { DateTimeUtils as t };

package/dist/date.transforms-DLg-eFcE.js

@@ -0,0 +1,15 @@
+import { parseDate, parseDateTime, parseTime } from "@internationalized/date";
+//#region src/rhf/date.transforms.ts
+const toCalendarDate$1 = (value) => typeof value === "string" ? parseDate(value.slice(0, 10)) : value;
+const toCalendarDateTime$1 = (value) => typeof value === "string" ? parseDateTime(value.replace(/(?:Z|[+-]\d{2}:?\d{2})$/, "")) : value;
+const toTime$1 = (value) => typeof value === "string" ? parseTime(value.slice(11, 23)) : value;
+const toCalendarDateRange = (value) => {
+	if (!value || typeof value !== "object" || !("start" in value) || !("end" in value)) return value;
+	const range = value;
+	return {
+		start: toCalendarDate$1(range.start),
+		end: toCalendarDate$1(range.end)
+	};
+};
+//#endregion
+export { toTime$1 as i, toCalendarDateRange as n, toCalendarDateTime$1 as r, toCalendarDate$1 as t };

package/dist/date.utils-B8_QF9y6.js

@@ -0,0 +1,42 @@
+//#region src/utils/date.utils.ts
+let DateUtils;
+(function(_DateUtils) {
+	const DATE_FORMAT = "dd/MM/yyyy";
+	const DATETIME_FORMAT = "dd/MM/yyyy HH:mm:ss";
+	function formatDate(date, format = DATE_FORMAT) {
+		if (Number.isNaN(date.getTime())) return "Invalid DateTime";
+		const monthShort = new Intl.DateTimeFormat(void 0, { month: "short" }).format(date);
+		const parts = {
+			yyyy: String(date.getFullYear()).padStart(4, "0"),
+			MMM: monthShort,
+			MM: String(date.getMonth() + 1).padStart(2, "0"),
+			M: String(date.getMonth() + 1),
+			dd: String(date.getDate()).padStart(2, "0"),
+			d: String(date.getDate()),
+			HH: String(date.getHours()).padStart(2, "0"),
+			mm: String(date.getMinutes()).padStart(2, "0"),
+			ss: String(date.getSeconds()).padStart(2, "0")
+		};
+		return format.replace(/yyyy|MMM|MM|dd|HH|mm|ss|M|d/gu, (token) => parts[token]);
+	}
+	_DateUtils.formatDate = formatDate;
+	function formatRelativeTime(date, options) {
+		const dateObject = typeof date === "string" ? new Date(date) : date;
+		if (Number.isNaN(dateObject.getTime())) return formatDate(dateObject, DATETIME_FORMAT);
+		const differenceSeconds = (dateObject.getTime() - Date.now()) / 1e3;
+		const units = [
+			["year", 31536e3],
+			["month", 2592e3],
+			["day", 86400],
+			["hour", 3600],
+			["minute", 60],
+			["second", 1]
+		];
+		const [unit, secondsPerUnit] = units.find(([, seconds]) => Math.abs(differenceSeconds) >= seconds) ?? units.at(-1);
+		const value = Math.round(differenceSeconds / secondsPerUnit);
+		return new Intl.RelativeTimeFormat(void 0, options).format(value, unit);
+	}
+	_DateUtils.formatRelativeTime = formatRelativeTime;
+})(DateUtils || (DateUtils = {}));
+//#endregion
+export { DateUtils as t };

package/dist/date.utils-BoQnMRlF.d.ts

@@ -0,0 +1,7 @@
+//#region src/utils/date.utils.d.ts
+declare namespace DateUtils {
+  function formatDate(date: Date, format?: string): string;
+  function formatRelativeTime(date: Date | string, options?: Intl.RelativeTimeFormatOptions): string;
+}
+//#endregion
+export { DateUtils as t };

package/dist/datePickerValue.utils-BxOJpTbb.js

@@ -0,0 +1,223 @@
+import { t as ChevronDown } from "./chevron-down-RksSwG1O.js";
+import { t as ChevronUp } from "./chevron-up-CgEFpORu.js";
+import { t as clsx } from "./clsx-CnD0nOiA.js";
+import { r as $2eb8e6d23f3d0cb0$export$43bb16f9c6d9e3f7 } from "./useControlledState-BMVd3AOQ.js";
+import { _ as $d51706f903be7eab$export$1315d136e6f7581, u as getPlaceholder, y as $7541913c0284d84b$export$4c842f6a241dc825 } from "./staticDateTimeSegments-B9kkwiDz.js";
+import { t as Typography } from "./Typography-AcUd9df8.js";
+import { InlineIconButton } from "./components/inline-icon-button.js";
+import { t as useBreakpoint } from "./useBreakpoint-CDKDB0E2.js";
+import { useEffect, useRef } from "react";
+import { c } from "react/compiler-runtime";
+import { Time } from "@internationalized/date";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTimeFieldState } from "@react-stately/datepicker";
+//#region src/hooks/useLongPressRepeat.ts
+const useLongPressRepeat = (t0) => {
+	const $ = c(10);
+	const { onPress, enabled: t1, interval: t2, timeout: t3 } = t0;
+	const enabled = t1 === void 0 ? true : t1;
+	const interval = t2 === void 0 ? 85 : t2;
+	const timeout = t3 === void 0 ? 500 : t3;
+	const intervalRef = useRef(void 0);
+	let t4;
+	let t5;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = () => () => {
+			clearInterval(intervalRef.current);
+		};
+		t5 = [];
+		$[0] = t4;
+		$[1] = t5;
+	} else {
+		t4 = $[0];
+		t5 = $[1];
+	}
+	useEffect(t4, t5);
+	let t6;
+	if ($[2] !== enabled || $[3] !== interval || $[4] !== onPress || $[5] !== timeout) {
+		t6 = () => {
+			onPress(false);
+			if (!enabled) return;
+			intervalRef.current = setTimeout(() => {
+				onPress(true);
+				intervalRef.current = setInterval(() => {
+					onPress(true);
+				}, interval);
+			}, timeout);
+		};
+		$[2] = enabled;
+		$[3] = interval;
+		$[4] = onPress;
+		$[5] = timeout;
+		$[6] = t6;
+	} else t6 = $[6];
+	const onPressStart = t6;
+	let t7;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = () => {
+			clearInterval(intervalRef.current);
+		};
+		$[7] = t7;
+	} else t7 = $[7];
+	const onPressEnd = t7;
+	let t8;
+	if ($[8] !== onPressStart) {
+		t8 = {
+			onPressStart,
+			onPressEnd
+		};
+		$[8] = onPressStart;
+		$[9] = t8;
+	} else t8 = $[9];
+	return t8;
+};
+//#endregion
+//#region src/components/inputs/DateTime/shared/TimePickerForm.tsx
+const INCREMENT_STEP_SIZE = 5;
+const TimePickerForm = ({ state, datePickerState }) => {
+	const isDesktop = useBreakpoint("md");
+	const { locale } = $2eb8e6d23f3d0cb0$export$43bb16f9c6d9e3f7();
+	const fieldState = useTimeFieldState({
+		locale,
+		defaultValue: datePickerState?.timeValue,
+		onChange: (value) => {
+			datePickerState?.setTimeValue(value ?? new Time(0, 0));
+		},
+		hideTimeZone: true
+	});
+	const ref = useRef(null);
+	const innerState = state ?? fieldState;
+	const { fieldProps } = $7541913c0284d84b$export$4c842f6a241dc825({ "aria-label": "Time Picker" }, innerState, ref);
+	const getAutoFocus = (index) => {
+		if (!isDesktop) return false;
+		return index === innerState.segments.findIndex(({ type }) => [
+			"hour",
+			"minute",
+			"dayPeriod"
+		].includes(type));
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "w-full p-8",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "flex items-center justify-center gap-4",
+				children: innerState.segments.map((segment, i) => /* @__PURE__ */ jsx(TimeSegmentButton, {
+					segment,
+					state: innerState,
+					type: "increment"
+				}, i))
+			}),
+			/* @__PURE__ */ jsx("div", {
+				ref,
+				...fieldProps,
+				className: "flex items-center justify-center gap-4 py-2",
+				children: innerState.segments.map((segment, i) => /* @__PURE__ */ jsx(TimeSegmentInput, {
+					segment,
+					state: innerState,
+					autoFocus: getAutoFocus(i)
+				}, i))
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex items-center justify-center gap-4",
+				children: innerState.segments.map((segment, i) => /* @__PURE__ */ jsx(TimeSegmentButton, {
+					segment,
+					state: innerState,
+					type: "decrement"
+				}, i))
+			})
+		]
+	});
+};
+const TimeSegmentInput = ({ segment, state, autoFocus }) => {
+	const ref = useRef(null);
+	const { segmentProps } = $d51706f903be7eab$export$1315d136e6f7581(segment, state, ref);
+	const isDesktop = useBreakpoint("md");
+	useEffect(() => {
+		if (autoFocus) ref.current?.focus();
+	}, [autoFocus]);
+	if (![
+		"literal",
+		"hour",
+		"minute",
+		"dayPeriod"
+	].includes(segment.type)) return null;
+	if (segment.type === "literal") {
+		if (!showSegmentText(segment.text)) return null;
+		return /* @__PURE__ */ jsx("div", {
+			className: "flex flex-col text-center",
+			ref,
+			children: /* @__PURE__ */ jsx(Typography, {
+				as: "span",
+				variant: "prominent-1",
+				size: "label-2",
+				className: "text-text-default-2",
+				children: segment.text
+			})
+		});
+	}
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex flex-col items-center justify-center gap-2",
+		children: /* @__PURE__ */ jsx("div", {
+			ref,
+			...isDesktop && segmentProps,
+			className: clsx("w-11 rounded-input-rounding-default bg-input-filled-idle py-input-height-extra-small text-center", "font-labels-default text-text-default-3", "border border-input-filled-idle border-solid", "hover:border-interactive-contained-primary-hover", "focus-within:border-interactive-contained-primary-idle focus-within:outline-none"),
+			children: getPlaceholder(segment) ?? segment.text
+		})
+	});
+};
+const TimeSegmentButton = ({ segment, state, type }) => {
+	const stateRef = useRef(state);
+	useEffect(() => {
+		stateRef.current = state;
+	}, [state]);
+	const onPress = (isLongPress) => {
+		if (isLongPress && segment.type === "minute") {
+			const currentValue = stateRef.current.segments.find((item) => item.type === "minute")?.value ?? 0;
+			const normalizedValue = (Math.round((currentValue + (type === "increment" ? INCREMENT_STEP_SIZE : -5)) / INCREMENT_STEP_SIZE) * INCREMENT_STEP_SIZE % 60 + 60) % 60;
+			stateRef.current.setSegment(segment.type, normalizedValue);
+		} else stateRef.current[type](segment.type);
+	};
+	const { onPressStart, onPressEnd } = useLongPressRepeat({
+		onPress,
+		enabled: segment.type !== "dayPeriod",
+		timeout: 300,
+		interval: 300
+	});
+	if (![
+		"literal",
+		"hour",
+		"minute",
+		"dayPeriod"
+	].includes(segment.type)) return null;
+	if (segment.type === "literal") {
+		if (!showSegmentText(segment.text)) return null;
+		return /* @__PURE__ */ jsx("div", {
+			className: "flex shrink-0",
+			children: /* @__PURE__ */ jsx(Typography, {
+				as: "span",
+				variant: "prominent-1",
+				size: "label-2",
+				className: "invisible text-text-default-2",
+				"aria-hidden": true,
+				children: segment.text
+			})
+		});
+	}
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex w-11 select-none items-center justify-center",
+		onContextMenu: (e) => e.preventDefault(),
+		children: /* @__PURE__ */ jsx(InlineIconButton, {
+			label: "",
+			color: "secondary",
+			onPressStart,
+			onPressEnd,
+			icon: type === "increment" ? ChevronUp : ChevronDown
+		})
+	});
+};
+const showSegmentText = (text) => !/[\u2066\u2069]/.test(text);
+//#endregion
+//#region src/components/inputs/DateTime/shared/datePickerValue.utils.ts
+const normalizeDatePickerValue = (value) => value ?? null;
+//#endregion
+export { TimePickerForm as n, useLongPressRepeat as r, normalizeDatePickerValue as t };

package/dist/dialog.cva-5qNq9YfM.js

@@ -0,0 +1,43 @@
+import { n as cva, t as UIOverrides } from "./uiOverrides.context-Bfm2n-n8.js";
+//#region src/components/overlays/Dialog/dialog.cva.ts
+const dialogContentDefinition = UIOverrides.defineConfig({
+	base: [
+		"relative flex flex-col items-center gap-modal-gap-content px-modal-side-mobile py-modal-height-mobile md:px-modal-side-desktop md:py-modal-height-desktop",
+		"w-fit max-w-full [&>*]:max-w-full",
+		"border-elevation-outline-default-1 bg-elevation-fill-default-1 outline-none",
+		"pointer-events-auto"
+	],
+	config: {
+		variants: { aside: {
+			left: "h-screen rounded-none border-r",
+			right: "h-screen rounded-none border-l",
+			center: "rounded-modal-rounding-default border"
+		} },
+		defaultVariants: { aside: "center" }
+	}
+});
+const dialogOverlayDefinition = UIOverrides.defineConfig({
+	base: ["fixed inset-0 z-modal flex h-(--visual-viewport-height) w-screen overflow-y-auto bg-support-overlay"],
+	config: {
+		variants: { aside: {
+			left: "p-0",
+			right: "p-0",
+			center: "p-4"
+		} },
+		defaultVariants: { aside: "center" }
+	}
+});
+const dialogOverlay = cva(dialogOverlayDefinition.base, dialogOverlayDefinition.config);
+const dialogMainDefinition = UIOverrides.defineConfig({
+	base: ["pointer-events-none my-auto flex w-full"],
+	config: {
+		variants: { aside: {
+			left: "entering:animate-drawer-enter-left exiting:animate-drawer-exit-left justify-start",
+			right: "entering:animate-drawer-enter-right exiting:animate-drawer-exit-right justify-end",
+			center: "justify-center"
+		} },
+		defaultVariants: { aside: "center" }
+	}
+});
+//#endregion
+export { dialogOverlayDefinition as i, dialogMainDefinition as n, dialogOverlay as r, dialogContentDefinition as t };