@povio/ui 2.2.9-rc.24 → 2.2.9-rc.26

package/dist/components/inputs/DateTime/DatePicker/DatePicker.d.ts

@@ -3,7 +3,7 @@ import { FocusEvent, Ref } from 'react';
 import { FieldValues } from 'react-hook-form';
 import { DatePickerStateOptions } from 'react-stately';
 import { DatePickerInputHandle } from '../shared/DatePickerInput';
-import { DatePickerTodayIcon, DatePickerTodayIconButtonSize } from '../shared/datePicker.types';
+import { DatePickerTodayIcon, DatePickerTodayIconButtonSize, DatePickerTodayIconPlacement } from '../shared/datePicker.types';
 import { FormFieldProps } from '../../FormField/FormField';
 import { ControlProps } from '../../shared/form.types';
 import { InputVariantProps } from '../../shared/input.cva';
@@ -14,6 +14,7 @@ interface DatePickerBaseProps extends FormFieldProps, InputVariantProps, Omit<Da
     className?: string;
     todayIcon?: DatePickerTodayIcon;
     todayIconButtonSize?: DatePickerTodayIconButtonSize;
+    todayIconPlacement?: DatePickerTodayIconPlacement;
     isDirty?: boolean;
     disableManualEntry?: boolean;
     autoFixYear?: boolean;

package/dist/components/inputs/DateTime/DatePicker/DatePicker.js

