@povio/ui 3.4.0-rc.15 → 3.4.0-rc.16

package/dist/components/inputs/Checkbox/checkbox.cva.d.ts

@@ -1,94 +1,78 @@
-import { TypographyVariantProps } from '../../text/Typography/typography.cva';
-import { UIOverrides } from '../../../config/uiOverrides.context';
-export declare const checkboxDefinition: {
-    base: string[];
-    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
-        readonly variant: {
-            readonly default: ["m-1 border-interactive-outlined-secondary-on-idle", "text-interactive-contained-primary-on-idle", "group-hover:text-interactive-contained-primary-on-hover", "group-pressed:text-interactive-contained-primary-on-pressed", "group-disabled:text-interactive-contained-primary-on-disabled", "group-disabled:border-interactive-outlined-secondary-on-disabled", "group-hover:border-interactive-outlined-secondary-on-hover", "group-pressed:border-interactive-outlined-secondary-on-pressed", "group-selected:border-interactive-contained-primary-idle", "group-selected:bg-interactive-contained-primary-idle", "group-selected:group-hover:bg-interactive-contained-primary-hover", "group-selected:group-hover:border-interactive-contained-primary-hover", "group-selected:group-pressed:bg-interactive-contained-primary-pressed", "group-selected:group-pressed:border-interactive-contained-primary-pressed", "group-selected:group-disabled:bg-interactive-contained-primary-disabled", "group-selected:group-disabled:border-interactive-contained-primary-disabled", "group-indeterminate:border-interactive-contained-primary-idle", "group-indeterminate:bg-interactive-contained-primary-idle", "group-indeterminate:group-hover:bg-interactive-contained-primary-hover", "group-indeterminate:group-hover:border-interactive-contained-primary-hover", "group-indeterminate:group-pressed:bg-interactive-contained-primary-pressed", "group-indeterminate:group-pressed:border-interactive-contained-primary-pressed", "group-invalid:border-interactive-outlined-error-on-idle", "group-focus-visible:outline-interactive-contained-primary-focus"];
-        };
-    }>;
+import { StyleMergeUtils } from "../../../utils/style-merge.util.js";
+import { UIOverrides } from "../../../config/uiOverrides.context.js";
+import "../../text/Typography/typography.cva.js";
+//#region src/components/inputs/Checkbox/checkbox.cva.d.ts
+declare const checkboxDefinition: {
+  base: string[];
+  config: StyleMergeUtils.Config<{
+    readonly variant: {
+      default: ["m-1 border-interactive-outlined-secondary-on-idle", "text-interactive-contained-primary-on-idle", "group-hover:text-interactive-contained-primary-on-hover", "group-pressed:text-interactive-contained-primary-on-pressed", "group-disabled:text-interactive-contained-primary-on-disabled", "group-disabled:border-interactive-outlined-secondary-on-disabled", "group-hover:border-interactive-outlined-secondary-on-hover", "group-pressed:border-interactive-outlined-secondary-on-pressed", "group-selected:border-interactive-contained-primary-idle", "group-selected:bg-interactive-contained-primary-idle", "group-selected:group-hover:bg-interactive-contained-primary-hover", "group-selected:group-hover:border-interactive-contained-primary-hover", "group-selected:group-pressed:bg-interactive-contained-primary-pressed", "group-selected:group-pressed:border-interactive-contained-primary-pressed", "group-selected:group-disabled:bg-interactive-contained-primary-disabled", "group-selected:group-disabled:border-interactive-contained-primary-disabled", "group-indeterminate:border-interactive-contained-primary-idle", "group-indeterminate:bg-interactive-contained-primary-idle", "group-indeterminate:group-hover:bg-interactive-contained-primary-hover", "group-indeterminate:group-hover:border-interactive-contained-primary-hover", "group-indeterminate:group-pressed:bg-interactive-contained-primary-pressed", "group-indeterminate:group-pressed:border-interactive-contained-primary-pressed", "group-invalid:border-interactive-outlined-error-on-idle", "group-focus-visible:outline-interactive-contained-primary-focus"];
+    };
+  }>;
 };
