@povio/ui 3.1.0 → 3.2.0

package/dist/index.js

@@ -77,17 +77,23 @@ import { Checkbox } from "./components/inputs/Checkbox/Checkbox.js";
 import { useLongPressRepeat } from "./hooks/useLongPressRepeat.js";
 import { useScrollableListBox } from "./hooks/useScrollableListBox.js";
 import { DateTimeUtils } from "./utils/date-time.utils.js";
+import { datePickerInputContentRowDefinition } from "./components/inputs/DateTime/shared/datePickerInput.cva.js";
 import { labelDefinition } from "./components/inputs/shared/label.cva.js";
-import { inputBaseDefinition, inputSideDefinition, inputSizeDefinition } from "./components/inputs/shared/input.cva.js";
+import { inputBaseDefinition, inputClearClassDefinition, inputContentWrapperDefinition, inputSideDefinition, inputSizeDefinition } from "./components/inputs/shared/input.cva.js";
 import { popoverDefinition } from "./components/shared/popover.cva.js";
+import { formFieldHeaderDefinition } from "./components/inputs/FormField/formFieldHeader.cva.js";
 import { formFieldHelperDefinition } from "./components/inputs/FormField/formFieldHelper.cva.js";
 import { FormField } from "./components/inputs/FormField/FormField.js";
+import { tooltipWrapperTriggerDefinition } from "./components/inputs/shared/tooltipWrapper.cva.js";
+import { useDebounceCallback } from "./hooks/useDebounceCallback.js";
 import { DatePicker } from "./components/inputs/DateTime/DatePicker/DatePicker.js";
 import { tagDefinition } from "./components/text/Tag/tag.cva.js";
 import { Tag } from "./components/text/Tag/Tag.js";
-import { useDebounceCallback } from "./hooks/useDebounceCallback.js";
+import { selectInputTagsContentWrapperDefinition } from "./components/inputs/Selection/shared/selectInput.cva.js";
+import { createKeyInteractionsHandler, getKeyInteractionAction, useKeyInteractions } from "./hooks/useKeyInteractions.js";
 import { selectListBoxItemDefinition } from "./components/inputs/Selection/shared/selectItem.cva.js";
 import { useIntersectionObserver } from "./hooks/useIntersectionObserver.js";
+import { selectPopoverDefinition } from "./components/inputs/Selection/shared/selectDesktop.cva.js";
 import { TextInput } from "./components/inputs/Input/TextInput/TextInput.js";
 import { Select } from "./components/inputs/Selection/Select/Select.js";
 import { DateRangePicker } from "./components/inputs/DateTime/DateRangePicker/DateRangePicker.js";
@@ -97,13 +103,15 @@ import { RestUtils } from "./utils/rest.utils.js";
 import { FileUtils } from "./utils/file.utils.js";
 import { progressBarDefinition, progressBarFillDefinition, progressBarTrackDefinition, progressBarTrackWrapperDefinition, progressBarValueDefinition } from "./components/inputs/File/shared/progressBar.cva.js";
 import { ProgressBar } from "./components/inputs/File/shared/ProgressBar.js";
-import { fileCardListDefinition, fileUploadDropZoneDefinition } from "./components/inputs/File/shared/fileUpload.cva.js";
+import { fileUploadDropZoneDefinition } from "./components/inputs/File/shared/fileUpload.cva.js";
 import { FileUpload } from "./components/inputs/File/FileUpload.js";
 import { FileUploadContainer } from "./components/inputs/File/FileUploadContainer.js";
 import { inputUploadButtonDefinition, inputUploadDropZoneDefinition } from "./components/inputs/File/shared/inputUploadButton.cva.js";
 import { InputUpload } from "./components/inputs/File/InputUpload.js";
 import { NumberInput } from "./components/inputs/Input/NumberInput/NumberInput.js";
+import { NumberRangeInput } from "./components/inputs/Input/NumberRangeInput/NumberRangeInput.js";
 import { PasswordInput } from "./components/inputs/Input/PasswordInput/PasswordInput.js";
+import { textAreaWrapperDefinition } from "./components/inputs/Input/TextArea/TextArea.cva.js";
 import { TextArea } from "./components/inputs/Input/TextArea/TextArea.js";
 import { Autocomplete } from "./components/inputs/Selection/Autocomplete/Autocomplete.js";
 import { QueryAutocomplete } from "./components/inputs/Selection/Autocomplete/QueryAutocomplete.js";