@@ -24,7 +24,7 @@ import { useCalendarState, useDatePickerState } from "react-stately";
 var PLACEHOLDER_VALUE = new CalendarDate(2024, 1, 1);
 var DatePickerBase = (props) => {
 	const ui = UIConfig.useConfig();
-	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDirty, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, onChange, onBlur, value, disableDropdown, className, placeholder, inputClassName, as = ui.input.as, hideLabel = ui.input.hideLabel, variant = ui.input.variant, size = ui.input.size, isClearable = ui.input.isClearable, todayIcon = ui.dateInput.todayIcon, todayIconButtonSize = ui.dateInput.todayIconButtonSize, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry, autoFixYear = ui.dateInput.autoFixYear, ...rest } = props;
+	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDirty, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, onChange, onBlur, value, disableDropdown, className, placeholder, inputClassName, as = ui.input.as, hideLabel = ui.input.hideLabel, variant = ui.input.variant, size = ui.input.size, isClearable = ui.input.isClearable, todayIcon = ui.dateInput.todayIcon, todayIconButtonSize = ui.dateInput.todayIconButtonSize, todayIconPlacement = ui.dateInput.todayIconPlacement, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry, autoFixYear = ui.dateInput.autoFixYear, ...rest } = props;
 	const formFieldProps = {
 		error,
 		label,
@@ -144,6 +144,7 @@ var DatePickerBase = (props) => {
 				headerProps,
 				todayIcon,
 				todayIconButtonSize,
+				todayIconPlacement,
 				onOpenDropdown: () => state.toggle(),
 				placeholder,
 				className: inputClassName

package/dist/components/inputs/DateTime/DateRangePicker/DateRangePicker.d.ts

@@ -4,7 +4,7 @@ import { DateValue } from 'react-aria';
 import { FieldValues } from 'react-hook-form';
 import { DateRangePickerStateOptions } from 'react-stately';
 import { DatePickerInputHandle } from '../shared/DatePickerInput';
-import { DatePickerTodayIcon, DatePickerTodayIconButtonSize } from '../shared/datePicker.types';
+import { DatePickerTodayIcon, DatePickerTodayIconButtonSize, DatePickerTodayIconPlacement } from '../shared/datePicker.types';
 import { FormFieldProps } from '../../FormField/FormField';
 import { ControlProps } from '../../shared/form.types';
 import { InputVariantProps } from '../../shared/input.cva';
@@ -16,6 +16,7 @@ interface DateRangePickerBaseProps extends FormFieldProps, InputVariantProps, Om
     className?: string;
     todayIcon?: DatePickerTodayIcon;
     todayIconButtonSize?: DatePickerTodayIconButtonSize;
+    todayIconPlacement?: DatePickerTodayIconPlacement;
     isDirty?: boolean;
     disableManualEntry?: boolean;
     autoFixYear?: boolean;

package/dist/components/inputs/DateTime/DateRangePicker/DateRangePicker.js

@@ -13,7 +13,7 @@ import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
 import { useDebounceCallback } from "../../../../hooks/useDebounceCallback.js";
 import { DateTimeUtils } from "../../../../utils/date-time.utils.js";
 import { RangeCalendar } from "../shared/RangeCalendar.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { Button } from "react-aria-components";
@@ -28,7 +28,7 @@ import { useDateRangePickerState, useRangeCalendarState } from "react-stately";
 var DateRangePickerBase = (props) => {
 	const ui = UIConfig.useConfig();
 	const { t } = useTranslation();
-	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, onBlur, value, disableDropdown, className, hideSidebar, placeholder, inputClassName, hideLabel = ui.input.hideLabel, variant = ui.input.variant, as = ui.input.as, size = ui.input.size, isClearable = ui.input.isClearable, todayIcon = ui.dateInput.todayIcon, todayIconButtonSize = ui.dateInput.todayIconButtonSize, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry, autoFixYear = ui.dateInput.autoFixYear, ...rest } = props;
+	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, onBlur, value, disableDropdown, className, hideSidebar, placeholder, inputClassName, hideLabel = ui.input.hideLabel, variant = ui.input.variant, as = ui.input.as, size = ui.input.size, isClearable = ui.input.isClearable, todayIcon = ui.dateInput.todayIcon, todayIconButtonSize = ui.dateInput.todayIconButtonSize, todayIconPlacement = ui.dateInput.todayIconPlacement, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry, autoFixYear = ui.dateInput.autoFixYear, ...rest } = props;
 	const [validationRangeError, setValidationRangeError] = useState();
 	const datePickerInputRef = useRef(null);
 	const dateRangePickerRef = useMemo(() => ({ get current() {
@@ -489,6 +489,7 @@ var DateRangePickerBase = (props) => {
 				headerProps,
 				todayIcon,
 				todayIconButtonSize,
+				todayIconPlacement,
 				isDirty,
 				disableManualEntry,
 				autoFixYear,
@@ -626,20 +627,23 @@ var DateRangePicker = ({ fullIso = true, minValue, maxValue, renderStaticInput,
 		};
 		const start = formatStaticDate(rawValue?.start ?? null);
 		const end = formatStaticDate(rawValue?.end ?? null);
-		const displayValue = /* @__PURE__ */ jsxs(Fragment, { children: [
-			/* @__PURE__ */ jsx("span", {
-				className: rawValue?.start ? "" : "text-text-default-3",
-				children: rawValue?.start ? start : defaultDatePlaceholder
-			}),
-			/* @__PURE__ */ jsx("span", {
-				className: "pointer-events-none select-none",
-				children: "–"
-			}),
-			/* @__PURE__ */ jsx("span", {
-				className: rawValue?.end ? "" : "text-text-default-3",
-				children: rawValue?.end ? end : defaultDatePlaceholder
-			})
-		] });
+		const displayValue = /* @__PURE__ */ jsxs("div", {
+			className: datePickerInputContentRowCva({ size }),
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: rawValue?.start ? "" : "text-text-default-3",
+					children: rawValue?.start ? start : defaultDatePlaceholder
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "pointer-events-none select-none",
+					children: "–"
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: rawValue?.end ? "" : "text-text-default-3",
+					children: rawValue?.end ? end : defaultDatePlaceholder
+				})
+			]
+		});
 		return /* @__PURE__ */ jsx(StaticInput, {
 			...props,
 			onInteract: (focus) => {

package/dist/components/inputs/DateTime/DateTimePicker/DateTimePicker.d.ts

@@ -3,7 +3,7 @@ import { DateValue } from 'react-aria';
 import { FieldValues } from 'react-hook-form';
 import { DatePickerStateOptions } from 'react-stately';
 import { DatePickerInputHandle } from '../shared/DatePickerInput';
-import { DatePickerTodayIcon, DatePickerTodayIconButtonSize } from '../shared/datePicker.types';
+import { DatePickerTodayIcon, DatePickerTodayIconButtonSize, DatePickerTodayIconPlacement } from '../shared/datePicker.types';
 import { FormFieldProps } from '../../FormField/FormField';
 import { ControlProps } from '../../shared/form.types';
 import { InputVariantProps } from '../../shared/input.cva';
@@ -14,6 +14,7 @@ interface DateTimePickerBaseProps extends FormFieldProps, InputVariantProps, Omi
     isClearable?: boolean;
     todayIcon?: DatePickerTodayIcon;
     todayIconButtonSize?: DatePickerTodayIconButtonSize;
+    todayIconPlacement?: DatePickerTodayIconPlacement;
     isDirty?: boolean;
     disableManualEntry?: boolean;
     autoFixYear?: boolean;

package/dist/components/inputs/DateTime/DateTimePicker/DateTimePicker.js

@@ -21,7 +21,7 @@ import { useCalendarState, useDatePickerState } from "react-stately";
 //#region src/components/inputs/DateTime/DateTimePicker/DateTimePicker.tsx
 var DateTimePickerBase = (props) => {
 	const ui = UIConfig.useConfig();
-	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, onBlur, value, disableDropdown, isTimeOptional, placeholder, inputClassName, hideLabel = ui.input.hideLabel, variant = ui.input.variant, as = ui.input.as, size = ui.input.size, isClearable = ui.input.isClearable, todayIcon = ui.dateInput.todayIcon, todayIconButtonSize = ui.dateInput.todayIconButtonSize, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry, autoFixYear = ui.dateInput.autoFixYear, setDateValueOnDateSelection = ui.dateInput.setDateValueOnDateSelection, ...rest } = props;
+	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, onBlur, value, disableDropdown, isTimeOptional, placeholder, inputClassName, hideLabel = ui.input.hideLabel, variant = ui.input.variant, as = ui.input.as, size = ui.input.size, isClearable = ui.input.isClearable, todayIcon = ui.dateInput.todayIcon, todayIconButtonSize = ui.dateInput.todayIconButtonSize, todayIconPlacement = ui.dateInput.todayIconPlacement, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry, autoFixYear = ui.dateInput.autoFixYear, setDateValueOnDateSelection = ui.dateInput.setDateValueOnDateSelection, ...rest } = props;
 	const formFieldProps = {
 		error,
 		label,
@@ -158,6 +158,7 @@ var DateTimePickerBase = (props) => {
 				headerProps,
 				todayIcon,
 				todayIconButtonSize,
+				todayIconPlacement,
 				isRequired,
 				disableManualEntry,
 				autoFixYear,

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

@@ -1,4 +1,5 @@
 import { DateSegmentItem } from "./DateSegmentItem.js";
+import { getTimeSegmentValue } from "./dateSegment.utils.js";
 import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useEffect, useImperativeHandle, useRef } from "react";
@@ -31,16 +32,8 @@ var DateField = ({ ref, onClearChange, hidePlaceholder, isDisabled, disableManua
 		const isDayFilled = daySegment && !daySegment.isPlaceholder;
 		const isYearEmpty = yearSegment && !(parseInt(yearSegment.text) && yearSegment.text?.length === 4);
 		const isHourEmpty = hourSegment && !parseInt(hourSegment.text);
-		if (minuteSegment && !parseInt(minuteSegment.text)) {
-			let minute = minuteSegment?.value || 0;
-			if (minuteSegment?.text?.length && minuteSegment?.text?.length > 0) minute = parseInt(minuteSegment?.text ?? "00");
-			state.setSegment("minute", minute);
-		}
-		if (isHourEmpty) {
-			let hour = hourSegment?.value || 0;
-			if (hourSegment?.text?.length && hourSegment?.text?.length > 0) hour = parseInt(hourSegment?.text ?? "00");
-			state.setSegment("hour", hour);
-		}
+		if (minuteSegment && !parseInt(minuteSegment.text)) state.setSegment("minute", getTimeSegmentValue(minuteSegment));
+		if (isHourEmpty) state.setSegment("hour", getTimeSegmentValue(hourSegment));
 		if (isMonthFilled && isDayFilled && isYearEmpty) {
 			let year = (/* @__PURE__ */ new Date()).getFullYear();
 			if (yearSegment?.text?.length && yearSegment?.text?.length === 2) year = parseInt(`20${yearSegment?.text}`);

package/dist/components/inputs/DateTime/shared/DatePickerInput.d.ts

@@ -1,6 +1,6 @@
 import { Ref } from 'react';
 import { DatePickerAria } from 'react-aria';
-import { DatePickerTodayIcon, DatePickerTodayIconButtonSize } from './datePicker.types';
+import { DatePickerTodayIcon, DatePickerTodayIconButtonSize, DatePickerTodayIconPlacement } from './datePicker.types';
 import { FormFieldHeaderProps } from '../../FormField/FormFieldHeader';
 import { InputVariantProps } from '../../shared/input.cva';
 export interface DatePickerInputHandle {
@@ -21,6 +21,7 @@ interface DatePickerInputProps extends InputVariantProps {
     headerProps?: FormFieldHeaderProps;
     todayIcon?: DatePickerTodayIcon;
     todayIconButtonSize?: DatePickerTodayIconButtonSize;
+    todayIconPlacement?: DatePickerTodayIconPlacement;
     isDirty?: boolean;
     isRequired?: boolean;
     disableManualEntry?: boolean;
@@ -29,5 +30,5 @@ interface DatePickerInputProps extends InputVariantProps {
     className?: string;
     onOpenDropdown?: () => void;
 }
-export declare const DatePickerInput: ({ ref, as, groupProps, fieldProps, endFieldProps, buttonProps, isDisabled, isInvalid, disableDropdown, variant, size, isDateTime, isClearable, headerProps, todayIcon, todayIconButtonSize, isDirty, isRequired, disableManualEntry, autoFixYear, placeholder, className, onOpenDropdown, ...props }: DatePickerInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DatePickerInput: ({ ref, as, groupProps, fieldProps, endFieldProps, buttonProps, isDisabled, isInvalid, disableDropdown, variant, size, isDateTime, isClearable, headerProps, todayIcon, todayIconButtonSize, todayIconPlacement, isDirty, isRequired, disableManualEntry, autoFixYear, placeholder, className, onOpenDropdown, ...props }: DatePickerInputProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -15,7 +15,7 @@ import { Button } from "react-aria-components";
 import { useFocusVisible, useFocusWithin, useHover } from "react-aria";
 import { getLocalTimeZone, now, toCalendarDateTime, today } from "@internationalized/date";
 //#region src/components/inputs/DateTime/shared/DatePickerInput.tsx
-var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, buttonProps, isDisabled, isInvalid, disableDropdown, variant, size, isDateTime, isClearable, headerProps, todayIcon, todayIconButtonSize = "none", isDirty, isRequired, disableManualEntry, autoFixYear = false, placeholder, className, onOpenDropdown, ...props }) => {
+var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, buttonProps, isDisabled, isInvalid, disableDropdown, variant, size, isDateTime, isClearable, headerProps, todayIcon, todayIconButtonSize = "none", todayIconPlacement = "content", isDirty, isRequired, disableManualEntry, autoFixYear = false, placeholder, className, onOpenDropdown, ...props }) => {
 	const uiConfig = UIConfig.useConfig();
 	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
 	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
@@ -72,6 +72,14 @@ var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, buttonP
 	};
 	const hidePlaceholder = as === "floating" && !fieldProps.value && !isFocused;
 	const todayIconComponent = getDatePickerTodayIcon(todayIcon);
+	const todayIconButton = todayIconComponent ? /* @__PURE__ */ jsx(InlineIconButton, {
+		label: "",
+		icon: todayIconComponent,
+		size: todayIconButtonSize,
+		onPress: onToday,
+		className: "relative z-1 !border-none"
+	}) : null;
+	const shouldRenderTodayIconWithFieldLabel = todayIconPlacement === "fieldLabel";
 	const pickerIcon = isDateTime ? uiConfig.dateInput.dateTimeIcon : uiConfig.dateInput.calendarIcon;
 	return /* @__PURE__ */ jsxs("div", {
 		ref: containerRef,
@@ -101,50 +109,48 @@ var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, buttonP
 				size,
 				as
 			})),
-			children: [as && ["filter", "floating"].includes(as) && headerProps && /* @__PURE__ */ jsx(FormFieldLabel, {
-				as,
-				...headerProps
-			}), /* @__PURE__ */ jsxs("div", {
-				className: datePickerInputContentRowCva({ size }),
-				children: [
-					disableManualEntry && /* @__PURE__ */ jsx(Button, {
-						onPress: onOpenDropdown,
-						className: "absolute inset-0 z-0",
-						isDisabled
-					}),
-					todayIconComponent && /* @__PURE__ */ jsx(InlineIconButton, {
-						label: "",
-						icon: todayIconComponent,
-						size: todayIconButtonSize,
-						onPress: onToday,
-						className: "relative z-1 !border-none"
-					}),
-					disableManualEntry && placeholder && !fieldProps.value ? /* @__PURE__ */ jsx(Typography, {
-						size: "label-1",
-						className: "text-text-default-3",
-						children: placeholder
-					}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(DateField, {
-						ref: dateFieldRef,
-						...fieldProps,
-						isDisabled,
-						isInvalid,
-						onClearChange,
-						hidePlaceholder,
-						disableManualEntry
-					}), endFieldProps && /* @__PURE__ */ jsxs(Fragment, { children: [!((as === "floating" || as === "filter") && hidePlaceholder) && /* @__PURE__ */ jsx("span", {
-						className: clsx("pointer-events-none select-none", isDisabled && "text-interactive-text-secondary-disabled"),
-						children: "–"
-					}), /* @__PURE__ */ jsx(DateField, {
-						ref: endDateFieldRef,
-						...endFieldProps,
-						isDisabled,
-						isInvalid,
-						onClearChange,
-						hidePlaceholder,
-						disableManualEntry
-					})] })] })
-				]
-			})]
+			children: [
+				as && ["filter", "floating"].includes(as) && headerProps && /* @__PURE__ */ jsx(FormFieldLabel, {
+					as,
+					...headerProps
+				}),
+				shouldRenderTodayIconWithFieldLabel && todayIconButton,
+				/* @__PURE__ */ jsxs("div", {
+					className: datePickerInputContentRowCva({ size }),
+					children: [
+						disableManualEntry && /* @__PURE__ */ jsx(Button, {
+							onPress: onOpenDropdown,
+							className: "absolute inset-0 z-0",
+							isDisabled
+						}),
+						!shouldRenderTodayIconWithFieldLabel && todayIconButton,
+						disableManualEntry && placeholder && !fieldProps.value ? /* @__PURE__ */ jsx(Typography, {
+							size: "label-1",
+							className: "text-text-default-3",
+							children: placeholder
+						}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(DateField, {
+							ref: dateFieldRef,
+							...fieldProps,
+							isDisabled,
+							isInvalid,
+							onClearChange,
+							hidePlaceholder,
+							disableManualEntry
+						}), endFieldProps && /* @__PURE__ */ jsxs(Fragment, { children: [!((as === "floating" || as === "filter") && hidePlaceholder) && /* @__PURE__ */ jsx("span", {
+							className: clsx("pointer-events-none select-none", isDisabled && "text-interactive-text-secondary-disabled"),
+							children: "–"
+						}), /* @__PURE__ */ jsx(DateField, {
+							ref: endDateFieldRef,
+							...endFieldProps,
+							isDisabled,
+							isInvalid,
+							onClearChange,
+							hidePlaceholder,
+							disableManualEntry
+						})] })] })
+					]
+				})
+			]
 		}), /* @__PURE__ */ jsxs("div", {
 			className: clsx(inputSizeCva({
 				size,

package/dist/components/inputs/DateTime/shared/datePicker.types.d.ts

@@ -1,3 +1,4 @@
 import { IconButtonProps } from '../../../buttons/IconButton/IconButton';
 export type DatePickerTodayIcon = boolean | IconButtonProps["icon"];
 export type DatePickerTodayIconButtonSize = IconButtonProps["size"];
+export type DatePickerTodayIconPlacement = "content" | "fieldLabel";

package/dist/components/inputs/DateTime/shared/dateSegment.utils.d.ts

@@ -0,0 +1,2 @@
+import { DateSegment } from '@react-stately/datepicker';
+export declare const getTimeSegmentValue: (segment: DateSegment | undefined, fallbackValue?: number) => number;

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

@@ -0,0 +1,9 @@
+//#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 };

package/dist/components/inputs/DateTime/shared/dateSegment.utils.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/inputs/Input/shared/InputContent.js

@@ -4,7 +4,7 @@ import { Loader } from "../../../status/Loader/Loader.js";
 import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
 import { FormFieldLabel } from "../../FormField/FormFieldLabel.js";
 import { InputClear } from "../../shared/InputClear.js";
-import { inputSize } from "../../shared/input.cva.js";
+import { inputContentWrapper, inputSize } from "../../shared/input.cva.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { isValidElement } from "react";
@@ -12,6 +12,7 @@ import { isValidElement } from "react";
 var InputContent = ({ leadingIcon: LeadingIcon, trailingIcon: TrailingIcon, unit, isLoading, isDisabled, action, isClearable, value, onChange, onBlur, children, headerProps, as, size }) => {
 	const typographyCva = UIStyle.useCva("typography.cva", typography);
 	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
+	const inputContentWrapperCva = UIStyle.useCva("input.contentWrapperCva", inputContentWrapper);
 	const isLeadingIconElement = LeadingIcon && isValidElement(LeadingIcon);
 	const isTrailingIconElement = TrailingIcon && isValidElement(TrailingIcon);
 	const showClear = value != null && value !== "" && !isDisabled;
@@ -26,7 +27,7 @@ var InputContent = ({ leadingIcon: LeadingIcon, trailingIcon: TrailingIcon, unit
 				className: clsx(!isLeadingIconElement && "pointer-events-none"),
 				children: isLeadingIconElement ? LeadingIcon : /* @__PURE__ */ jsx(LeadingIcon, { className: "size-6 text-interactive-text-secondary-idle" })
 			}), /* @__PURE__ */ jsxs("div", {
-				className: clsx("flex w-full", as === "floating" && "flex-col", as === "filter" && "gap-input-gap-input-text-to-elements"),
+				className: inputContentWrapperCva({ as }),
 				children: [as && ["filter", "floating"].includes(as) && headerProps && /* @__PURE__ */ jsx(FormFieldLabel, {
 					as,
 					size,

package/dist/components/inputs/Selection/Select/QuerySelect.d.ts

@@ -1,10 +1,10 @@
-import { GroupedSelectControlProps, GroupedSelectProps, SelectItem } from '../shared/select.types';
-import { SelectBaseProps } from '../shared/SelectBase';
+import { DefaultInitialSelectItem, GroupedSelectControlProps, GroupedSelectProps, SelectItem } from '../shared/select.types';
+import { SelectProps } from './Select';
 import { QueryDataType, QueryFn } from '../shared/querySelect.utils';
 import { OmitDiscriminatedUnion } from '../../../../types/common';
 import { Key } from 'react-aria-components';
 import { FieldValues } from 'react-hook-form';
-export type QuerySelectProps<TFieldValues extends FieldValues, TQueryFn extends QueryFn, TKey extends Key = Key> = OmitDiscriminatedUnion<SelectBaseProps<TKey>, "items" | "isLoading" | keyof GroupedSelectProps> & GroupedSelectControlProps<TFieldValues, TKey> & {
+export type QuerySelectProps<TFieldValues extends FieldValues, TQueryFn extends QueryFn, TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>> = OmitDiscriminatedUnion<SelectProps<TKey, TInitialSelectItem>, "items" | "totalItems" | keyof GroupedSelectProps> & GroupedSelectControlProps<TFieldValues, TKey, TInitialSelectItem> & {
     query: TQueryFn;
     queryParams?: Parameters<TQueryFn>[0];
     queryOptions?: Parameters<TQueryFn>[1];

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

@@ -1,10 +1,8 @@
 import { UIConfig } from "../../../../config/uiConfig.context.js";
-import { SelectBase } from "../shared/SelectBase.js";
+import { Select } from "./Select.js";
 import { getQueryItems } from "../shared/querySelect.utils.js";
 import { useQueryAutocomplete } from "../../../../hooks/useQueryAutocomplete.js";
 import { jsx } from "react/jsx-runtime";
-import { mergeRefs } from "@react-aria/utils";
-import { Controller } from "react-hook-form";
 //#region src/components/inputs/Selection/Select/QuerySelect.tsx
 var QuerySelect = ({ query, queryParams, queryOptions, queryMap, ...props }) => {
 	const ui = UIConfig.useConfig();
@@ -15,41 +13,14 @@ var QuerySelect = ({ query, queryParams, queryOptions, queryMap, ...props }) =>
 		mapItems: (data) => getQueryItems(data, queryMap),
 		initialQueryState: props.isInitialQueryDisabled ?? ui.querySelect?.isInitialQueryDisabled
 	});
-	if ("formControl" in props && props.formControl) {
-		const { formControl, ref, isInitialQueryDisabled: _, ...innerProps } = props;
-		return /* @__PURE__ */ jsx(Controller, {
-			control: formControl.control,
-			name: formControl.name,
-			render: ({ field, fieldState: { error, isDirty } }) => /* @__PURE__ */ jsx(SelectBase, {
-				...innerProps,
-				ref: mergeRefs(ref, field.ref),
-				items,
-				isLoading,
-				totalItems,
-				hasLoadMore: hasNextPage,
-				onLoadMore: fetchNextPage,
-				value: field.value,
-				onChange: (value) => {
-					field.onChange(value);
-					field.onBlur?.();
-				},
-				onBlur: field.onBlur,
-				isDirty,
-				isDisabled: field.disabled || props.isDisabled,
-				error: props.error ?? error?.message,
-				onMouseEnter: handleEnableQuery,
-				onFocusCapture: handleEnableQuery
-			})
-		});
-	}
-	const { isInitialQueryDisabled: _, ...restProps } = props;
-	return /* @__PURE__ */ jsx(SelectBase, {
-		...restProps,
+	const { isInitialQueryDisabled: _, ...selectProps } = props;
+	return /* @__PURE__ */ jsx(Select, {
+		...selectProps,
 		items,
 		isLoading,
 		totalItems,
 		hasLoadMore: hasNextPage,
-		onLoadMore: fetchNextPage ? () => void fetchNextPage() : void 0,
+		onLoadMore: fetchNextPage,
 		onMouseEnter: handleEnableQuery,
 		onFocusCapture: handleEnableQuery
 	});

package/dist/components/inputs/shared/input.cva.d.ts

@@ -12,6 +12,11 @@ export declare const inputSize: (props?: ({
 } & ClassProp) | undefined) => string;
 export interface InputSizeProps extends VariantProps<typeof inputSize> {
 }
+export declare const inputContentWrapper: (props?: ({
+    as?: "filter" | "default" | "floating" | "inline" | null | undefined;
+} & ClassProp) | undefined) => string;
+export interface InputContentWrapperProps extends VariantProps<typeof inputContentWrapper> {
+}
 export declare const inputClearClass: (props?: ({
     as?: "filter" | "default" | "floating" | "inline" | null | undefined;
 } & ClassProp) | undefined) => string;

package/dist/components/inputs/shared/input.cva.js

@@ -191,6 +191,15 @@ var inputSize = cva("", {
 		as: "default"
 	}
 });
+var inputContentWrapper = cva("flex w-full", {
+	variants: { as: {
+		default: "",
+		floating: "flex-col",
+		filter: "gap-input-gap-input-text-to-elements",
+		inline: ""
+	} },
+	defaultVariants: { as: "default" }
+});
 var inputClearClass = cva("", {
 	variants: { as: {
 		default: "",
@@ -286,4 +295,4 @@ var useInputCva = () => {
 	};
 };
 //#endregion
-export { inputBase, inputClearClass, inputSide, inputSize, useInputCva };
+export { inputBase, inputClearClass, inputContentWrapper, inputSide, inputSize, useInputCva };

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" | "shouldForceLeadingZeros" | "disableManualEntry" | "autoFixYear"> & {
+        dateInput: Pick<DatePickerProps, "todayIcon" | "todayIconButtonSize" | "todayIconPlacement" | "shouldForceLeadingZeros" | "disableManualEntry" | "autoFixYear"> & {
             calendarIcon?: ReactElement;
             dateTimeIcon?: ReactElement;
             timeIcon?: ReactElement;

package/dist/config/uiConfig.context.js

@@ -48,6 +48,7 @@ var UIConfig;
 		dateInput: {
 			todayIcon: false,
 			todayIconButtonSize: "none",
+			todayIconPlacement: "content",
 			shouldForceLeadingZeros: false,
 			disableManualEntry: false,
 			autoFixYear: false,

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

@@ -11,7 +11,7 @@ import { FormFieldHelperVariantProps } from '../components/inputs/FormField/form
 import { RadioVariantProps } from '../components/inputs/RadioGroup/radio.cva';
 import { SelectPopoverCva } from '../components/inputs/Selection/shared/selectDesktop.cva';
 import { SelectListBoxItemCva } from '../components/inputs/Selection/shared/selectItem.cva';
-import { InputBaseProps, InputClearClassProps, InputSideProps, InputSizeProps } from '../components/inputs/shared/input.cva';
+import { InputBaseProps, InputClearClassProps, InputContentWrapperProps, InputSideProps, InputSizeProps } from '../components/inputs/shared/input.cva';
 import { LabelBaseProps } from '../components/inputs/shared/label.cva';
 import { TooltipWrapperTriggerVariantProps } from '../components/inputs/shared/tooltipWrapper.cva';
 import { ToggleVariantProps } from '../components/inputs/Toggle/toggle.cva';
@@ -71,6 +71,7 @@ export declare namespace UIStyle {
         input: {
             baseCva?: Cva<InputBaseProps>;
             clearClassCva?: Cva<InputClearClassProps>;
+            contentWrapperCva?: Cva<InputContentWrapperProps>;
             sizeCva?: Cva<InputSizeProps>;
             sideCva?: Cva<InputSideProps>;
         };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@povio/ui",
-  "version": "2.2.9-rc.24",
+  "version": "2.2.9-rc.26",
   "type": "module",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",