-export type CheckboxConfig = NonNullable<typeof checkboxDefinition.config>;
-export interface CheckboxVariantProps extends UIOverrides.VariantProps<CheckboxConfig> {
-}
-export declare const checkboxIndicatorClass = "group flex items-center gap-2";
-export declare const checkboxTypography: (props: {
-    readonly variant?: "default" | null | undefined;
-}) => TypographyVariantProps | undefined;
-export declare const checkboxContentClassName: (props: {
-    readonly variant?: "default" | null | undefined;
-}) => string | undefined;
-export declare const checkboxContentWrapperDefinition: {
-    base: string[];
-    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
-        readonly variant: {
-            readonly default: "";
-        };
-        readonly size: {
-            readonly "extra-small": "";
-            readonly small: "";
-            readonly default: "";
-            readonly large: "";
-        };
-        readonly as: {
-            readonly default: "flex-col";
-            readonly floating: "flex-col";
-            readonly filter: "flex-row flex-wrap items-center gap-2";
-            readonly inline: "flex-row flex-wrap items-center gap-2";
-        };
-        readonly hasInputFrame: {
-            readonly true: "gap-2";
-            readonly false: "";
-        };
-    }>;
+type CheckboxConfig = NonNullable<typeof checkboxDefinition.config>;
+interface CheckboxVariantProps extends UIOverrides.VariantProps<CheckboxConfig> {}
+declare const checkboxContentWrapperDefinition: {
+  base: string[];
+  config: StyleMergeUtils.Config<{
+    readonly variant: {
+      readonly default: "";
+    };
+    readonly size: {
+      readonly "extra-small": "";
+      readonly small: "";
+      readonly default: "";
+      readonly large: "";
+    };
+    readonly as: {
+      readonly default: "flex-col";
+      readonly floating: "flex-col";
+      readonly filter: "flex-row flex-wrap items-center gap-2";
+      readonly inline: "flex-row flex-wrap items-center gap-2";
+    };
+    readonly hasInputFrame: {
+      readonly true: "gap-2";
+      readonly false: "";
+    };
+  }>;
 };
-export type CheckboxContentWrapperConfig = NonNullable<typeof checkboxContentWrapperDefinition.config>;
-export interface CheckboxContentWrapperVariantProps extends UIOverrides.VariantProps<CheckboxContentWrapperConfig> {
-}
-export declare const checkboxGroupLabelDefinition: {
-    base: string[];
-    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
-        readonly as: {
-            readonly default: "";
-            readonly floating: ["pointer-events-none absolute", "top-[calc(var(--spacing-floating-label-input-height-filled)+var(--spacing-floating-label-input-offset-top))]", "text-text-default-1", "font-semibold!", "text-label-3!"];
-            readonly filter: "";
-            readonly inline: "";
-        };
-    }>;
+declare const checkboxGroupLabelDefinition: {
+  base: string[];
+  config: StyleMergeUtils.Config<{
+    readonly as: {
+      readonly default: "";
+      readonly floating: ["pointer-events-none absolute", "top-[calc(var(--spacing-floating-label-input-height-filled)+var(--spacing-floating-label-input-offset-top))]", "text-text-default-1", "font-semibold!", "text-label-3!"];
+      readonly filter: "";
+      readonly inline: "";
+    };
+  }>;
 };
-export type CheckboxGroupLabelConfig = NonNullable<typeof checkboxGroupLabelDefinition.config>;
-export interface CheckboxGroupLabelVariantProps extends UIOverrides.VariantProps<CheckboxGroupLabelConfig> {
-}
-export declare const checkboxContentRowDefinition: {
-    base: string[];
-    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
-        readonly variant: {
-            readonly default: "";
-        };
-        readonly as: {
-            readonly default: "flex-col";
-            readonly floating: "flex-col";
-            readonly filter: "flex-row flex-wrap items-center gap-2";
-            readonly inline: "flex-row flex-wrap items-center gap-2";
-        };
-        readonly hasInputFrame: {
-            readonly true: "gap-2";
-            readonly false: "";
-        };
-    }>;
+declare const checkboxContentRowDefinition: {
+  base: string[];
+  config: StyleMergeUtils.Config<{
+    readonly variant: {
+      readonly default: "";
+    };
+    readonly as: {
+      readonly default: "flex-col";
+      readonly floating: "flex-col";
+      readonly filter: "flex-row flex-wrap items-center gap-2";
+      readonly inline: "flex-row flex-wrap items-center gap-2";
+    };
+    readonly hasInputFrame: {
+      readonly true: "gap-2";
+      readonly false: "";
+    };
+  }>;
 };