@@ -112,11 +120,13 @@ import { toggleDefinition } from "./components/inputs/Toggle/toggle.cva.js";
 import { Toggle } from "./components/inputs/Toggle/Toggle.js";
 import { segmentDefinition, segmentItemDefinition } from "./components/segment/segment.cva.js";
 import { Segment } from "./components/segment/Segment.js";
+import { QuerySelect } from "./components/inputs/Selection/Select/QuerySelect.js";
 import { StringUtils } from "./utils/string.utils.js";
+import { ZodUtils } from "./utils/zod.utils.js";
 import { dynamicInputs } from "./helpers/dynamicInputs.js";
 import { Form } from "./components/inputs/Inputs/Form.js";
 import { Inputs } from "./components/inputs/Inputs/Inputs.js";
-import { radioDefinition } from "./components/inputs/RadioGroup/radio.cva.js";
+import { radioContentRowDefinition, radioContentWrapperDefinition, radioDefinition } from "./components/inputs/RadioGroup/radio.cva.js";
 import { RadioGroup } from "./components/inputs/RadioGroup/RadioGroup.js";
 import { accordionChevronDefinition, accordionDefinition, accordionHeadingDefinition, accordionHeadingSubtitleDefinition, accordionHeadingTitleDefinition, accordionIconDefinition, accordionItemDefinition, accordionPanelContentDefinition, accordionPanelDefinition, accordionTriggerDefinition } from "./components/navigation/Accordion/accordion.cva.js";
 import { Accordion } from "./components/navigation/Accordion/Accordion.js";
@@ -165,4 +175,4 @@ import { useSorting } from "./hooks/useSorting.js";
 import { useTableColumnConfig } from "./hooks/useTableColumnConfig.js";
 import { ArrayUtils } from "./utils/array.utils.js";
 import { QueriesUtils } from "./utils/queries.utils.js";
