@povio/ui 2.2.9-rc.4 → 2.2.9-rc.41

package/dist/components/inputs/Selection/shared/staticSelect.utils.js

@@ -0,0 +1,37 @@
+import { SelectInputTags } from "./SelectInputTags.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/inputs/Selection/shared/staticSelect.utils.tsx
+var getStaticSelectValue = ({ items, value, selectionMode, initialSelection, mapInitialToSelectItem = ((item) => ({
+	id: item.id,
+	label: item.label ?? item.name ?? ""
+})), showSelectionContent, isDisabled, collapseAfter, selectedTagsType }) => {
+	const initialSelectedItems = initialSelection ? (Array.isArray(initialSelection) ? initialSelection : [initialSelection]).map((item) => mapInitialToSelectItem(item)) : [];
+	const allItemsMap = /* @__PURE__ */ new Map();
+	[...initialSelectedItems, ...items].forEach((item) => allItemsMap.set(item.id, item));
+	const getItem = (id) => allItemsMap.get(id) ?? null;
+	const selectedItems = Array.isArray(value) ? value.map((id) => getItem(id)).filter((item) => item != null) : [];
+	const selectedItem = !Array.isArray(value) && value != null ? getItem(value) : null;
+	if (selectionMode === "multiple") return {
+		selectedItem,
+		selectedItems,
+		displayValue: selectedItems.length > 0 ? /* @__PURE__ */ jsx(SelectInputTags, {
+			selectedItems,
+			isDisabled,
+			collapseAfter,
+			selectedTagsType,
+			onRemove: () => void 0
+		}) : "",
+		isEmpty: selectedItems.length === 0
+	};
+	return {
+		selectedItem,
+		selectedItems,
+		displayValue: selectedItem != null ? showSelectionContent && selectedItem.content ? selectedItem.content : /* @__PURE__ */ jsx("div", {
+			className: "min-w-0 flex-1 truncate",
+			children: selectedItem.label
+		}) : "",
+		isEmpty: selectedItem == null
+	};
+};
+//#endregion
+export { getStaticSelectValue };

package/dist/components/inputs/Selection/shared/staticSelect.utils.spec.d.ts

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

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