-export type CheckboxContentRowConfig = NonNullable<typeof checkboxContentRowDefinition.config>;
-export interface CheckboxContentRowVariantProps extends UIOverrides.VariantProps<CheckboxContentRowConfig> {
-}
-export declare const checkboxIconDefinition: {
-    base: string[];
-    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
-        readonly iconVariant: {
-            readonly selected: ["group-selected:block"];
-            readonly indeterminate: ["group-indeterminate:block"];
-        };
-    }>;
+declare const checkboxIconDefinition: {
+  base: string[];
+  config: StyleMergeUtils.Config<{
+    readonly iconVariant: {
+      selected: ["group-selected:block"];
+      indeterminate: ["group-indeterminate:block"];
+    };
+  }>;
 };
-export type CheckboxIconConfig = NonNullable<typeof checkboxIconDefinition.config>;
-export interface CheckboxIconVariantProps extends UIOverrides.VariantProps<CheckboxIconConfig> {
-}
+//#endregion
+export { CheckboxConfig, CheckboxVariantProps, checkboxContentRowDefinition, checkboxContentWrapperDefinition, checkboxDefinition, checkboxGroupLabelDefinition, checkboxIconDefinition };

package/dist/components/inputs/Checkbox/checkbox.cva.js

@@ -2,7 +2,7 @@ import { UIOverrides } from "../../../config/uiOverrides.context.js";
 import { uiGroupOutlineClass } from "../../outline.clsx.js";
 import { compoundMapper } from "../../../utils/compoundMapper.js";
 //#region src/components/inputs/Checkbox/checkbox.cva.ts
