@ultraviolet/ui 3.21.1 → 3.21.2

package/dist/components/NumberInput/components/Controls.js

@@ -9,65 +9,67 @@ import { PlusIcon } from "@ultraviolet/icons/PlusIcon";
 
 //#region src/components/NumberInput/components/Controls.tsx
 var Controls;
-var init_Controls = __esmMin(() => {
-	init_Button();
-	init_Stack();
-	init_styles_css();
-	Controls = ({ controls, direction, size, localRef, max, min, isDisabledOrReadOnly }) => {
-		var _localRef$current4;
-		var _localRef$current8;
-		const isUp = direction === "up";
-		const isPlusDisabled = useCallback(() => {
-			var _localRef$current;
-			var _localRef$current2;
-			var _localRef$current3;
-			if (!(localRef === null || localRef === void 0 || (_localRef$current = localRef.current) === null || _localRef$current === void 0 ? void 0 : _localRef$current.value) || (localRef === null || localRef === void 0 || (_localRef$current2 = localRef.current) === null || _localRef$current2 === void 0 ? void 0 : _localRef$current2.value) === "") return false;
-			const numericValue = Number(localRef === null || localRef === void 0 || (_localRef$current3 = localRef.current) === null || _localRef$current3 === void 0 ? void 0 : _localRef$current3.value);
-			if (Number.isNaN(numericValue)) return false;
-			return numericValue >= (typeof max === "number" ? max : Number(max));
-		}, [localRef === null || localRef === void 0 || (_localRef$current4 = localRef.current) === null || _localRef$current4 === void 0 ? void 0 : _localRef$current4.value, max]);
-		const isMinusDisabled = useCallback(() => {
-			var _localRef$current5;
-			var _localRef$current6;
-			var _localRef$current7;
-			if (!(localRef === null || localRef === void 0 || (_localRef$current5 = localRef.current) === null || _localRef$current5 === void 0 ? void 0 : _localRef$current5.value) || (localRef === null || localRef === void 0 || (_localRef$current6 = localRef.current) === null || _localRef$current6 === void 0 ? void 0 : _localRef$current6.value) === "") return false;
-			const numericValue = Number(localRef === null || localRef === void 0 || (_localRef$current7 = localRef.current) === null || _localRef$current7 === void 0 ? void 0 : _localRef$current7.value);
-			if (Number.isNaN(numericValue)) return false;
-			const minValue = typeof min === "number" ? min : Number(min);
-			return Number.isNaN(numericValue) || numericValue <= minValue;
-		}, [localRef === null || localRef === void 0 || (_localRef$current8 = localRef.current) === null || _localRef$current8 === void 0 ? void 0 : _localRef$current8.value, min]);
-		const onClickSideButton = useCallback(() => {
-			var _localRef$current11;
-			if (direction === "up") {
-				var _localRef$current9;
-				(_localRef$current9 = localRef.current) === null || _localRef$current9 === void 0 || _localRef$current9.stepUp();
-			} else if (direction === "down") {
-				var _localRef$current10;
-				(_localRef$current10 = localRef.current) === null || _localRef$current10 === void 0 || _localRef$current10.stepDown();
-			}
-			(_localRef$current11 = localRef.current) === null || _localRef$current11 === void 0 || _localRef$current11.dispatchEvent(new Event("input", {
-				bubbles: true,
-				cancelable: false
-			}));
-		}, [localRef, direction]);
-		const isDisabled = isUp ? isPlusDisabled() : isMinusDisabled();
-		return controls ? /* @__PURE__ */ jsx(Stack, {
-			alignItems: "center",
-			className: numberInputStyle.sideContainer[size],
-			"data-size": size,
-			justifyContent: "center",
-			children: /* @__PURE__ */ jsx(Button, {
-				"aria-label": isUp ? "plus" : "minus",
-				disabled: isDisabledOrReadOnly || isDisabled,
-				onClick: onClickSideButton,
-				sentiment: "neutral",
-				size: size === "small" ? "xsmall" : "small",
-				variant: "ghost",
-				children: isUp ? /* @__PURE__ */ jsx(PlusIcon, { size: size === "large" ? "small" : "small" }) : /* @__PURE__ */ jsx(MinusIcon, { size: size === "large" ? "small" : "small" })
-			})
-		}) : null;
-	};
-});
+function init_Controls() {
+	return (init_Controls = __esmMin(() => {
+		init_Button();
+		init_Stack();
+		init_styles_css();
+		Controls = ({ controls, direction, size, localRef, max, min, isDisabledOrReadOnly }) => {
+			var _localRef$current4;
+			var _localRef$current8;
+			const isUp = direction === "up";
+			const isPlusDisabled = useCallback(() => {
+				var _localRef$current;
+				var _localRef$current2;
+				var _localRef$current3;
+				if (!(localRef === null || localRef === void 0 || (_localRef$current = localRef.current) === null || _localRef$current === void 0 ? void 0 : _localRef$current.value) || (localRef === null || localRef === void 0 || (_localRef$current2 = localRef.current) === null || _localRef$current2 === void 0 ? void 0 : _localRef$current2.value) === "") return false;
+				const numericValue = Number(localRef === null || localRef === void 0 || (_localRef$current3 = localRef.current) === null || _localRef$current3 === void 0 ? void 0 : _localRef$current3.value);
+				if (Number.isNaN(numericValue)) return false;
+				return numericValue >= (typeof max === "number" ? max : Number(max));
+			}, [localRef === null || localRef === void 0 || (_localRef$current4 = localRef.current) === null || _localRef$current4 === void 0 ? void 0 : _localRef$current4.value, max]);
+			const isMinusDisabled = useCallback(() => {
+				var _localRef$current5;
+				var _localRef$current6;
+				var _localRef$current7;
+				if (!(localRef === null || localRef === void 0 || (_localRef$current5 = localRef.current) === null || _localRef$current5 === void 0 ? void 0 : _localRef$current5.value) || (localRef === null || localRef === void 0 || (_localRef$current6 = localRef.current) === null || _localRef$current6 === void 0 ? void 0 : _localRef$current6.value) === "") return false;
+				const numericValue = Number(localRef === null || localRef === void 0 || (_localRef$current7 = localRef.current) === null || _localRef$current7 === void 0 ? void 0 : _localRef$current7.value);
+				if (Number.isNaN(numericValue)) return false;
+				const minValue = typeof min === "number" ? min : Number(min);
+				return Number.isNaN(numericValue) || numericValue <= minValue;
+			}, [localRef === null || localRef === void 0 || (_localRef$current8 = localRef.current) === null || _localRef$current8 === void 0 ? void 0 : _localRef$current8.value, min]);
+			const onClickSideButton = useCallback(() => {
+				var _localRef$current11;
+				if (direction === "up") {
+					var _localRef$current9;
+					(_localRef$current9 = localRef.current) === null || _localRef$current9 === void 0 || _localRef$current9.stepUp();
+				} else if (direction === "down") {
+					var _localRef$current10;
+					(_localRef$current10 = localRef.current) === null || _localRef$current10 === void 0 || _localRef$current10.stepDown();
+				}
+				(_localRef$current11 = localRef.current) === null || _localRef$current11 === void 0 || _localRef$current11.dispatchEvent(new Event("input", {
+					bubbles: true,
+					cancelable: false
+				}));
+			}, [localRef, direction]);
+			const isDisabled = isUp ? isPlusDisabled() : isMinusDisabled();
+			return controls ? /* @__PURE__ */ jsx(Stack, {
+				alignItems: "center",
+				className: numberInputStyle.sideContainer[size],
+				"data-size": size,
+				justifyContent: "center",
+				children: /* @__PURE__ */ jsx(Button, {
+					"aria-label": isUp ? "plus" : "minus",
+					disabled: isDisabledOrReadOnly || isDisabled,
+					onClick: onClickSideButton,
+					sentiment: "neutral",
+					size: size === "small" ? "xsmall" : "small",
+					variant: "ghost",
+					children: isUp ? /* @__PURE__ */ jsx(PlusIcon, { size: size === "large" ? "small" : "small" }) : /* @__PURE__ */ jsx(MinusIcon, { size: size === "large" ? "small" : "small" })
+				})
+			}) : null;
+		};
+	}))();
+}
 
 //#endregion
 init_Controls();

