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

package/dist/components/inputs/Slider/Slider.js

@@ -10,130 +10,138 @@ import { mergeRefs } from "@react-aria/utils";
 import { Controller } from "react-hook-form";
 //#region src/components/inputs/Slider/Slider.tsx
 var SliderBase = (props) => {
-	const $ = c(58);
+	const $ = c(61);
 	const ui = UIConfig.useConfig();
-	let error;
-	let errorClassName;
-	let headerClassName;
-	let helperText;
-	let hideLabelProp;
+	let T0;
+	let formFieldProps;
+	let getTrackFillStyle;
 	let isDisabled;
-	let isHeaderHidden;
-	let isRequired;
-	let label;
-	let maxValueProp;
-	let minValueProp;
-	let rest;
-	let rightContent;
-	let tooltipText;
+	let maxValue;
+	let minValue;
+	let onBlur;
+	let t0;
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	let t5;
 	let unit;
-	if ($[0] !== props) {
-		({label, tooltipText, helperText, isRequired, rightContent, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, unit, hideLabel: hideLabelProp, minValue: minValueProp, maxValue: maxValueProp, ...rest} = props);
+	if ($[0] !== props || $[1] !== ui) {
+		const { label, tooltipText, helperText, isRequired, rightContent, isDisabled: t6, headerClassName, errorClassName, isHeaderHidden, error, unit: t7, hideLabel: hideLabelProp, minValue: minValueProp, maxValue: maxValueProp, onBlur: t8, ...rest } = props;
+		isDisabled = t6;
+		unit = t7;
+		onBlur = t8;
+		const hideLabel = hideLabelProp ?? ui.input.hideLabel;
+		minValue = minValueProp ?? ui.slider.minValue;
+		maxValue = maxValueProp ?? ui.slider.maxValue;
+		let t9;
+		if ($[16] !== error || $[17] !== errorClassName || $[18] !== headerClassName || $[19] !== helperText || $[20] !== hideLabel || $[21] !== isDisabled || $[22] !== isHeaderHidden || $[23] !== isRequired || $[24] !== label || $[25] !== rightContent || $[26] !== tooltipText) {
+			t9 = {
+				error,
+				label,
+				tooltipText,
+				helperText,
+				isRequired,
+				rightContent,
+				isHeaderHidden,
+				hideLabel,
+				isDisabled,
+				headerClassName,
+				errorClassName
+			};
+			$[16] = error;
+			$[17] = errorClassName;
+			$[18] = headerClassName;
+			$[19] = helperText;
+			$[20] = hideLabel;
+			$[21] = isDisabled;
+			$[22] = isHeaderHidden;
+			$[23] = isRequired;
+			$[24] = label;
+			$[25] = rightContent;
+			$[26] = tooltipText;
+			$[27] = t9;
+		} else t9 = $[27];
+		formFieldProps = t9;
+		let t10;
+		if ($[28] !== minValue || $[29] !== props.defaultValue || $[30] !== props.isRange) {
+			t10 = props.defaultValue ?? (props.isRange ? [minValue, minValue] : minValue);
+			$[28] = minValue;
+			$[29] = props.defaultValue;
+			$[30] = props.isRange;
+			$[31] = t10;
+		} else t10 = $[31];
+		const defaultValue = t10;
+		let t11;
+		if ($[32] !== props.isRange) {
+			t11 = (state) => {
+				const p0 = state.getThumbPercent(0);
+				const p1 = state.getThumbPercent(1);
+				return {
+					left: props.isRange ? `${p0 * 100}%` : 0,
+					width: props.isRange ? `${(p1 - p0) * 100}%` : `${p0 * 100}%`
+				};
+			};
+			$[32] = props.isRange;
+			$[33] = t11;
+		} else t11 = $[33];
+		getTrackFillStyle = t11;
+		T0 = Slider;
+		t0 = rest;
+		t1 = defaultValue;
+		t2 = minValue;
+		t3 = maxValue;
+		t4 = isDisabled;
+		t5 = clsx("group", rest.className);
 		$[0] = props;
-		$[1] = error;
-		$[2] = errorClassName;
-		$[3] = headerClassName;
-		$[4] = helperText;
-		$[5] = hideLabelProp;
-		$[6] = isDisabled;
-		$[7] = isHeaderHidden;
-		$[8] = isRequired;
-		$[9] = label;
-		$[10] = maxValueProp;
-		$[11] = minValueProp;
-		$[12] = rest;
-		$[13] = rightContent;
-		$[14] = tooltipText;
+		$[1] = ui;
+		$[2] = T0;
+		$[3] = formFieldProps;
+		$[4] = getTrackFillStyle;
+		$[5] = isDisabled;
+		$[6] = maxValue;
+		$[7] = minValue;
+		$[8] = onBlur;
+		$[9] = t0;
+		$[10] = t1;
+		$[11] = t2;
+		$[12] = t3;
+		$[13] = t4;
+		$[14] = t5;
 		$[15] = unit;
 	} else {
-		error = $[1];
-		errorClassName = $[2];
-		headerClassName = $[3];
-		helperText = $[4];
-		hideLabelProp = $[5];
-		isDisabled = $[6];
-		isHeaderHidden = $[7];
-		isRequired = $[8];
-		label = $[9];
-		maxValueProp = $[10];
-		minValueProp = $[11];
-		rest = $[12];
-		rightContent = $[13];
-		tooltipText = $[14];
+		T0 = $[2];
+		formFieldProps = $[3];
+		getTrackFillStyle = $[4];
+		isDisabled = $[5];
+		maxValue = $[6];
+		minValue = $[7];
+		onBlur = $[8];
+		t0 = $[9];
+		t1 = $[10];
+		t2 = $[11];
+		t3 = $[12];
+		t4 = $[13];
+		t5 = $[14];
 		unit = $[15];
 	}
-	const hideLabel = hideLabelProp ?? ui.input.hideLabel;
-	const minValue = minValueProp ?? ui.slider.minValue;
-	const maxValue = maxValueProp ?? ui.slider.maxValue;
-	let t0;
-	if ($[16] !== error || $[17] !== errorClassName || $[18] !== headerClassName || $[19] !== helperText || $[20] !== hideLabel || $[21] !== isDisabled || $[22] !== isHeaderHidden || $[23] !== isRequired || $[24] !== label || $[25] !== rightContent || $[26] !== tooltipText) {
-		t0 = {
-			error,
-			label,
-			tooltipText,
-			helperText,
-			isRequired,
-			rightContent,
-			isHeaderHidden,
-			hideLabel,
-			isDisabled,
-			headerClassName,
-			errorClassName
-		};
-		$[16] = error;
-		$[17] = errorClassName;
-		$[18] = headerClassName;
-		$[19] = helperText;
-		$[20] = hideLabel;
-		$[21] = isDisabled;
-		$[22] = isHeaderHidden;
-		$[23] = isRequired;
-		$[24] = label;
-		$[25] = rightContent;
-		$[26] = tooltipText;
-		$[27] = t0;
-	} else t0 = $[27];
-	const formFieldProps = t0;
-	let t1;
-	if ($[28] !== minValue || $[29] !== props.defaultValue || $[30] !== props.isRange) {
-		t1 = props.defaultValue ?? (props.isRange ? [minValue, minValue] : minValue);
-		$[28] = minValue;
-		$[29] = props.defaultValue;
-		$[30] = props.isRange;
-		$[31] = t1;
-	} else t1 = $[31];
-	const defaultValue = t1;
-	let t2;
-	if ($[32] !== props.isRange) {
-		t2 = (state) => {
-			const p0 = state.getThumbPercent(0);
-			const p1 = state.getThumbPercent(1);
-			return {
-				left: props.isRange ? `${p0 * 100}%` : 0,
-				width: props.isRange ? `${(p1 - p0) * 100}%` : `${p0 * 100}%`
-			};
-		};
-		$[32] = props.isRange;
-		$[33] = t2;
-	} else t2 = $[33];
-	const getTrackFillStyle = t2;
-	let t3;
+	let t6;
 	if ($[34] !== minValue || $[35] !== unit) {
-		t3 = /* @__PURE__ */ jsxs(Typography, {
+		t6 = /* @__PURE__ */ jsxs(Typography, {
 			className: "min-w-10 px-slider-side-leading-and-trailing py-slider-height-leading-and-trailing text-text-default-3",
 			size: "label-2",
 			children: [minValue, unit]
 		});
 		$[34] = minValue;
 		$[35] = unit;
-		$[36] = t3;
-	} else t3 = $[36];
-	let t4;
-	if ($[37] !== getTrackFillStyle || $[38] !== isDisabled || $[39] !== props.isDisabled) {
-		t4 = /* @__PURE__ */ jsx(SliderTrack, {
+		$[36] = t6;
+	} else t6 = $[36];
+	let t7;
+	if ($[37] !== getTrackFillStyle || $[38] !== isDisabled || $[39] !== onBlur || $[40] !== props.isDisabled) {
+		t7 = /* @__PURE__ */ jsx(SliderTrack, {
 			className: "relative mx-2 h-6 w-full",
-			children: (t5) => {
-				const { state: state_0 } = t5;
+			children: (t8) => {
+				const { state: state_0 } = t8;
 				return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
 					className: "absolute top-1/2 h-1 w-full -translate-y-1/2 overflow-hidden rounded-full bg-elevation-outline-default-1",
 					children: /* @__PURE__ */ jsx("div", {
@@ -143,70 +151,75 @@ var SliderBase = (props) => {
 				}), state_0.values.map((_, i) => /* @__PURE__ */ jsx(SliderThumb, {
 					index: i,
 					className: clsx("absolute top-1/2 size-4 cursor-pointer rounded-full bg-interactive-contained-primary-idle disabled:cursor-default", "dragging:bg-interactive-contained-primary-pressed hover:bg-interactive-contained-primary-hover focus-visible:outline-interactive-contained-primary-focus disabled:bg-interactive-contained-primary-disabled", uiOutlineClass),
-					isDisabled
+					isDisabled,
+					onBlur: (event) => onBlur?.({ target: event.target })
 				}, i))] });
 			}
 		});
 		$[37] = getTrackFillStyle;
 		$[38] = isDisabled;
-		$[39] = props.isDisabled;
-		$[40] = t4;
-	} else t4 = $[40];
-	let t5;
-	if ($[41] !== maxValue || $[42] !== unit) {
-		t5 = /* @__PURE__ */ jsxs(Typography, {
+		$[39] = onBlur;
+		$[40] = props.isDisabled;
+		$[41] = t7;
+	} else t7 = $[41];
+	let t8;
+	if ($[42] !== maxValue || $[43] !== unit) {
+		t8 = /* @__PURE__ */ jsxs(Typography, {
 			className: "min-w-10 px-slider-side-leading-and-trailing py-slider-height-leading-and-trailing text-text-default-3",
 			size: "label-2",
 			children: [maxValue, unit]
 		});
-		$[41] = maxValue;
-		$[42] = unit;
-		$[43] = t5;
-	} else t5 = $[43];
-	let t6;
-	if ($[44] !== t3 || $[45] !== t4 || $[46] !== t5) {
-		t6 = /* @__PURE__ */ jsxs("div", {
+		$[42] = maxValue;
+		$[43] = unit;
+		$[44] = t8;
+	} else t8 = $[44];
+	let t9;
+	if ($[45] !== t6 || $[46] !== t7 || $[47] !== t8) {
+		t9 = /* @__PURE__ */ jsxs("div", {
 			className: "flex items-center justify-between",
 			children: [
-				t3,
-				t4,
-				t5
+				t6,
+				t7,
+				t8
 			]
 		});
-		$[44] = t3;
-		$[45] = t4;
-		$[46] = t5;
-		$[47] = t6;
-	} else t6 = $[47];
-	let t7;
-	if ($[48] !== formFieldProps || $[49] !== t6) {
-		t7 = /* @__PURE__ */ jsx(FormField, {
+		$[45] = t6;
+		$[46] = t7;
+		$[47] = t8;
+		$[48] = t9;
+	} else t9 = $[48];
+	let t10;
+	if ($[49] !== formFieldProps || $[50] !== t9) {
+		t10 = /* @__PURE__ */ jsx(FormField, {
 			...formFieldProps,
-			children: t6
+			children: t9
 		});
-		$[48] = formFieldProps;
-		$[49] = t6;
-		$[50] = t7;
-	} else t7 = $[50];
-	let t8;
-	if ($[51] !== defaultValue || $[52] !== isDisabled || $[53] !== maxValue || $[54] !== minValue || $[55] !== rest || $[56] !== t7) {
-		t8 = /* @__PURE__ */ jsx(Slider, {
-			...rest,
-			defaultValue,
-			minValue,
-			maxValue,
-			isDisabled,
-			children: t7
+		$[49] = formFieldProps;
+		$[50] = t9;
+		$[51] = t10;
+	} else t10 = $[51];
+	let t11;
+	if ($[52] !== T0 || $[53] !== t0 || $[54] !== t1 || $[55] !== t10 || $[56] !== t2 || $[57] !== t3 || $[58] !== t4 || $[59] !== t5) {
+		t11 = /* @__PURE__ */ jsx(T0, {
+			...t0,
+			defaultValue: t1,
+			minValue: t2,
+			maxValue: t3,
+			isDisabled: t4,
+			className: t5,
+			children: t10
 		});
-		$[51] = defaultValue;
-		$[52] = isDisabled;
-		$[53] = maxValue;
-		$[54] = minValue;
-		$[55] = rest;
-		$[56] = t7;
-		$[57] = t8;
-	} else t8 = $[57];
-	return t8;
+		$[52] = T0;
+		$[53] = t0;
+		$[54] = t1;
+		$[55] = t10;
+		$[56] = t2;
+		$[57] = t3;
+		$[58] = t4;
+		$[59] = t5;
+		$[60] = t11;
+	} else t11 = $[60];
+	return t11;
 };
 var Slider$1 = (props) => {
 	const $ = c(15);
@@ -234,6 +247,7 @@ var Slider$1 = (props) => {
 					...innerProps,
 					ref: mergeRefs(ref, field.ref),
 					value: field.value,
+					onBlur: field.onBlur,
 					onChange: field.onChange,
 					isDisabled: field.disabled || props.isDisabled,
 					error: props.error ?? error?.message

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

@@ -237,7 +237,7 @@ var TextEditorBase = (t0) => {
 		t39 = as;
 		t40 = labelProps;
 		if ($[90] !== className) {
-			t41 = clsx("w-full", className);
+			t41 = clsx("group w-full", className);
 			$[90] = className;
 			$[91] = t41;
 		} else t41 = $[91];

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

@@ -11,7 +11,7 @@ import { mergeRefs } from "@react-aria/utils";
 import { Controller } from "react-hook-form";
 //#region src/components/inputs/Toggle/Toggle.tsx
 var ToggleBase = (props) => {
-	const $ = c(48);
+	const $ = c(50);
 	const ui = UIConfig.useConfig();
 	const toggleCva = UIStyle.useCva("toggle.cva", toggle);
 	const toggleTypographyMap = UIStyle.useMapper("toggle.typography", toggleTypography);
@@ -29,48 +29,50 @@ var ToggleBase = (props) => {
 	let t6;
 	let t7;
 	let t8;
+	let t9;
 	if ($[0] !== props || $[1] !== toggleContentClassNameMap || $[2] !== toggleCva || $[3] !== toggleTypographyMap || $[4] !== ui) {
-		const { className, children: t9, isDisabled, error, variant: variantProp, fireBlurOnChange: fireBlurOnChangeProp, onChange, onBlur, ...rest } = props;
-		children = t9;
+		const { className, children: t10, isDisabled, error, variant: variantProp, fireBlurOnChange: fireBlurOnChangeProp, onChange, onBlur, ...rest } = props;
+		children = t10;
 		const variant = variantProp ?? ui.toggle.variant;
 		const fireBlurOnChange = fireBlurOnChangeProp ?? ui.toggle.fireBlurOnChange;
-		let t10;
-		if ($[18] !== error || $[19] !== isDisabled) {
-			t10 = {
+		let t11;
+		if ($[19] !== error || $[20] !== isDisabled) {
+			t11 = {
 				error,
 				isDisabled
 			};
-			$[18] = error;
-			$[19] = isDisabled;
-			$[20] = t10;
-		} else t10 = $[20];
-		formFieldErrorProps = t10;
-		let t11;
-		if ($[21] !== fireBlurOnChange || $[22] !== onBlur || $[23] !== onChange) {
-			t11 = (isSelected) => {
+			$[19] = error;
+			$[20] = isDisabled;
+			$[21] = t11;
+		} else t11 = $[21];
+		formFieldErrorProps = t11;
+		let t12;
+		if ($[22] !== fireBlurOnChange || $[23] !== onBlur || $[24] !== onChange) {
+			t12 = (isSelected) => {
 				onChange?.(isSelected);
 				if (fireBlurOnChange) onBlur?.({});
 			};
-			$[21] = fireBlurOnChange;
-			$[22] = onBlur;
-			$[23] = onChange;
-			$[24] = t11;
-		} else t11 = $[24];
-		const handleChange = t11;
+			$[22] = fireBlurOnChange;
+			$[23] = onBlur;
+			$[24] = onChange;
+			$[25] = t12;
+		} else t12 = $[25];
+		const handleChange = t12;
 		T1 = Switch;
 		t2 = rest;
 		t3 = props.isDirty || void 0;
 		t4 = props.isRequired || void 0;
 		t5 = isDisabled;
 		t6 = handleChange;
-		const t12 = !isDisabled && "cursor-pointer";
-		if ($[25] !== className || $[26] !== t12) {
-			t7 = clsx("group flex items-center gap-2", t12, className);
-			$[25] = className;
-			$[26] = t12;
-			$[27] = t7;
-		} else t7 = $[27];
-		t8 = /* @__PURE__ */ jsx("div", { className: toggleCva({
+		t7 = onBlur;
+		const t13 = !isDisabled && "cursor-pointer";
+		if ($[26] !== className || $[27] !== t13) {
+			t8 = clsx("group flex items-center gap-2", t13, className);
+			$[26] = className;
+			$[27] = t13;
+			$[28] = t8;
+		} else t8 = $[28];
+		t9 = /* @__PURE__ */ jsx("div", { className: toggleCva({
 			variant,
 			...rest
 		}) });
@@ -101,6 +103,7 @@ var ToggleBase = (props) => {
 		$[15] = t6;
 		$[16] = t7;
 		$[17] = t8;
+		$[18] = t9;
 	} else {
 		T0 = $[5];
 		T1 = $[6];
@@ -115,56 +118,59 @@ var ToggleBase = (props) => {
 		t6 = $[15];
 		t7 = $[16];
 		t8 = $[17];
+		t9 = $[18];
 	}
-	let t9;
-	if ($[28] !== T0 || $[29] !== children || $[30] !== t0 || $[31] !== t1) {
-		t9 = /* @__PURE__ */ jsx(T0, {
+	let t10;
+	if ($[29] !== T0 || $[30] !== children || $[31] !== t0 || $[32] !== t1) {
+		t10 = /* @__PURE__ */ jsx(T0, {
 			typography: t0,
 			contentClassName: t1,
 			children
 		});
-		$[28] = T0;
-		$[29] = children;
-		$[30] = t0;
-		$[31] = t1;
-		$[32] = t9;
-	} else t9 = $[32];
-	let t10;
-	if ($[33] !== T1 || $[34] !== t2 || $[35] !== t3 || $[36] !== t4 || $[37] !== t5 || $[38] !== t6 || $[39] !== t7 || $[40] !== t8 || $[41] !== t9) {
-		t10 = /* @__PURE__ */ jsxs(T1, {
+		$[29] = T0;
+		$[30] = children;
+		$[31] = t0;
+		$[32] = t1;
+		$[33] = t10;
+	} else t10 = $[33];
+	let t11;
+	if ($[34] !== T1 || $[35] !== t10 || $[36] !== t2 || $[37] !== t3 || $[38] !== t4 || $[39] !== t5 || $[40] !== t6 || $[41] !== t7 || $[42] !== t8 || $[43] !== t9) {
+		t11 = /* @__PURE__ */ jsxs(T1, {
 			...t2,
 			"data-is-dirty": t3,
 			"data-is-required": t4,
 			isDisabled: t5,
 			onChange: t6,
-			className: t7,
-			children: [t8, t9]
+			onBlur: t7,
+			className: t8,
+			children: [t9, t10]
 		});
-		$[33] = T1;
-		$[34] = t2;
-		$[35] = t3;
-		$[36] = t4;
-		$[37] = t5;
-		$[38] = t6;
-		$[39] = t7;
-		$[40] = t8;
-		$[41] = t9;
-		$[42] = t10;
-	} else t10 = $[42];
-	let t11;
-	if ($[43] !== formFieldErrorProps) {
-		t11 = /* @__PURE__ */ jsx(FormFieldError, { ...formFieldErrorProps });
-		$[43] = formFieldErrorProps;
+		$[34] = T1;
+		$[35] = t10;
+		$[36] = t2;
+		$[37] = t3;
+		$[38] = t4;
+		$[39] = t5;
+		$[40] = t6;
+		$[41] = t7;
+		$[42] = t8;
+		$[43] = t9;
 		$[44] = t11;
 	} else t11 = $[44];
 	let t12;
-	if ($[45] !== t10 || $[46] !== t11) {
-		t12 = /* @__PURE__ */ jsxs(Fragment, { children: [t10, t11] });
-		$[45] = t10;
-		$[46] = t11;
-		$[47] = t12;
-	} else t12 = $[47];
-	return t12;
+	if ($[45] !== formFieldErrorProps) {
+		t12 = /* @__PURE__ */ jsx(FormFieldError, { ...formFieldErrorProps });
+		$[45] = formFieldErrorProps;
+		$[46] = t12;
+	} else t12 = $[46];
+	let t13;
+	if ($[47] !== t11 || $[48] !== t12) {
+		t13 = /* @__PURE__ */ jsxs(Fragment, { children: [t11, t12] });
+		$[47] = t11;
+		$[48] = t12;
+		$[49] = t13;
+	} else t13 = $[49];
+	return t13;
 };
 var Toggle = (props) => {
 	const $ = c(15);

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

@@ -17,7 +17,8 @@ var toggle = cva(["h-6 w-10 rounded-full before:m-0-5 before:block before:aspect
 		"group-disabled:before:bg-interactive-contained-secondary-on-disabled",
 		"group-selected:before:bg-interactive-contained-primary-on-idle",
 		"group-selected:group-hover:before:bg-interactive-contained-primary-on-hover",
-		"group-selected:group-pressed:before:bg-interactive-contained-primary-on-pressed"
+		"group-selected:group-pressed:before:bg-interactive-contained-primary-on-pressed",
+		"group-selected:group-disabled:bg-interactive-contained-primary-disabled"
 	] } },
 	defaultVariants: { variant: "default" }
 });