@povio/ui 2.2.9-rc.25 → 2.2.9-rc.27

package/dist/components/buttons/Button/Button.d.ts

@@ -23,6 +23,7 @@ export type ButtonProps<IconOnly extends boolean = false> = ButtonVariantProps &
     noDisableWhenLoading?: boolean;
     iconClassName?: string;
     contentRef?: Ref<HTMLElement>;
+    staticRender?: boolean;
 };
-export declare const Button: <IconOnly extends boolean = false>({ icon: Icon, iconPosition, children, isLoading, className, link, iconClassName, noDisableWhenLoading, contentRef, ...props }: ButtonProps<IconOnly>) => import("react/jsx-runtime").JSX.Element;
+export declare const Button: <IconOnly extends boolean = false>({ icon: Icon, iconPosition, children, isLoading, className, link, iconClassName, noDisableWhenLoading, contentRef, staticRender, ...props }: ButtonProps<IconOnly>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/buttons/Button/Button.js

@@ -7,10 +7,11 @@ import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { Button, Link, ToggleButton } from "react-aria-components";
 //#region src/components/buttons/Button/Button.tsx
-var Button$1 = ({ icon: Icon, iconPosition, children, isLoading, className, link, iconClassName, noDisableWhenLoading, contentRef, ...props }) => {
+var Button$1 = ({ icon: Icon, iconPosition, children, isLoading, className, link, iconClassName, noDisableWhenLoading, contentRef, staticRender, ...props }) => {
 	const linkContext = LinkContext.useLinkContext();
 	const uiConfig = UIConfig.useConfig();
-	const { variant = uiConfig.button.variant, size = uiConfig.button.size } = props;
+	const variant = props.variant ?? uiConfig.button.variant;
+	const size = props.size ?? uiConfig.button.size;
 	const buttonCva = UIStyle.useCva("button.cva", button);
 	const buttonSizeCva = UIStyle.useCva("button.sizeCva", buttonSize);
 	const buttonContentCva = UIStyle.useCva("button.contentCva", buttonContent);
@@ -22,45 +23,53 @@ var Button$1 = ({ icon: Icon, iconPosition, children, isLoading, className, link
 		return Button;
 	})();
 	if (link && !link.to && link.href) link.to = link.href;
-	return /* @__PURE__ */ jsx(Component, {
+	const resolvedClassName = clsx(buttonCva({
 		...props,
-		...link,
-		isDisabled: props.isDisabled || isLoading && !noDisableWhenLoading,
-		className: clsx(buttonCva({
+		variant,
+		size,
+		className
+	}), buttonSizeCva({
+		...props,
+		variant,
+		size
+	}), buttonContentCva({
+		...props,
+		variant,
+		size,
+		iconPosition: !Icon ? "none" : iconPosition
+	}));
+	const content = /* @__PURE__ */ jsx(ButtonContent, {
+		ref: contentRef,
+		isLoading,
+		icon: Icon,
+		text: children,
+		hideText: props.iconOnly,
+		iconPosition,
+		iconClassName: buttonIconSizeCva({
 			...props,
 			variant,
 			size,
-			className
-		}), buttonSizeCva({
+			className: iconClassName
+		}),
+		typography: typographyMap({
 			...props,
 			variant,
 			size
-		}), buttonContentCva({
-			...props,
-			variant,
-			size,
-			iconPosition: !Icon ? "none" : iconPosition
-		})),
-		children: /* @__PURE__ */ jsx(ButtonContent, {
-			ref: contentRef,
-			isLoading,
-			icon: Icon,
-			text: children,
-			hideText: props.iconOnly,
-			iconPosition,
-			iconClassName: buttonIconSizeCva({
-				...props,
-				variant,
-				size,
-				className: iconClassName
-			}),
-			typography: typographyMap({
-				...props,
-				variant,
-				size
-			})
 		})
 	});
+	if (staticRender) return /* @__PURE__ */ jsx("div", {
+		"aria-label": props.iconOnly ? children : void 0,
+		"aria-disabled": props.isDisabled || void 0,
+		className: resolvedClassName,
+		children: content
+	});
+	return /* @__PURE__ */ jsx(Component, {
+		...props,
+		...link,
+		isDisabled: props.isDisabled || isLoading && !noDisableWhenLoading,
+		className: resolvedClassName,
+		children: content
+	});
 };
 //#endregion
 export { Button$1 as Button };

package/dist/components/buttons/InlineIconButton/InlineIconButton.d.ts

@@ -8,5 +8,6 @@ export interface InlineIconButtonProps extends Omit<AriaButtonProps, "children">
     link?: LinkNavigationProps;
     ref?: RefObject<HTMLButtonElement | HTMLAnchorElement | null>;
     disableTooltip?: boolean;
+    staticRender?: boolean;
 }
 export declare const InlineIconButton: ({ label, size, ...props }: InlineIconButtonProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -6,11 +6,12 @@ import { renderDatePickerTodayIcon } from "../shared/datePickerTodayIcon.js";
 import { DatePickerInput } from "../shared/DatePickerInput.js";
 import { DateTimeDialog } from "../shared/DateTimeDialog.js";
 import { DateTimeDialogFooter } from "../shared/DateTimeDialogFooter.js";
+import { DateTimeUtils } from "../../../../utils/date-time.utils.js";
+import { getStaticCalendarDateSegments } from "../shared/staticDateTimeSegments.js";
 import { FormField } from "../../FormField/FormField.js";
-import { StaticInput } from "../../shared/StaticInput.js";
 import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
+import { InputFrame } from "../../Skeleton/InputFrame.js";
 import { useDebounceCallback } from "../../../../hooks/useDebounceCallback.js";
-import { DateTimeUtils } from "../../../../utils/date-time.utils.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
@@ -24,7 +25,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 +145,7 @@ var DatePickerBase = (props) => {
 				headerProps,
 				todayIcon,
 				todayIconButtonSize,
+				todayIconPlacement,
 				onOpenDropdown: () => state.toggle(),
 				placeholder,
 				className: inputClassName
@@ -207,51 +209,54 @@ var DatePicker = ({ fullIso = true, minValue, maxValue, renderStaticInput, ...pr
 		setShouldFocus(false);
 	}, [renderInput, shouldFocus]);
 	if (!renderInput) {
+		const dateValue = rawValue ? parseCalendarDate(rawValue) : null;
 		const as = props.as ?? ui.input.as;
 		const size = props.size ?? ui.input.size;
 		const variant = props.variant ?? ui.input.variant;
 		const hideLabel = props.hideLabel ?? ui.input.hideLabel;
 		const isHeaderHidden = props.isHeaderHidden || as === "inline" || as === "filter" || as === "floating";
-		let isDisabled = !!props.isDisabled;
-		if (isFormControlDisabled) isDisabled = true;
+		const isDisabled = isFormControlDisabled || !!props.isDisabled;
 		const todayIcon = props.todayIcon ?? ui.dateInput.todayIcon;
 		const todayIconButtonSize = props.todayIconButtonSize ?? ui.dateInput.todayIconButtonSize;
 		const disableManualEntry = props.disableManualEntry ?? ui.dateInput.disableManualEntry;
 		const showDropdown = !props.disableDropdown || disableManualEntry;
-		const staticDateValue = rawValue ? parseCalendarDate(rawValue) : null;
-		const displayValue = staticDateValue ? DateTimeUtils.formatCalendarDateLocalized(staticDateValue, locale, { shouldForceLeadingZeros }) : "";
-		const staticPlaceholder = props.placeholder ?? DateTimeUtils.getDatePlaceholder(locale, { shouldForceLeadingZeros });
-		return /* @__PURE__ */ jsx(StaticInput, {
+		const staticSegments = getStaticCalendarDateSegments({
+			value: dateValue,
+			locale,
+			placeholder: props.placeholder,
+			shouldForceLeadingZeros,
+			isDisabled,
+			hidePlaceholder: as === "floating" && !dateValue
+		});
+		return /* @__PURE__ */ jsx(InputFrame, {
 			...props,
-			onInteract: (focus) => {
-				setShouldFocus(focus);
-				setRenderInput(true);
-			},
-			className: clsx("relative inline-flex w-full flex-col text-left", props.className),
-			as,
-			size,
-			variant,
-			applyMinInputWidth: true,
-			hideLabel,
 			isHeaderHidden,
+			hideLabel,
 			isDisabled,
-			placeholder: staticPlaceholder,
-			displayValue,
-			isEmpty: !displayValue,
+			className: clsx("relative inline-flex w-full flex-col text-left", props.className),
+			inputClassName: clsx("min-w-input-width-min-width", props.inputClassName),
+			contentClassName: datePickerInputContentRowCva({ size }),
 			dataAttributes: {
-				dataIsEmpty: staticDateValue === null,
-				dataIsFilled: staticDateValue !== null,
+				dataIsEmpty: dateValue === null,
+				dataIsFilled: dateValue !== null,
 				dataIsDirty: props.isDirty,
 				dataIsRequired: props.isRequired,
 				dataIsDisabled: isDisabled,
 				dataDisabled: isDisabled,
 				dataInvalid: !!props.error,
-				dataHasSelection: staticDateValue !== null
+				dataHasSelection: dateValue !== null
+			},
+			renderStatic: true,
+			onStaticInteract: (focus) => {
+				setShouldFocus(focus);
+				setRenderInput(true);
 			},
-			contentRowClassName: datePickerInputContentRowCva({ size }),
-			leadingContent: renderDatePickerTodayIcon(todayIcon, todayIconButtonSize),
-			leadingContentClassName: "ml-0!",
-			trailingContent: showDropdown ? ui.dateInput.calendarIcon : void 0
+			as,
+			size,
+			variant,
+			actionContent: renderDatePickerTodayIcon(todayIcon, todayIconButtonSize),
+			trailingContent: showDropdown ? ui.dateInput.calendarIcon : void 0,
+			children: staticSegments
 		});
 	}
 	if ("formControl" in props && props.formControl) {

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

@@ -7,11 +7,12 @@ import { renderDatePickerTodayIcon } from "../shared/datePickerTodayIcon.js";
 import { DatePickerInput } from "../shared/DatePickerInput.js";
 import { DateTimeDialog } from "../shared/DateTimeDialog.js";
 import { DateTimeDialogFooter } from "../shared/DateTimeDialogFooter.js";
+import { DateTimeUtils } from "../../../../utils/date-time.utils.js";
+import { getStaticDateRangeSegments } from "../shared/staticDateTimeSegments.js";
 import { FormField } from "../../FormField/FormField.js";
-import { StaticInput } from "../../shared/StaticInput.js";
 import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
+import { InputFrame } from "../../Skeleton/InputFrame.js";
 import { useDebounceCallback } from "../../../../hooks/useDebounceCallback.js";
-import { DateTimeUtils } from "../../../../utils/date-time.utils.js";
 import { RangeCalendar } from "../shared/RangeCalendar.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
@@ -28,7 +29,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 +490,7 @@ var DateRangePickerBase = (props) => {
 				headerProps,
 				todayIcon,
 				todayIconButtonSize,
+				todayIconPlacement,
 				isDirty,
 				disableManualEntry,
 				autoFixYear,
@@ -605,59 +607,36 @@ var DateRangePicker = ({ fullIso = true, minValue, maxValue, renderStaticInput,
 		setShouldFocus(false);
 	}, [renderInput, shouldFocus]);
 	if (!renderInput) {
+		const startDateValue = parseCalendarDate(rawValue?.start ?? null);
+		const endDateValue = parseCalendarDate(rawValue?.end ?? null);
+		const hasProvidedRangeValue = !!(rawValue?.start || rawValue?.end);
 		const as = props.as ?? ui.input.as;
 		const size = props.size ?? ui.input.size;
 		const variant = props.variant ?? ui.input.variant;
 		const hideLabel = props.hideLabel ?? ui.input.hideLabel;
 		const isHeaderHidden = props.isHeaderHidden || as === "inline" || as === "filter" || as === "floating";
-		let isDisabled = !!props.isDisabled;
-		if (isFormControlDisabled) isDisabled = true;
+		const isDisabled = isFormControlDisabled || !!props.isDisabled;
 		const todayIcon = props.todayIcon ?? ui.dateInput.todayIcon;
 		const todayIconButtonSize = props.todayIconButtonSize ?? ui.dateInput.todayIconButtonSize;
 		const disableManualEntry = props.disableManualEntry ?? ui.dateInput.disableManualEntry;
 		const showDropdown = !props.disableDropdown || disableManualEntry;
-		const defaultDatePlaceholder = DateTimeUtils.getDatePlaceholder(locale, { shouldForceLeadingZeros });
-		const hasProvidedRangeValue = !!(rawValue?.start || rawValue?.end);
-		const formatStaticDate = (value) => {
-			if (!value) return "";
-			const parsedDate = parseCalendarDate(value);
-			if (!parsedDate) return "";
-			return DateTimeUtils.formatCalendarDateLocalized(parsedDate, locale, { shouldForceLeadingZeros });
-		};
-		const start = formatStaticDate(rawValue?.start ?? null);
-		const end = formatStaticDate(rawValue?.end ?? null);
-		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
-				})
-			]
+		const staticSegments = getStaticDateRangeSegments({
+			start: startDateValue,
+			end: endDateValue,
+			locale,
+			placeholder: props.placeholder,
+			shouldForceLeadingZeros,
+			isDisabled,
+			hidePlaceholder: as === "floating" && !hasProvidedRangeValue
 		});
-		return /* @__PURE__ */ jsx(StaticInput, {
+		return /* @__PURE__ */ jsx(InputFrame, {
 			...props,
-			onInteract: (focus) => {
-				setShouldFocus(focus);
-				setRenderInput(true);
-			},
-			className: clsx("relative inline-flex w-full flex-col text-left", props.className),
-			as,
-			size,
-			variant,
-			applyMinInputWidth: true,
-			hideLabel,
 			isHeaderHidden,
+			hideLabel,
 			isDisabled,
-			displayValue,
+			className: clsx("relative inline-flex w-full flex-col text-left", props.className),
+			inputClassName: clsx("min-w-input-width-min-width", props.inputClassName),
+			contentClassName: datePickerInputContentRowCva({ size }),
 			dataAttributes: {
 				dataIsEmpty: !hasProvidedRangeValue,
 				dataIsFilled: hasProvidedRangeValue,
@@ -668,10 +647,17 @@ var DateRangePicker = ({ fullIso = true, minValue, maxValue, renderStaticInput,
 				dataInvalid: !!props.error,
 				dataHasSelection: hasProvidedRangeValue
 			},
-			contentRowClassName: datePickerInputContentRowCva({ size }),
-			leadingContent: renderDatePickerTodayIcon(todayIcon, todayIconButtonSize),
-			leadingContentClassName: "ml-0!",
-			trailingContent: showDropdown ? ui.dateInput.calendarIcon : void 0
+			renderStatic: true,
+			onStaticInteract: (focus) => {
+				setShouldFocus(focus);
+				setRenderInput(true);
+			},
+			as,
+			size,
+			variant,
+			actionContent: renderDatePickerTodayIcon(todayIcon, todayIconButtonSize),
+			trailingContent: showDropdown ? ui.dateInput.calendarIcon : void 0,
+			children: staticSegments
 		});
 	}
 	if ("formControl" in props && props.formControl) {

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

@@ -6,12 +6,14 @@ import { renderDatePickerTodayIcon } from "../shared/datePickerTodayIcon.js";
 import { DatePickerInput } from "../shared/DatePickerInput.js";
 import { DateTimeDialog } from "../shared/DateTimeDialog.js";
 import { DateTimeDialogFooter } from "../shared/DateTimeDialogFooter.js";
+import { DateTimeUtils } from "../../../../utils/date-time.utils.js";
+import { getStaticCalendarDateTimeSegments } from "../shared/staticDateTimeSegments.js";
 import { FormField } from "../../FormField/FormField.js";
-import { StaticInput } from "../../shared/StaticInput.js";
 import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
+import { InputFrame } from "../../Skeleton/InputFrame.js";
 import { useDebounceCallback } from "../../../../hooks/useDebounceCallback.js";
-import { DateTimeUtils } from "../../../../utils/date-time.utils.js";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
 import { useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { useDatePicker, useLocale } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
@@ -21,7 +23,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 +160,7 @@ var DateTimePickerBase = (props) => {
 				headerProps,
 				todayIcon,
 				todayIconButtonSize,
+				todayIconPlacement,
 				isRequired,
 				disableManualEntry,
 				autoFixYear,
@@ -220,51 +223,54 @@ var DateTimePicker = ({ fullIso = true, renderStaticInput, ...props }) => {
 		setShouldFocus(false);
 	}, [renderInput, shouldFocus]);
 	if (!renderInput) {
+		const dateTimeValue = rawValue ? parseDateValue(rawValue) : null;
 		const as = props.as ?? ui.input.as;
 		const size = props.size ?? ui.input.size;
 		const variant = props.variant ?? ui.input.variant;
 		const hideLabel = props.hideLabel ?? ui.input.hideLabel;
 		const isHeaderHidden = props.isHeaderHidden || as === "inline" || as === "filter" || as === "floating";
-		let isDisabled = !!props.isDisabled;
-		if (isFormControlDisabled) isDisabled = true;
+		const isDisabled = isFormControlDisabled || !!props.isDisabled;
 		const todayIcon = props.todayIcon ?? ui.dateInput.todayIcon;
 		const todayIconButtonSize = props.todayIconButtonSize ?? ui.dateInput.todayIconButtonSize;
 		const disableManualEntry = props.disableManualEntry ?? ui.dateInput.disableManualEntry;
 		const showDropdown = !props.disableDropdown || disableManualEntry;
-		const staticDateTimeValue = rawValue ? parseDateValue(rawValue) : null;
-		const displayValue = staticDateTimeValue && "hour" in staticDateTimeValue ? DateTimeUtils.formatCalendarDateTimeLocalized(staticDateTimeValue, locale, { shouldForceLeadingZeros }) : "";
-		const staticPlaceholder = props.placeholder ?? DateTimeUtils.getDateTimePlaceholder(locale, { shouldForceLeadingZeros });
-		return /* @__PURE__ */ jsx(StaticInput, {
+		const staticSegments = getStaticCalendarDateTimeSegments({
+			value: dateTimeValue,
+			locale,
+			placeholder: props.placeholder,
+			shouldForceLeadingZeros,
+			isDisabled,
+			hidePlaceholder: as === "floating" && !dateTimeValue
+		});
+		return /* @__PURE__ */ jsx(InputFrame, {
 			...props,
-			onInteract: (focus) => {
-				setShouldFocus(focus);
-				setRenderInput(true);
-			},
-			className: props.className ? `relative inline-flex w-full flex-col text-left ${props.className}` : "relative inline-flex w-full flex-col text-left",
-			as,
-			size,
-			variant,
-			applyMinInputWidth: true,
-			hideLabel,
 			isHeaderHidden,
+			hideLabel,
 			isDisabled,
-			placeholder: staticPlaceholder,
-			displayValue,
-			isEmpty: !displayValue,
+			className: clsx("relative inline-flex w-full flex-col text-left", props.className),
+			inputClassName: clsx("min-w-input-width-min-width", props.inputClassName),
+			contentClassName: datePickerInputContentRowCva({ size }),
 			dataAttributes: {
-				dataIsEmpty: staticDateTimeValue === null,
-				dataIsFilled: staticDateTimeValue !== null,
+				dataIsEmpty: dateTimeValue === null,
+				dataIsFilled: dateTimeValue !== null,
 				dataIsDirty: props.isDirty,
 				dataIsRequired: props.isRequired,
 				dataIsDisabled: isDisabled,
 				dataDisabled: isDisabled,
 				dataInvalid: !!props.error,
-				dataHasSelection: staticDateTimeValue !== null
+				dataHasSelection: dateTimeValue !== null
 			},
-			contentRowClassName: datePickerInputContentRowCva({ size }),
-			leadingContent: renderDatePickerTodayIcon(todayIcon, todayIconButtonSize),
-			leadingContentClassName: "ml-0!",
-			trailingContent: showDropdown ? ui.dateInput.dateTimeIcon : void 0
+			renderStatic: true,
+			onStaticInteract: (focus) => {
+				setShouldFocus(focus);
+				setRenderInput(true);
+			},
+			as,
+			size,
+			variant,
+			actionContent: renderDatePickerTodayIcon(todayIcon, todayIconButtonSize),
+			trailingContent: showDropdown ? ui.dateInput.dateTimeIcon : void 0,
+			children: staticSegments
 		});
 	}
 	if ("formControl" in props && props.formControl) {

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

@@ -2,11 +2,12 @@ import { UIConfig } from "../../../../config/uiConfig.context.js";
 import { TimePickerForm } from "../shared/TimePickerForm.js";
 import { DateTimeDialog } from "../shared/DateTimeDialog.js";
 import { DateTimeDialogFooter } from "../shared/DateTimeDialogFooter.js";
+import { DateTimeUtils } from "../../../../utils/date-time.utils.js";
+import { getStaticTimeSegments } from "../shared/staticDateTimeSegments.js";
 import { FormField } from "../../FormField/FormField.js";
-import { StaticInput } from "../../shared/StaticInput.js";
 import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
+import { InputFrame } from "../../Skeleton/InputFrame.js";
 import { useDebounceCallback } from "../../../../hooks/useDebounceCallback.js";
-import { DateTimeUtils } from "../../../../utils/date-time.utils.js";
 import { TimePickerInput } from "../shared/TimePickerInput.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
@@ -168,46 +169,49 @@ var TimePicker = ({ renderStaticInput, ...props }) => {
 		setShouldFocus(false);
 	}, [renderInput, shouldFocus]);
 	if (!renderInput) {
+		const timeValue = rawValue ? parseTimeValue(rawValue) : null;
 		const as = props.as ?? ui.input.as;
 		const size = props.size ?? ui.input.size;
 		const variant = props.variant ?? ui.input.variant;
 		const hideLabel = props.hideLabel ?? ui.input.hideLabel;
 		const isHeaderHidden = props.isHeaderHidden || as === "inline" || as === "filter" || as === "floating";
-		let isDisabled = !!props.isDisabled;
-		if (isFormControlDisabled) isDisabled = true;
+		const isDisabled = isFormControlDisabled || !!props.isDisabled;
 		const disableManualEntry = props.disableManualEntry ?? ui.dateInput.disableManualEntry;
 		const showDropdown = !props.disableDropdown || disableManualEntry;
-		const staticTimeValue = rawValue ? parseTimeValue(rawValue) : null;
-		const displayValue = staticTimeValue ? DateTimeUtils.formatTimeLocalized(staticTimeValue, locale) : "";
-		const staticPlaceholder = props.placeholder ?? DateTimeUtils.getTimePlaceholder(locale);
-		return /* @__PURE__ */ jsx(StaticInput, {
+		const staticSegments = getStaticTimeSegments({
+			value: timeValue,
+			locale,
+			placeholder: props.placeholder,
+			isDisabled,
+			hidePlaceholder: as === "floating" && !timeValue
+		});
+		return /* @__PURE__ */ jsx(InputFrame, {
 			...props,
-			onInteract: (focus) => {
-				setShouldFocus(focus);
-				setRenderInput(true);
-			},
-			className: clsx("relative inline-flex w-full flex-col text-left", props.className),
-			as,
-			size,
-			variant,
-			applyMinInputWidth: true,
-			hideLabel,
 			isHeaderHidden,
+			hideLabel,
 			isDisabled,
-			placeholder: staticPlaceholder,
-			displayValue,
-			isEmpty: !displayValue,
+			className: clsx("relative inline-flex w-full flex-col text-left", props.className),
+			inputClassName: clsx("min-w-input-width-min-width", props.inputClassName),
 			dataAttributes: {
-				dataIsEmpty: staticTimeValue === null,
-				dataIsFilled: staticTimeValue !== null,
+				dataIsEmpty: timeValue === null,
+				dataIsFilled: timeValue !== null,
 				dataIsDirty: props.isDirty,
 				dataIsRequired: props.isRequired,
 				dataIsDisabled: isDisabled,
 				dataDisabled: isDisabled,
 				dataInvalid: !!props.error,
-				dataHasSelection: staticTimeValue !== null
+				dataHasSelection: timeValue !== null
+			},
+			renderStatic: true,
+			onStaticInteract: (focus) => {
+				setShouldFocus(focus);
+				setRenderInput(true);
 			},
-			trailingContent: showDropdown ? ui.dateInput.timeIcon : void 0
+			as,
+			size,
+			variant,
+			trailingContent: showDropdown ? ui.dateInput.timeIcon : void 0,
+			children: staticSegments
 		});
 	}
 	if ("formControl" in props && props.formControl) {

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}`);