package/dist/components/NumberInput/components/Unit.js

@@ -5,23 +5,25 @@ import { jsx } from "react/jsx-runtime";
 
 //#region src/components/NumberInput/components/Unit.tsx
 var Unit;
-var init_Unit = __esmMin(() => {
-	init_Text();
-	init_styles_css();
-	Unit = ({ unit, disabled, readOnly, size, controls }) => unit ? /* @__PURE__ */ jsx(Text, {
-		as: "span",
-		className: numberInputStyle.unit({
+function init_Unit() {
+	return (init_Unit = __esmMin(() => {
+		init_Text();
+		init_styles_css();
+		Unit = ({ unit, disabled, readOnly, size, controls }) => unit ? /* @__PURE__ */ jsx(Text, {
+			as: "span",
+			className: numberInputStyle.unit({
+				disabled,
+				readOnly,
+				size,
+				controls
+			}),
 			disabled,
-			readOnly,
-			size,
-			controls
-		}),
-		disabled,
-		sentiment: "neutral",
-		variant: "body",
-		children: unit
-	}) : null;
-});
+			sentiment: "neutral",
+			variant: "body",
+			children: unit
+		}) : null;
+	}))();
+}
 
 //#endregion
 init_Unit();

package/dist/components/NumberInput/index.d.ts

