@povio/ui 2.3.2-rc.1 → 2.3.2-rc.2

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, DatePickerTodayIconPlacement } from '../shared/datePicker.types';
+import { DatePickerTodayIcon, DatePickerTodayIconButtonComponent, DatePickerTodayIconButtonSize, DatePickerTodayIconPlacement } from '../shared/datePicker.types';
 import { FormFieldProps } from '../../FormField/FormField';
 import { ControlProps } from '../../shared/form.types';
 import { InputVariantProps } from '../../shared/input.cva';
@@ -15,6 +15,7 @@ interface DatePickerBaseProps extends FormFieldProps, InputVariantProps, Omit<Da
     className?: string;
     todayIcon?: DatePickerTodayIcon;
     todayIconButtonSize?: DatePickerTodayIconButtonSize;
+    todayIconButtonComponent?: DatePickerTodayIconButtonComponent;
     todayIconPlacement?: DatePickerTodayIconPlacement;
     isDirty?: boolean;
     disableManualEntry?: boolean;

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

@@ -27,7 +27,7 @@ import { useCalendarState, useDatePickerState } from "react-stately";
 var DATE_PICKER_TIME_ZONE = "UTC";
 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: asProp, hideLabel: hideLabelProp, variant: variantProp, size: sizeProp, isClearable: isClearableProp, todayIcon: todayIconProp, todayIconButtonSize: todayIconButtonSizeProp, todayIconPlacement: todayIconPlacementProp, shouldForceLeadingZeros: shouldForceLeadingZerosProp, disableManualEntry: disableManualEntryProp, shouldUpdateDateOnMonthYearChange: shouldUpdateDateOnMonthYearChangeProp, granularity: granularityProp, autoFixYear: autoFixYearProp, fireBlurOnChange: fireBlurOnChangeProp, format, ...rest } = props;
+	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDirty, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, onChange, onBlur, value, disableDropdown, className, placeholder, inputClassName, as: asProp, hideLabel: hideLabelProp, variant: variantProp, size: sizeProp, isClearable: isClearableProp, todayIcon: todayIconProp, todayIconButtonSize: todayIconButtonSizeProp, todayIconButtonComponent: todayIconButtonComponentProp, todayIconPlacement: todayIconPlacementProp, shouldForceLeadingZeros: shouldForceLeadingZerosProp, disableManualEntry: disableManualEntryProp, shouldUpdateDateOnMonthYearChange: shouldUpdateDateOnMonthYearChangeProp, granularity: granularityProp, autoFixYear: autoFixYearProp, fireBlurOnChange: fireBlurOnChangeProp, format, ...rest } = props;
 	const as = asProp ?? ui.input.as;
 	const hideLabel = hideLabelProp ?? ui.input.hideLabel;
 	const variant = variantProp ?? ui.input.variant;
