@povio/ui 2.3.0-rc.39 → 2.3.0-rc.40

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

@@ -1,5 +1,6 @@
 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";
@@ -13,14 +14,14 @@ import { clsx } from "clsx";
 import { isValidElement, useId } from "react";
 //#region src/components/inputs/Skeleton/InputFrame.tsx
 var InputFrame = (props) => {
-	const $ = c(181);
+	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, action, isClearable: isClearableProp, showClear, renderStatic, onStaticInteract, clearClassName, onClear, dataAttributes, typographySize, id: idProp, inputClassName, contentClassName, contentWrapperClassName, contentAndTrailingClassName, wrapContentAndTrailing, wrapTrailingContent: t1, labelPlacement: t2, trailingClassName, onMouseEnter, onFocusCapture, variant: variantProp, as: asProp, size: sizeProp } = props;
+	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;
@@ -43,7 +44,7 @@ var InputFrame = (props) => {
 		$[3] = t4;
 	} else t4 = $[3];
 	const isTrailingIconElement = t4;
-	const hasTrailingContent = hasClear || !!trailingContent || !!unit || !!action || !!trailingIcon || !!trailingAction;
+	const hasTrailingContent = reserveTrailingContent || hasClear || !!trailingContent || !!unit || !!isLoading || !!action || !!trailingIcon || !!trailingAction;
 	const isTrailingInteractive = !!action || !!trailingAction || !!isTrailingIconElement || hasClear && !!showClear || !!trailingContent;
 	let dataAttributeProps;
 	let formFieldProps;
@@ -300,12 +301,13 @@ var InputFrame = (props) => {
 	} else t15 = $[111];
 	const contentRow = t15;
 	let t16;
-	if ($[112] !== action || $[113] !== clearClassName || $[114] !== hasClear || $[115] !== hasTrailingContent || $[116] !== isDisabled || $[117] !== onClear || $[118] !== renderStatic || $[119] !== showClear || $[120] !== trailingAction || $[121] !== trailingContent || $[122] !== trailingIcon || $[123] !== typographyCva || $[124] !== unit) {
+	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,
@@ -318,7 +320,11 @@ var InputFrame = (props) => {
 				}),
 				children: unit
 			}),
-			action && /* @__PURE__ */ jsx(InlineIconButton, {
+			isLoading && /* @__PURE__ */ jsx("div", {
+				className: "inline-flex",
+				children: /* @__PURE__ */ jsx(Loader, {})
+			}),
+			!isLoading && action && /* @__PURE__ */ jsx(InlineIconButton, {
 				color: "secondary",
 				icon: action.icon,
 				isDisabled,
@@ -327,7 +333,7 @@ var InputFrame = (props) => {
 				label: action.altText,
 				className: clsx("border-0!", action.className)
 			}),
-			!action && trailingIcon && renderIconVisual(trailingIcon),
+			!isLoading && !action && trailingIcon && renderIconVisual(trailingIcon),
 			trailingAction
 		] }) : null;
 		$[112] = action;
@@ -335,90 +341,92 @@ var InputFrame = (props) => {
 		$[114] = hasClear;
 		$[115] = hasTrailingContent;
 		$[116] = isDisabled;
-		$[117] = onClear;
-		$[118] = renderStatic;
-		$[119] = showClear;
-		$[120] = trailingAction;
-		$[121] = trailingContent;
-		$[122] = trailingIcon;
-		$[123] = typographyCva;
-		$[124] = unit;
-		$[125] = t16;
-	} else t16 = $[125];
+		$[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 ($[126] !== as || $[127] !== inputSizeCva || $[128] !== isTrailingInteractive || $[129] !== size || $[130] !== trailingClassName || $[131] !== trailingContentNodes || $[132] !== wrapTrailingContent) {
+	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", trailingClassName),
+			}), !isTrailingInteractive && "pointer-events-none", isDisabled && "text-interactive-text-secondary-disabled", trailingClassName),
 			children: trailingContentNodes
 		}) : trailingContentNodes;