@@ -0,0 +1,77 @@
+import { FC, FocusEventHandler, MouseEventHandler, 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 InputFrameDataAttributeProps = {
+    "data-disabled"?: boolean;
+    "data-has-search"?: boolean;
+    "data-has-selection"?: boolean;
+    "data-invalid"?: boolean;
+    "data-is-dirty"?: boolean;
+    "data-is-disabled"?: boolean;
+    "data-is-empty"?: boolean;
+    "data-is-filled"?: boolean;
+    "data-is-required"?: boolean;
+};
+type InputFrameChildProps = InputFrameDataAttributeProps & {
+    id: string;
+};
+type InputFrameChildren = ReactNode | ((childProps: InputFrameChildProps) => ReactNode);
+type InputFrameLabelPlacement = "content-wrapper" | "content-row";
+type InputFrameActionContentPlacement = "content-wrapper" | "content-row";
+export interface InputFrameProps extends InputVariantProps, Partial<FormFieldProps> {
+    ref?: Ref<HTMLDivElement>;
+    children: InputFrameChildren;
+    formFieldRef?: Ref<HTMLDivElement>;
+    onMouseEnter?: MouseEventHandler<HTMLDivElement>;
+    onFocusCapture?: FocusEventHandler<HTMLDivElement>;
+    labelProps?: FormFieldHeaderProps["labelProps"];
+    headerProps?: FormFieldHeaderProps;
+    leadingContent?: ReactNode;
+    leadingIcon?: InputFrameIcon;
+    actionContent?: ReactNode;
+    actionContentPlacement?: InputFrameActionContentPlacement;
+    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"];
+    id?: string;
+    inputClassName?: string;
+    contentClassName?: string;
+    contentWrapperClassName?: string;
+    wrapContentAndTrailing?: boolean;
+    labelPlacement?: InputFrameLabelPlacement;
+    trailingClassName?: string;
+}
+export declare const InputFrame: (props: InputFrameProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/inputs/Skeleton/InputFrame.js

@@ -0,0 +1,200 @@
+import { UIStyle } from "../../../config/uiStyle.context.js";
+import { typography } from "../../text/Typography/typography.cva.js";
+import { Loader } from "../../status/Loader/Loader.js";
+import { UIConfig } from "../../../config/uiConfig.context.js";
+import { InlineIconButton } from "../../buttons/InlineIconButton/InlineIconButton.js";
+import { FormFieldLabel } from "../FormField/FormFieldLabel.js";
+import { InputClear } from "../shared/InputClear.js";
+import { inputBase, inputContentWrapper, inputSize } from "../shared/input.cva.js";
+import { FormField } from "../FormField/FormField.js";
+import { TooltipWrapper } from "../shared/TooltipWrapper.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { isValidElement, useId } from "react";
+//#region src/components/inputs/Skeleton/InputFrame.tsx
+var InputFrame = (props) => {
+	const ui = UIConfig.useConfig();
+	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
+	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
+	const inputContentWrapperCva = UIStyle.useCva("input.contentWrapperCva", inputContentWrapper);
+	const typographyCva = UIStyle.useCva("typography.cva", typography);
+	const generatedInputId = useId();
+	const { ref, children, formFieldRef, labelProps: labelPropsProp, headerProps, error, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isHeaderHidden, hideLabel: hideLabelProp, headerClassName, errorClassName, className, leadingContent, leadingIcon, actionContent, actionContentPlacement = "content-wrapper", trailingContent, trailingIcon, trailingAction, unit, isLoading, action, isClearable: isClearableProp, showClear, renderStatic, onStaticInteract, clearClassName, onClear, dataAttributes, typographySize, id: idProp, inputClassName, contentClassName, contentWrapperClassName, wrapContentAndTrailing, labelPlacement = "content-wrapper", trailingClassName, onMouseEnter, onFocusCapture, variant: variantProp, as: asProp, size: sizeProp } = props;
+	const as = asProp ?? ui.input.as;
+	const size = sizeProp ?? ui.input.size;
+	const variant = variantProp ?? ui.input.variant;
+	const hideLabel = hideLabelProp ?? ui.input.hideLabel;
+	const hasClear = !!(isClearableProp ?? ui.input.isClearable);
+	const isLeadingIconElement = leadingIcon && isValidElement(leadingIcon);
+	const isTrailingIconElement = trailingIcon && isValidElement(trailingIcon);
+	const hasTrailingContent = hasClear || !!trailingContent || !!unit || !!isLoading || !!action || !!trailingIcon || !!trailingAction;
+	const isTrailingInteractive = !!action || !!trailingAction || !!isTrailingIconElement || hasClear && !!showClear || !!trailingContent;
+	const dataAttributeProps = getInputFrameDataAttributeProps(dataAttributes);
+	const baseLabelProps = headerProps?.labelProps ?? labelPropsProp;
+	const inputId = idProp ?? baseLabelProps?.htmlFor ?? `input-frame_${generatedInputId}`;
+	const labelProps = {
+		...baseLabelProps,
+		htmlFor: inputId
+	};
+	const formFieldProps = {
+		error,
+		label: label ?? "",
+		tooltipText,
+		helperText,
+		isRequired,
+		rightContent,
+		isHeaderHidden: isHeaderHidden || as === "inline" || as === "filter" || as === "floating",
+		hideLabel,
+		isDisabled,
+		headerClassName,
+		errorClassName,
+		className
+	};
+	const resolvedHeaderProps = headerProps ? {
+		...headerProps,
+		labelProps
+	} : {
+		label: label ?? "",
+		tooltipText,
+		helperText,
+		isRequired,
+		rightContent,
+		isHeaderHidden: hideLabel || isHeaderHidden,
+		isDisabled,
+		className: headerClassName,
+		labelProps
+	};
+	const labelContent = as && ["filter", "floating"].includes(as) ? /* @__PURE__ */ jsx(FormFieldLabel, {
+		as,
+		size,
+		...resolvedHeaderProps
+	}) : null;
+	const resolvedContentWrapperClassName = contentWrapperClassName ?? inputContentWrapperCva({ as });
+	const contentRow = /* @__PURE__ */ jsxs("div", {
+		className: clsx("group/input-frame flex min-w-0 w-full items-center gap-input-gap-input-text-to-elements pr-0!", as === "inline" && "h-full", inputSizeCva({
+			size,
+			as
+		}), typographySize && typographyCva({ size: typographySize }), contentClassName),
+		children: [
+			leadingContent,
+			leadingIcon && /* @__PURE__ */ jsx("div", {
+				className: clsx(!isLeadingIconElement && "pointer-events-none"),
+				children: renderIconVisual(leadingIcon)
+			}),
+			labelPlacement === "content-row" && labelContent,
+			actionContentPlacement === "content-row" && actionContent,
+			/* @__PURE__ */ jsxs("div", {
+				className: resolvedContentWrapperClassName,
+				children: [
+					labelPlacement === "content-wrapper" && labelContent,
+					actionContentPlacement === "content-wrapper" && actionContent,
+					typeof children === "function" ? children({
+						...dataAttributeProps,
+						id: inputId
+					}) : children
+				]
+			})
+		]
+	});
+	const trailingRow = hasTrailingContent ? /* @__PURE__ */ jsxs("div", {
+		className: clsx("flex items-center gap-input-gap-trailing-elements py-0! pl-0!", inputSizeCva({
+			size,
+			as
+		}), !isTrailingInteractive && "pointer-events-none", trailingClassName),
+		children: [
+			hasClear && /* @__PURE__ */ jsx(InputClear, {
+				onClear: () => onClear?.(),
+				className: clearClassName,
+				show: !!showClear,
+				renderStatic
+			}),
+			trailingContent,
+			unit && /* @__PURE__ */ jsx("span", {
+				className: typographyCva({
+					size: "label-2",
+					sizeMobile: "label-2",
+					variant: "prominent-1",
+					className: "text-text-default-3"
+				}),
+				children: unit
+			}),
+			isLoading && /* @__PURE__ */ jsx("div", {
+				className: "inline-flex",
+				children: /* @__PURE__ */ jsx(Loader, {})
+			}),
+			!isLoading && action && /* @__PURE__ */ jsx(InlineIconButton, {
+				color: "secondary",
+				icon: action.icon,
+				isDisabled,
+				onPress: action.onClick,
+				excludeFromTabOrder: true,
+				label: action.altText,
+				className: clsx("border-0!", action.className)
+			}),
+			!isLoading && !action && trailingIcon && renderIconVisual(trailingIcon),
+			trailingAction
+		]
+	}) : null;
+	const inputFrameContent = wrapContentAndTrailing ? /* @__PURE__ */ jsxs("div", {
+		className: "flex w-full items-center gap-input-gap-input-text-to-elements",
+		children: [contentRow, trailingRow]
+	}) : /* @__PURE__ */ jsxs(Fragment, { children: [contentRow, trailingRow] });
+	return /* @__PURE__ */ jsx(TooltipWrapper, {
+		as,
+		error,
+		triggerTabIndex: as === "inline" ? -1 : void 0,
+		children: /* @__PURE__ */ jsx(FormField, {
+			...formFieldProps,
+			...dataAttributeProps,
+			ref: formFieldRef,
+			as,
+			labelProps,
+			tabIndex: as === "inline" ? -1 : void 0,
+			onMouseEnter: (event) => {
+				onMouseEnter?.(event);
+				if (renderStatic) onStaticInteract?.(false);
+			},
+			onFocusCapture: (event) => {
+				onFocusCapture?.(event);
+				if (renderStatic) onStaticInteract?.(true);
+			},
+			children: /* @__PURE__ */ jsx("div", {
+				ref,
+				...dataAttributeProps,
+				className: clsx("relative flex cursor-text has-disabled:cursor-default", inputBaseCva({
+					variant,
+					as
+				}), inputClassName),
+				tabIndex: renderStatic ? isDisabled ? -1 : 0 : void 0,
+				onFocus: () => {
+					if (renderStatic) onStaticInteract?.(true);
+				},
+				onClick: () => {
+					if (renderStatic) onStaticInteract?.(true);
+				},
+				onPointerDown: () => {
+					if (renderStatic) onStaticInteract?.(true);
+				},
+				"data-rac": "",
+				children: inputFrameContent
+			})
+		})
+	});
+};
+var renderIconVisual = (icon) => {
+	if (isValidElement(icon)) return icon;
+	return /* @__PURE__ */ jsx(icon, { className: "size-6 text-interactive-text-secondary-idle" });
+};
+var getInputFrameDataAttributeProps = (dataAttributes) => ({
+	"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-has-search": dataAttributes?.dataHasSearch || void 0,
+	"data-invalid": dataAttributes?.dataInvalid || void 0,
+	"data-has-selection": dataAttributes?.dataHasSelection || void 0
+});
+//#endregion
+export { InputFrame };

package/dist/components/inputs/TextEditor/TextEditor.js

@@ -106,6 +106,7 @@ var TextEditorBase = ({ ref, as = "default", placeholder, label, hideLabel, tool
 			"data-rac": "",
 			"data-hovered": isHovered || void 0,
 			"data-disabled": isDisabled || void 0,
+			"data-is-disabled": isDisabled || void 0,
 			"data-focus-within": isFocused || void 0,
 			"data-focus-visible": isFocused && isFocusVisible || void 0,
 			"data-is-filled": !editor?.isEmpty,

package/dist/components/inputs/Toggle/Toggle.js

@@ -2,7 +2,7 @@ import { UIStyle } from "../../../config/uiStyle.context.js";
 import { UIConfig } from "../../../config/uiConfig.context.js";
 import { FormFieldError } from "../FormField/FormFieldError.js";
 import { CheckContent } from "../shared/CheckContent.js";
-import { toggle, toggleTypography } from "./toggle.cva.js";
+import { toggle, toggleContentClassName, toggleTypography } from "./toggle.cva.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { Switch } from "react-aria-components";
@@ -13,6 +13,7 @@ var ToggleBase = (props) => {
 	const ui = UIConfig.useConfig();
 	const toggleCva = UIStyle.useCva("toggle.cva", toggle);
 	const toggleTypographyMap = UIStyle.useMapper("toggle.typography", toggleTypography);
+	const toggleContentClassNameMap = UIStyle.useMapper("toggle.contentClassName", toggleContentClassName);
 	const { className, children, isDisabled, error, variant = ui.toggle.variant, ...rest } = props;
 	const formFieldErrorProps = {
 		error,
@@ -32,6 +33,10 @@ var ToggleBase = (props) => {
 				variant,
 				...rest
 			}),
+			contentClassName: toggleContentClassNameMap({
+				variant,
+				...rest
+			}),
 			children
 		})]
 	}), /* @__PURE__ */ jsx(FormFieldError, { ...formFieldErrorProps })] });