@@ -3,20 +3,34 @@
  * by typing into input. If the value is out of the min / max range, the input will automatically be the min / max value on blur.
  */
 export declare const NumberInput: import("react").ForwardRefExoticComponent<{
+    'data-testid'?: string;
+    helper?: import("react").ReactNode;
+} & Pick<import("react").AllHTMLAttributes<HTMLInputElement>, "disabled" | "id" | "name" | "required"> & {
+    onFocus?: import("react").FocusEventHandler<HTMLInputElement> | undefined;
+    onBlur?: import("react").FocusEventHandler<HTMLInputElement> | undefined;
+    onKeyDown?: import("react").KeyboardEventHandler<HTMLInputElement> | undefined;
+    autoFocus?: boolean | undefined;
+} & {
+    className?: string | undefined;
+    style?: import("react").CSSProperties | undefined;
+} & {
+    "aria-describedby"?: string | undefined;
+    "aria-labelledby"?: string | undefined;
+} & Partial<{
+    label: string;
+    'aria-label': string;
+    'aria-labelledby': string;
+}> & {
     size?: "large" | "medium" | "small";
     unit?: string;
     tooltip?: string;
-    className?: string;
-    'data-testid'?: string;
-    label?: string;
     labelDescription?: import("react").ReactNode;
     controls?: boolean;
     error?: string | boolean;
     success?: string | boolean;
-    helper?: import("react").ReactNode;
     value?: number | null;
     onChange?: (newValue: number | null) => void;
     min?: number;
     max?: number;
-} & Pick<import("react").InputHTMLAttributes<HTMLInputElement>, "aria-describedby" | "aria-label" | "autoFocus" | "disabled" | "id" | "name" | "onBlur" | "onFocus" | "placeholder" | "readOnly" | "required" | "step" | "style"> & import("react").RefAttributes<HTMLInputElement>>;
+} & Pick<import("react").InputHTMLAttributes<HTMLInputElement>, "placeholder" | "readOnly" | "step"> & import("react").RefAttributes<HTMLInputElement>>;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/NumberInput/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/NumberInput/index.tsx"],"names":[],"mappings":"AAqBA;;;GAGG;AACH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;oRAkMvB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/NumberInput/index.tsx"],"names":[],"mappings":"AAqBA;;;GAGG;AACH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uJAkMvB,CAAA"}

package/dist/components/NumberInput/index.js

@@ -15,169 +15,171 @@ import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/NumberInput/index.tsx
 var getValueAsNumber, NumberInput;