-		$[126] = as;
-		$[127] = inputSizeCva;
-		$[128] = isTrailingInteractive;
-		$[129] = size;
-		$[130] = trailingClassName;
-		$[131] = trailingContentNodes;
-		$[132] = wrapTrailingContent;
-		$[133] = t17;
-	} else t17 = $[133];
+		$[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 ($[134] !== contentAndTrailingClassName || $[135] !== contentRow || $[136] !== trailingRow || $[137] !== wrapContentAndTrailing) {
+	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] });
-		$[134] = contentAndTrailingClassName;
-		$[135] = contentRow;
-		$[136] = trailingRow;
-		$[137] = wrapContentAndTrailing;
-		$[138] = t18;
-	} else t18 = $[138];
+		$[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 ($[139] !== onMouseEnter || $[140] !== onStaticInteract || $[141] !== renderStatic) {
+	if ($[141] !== onMouseEnter || $[142] !== onStaticInteract || $[143] !== renderStatic) {
 		t21 = (event) => {
 			onMouseEnter?.(event);
 			if (renderStatic) onStaticInteract?.(false);
 		};
-		$[139] = onMouseEnter;
-		$[140] = onStaticInteract;
-		$[141] = renderStatic;
-		$[142] = t21;
-	} else t21 = $[142];
+		$[141] = onMouseEnter;
+		$[142] = onStaticInteract;
+		$[143] = renderStatic;
+		$[144] = t21;
+	} else t21 = $[144];
 	let t22;
-	if ($[143] !== onFocusCapture || $[144] !== onStaticInteract || $[145] !== renderStatic) {
+	if ($[145] !== onFocusCapture || $[146] !== onStaticInteract || $[147] !== renderStatic) {
 		t22 = (event_0) => {
 			onFocusCapture?.(event_0);
 			if (renderStatic) onStaticInteract?.(true);
 		};
-		$[143] = onFocusCapture;
-		$[144] = onStaticInteract;
-		$[145] = renderStatic;
-		$[146] = t22;
-	} else t22 = $[146];
+		$[145] = onFocusCapture;
+		$[146] = onStaticInteract;
+		$[147] = renderStatic;
+		$[148] = t22;
+	} else t22 = $[148];
 	let t23;
-	if ($[147] !== as || $[148] !== inputBaseCva || $[149] !== inputClassName || $[150] !== variant) {
+	if ($[149] !== as || $[150] !== inputBaseCva || $[151] !== inputClassName || $[152] !== variant) {
 		t23 = clsx("relative flex cursor-text has-disabled:cursor-default", inputBaseCva({
 			variant,
 			as
 		}), inputClassName);
-		$[147] = as;
-		$[148] = inputBaseCva;
-		$[149] = inputClassName;
-		$[150] = variant;
-		$[151] = t23;
-	} else t23 = $[151];
+		$[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 ($[152] !== onStaticInteract || $[153] !== renderStatic) {
+	if ($[154] !== onStaticInteract || $[155] !== renderStatic) {
 		t25 = () => {
 			if (renderStatic) onStaticInteract?.(true);
 		};
@@ -428,18 +436,18 @@ var InputFrame = (props) => {
 		t27 = () => {
 			if (renderStatic) onStaticInteract?.(true);
 		};
-		$[152] = onStaticInteract;
-		$[153] = renderStatic;
-		$[154] = t25;
-		$[155] = t26;
-		$[156] = t27;
+		$[154] = onStaticInteract;
+		$[155] = renderStatic;
+		$[156] = t25;
+		$[157] = t26;
+		$[158] = t27;
 	} else {
-		t25 = $[154];
-		t26 = $[155];
-		t27 = $[156];
+		t25 = $[156];
+		t26 = $[157];
+		t27 = $[158];
 	}
 	let t28;
-	if ($[157] !== dataAttributeProps || $[158] !== inputFrameContent || $[159] !== ref || $[160] !== t23 || $[161] !== t24 || $[162] !== t25 || $[163] !== t26 || $[164] !== t27) {
+	if ($[159] !== dataAttributeProps || $[160] !== inputFrameContent || $[161] !== ref || $[162] !== t23 || $[163] !== t24 || $[164] !== t25 || $[165] !== t26 || $[166] !== t27) {
 		t28 = /* @__PURE__ */ jsx("div", {
 			ref,
 			...dataAttributeProps,
@@ -451,18 +459,18 @@ var InputFrame = (props) => {
 			"data-rac": "",
 			children: inputFrameContent
 		});
-		$[157] = dataAttributeProps;
-		$[158] = inputFrameContent;
-		$[159] = ref;
-		$[160] = t23;
-		$[161] = t24;
-		$[162] = t25;
-		$[163] = t26;
-		$[164] = t27;
-		$[165] = t28;
-	} else t28 = $[165];
+		$[159] = dataAttributeProps;
+		$[160] = inputFrameContent;
+		$[161] = ref;
+		$[162] = t23;
+		$[163] = t24;
+		$[164] = t25;
+		$[165] = t26;
+		$[166] = t27;
+		$[167] = t28;
+	} else t28 = $[167];
 	let t29;
-	if ($[166] !== as || $[167] !== dataAttributeProps || $[168] !== formFieldProps || $[169] !== formFieldRef || $[170] !== labelProps || $[171] !== t20 || $[172] !== t21 || $[173] !== t22 || $[174] !== t28) {
+	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,
@@ -474,31 +482,31 @@ var InputFrame = (props) => {
 			onFocusCapture: t22,
 			children: t28
 		});
-		$[166] = as;
-		$[167] = dataAttributeProps;
-		$[168] = formFieldProps;
-		$[169] = formFieldRef;
-		$[170] = labelProps;
-		$[171] = t20;
-		$[172] = t21;
-		$[173] = t22;
-		$[174] = t28;
-		$[175] = t29;
-	} else t29 = $[175];
+		$[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 ($[176] !== as || $[177] !== error || $[178] !== t19 || $[179] !== t29) {
+	if ($[178] !== as || $[179] !== error || $[180] !== t19 || $[181] !== t29) {
 		t30 = /* @__PURE__ */ jsx(TooltipWrapper, {
 			as,
 			error,
 			triggerTabIndex: t19,
 			children: t29
 		});
-		$[176] = as;
-		$[177] = error;
-		$[178] = t19;
-		$[179] = t29;
-		$[180] = t30;
-	} else t30 = $[180];
+		$[178] = as;
+		$[179] = error;
+		$[180] = t19;
+		$[181] = t29;
+		$[182] = t30;
+	} else t30 = $[182];
 	return t30;
 };
 var renderIconVisual = (icon) => {

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>;