-export { Accordion, ActionModal, Alert, AlignCenterIcon, AlignLeftIcon, AlignLeftRightIcon, AlignRightIcon, ArrayUtils, ArrowDropDownIcon, ArrowDropUpIcon, ArrowLeftIcon, ArrowRightIcon, Autocomplete, BoldIcon, BottomSheet, Breadcrumbs, BulletedListIcon, Button, CalendarIcon, CellText, CheckIcon, Checkbox, CheckboxCheckmarkIcon, CheckboxIndeterminateIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsLeftIcon, ChevronsRightIcon, ClockIcon, CloseIcon, ColumnConfigModal, Confirmation, DatePicker, DateRangePicker, DateTimeIcon, DateTimePicker, DateTimeUtils, DateUtils, DomUtils, Drawer, FileUpload, FileUploadContainer, FileUtils, Form, FormField, HeaderText, HighlightIcon, HighlightOnIcon, HomeIcon, IconButton, InfiniteTable, InfoIcon, InlineIconButton, InputUpload, Inputs, ItalicIcon, Link, LinkContext, LinkIcon, Loader, Menu, MenuIcon, MenuItem, MenuPopover, Modal, NumberInput, NumberedListIcon, ObjectUtils, PaginatedTable, Pagination, PaginationList, PasswordInput, Pill, PillButton, PointerHorizontalIcon, PointerVerticalIcon, ProgressBar, QueriesUtils, QueryAutocomplete, RadioGroup, ResponsivePopover, RestUtils, RoutingUtils, Segment, Select, SendIcon, Slider, SplitButton, Stepper, StrikethroughIcon, StringUtils, Table, Tag, TextArea, TextButton, TextColorIcon, TextInput, ThemeContext, TimePicker, Toast, ToastContainer, Toggle, ToggleButton, Tooltip, TooltipEllipsis, Typography, UIConfig, UIOverrides, UIRouter, UnderlinedIcon, VisibilityIcon, VisibilityOffIcon, accordionChevronDefinition, accordionDefinition, accordionHeadingDefinition, accordionHeadingSubtitleDefinition, accordionHeadingTitleDefinition, accordionIconDefinition, accordionItemDefinition, accordionPanelContentDefinition, accordionPanelDefinition, accordionTriggerDefinition, alertDefinition, breadcrumbChevronDefinition, breadcrumbIconDefinition, breadcrumbItemDefinition, breadcrumbSegmentDefinition, breadcrumbsDefinition, buttonContentDefinition, buttonDefinition, buttonIconSizeDefinition, buttonSizeDefinition, checkboxDefinition, checkboxIconDefinition, compoundMapper, dynamicColumns, dynamicInputs, fileCardListDefinition, fileUploadDropZoneDefinition, formFieldErrorDefinition, formFieldHelperDefinition, inputBaseDefinition, inputSideDefinition, inputSizeDefinition, inputUploadButtonDefinition, inputUploadDropZoneDefinition, isEqual, labelDefinition, linkDefinition, loaderDefinition, loaderWrapperDefinition, logger, menuDefinition, menuItemDefinition, menuPopoverDefinition, menuPopoverWrapperDefinition, modalContentDefinition, modalMainDefinition, modalOverlayDefinition, ns, pillButtonContentDefinition, pillButtonDefinition, popoverDefinition, progressBarDefinition, progressBarFillDefinition, progressBarTrackDefinition, progressBarTrackWrapperDefinition, progressBarValueDefinition, radioDefinition, resources, segmentDefinition, segmentItemDefinition, selectListBoxItemDefinition, statusIconDefinition, statusSeparatorDefinition, stepperDefinition, stepperIconDefinition, stepperItemDefinition, stepperNumberDefinition, stepperSeparatorDefinition, stepperSubtextDefinition, stepperTitleDefinition, tableCellTextDefinition, tableDataDefinition, tableHeadDataDefinition, tableHeadRowDefinition, tableHeaderTextDefinition, tableRowDefinition, tagDefinition, toastDefinition, statusIconDefinition$1 as toastStatusIconDefinition, statusSeparatorDefinition$1 as toastStatusSeparatorDefinition, toggleDefinition, tooltipDefinition, tooltipPointerHorizontalDefinition, tooltipPointerVerticalDefinition, tooltipTextDefinition, typographyDefinition, uiOutlineClass, useAutosave, useBreakpoint, useDebounceCallback, useDeepCompareEffect, useDeepCompareLayoutEffect, useDeepCompareMemo, useFilters, useForm, useFormAutosave, useIntersectionObserver, useLocalStorage, useLongPressRepeat, usePagination, useScrollableListBox, useSorting, useStateAndRef, useTableColumnConfig, useTableNav, useToast, useTranslationMemo };
+export { Accordion, ActionModal, Alert, AlignCenterIcon, AlignLeftIcon, AlignLeftRightIcon, AlignRightIcon, ArrayUtils, ArrowDropDownIcon, ArrowDropUpIcon, ArrowLeftIcon, ArrowRightIcon, Autocomplete, BoldIcon, BottomSheet, Breadcrumbs, BulletedListIcon, Button, CalendarIcon, CellText, CheckIcon, Checkbox, CheckboxCheckmarkIcon, CheckboxIndeterminateIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsLeftIcon, ChevronsRightIcon, ClockIcon, CloseIcon, ColumnConfigModal, Confirmation, DatePicker, DateRangePicker, DateTimeIcon, DateTimePicker, DateTimeUtils, DateUtils, DomUtils, Drawer, FileUpload, FileUploadContainer, FileUtils, Form, FormField, HeaderText, HighlightIcon, HighlightOnIcon, HomeIcon, IconButton, InfiniteTable, InfoIcon, InlineIconButton, InputUpload, Inputs, ItalicIcon, Link, LinkContext, LinkIcon, Loader, Menu, MenuIcon, MenuItem, MenuPopover, Modal, NumberInput, NumberRangeInput, NumberedListIcon, ObjectUtils, PaginatedTable, Pagination, PaginationList, PasswordInput, Pill, PillButton, PointerHorizontalIcon, PointerVerticalIcon, ProgressBar, QueriesUtils, QueryAutocomplete, QuerySelect, RadioGroup, ResponsivePopover, RestUtils, RoutingUtils, Segment, Select, SendIcon, Slider, SplitButton, Stepper, StrikethroughIcon, StringUtils, Table, Tag, TextArea, TextButton, TextColorIcon, TextInput, ThemeContext, TimePicker, Toast, ToastContainer, Toggle, ToggleButton, Tooltip, TooltipEllipsis, Typography, UIConfig, UIOverrides, UIRouter, UnderlinedIcon, VisibilityIcon, VisibilityOffIcon, ZodUtils, accordionChevronDefinition, accordionDefinition, accordionHeadingDefinition, accordionHeadingSubtitleDefinition, accordionHeadingTitleDefinition, accordionIconDefinition, accordionItemDefinition, accordionPanelContentDefinition, accordionPanelDefinition, accordionTriggerDefinition, alertDefinition, breadcrumbChevronDefinition, breadcrumbIconDefinition, breadcrumbItemDefinition, breadcrumbSegmentDefinition, breadcrumbsDefinition, buttonContentDefinition, buttonDefinition, buttonIconSizeDefinition, buttonSizeDefinition, checkboxDefinition, checkboxIconDefinition, compoundMapper, createKeyInteractionsHandler, datePickerInputContentRowDefinition, dynamicColumns, dynamicInputs, fileUploadDropZoneDefinition, formFieldErrorDefinition, formFieldHeaderDefinition, formFieldHelperDefinition, getKeyInteractionAction, inputBaseDefinition, inputClearClassDefinition, inputContentWrapperDefinition, inputSideDefinition, inputSizeDefinition, inputUploadButtonDefinition, inputUploadDropZoneDefinition, isEqual, labelDefinition, linkDefinition, loaderDefinition, loaderWrapperDefinition, logger, menuDefinition, menuItemDefinition, menuPopoverDefinition, menuPopoverWrapperDefinition, modalContentDefinition, modalMainDefinition, modalOverlayDefinition, ns, pillButtonContentDefinition, pillButtonDefinition, popoverDefinition, progressBarDefinition, progressBarFillDefinition, progressBarTrackDefinition, progressBarTrackWrapperDefinition, progressBarValueDefinition, radioContentRowDefinition, radioContentWrapperDefinition, radioDefinition, resources, segmentDefinition, segmentItemDefinition, selectInputTagsContentWrapperDefinition, selectListBoxItemDefinition, selectPopoverDefinition, statusIconDefinition, statusSeparatorDefinition, stepperDefinition, stepperIconDefinition, stepperItemDefinition, stepperNumberDefinition, stepperSeparatorDefinition, stepperSubtextDefinition, stepperTitleDefinition, tableCellTextDefinition, tableDataDefinition, tableHeadDataDefinition, tableHeadRowDefinition, tableHeaderTextDefinition, tableRowDefinition, tagDefinition, textAreaWrapperDefinition, toastDefinition, statusIconDefinition$1 as toastStatusIconDefinition, statusSeparatorDefinition$1 as toastStatusSeparatorDefinition, toggleDefinition, tooltipDefinition, tooltipPointerHorizontalDefinition, tooltipPointerVerticalDefinition, tooltipTextDefinition, tooltipWrapperTriggerDefinition, typographyDefinition, uiOutlineClass, useAutosave, useBreakpoint, useDebounceCallback, useDeepCompareEffect, useDeepCompareLayoutEffect, useDeepCompareMemo, useFilters, useForm, useFormAutosave, useIntersectionObserver, useKeyInteractions, useLocalStorage, useLongPressRepeat, usePagination, useScrollableListBox, useSorting, useStateAndRef, useTableColumnConfig, useTableNav, useToast, useTranslationMemo };