package/dist/components/inputs/Toggle/toggle.cva.d.ts

@@ -8,3 +8,6 @@ export interface ToggleVariantProps extends VariantProps<typeof toggle> {
 export declare const toggleTypography: (props: {
     variant?: "default" | null | undefined;
 }) => TypographyVariantProps | undefined;
+export declare const toggleContentClassName: (props: {
+    variant?: "default" | null | undefined;
+}) => string | undefined;

package/dist/components/inputs/Toggle/toggle.cva.js

@@ -26,5 +26,6 @@ var toggleTypography = compoundMapper({ default: {
 	sizeMobile: "label-1",
 	variant: "default"
 } });
+var toggleContentClassName = compoundMapper({ default: "text-text-default-2" });
 //#endregion
-export { toggle, toggleTypography };
+export { toggle, toggleContentClassName, toggleTypography };

package/dist/components/inputs/shared/CheckContent.d.ts

@@ -3,6 +3,7 @@ import { TypographyVariantProps } from '../../text/Typography/typography.cva';
 interface CheckContentProps {
     typography?: TypographyVariantProps;
     className?: string;
+    contentClassName?: string;
 }
-export declare const CheckContent: ({ children, className, ...props }: PropsWithChildren<CheckContentProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const CheckContent: ({ children, className, contentClassName, ...props }: PropsWithChildren<CheckContentProps>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/inputs/shared/CheckContent.js

@@ -3,15 +3,14 @@ import { typography } from "../../text/Typography/typography.cva.js";
 import { jsx } from "react/jsx-runtime";
 import clsx$1 from "clsx";
 //#region src/components/inputs/shared/CheckContent.tsx
-var CheckContent = ({ children, className, ...props }) => {
+var CheckContent = ({ children, className, contentClassName, ...props }) => {
 	return /* @__PURE__ */ jsx("div", {
 		className: clsx$1(UIStyle.useCva("typography.cva", typography)({
 			size: "label-1",
 			sizeMobile: "label-1",
 			variant: "default",
-			...props.typography,
-			className: "text-text-default-2"
-		}), className),
+			...props.typography
+		}), contentClassName, className),
 		children
 	});
 };

package/dist/components/inputs/shared/InputClear.d.ts

@@ -2,8 +2,9 @@ import { CSSProperties } from 'react';
 interface InputClearProps {
     onClear: () => void;
     show?: boolean;
+    renderStatic?: boolean;
     className?: string;
     style?: CSSProperties;
 }
-export declare const InputClear: ({ onClear, className, style, show }: InputClearProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InputClear: ({ onClear, className, style, show, renderStatic }: InputClearProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/inputs/shared/InputClear.js

@@ -5,7 +5,19 @@ import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useTranslation } from "react-i18next";
 //#region src/components/inputs/shared/InputClear.tsx
-var InputClear = ({ onClear, className, style, show }) => {
+var InputClear = ({ onClear, className, style, show, renderStatic }) => {
+	if (renderStatic) return /* @__PURE__ */ jsx("button", {
+		className: clsx("invisible relative z-1 flex items-center size-6 shrink-0", "group-focus-within:visible group-hover/date-picker-content:visible group-hover/select-content:visible group-hover/text-area:visible group-hover:visible", "border-0!", !show && "invisible!", className),
+		style
+	});
+	return /* @__PURE__ */ jsx(InputClearButton, {
+		onClear,
+		className,
+		style,
+		show
+	});
+};
+var InputClearButton = ({ onClear, className, style, show }) => {
 	const { t } = useTranslation("ui");
 	return /* @__PURE__ */ jsx(InlineIconButton, {
 		color: "secondary",

package/dist/components/inputs/shared/StaticInput.d.ts

@@ -0,0 +1,38 @@
+import { ReactNode } from 'react';
+import { FormFieldProps } from '../FormField/FormField';
+import { TextInputProps } from '../Input/TextInput/TextInput';
+import { InputSizeProps, InputVariantProps } from './input.cva';
+import { TypographyVariantProps } from '../../text/Typography/typography.cva';
+type StaticInputDataAttributes = {
+    dataDisabled?: boolean;
+    dataHasSearch?: boolean;
+    dataHasSelection?: boolean;
+    dataInvalid?: boolean;
+    dataIsDirty?: boolean;
+    dataIsDisabled?: boolean;
+    dataIsEmpty?: boolean;
+    dataIsFilled?: boolean;
+    dataIsRequired?: boolean;
+};
+interface StaticInputProps extends FormFieldProps {
+    onInteract: (shouldFocus: boolean) => void;
+    as?: TextInputProps["as"];
+    typographySize?: TypographyVariantProps["size"];
+    size?: InputSizeProps["size"];
+    variant?: InputVariantProps["variant"];
+    applyMinInputWidth?: boolean;
+    placeholder?: ReactNode;
+    showPlacholderIfFilled?: boolean;
+    displayValue?: ReactNode;
+    isEmpty?: boolean;
+    leadingVisual?: ReactNode;
+    leadingContent?: ReactNode;
+    leadingContentClassName?: string;
+    hasClearIcon?: boolean;
+    trailingContent?: ReactNode;
+    contentRowClassName?: string;
+    inputClassName?: string;
+    dataAttributes?: StaticInputDataAttributes;
+}
+export declare const StaticInput: ({ onInteract, as, typographySize, size, variant, applyMinInputWidth, placeholder, showPlacholderIfFilled, displayValue, isEmpty, leadingVisual, leadingContent, leadingContentClassName, hasClearIcon, trailingContent, contentRowClassName, inputClassName, dataAttributes, className, ...formFieldProps }: StaticInputProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/inputs/shared/TooltipWrapper.js

@@ -1,7 +1,10 @@
+import { UIStyle } from "../../../config/uiStyle.context.js";
 import { Tooltip } from "../../overlays/Tooltip/Tooltip.js";
+import { tooltipWrapperTrigger } from "./tooltipWrapper.cva.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/inputs/shared/TooltipWrapper.tsx
 var TooltipWrapper = (props) => {
+	const tooltipWrapperTriggerCva = UIStyle.useCva("tooltipWrapper.triggerCva", tooltipWrapperTrigger);
 	if (props.as !== "inline") return props.children;
 	return /* @__PURE__ */ jsx(Tooltip, {
 		text: props.error || void 0,
@@ -9,10 +12,11 @@ var TooltipWrapper = (props) => {
 		color: "error",
 		hidden: !props.error,
 		isNonInteractiveTrigger: true,
-		triggerClassName: props.triggerClassName,
+		triggerClassName: tooltipWrapperTriggerCva({ className: props.triggerClassName }),
 		triggerTabIndex: props.triggerTabIndex,
 		children: /* @__PURE__ */ jsx("div", {
 			tabIndex: -1,
+			className: tooltipWrapperTriggerCva({}),
 			children: props.children
 		})
 	});

package/dist/components/inputs/shared/input.cva.d.ts

@@ -12,6 +12,16 @@ export declare const inputSize: (props?: ({
 } & ClassProp) | undefined) => string;
 export interface InputSizeProps extends VariantProps<typeof inputSize> {
 }
+export declare const inputContentWrapper: (props?: ({
+    as?: "filter" | "default" | "floating" | "inline" | null | undefined;
+} & ClassProp) | undefined) => string;
+export interface InputContentWrapperProps extends VariantProps<typeof inputContentWrapper> {
+}
+export declare const inputClearClass: (props?: ({
+    as?: "filter" | "default" | "floating" | "inline" | null | undefined;
+} & ClassProp) | undefined) => string;
+export interface InputClearClassProps extends VariantProps<typeof inputClearClass> {
+}
 export declare const inputSide: (props?: ({
     size?: "small" | "default" | "extra-small" | "large" | null | undefined;
     type?: "left" | "right" | "var" | null | undefined;

package/dist/components/inputs/shared/input.cva.js

@@ -191,6 +191,24 @@ var inputSize = cva("", {
 		as: "default"
 	}
 });
+var inputContentWrapper = cva("flex w-full", {
+	variants: { as: {
+		default: "",
+		floating: "flex-col",
+		filter: "gap-input-gap-input-text-to-elements",
+		inline: ""
+	} },
+	defaultVariants: { as: "default" }
+});
+var inputClearClass = cva("", {
+	variants: { as: {
+		default: "",
+		floating: "",
+		filter: "",
+		inline: ""
+	} },
+	defaultVariants: { as: "default" }
+});
 var inputSide = cva("", {
 	variants: {
 		size: {
@@ -277,4 +295,4 @@ var useInputCva = () => {
 	};
 };
 //#endregion
-export { inputBase, inputSide, inputSize, useInputCva };
+export { inputBase, inputClearClass, inputContentWrapper, inputSide, inputSize, useInputCva };

package/dist/components/inputs/shared/tooltipWrapper.cva.d.ts

@@ -0,0 +1,4 @@
+import { VariantProps } from 'class-variance-authority';
+export declare const tooltipWrapperTrigger: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export interface TooltipWrapperTriggerVariantProps extends VariantProps<typeof tooltipWrapperTrigger> {
+}

package/dist/components/inputs/shared/tooltipWrapper.cva.js

@@ -0,0 +1,5 @@
+import { cva } from "class-variance-authority";
+//#region src/components/inputs/shared/tooltipWrapper.cva.ts
+var tooltipWrapperTrigger = cva("inline-flex");
+//#endregion
+export { tooltipWrapperTrigger };

package/dist/components/inputs/shared/useStaticInputHandoff.d.ts

@@ -0,0 +1,13 @@
+import { Dispatch, RefObject, SetStateAction } from 'react';
+interface StaticInputHandoffOptions<TElement extends HTMLElement> {
+    inputRef: RefObject<TElement | null>;
+    renderInput: boolean;
+    setRenderInput: Dispatch<SetStateAction<boolean>>;
+    getFocusTarget?: (element: TElement) => HTMLElement | null | undefined;
+}
+export declare const useStaticInputHandoff: <TElement extends HTMLElement = HTMLInputElement>({ inputRef, renderInput, setRenderInput, getFocusTarget, }: StaticInputHandoffOptions<TElement>) => {
+    shouldFocus: boolean;
+    renderRealInput: (focus: boolean) => void;
+    replayStaticInputChange: (value: string) => void;
+};
+export {};

package/dist/components/inputs/shared/useStaticInputHandoff.js

@@ -0,0 +1,47 @@
+import { useLayoutEffect, useRef, useState } from "react";
+//#region src/components/inputs/shared/useStaticInputHandoff.ts
+var useStaticInputHandoff = ({ inputRef, renderInput, setRenderInput, getFocusTarget }) => {
+	const [shouldFocus, setShouldFocus] = useState(false);
+	const pendingStaticChangeRef = useRef(null);
+	useLayoutEffect(() => {
+		if (!renderInput || !shouldFocus) return;
+		const focusRealInput = (replayPendingChange) => {
+			const input = inputRef.current;
+			const pendingValue = pendingStaticChangeRef.current;
+			const focusTarget = input ? getFocusTarget?.(input) ?? input : null;
+			if (replayPendingChange && focusTarget instanceof HTMLInputElement && pendingValue != null) {
+				(Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set)?.call(focusTarget, pendingValue);
+				focusTarget.dispatchEvent(new Event("input", { bubbles: true }));
+				pendingStaticChangeRef.current = null;
+			}
+			focusTarget?.focus();
+		};
+		focusRealInput(true);
+		const frame = requestAnimationFrame(() => {
+			focusRealInput(false);
+			setShouldFocus(false);
+		});
+		return () => {
+			cancelAnimationFrame(frame);
+		};
+	}, [
+		getFocusTarget,
+		inputRef,
+		renderInput,
+		shouldFocus
+	]);
+	return {
+		shouldFocus,
+		renderRealInput: (focus) => {
+			setShouldFocus(focus);
+			setRenderInput(true);
+		},
+		replayStaticInputChange: (value) => {
+			pendingStaticChangeRef.current = value;
+			setShouldFocus(true);
+			setRenderInput(true);
+		}
+	};
+};
+//#endregion
+export { useStaticInputHandoff };

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

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren, ReactElement } from 'react';
 import { ButtonProps } from '../components/buttons/Button/Button';
 import { CheckboxProps } from '../components/inputs/Checkbox/Checkbox';
 import { DatePickerProps } from '../components/inputs/DateTime/DatePicker/DatePicker';
@@ -19,6 +19,7 @@ export declare namespace UIConfig {
         [P in keyof T]-?: T[P] extends object ? DeepRequired<T[P]> : Exclude<T[P], null | undefined>;
     };
     export interface Options {
+        renderStaticInput: boolean;
         input: Pick<TextInputProps, "variant" | "isClearable" | "hideLabel" | "as" | "size">;
         button: Pick<ButtonProps, "variant" | "size">;
         numberInput: Pick<NumberInputProps, "formatOptions">;
@@ -33,7 +34,12 @@ export declare namespace UIConfig {
         };
         toggle: Pick<ToggleProps, "variant">;
         slider: Pick<SliderProps, "minValue" | "maxValue">;
-        dateInput: Pick<DatePickerProps, "todayIcon" | "shouldForceLeadingZeros" | "disableManualEntry">;
+        dateInput: Pick<DatePickerProps, "todayIcon" | "todayIconButtonSize" | "todayIconPlacement" | "shouldForceLeadingZeros" | "disableManualEntry" | "autoFixYear"> & {
+            calendarIcon?: ReactElement;
+            dateTimeIcon?: ReactElement;
+            timeIcon?: ReactElement;
+            setDateValueOnDateSelection?: boolean;
+        };
         actionModal: Pick<ActionModalProps, "titleTypography" | "descriptionTypography">;
         bottomSheet: Pick<BottomSheetProps, "closeDragThreshold" | "closeVelocityThreshold" | "hideThumb" | "headerTypography">;
         tableHeaderText: Pick<HeaderTextProps, "variant" | "size">;