@povio/ui 2.2.9-rc.42 → 2.2.9-rc.45

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

@@ -2,12 +2,12 @@ import { Typography } from "../../../text/Typography/Typography.js";
 import { useScrollableListBox } from "../../../../hooks/useScrollableListBox.js";
 import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { useMemo } from "react";
+import { useMemo, useRef } from "react";
 import { ListBox, ListBoxItem } from "react-aria-components";
 import { today } from "@internationalized/date";
 import { useDateFormatter } from "@react-aria/i18n";
 //#region src/components/inputs/DateTime/shared/YearPicker.tsx
-var YearPicker = ({ state, onSelectionChange }) => {
+var YearPicker = ({ state, onSelectionChange, onDateChange, onCommit, selectedDate }) => {
 	const formatter = useDateFormatter({
 		year: "numeric",
 		timeZone: state.timeZone
@@ -28,20 +28,42 @@ var YearPicker = ({ state, onSelectionChange }) => {
 		if (state.maxValue && year > state.maxValue.year) return true;
 		return false;
 	};
-	const selectedYear = years.findIndex((year) => year.value === state.focusedDate.year);
+	const getSelectedYearIndex = () => {
+		if (selectedDate) {
+			const selectedIndexFromValue = years.findIndex((year) => year.value === selectedDate.year);
+			if (selectedIndexFromValue >= 0) return selectedIndexFromValue;
+		}
+		const focusedYearIndex = years.findIndex((year) => year.value === state.focusedDate.year);
+		if (focusedYearIndex < 0) return null;
+		return focusedYearIndex;
+	};
+	const selectedYearIndex = getSelectedYearIndex();
+	const lastPressedYearIndexRef = useRef(null);
+	const listBoxSelectionProps = {};
+	if (selectedYearIndex !== null) listBoxSelectionProps.selectedKeys = [selectedYearIndex];
+	const parseYearIndexFromKey = (key) => {
+		if (typeof key === "number") return key;
+		if (typeof key === "string") {
+			const parsedIndex = Number.parseInt(key, 10);
+			if (!Number.isNaN(parsedIndex)) return parsedIndex;
+		}
+		return null;
+	};
 	const { ref } = useScrollableListBox();
 	return /* @__PURE__ */ jsx(ListBox, {
 		ref,
 		autoFocus: true,
 		"aria-label": "Year",
 		selectionMode: "single",
-		selectedKeys: [selectedYear],
+		...listBoxSelectionProps,
 		onSelectionChange: (key) => {
 			if (key === "all") return;
-			const index = [...key][0];
-			if (typeof index === "number") {
-				const date = state.focusedDate.set({ year: years[index].value });
-				state.setFocusedDate(date);
+			const selectedKey = [...key][0];
+			const selectedYearIndexValue = parseYearIndexFromKey(selectedKey);
+			if (selectedYearIndexValue !== null && years[selectedYearIndexValue]) {
+				const nextSelectedDate = state.focusedDate.set({ year: years[selectedYearIndexValue].value });
+				state.setFocusedDate(nextSelectedDate);
+				onDateChange?.(nextSelectedDate);
 			}
 			onSelectionChange(key);
 		},
@@ -52,6 +74,18 @@ var YearPicker = ({ state, onSelectionChange }) => {
 				id: index,
 				textValue: year.formatted,
 				isDisabled,
+				onPress: () => {
+					const isSecondConsecutivePress = lastPressedYearIndexRef.current === index;
+					lastPressedYearIndexRef.current = index;
+					const nextSelectedDate = state.focusedDate.set({ year: year.value });
+					state.setFocusedDate(nextSelectedDate);
+					onDateChange?.(nextSelectedDate);
+					if (!isSecondConsecutivePress) return;
+					if (!selectedDate) return;
+					if (selectedYearIndex === null) return;
+					if (index !== selectedYearIndex) return;
+					onCommit?.();
+				},
 				className: clsx("flex px-4 py-2 text-interactive-text-secondary-idle outline-none", "border-elevation-outline-default-1 border-b border-solid bg-elevation-fill-default-1 last:border-b-0", "hover:text-interactive-text-secondary-hover", "selected:bg-interactive-contained-primary-idle selected:text-interactive-text-secondary-idle-inverted", "focus-visible:bg-interactive-contained-primary-focus focus-visible:text-interactive-text-secondary-idle-inverted", isDisabled ? "cursor-default opacity-50" : "cursor-pointer"),
 				children: /* @__PURE__ */ jsx(Typography, {
 					as: "span",

package/dist/components/inputs/Input/NumberInput/NumberInput.js

@@ -165,6 +165,8 @@ var NumberInput = ({ renderStaticInput, ...props }) => {
 			renderStatic: true,
 			onStaticInteract: renderRealInput,
 			inputClassName: props.inputClassName,
+			contentClassName: "pr-0!",
+			trailingClassName: "py-0! pl-0!",
 			wrapContentAndTrailing: true,
 			children: (dataAttributeProps) => /* @__PURE__ */ jsx("input", {
 				type: "text",

package/dist/components/inputs/Input/NumberRangeInput/NumberRangeInput.js

@@ -163,6 +163,8 @@ var NumberRangeInput = ({ renderStaticInput, ...props }) => {
 			isDisabled,
 			className: clsx("group w-full", as === "inline" && "h-full", props.className),
 			inputClassName: props.inputClassName,
+			contentClassName: "pr-0!",
+			trailingClassName: "py-0! pl-0!",
 			contentWrapperClassName: "flex w-full items-center gap-input-gap-input-text-to-elements",
 			dataAttributes,
 			renderStatic: true,

package/dist/components/inputs/Input/TextInput/TextInput.js

@@ -160,6 +160,8 @@ var TextInput = ({ renderStaticInput, ...props }) => {
 			renderStatic: true,
 			onStaticInteract: renderRealInput,
 			inputClassName: props.inputClassName,
+			contentClassName: "pr-0!",
+			trailingClassName: "py-0! pl-0!",
 			wrapContentAndTrailing: true,
 			children: (dataAttributeProps) => /* @__PURE__ */ jsx("input", {
 				ref: inputRef,

package/dist/components/inputs/Inputs/InputItem.d.ts

@@ -18,7 +18,7 @@ declare const componentRegistry: {
     readonly autocomplete: typeof Autocomplete;
     readonly queryAutocomplete: <TFieldValues extends import('react-hook-form').FieldValues, TSelectItem extends import('../../..').SelectItem<any>, TQueryFn extends import('../Selection/Autocomplete/queryAutocomplete.types').QueryFn>({ query, queryParams, queryOptions, queryMap, leadingContent, ...props }: import('../Selection/Autocomplete/queryAutocomplete.types').QueryAutocompleteProps<TFieldValues, TSelectItem, TQueryFn>) => import("react/jsx-runtime").JSX.Element;
     readonly segment: <TFieldValues extends import('react-hook-form').FieldValues, TKey extends import('react-aria').Key = import('react-aria').Key>(props: import('../../..').ControlledSegmentProps<TFieldValues, TKey>) => import("react/jsx-runtime").JSX.Element;
-    readonly datePicker: <TFieldValues extends import('react-hook-form').FieldValues>({ fullIso, minValue, maxValue, renderStaticInput, ...props }: import('../DateTime/DatePicker/DatePicker').ControlledDatePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+    readonly datePicker: <TFieldValues extends import('react-hook-form').FieldValues>({ fullIso, granularity, minValue, maxValue, renderStaticInput, ...props }: import('../DateTime/DatePicker/DatePicker').ControlledDatePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
     readonly dateTimePicker: <TFieldValues extends import('react-hook-form').FieldValues>({ fullIso, renderStaticInput, ...props }: import('../DateTime/DateTimePicker/DateTimePicker').ControlledDateTimePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
     readonly timePicker: <TFieldValues extends import('react-hook-form').FieldValues>({ renderStaticInput, ...props }: import('../DateTime/TimePicker/TimePicker').ControlledTimePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
     readonly dateRangePicker: <TFieldValues extends import('react-hook-form').FieldValues>({ fullIso, minValue, maxValue, renderStaticInput, ...props }: import('../DateTime/DateRangePicker/DateRangePicker').ControlledDateRangePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/Selection/Autocomplete/Autocomplete.js

@@ -94,6 +94,7 @@ function Autocomplete({ renderStaticInput, ...props }) {
 			dataAttributes,
 			renderStatic: true,
 			onStaticInteract: renderRealInput,
+			trailingClassName: "pl-1-5",
 			leadingContent: props.leadingContent && /* @__PURE__ */ jsx("div", {
 				className: "ml-input-side-default flex shrink-0 items-center",
 				children: props.leadingContent

package/dist/components/inputs/Selection/Select/Select.js

@@ -94,6 +94,7 @@ function Select({ renderStaticInput, ...props }) {
 			labelPlacement: "content-row",
 			dataAttributes,
 			renderStatic: true,
+			trailingClassName: "pl-1-5",
 			onStaticInteract: renderRealInput,
 			leadingContent: props.leadingContent && /* @__PURE__ */ jsx("div", {
 				className: "ml-input-side-default flex shrink-0 items-center",

package/dist/components/inputs/Selection/shared/SelectMobile.js

@@ -108,7 +108,8 @@ var SelectMobile = ({ ref, error, showSelectionContent, inputClassName, containe
 						rightContent: /* @__PURE__ */ jsx(FormFieldHeaderClose, { onClose: close }),
 						inputClassName,
 						className: "mb-list-height-title-bottom px-list-side-title",
-						leadingIcon: !hideSearchIcon ? /* @__PURE__ */ jsx(SearchIcon, { className: "size-6" }) : void 0
+						leadingIcon: !hideSearchIcon ? /* @__PURE__ */ jsx(SearchIcon, { className: "size-6" }) : void 0,
+						size: "default"
 					}), /* @__PURE__ */ jsx(SelectListBox, {
 						...props,
 						autoFocus: !isSearchable,

package/dist/components/inputs/Selection/shared/select.context.js

@@ -1,5 +1,5 @@
-import { useDebounceCallback } from "../../../../hooks/useDebounceCallback.js";
 import { useSelectItems } from "./useSelectItems.js";
+import { useDebounceCallback } from "../../../../hooks/useDebounceCallback.js";
 import { jsx } from "react/jsx-runtime";
 import { createContext, use, useCallback, useEffect, useMemo, useRef, useState } from "react";
 //#region src/components/inputs/Selection/shared/select.context.tsx

package/dist/components/inputs/Skeleton/InputFrame.js

@@ -71,7 +71,7 @@ var InputFrame = (props) => {
 	}) : null;
 	const resolvedContentWrapperClassName = contentWrapperClassName ?? inputContentWrapperCva({ as });
 	const contentRow = /* @__PURE__ */ jsxs("div", {
-		className: clsx("group/input-frame flex min-w-0 w-full items-center gap-input-gap-input-text-to-elements pr-0!", as === "inline" && "h-full", inputSizeCva({
+		className: clsx("group/input-frame flex min-w-0 w-full items-center gap-input-gap-input-text-to-elements", as === "inline" && "h-full", inputSizeCva({
 			size,
 			as
 		}), typographySize && typographyCva({ size: typographySize }), contentClassName),
@@ -97,7 +97,7 @@ var InputFrame = (props) => {
 		]
 	});
 	const trailingRow = hasTrailingContent ? /* @__PURE__ */ jsxs("div", {
-		className: clsx("flex items-center gap-input-gap-trailing-elements py-0! pl-0!", inputSizeCva({
+		className: clsx("flex items-center gap-input-gap-trailing-elements", inputSizeCva({
 			size,
 			as
 		}), !isTrailingInteractive && "pointer-events-none", trailingClassName),

package/dist/components/overlays/BottomSheet/BottomSheet.js

@@ -76,10 +76,9 @@ var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = tr
 	return /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsxs(MotionModalOverlay, {
 		isOpen: true,
 		UNSTABLE_portalContainer: portalContainerRef?.current,
-		className: clsx("fixed top-0 left-0 z-10 w-screen", containerClassName),
+		className: clsx("fixed top-0 left-0 z-10 w-screen h-dvh", containerClassName),
 		onOpenChange,
 		isDismissable,
-		style: { height: viewport.height },
 		ref: overlayRef,
 		shouldCloseOnInteractOutside,
 		children: [/* @__PURE__ */ jsx(motion.div, {
@@ -189,7 +188,7 @@ var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = tr
 						initial: { opacity: 0 },
 						exit: { opacity: 0 },
 						ref: setFooterElement,
-						className: clsx("pointer-events-auto absolute z-50 w-full bg-elevation-fill-default-2", "top-(--visual-viewport-height) left-0 translate-y-[calc(-100%-var(--scroll-position,0px))]"),
+						className: clsx("pointer-events-auto absolute z-50 w-full bg-elevation-fill-default-2", "top-[100dvh] left-0 translate-y-[calc(-100%-var(--scroll-position,0px))]"),
 						children: footer
 					})
 				] })

package/dist/components/overlays/Tooltip/TooltipEllipsis.d.ts

@@ -1,6 +1,6 @@
-import { JSX, Ref } from 'react';
+import { JSX, ReactNode, Ref } from 'react';
 export interface TooltipEllipsisProps {
-    text: string;
+    text: ReactNode;
     children: (ref: Ref<HTMLElement> | undefined) => JSX.Element;
     isDisabled?: boolean;
     isNonInteractiveTrigger?: boolean;

package/dist/components/segment/Segment.js

@@ -11,7 +11,7 @@ import { mergeRefs } from "@react-aria/utils";
 import { Controller } from "react-hook-form";
 import { useToggleGroupState } from "react-stately";
 //#region src/components/segment/Segment.tsx
-var SegmentBase = ({ className, items, error, onChange, value, defaultValue, ...rest }) => {
+var SegmentBase = ({ className, items, error, onChange, value, defaultValue, segmentItemClassName, ...rest }) => {
 	const props = {
 		...rest,
 		defaultSelectedKeys: defaultValue ? Array.isArray(defaultValue) ? defaultValue : [defaultValue] : void 0,
@@ -49,6 +49,7 @@ var SegmentBase = ({ className, items, error, onChange, value, defaultValue, ...
 			style: { gridTemplateColumns },
 			children: items.map((item, index) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(SegmentItem, {
 				...item,
+				className: clsx(item.className, segmentItemClassName),
 				isDisabled: item.isDisabled || props.isDisabled,
 				isSelected: state.selectedKeys.has(item.id),
 				onPress: () => {

package/dist/components/segment/SegmentItem.d.ts

@@ -1,2 +1,2 @@
 import { SegmentItem as SegmentItemProps } from './segment.types';
-export declare const SegmentItem: ({ label, icon, id, isDisabled, ...props }: SegmentItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SegmentItem: ({ label, icon, id, isDisabled, className, ...props }: SegmentItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/segment/SegmentItem.js

@@ -4,14 +4,17 @@ import { segmentItemCva } from "./segment.cva.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ToggleButton } from "react-aria-components";
 //#region src/components/segment/SegmentItem.tsx
-var SegmentItem = ({ label, icon, id, isDisabled, ...props }) => {
+var SegmentItem = ({ label, icon, id, isDisabled, className, ...props }) => {
 	const IconComponent = icon;
 	const iconOnly = !!(icon && !label);
 	const segmentItemCva$1 = UIStyle.useCva("segment.itemCva", segmentItemCva);
 	return /* @__PURE__ */ jsxs(ToggleButton, {
 		...props,
 		id,
-		className: segmentItemCva$1({ iconOnly }),
+		className: segmentItemCva$1({
+			iconOnly,
+			className
+		}),
 		isDisabled,
 		children: [icon && /* @__PURE__ */ jsx(IconComponent, { className: "size-6" }), label && /* @__PURE__ */ jsx(Typography, {
 			size: "label-2",

package/dist/components/segment/segment.types.d.ts

@@ -30,6 +30,7 @@ export type SegmentProps<TKey extends Key = Key> = Omit<ToggleButtonGroupProps &
     ref?: Ref<HTMLElement>;
     items: SegmentItem<TKey>[];
     className?: string;
+    segmentItemClassName?: string;
     error?: string;
 } & GroupedSegmentProps<TKey>;
 export type ControlledSegmentProps<TFieldValues extends FieldValues, TKey extends Key = Key> = SegmentProps<TKey> & GroupedSegmentControlProps<TFieldValues, TKey>;

package/dist/config/link.context.js

@@ -1,11 +1,13 @@
 import { jsx } from "react/jsx-runtime";
-import { createContext, use } from "react";
+import { createContext, use, useMemo } from "react";
 //#region src/config/link.context.tsx
 var LinkContext;
 (function(_LinkContext) {
 	const LinkContextInternal = createContext(null);
 	_LinkContext.LinkContextProvider = ({ children, LinkComponent }) => {
-		const value = { LinkComponent };
+		const value = useMemo(() => {
+			return { LinkComponent };
+		}, [LinkComponent]);
 		return /* @__PURE__ */ jsx(LinkContextInternal.Provider, {
 			value,
 			children

package/dist/config/uiConfig.context.d.ts

@@ -34,7 +34,7 @@ export declare namespace UIConfig {
         };
         toggle: Pick<ToggleProps, "variant">;
         slider: Pick<SliderProps, "minValue" | "maxValue">;
-        dateInput: Pick<DatePickerProps, "todayIcon" | "todayIconButtonSize" | "todayIconPlacement" | "shouldForceLeadingZeros" | "disableManualEntry" | "autoFixYear"> & {
+        dateInput: Pick<DatePickerProps, "todayIcon" | "todayIconButtonSize" | "todayIconPlacement" | "shouldForceLeadingZeros" | "disableManualEntry" | "shouldUpdateDateOnMonthYearChange" | "granularity" | "autoFixYear"> & {
             calendarIcon?: ReactElement;
             dateTimeIcon?: ReactElement;
             timeIcon?: ReactElement;

package/dist/config/uiConfig.context.js

@@ -55,7 +55,9 @@ var UIConfig;
 			calendarIcon: /* @__PURE__ */ jsx(CalendarIcon, { className: "size-5" }),
 			dateTimeIcon: /* @__PURE__ */ jsx(DateTimeIcon, { className: "size-5" }),
 			timeIcon: /* @__PURE__ */ jsx(ClockIcon, { className: "size-6 text-interactive-text-secondary-idle" }),
-			setDateValueOnDateSelection: false
+			setDateValueOnDateSelection: false,
+			granularity: "day",
+			shouldUpdateDateOnMonthYearChange: false
 		},
 		actionModal: {
 			titleTypography: {

package/dist/index.js

@@ -69,9 +69,9 @@ import { useLongPressRepeat } from "./hooks/useLongPressRepeat.js";
 import { useScrollableListBox } from "./hooks/useScrollableListBox.js";
 import { DateTimeUtils } from "./utils/date-time.utils.js";
 import { FormField } from "./components/inputs/FormField/FormField.js";
-import { useDebounceCallback } from "./hooks/useDebounceCallback.js";
 import { DatePicker } from "./components/inputs/DateTime/DatePicker/DatePicker.js";
 import { Tag } from "./components/text/Tag/Tag.js";
+import { useDebounceCallback } from "./hooks/useDebounceCallback.js";
 import { useIntersectionObserver } from "./hooks/useIntersectionObserver.js";
 import { TextInput } from "./components/inputs/Input/TextInput/TextInput.js";
 import { Select } from "./components/inputs/Selection/Select/Select.js";

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

@@ -20,16 +20,17 @@ export declare namespace DateTimeUtils {
         minute: number;
     }, locale?: string): string;
     export function formatCalendarDateTimeLocalized(calendarDateTime: Pick<CalendarDateTime, "day" | "month" | "year" | "hour" | "minute">, locale?: string, options?: LocalizedDateFormatOptions): string;
-    export function fromISOtoZonedDateTime(isoString: string): ZonedDateTime;
-    export function fromDateValueToISO(dateValue: DateValue): string;
-    export function fromLocalToZonedDateTime(date: Date): ZonedDateTime;
-    export function fromDateValueToLocal(dateValue: DateValue): Date;
+    export function fromISOtoZonedDateTime(isoString: string, timeZone?: string): ZonedDateTime;
+    export function fromDateValueToISO(dateValue: DateValue, timeZone?: string): string;
+    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): CalendarDateTime;
-    export function formatTextDateToCalendarDateTime(textDate: string | null): CalendarDateTime | null;
+    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,4 +1,5 @@
-import { CalendarDate, CalendarDateTime, DateFormatter, fromDate, getLocalTimeZone, parseAbsolute, parseAbsoluteToLocal } 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) {
@@ -40,6 +41,20 @@ var DateTimeUtils;
 		hourCycle: "h23",
 		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",
+			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;
@@ -114,20 +129,34 @@ var DateTimeUtils;
 		return formatLocalizedDateParts(getDateTimeFormatter(locale, options), normalizedValue.toDate("UTC"), options);
 	}
 	_DateTimeUtils.formatCalendarDateTimeLocalized = formatCalendarDateTimeLocalized;
-	function fromISOtoZonedDateTime(isoString) {
-		return parseAbsoluteToLocal(isoString);
+	function resolveTimeZone(timeZone) {
+		if (timeZone) return timeZone;
+		return getLocalTimeZone();
+	}
+	function fromISOtoZonedDateTime(isoString, timeZone) {
+		return parseAbsolute(isoString, resolveTimeZone(timeZone));
 	}
 	_DateTimeUtils.fromISOtoZonedDateTime = fromISOtoZonedDateTime;
-	function fromDateValueToISO(dateValue) {
-		return dateValue.toDate(getLocalTimeZone()).toISOString();
+	function fromDateValueToISO(dateValue, timeZone) {
+		const resolvedTimeZone = resolveTimeZone(timeZone);
+		return dateValue.toDate(resolvedTimeZone).toISOString();
 	}
 	_DateTimeUtils.fromDateValueToISO = fromDateValueToISO;
-	function fromLocalToZonedDateTime(date) {
-		return fromDate(date, getLocalTimeZone());
+	function fromDateValueToOffsetISO(dateValue, timeZone) {
+		const resolvedTimeZone = resolveTimeZone(timeZone);
+		const date = dateValue.toDate(resolvedTimeZone);
+		const isoString = DateTime.fromJSDate(date, { zone: resolvedTimeZone }).toISO({ includeOffset: true });
+		if (isoString) return isoString;
+		return date.toISOString();
+	}
+	_DateTimeUtils.fromDateValueToOffsetISO = fromDateValueToOffsetISO;
+	function fromLocalToZonedDateTime(date, timeZone) {
+		return fromDate(date, resolveTimeZone(timeZone));
 	}
 	_DateTimeUtils.fromLocalToZonedDateTime = fromLocalToZonedDateTime;
-	function fromDateValueToLocal(dateValue) {
-		return dateValue.toDate(getLocalTimeZone());
+	function fromDateValueToLocal(dateValue, timeZone) {
+		const resolvedTimeZone = resolveTimeZone(timeZone);
+		return dateValue.toDate(resolvedTimeZone);
 	}
 	_DateTimeUtils.fromDateValueToLocal = fromDateValueToLocal;
 	function fromCalendarDateToUTCISO(calendarDate, options = {}) {
@@ -144,19 +173,29 @@ var DateTimeUtils;
 		return calendarDateTime.toDate("UTC").toISOString();
 	}
 	_DateTimeUtils.fromCalendarDateTimeToUTCISO = fromCalendarDateTimeToUTCISO;
-	function fromUTCISOToCalendarDateTime(isoString) {
-		const zonedDateTime = parseAbsolute(isoString, "UTC");
+	function fromUTCISOToCalendarDateTime(isoString, timeZone = "UTC") {
+		const zonedDateTime = parseAbsolute(isoString, timeZone);
 		return new CalendarDateTime(zonedDateTime.year, zonedDateTime.month, zonedDateTime.day, zonedDateTime.hour, zonedDateTime.minute, zonedDateTime.second, zonedDateTime.millisecond);
 	}
 	_DateTimeUtils.fromUTCISOToCalendarDateTime = fromUTCISOToCalendarDateTime;
-	function formatTextDateToCalendarDateTime(textDate) {
+	function formatTextDateToCalendarDateTime(textDate, timeZone, locale) {
 		if (!textDate?.includes("hh")) return null;
 		const datePart = textDate.split(",").at(0)?.trim();
 		if (!datePart) return null;
-		const date = new Date(datePart);
-		if (!date || date.toString() === "Invalid Date") return null;
-		const zonedDateTime = fromDate(date, getLocalTimeZone());
-		return new CalendarDateTime(zonedDateTime.year, zonedDateTime.month, zonedDateTime.day, 0, 0, 0, 0);
+		const resolvedTimeZone = resolveTimeZone(timeZone);
+		const resolvedLocale = locale || Intl.DateTimeFormat().resolvedOptions().locale;
+		const localeDateFormat = getLocaleDateFormat(resolvedLocale);
+		const parseOptions = {
+			zone: resolvedTimeZone,
+			locale: resolvedLocale
+		};
+		let parsedDateTime = DateTime.fromFormat(datePart, localeDateFormat, parseOptions);
+		if (!parsedDateTime.isValid && localeDateFormat.includes("yyyy")) {
+			const shortYearFormat = localeDateFormat.replace("yyyy", "yy");
+			parsedDateTime = DateTime.fromFormat(datePart, shortYearFormat, parseOptions);
+		}
+		if (!parsedDateTime.isValid) return null;
+		return new CalendarDateTime(parsedDateTime.year, parsedDateTime.month, parsedDateTime.day, 0, 0, 0, 0);
 	}
 	_DateTimeUtils.formatTextDateToCalendarDateTime = formatTextDateToCalendarDateTime;
 })(DateTimeUtils || (DateTimeUtils = {}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@povio/ui",
-  "version": "2.2.9-rc.42",
+  "version": "2.2.9-rc.45",
   "type": "module",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -47,9 +47,9 @@
     "react-responsive": "^10.0.1",
     "react-stately": "^3.44.0",
     "react-toastify": "^11.0.5",
-    "tailwindcss": "^4.2.1",
-    "tailwindcss-react-aria-components": "^2.0.1",
-    "zod": "^4.3.5"
+    "tailwindcss": "^4.2.4",
+    "tailwindcss-react-aria-components": "^2.1.0",
+    "zod": "^4.4.3"
   },
   "peerDependencies": {
     "@casl/ability": "^6.7.3",

package/dist/components/inputs/DateTime/shared/dateSegment.utils.js

@@ -1,9 +0,0 @@
-//#region src/components/inputs/DateTime/shared/dateSegment.utils.ts
-var getTimeSegmentValue = (segment, fallbackValue = 0) => {
-	if (!segment) return fallbackValue;
-	const parsedValue = Number.parseInt(segment.text, 10);
-	if (Number.isFinite(parsedValue)) return parsedValue;
-	return Number.isFinite(segment.value) ? segment.value ?? fallbackValue : fallbackValue;
-};
-//#endregion
-export { getTimeSegmentValue };