@@ -35,6 +35,7 @@ var DatePickerBase = (props) => {
 	const isClearable = isClearableProp ?? ui.input.isClearable;
 	const todayIcon = todayIconProp ?? ui.dateInput.todayIcon;
 	const todayIconButtonSize = todayIconButtonSizeProp ?? ui.dateInput.todayIconButtonSize;
+	const todayIconButtonComponent = todayIconButtonComponentProp ?? ui.dateInput.todayIconButtonComponent;
 	const todayIconPlacement = todayIconPlacementProp ?? ui.dateInput.todayIconPlacement;
 	const shouldForceLeadingZeros = shouldForceLeadingZerosProp ?? ui.dateInput.shouldForceLeadingZeros;
 	const disableManualEntry = disableManualEntryProp ?? ui.dateInput.disableManualEntry;
@@ -217,6 +218,7 @@ var DatePickerBase = (props) => {
 				headerProps,
 				todayIcon,
 				todayIconButtonSize,
+				todayIconButtonComponent,
 				todayIconPlacement,
 				onOpenDropdown: () => state.toggle(),
 				placeholder,
@@ -342,11 +344,13 @@ var DatePickerInner = (t0) => {
 		const isDisabled = isFormControlDisabled || !!props.isDisabled;
 		const todayIcon = props.todayIcon ?? ui.dateInput.todayIcon;
 		const todayIconButtonSize = props.todayIconButtonSize ?? ui.dateInput.todayIconButtonSize;
+		const todayIconButtonComponent = props.todayIconButtonComponent ?? ui.dateInput.todayIconButtonComponent;
 		const todayIconPlacement = props.todayIconPlacement ?? ui.dateInput.todayIconPlacement;
 		const staticTodayIcon = renderDatePickerTodayIcon(todayIcon, {
 			isDisabled,
 			renderStatic: true,
-			size: todayIconButtonSize
+			size: todayIconButtonSize,
+			todayIconButtonComponent
 		});
 		const disableManualEntry = props.disableManualEntry ?? ui.dateInput.disableManualEntry;
 		const showDropdown = !props.disableDropdown || disableManualEntry;

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, DatePickerTodayIconPlacement } from '../shared/datePicker.types';
+import { DatePickerTodayIcon, DatePickerTodayIconButtonComponent, 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;
+    todayIconButtonComponent?: DatePickerTodayIconButtonComponent;
     todayIconPlacement?: DatePickerTodayIconPlacement;
     isDirty?: boolean;
     disableManualEntry?: boolean;

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

@@ -32,7 +32,7 @@ var DATE_PICKER_TIME_ZONE = "UTC";
 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: hideLabelProp, variant: variantProp, as: asProp, size: sizeProp, isClearable: isClearableProp, todayIcon: todayIconProp, todayIconButtonSize: todayIconButtonSizeProp, todayIconPlacement: todayIconPlacementProp, shouldForceLeadingZeros: shouldForceLeadingZerosProp, disableManualEntry: disableManualEntryProp, autoFixYear: autoFixYearProp, fireBlurOnChange: fireBlurOnChangeProp, ...rest } = props;
+	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, onBlur, value, disableDropdown, className, hideSidebar, placeholder, inputClassName, hideLabel: hideLabelProp, variant: variantProp, as: asProp, size: sizeProp, isClearable: isClearableProp, todayIcon: todayIconProp, todayIconButtonSize: todayIconButtonSizeProp, todayIconButtonComponent: todayIconButtonComponentProp, todayIconPlacement: todayIconPlacementProp, shouldForceLeadingZeros: shouldForceLeadingZerosProp, disableManualEntry: disableManualEntryProp, autoFixYear: autoFixYearProp, fireBlurOnChange: fireBlurOnChangeProp, ...rest } = props;
 	const hideLabel = hideLabelProp ?? ui.input.hideLabel;
 	const variant = variantProp ?? ui.input.variant;
 	const as = asProp ?? ui.input.as;
@@ -40,6 +40,7 @@ var DateRangePickerBase = (props) => {
 	const isClearable = isClearableProp ?? ui.input.isClearable;
 	const todayIcon = todayIconProp ?? ui.dateInput.todayIcon;
 	const todayIconButtonSize = todayIconButtonSizeProp ?? ui.dateInput.todayIconButtonSize;
+	const todayIconButtonComponent = todayIconButtonComponentProp ?? ui.dateInput.todayIconButtonComponent;
 	const todayIconPlacement = todayIconPlacementProp ?? ui.dateInput.todayIconPlacement;
 	const shouldForceLeadingZeros = shouldForceLeadingZerosProp ?? ui.dateInput.shouldForceLeadingZeros;
 	const disableManualEntry = disableManualEntryProp ?? ui.dateInput.disableManualEntry;
@@ -528,6 +529,7 @@ var DateRangePickerBase = (props) => {
 				headerProps,
 				todayIcon,
 				todayIconButtonSize,
+				todayIconButtonComponent,
 				todayIconPlacement,
 				isDirty,
 				disableManualEntry,
@@ -690,11 +692,13 @@ var DateRangePickerInner = (t0) => {
 		const isDisabled = isFormControlDisabled || !!props.isDisabled;
 		const todayIcon = props.todayIcon ?? ui.dateInput.todayIcon;
 		const todayIconButtonSize = props.todayIconButtonSize ?? ui.dateInput.todayIconButtonSize;
+		const todayIconButtonComponent = props.todayIconButtonComponent ?? ui.dateInput.todayIconButtonComponent;
 		const todayIconPlacement = props.todayIconPlacement ?? ui.dateInput.todayIconPlacement;
 		const staticTodayIcon = renderDatePickerTodayIcon(todayIcon, {
 			isDisabled,
 			renderStatic: true,
-			size: todayIconButtonSize
+			size: todayIconButtonSize,
+			todayIconButtonComponent
 		});
 		const disableManualEntry = props.disableManualEntry ?? ui.dateInput.disableManualEntry;
 		const showDropdown = !props.disableDropdown || disableManualEntry;

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, DatePickerTodayIconPlacement } from '../shared/datePicker.types';
+import { DatePickerTodayIcon, DatePickerTodayIconButtonComponent, 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;
+    todayIconButtonComponent?: DatePickerTodayIconButtonComponent;
     todayIconPlacement?: DatePickerTodayIconPlacement;
     isDirty?: boolean;
     disableManualEntry?: boolean;

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

@@ -25,7 +25,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: hideLabelProp, variant: variantProp, as: asProp, size: sizeProp, isClearable: isClearableProp, todayIcon: todayIconProp, todayIconButtonSize: todayIconButtonSizeProp, todayIconPlacement: todayIconPlacementProp, shouldForceLeadingZeros: shouldForceLeadingZerosProp, disableManualEntry: disableManualEntryProp, shouldUpdateDateOnMonthYearChange: shouldUpdateDateOnMonthYearChangeProp, timeZone: _timeZone, autoFixYear: autoFixYearProp, fireBlurOnChange: fireBlurOnChangeProp, format, setDateValueOnDateSelection: setDateValueOnDateSelectionProp, ...rest } = props;
+	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, onBlur, value, disableDropdown, isTimeOptional, placeholder, inputClassName, hideLabel: hideLabelProp, variant: variantProp, as: asProp, size: sizeProp, isClearable: isClearableProp, todayIcon: todayIconProp, todayIconButtonSize: todayIconButtonSizeProp, todayIconButtonComponent: todayIconButtonComponentProp, todayIconPlacement: todayIconPlacementProp, shouldForceLeadingZeros: shouldForceLeadingZerosProp, disableManualEntry: disableManualEntryProp, shouldUpdateDateOnMonthYearChange: shouldUpdateDateOnMonthYearChangeProp, timeZone: _timeZone, autoFixYear: autoFixYearProp, fireBlurOnChange: fireBlurOnChangeProp, format, setDateValueOnDateSelection: setDateValueOnDateSelectionProp, ...rest } = props;
 	const hideLabel = hideLabelProp ?? ui.input.hideLabel;
 	const variant = variantProp ?? ui.input.variant;
 	const as = asProp ?? ui.input.as;
@@ -33,6 +33,7 @@ var DateTimePickerBase = (props) => {
 	const isClearable = isClearableProp ?? ui.input.isClearable;
 	const todayIcon = todayIconProp ?? ui.dateInput.todayIcon;
 	const todayIconButtonSize = todayIconButtonSizeProp ?? ui.dateInput.todayIconButtonSize;
+	const todayIconButtonComponent = todayIconButtonComponentProp ?? ui.dateInput.todayIconButtonComponent;
 	const todayIconPlacement = todayIconPlacementProp ?? ui.dateInput.todayIconPlacement;
 	const shouldForceLeadingZeros = shouldForceLeadingZerosProp ?? ui.dateInput.shouldForceLeadingZeros;
 	const disableManualEntry = disableManualEntryProp ?? ui.dateInput.disableManualEntry;
@@ -205,6 +206,7 @@ var DateTimePickerBase = (props) => {
 				headerProps,
 				todayIcon,
 				todayIconButtonSize,
+				todayIconButtonComponent,
 				todayIconPlacement,
 				isRequired,
 				disableManualEntry,
@@ -267,11 +269,13 @@ var DateTimePickerInner = (t0) => {
 		const isDisabled = isFormControlDisabled || !!props.isDisabled;
 		const todayIcon = props.todayIcon ?? ui.dateInput.todayIcon;
 		const todayIconButtonSize = props.todayIconButtonSize ?? ui.dateInput.todayIconButtonSize;
+		const todayIconButtonComponent = props.todayIconButtonComponent ?? ui.dateInput.todayIconButtonComponent;
 		const todayIconPlacement = props.todayIconPlacement ?? ui.dateInput.todayIconPlacement;
 		const staticTodayIcon = renderDatePickerTodayIcon(todayIcon, {
 			isDisabled,
 			renderStatic: true,
-			size: todayIconButtonSize
+			size: todayIconButtonSize,
+			todayIconButtonComponent
 		});
 		const disableManualEntry = props.disableManualEntry ?? ui.dateInput.disableManualEntry;
 		const showDropdown = !props.disableDropdown || disableManualEntry;

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, DatePickerTodayIconPlacement } from './datePicker.types';
+import { DatePickerTodayIcon, DatePickerTodayIconButtonComponent, DatePickerTodayIconButtonSize, DatePickerTodayIconPlacement } from './datePicker.types';
 import { FormFieldHeaderProps } from '../../FormField/FormFieldHeader';
 import { InputVariantProps } from '../../shared/input.cva';
 export interface DatePickerInputHandle {
@@ -25,6 +25,7 @@ interface DatePickerInputProps extends InputVariantProps {
     headerProps?: FormFieldHeaderProps;
     todayIcon?: DatePickerTodayIcon;
     todayIconButtonSize?: DatePickerTodayIconButtonSize;
+    todayIconButtonComponent?: DatePickerTodayIconButtonComponent;
     todayIconPlacement?: DatePickerTodayIconPlacement;
     isDirty?: boolean;
     isRequired?: boolean;
@@ -40,5 +41,5 @@ interface DatePickerInputProps extends InputVariantProps {
     fireBlurOnChange?: boolean;
     onClear?: () => void;
 }
-export declare const DatePickerInput: ({ ref, as, groupProps, fieldProps, endFieldProps, fieldValue, endFieldValue, isValueControlled, hasValue, buttonProps, isDisabled, isInvalid, disableDropdown, variant, size, isDateTime, isClearable, headerProps, todayIcon, todayIconButtonSize, todayIconPlacement, isDirty, isRequired, disableManualEntry, autoFixYear, placeholder, className, onOpenDropdown, dateGranularity, timeZone, isTimeOptional, format, fireBlurOnChange, onClear: onClearProp, ...props }: DatePickerInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DatePickerInput: ({ ref, as, groupProps, fieldProps, endFieldProps, fieldValue, endFieldValue, isValueControlled, hasValue, buttonProps, isDisabled, isInvalid, disableDropdown, variant, size, isDateTime, isClearable, headerProps, todayIcon, todayIconButtonSize, todayIconButtonComponent, todayIconPlacement, isDirty, isRequired, disableManualEntry, autoFixYear, placeholder, className, onOpenDropdown, dateGranularity, timeZone, isTimeOptional, format, fireBlurOnChange, onClear: onClearProp, ...props }: DatePickerInputProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -18,8 +18,8 @@ import { useFocusVisible, useFocusWithin, useHover } from "react-aria";
 import { today } from "@internationalized/date";
 //#region src/components/inputs/DateTime/shared/DatePickerInput.tsx
 var DatePickerInput = (t0) => {
-	const $ = c(107);
-	const { ref, as, groupProps, fieldProps, endFieldProps, fieldValue, endFieldValue, isValueControlled, hasValue, buttonProps, isDisabled, isInvalid, disableDropdown, variant, size, isDateTime, isClearable, headerProps, todayIcon, todayIconButtonSize: t1, todayIconPlacement: t2, isDirty, isRequired, disableManualEntry, autoFixYear: t3, placeholder, className, onOpenDropdown, dateGranularity: t4, timeZone, isTimeOptional: t5, format, fireBlurOnChange, onClear: onClearProp, ...props } = t0;
+	const $ = c(108);
+	const { ref, as, groupProps, fieldProps, endFieldProps, fieldValue, endFieldValue, isValueControlled, hasValue, buttonProps, isDisabled, isInvalid, disableDropdown, variant, size, isDateTime, isClearable, headerProps, todayIcon, todayIconButtonSize: t1, todayIconButtonComponent, todayIconPlacement: t2, isDirty, isRequired, disableManualEntry, autoFixYear: t3, placeholder, className, onOpenDropdown, dateGranularity: t4, timeZone, isTimeOptional: t5, format, fireBlurOnChange, onClear: onClearProp, ...props } = t0;
 	const todayIconButtonSize = t1 === void 0 ? "none" : t1;
 	const todayIconPlacement = t2 === void 0 ? "content" : t2;
 	const autoFixYear = t3 === void 0 ? false : t3;
@@ -157,18 +157,20 @@ var DatePickerInput = (t0) => {
 	const onToday = t15;
 	const hidePlaceholder = as === "floating" && !fieldProps.value && !isFocused;
 	let t16;
-	if ($[27] !== isTodayIconDisabled || $[28] !== onToday || $[29] !== todayIcon || $[30] !== todayIconButtonSize) {
+	if ($[27] !== isTodayIconDisabled || $[28] !== onToday || $[29] !== todayIcon || $[30] !== todayIconButtonComponent || $[31] !== todayIconButtonSize) {
 		t16 = renderDatePickerTodayIcon(todayIcon, {
 			isDisabled: isTodayIconDisabled,
 			onPress: onToday,
-			size: todayIconButtonSize
+			size: todayIconButtonSize,
+			todayIconButtonComponent
 		});
 		$[27] = isTodayIconDisabled;
 		$[28] = onToday;
 		$[29] = todayIcon;
-		$[30] = todayIconButtonSize;
-		$[31] = t16;
-	} else t16 = $[31];
+		$[30] = todayIconButtonComponent;
+		$[31] = todayIconButtonSize;
+		$[32] = t16;
+	} else t16 = $[32];
 	const todayIconButton = t16;
 	const shouldRenderTodayIconWithFieldLabel = todayIconPlacement === "fieldLabel";
 	const pickerIcon = isDateTime ? uiConfig.dateInput.dateTimeIcon : uiConfig.dateInput.calendarIcon;
@@ -189,49 +191,49 @@ var DatePickerInput = (t0) => {
 	const t27 = isRequired || void 0;
 	const t28 = normalizedFieldProps.value != null || void 0;
 	let t29;
-	if ($[32] !== as || $[33] !== inputSizeCva || $[34] !== size) {
+	if ($[33] !== as || $[34] !== inputSizeCva || $[35] !== size) {
 		t29 = clsx("flex w-full items-center gap-input-gap-input-text-to-elements pr-0!", inputSizeCva({
 			size,
 			as
 		}));
-		$[32] = as;
-		$[33] = inputSizeCva;
-		$[34] = size;
-		$[35] = t29;
-	} else t29 = $[35];
+		$[33] = as;
+		$[34] = inputSizeCva;
+		$[35] = size;
+		$[36] = t29;
+	} else t29 = $[36];
 	let t30;
-	if ($[36] !== as || $[37] !== headerProps) {
+	if ($[37] !== as || $[38] !== headerProps) {
 		t30 = as && ["filter", "floating"].includes(as) && headerProps && /* @__PURE__ */ jsx(FormFieldLabel, {
 			as,
 			...headerProps
 		});
-		$[36] = as;
-		$[37] = headerProps;
-		$[38] = t30;
-	} else t30 = $[38];
+		$[37] = as;
+		$[38] = headerProps;
+		$[39] = t30;
+	} else t30 = $[39];
 	const t31 = shouldRenderTodayIconWithFieldLabel && todayIconButton;
 	let t32;
-	if ($[39] !== datePickerInputContentRowCva || $[40] !== size) {
+	if ($[40] !== datePickerInputContentRowCva || $[41] !== size) {
 		t32 = datePickerInputContentRowCva({ size });
-		$[39] = datePickerInputContentRowCva;
-		$[40] = size;
-		$[41] = t32;
-	} else t32 = $[41];
+		$[40] = datePickerInputContentRowCva;
+		$[41] = size;
+		$[42] = t32;
+	} else t32 = $[42];
 	let t33;
-	if ($[42] !== disableManualEntry || $[43] !== isDisabled || $[44] !== onOpenDropdown) {
+	if ($[43] !== disableManualEntry || $[44] !== isDisabled || $[45] !== onOpenDropdown) {
 		t33 = disableManualEntry && /* @__PURE__ */ jsx(Button, {
 			onPress: onOpenDropdown,
 			className: "absolute inset-0 z-0",
 			isDisabled
 		});
-		$[42] = disableManualEntry;
-		$[43] = isDisabled;
-		$[44] = onOpenDropdown;
-		$[45] = t33;
-	} else t33 = $[45];
+		$[43] = disableManualEntry;
+		$[44] = isDisabled;
+		$[45] = onOpenDropdown;
+		$[46] = t33;
+	} else t33 = $[46];
 	const t34 = !shouldRenderTodayIconWithFieldLabel && todayIconButton;
 	let t35;
-	if ($[46] !== as || $[47] !== dateGranularity || $[48] !== disableManualEntry || $[49] !== effectiveTimeZone || $[50] !== fieldProps || $[51] !== format || $[52] !== hidePlaceholder || $[53] !== isDisabled || $[54] !== isInvalid || $[55] !== isTimeOptional || $[56] !== normalizedEndFieldProps || $[57] !== normalizedFieldProps || $[58] !== onClearChange || $[59] !== placeholder) {
+	if ($[47] !== as || $[48] !== dateGranularity || $[49] !== disableManualEntry || $[50] !== effectiveTimeZone || $[51] !== fieldProps || $[52] !== format || $[53] !== hidePlaceholder || $[54] !== isDisabled || $[55] !== isInvalid || $[56] !== isTimeOptional || $[57] !== normalizedEndFieldProps || $[58] !== normalizedFieldProps || $[59] !== onClearChange || $[60] !== placeholder) {
 		t35 = disableManualEntry && placeholder && !fieldProps.value ? /* @__PURE__ */ jsx(Typography, {
 			size: "label-1",
 			className: "text-text-default-3",
@@ -263,24 +265,24 @@ var DatePickerInput = (t0) => {
 			format,
 			timeZone: effectiveTimeZone
 		})] })] });
-		$[46] = as;
-		$[47] = dateGranularity;
-		$[48] = disableManualEntry;
-		$[49] = effectiveTimeZone;
-		$[50] = fieldProps;
-		$[51] = format;
-		$[52] = hidePlaceholder;
-		$[53] = isDisabled;
-		$[54] = isInvalid;
-		$[55] = isTimeOptional;
-		$[56] = normalizedEndFieldProps;
-		$[57] = normalizedFieldProps;
-		$[58] = onClearChange;
-		$[59] = placeholder;
-		$[60] = t35;
-	} else t35 = $[60];
+		$[47] = as;
+		$[48] = dateGranularity;
+		$[49] = disableManualEntry;
+		$[50] = effectiveTimeZone;
+		$[51] = fieldProps;
+		$[52] = format;
+		$[53] = hidePlaceholder;
+		$[54] = isDisabled;
+		$[55] = isInvalid;
+		$[56] = isTimeOptional;
+		$[57] = normalizedEndFieldProps;
+		$[58] = normalizedFieldProps;
+		$[59] = onClearChange;
+		$[60] = placeholder;
+		$[61] = t35;
+	} else t35 = $[61];
 	let t36;
-	if ($[61] !== t32 || $[62] !== t33 || $[63] !== t34 || $[64] !== t35) {
+	if ($[62] !== t32 || $[63] !== t33 || $[64] !== t34 || $[65] !== t35) {
 		t36 = /* @__PURE__ */ jsxs("div", {
 			className: t32,
 			children: [
@@ -289,14 +291,14 @@ var DatePickerInput = (t0) => {
 				t35
 			]
 		});
-		$[61] = t32;
-		$[62] = t33;
-		$[63] = t34;
-		$[64] = t35;
-		$[65] = t36;
-	} else t36 = $[65];
+		$[62] = t32;
+		$[63] = t33;
+		$[64] = t34;
+		$[65] = t35;
+		$[66] = t36;
+	} else t36 = $[66];
 	let t37;
-	if ($[66] !== t29 || $[67] !== t30 || $[68] !== t31 || $[69] !== t36) {
+	if ($[67] !== t29 || $[68] !== t30 || $[69] !== t31 || $[70] !== t36) {
 		t37 = /* @__PURE__ */ jsxs("div", {
 			className: t29,
 			children: [
@@ -305,37 +307,37 @@ var DatePickerInput = (t0) => {
 				t36
 			]
 		});
-		$[66] = t29;
-		$[67] = t30;
-		$[68] = t31;
-		$[69] = t36;
-		$[70] = t37;
-	} else t37 = $[70];
+		$[67] = t29;
+		$[68] = t30;
+		$[69] = t31;
+		$[70] = t36;
+		$[71] = t37;
+	} else t37 = $[71];
 	let t38;
-	if ($[71] !== as || $[72] !== inputSizeCva || $[73] !== size) {
+	if ($[72] !== as || $[73] !== inputSizeCva || $[74] !== size) {
 		t38 = clsx(inputSizeCva({
 			size,
 			as
 		}), "flex items-center gap-input-gap-trailing-elements py-0! pl-0!");
-		$[71] = as;
-		$[72] = inputSizeCva;
-		$[73] = size;
-		$[74] = t38;
-	} else t38 = $[74];
+		$[72] = as;
+		$[73] = inputSizeCva;
+		$[74] = size;
+		$[75] = t38;
+	} else t38 = $[75];
 	let t39;
-	if ($[75] !== clearInput || $[76] !== isClearable || $[77] !== showClear) {
+	if ($[76] !== clearInput || $[77] !== isClearable || $[78] !== showClear) {
 		t39 = isClearable && /* @__PURE__ */ jsx(InputClear, {
 			onClear: clearInput,
 			show: showClear,
 			style: showClear ? { visibility: "visible" } : void 0
 		});
-		$[75] = clearInput;
-		$[76] = isClearable;
-		$[77] = showClear;
-		$[78] = t39;
-	} else t39 = $[78];
+		$[76] = clearInput;
+		$[77] = isClearable;
+		$[78] = showClear;
+		$[79] = t39;
+	} else t39 = $[79];
 	let t40;
-	if ($[79] !== buttonProps || $[80] !== disableDropdown || $[81] !== disableManualEntry || $[82] !== isDisabled || $[83] !== pickerIcon) {
+	if ($[80] !== buttonProps || $[81] !== disableDropdown || $[82] !== disableManualEntry || $[83] !== isDisabled || $[84] !== pickerIcon) {
 		t40 = (!disableDropdown || disableManualEntry) && /* @__PURE__ */ jsx(InlineIconButton, {
 			label: "",
 			color: "secondary",
@@ -344,26 +346,26 @@ var DatePickerInput = (t0) => {
 			isDisabled,
 			className: "border-0!"
 		});
-		$[79] = buttonProps;
-		$[80] = disableDropdown;
-		$[81] = disableManualEntry;
-		$[82] = isDisabled;
-		$[83] = pickerIcon;
-		$[84] = t40;
-	} else t40 = $[84];
+		$[80] = buttonProps;
+		$[81] = disableDropdown;
+		$[82] = disableManualEntry;
+		$[83] = isDisabled;
+		$[84] = pickerIcon;
+		$[85] = t40;
+	} else t40 = $[85];
 	let t41;
-	if ($[85] !== t38 || $[86] !== t39 || $[87] !== t40) {
+	if ($[86] !== t38 || $[87] !== t39 || $[88] !== t40) {
 		t41 = /* @__PURE__ */ jsxs("div", {
 			className: t38,
 			children: [t39, t40]
 		});
-		$[85] = t38;
-		$[86] = t39;
-		$[87] = t40;
-		$[88] = t41;
-	} else t41 = $[88];
+		$[86] = t38;
+		$[87] = t39;
+		$[88] = t40;
+		$[89] = t41;
+	} else t41 = $[89];
 	let t42;
-	if ($[89] !== focusWithinProps || $[90] !== groupProps || $[91] !== hoverProps || $[92] !== t17 || $[93] !== t18 || $[94] !== t19 || $[95] !== t20 || $[96] !== t21 || $[97] !== t22 || $[98] !== t23 || $[99] !== t24 || $[100] !== t25 || $[101] !== t26 || $[102] !== t27 || $[103] !== t28 || $[104] !== t37 || $[105] !== t41) {
+	if ($[90] !== focusWithinProps || $[91] !== groupProps || $[92] !== hoverProps || $[93] !== t17 || $[94] !== t18 || $[95] !== t19 || $[96] !== t20 || $[97] !== t21 || $[98] !== t22 || $[99] !== t23 || $[100] !== t24 || $[101] !== t25 || $[102] !== t26 || $[103] !== t27 || $[104] !== t28 || $[105] !== t37 || $[106] !== t41) {
 		t42 = /* @__PURE__ */ jsxs("div", {
 			ref: containerRef,
 			...groupProps,
@@ -385,25 +387,25 @@ var DatePickerInput = (t0) => {
 			"data-is-filled": t28,
 			children: [t37, t41]
 		});
-		$[89] = focusWithinProps;
-		$[90] = groupProps;
-		$[91] = hoverProps;
-		$[92] = t17;
-		$[93] = t18;
-		$[94] = t19;
-		$[95] = t20;
-		$[96] = t21;
-		$[97] = t22;
-		$[98] = t23;
-		$[99] = t24;
-		$[100] = t25;
-		$[101] = t26;
-		$[102] = t27;
-		$[103] = t28;
-		$[104] = t37;
-		$[105] = t41;
-		$[106] = t42;
-	} else t42 = $[106];
+		$[90] = focusWithinProps;
+		$[91] = groupProps;
+		$[92] = hoverProps;
+		$[93] = t17;
+		$[94] = t18;
+		$[95] = t19;
+		$[96] = t20;
+		$[97] = t21;
+		$[98] = t22;
+		$[99] = t23;
+		$[100] = t24;
+		$[101] = t25;
+		$[102] = t26;
+		$[103] = t27;
+		$[104] = t28;
+		$[105] = t37;
+		$[106] = t41;
+		$[107] = t42;
+	} else t42 = $[107];
 	return t42;
 };
 //#endregion

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

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

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

@@ -1,6 +1,6 @@
 import { FC, ReactElement, SVGProps } from 'react';
 import { PressEvent } from 'react-aria-components';
-import { DatePickerTodayIcon, DatePickerTodayIconButtonSize } from './datePicker.types';
+import { DatePickerTodayIcon, DatePickerTodayIconButtonComponent, DatePickerTodayIconButtonSize } from './datePicker.types';
 type TodayIconComponent = FC<SVGProps<SVGSVGElement>> | ReactElement;
 type DatePickerTodayIconOptions = {
     className?: string;
@@ -8,6 +8,7 @@ type DatePickerTodayIconOptions = {
     onPress?: (event: PressEvent) => void;
     renderStatic?: boolean;
     size?: DatePickerTodayIconButtonSize;
+    todayIconButtonComponent?: DatePickerTodayIconButtonComponent;
 };
 export declare const getDatePickerTodayIcon: (todayIcon: DatePickerTodayIcon | undefined) => TodayIconComponent | null;
 export declare const renderDatePickerTodayIcon: (todayIcon: DatePickerTodayIcon | undefined, options?: DatePickerTodayIconOptions) => import("react/jsx-runtime").JSX.Element | undefined;

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

@@ -1,12 +1,7 @@
-import { UIStyle } from "../../../../config/uiStyle.context.js";
-import { UIConfig } from "../../../../config/uiConfig.context.js";
-import { button, buttonContent, buttonIconSize, buttonSize } from "../../../buttons/Button/button.cva.js";
 import { IconButton } from "../../../buttons/IconButton/IconButton.js";
+import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
 import { TodayIcon } from "../../../../assets/icons/Today.js";
-import { c } from "react/compiler-runtime";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { clsx } from "clsx";
-import { cloneElement, isValidElement } from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/inputs/DateTime/shared/datePickerTodayIcon.tsx
 var getDatePickerTodayIcon = (todayIcon) => {
 	if (!todayIcon) return null;
@@ -15,103 +10,23 @@ var getDatePickerTodayIcon = (todayIcon) => {
 var renderDatePickerTodayIcon = (todayIcon, options) => {
 	const icon = getDatePickerTodayIcon(todayIcon);
 	if (!icon) return;
-	const { className, isDisabled, onPress, renderStatic, size = "none" } = options ?? {};
-	const todayIconClassName = className ?? "relative z-1";
-	if (renderStatic) return /* @__PURE__ */ jsx(StaticDatePickerTodayIcon, {
-		icon,
-		className: todayIconClassName,
-		isDisabled,
-		size
-	});
-	return /* @__PURE__ */ jsx(IconButton, {
+	const { className, isDisabled, onPress, renderStatic, size = "none", todayIconButtonComponent = "iconButton" } = options ?? {};
+	const buttonProps = {
 		label: "",
 		icon,
 		size,
 		isDisabled,
-		onPress,
-		className: todayIconClassName
+		onPress
+	};
+	if (todayIconButtonComponent === "inlineIconButton") return /* @__PURE__ */ jsx(InlineIconButton, {
+		...buttonProps,
+		staticRender: renderStatic,
+		className: className ?? "relative z-1 !border-none"
+	});
+	return /* @__PURE__ */ jsx(IconButton, {
+		...buttonProps,
+		className: className ?? "relative z-1"
 	});
-};
-var StaticDatePickerTodayIcon = (t0) => {
-	const $ = c(19);
-	const { icon, className, isDisabled, size } = t0;
-	const uiConfig = UIConfig.useConfig();
-	const buttonCva = UIStyle.useCva("button.cva", button);
-	const buttonSizeCva = UIStyle.useCva("button.sizeCva", buttonSize);
-	const buttonContentCva = UIStyle.useCva("button.contentCva", buttonContent);
-	const buttonIconSizeCva = UIStyle.useCva("button.iconSize", buttonIconSize);
-	let t1;
-	if ($[0] !== buttonIconSizeCva || $[1] !== icon || $[2] !== size) {
-		const iconClassName = buttonIconSizeCva({
-			size,
-			className: "shrink-0"
-		});
-		bb0: {
-			if (isValidElement(icon)) {
-				t1 = cloneElement(icon, { className: clsx(iconClassName, icon.props.className) });
-				break bb0;
-			}
-			const Icon = icon;
-			let t2;
-			if ($[4] !== Icon || $[5] !== iconClassName) {
-				t2 = /* @__PURE__ */ jsx(Icon, { className: iconClassName });
-				$[4] = Icon;
-				$[5] = iconClassName;
-				$[6] = t2;
-			} else t2 = $[6];
-			t1 = t2;
-		}
-		$[0] = buttonIconSizeCva;
-		$[1] = icon;
-		$[2] = size;
-		$[3] = t1;
-	} else t1 = $[3];
-	const renderedIcon = t1;
-	const variant = uiConfig.button.variant;
-	let t2;
-	if ($[7] !== buttonContentCva || $[8] !== buttonCva || $[9] !== buttonSizeCva || $[10] !== className || $[11] !== size || $[12] !== variant) {
-		t2 = clsx(buttonCva({
-			className,
-			size,
-			variant,
-			width: "hug"
-		}), buttonSizeCva({
-			iconOnly: true,
-			size
-		}), buttonContentCva({
-			iconOnly: true,
-			iconPosition: "left",
-			size
-		}));
-		$[7] = buttonContentCva;
-		$[8] = buttonCva;
-		$[9] = buttonSizeCva;
-		$[10] = className;
-		$[11] = size;
-		$[12] = variant;
-		$[13] = t2;
-	} else t2 = $[13];
-	let t3;
-	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
-		t3 = /* @__PURE__ */ jsx("span", { className: "sr-only" });
-		$[14] = t3;
-	} else t3 = $[14];
-	let t4;
-	if ($[15] !== isDisabled || $[16] !== renderedIcon || $[17] !== t2) {
-		t4 = /* @__PURE__ */ jsxs("button", {
-			type: "button",
-			"aria-hidden": "true",
-			tabIndex: -1,
-			disabled: isDisabled,
-			className: t2,
-			children: [renderedIcon, t3]
-		});
-		$[15] = isDisabled;
-		$[16] = renderedIcon;
-		$[17] = t2;
-		$[18] = t4;
-	} else t4 = $[18];
-	return t4;
 };
 //#endregion
 export { renderDatePickerTodayIcon };

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

@@ -41,6 +41,7 @@ export declare namespace UIConfig {
             dateTimeIcon?: ReactElement;
             timeIcon?: ReactElement;
             setDateValueOnDateSelection?: boolean;
+            todayIconButtonComponent?: DatePickerProps["todayIconButtonComponent"];
         };
         actionModal: Pick<ActionModalProps, "titleTypography" | "descriptionTypography">;
         bottomSheet: Pick<BottomSheetProps, "closeDragThreshold" | "closeVelocityThreshold" | "hideThumb" | "headerTypography">;

package/dist/config/uiConfig.context.js

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

package/package.json

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