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

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

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

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

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

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

@@ -1,4 +1,5 @@
 import { DateFieldState, DateSegment } from '@react-stately/datepicker';
+import { HTMLAttributes, ReactNode, Ref } from 'react';
 interface DateSegmentProps {
     state: DateFieldState;
     segment: DateSegment;
@@ -8,4 +9,17 @@ interface DateSegmentProps {
 }
 export declare const getPlaceholder: (segment: DateSegment) => string | null;
 export declare const DateSegmentItem: ({ segment, state, isDisabled, timePickerOnly, hidePlaceholder }: DateSegmentProps) => import("react/jsx-runtime").JSX.Element;
+interface DateSegmentItemViewProps {
+    ref?: Ref<HTMLDivElement>;
+    segmentProps?: HTMLAttributes<HTMLDivElement>;
+    type?: DateSegment["type"];
+    text: ReactNode;
+    placeholder?: ReactNode;
+    isPlaceholder?: boolean;
+    isInputEmpty?: boolean;
+    isDisabled?: boolean;
+    timePickerOnly?: boolean;
+    hidePlaceholder?: boolean;
+}
+export declare const DateSegmentItemView: ({ ref, segmentProps, type, text, placeholder, isPlaceholder, isInputEmpty, isDisabled, timePickerOnly, hidePlaceholder, }: DateSegmentItemViewProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -15,17 +15,30 @@ var getPlaceholder = (segment) => {
 var DateSegmentItem = ({ segment, state, isDisabled, timePickerOnly, hidePlaceholder }) => {
 	const ref = useRef(null);
 	const { segmentProps } = useDateSegment(segment, state, ref);
-	const isInputEmpty = !state.value;
+	return /* @__PURE__ */ jsx(DateSegmentItemView, {
+		ref,
+		segmentProps,
+		type: segment.type,
+		text: segment.text,
+		placeholder: getPlaceholder(segment),
+		isPlaceholder: segment.isPlaceholder,
+		isInputEmpty: !state.value,
+		isDisabled,
+		timePickerOnly,
+		hidePlaceholder
+	});
+};
+var DateSegmentItemView = ({ ref, segmentProps, type, text, placeholder, isPlaceholder, isInputEmpty, isDisabled, timePickerOnly, hidePlaceholder }) => {
 	return /* @__PURE__ */ jsx("div", {
 		...segmentProps,
 		ref,
-		className: clsx("box-content rounded-input-rounding-default", isDisabled && "text-interactive-text-secondary-disabled", !isDisabled && isInputEmpty && "text-text-default-3 group-focus-within:text-text-default-1", !isDisabled && !isInputEmpty && "text-text-default-1", "focus-within:outline-1 focus-within:outline-interactive-contained-primary-idle focus-within:outline-offset-1", ["hour", "dayPeriod"].includes(segment.type) && !timePickerOnly && "ml-1", hidePlaceholder && "opacity-0"),
-		children: /* @__PURE__ */ jsxs(Fragment, { children: [segment.isPlaceholder && /* @__PURE__ */ jsx("span", {
+		className: clsx("box-content rounded-input-rounding-default", isDisabled && "text-interactive-text-secondary-disabled", !isDisabled && isInputEmpty && "text-text-default-3 group-focus-within:text-text-default-1", !isDisabled && !isInputEmpty && "text-text-default-1", "focus-within:outline-1 focus-within:outline-interactive-contained-primary-idle focus-within:outline-offset-1", type && ["hour", "dayPeriod"].includes(type) && !timePickerOnly && "ml-1", hidePlaceholder && "opacity-0"),
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [isPlaceholder && /* @__PURE__ */ jsx("span", {
 			"aria-hidden": "true",
 			className: "pointer-events-none",
-			children: getPlaceholder(segment)
-		}), segment.isPlaceholder ? "" : segment.text] })
+			children: placeholder
+		}), isPlaceholder ? "" : text] })
 	});
 };
 //#endregion
-export { DateSegmentItem, getPlaceholder };
+export { DateSegmentItem, DateSegmentItemView, getPlaceholder };

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,35 @@
+import { CalendarDate } from '@internationalized/date';
+import { DateValue, TimeValue } from 'react-aria';
+interface StaticSegmentProps {
+    isDisabled?: boolean;
+    hidePlaceholder?: boolean;
+}
+interface StaticCalendarDateSegmentsProps extends StaticSegmentProps {
+    value?: CalendarDate | null;
+    locale: string;
+    placeholder?: string;
+    shouldForceLeadingZeros?: boolean;
+}
+interface StaticCalendarDateTimeSegmentsProps extends StaticSegmentProps {
+    value?: DateValue | null;
+    locale: string;
+    placeholder?: string;
+    shouldForceLeadingZeros?: boolean;
+}
+interface StaticDateRangeSegmentsProps extends StaticSegmentProps {
+    start?: CalendarDate | null;
+    end?: CalendarDate | null;
+    locale: string;
+    placeholder?: string;
+    shouldForceLeadingZeros?: boolean;
+}
+interface StaticTimeSegmentsProps extends StaticSegmentProps {
+    value?: TimeValue | null;
+    locale: string;
+    placeholder?: string;
+}
+export declare const getStaticCalendarDateSegments: ({ value, locale, placeholder, shouldForceLeadingZeros, isDisabled, hidePlaceholder, }: StaticCalendarDateSegmentsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const getStaticCalendarDateTimeSegments: ({ value, locale, placeholder, shouldForceLeadingZeros, isDisabled, hidePlaceholder, }: StaticCalendarDateTimeSegmentsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const getStaticDateRangeSegments: ({ start, end, locale, placeholder, shouldForceLeadingZeros, isDisabled, hidePlaceholder, }: StaticDateRangeSegmentsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const getStaticTimeSegments: ({ value, locale, placeholder, isDisabled, hidePlaceholder, }: StaticTimeSegmentsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,76 @@
+import { DateSegmentItemView } from "./DateSegmentItem.js";
+import { DateTimeUtils } from "../../../../utils/date-time.utils.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/inputs/DateTime/shared/staticDateTimeSegments.tsx
+var getStaticCalendarDateSegments = ({ value, locale, placeholder, shouldForceLeadingZeros, isDisabled, hidePlaceholder }) => {
+	const hasValue = !!value;
+	return renderStaticSegments(value ? DateTimeUtils.formatCalendarDateLocalized(value, locale, { shouldForceLeadingZeros }) : placeholder ?? DateTimeUtils.getDatePlaceholder(locale, { shouldForceLeadingZeros }), {
+		isPlaceholder: !hasValue,
+		isInputEmpty: !hasValue,
+		isDisabled,
+		hidePlaceholder
+	});
+};
+var getStaticCalendarDateTimeSegments = ({ value, locale, placeholder, shouldForceLeadingZeros, isDisabled, hidePlaceholder }) => {
+	const hasValue = !!(value && "hour" in value);
+	return renderStaticSegments(hasValue ? DateTimeUtils.formatCalendarDateTimeLocalized(value, locale, { shouldForceLeadingZeros }) : placeholder ?? DateTimeUtils.getDateTimePlaceholder(locale, { shouldForceLeadingZeros }), {
+		isPlaceholder: !hasValue,
+		isInputEmpty: !hasValue,
+		isDisabled,
+		hidePlaceholder
+	});
+};
+var getStaticDateRangeSegments = ({ start, end, locale, placeholder, shouldForceLeadingZeros, isDisabled, hidePlaceholder }) => {
+	const defaultPlaceholder = placeholder ?? DateTimeUtils.getDatePlaceholder(locale, { shouldForceLeadingZeros });
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		renderStaticSegments(start ? DateTimeUtils.formatCalendarDateLocalized(start, locale, { shouldForceLeadingZeros }) : defaultPlaceholder, {
+			isPlaceholder: !start,
+			isInputEmpty: !start,
+			isDisabled,
+			hidePlaceholder: hidePlaceholder && !start
+		}),
+		/* @__PURE__ */ jsx("span", {
+			className: isDisabled ? "pointer-events-none select-none text-interactive-text-secondary-disabled" : "pointer-events-none select-none",
+			children: "–"
+		}),
+		renderStaticSegments(end ? DateTimeUtils.formatCalendarDateLocalized(end, locale, { shouldForceLeadingZeros }) : defaultPlaceholder, {
+			isPlaceholder: !end,
+			isInputEmpty: !end,
+			isDisabled,
+			hidePlaceholder: hidePlaceholder && !end
+		})
+	] });
+};
+var getStaticTimeSegments = ({ value, locale, placeholder, isDisabled, hidePlaceholder }) => {
+	const hasValue = !!value;
+	return renderStaticSegments(value ? DateTimeUtils.formatTimeLocalized(value, locale) : placeholder ?? DateTimeUtils.getTimePlaceholder(locale), {
+		isPlaceholder: !hasValue,
+		isInputEmpty: !hasValue,
+		isDisabled,
+		hidePlaceholder,
+		timePickerOnly: true
+	});
+};
+var renderStaticSegments = (value, options) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex",
+		children: tokenizeStaticSegmentText(value).map((token, index) => /* @__PURE__ */ jsx(DateSegmentItemView, {
+			type: token.type,
+			text: token.text,
+			placeholder: token.text,
+			isPlaceholder: options.isPlaceholder && token.type !== "literal",
+			isInputEmpty: options.isInputEmpty,
+			isDisabled: options.isDisabled,
+			timePickerOnly: options.timePickerOnly,
+			hidePlaceholder: options.hidePlaceholder
+		}, index))
+	});
+};
+var tokenizeStaticSegmentText = (value) => {
+	return (value.match(/(\p{Letter}+|\p{Number}+|[^\p{Letter}\p{Number}]+)/gu) ?? [value]).map((text) => ({
+		text,
+		type: /^[^\p{Letter}\p{Number}]+$/u.test(text) ? "literal" : "day"
+	}));
+};
+//#endregion
+export { getStaticCalendarDateSegments, getStaticCalendarDateTimeSegments, getStaticDateRangeSegments, getStaticTimeSegments };

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

