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

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

@@ -0,0 +1,80 @@
+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: getStaticSegmentText(token),
+			placeholder: getStaticSegmentText(token),
+			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"
+	}));
+};
+var getStaticSegmentText = (token) => {
+	if (token.type !== "literal") return token.text;
+	return token.text.replaceAll(" ", "\xA0");
+};
+//#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,16 @@ 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,
+			labelPlacement: "content-row",
 			dataAttributes: {
 				dataIsEmpty: isEmpty,
 				dataIsFilled: !isEmpty,
@@ -99,8 +91,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, {

package/dist/components/inputs/Selection/Select/Select.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";
@@ -67,25 +67,17 @@ function Select({ 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 ${isDisabled ? "text-interactive-text-secondary-disabled" : "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,
-			typographySize: "label-1",
-			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,
+			typographySize: "label-1",
+			labelPlacement: "content-row",
 			dataAttributes: {
 				dataIsEmpty: isEmpty,
 				dataIsFilled: !isEmpty,
@@ -97,9 +89,28 @@ function Select({ renderStaticInput, ...props }) {
 				dataHasSelection: !isEmpty,
 				dataHasSearch: false
 			},
-			leadingContent: props.leadingContent,
-			hasClearIcon: isClearable,
-			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
+			}),
+			isClearable,
+			showClear: false,
+			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(_Select, {

package/dist/components/inputs/Skeleton/InputFrame.d.ts

@@ -0,0 +1,56 @@
+import { FC, ReactElement, ReactNode, Ref, SVGProps } from 'react';
+import { InlineIconButtonProps } from '../../buttons/InlineIconButton/InlineIconButton';
+import { FormFieldProps } from '../FormField/FormField';
+import { FormFieldHeaderProps } from '../FormField/FormFieldHeader';
+import { InputVariantProps } from '../shared/input.cva';
+import { TypographyVariantProps } from '../../text/Typography/typography.cva';
+type InputFrameIcon = FC<SVGProps<SVGSVGElement>> | ReactElement;
+interface InputFrameAction {
+    icon: InlineIconButtonProps["icon"];
+    onClick: () => void;
+    altText: string;
+    className?: string;
+}
+interface InputFrameDataAttributes {
+    dataDisabled?: boolean;
+    dataHasSearch?: boolean;
+    dataHasSelection?: boolean;
+    dataInvalid?: boolean;
+    dataIsDirty?: boolean;
+    dataIsDisabled?: boolean;
+    dataIsEmpty?: boolean;
+    dataIsFilled?: boolean;
+    dataIsRequired?: boolean;
+}
+type InputFrameLabelPlacement = "content-wrapper" | "content-row";
+export interface InputFrameProps extends InputVariantProps, Partial<FormFieldProps> {
+    ref?: Ref<HTMLDivElement>;
+    children: ReactNode;
+    formFieldRef?: Ref<HTMLDivElement>;
+    labelProps?: FormFieldHeaderProps["labelProps"];
+    headerProps?: FormFieldHeaderProps;
+    leadingContent?: ReactNode;
+    leadingIcon?: InputFrameIcon;
+    actionContent?: ReactNode;
+    trailingContent?: ReactNode;
+    trailingIcon?: InputFrameIcon;
+    trailingAction?: ReactNode;
+    unit?: string;
+    isLoading?: boolean;
+    action?: InputFrameAction;
+    isClearable?: boolean;
+    showClear?: boolean;
+    renderStatic?: boolean;
+    onStaticInteract?: (shouldFocus: boolean) => void;
+    clearClassName?: string;
+    onClear?: () => void;
+    dataAttributes?: InputFrameDataAttributes;
+    typographySize?: TypographyVariantProps["size"];
+    inputClassName?: string;
+    contentClassName?: string;
+    contentWrapperClassName?: string;
+    labelPlacement?: InputFrameLabelPlacement;
+    trailingClassName?: string;
+}
+export declare const InputFrame: ({ ref, children, formFieldRef, labelProps, headerProps, error, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isHeaderHidden, hideLabel, headerClassName, errorClassName, className, leadingContent, leadingIcon, actionContent, trailingContent, trailingIcon, trailingAction, unit, isLoading, action, isClearable, showClear, renderStatic, onStaticInteract, clearClassName, onClear, dataAttributes, typographySize, inputClassName, contentClassName, contentWrapperClassName, labelPlacement, trailingClassName, variant, as, size, }: InputFrameProps) => import("react/jsx-runtime").JSX.Element;
+export {};