@povio/ui 2.3.0 → 2.3.2-rc.1

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

@@ -0,0 +1,80 @@
+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;
+    contentAndTrailingClassName?: string;
+    wrapContentAndTrailing?: boolean;
+    wrapTrailingContent?: boolean;
+    reserveTrailingContent?: 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,528 @@
+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 { c } from "react/compiler-runtime";
+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 $ = c(183);
+	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: t0, trailingContent, trailingIcon, trailingAction, unit, isLoading, action, isClearable: isClearableProp, showClear, renderStatic, onStaticInteract, clearClassName, onClear, dataAttributes, typographySize, id: idProp, inputClassName, contentClassName, contentWrapperClassName, contentAndTrailingClassName, wrapContentAndTrailing, wrapTrailingContent: t1, reserveTrailingContent, labelPlacement: t2, trailingClassName, onMouseEnter, onFocusCapture, variant: variantProp, as: asProp, size: sizeProp } = props;
+	const actionContentPlacement = t0 === void 0 ? "content-wrapper" : t0;
+	const wrapTrailingContent = t1 === void 0 ? true : t1;
+	const labelPlacement = t2 === void 0 ? "content-wrapper" : t2;
+	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);
+	let t3;
+	if ($[0] !== leadingIcon) {
+		t3 = leadingIcon && isValidElement(leadingIcon);
+		$[0] = leadingIcon;
+		$[1] = t3;
+	} else t3 = $[1];
+	const isLeadingIconElement = t3;
+	let t4;
+	if ($[2] !== trailingIcon) {
+		t4 = trailingIcon && isValidElement(trailingIcon);
+		$[2] = trailingIcon;
+		$[3] = t4;
+	} else t4 = $[3];
+	const isTrailingIconElement = t4;
+	const hasTrailingContent = reserveTrailingContent || hasClear || !!trailingContent || !!unit || !!isLoading || !!action || !!trailingIcon || !!trailingAction;
+	const isTrailingInteractive = !!action || !!trailingAction || !!isTrailingIconElement || hasClear && !!showClear || !!trailingContent;
+	let dataAttributeProps;
+	let formFieldProps;
+	let labelProps;
+	let t10;
+	let t11;
+	let t12;
+	let t13;
+	let t5;
+	let t6;
+	let t7;
+	let t8;
+	let t9;
+	if ($[4] !== actionContent || $[5] !== actionContentPlacement || $[6] !== as || $[7] !== children || $[8] !== className || $[9] !== contentClassName || $[10] !== contentWrapperClassName || $[11] !== dataAttributes || $[12] !== error || $[13] !== errorClassName || $[14] !== generatedInputId || $[15] !== headerClassName || $[16] !== headerProps || $[17] !== helperText || $[18] !== hideLabel || $[19] !== idProp || $[20] !== inputContentWrapperCva || $[21] !== inputSizeCva || $[22] !== isDisabled || $[23] !== isHeaderHidden || $[24] !== isLeadingIconElement || $[25] !== isRequired || $[26] !== label || $[27] !== labelPlacement || $[28] !== labelPropsProp || $[29] !== leadingContent || $[30] !== leadingIcon || $[31] !== rightContent || $[32] !== size || $[33] !== tooltipText || $[34] !== typographyCva || $[35] !== typographySize) {
+		dataAttributeProps = getInputFrameDataAttributeProps(dataAttributes);
+		const baseLabelProps = headerProps?.labelProps ?? labelPropsProp;
+		const inputId = idProp ?? baseLabelProps?.htmlFor ?? `input-frame_${generatedInputId}`;
+		let t14;
+		if ($[48] !== baseLabelProps || $[49] !== inputId) {
+			t14 = {
+				...baseLabelProps,
+				htmlFor: inputId
+			};
+			$[48] = baseLabelProps;
+			$[49] = inputId;
+			$[50] = t14;
+		} else t14 = $[50];
+		labelProps = t14;
+		const t15 = label ?? "";
+		const t16 = isHeaderHidden || as === "inline" || as === "filter" || as === "floating";
+		let t17;
+		if ($[51] !== className || $[52] !== error || $[53] !== errorClassName || $[54] !== headerClassName || $[55] !== helperText || $[56] !== hideLabel || $[57] !== isDisabled || $[58] !== isRequired || $[59] !== rightContent || $[60] !== t15 || $[61] !== t16 || $[62] !== tooltipText) {
+			t17 = {
+				error,
+				label: t15,
+				tooltipText,
+				helperText,
+				isRequired,
+				rightContent,
+				isHeaderHidden: t16,
+				hideLabel,
+				isDisabled,
+				headerClassName,
+				errorClassName,
+				className
+			};
+			$[51] = className;
+			$[52] = error;
+			$[53] = errorClassName;
+			$[54] = headerClassName;
+			$[55] = helperText;
+			$[56] = hideLabel;
+			$[57] = isDisabled;
+			$[58] = isRequired;
+			$[59] = rightContent;
+			$[60] = t15;
+			$[61] = t16;
+			$[62] = tooltipText;
+			$[63] = t17;
+		} else t17 = $[63];
+		formFieldProps = t17;
+		let t18;
+		if ($[64] !== headerClassName || $[65] !== headerProps || $[66] !== helperText || $[67] !== hideLabel || $[68] !== isDisabled || $[69] !== isHeaderHidden || $[70] !== isRequired || $[71] !== label || $[72] !== labelProps || $[73] !== rightContent || $[74] !== tooltipText) {
+			t18 = headerProps ? {
+				...headerProps,
+				labelProps
+			} : {
+				label: label ?? "",
+				tooltipText,
+				helperText,
+				isRequired,
+				rightContent,
+				isHeaderHidden: hideLabel || isHeaderHidden,
+				isDisabled,
+				className: headerClassName,
+				labelProps
+			};
+			$[64] = headerClassName;
+			$[65] = headerProps;
+			$[66] = helperText;
+			$[67] = hideLabel;
+			$[68] = isDisabled;
+			$[69] = isHeaderHidden;
+			$[70] = isRequired;
+			$[71] = label;
+			$[72] = labelProps;
+			$[73] = rightContent;
+			$[74] = tooltipText;
+			$[75] = t18;
+		} else t18 = $[75];
+		const resolvedHeaderProps = t18;
+		let t19;
+		if ($[76] !== as) {
+			t19 = as && ["filter", "floating"].includes(as);
+			$[76] = as;
+			$[77] = t19;
+		} else t19 = $[77];
+		const shouldRenderLabel = t19;
+		let t20;
+		if ($[78] !== as || $[79] !== resolvedHeaderProps || $[80] !== shouldRenderLabel || $[81] !== size) {
+			t20 = shouldRenderLabel ? /* @__PURE__ */ jsx(FormFieldLabel, {
+				as,
+				size,
+				...resolvedHeaderProps
+			}) : null;
+			$[78] = as;
+			$[79] = resolvedHeaderProps;
+			$[80] = shouldRenderLabel;
+			$[81] = size;
+			$[82] = t20;
+		} else t20 = $[82];
+		const labelContent = t20;
+		let t21;
+		if ($[83] !== as || $[84] !== contentWrapperClassName || $[85] !== inputContentWrapperCva) {
+			t21 = contentWrapperClassName ?? inputContentWrapperCva({ as });
+			$[83] = as;
+			$[84] = contentWrapperClassName;
+			$[85] = inputContentWrapperCva;
+			$[86] = t21;
+		} else t21 = $[86];
+		const resolvedContentWrapperClassName = t21;
+		if ($[87] !== as || $[88] !== contentClassName || $[89] !== inputSizeCva || $[90] !== size || $[91] !== typographyCva || $[92] !== typographySize) {
+			let t22;
+			if ($[94] !== typographyCva || $[95] !== typographySize) {
+				t22 = typographySize && typographyCva({ size: typographySize });
+				$[94] = typographyCva;
+				$[95] = typographySize;
+				$[96] = t22;
+			} else t22 = $[96];
+			t9 = clsx("group/input-frame flex min-w-0 w-full items-center gap-input-gap-input-text-to-elements", inputSizeCva({
+				size,
+				as
+			}), t22, contentClassName);
+			$[87] = as;
+			$[88] = contentClassName;
+			$[89] = inputSizeCva;
+			$[90] = size;
+			$[91] = typographyCva;
+			$[92] = typographySize;
+			$[93] = t9;
+		} else t9 = $[93];
+		t10 = leadingContent;
+		if ($[97] !== isLeadingIconElement || $[98] !== leadingIcon) {
+			t11 = leadingIcon && /* @__PURE__ */ jsx("div", {
+				className: clsx(!isLeadingIconElement && "pointer-events-none"),
+				children: renderIconVisual(leadingIcon)
+			});
+			$[97] = isLeadingIconElement;
+			$[98] = leadingIcon;
+			$[99] = t11;
+		} else t11 = $[99];
+		t12 = labelPlacement === "content-row" && labelContent;
+		t13 = actionContentPlacement === "content-row" && actionContent;
+		t5 = resolvedContentWrapperClassName;
+		t6 = labelPlacement === "content-wrapper" && labelContent;
+		t7 = actionContentPlacement === "content-wrapper" && actionContent;
+		t8 = typeof children === "function" ? children({
+			...dataAttributeProps,
+			id: inputId
+		}) : children;
+		$[4] = actionContent;
+		$[5] = actionContentPlacement;
+		$[6] = as;
+		$[7] = children;
+		$[8] = className;
+		$[9] = contentClassName;
+		$[10] = contentWrapperClassName;
+		$[11] = dataAttributes;
+		$[12] = error;
+		$[13] = errorClassName;
+		$[14] = generatedInputId;
+		$[15] = headerClassName;
+		$[16] = headerProps;
+		$[17] = helperText;
+		$[18] = hideLabel;
+		$[19] = idProp;
+		$[20] = inputContentWrapperCva;
+		$[21] = inputSizeCva;
+		$[22] = isDisabled;
+		$[23] = isHeaderHidden;
+		$[24] = isLeadingIconElement;
+		$[25] = isRequired;
+		$[26] = label;
+		$[27] = labelPlacement;
+		$[28] = labelPropsProp;
+		$[29] = leadingContent;
+		$[30] = leadingIcon;
+		$[31] = rightContent;
+		$[32] = size;
+		$[33] = tooltipText;
+		$[34] = typographyCva;
+		$[35] = typographySize;
+		$[36] = dataAttributeProps;
+		$[37] = formFieldProps;
+		$[38] = labelProps;
+		$[39] = t10;
+		$[40] = t11;
+		$[41] = t12;
+		$[42] = t13;
+		$[43] = t5;
+		$[44] = t6;
+		$[45] = t7;
+		$[46] = t8;
+		$[47] = t9;
+	} else {
+		dataAttributeProps = $[36];
+		formFieldProps = $[37];
+		labelProps = $[38];
+		t10 = $[39];
+		t11 = $[40];
+		t12 = $[41];
+		t13 = $[42];
+		t5 = $[43];
+		t6 = $[44];
+		t7 = $[45];
+		t8 = $[46];
+		t9 = $[47];
+	}
+	let t14;
+	if ($[100] !== t5 || $[101] !== t6 || $[102] !== t7 || $[103] !== t8) {
+		t14 = /* @__PURE__ */ jsxs("div", {
+			className: t5,
+			children: [
+				t6,
+				t7,
+				t8
+			]
+		});
+		$[100] = t5;
+		$[101] = t6;
+		$[102] = t7;
+		$[103] = t8;
+		$[104] = t14;
+	} else t14 = $[104];
+	let t15;
+	if ($[105] !== t10 || $[106] !== t11 || $[107] !== t12 || $[108] !== t13 || $[109] !== t14 || $[110] !== t9) {
+		t15 = /* @__PURE__ */ jsxs("div", {
+			className: t9,
+			children: [
+				t10,
+				t11,
+				t12,
+				t13,
+				t14
+			]
+		});
+		$[105] = t10;
+		$[106] = t11;
+		$[107] = t12;
+		$[108] = t13;
+		$[109] = t14;
+		$[110] = t9;
+		$[111] = t15;
+	} else t15 = $[111];
+	const contentRow = t15;
+	let t16;
+	if ($[112] !== action || $[113] !== clearClassName || $[114] !== hasClear || $[115] !== hasTrailingContent || $[116] !== isDisabled || $[117] !== isLoading || $[118] !== onClear || $[119] !== renderStatic || $[120] !== showClear || $[121] !== trailingAction || $[122] !== trailingContent || $[123] !== trailingIcon || $[124] !== typographyCva || $[125] !== unit) {
+		t16 = hasTrailingContent ? /* @__PURE__ */ jsxs(Fragment, { children: [
+			hasClear && /* @__PURE__ */ jsx(InputClear, {
+				onClear: () => onClear?.(),
+				className: clearClassName,
+				show: !!showClear,
+				style: showClear ? { visibility: "visible" } : void 0,
+				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;
+		$[112] = action;
+		$[113] = clearClassName;
+		$[114] = hasClear;
+		$[115] = hasTrailingContent;
+		$[116] = isDisabled;
+		$[117] = isLoading;
+		$[118] = onClear;
+		$[119] = renderStatic;
+		$[120] = showClear;
+		$[121] = trailingAction;
+		$[122] = trailingContent;
+		$[123] = trailingIcon;
+		$[124] = typographyCva;
+		$[125] = unit;
+		$[126] = t16;
+	} else t16 = $[126];
+	const trailingContentNodes = t16;
+	let t17;
+	if ($[127] !== as || $[128] !== inputSizeCva || $[129] !== isDisabled || $[130] !== isTrailingInteractive || $[131] !== size || $[132] !== trailingClassName || $[133] !== trailingContentNodes || $[134] !== wrapTrailingContent) {
+		t17 = wrapTrailingContent && trailingContentNodes ? /* @__PURE__ */ jsx("div", {
+			className: clsx("flex items-center gap-input-gap-trailing-elements", inputSizeCva({
+				size,
+				as
+			}), !isTrailingInteractive && "pointer-events-none", isDisabled && "text-interactive-text-secondary-disabled", trailingClassName),
+			children: trailingContentNodes
+		}) : trailingContentNodes;
+		$[127] = as;
+		$[128] = inputSizeCva;
+		$[129] = isDisabled;
+		$[130] = isTrailingInteractive;
+		$[131] = size;
+		$[132] = trailingClassName;
+		$[133] = trailingContentNodes;
+		$[134] = wrapTrailingContent;
+		$[135] = t17;
+	} else t17 = $[135];
+	const trailingRow = t17;
+	let t18;
+	if ($[136] !== contentAndTrailingClassName || $[137] !== contentRow || $[138] !== trailingRow || $[139] !== wrapContentAndTrailing) {
+		t18 = wrapContentAndTrailing ? /* @__PURE__ */ jsxs("div", {
+			className: clsx("flex w-full items-center gap-input-gap-input-text-to-elements", contentAndTrailingClassName),
+			children: [contentRow, trailingRow]
+		}) : /* @__PURE__ */ jsxs(Fragment, { children: [contentRow, trailingRow] });
+		$[136] = contentAndTrailingClassName;
+		$[137] = contentRow;
+		$[138] = trailingRow;
+		$[139] = wrapContentAndTrailing;
+		$[140] = t18;
+	} else t18 = $[140];
+	const inputFrameContent = t18;
+	const t19 = as === "inline" ? -1 : void 0;
+	const t20 = as === "inline" ? -1 : void 0;
+	let t21;
+	if ($[141] !== onMouseEnter || $[142] !== onStaticInteract || $[143] !== renderStatic) {
+		t21 = (event) => {
+			onMouseEnter?.(event);
+			if (renderStatic) onStaticInteract?.(false);
+		};
+		$[141] = onMouseEnter;
+		$[142] = onStaticInteract;
+		$[143] = renderStatic;
+		$[144] = t21;
+	} else t21 = $[144];
+	let t22;
+	if ($[145] !== onFocusCapture || $[146] !== onStaticInteract || $[147] !== renderStatic) {
+		t22 = (event_0) => {
+			onFocusCapture?.(event_0);
+			if (renderStatic) onStaticInteract?.(true);
+		};
+		$[145] = onFocusCapture;
+		$[146] = onStaticInteract;
+		$[147] = renderStatic;
+		$[148] = t22;
+	} else t22 = $[148];
+	let t23;
+	if ($[149] !== as || $[150] !== inputBaseCva || $[151] !== inputClassName || $[152] !== variant) {
+		t23 = clsx("relative flex cursor-text has-disabled:cursor-default", inputBaseCva({
+			variant,
+			as
+		}), inputClassName);
+		$[149] = as;
+		$[150] = inputBaseCva;
+		$[151] = inputClassName;
+		$[152] = variant;
+		$[153] = t23;
+	} else t23 = $[153];
+	const t24 = renderStatic ? isDisabled ? -1 : 0 : void 0;
+	let t25;
+	let t26;
+	let t27;
+	if ($[154] !== onStaticInteract || $[155] !== renderStatic) {
+		t25 = () => {
+			if (renderStatic) onStaticInteract?.(true);
+		};
+		t26 = () => {
+			if (renderStatic) onStaticInteract?.(true);
+		};
+		t27 = () => {
+			if (renderStatic) onStaticInteract?.(true);
+		};
+		$[154] = onStaticInteract;
+		$[155] = renderStatic;
+		$[156] = t25;
+		$[157] = t26;
+		$[158] = t27;
+	} else {
+		t25 = $[156];
+		t26 = $[157];
+		t27 = $[158];
+	}
+	let t28;
+	if ($[159] !== dataAttributeProps || $[160] !== inputFrameContent || $[161] !== ref || $[162] !== t23 || $[163] !== t24 || $[164] !== t25 || $[165] !== t26 || $[166] !== t27) {
+		t28 = /* @__PURE__ */ jsx("div", {
+			ref,
+			...dataAttributeProps,
+			className: t23,
+			tabIndex: t24,
+			onFocus: t25,
+			onClick: t26,
+			onPointerDown: t27,
+			"data-rac": "",
+			children: inputFrameContent
+		});
+		$[159] = dataAttributeProps;
+		$[160] = inputFrameContent;
+		$[161] = ref;
+		$[162] = t23;
+		$[163] = t24;
+		$[164] = t25;
+		$[165] = t26;
+		$[166] = t27;
+		$[167] = t28;
+	} else t28 = $[167];
+	let t29;
+	if ($[168] !== as || $[169] !== dataAttributeProps || $[170] !== formFieldProps || $[171] !== formFieldRef || $[172] !== labelProps || $[173] !== t20 || $[174] !== t21 || $[175] !== t22 || $[176] !== t28) {
+		t29 = /* @__PURE__ */ jsx(FormField, {
+			...formFieldProps,
+			...dataAttributeProps,
+			ref: formFieldRef,
+			as,
+			labelProps,
+			tabIndex: t20,
+			onMouseEnter: t21,
+			onFocusCapture: t22,
+			children: t28
+		});
+		$[168] = as;
+		$[169] = dataAttributeProps;
+		$[170] = formFieldProps;
+		$[171] = formFieldRef;
+		$[172] = labelProps;
+		$[173] = t20;
+		$[174] = t21;
+		$[175] = t22;
+		$[176] = t28;
+		$[177] = t29;
+	} else t29 = $[177];
+	let t30;
+	if ($[178] !== as || $[179] !== error || $[180] !== t19 || $[181] !== t29) {
+		t30 = /* @__PURE__ */ jsx(TooltipWrapper, {
+			as,
+			error,
+			triggerTabIndex: t19,
+			children: t29
+		});
+		$[178] = as;
+		$[179] = error;
+		$[180] = t19;
+		$[181] = t29;
+		$[182] = t30;
+	} else t30 = $[182];
+	return t30;
+};
+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/Slider/Slider.d.ts

@@ -1,4 +1,4 @@
-import { Ref } from 'react';
+import { FocusEvent, Ref } from 'react';
 import { SliderProps as AriaSliderProps } from 'react-aria-components';
 import { FieldValues } from 'react-hook-form';
 import { FormFieldProps } from '../FormField/FormField';
@@ -10,6 +10,7 @@ interface SliderBaseProps<IsRange extends boolean = false> extends FormFieldProp
     isRange?: IsRange;
     defaultValue?: SliderValue<IsRange>;
     value?: SliderValue<IsRange>;
+    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
     onChange?: (value: SliderValue<IsRange>) => void;
 }
 export type SliderProps<IsRange extends boolean = false> = SliderBaseProps<IsRange>;