-var init_NumberInput = __esmMin(() => {
-	init_hasHelperText();
-	init_Description();
-	init_Label();
-	init_Row();
-	init_Stack();
-	init_Tooltip();
-	init_Controls();
-	init_Unit();
-	init_styles_css();
-	getValueAsNumber = (input) => {
-		return input.value === "" && !input.validity.badInput ? null : input.valueAsNumber;
-	};
-	NumberInput = forwardRef(({ disabled = false, max = Number.MAX_SAFE_INTEGER, min = 0, name, onChange, onFocus, onBlur, size = "large", step, unit, value, tooltip, className, label, labelDescription, id, controls = true, placeholder = "", error, success, helper, "aria-label": ariaLabel, "data-testid": dataTestId, "aria-describedby": ariaDescribedBy, required, autoFocus, readOnly, style }, ref) => {
-		const localRef = useRef(null);
-		/**
-		* Expose a custom ref for react-hook-form which reads the `value` prop of the native input when using the `register` function.
-		* We return a modified `value` to differentiate empty (null) from invalid (NaN), like we do in the `onChange` callback.
-		*/
-		useImperativeHandle(ref, () => {
-			if (!localRef.current) return null;
-			return new Proxy(localRef.current, {
-				get(target, prop) {
-					if (prop === "value") return getValueAsNumber(target);
-					const value = Reflect.get(target, prop);
-					return typeof value === "function" ? value.bind(target) : value;
-				},
-				set(target, prop, newValue) {
-					if (prop === "value" && Number.isNaN(newValue)) return true;
-					return Reflect.set(target, prop, newValue);
-				}
+function init_NumberInput() {
+	return (init_NumberInput = __esmMin(() => {
+		init_hasHelperText();
+		init_Description();
+		init_Label();
+		init_Row();
+		init_Stack();
+		init_Tooltip();
+		init_Controls();
+		init_Unit();
+		init_styles_css();
+		getValueAsNumber = (input) => {
+			return input.value === "" && !input.validity.badInput ? null : input.valueAsNumber;
+		};
+		NumberInput = forwardRef(({ "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, "data-testid": dataTestId, autoFocus, className, controls = true, disabled = false, error, helper, id, label, labelDescription, max = Number.MAX_SAFE_INTEGER, min = 0, name, onBlur, onChange, onFocus, placeholder = "", readOnly, required, size = "large", step, style, success, tooltip, unit, value }, ref) => {
+			const localRef = useRef(null);
+			/**
+			* Expose a custom ref for react-hook-form which reads the `value` prop of the native input when using the `register` function.
+			* We return a modified `value` to differentiate empty (null) from invalid (NaN), like we do in the `onChange` callback.
+			*/
+			useImperativeHandle(ref, () => {
+				if (!localRef.current) return null;
+				return new Proxy(localRef.current, {
+					get(target, prop) {
+						if (prop === "value") return getValueAsNumber(target);
+						const value = Reflect.get(target, prop);
+						return typeof value === "function" ? value.bind(target) : value;
+					},
+					set(target, prop, newValue) {
+						if (prop === "value" && Number.isNaN(newValue)) return true;
+						return Reflect.set(target, prop, newValue);
+					}
+				});
 			});
-		});
-		const uniqueId = useId();
-		const helperId = useId();
-		const localId = id !== null && id !== void 0 ? id : uniqueId;
-		const computedState = useMemo(() => {
-			if (disabled) return "disabled";
-			if (readOnly) return "readOnly";
-			if (error) return "error";
-			if (success) return "success";
-			return "default";
-		}, [
-			error,
-			success,
-			disabled,
-			readOnly
-		]);
-		const isDisabledOrReadOnly = disabled || readOnly;
-		return /* @__PURE__ */ jsxs(Stack, {
-			className,
-			gap: "0.5",
-			children: [
-				label || labelDescription ? /* @__PURE__ */ jsx(Label, {
-					htmlFor: localId,
-					labelDescription,
-					required,
-					size,
-					children: label
-				}) : null,
-				/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Tooltip, {
-					text: tooltip,
-					children: /* @__PURE__ */ jsxs("div", {
-						className: numberInputStyle.container({
-							size,
-							state: computedState
-						}),
-						"data-controls": controls,
-						"data-disabled": disabled,
-						"data-error": !!error,
-						"data-readonly": readOnly,
-						"data-size": size,
-						"data-success": !!success,
-						"data-unit": !!unit,
-						children: [
-							/* @__PURE__ */ jsx(Controls, {
-								controls,
-								direction: "down",
-								isDisabledOrReadOnly,
-								localRef,
-								max,
-								min,
-								onChange,
-								size
+			const uniqueId = useId();
+			const helperId = useId();
+			const localId = id !== null && id !== void 0 ? id : uniqueId;
+			const computedState = useMemo(() => {
+				if (disabled) return "disabled";
+				if (readOnly) return "readOnly";
+				if (error) return "error";
+				if (success) return "success";
+				return "default";
+			}, [
+				error,
+				success,
+				disabled,
+				readOnly
+			]);
+			const isDisabledOrReadOnly = disabled || readOnly;
+			return /* @__PURE__ */ jsxs(Stack, {
+				className,
+				gap: "0.5",
+				children: [
+					label || labelDescription ? /* @__PURE__ */ jsx(Label, {
+						htmlFor: localId,
+						labelDescription,
+						required,
+						size,
+						children: label
+					}) : null,
+					/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Tooltip, {
+						text: tooltip,
+						children: /* @__PURE__ */ jsxs("div", {
+							className: numberInputStyle.container({
+								size,
+								state: computedState
 							}),
-							/* @__PURE__ */ jsxs(Row, {
-								alignItems: "center",
-								className: numberInputStyle.inputContainer({ controls }),
-								justifyContent: "space-between",
-								templateColumns: "1fr auto",
-								children: [/* @__PURE__ */ jsx("input", {
-									"aria-describedby": ariaDescribedBy || (hasHelperText(helper, error, success) ? helperId : void 0),
-									"aria-label": ariaLabel,
-									autoFocus,
-									className: numberInputStyle.numberinput({
-										controls,
-										hasUnit: !!unit,
-										size
-									}),
-									"data-testid": dataTestId,
-									disabled,
-									id: localId,
+							"data-controls": controls,
+							"data-disabled": disabled,
+							"data-error": !!error,
+							"data-readonly": readOnly,
+							"data-size": size,
+							"data-success": !!success,
+							"data-unit": !!unit,
+							children: [
+								/* @__PURE__ */ jsx(Controls, {
+									controls,
+									direction: "down",
+									isDisabledOrReadOnly,
+									localRef,
 									max,
 									min,
-									name,
-									inputMode: Number.isInteger(step) ? "numeric" : "decimal",
-									onBlur: (event) => {
-										const { valueAsNumber } = event.target;
-										if (valueAsNumber && localRef.current) {
-											if (!isNullOrUndefined(max) && valueAsNumber > max) localRef.current.valueAsNumber = max;
-											if (!isNullOrUndefined(min) && valueAsNumber < min) localRef.current.valueAsNumber = min;
-											localRef.current.dispatchEvent(new Event("input", {
-												bubbles: true,
-												cancelable: false
-											}));
-										}
-										onBlur === null || onBlur === void 0 || onBlur(event);
-									},
-									onChange: onChange ? (event) => {
-										onChange(getValueAsNumber(event.target));
-									} : void 0,
-									onFocus,
-									placeholder,
-									readOnly,
-									ref: localRef,
-									required,
-									step,
-									style,
-									type: "number",
-									value: value === null || Number.isNaN(value) ? "" : value
-								}), /* @__PURE__ */ jsx(Unit, {
+									onChange,
+									size
+								}),
+								/* @__PURE__ */ jsxs(Row, {
+									alignItems: "center",
+									className: numberInputStyle.inputContainer({ controls }),
+									justifyContent: "space-between",
+									templateColumns: "1fr auto",
+									children: [/* @__PURE__ */ jsx("input", {
+										"aria-describedby": ariaDescribedBy || (hasHelperText(helper, error, success) ? helperId : void 0),
+										"aria-label": ariaLabel,
+										autoFocus,
+										className: numberInputStyle.numberinput({
+											controls,
+											hasUnit: !!unit,
+											size
+										}),
+										"data-testid": dataTestId,
+										disabled,
+										id: localId,
+										max,
+										min,
+										name,
+										inputMode: Number.isInteger(step) ? "numeric" : "decimal",
+										onBlur: (event) => {
+											const { valueAsNumber } = event.target;
+											if (valueAsNumber && localRef.current) {
+												if (!isNullOrUndefined(max) && valueAsNumber > max) localRef.current.valueAsNumber = max;
+												if (!isNullOrUndefined(min) && valueAsNumber < min) localRef.current.valueAsNumber = min;
+												localRef.current.dispatchEvent(new Event("input", {
+													bubbles: true,
+													cancelable: false
+												}));
+											}
+											onBlur === null || onBlur === void 0 || onBlur(event);
+										},
+										onChange: onChange ? (event) => {
+											onChange(getValueAsNumber(event.target));
+										} : void 0,
+										onFocus,
+										placeholder,
+										readOnly,
+										ref: localRef,
+										required,
+										step,
+										style,
+										type: "number",
+										value: value === null || Number.isNaN(value) ? "" : value
+									}), /* @__PURE__ */ jsx(Unit, {
+										controls,
+										disabled,
+										readOnly,
+										size,
+										unit
+									})]
+								}),
+								/* @__PURE__ */ jsx(Controls, {
 									controls,
-									disabled,
-									readOnly,
-									size,
-									unit
-								})]
-							}),
-							/* @__PURE__ */ jsx(Controls, {
-								controls,
-								direction: "up",
-								isDisabledOrReadOnly,
-								localRef,
-								max,
-								min,
-								onChange,
-								size
-							})
-						]
+									direction: "up",
+									isDisabledOrReadOnly,
+									localRef,
+									max,
+									min,
+									onChange,
+									size
+								})
+							]
+						})
+					}) }),
+					/* @__PURE__ */ jsx(Description, {
+						error,
+						helper,
+						disabled: isDisabledOrReadOnly,
+						success,
+						id: ariaDescribedBy !== null && ariaDescribedBy !== void 0 ? ariaDescribedBy : helperId
 					})
-				}) }),
-				/* @__PURE__ */ jsx(Description, {
-					error,
-					helper,
-					disabled: isDisabledOrReadOnly,
-					success,
-					id: ariaDescribedBy !== null && ariaDescribedBy !== void 0 ? ariaDescribedBy : helperId
-				})
-			]
+				]
+			});
 		});
-	});
-	NumberInput.displayName = "NumberInput";
-});
+		NumberInput.displayName = "NumberInput";
+	}))();
+}
 
 //#endregion
 init_NumberInput();