-var checkboxDefinition = UIOverrides.defineConfig({
+const checkboxDefinition = UIOverrides.defineConfig({
 	base: [
 		"flex items-center justify-center border-2",
 		"relative size-4 shrink-0 rounded-xs p-1",
@@ -38,14 +38,14 @@ var checkboxDefinition = UIOverrides.defineConfig({
 		defaultVariants: { variant: "default" }
 	}
 });
-var checkboxIndicatorClass = "group flex items-center gap-2";
-var checkboxTypography = compoundMapper({ default: {
+const checkboxIndicatorClass = "group flex items-center gap-2";
+const checkboxTypography = compoundMapper({ default: {
 	size: "label-1",
 	sizeMobile: "label-1",
 	variant: "default"
 } });
-var checkboxContentClassName = compoundMapper({ default: "text-text-default-2" });
-var checkboxContentWrapperDefinition = UIOverrides.defineConfig({
+const checkboxContentClassName = compoundMapper({ default: "text-text-default-2" });
+const checkboxContentWrapperDefinition = UIOverrides.defineConfig({
 	base: ["relative flex"],
 	config: {
 		variants: {
@@ -106,7 +106,7 @@ var checkboxContentWrapperDefinition = UIOverrides.defineConfig({
 		}
 	}
 });
-var checkboxGroupLabelDefinition = UIOverrides.defineConfig({
+const checkboxGroupLabelDefinition = UIOverrides.defineConfig({
 	base: [""],
 	config: {
 		variants: { as: {
@@ -124,7 +124,7 @@ var checkboxGroupLabelDefinition = UIOverrides.defineConfig({
 		defaultVariants: { as: "default" }
 	}
 });
-var checkboxContentRowDefinition = UIOverrides.defineConfig({
+const checkboxContentRowDefinition = UIOverrides.defineConfig({
 	base: ["flex"],
 	config: {
 		variants: {
@@ -147,7 +147,7 @@ var checkboxContentRowDefinition = UIOverrides.defineConfig({
 		}
 	}
 });
-var checkboxIconDefinition = UIOverrides.defineConfig({
+const checkboxIconDefinition = UIOverrides.defineConfig({
 	base: ["absolute hidden size-3"],
 	config: {
 		variants: { iconVariant: {

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

@@ -1,41 +1,44 @@
-import { CalendarDate, DateValue } from '@internationalized/date';
-import { FocusEvent, Ref } from 'react';
-import { FieldValues } from '../../shared/form.binding';
-import { DatePickerStateOptions } from 'react-stately';
-import { DatePickerInputHandle } from '../shared/DatePickerInput';
-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';
+import { FieldValues } from "../../shared/form.binding.js";
+import { ControlProps } from "../../shared/form.types.js";
+import { InputVariantProps } from "../../shared/input.cva.js";
+import { FormFieldProps } from "../../FormField/FormField.js";
+import { DatePickerTodayIcon, DatePickerTodayIconButtonComponent, DatePickerTodayIconButtonSize, DatePickerTodayIconPlacement } from "../shared/datePicker.types.js";
+import { DatePickerInputHandle } from "../shared/DatePickerInput.js";
+import { FocusEvent, Ref } from "react";
+import { CalendarDate, DateValue } from "@internationalized/date";
+import { DatePickerStateOptions } from "react-stately";
+//#region src/components/inputs/DateTime/DatePicker/DatePicker.d.ts
 type DatePickerGranularity = "day" | "month" | "year";
 interface DatePickerBaseProps extends FormFieldProps, InputVariantProps, Omit<DatePickerStateOptions<CalendarDate>, "granularity" | "shouldCloseOnSelect" | "label" | "onBlur"> {
-    ref?: Ref<DatePickerInputHandle & HTMLDivElement>;
-    disableDropdown?: boolean;
-    isClearable?: boolean;
-    isClearableIfDisabled?: boolean;
-    className?: string;
-    todayIcon?: DatePickerTodayIcon;
-    todayIconButtonSize?: DatePickerTodayIconButtonSize;
-    todayIconButtonComponent?: DatePickerTodayIconButtonComponent;
-    todayIconPlacement?: DatePickerTodayIconPlacement;
-    isDirty?: boolean;
-    disableManualEntry?: boolean;
-    autoFixYear?: boolean;
-    placeholder?: string;
-    inputClassName?: string;
-    onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
-    shouldUpdateDateOnMonthYearChange?: boolean;
-    granularity?: DatePickerGranularity;
-    format?: string;
+  ref?: Ref<DatePickerInputHandle & HTMLDivElement>;
+  disableDropdown?: boolean;
+  isClearable?: boolean;
+  isClearableIfDisabled?: boolean;
+  className?: string;
+  todayIcon?: DatePickerTodayIcon;
+  todayIconButtonSize?: DatePickerTodayIconButtonSize;
+  todayIconButtonComponent?: DatePickerTodayIconButtonComponent;
+  todayIconPlacement?: DatePickerTodayIconPlacement;
+  isDirty?: boolean;
+  disableManualEntry?: boolean;
+  autoFixYear?: boolean;
+  placeholder?: string;
+  inputClassName?: string;
+  onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
+  shouldUpdateDateOnMonthYearChange?: boolean;
+  granularity?: DatePickerGranularity;
+  format?: string;
 }
-export interface DatePickerProps extends Omit<DatePickerBaseProps, "value" | "onChange" | "minValue" | "maxValue"> {
-    value?: string | null;
-    onChange?: (value: string | null) => void;
-    fullIso?: boolean;
-    minValue?: DateValue | string;
-    maxValue?: DateValue | string;
-    renderStaticInput?: boolean;
+interface DatePickerProps extends Omit<DatePickerBaseProps, "value" | "onChange" | "minValue" | "maxValue"> {
+  value?: string | null;
+  onChange?: (value: string | null) => void;
+  fullIso?: boolean;
+  minValue?: DateValue | string;
+  maxValue?: DateValue | string;
+  renderStaticInput?: boolean;
 }
-export type ControlledDatePickerProps<TFieldValues extends FieldValues> = ControlProps<DatePickerProps, TFieldValues>;
-export declare const DatePicker: <TFieldValues extends FieldValues>({ fullIso, granularity, minValue, maxValue, renderStaticInput, ...props }: ControlledDatePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
-export {};
+type ControlledDatePickerProps<TFieldValues extends FieldValues> = ControlProps<DatePickerProps, TFieldValues>;
+declare const DatePickerComponent: <TFieldValues extends FieldValues>({ fullIso, granularity, minValue, maxValue, renderStaticInput, ...props }: ControlledDatePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+declare const DatePicker: typeof DatePickerComponent;
+//#endregion
+export { ControlledDatePickerProps, DatePicker, DatePickerProps };

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

@@ -15,15 +15,14 @@ import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
 import { InputFrame } from "../../Skeleton/InputFrame.js";
 import { useStaticInputHandoff } from "../../shared/useStaticInputHandoff.js";
 import { clsx } from "clsx";
-import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useDatePicker, useLocale } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
 import { createCalendar, getLocalTimeZone, toCalendarDate, today } from "@internationalized/date";
-import { DateTime } from "luxon";
 import { useCalendarState, useDatePickerState } from "react-stately";
 //#region src/components/inputs/DateTime/DatePicker/DatePicker.tsx
-var DatePickerBase = (props) => {
+const 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, isClearableIfDisabled, todayIcon: todayIconProp, todayIconButtonSize: todayIconButtonSizeProp, todayIconButtonComponent: todayIconButtonComponentProp, todayIconPlacement: todayIconPlacementProp, shouldForceLeadingZeros: shouldForceLeadingZerosProp, disableManualEntry: disableManualEntryProp, shouldUpdateDateOnMonthYearChange: shouldUpdateDateOnMonthYearChangeProp, granularity: granularityProp, autoFixYear: autoFixYearProp, format, ...rest } = props;
 	const as = asProp ?? ui.input.as;
@@ -88,17 +87,17 @@ var DatePickerBase = (props) => {
 		...rest,
 		shouldForceLeadingZeros,
 		value: normalizedValue,
-		onChange: (val_0) => {
-			let normalizedValue_0 = normalizeDatePickerValue(val_0);
-			if (val_0) normalizedValue_0 = normalizeByGranularity(val_0);
-			if (normalizedValue_0 && (rest.minValue && normalizedValue_0 < rest?.minValue || rest?.maxValue && normalizedValue_0 > rest?.maxValue)) {
+		onChange: (val) => {
+			let normalizedValue = normalizeDatePickerValue(val);
+			if (val) normalizedValue = normalizeByGranularity(val);
+			if (normalizedValue && (rest.minValue && normalizedValue < rest?.minValue || rest?.maxValue && normalizedValue > rest?.maxValue)) {
 				state.setValue(state.value);
 				return;
 			}
-			onChange?.(normalizedValue_0);
-			dialogState.setValue(normalizedValue_0);
-			if (normalizedValue_0) {
-				calendarState.setFocusedDate(normalizedValue_0);
+			onChange?.(normalizedValue);
+			dialogState.setValue(normalizedValue);
+			if (normalizedValue) {
+				calendarState.setFocusedDate(normalizedValue);
 				return;
 			}
 			calendarState.setFocusedDate(today(effectiveTimeZone));
@@ -139,7 +138,8 @@ var DatePickerBase = (props) => {
 	};
 	const onMonthYearChange = (selectedDate) => {
 		if (!(shouldUpdateDateOnMonthYearChange || granularity !== "day")) return;
-		const updatedDate = normalizeByGranularity((dialogState.value || state.value || today(effectiveTimeZone)).set({
+		const baseDate = dialogState.value || state.value || today(effectiveTimeZone);
+		const updatedDate = normalizeByGranularity(baseDate.set({
 			year: selectedDate.year,
 			month: selectedDate.month
 		}));
@@ -266,7 +266,7 @@ var DatePickerBase = (props) => {
 		})
 	});
 };
-var DatePickerInner = ({ fullIso = true, granularity = "day", minValue, maxValue, renderStaticInput, isFormControlDisabled, ...props }) => {
+const DatePickerInner = ({ fullIso = true, granularity = "day", minValue, maxValue, renderStaticInput, isFormControlDisabled, ...props }) => {
 	const ui = UIConfig.useConfig();
 	const datePickerInputContentRowCva = UIOverrides.useCva("datePickerInput.contentRowCva", datePickerInputContentRowDefinition);
 	const { locale } = useLocale();
@@ -281,38 +281,45 @@ var DatePickerInner = ({ fullIso = true, granularity = "day", minValue, maxValue
 			const container = input.getContainer?.() ?? input;
 			return container instanceof HTMLElement ? getStaticDateTimeFocusTarget(container, staticTarget) : null;
 		},
-		getPressTarget: (input_0) => {
-			const container_0 = input_0.getContainer?.() ?? input_0;
-			if (!(container_0 instanceof HTMLElement)) return null;
-			return container_0.querySelector("[data-static-press-action]");
+		getPressTarget: (input) => {
+			const container = input.getContainer?.() ?? input;
+			if (!(container instanceof HTMLElement)) return null;
+			return container.querySelector("[data-static-press-action]");
 		}
 	});
 	const normalizedValue = props.value ?? null;
-	const normalizeByGranularity = (date) => {
+	const normalizeByGranularity = useCallback((date) => {
 		if (granularity === "year") return date.set({
 			month: 1,
 			day: 1
 		});
 		if (granularity === "month") return date.set({ day: 1 });
 		return date;
-	};
+	}, [granularity]);
 	const formatCalendarDate = (calendarDate) => {
 		if (calendarDate === null) return null;
 		const normalizedDate = normalizeByGranularity(calendarDate);
 		if (fullIso) return DateTimeUtils.fromCalendarDateToUTCISO(normalizedDate);
-		const date_0 = DateTimeUtils.fromDateValueToLocal(normalizedDate, "UTC");
-		return DateTime.fromJSDate(date_0, { zone: "UTC" }).toISODate();
+		return DateTimeUtils.fromDateValueToLocal(normalizedDate, "UTC").toISOString().slice(0, 10);
 	};
-	const parseCalendarDate = (formattedDate) => {
+	const parseCalendarDate = useCallback((formattedDate) => {
 		if (formattedDate == null) return null;
-		if (fullIso) return normalizeByGranularity(DateTimeUtils.fromUTCISOToCalendarDate(formattedDate));
-		const date_1 = DateTime.fromISO(formattedDate, { zone: "UTC" }).toJSDate();
-		return normalizeByGranularity(toCalendarDate(DateTimeUtils.fromLocalToZonedDateTime(date_1, "UTC")));
-	};
-	const dateLimits = {
+		if (fullIso) {
+			const parsedDate = DateTimeUtils.fromUTCISOToCalendarDate(formattedDate);
+			return normalizeByGranularity(parsedDate);
+		}
+		const date = /* @__PURE__ */ new Date(`${formattedDate}T00:00:00.000Z`);
+		const zonedDateTime = DateTimeUtils.fromLocalToZonedDateTime(date, "UTC");
+		return normalizeByGranularity(toCalendarDate(zonedDateTime));
+	}, [fullIso, normalizeByGranularity]);
+	const dateLimits = useMemo(() => ({
 		minValue: typeof minValue === "string" ? parseCalendarDate(minValue) : minValue,
 		maxValue: typeof maxValue === "string" ? parseCalendarDate(maxValue) : maxValue
-	};
+	}), [
+		minValue,
+		maxValue,
+		parseCalendarDate
+	]);
 	if (!renderInput) {
 		const dateValue = normalizedValue ? parseCalendarDate(normalizedValue) : null;
 		const as = props.as ?? ui.input.as;
@@ -386,21 +393,21 @@ var DatePickerInner = ({ fullIso = true, granularity = "day", minValue, maxValue
 		onChange: (value) => props.onChange?.(formatCalendarDate(value))
 	});
 };
-var DatePicker = ({ fullIso = true, granularity = "day", minValue, maxValue, renderStaticInput, ...props }) => {
+const DatePickerComponent = ({ fullIso = true, granularity = "day", minValue, maxValue, renderStaticInput, ...props }) => {
 	if ("field" in props && props.field) {
 		const { field, ref, ...innerProps } = props;
 		const controlWithOptions = field.form;
 		return /* @__PURE__ */ jsx(FieldController, {
 			control: field.form,
 			name: field.name,
-			render: ({ field: field_0, fieldState: { error, isDirty } }) => /* @__PURE__ */ jsx(DatePickerInner, {
+			render: ({ field, fieldState: { error, isDirty } }) => /* @__PURE__ */ jsx(DatePickerInner, {
 				...innerProps,
-				ref: mergeRefs(ref, field_0.ref),
-				value: field_0.value ?? null,
-				onChange: (value) => field_0.onChange(value ?? null),
-				onBlur: field_0.onBlur,
+				ref: mergeRefs(ref, field.ref),
+				value: field.value ?? null,
+				onChange: (value) => field.onChange(value ?? null),
+				onBlur: field.onBlur,
 				isDirty,
-				isDisabled: field_0.disabled || props.isDisabled,
+				isDisabled: field.disabled || props.isDisabled,
 				isFormControlDisabled: !!controlWithOptions._options?.disabled,
 				error: props.error ?? error?.message,
 				fullIso,
@@ -420,5 +427,6 @@ var DatePicker = ({ fullIso = true, granularity = "day", minValue, maxValue, ren
 		renderStaticInput
 	});
 };
+const DatePicker = memo(DatePickerComponent);
 //#endregion
 export { DatePicker };

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

@@ -1,46 +1,49 @@
-import { CalendarDate } from '@internationalized/date';
-import { FocusEvent, Ref } from 'react';
-import { DateValue } from 'react-aria';
-import { FieldValues } from '../../shared/form.binding';
-import { DateRangePickerStateOptions } from 'react-stately';
-import { DatePickerInputHandle } from '../shared/DatePickerInput';
-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';
+import { FieldValues } from "../../shared/form.binding.js";
+import { ControlProps } from "../../shared/form.types.js";
+import { InputVariantProps } from "../../shared/input.cva.js";
+import { FormFieldProps } from "../../FormField/FormField.js";
+import { DatePickerTodayIcon, DatePickerTodayIconButtonComponent, DatePickerTodayIconButtonSize, DatePickerTodayIconPlacement } from "../shared/datePicker.types.js";
+import { DatePickerInputHandle } from "../shared/DatePickerInput.js";
+import { FocusEvent, Ref } from "react";
+import { DateValue } from "react-aria";
+import { CalendarDate } from "@internationalized/date";
+import { DateRangePickerStateOptions } from "react-stately";
+//#region src/components/inputs/DateTime/DateRangePicker/DateRangePicker.d.ts
 interface DateRangePickerBaseProps extends FormFieldProps, InputVariantProps, Omit<DateRangePickerStateOptions<CalendarDate>, "granularity" | "shouldCloseOnSelect" | "label" | "onBlur"> {
-    ref?: Ref<DatePickerInputHandle & HTMLDivElement>;
-    disableDropdown?: boolean;
-    isClearable?: boolean;
-    isClearableIfDisabled?: boolean;
-    hideSidebar?: boolean;
-    className?: string;
-    todayIcon?: DatePickerTodayIcon;
-    todayIconButtonSize?: DatePickerTodayIconButtonSize;
-    todayIconButtonComponent?: DatePickerTodayIconButtonComponent;
-    todayIconPlacement?: DatePickerTodayIconPlacement;
-    isDirty?: boolean;
-    disableManualEntry?: boolean;
-    autoFixYear?: boolean;
-    placeholder?: string;
-    inputClassName?: string;
-    onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
-    allowPartialRange?: boolean;
+  ref?: Ref<DatePickerInputHandle & HTMLDivElement>;
+  disableDropdown?: boolean;
+  isClearable?: boolean;
+  isClearableIfDisabled?: boolean;
+  hideSidebar?: boolean;
+  className?: string;
+  todayIcon?: DatePickerTodayIcon;
+  todayIconButtonSize?: DatePickerTodayIconButtonSize;
+  todayIconButtonComponent?: DatePickerTodayIconButtonComponent;
+  todayIconPlacement?: DatePickerTodayIconPlacement;
+  isDirty?: boolean;
+  disableManualEntry?: boolean;
+  autoFixYear?: boolean;
+  placeholder?: string;
+  inputClassName?: string;
+  onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
+  allowPartialRange?: boolean;
 }
-export interface DateRangePickerProps extends Omit<DateRangePickerBaseProps, "value" | "onChange" | "minValue" | "maxValue"> {
-    value?: {
-        start: string | null;
-        end: string | null;
-    } | null;
-    onChange?: (value: {
-        start: string | null;
-        end: string | null;
-    } | null) => void;
-    fullIso?: boolean;
-    minValue?: DateValue | string;
-    maxValue?: DateValue | string;
-    renderStaticInput?: boolean;
+interface DateRangePickerProps extends Omit<DateRangePickerBaseProps, "value" | "onChange" | "minValue" | "maxValue"> {
+  value?: {
+    start: string | null;
+    end: string | null;
+  } | null;
+  onChange?: (value: {
+    start: string | null;
+    end: string | null;
+  } | null) => void;
+  fullIso?: boolean;
+  minValue?: DateValue | string;
+  maxValue?: DateValue | string;
+  renderStaticInput?: boolean;
 }
-export type ControlledDateRangePickerProps<TFieldValues extends FieldValues> = ControlProps<DateRangePickerProps, TFieldValues>;
-export declare const DateRangePicker: <TFieldValues extends FieldValues>({ fullIso, minValue, maxValue, renderStaticInput, ...props }: ControlledDateRangePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
-export {};
+type ControlledDateRangePickerProps<TFieldValues extends FieldValues> = ControlProps<DateRangePickerProps, TFieldValues>;
+declare const DateRangePickerComponent: <TFieldValues extends FieldValues>({ fullIso, minValue, maxValue, renderStaticInput, ...props }: ControlledDateRangePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+declare const DateRangePicker: typeof DateRangePickerComponent;
+//#endregion
+export { ControlledDateRangePickerProps, DateRangePicker, DateRangePickerProps };