package/dist/tw-ui-plugin.js

@@ -4,9 +4,14 @@ var uiPlugin = plugin(({ addVariant }) => {
 	addVariant("input-filled", [
 		"&:has(input:not(:placeholder-shown))",
 		"&:is(:where(.group\\/input-content):has(:is(input:not(:placeholder-shown))) *)",
+		"&:is(:where(.group\\/input-content)[data-is-filled])",
+		"&:is(:where(.group\\/input-content)[data-is-filled] *)",
+		"&:is(:where(.group\\/input-content)[data-has-selection])",
+		"&:is(:where(.group\\/input-content)[data-has-selection] *)",
 		"&:is(:where(.group\\/select-content)[data-has-selection] *)",
 		"&:is(:where(.group\\/select-content)[data-has-search] *)",
 		"&:is(:where(.group\\/select-content)[data-searchable-focus-within] *)",
+		"&:is(:where(.group\\/radio-group-content)[data-radio-group-content] *)",
 		"&:is(:where(.group\\/date-picker-content)[data-has-selection] *)",
 		"&:is(:where(.group\\/date-picker-content)[data-focus-within] *)"
 	].join(", "));
@@ -16,6 +21,7 @@ var uiPlugin = plugin(({ addVariant }) => {
 		"&:is(:where(.group\\/select-content)[data-disabled] *)",
 		"&:is(:where(.group\\/select-content):has(*:is(input:disabled)) *)",
 		"&:is(:where(.group):has([data-disabled]) *)",
+		"&:is(:where(.group\\/radio-group-content)[data-disabled] *)",
 		"&:is(:where(.group\\/text-area):has(*:is(textarea:disabled)) *)",
 		"&:is(:where(.group):has(*:is(textarea:disabled)) *)",
 		"&:is(:where(.group\\/text-editor):where([data-rac])[data-disabled] *)",

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

@@ -1,15 +1,43 @@
 import { CalendarDate, CalendarDateTime, DateValue, ZonedDateTime } from '@internationalized/date';
 export declare namespace DateTimeUtils {
-    function fromISOtoZonedDateTime(isoString: string, timeZone?: string): ZonedDateTime;
-    function fromDateValueToISO(dateValue: DateValue, timeZone?: string): string;
-    function fromDateValueToOffsetISO(dateValue: DateValue, timeZone?: string): string;
-    function fromLocalToZonedDateTime(date: Date, timeZone?: string): ZonedDateTime;
-    function fromDateValueToLocal(dateValue: DateValue, timeZone?: string): Date;
-    function fromCalendarDateToUTCISO(calendarDate: CalendarDate, options?: {
+    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;
-    function fromUTCISOToCalendarDate(isoString: string): CalendarDate;
-    function fromCalendarDateTimeToUTCISO(calendarDateTime: CalendarDateTime): string;
-    function fromUTCISOToCalendarDateTime(isoString: string, timeZone?: string): CalendarDateTime;
-    function formatTextDateToCalendarDateTime(textDate: string | null, timeZone?: string, locale?: string): CalendarDateTime | null;
+    export function fromUTCISOToCalendarDate(isoString: string): CalendarDate;
+    export function fromCalendarDateTimeToUTCISO(calendarDateTime: CalendarDateTime): string;
+    export function fromUTCISOToCalendarDateTime(isoString: string, timeZone?: string): CalendarDateTime;
+    export function formatTextDateToCalendarDateTime(textDate: string | null, timeZone?: string, locale?: string): CalendarDateTime | null;
+    export {};
 }

package/dist/utils/date-time.utils.js

@@ -1,33 +1,137 @@
-import { CalendarDate, CalendarDateTime, fromDate, getLocalTimeZone, parseAbsolute } from "@internationalized/date";
+import { CalendarDate, CalendarDateTime, DateFormatter, fromDate, getLocalTimeZone, parseAbsolute } from "@internationalized/date";
 import { DateTime } from "luxon";
 //#region src/utils/date-time.utils.ts
 var DateTimeUtils;
 (function(_DateTimeUtils) {
-	function getLocaleDateFormat(locale) {
-		const parts = new Intl.DateTimeFormat(locale, {
+	const DATE_SAMPLE_DATE_UTC = new Date(Date.UTC(2e3, 10, 22));
+	const TIME_SAMPLE_DATE_UTC = new Date(Date.UTC(2e3, 10, 22, 6, 45));
+	const getDayMonthFormat = (shouldForceLeadingZeros = false) => shouldForceLeadingZeros ? "2-digit" : "numeric";
+	const getTimeHourFormat = (shouldForceLeadingZeros = false) => shouldForceLeadingZeros ? "2-digit" : "numeric";
+	const getDatePlaceholderFormatter = (locale, options) => new Intl.DateTimeFormat(locale, {
+		day: getDayMonthFormat(options?.shouldForceLeadingZeros),
+		month: getDayMonthFormat(options?.shouldForceLeadingZeros),
+		year: "numeric"
+	});
+	const getTimePlaceholderFormatter = (locale) => new Intl.DateTimeFormat(locale, {
+		hour: "2-digit",
+		minute: "2-digit"
+	});
+	const getResolvedLocale = (locale) => {
+		if (locale) return locale;
+		return new Intl.DateTimeFormat().resolvedOptions().locale;
+	};
+	const getDateFormatter = (locale, options) => new Intl.DateTimeFormat(getResolvedLocale(locale), {
+		day: getDayMonthFormat(options?.shouldForceLeadingZeros),
+		month: getDayMonthFormat(options?.shouldForceLeadingZeros),
+		year: "numeric",
+		timeZone: "UTC"
+	});
+	const getTimeFormatter = (locale, options) => new DateFormatter(getResolvedLocale(locale), {
+		hour: getTimeHourFormat(options?.shouldForceLeadingZeros),
+		minute: "2-digit",
+		timeZone: "UTC"
+	});
+	const getDateTimeFormatter = (locale, options) => new Intl.DateTimeFormat(getResolvedLocale(locale), {
+		day: getDayMonthFormat(options?.shouldForceLeadingZeros),
+		month: getDayMonthFormat(options?.shouldForceLeadingZeros),
+		year: "numeric",
+		hour: getTimeHourFormat(options?.shouldForceLeadingZeros),
+		minute: "2-digit",
+		timeZone: "UTC"
+	});
+	const getLocaleDateFormat = (locale) => {
+		const sampleDate = new Date(Date.UTC(2e3, 10, 22));
+		return new Intl.DateTimeFormat(locale, {
 			day: "2-digit",
 			month: "2-digit",
-			year: "numeric"
-		}).formatToParts(new Date(2001, 10, 23));
-		let format = "";
-		for (const part of parts) {
-			if (part.type === "day") {
-				format += "dd";
-				continue;
-			}
-			if (part.type === "month") {
-				format += "MM";
-				continue;
-			}
-			if (part.type === "year") {
-				format += "yyyy";
-				continue;
-			}
-			if (part.type === "literal") format += part.value;
+			year: "numeric",
+			timeZone: "UTC"
+		}).formatToParts(sampleDate).map((part) => {
+			if (part.type === "day") return "dd";
+			if (part.type === "month") return "MM";
+			if (part.type === "year") return "yyyy";
+			return part.value;
+		}).join("");
+	};
+	const repeatLocalizedFieldLabel = (type, length, locale) => {
+		const placeholderChar = new Intl.DisplayNames(getResolvedLocale(locale), { type: "dateTimeField" }).of(type)?.trim().charAt(0).toLocaleLowerCase(getResolvedLocale(locale));
+		if (!placeholderChar) return null;
+		return placeholderChar.repeat(length);
+	};
+	const mapTypeToPlaceholder = (type, locale) => {
+		switch (type) {
+			case "day": return repeatLocalizedFieldLabel(type, 2, locale);
+			case "month": return repeatLocalizedFieldLabel(type, 2, locale);
+			case "year": return repeatLocalizedFieldLabel(type, 4, locale);
+			case "hour": return "hh";
+			case "minute": return "mm";
+			default: return null;
 		}
-		if (!format.includes("dd") || !format.includes("MM") || !format.includes("yyyy")) return "dd/MM/yyyy";
-		return format;
+	};
+	const formatPlaceholder = (formatter, sampleDate) => {
+		return formatter.formatToParts(sampleDate).map((part) => mapTypeToPlaceholder(part.type, formatter.resolvedOptions().locale) ?? part.value).join("");
+	};
+	const removeDateSeparatorSpacing = (value) => value.replace(/([./-])\s+(?=[\p{Letter}\p{Number}])/gu, "$1");
+	const formatLocalizedDateParts = (formatter, date) => {
+		return removeDateSeparatorSpacing(formatter.format(date));
+	};
+	const formatLocalizedDatePartList = (formatter, date, isPlaceholder) => {
+		const locale = formatter.resolvedOptions().locale;
+		return formatter.formatToParts(date).map((part) => {
+			const value = part.type === "literal" ? part.value.replace(/([./-])\s+/gu, "$1") : part.value.replace(/\s+/gu, "");
+			return {
+				type: part.type,
+				value,
+				placeholder: mapTypeToPlaceholder(part.type, locale) ?? value,
+				isPlaceholder
+			};
+		});
+	};
+	function getDatePlaceholder(locale, options) {
+		return removeDateSeparatorSpacing(formatPlaceholder(getDatePlaceholderFormatter(locale, options), DATE_SAMPLE_DATE_UTC));
 	}
+	_DateTimeUtils.getDatePlaceholder = getDatePlaceholder;
+	function getTimePlaceholder(locale) {
+		return formatPlaceholder(getTimePlaceholderFormatter(locale), TIME_SAMPLE_DATE_UTC);
+	}
+	_DateTimeUtils.getTimePlaceholder = getTimePlaceholder;
+	function getDateTimePlaceholder(locale, options) {
+		return `${getDatePlaceholder(locale, options)}, ${getTimePlaceholder(locale)}`;
+	}
+	_DateTimeUtils.getDateTimePlaceholder = getDateTimePlaceholder;
+	function getDateRangePlaceholder(locale, options) {
+		const datePlaceholder = getDatePlaceholder(locale, options);
+		return `${datePlaceholder} – ${datePlaceholder}`;
+	}
+	_DateTimeUtils.getDateRangePlaceholder = getDateRangePlaceholder;
+	function formatCalendarDateLocalized(calendarDate, locale, options) {
+		return formatLocalizedDateParts(getDateFormatter(locale, options), calendarDate.toDate("UTC"));
+	}
+	_DateTimeUtils.formatCalendarDateLocalized = formatCalendarDateLocalized;
+	function formatCalendarDatePartsLocalized(calendarDate, locale, options) {
+		return formatLocalizedDatePartList(getDateFormatter(locale, options), calendarDate?.toDate("UTC") ?? DATE_SAMPLE_DATE_UTC, !calendarDate);
+	}
+	_DateTimeUtils.formatCalendarDatePartsLocalized = formatCalendarDatePartsLocalized;
+	function formatCalendarDateTimePartsLocalized(calendarDateTime, locale, options) {
+		const normalizedValue = calendarDateTime ? new CalendarDateTime(calendarDateTime.year, calendarDateTime.month, calendarDateTime.day, calendarDateTime.hour, calendarDateTime.minute) : null;
+		return formatLocalizedDatePartList(getDateTimeFormatter(locale, options), normalizedValue?.toDate("UTC") ?? TIME_SAMPLE_DATE_UTC, !calendarDateTime);
+	}
+	_DateTimeUtils.formatCalendarDateTimePartsLocalized = formatCalendarDateTimePartsLocalized;
+	function formatTimeLocalized(timeValue, locale, options) {
+		const dateTime = new CalendarDateTime(2e3, 11, 22, timeValue.hour, timeValue.minute);
+		return getTimeFormatter(locale, options).format(dateTime.toDate("UTC"));
+	}
+	_DateTimeUtils.formatTimeLocalized = formatTimeLocalized;
+	function formatTimePartsLocalized(timeValue, locale, options) {
+		const normalizedValue = new CalendarDateTime(2e3, 11, 22, timeValue?.hour ?? 6, timeValue?.minute ?? 45);
+		return formatLocalizedDatePartList(getTimeFormatter(locale, options), normalizedValue.toDate("UTC"), !timeValue);
+	}
+	_DateTimeUtils.formatTimePartsLocalized = formatTimePartsLocalized;
+	function formatCalendarDateTimeLocalized(calendarDateTime, locale, options) {
+		const normalizedValue = new CalendarDateTime(calendarDateTime.year, calendarDateTime.month, calendarDateTime.day, calendarDateTime.hour, calendarDateTime.minute);
+		return formatLocalizedDateParts(getDateTimeFormatter(locale, options), normalizedValue.toDate("UTC"));
+	}
+	_DateTimeUtils.formatCalendarDateTimeLocalized = formatCalendarDateTimeLocalized;
 	function resolveTimeZone(timeZone) {
 		if (timeZone) return timeZone;
 		return getLocalTimeZone();
@@ -41,6 +145,16 @@ var DateTimeUtils;
 		return dateValue.toDate(resolvedTimeZone).toISOString();
 	}
 	_DateTimeUtils.fromDateValueToISO = fromDateValueToISO;
+	function fromDateValueFieldsToUTCISO(dateValue) {
+		const dateTimeFields = dateValue;
+		return new CalendarDateTime(dateValue.year, dateValue.month, dateValue.day, dateTimeFields.hour ?? 0, dateTimeFields.minute ?? 0, dateTimeFields.second ?? 0, dateTimeFields.millisecond ?? 0).toDate("UTC").toISOString();
+	}
+	_DateTimeUtils.fromDateValueFieldsToUTCISO = fromDateValueFieldsToUTCISO;
+	function getCurrentWallClockCalendarDateTime() {
+		const date = /* @__PURE__ */ new Date();
+		return new CalendarDateTime(date.getFullYear(), date.getMonth() + 1, date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds());
+	}
+	_DateTimeUtils.getCurrentWallClockCalendarDateTime = getCurrentWallClockCalendarDateTime;
 	function fromDateValueToOffsetISO(dateValue, timeZone) {
 		const resolvedTimeZone = resolveTimeZone(timeZone);
 		const date = dateValue.toDate(resolvedTimeZone);

package/dist/utils/query.utils.d.ts

@@ -0,0 +1,4 @@
+export declare namespace ApiQueryUtils {
+    const DEFAULT_LIMIT = 20;
+    const DEFAULT_PAGE = 1;
+}

package/dist/utils/query.utils.js

@@ -0,0 +1,8 @@
+//#region src/utils/query.utils.ts
+var ApiQueryUtils;
+(function(_ApiQueryUtils) {
+	_ApiQueryUtils.DEFAULT_LIMIT = 20;
+	_ApiQueryUtils.DEFAULT_PAGE = 1;
+})(ApiQueryUtils || (ApiQueryUtils = {}));
+//#endregion
+export { ApiQueryUtils };

package/dist/utils/zod.utils.d.ts

@@ -14,5 +14,7 @@ export declare namespace ZodUtils {
     type ZodType<T> = IsZodType<T, z.ZodBoolean> extends true ? "boolean" : IsZodNumber<T> extends true ? "number" : IsZodEnum<T> extends true ? "enum" : IsZodDateTime<T> extends true ? "datetime" : IsZodUUID<T> extends true ? "uuid" : IsZodString<T> extends true ? "string" : IsZodEmail<T> extends true ? "email" : IsZodDateRange<T> extends true ? "dateRange" : IsZodObject<T> extends true ? "object" : IsZodArray<T> extends true ? "array" : never;
     type ZodTypeSwitch<TZodType extends z.ZodType, T extends Record<ZodType<TZodType> | "unknown", unknown>> = ZodType<TZodType> extends never ? never : T[ZodType<TZodType>];
     const unwrapZodType: (schemaType: z.core.$ZodType) => z.core.$ZodType<unknown, unknown, z.core.$ZodTypeInternals<unknown, unknown>>;
+    /** After stripping optional/nullable wrappers, the inner schema must be a `ZodObject` (e.g. for `.shape`, forms, dynamicInputs). */
+    const unwrapToZodObject: (schema: z.ZodType) => z.ZodObject<any>;
     const isDateRange: (schemaType: z.core.$ZodType) => boolean;
 }

package/dist/utils/zod.utils.js

@@ -7,6 +7,11 @@ var ZodUtils;
 		while (unwrappedType instanceof z.ZodNullable || unwrappedType instanceof z.ZodOptional) unwrappedType = unwrappedType.unwrap();
 		return unwrappedType;
 	};
+	_ZodUtils.unwrapToZodObject = (schema) => {
+		const inner = unwrapZodType(schema);
+		if (!(inner instanceof z.ZodObject)) throw new Error("ZodUtils.unwrapToZodObject: expected a Zod object, or optional/nullable wrapping a Zod object.");
+		return inner;
+	};
 	const hasZodObjectProperty = (schemaType, property, type) => {
 		return property in schemaType.shape && schemaType.shape[property] instanceof z.core.$ZodType && unwrapZodType(schemaType.shape[property]) instanceof type;
 	};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@povio/ui",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "type": "module",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -35,7 +35,7 @@
     "axios": "^1.13.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "i18next": "^25.7.3",
+    "i18next": "25.10.10",
     "loglevel": "^1.9.2",
     "loglevel-plugin-prefix": "^0.8.4",
     "luxon": "^3.7.2",