@@ -1,15 +1,14 @@
 import { UIStyle } from "../../../../config/uiStyle.context.js";
-import { Loader } from "../../../status/Loader/Loader.js";
 import { UIConfig } from "../../../../config/uiConfig.context.js";
 import { inputBase } from "../../shared/input.cva.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 { InputContent } from "../shared/InputContent.js";
 import { getStaticNumberDisplayValue } from "../shared/numberStatic.utils.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { isValidElement, useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { Input, useLocale } from "react-aria-components";
 import { useFocusVisible, useNumberField } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
@@ -121,11 +120,6 @@ var NumberInputBase = (props) => {
 		})
 	});
 };
-var renderIconVisual = (icon) => {
-	if (!icon) return null;
-	if (isValidElement(icon)) return icon;
-	return /* @__PURE__ */ jsx(icon, { className: "size-6 text-interactive-text-secondary-idle" });
-};
 var NumberInput = ({ renderStaticInput, ...props }) => {
 	const ui = UIConfig.useConfig();
 	const { locale } = useLocale();
@@ -155,44 +149,49 @@ var NumberInput = ({ renderStaticInput, ...props }) => {
 		const isHeaderHidden = props.isHeaderHidden || as === "inline" || as === "filter" || as === "floating";
 		let isDisabled = !!props.isDisabled;
 		if (isFormControlDisabled) isDisabled = true;
-		const trailingContent = !!props.unit || !!props.isLoading || !!props.action && !props.isLoading || !!props.trailingIcon && !props.isLoading && !props.action ? /* @__PURE__ */ jsxs(Fragment, { children: [
-			props.unit && /* @__PURE__ */ jsx("span", {
-				className: "text-label-2 text-text-default-3",
-				children: props.unit
-			}),
-			props.isLoading && /* @__PURE__ */ jsx(Loader, {}),
-			!props.isLoading && props.action && renderIconVisual(props.action.icon),
-			!props.isLoading && !props.action && props.trailingIcon && renderIconVisual(props.trailingIcon)
-		] }) : void 0;
-		return /* @__PURE__ */ jsx(StaticInput, {
+		const dataAttributes = {
+			dataIsEmpty: !hasValue,
+			dataIsFilled: hasValue,
+			dataIsDirty: props.isDirty,
+			dataIsRequired: props.isRequired,
+			dataIsDisabled: isDisabled,
+			dataDisabled: isDisabled,
+			dataInvalid: !!props.error,
+			dataHasSelection: hasValue
+		};
+		return /* @__PURE__ */ jsx(InputFrame, {
 			...props,
-			onInteract: (focus) => {
+			isHeaderHidden,
+			hideLabel,
+			isDisabled,
+			className: clsx("group w-full", as === "inline" && "h-full", props.className),
+			dataAttributes,
+			renderStatic: true,
+			onStaticInteract: (focus) => {
 				setShouldFocus(focus);
 				setRenderInput(true);
 			},
+			inputClassName: props.inputClassName,
 			as,
 			size,
 			variant,
-			hideLabel,
-			isHeaderHidden,
-			isDisabled,
-			className: clsx("group w-full", as === "inline" && "h-full", props.className),
-			inputClassName: props.inputClassName,
-			placeholder: props.placeholder,
-			displayValue,
-			isEmpty: !hasValue,
-			dataAttributes: {
-				dataIsEmpty: !hasValue,
-				dataIsFilled: hasValue,
-				dataIsDirty: props.isDirty,
-				dataIsRequired: props.isRequired,
-				dataIsDisabled: props.isDisabled,
-				dataDisabled: props.isDisabled,
-				dataInvalid: !!props.error,
-				dataHasSelection: hasValue
-			},
-			leadingVisual: renderIconVisual(props.leadingIcon),
-			trailingContent
+			children: /* @__PURE__ */ jsx("input", {
+				ref: inputRef,
+				readOnly: true,
+				disabled: isDisabled,
+				tabIndex: -1,
+				value: displayValue,
+				placeholder: as === "floating" ? "" : props.placeholder,
+				className: "w-full bg-transparent outline-none placeholder:text-text-default-3 disabled:text-interactive-text-secondary-disabled",
+				"data-is-empty": dataAttributes.dataIsEmpty || void 0,
+				"data-is-filled": dataAttributes.dataIsFilled || void 0,
+				"data-is-dirty": dataAttributes.dataIsDirty || void 0,
+				"data-is-required": dataAttributes.dataIsRequired || void 0,
+				"data-is-disabled": dataAttributes.dataIsDisabled || void 0,
+				"data-disabled": dataAttributes.dataDisabled || void 0,
+				"data-invalid": dataAttributes.dataInvalid || void 0,
+				"data-has-selection": dataAttributes.dataHasSelection || void 0
+			})
 		});
 	}
 	if ("formControl" in props && props.formControl) {

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

@@ -4,9 +4,9 @@ import { FormFieldLabel } from "../../FormField/FormFieldLabel.js";
 import { InputClear } from "../../shared/InputClear.js";
 import { inputBase, inputSize } from "../../shared/input.cva.js";
 import { FormField } from "../../FormField/FormField.js";
-import { StaticInput } from "../../shared/StaticInput.js";
 import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
 import { getStaticNumberDisplayValue } from "../shared/numberStatic.utils.js";
+import { StaticInput } from "../../shared/StaticInput.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useEffect, useRef, useState } from "react";

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

@@ -1,14 +1,13 @@
 import { UIStyle } from "../../../../config/uiStyle.context.js";
-import { Loader } from "../../../status/Loader/Loader.js";
 import { UIConfig } from "../../../../config/uiConfig.context.js";
 import { inputBase } from "../../shared/input.cva.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 { InputContent } from "../shared/InputContent.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { isValidElement, useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Input } from "react-aria-components";
 import { useFocusVisible, useTextField } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
@@ -117,11 +116,6 @@ var TextInputBase = (props) => {
 		})
 	});
 };
-var renderIconVisual = (icon) => {
-	if (!icon) return null;
-	if (isValidElement(icon)) return icon;
-	return /* @__PURE__ */ jsx(icon, { className: "size-6 text-interactive-text-secondary-idle" });
-};
 var TextInput = ({ renderStaticInput, ...props }) => {
 	const ui = UIConfig.useConfig();
 	const [renderInput, setRenderInput] = useState(!(renderStaticInput ?? ui.renderStaticInput));
@@ -152,44 +146,50 @@ var TextInput = ({ renderStaticInput, ...props }) => {
 		const maskedPasswordValue = inputType === "password" && `${staticValue}`.length > 0 ? "•".repeat(`${staticValue}`.length) : staticValue;
 		const displayValue = maskedPasswordValue == null ? "" : `${maskedPasswordValue}`;
 		const hasValue = displayValue !== "";
-		const trailingContent = !!props.unit || !!props.isLoading || !!props.action && !props.isLoading || !!props.trailingIcon && !props.isLoading && !props.action ? /* @__PURE__ */ jsxs(Fragment, { children: [
-			props.unit && /* @__PURE__ */ jsx("span", {
-				className: "text-label-2 text-text-default-3",
-				children: props.unit
-			}),
-			props.isLoading && /* @__PURE__ */ jsx(Loader, {}),
-			!props.isLoading && props.action && renderIconVisual(props.action.icon),
-			!props.isLoading && !props.action && props.trailingIcon && renderIconVisual(props.trailingIcon)
-		] }) : void 0;
-		return /* @__PURE__ */ jsx(StaticInput, {
+		const dataAttributes = {
+			dataIsEmpty: !hasValue,
+			dataIsFilled: hasValue,
+			dataIsDirty: props.isDirty,
+			dataIsRequired: props.isRequired,
+			dataIsDisabled: isDisabled,
+			dataDisabled: isDisabled,
+			dataInvalid: !!props.error,
+			dataHasSelection: hasValue
+		};
+		return /* @__PURE__ */ jsx(InputFrame, {
 			...props,
-			onInteract: (focus) => {
+			isHeaderHidden,
+			hideLabel,
+			isDisabled,
+			className: clsx("group w-full", as === "inline" && "h-full", props.className),
+			dataAttributes,
+			renderStatic: true,
+			onStaticInteract: (focus) => {
 				setShouldFocus(focus);
 				setRenderInput(true);
 			},
+			inputClassName: props.inputClassName,
 			as,
 			size,
 			variant,
-			hideLabel,
-			isHeaderHidden,
-			isDisabled,
-			className: clsx("group w-full", as === "inline" && "h-full", props.className),
-			inputClassName: props.inputClassName,
-			placeholder: props.placeholder,
-			displayValue,
-			isEmpty: !hasValue,
-			dataAttributes: {
-				dataIsEmpty: !hasValue,
-				dataIsFilled: hasValue,
-				dataIsDirty: props.isDirty,
-				dataIsRequired: props.isRequired,
-				dataIsDisabled: isDisabled,
-				dataDisabled: isDisabled,
-				dataInvalid: !!props.error,
-				dataHasSelection: hasValue
-			},
-			leadingVisual: renderIconVisual(props.leadingIcon),
-			trailingContent
+			children: /* @__PURE__ */ jsx("input", {
+				ref: inputRef,
+				type: inputType === "hidden" ? "password" : inputType,
+				readOnly: true,
+				disabled: isDisabled,
+				tabIndex: -1,
+				value: displayValue,
+				placeholder: as === "floating" ? "" : props.placeholder,
+				className: "w-full bg-transparent outline-none placeholder:text-text-default-3 disabled:text-interactive-text-secondary-disabled",
+				"data-is-empty": dataAttributes.dataIsEmpty || void 0,
+				"data-is-filled": dataAttributes.dataIsFilled || void 0,
+				"data-is-dirty": dataAttributes.dataIsDirty || void 0,
+				"data-is-required": dataAttributes.dataIsRequired || void 0,
+				"data-is-disabled": dataAttributes.dataIsDisabled || void 0,
+				"data-disabled": dataAttributes.dataDisabled || void 0,
+				"data-invalid": dataAttributes.dataInvalid || void 0,
+				"data-has-selection": dataAttributes.dataHasSelection || void 0
+			})
 		});
 	}
 	if ("formControl" in props && props.formControl) {

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

@@ -1,6 +1,6 @@
 import { ArrowDropDownIcon } from "../../../../assets/icons/ArrowDropDown.js";
 import { UIConfig } from "../../../../config/uiConfig.context.js";
-import { StaticInput } from "../../shared/StaticInput.js";
+import { InputFrame } from "../../Skeleton/InputFrame.js";
 import { SelectBase } from "../shared/SelectBase.js";
 import { getStaticSelectValue } from "../shared/staticSelect.utils.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -70,24 +70,15 @@ function Autocomplete({ renderStaticInput, ...props }) {
 			selectedTagsType: props.selectedTagsType ?? ui.select.selectedTagsType
 		});
 		const trailingContent = props.trailingContent || !props.hideDropdownIcon ? /* @__PURE__ */ jsxs(Fragment, { children: [props.trailingContent, !props.hideDropdownIcon ? /* @__PURE__ */ jsx(ArrowDropDownIcon, { className: "size-6 shrink-0 text-interactive-text-secondary-idle" }) : void 0] }) : void 0;
-		return /* @__PURE__ */ jsx(StaticInput, {
+		const placeholder = as === "floating" ? null : props.placeholder;
+		const shouldRenderPlaceholderAfterValue = mode !== "single" && props.placeholder && !isEmpty;
+		return /* @__PURE__ */ jsxs(InputFrame, {
 			...props,
-			onInteract: (focus) => {
-				setShouldFocus(focus);
-				setRenderInput(true);
-			},
-			as,
-			size: props.size ?? ui.input.size,
-			variant: props.variant ?? ui.input.variant,
 			isHeaderHidden: props.isHeaderHidden || as === "inline" || as === "filter" || as === "floating",
 			hideLabel: props.hideLabel ?? ui.input.hideLabel,
 			isDisabled,
 			className: clsx("w-full", props.containerClassName),
 			inputClassName: clsx(props.className, props.inputClassName),
-			placeholder: props.placeholder,
-			showPlacholderIfFilled: mode !== "single",
-			displayValue,
-			isEmpty,
 			dataAttributes: {
 				dataIsEmpty: isEmpty,
 				dataIsFilled: !isEmpty,
@@ -99,8 +90,26 @@ function Autocomplete({ renderStaticInput, ...props }) {
 				dataHasSelection: !isEmpty,
 				dataHasSearch: false
 			},
-			leadingContent: props.leadingContent,
-			trailingContent
+			renderStatic: true,
+			onStaticInteract: (focus) => {
+				setShouldFocus(focus);
+				setRenderInput(true);
+			},
+			as,
+			size: props.size ?? ui.input.size,
+			variant: props.variant ?? ui.input.variant,
+			actionContent: props.leadingContent && /* @__PURE__ */ jsx("div", {
+				className: "ml-input-side-default flex shrink-0 items-center",
+				children: props.leadingContent
+			}),
+			trailingContent,
+			children: [isEmpty ? /* @__PURE__ */ jsx("span", {
+				className: "text-text-default-3",
+				children: placeholder
+			}) : displayValue, shouldRenderPlaceholderAfterValue && /* @__PURE__ */ jsx("div", {
+				className: "shrink-0 text-text-default-3",
+				children: props.placeholder
+			})]
 		});
 	}
 	return /* @__PURE__ */ jsx(_Autocomplete, {