@ultraviolet/ui 3.21.0 → 3.21.2

package/dist/components/TreeMapChart/Tooltip.js

@@ -6,25 +6,27 @@ import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/TreeMapChart/Tooltip.tsx
 var Tooltip;
-var init_Tooltip = __esmMin(() => {
-	init_Text();
-	init_styles_css();
-	Tooltip = ({ value, content, "data-testid": dataTestId }) => /* @__PURE__ */ jsxs("div", {
-		className: treeMapChartStyle.tooltipContainer,
-		"data-testid": dataTestId,
-		children: [/* @__PURE__ */ jsx(Text, {
-			as: "p",
-			sentiment: "primary",
-			variant: "bodyStronger",
-			children: content
-		}), value ? /* @__PURE__ */ jsx(Text, {
-			as: "p",
-			sentiment: "primary",
-			variant: "bodyStronger",
-			children: value
-		}) : null]
-	});
-});
+function init_Tooltip() {
+	return (init_Tooltip = __esmMin(() => {
+		init_Text();
+		init_styles_css();
+		Tooltip = ({ value, content, "data-testid": dataTestId }) => /* @__PURE__ */ jsxs("div", {
+			className: treeMapChartStyle.tooltipContainer,
+			"data-testid": dataTestId,
+			children: [/* @__PURE__ */ jsx(Text, {
+				as: "p",
+				sentiment: "primary",
+				variant: "bodyStronger",
+				children: content
+			}), value ? /* @__PURE__ */ jsx(Text, {
+				as: "p",
+				sentiment: "primary",
+				variant: "bodyStronger",
+				children: value
+			}) : null]
+		});
+	}))();
+}
 
 //#endregion
 init_Tooltip();

package/dist/components/TreeMapChart/index.js

@@ -1,6 +1,6 @@
 'use client';
 import { __esmMin, __name } from "../../_virtual/_rolldown/runtime.js";
-import _objectSpread2, { init_objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/objectSpread2.js";
+import _objectSpread2, { init_objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/objectSpread2.js";
 import { init_styles_css, treeMapChartStyle } from "./styles.css.js";
 import { getDataColors, init_treeMap } from "../../helpers/treeMap.js";
 import { Tooltip, init_Tooltip } from "./Tooltip.js";
@@ -12,53 +12,55 @@ import { ResponsiveTreeMapHtml } from "@nivo/treemap";
 
 //#region src/components/TreeMapChart/index.tsx
 var TreeMapChart;
-var init_TreeMapChart = __esmMin(() => {
-	init_treeMap();
-	init_Tooltip();
-	init_styles_css();
-	init_objectSpread2();
-	TreeMapChart = ({ height = "537px", data, tooltipFunction, chartProps, className, "data-testid": dataTestId }) => {
-		const theme = useTheme();
-		const colors = useMemo(() => getDataColors(data, theme), [data, theme]);
-		const tooltip = useCallback((props) => {
-			const { value, content } = tooltipFunction ? tooltipFunction(props.node.data) : {
-				content: props.node.data.content,
-				value: props.node.data.value
-			};
-			return /* @__PURE__ */ jsx(Tooltip, {
-				content,
-				value
+function init_TreeMapChart() {
+	return (init_TreeMapChart = __esmMin(() => {
+		init_treeMap();
+		init_Tooltip();
+		init_styles_css();
+		init_objectSpread2();
+		TreeMapChart = ({ height = "537px", data, tooltipFunction, chartProps, className, "data-testid": dataTestId }) => {
+			const theme = useTheme();
+			const colors = useMemo(() => getDataColors(data, theme), [data, theme]);
+			const tooltip = useCallback((props) => {
+				const { value, content } = tooltipFunction ? tooltipFunction(props.node.data) : {
+					content: props.node.data.content,
+					value: props.node.data.value
+				};
+				return /* @__PURE__ */ jsx(Tooltip, {
+					content,
+					value
+				});
+			}, [tooltipFunction]);
+			const nivoTheme = useMemo(() => ({ labels: { text: theme.typography.captionStrong } }), [theme.typography.captionStrong]);
+			return /* @__PURE__ */ jsx("div", {
+				className: cn(className, treeMapChartStyle.container),
+				"data-testid": dataTestId,
+				style: { height },
+				children: /* @__PURE__ */ jsx(ResponsiveTreeMapHtml, _objectSpread2({
+					animate: false,
+					borderColor: theme.colors.neutral.background,
+					borderWidth: 2,
+					colors,
+					data,
+					enableParentLabel: false,
+					identity: "id",
+					label: (node) => typeof node.data.content === "string" ? node.data.content : node.id,
+					labelSkipSize: 20,
+					labelTextColor: theme.colors.neutral.background,
+					leavesOnly: true,
+					motionConfig: "none",
+					nodeOpacity: 1,
+					orientLabel: false,
+					theme: nivoTheme,
+					tile: "squarify",
+					tooltip,
+					value: "value"
+				}, chartProps))
 			});
-		}, [tooltipFunction]);
-		const nivoTheme = useMemo(() => ({ labels: { text: theme.typography.captionStrong } }), [theme.typography.captionStrong]);
-		return /* @__PURE__ */ jsx("div", {
-			className: cn(className, treeMapChartStyle.container),
-			"data-testid": dataTestId,
-			style: { height },
-			children: /* @__PURE__ */ jsx(ResponsiveTreeMapHtml, _objectSpread2({
-				animate: false,
-				borderColor: theme.colors.neutral.background,
-				borderWidth: 2,
-				colors,
-				data,
-				enableParentLabel: false,
-				identity: "id",
-				label: (node) => typeof node.data.content === "string" ? node.data.content : node.id,
-				labelSkipSize: 20,
-				labelTextColor: theme.colors.neutral.background,
-				leavesOnly: true,
-				motionConfig: "none",
-				nodeOpacity: 1,
-				orientLabel: false,
-				theme: nivoTheme,
-				tile: "squarify",
-				tooltip,
-				value: "value"
-			}, chartProps))
-		});
-	};
-	TreeMapChart.displayName = "TreeMapChart";
-});
+		};
+		TreeMapChart.displayName = "TreeMapChart";
+	}))();
+}
 
 //#endregion
 init_TreeMapChart();

package/dist/components/TreeMapChart/styles.css.js

@@ -3,13 +3,15 @@ import { init_styles_css_ts_vanilla } from "./styles.css.ts.vanilla.js";
 
 //#region src/components/TreeMapChart/styles.css.ts
 var treeMapChartStyle;
-var init_styles_css = __esmMin(() => {
-	init_styles_css_ts_vanilla();
-	treeMapChartStyle = {
-		container: "uv_1pnrimq1",
-		tooltipContainer: "uv_1pnrimq0"
-	};
-});
+function init_styles_css() {
+	return (init_styles_css = __esmMin(() => {
+		/* @__PURE__ */ init_styles_css_ts_vanilla();
+		treeMapChartStyle = {
+			container: "uv_1pnrimq1",
+			tooltipContainer: "uv_1pnrimq0"
+		};
+	}))();
+}
 
 //#endregion
 init_styles_css();

package/dist/components/TreeMapChart/styles.css.ts.vanilla.js

@@ -1,7 +1,9 @@
 import { __esmMin } from "../../_virtual/_rolldown/runtime.js";
 
 //#region src/components/TreeMapChart/styles.css.ts.vanilla.css
-var init_styles_css_ts_vanilla = __esmMin(() => {});
+function init_styles_css_ts_vanilla() {
+	return (init_styles_css_ts_vanilla = __esmMin(() => {}))();
+}
 
 //#endregion
 init_styles_css_ts_vanilla();

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

@@ -1,4 +1,5 @@
 import type { ComponentProps, CSSProperties, InputHTMLAttributes, ReactNode } from 'react';
+import type { BaseFormComponentProps } from '../../types';
 import { Row } from '../Row';
 import { SelectInput } from '../SelectInput';
 import type { OptionType } from '../SelectInput/types';
@@ -6,8 +7,7 @@ type UnitInputValue = {
     inputValue: number;
     unit: string;
 };
-type UnitInputProps = {
-    className?: string;
+type UnitInputProps = BaseFormComponentProps<HTMLInputElement> & {
     max?: number;
     min?: number;
     value?: UnitInputValue['inputValue'];
@@ -17,20 +17,17 @@ type UnitInputProps = {
     options: OptionType[];
     selectInputWidth?: number | string;
     size?: 'small' | 'medium' | 'large';
-    'data-testid'?: string;
-    helper?: ReactNode;
     unitError?: string;
     width?: CSSProperties['width'];
     maxWidth?: CSSProperties['maxWidth'];
     placeholderUnit?: string;
     error?: boolean | string;
     success?: boolean | string;
-    label?: string;
     labelInformation?: ReactNode;
     step?: number | string;
     dropdownAlign?: ComponentProps<typeof SelectInput>['dropdownAlign'];
     templateColumns?: ComponentProps<typeof Row>['templateColumns'];
-} & Pick<InputHTMLAttributes<HTMLInputElement>, 'onFocus' | 'onBlur' | 'name' | 'id' | 'placeholder' | 'disabled' | 'readOnly' | 'required' | 'autoFocus' | 'onKeyDown' | 'style' | 'aria-describedby'>;
+} & Pick<InputHTMLAttributes<HTMLInputElement>, 'placeholder' | 'readOnly'>;
 export declare function UnitInput({ id, name, max, min, autoFocus, size, placeholder, placeholderUnit, onChange, onChangeUnitValue, value, unitValue, selectInputWidth, disabled, options, className, label, step, error, required, helper, unitError, success, 'data-testid': dataTestId, width, maxWidth, labelInformation, readOnly, onFocus, onBlur, onKeyDown, dropdownAlign, templateColumns, style, 'aria-describedby': ariaDescribedBy, }: UnitInputProps): import("react").JSX.Element;
 export declare namespace UnitInput {
     var displayName: string;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/UnitInput/index.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAI1F,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AAItD,KAAK,cAAc,GAAG;IAAE,UAAU,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAAA;AAE1D,KAAK,cAAc,GAAG;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,cAAc,CAAC,YAAY,CAAC,CAAA;IACpC,SAAS,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,CAAA;IAClC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,CAAC,YAAY,CAAC,KAAK,IAAI,CAAA;IACxD,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IAC5C,OAAO,EAAE,UAAU,EAAE,CAAA;IACrB,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAClC,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IACnC,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAA;IAC9B,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAA;IACpC,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IACxB,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,gBAAgB,CAAC,EAAE,SAAS,CAAA;IAC5B,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,aAAa,CAAC,EAAE,cAAc,CAAC,OAAO,WAAW,CAAC,CAAC,eAAe,CAAC,CAAA;IACnE,eAAe,CAAC,EAAE,cAAc,CAAC,OAAO,GAAG,CAAC,CAAC,iBAAiB,CAAC,CAAA;CAChE,GAAG,IAAI,CACN,mBAAmB,CAAC,gBAAgB,CAAC,EACnC,SAAS,GACT,QAAQ,GACR,MAAM,GACN,IAAI,GACJ,aAAa,GACb,UAAU,GACV,UAAU,GACV,UAAU,GACV,WAAW,GACX,WAAW,GACX,OAAO,GACP,kBAAkB,CACrB,CAAA;kCAEyB,EACxB,EAAE,EACF,IAAS,EACT,GAA6B,EAC7B,GAAO,EACP,SAAiB,EACjB,IAAc,EACd,WAAiB,EACjB,eAA+B,EAC/B,QAAQ,EACR,iBAAiB,EACjB,KAAK,EACL,SAAS,EACT,gBAA4B,EAC5B,QAAgB,EAChB,OAAO,EACP,SAAS,EACT,KAAK,EACL,IAAQ,EACR,KAAK,EACL,QAAQ,EACR,MAAM,EACN,SAAS,EACT,OAAO,EACP,aAAa,EAAE,UAAU,EACzB,KAAK,EACL,QAAQ,EACR,gBAAgB,EAChB,QAAQ,EACR,OAAO,EACP,MAAM,EACN,SAAS,EACT,aAAa,EACb,eAAe,EACf,KAAK,EACL,kBAAkB,EAAE,eAAe,GACpC,EAAE,cAAc"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/UnitInput/index.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAE1F,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAA;AAGzD,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AAItD,KAAK,cAAc,GAAG;IAAE,UAAU,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAAA;AAE1D,KAAK,cAAc,GAAG,sBAAsB,CAAC,gBAAgB,CAAC,GAAG;IAC/D,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,cAAc,CAAC,YAAY,CAAC,CAAA;IACpC,SAAS,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,CAAA;IAClC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,CAAC,YAAY,CAAC,KAAK,IAAI,CAAA;IACxD,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IAC5C,OAAO,EAAE,UAAU,EAAE,CAAA;IACrB,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAClC,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IACnC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAA;IAC9B,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAA;IACpC,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IACxB,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IAC1B,gBAAgB,CAAC,EAAE,SAAS,CAAA;IAC5B,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,aAAa,CAAC,EAAE,cAAc,CAAC,OAAO,WAAW,CAAC,CAAC,eAAe,CAAC,CAAA;IACnE,eAAe,CAAC,EAAE,cAAc,CAAC,OAAO,GAAG,CAAC,CAAC,iBAAiB,CAAC,CAAA;CAChE,GAAG,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,aAAa,GAAG,UAAU,CAAC,CAAA;kCAEjD,EACxB,EAAE,EACF,IAAS,EACT,GAA6B,EAC7B,GAAO,EACP,SAAiB,EACjB,IAAc,EACd,WAAiB,EACjB,eAA+B,EAC/B,QAAQ,EACR,iBAAiB,EACjB,KAAK,EACL,SAAS,EACT,gBAA4B,EAC5B,QAAgB,EAChB,OAAO,EACP,SAAS,EACT,KAAK,EACL,IAAQ,EACR,KAAK,EACL,QAAQ,EACR,MAAM,EACN,SAAS,EACT,OAAO,EACP,aAAa,EAAE,UAAU,EACzB,KAAK,EACL,QAAQ,EACR,gBAAgB,EAChB,QAAQ,EACR,OAAO,EACP,MAAM,EACN,SAAS,EACT,aAAa,EACb,eAAe,EACf,KAAK,EACL,kBAAkB,EAAE,eAAe,GACpC,EAAE,cAAc"}

package/dist/components/UnitInput/index.js

@@ -16,128 +16,130 @@ import { CheckCircleIcon } from "@ultraviolet/icons/CheckCircleIcon";
 
 //#region src/components/UnitInput/index.tsx
 var UnitInput;
-var init_UnitInput = __esmMin(() => {
-	init_hasHelperText();
-	init_Description();
-	init_Label();
-	init_Row();
-	init_SelectInput();
-	init_Stack();
-	init_styles_css();
-	UnitInput = ({ id, name = "", max = Number.MAX_SAFE_INTEGER, min = 0, autoFocus = false, size = "large", placeholder = "0", placeholderUnit = "Select item", onChange, onChangeUnitValue, value, unitValue, selectInputWidth = "12.6rem", disabled = false, options, className, label, step = 1, error, required, helper, unitError, success, "data-testid": dataTestId, width, maxWidth, labelInformation, readOnly, onFocus, onBlur, onKeyDown, dropdownAlign, templateColumns, style, "aria-describedby": ariaDescribedBy }) => {
-		const [val, setVal] = useState(value);
-		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";
-		}, [
-			disabled,
-			readOnly,
-			success,
-			error
-		]);
-		useEffect(() => {
-			if (value !== void 0) setVal(value);
-		}, [value]);
-		return /* @__PURE__ */ jsxs(Stack, {
-			gap: .5,
-			maxWidth,
-			onBlur,
-			onFocus,
-			onKeyDown,
-			width,
-			children: [
-				label || labelInformation ? /* @__PURE__ */ jsx(Label, {
-					htmlFor: localId,
-					labelDescription: labelInformation,
-					required,
-					size,
-					children: label
-				}) : null,
-				/* @__PURE__ */ jsxs(Row, {
-					className: cn(unitInputStyle.size[size], unitInputStyle.state[computedState]),
-					"data-disabled": !!disabled,
-					"data-testid": dataTestId,
-					templateColumns: templateColumns !== null && templateColumns !== void 0 ? templateColumns : "1fr auto",
-					children: [/* @__PURE__ */ jsxs("div", {
-						className: unitInputStyle.numberWrapper,
-						id: "input-field",
-						children: [
-							/* @__PURE__ */ jsx("input", {
-								"aria-describedby": ariaDescribedBy || (hasHelperText(helper, error, success) ? helperId : void 0),
-								"aria-invalid": !!error,
-								autoFocus,
-								className: cn(className, unitInputStyle.number[size]),
-								"data-testid": "unit-input",
-								disabled,
-								id: localId,
-								max,
-								min,
-								name: `${name}-value`,
-								onChange: (event) => {
-									const numericValue = Number.parseInt(event.target.value, 10);
-									if (numericValue > max) {
-										setVal(max);
-										onChange === null || onChange === void 0 || onChange(max);
-									} else if (numericValue < min) {
-										setVal(min);
-										onChange === null || onChange === void 0 || onChange(min);
-									} else {
-										setVal(numericValue);
-										onChange === null || onChange === void 0 || onChange(numericValue);
-									}
-								},
-								placeholder,
-								readOnly,
-								required,
-								step,
-								style,
-								type: "number",
-								value: val
-							}),
-							error ? /* @__PURE__ */ jsx(AlertCircleIcon, { sentiment: "danger" }) : null,
-							success && !error ? /* @__PURE__ */ jsx(CheckCircleIcon, { sentiment: "success" }) : null
-						]
-					}), /* @__PURE__ */ jsx(SelectInput, {
-						"aria-describedby": !ariaDescribedBy && hasHelperText(helper, error) ? helperId : ariaDescribedBy,
-						className: cn(unitInputStyle.unit, unitInputStyle.unitWidth),
-						clearable: false,
-						"data-disabled": disabled,
-						disabled,
-						dropdownAlign,
-						error: unitError,
-						id: "unit",
-						multiselect: false,
-						name: `${name}-unit`,
-						onChange: (newValue) => {
-							onChangeUnitValue === null || onChangeUnitValue === void 0 || onChangeUnitValue(newValue);
-						},
-						options,
-						placeholder: placeholderUnit,
-						readOnly,
-						searchable: false,
+function init_UnitInput() {
+	return (init_UnitInput = __esmMin(() => {
+		init_hasHelperText();
+		init_Description();
+		init_Label();
+		init_Row();
+		init_SelectInput();
+		init_Stack();
+		init_styles_css();
+		UnitInput = ({ id, name = "", max = Number.MAX_SAFE_INTEGER, min = 0, autoFocus = false, size = "large", placeholder = "0", placeholderUnit = "Select item", onChange, onChangeUnitValue, value, unitValue, selectInputWidth = "12.6rem", disabled = false, options, className, label, step = 1, error, required, helper, unitError, success, "data-testid": dataTestId, width, maxWidth, labelInformation, readOnly, onFocus, onBlur, onKeyDown, dropdownAlign, templateColumns, style, "aria-describedby": ariaDescribedBy }) => {
+			const [val, setVal] = useState(value);
+			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";
+			}, [
+				disabled,
+				readOnly,
+				success,
+				error
+			]);
+			useEffect(() => {
+				if (value !== void 0) setVal(value);
+			}, [value]);
+			return /* @__PURE__ */ jsxs(Stack, {
+				gap: .5,
+				maxWidth,
+				onBlur,
+				onFocus,
+				onKeyDown,
+				width,
+				children: [
+					label || labelInformation ? /* @__PURE__ */ jsx(Label, {
+						htmlFor: localId,
+						labelDescription: labelInformation,
+						required,
 						size,
-						style: assignInlineVars({ [widthSelectInput]: selectInputWidth.toString() }),
-						value: unitValue
-					})]
-				}),
-				/* @__PURE__ */ jsx(Description, {
-					helper,
-					error,
-					success,
-					disabled,
-					id: ariaDescribedBy !== null && ariaDescribedBy !== void 0 ? ariaDescribedBy : helperId
-				})
-			]
-		});
-	};
-	UnitInput.displayName = "UnitInput";
-});
+						children: label
+					}) : null,
+					/* @__PURE__ */ jsxs(Row, {
+						className: cn(unitInputStyle.size[size], unitInputStyle.state[computedState]),
+						"data-disabled": !!disabled,
+						"data-testid": dataTestId,
+						templateColumns: templateColumns !== null && templateColumns !== void 0 ? templateColumns : "1fr auto",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: unitInputStyle.numberWrapper,
+							id: "input-field",
+							children: [
+								/* @__PURE__ */ jsx("input", {
+									"aria-describedby": ariaDescribedBy || (hasHelperText(helper, error, success) ? helperId : void 0),
+									"aria-invalid": !!error,
+									autoFocus,
+									className: cn(className, unitInputStyle.number[size]),
+									"data-testid": "unit-input",
+									disabled,
+									id: localId,
+									max,
+									min,
+									name: `${name}-value`,
+									onChange: (event) => {
+										const numericValue = Number.parseInt(event.target.value, 10);
+										if (numericValue > max) {
+											setVal(max);
+											onChange === null || onChange === void 0 || onChange(max);
+										} else if (numericValue < min) {
+											setVal(min);
+											onChange === null || onChange === void 0 || onChange(min);
+										} else {
+											setVal(numericValue);
+											onChange === null || onChange === void 0 || onChange(numericValue);
+										}
+									},
+									placeholder,
+									readOnly,
+									required,
+									step,
+									style,
+									type: "number",
+									value: val
+								}),
+								error ? /* @__PURE__ */ jsx(AlertCircleIcon, { sentiment: "danger" }) : null,
+								success && !error ? /* @__PURE__ */ jsx(CheckCircleIcon, { sentiment: "success" }) : null
+							]
+						}), /* @__PURE__ */ jsx(SelectInput, {
+							"aria-describedby": !ariaDescribedBy && hasHelperText(helper, error) ? helperId : ariaDescribedBy,
+							className: cn(unitInputStyle.unit, unitInputStyle.unitWidth),
+							clearable: false,
+							"data-disabled": disabled,
+							disabled,
+							dropdownAlign,
+							error: unitError,
+							id: "unit",
+							multiselect: false,
+							name: `${name}-unit`,
+							onChange: (newValue) => {
+								onChangeUnitValue === null || onChangeUnitValue === void 0 || onChangeUnitValue(newValue);
+							},
+							options,
+							placeholder: placeholderUnit,
+							readOnly,
+							searchable: false,
+							size,
+							style: assignInlineVars({ [widthSelectInput]: selectInputWidth.toString() }),
+							value: unitValue
+						})]
+					}),
+					/* @__PURE__ */ jsx(Description, {
+						helper,
+						error,
+						success,
+						disabled,
+						id: ariaDescribedBy !== null && ariaDescribedBy !== void 0 ? ariaDescribedBy : helperId
+					})
+				]
+			});
+		};
+		UnitInput.displayName = "UnitInput";
+	}))();
+}
 
 //#endregion
 init_UnitInput();

package/dist/components/UnitInput/styles.css.js

@@ -3,32 +3,34 @@ import { init_styles_css_ts_vanilla } from "./styles.css.ts.vanilla.js";
 
 //#region src/components/UnitInput/styles.css.ts
 var widthSelectInput, unitInputStyle;
-var init_styles_css = __esmMin(() => {
-	init_styles_css_ts_vanilla();
-	widthSelectInput = "var(--uv_gwf0fl0)";
-	unitInputStyle = {
-		number: {
-			large: "uv_gwf0fl2 uv_gwf0fl1",
-			medium: "uv_gwf0fl3 uv_gwf0fl1",
-			small: "uv_gwf0fl4 uv_gwf0fl1"
-		},
-		state: {
-			"default": "uv_gwf0fl6 uv_gwf0fl5",
-			disabled: "uv_gwf0fl7 uv_gwf0fl5",
-			error: "uv_gwf0fl8 uv_gwf0fl5",
-			readOnly: "uv_gwf0fl9 uv_gwf0fl5",
-			success: "uv_gwf0fla uv_gwf0fl5"
-		},
-		numberWrapper: "uv_gwf0flb",
-		size: {
-			large: "uv_gwf0flc",
-			medium: "uv_gwf0fld",
-			small: "uv_gwf0fle"
-		},
-		unitWidth: "uv_gwf0flf",
-		unit: "uv_gwf0flg"
-	};
-});
+function init_styles_css() {
+	return (init_styles_css = __esmMin(() => {
+		/* @__PURE__ */ init_styles_css_ts_vanilla();
+		widthSelectInput = "var(--uv_gwf0fl0)";
+		unitInputStyle = {
+			number: {
+				large: "uv_gwf0fl2 uv_gwf0fl1",
+				medium: "uv_gwf0fl3 uv_gwf0fl1",
+				small: "uv_gwf0fl4 uv_gwf0fl1"
+			},
+			state: {
+				"default": "uv_gwf0fl6 uv_gwf0fl5",
+				disabled: "uv_gwf0fl7 uv_gwf0fl5",
+				error: "uv_gwf0fl8 uv_gwf0fl5",
+				readOnly: "uv_gwf0fl9 uv_gwf0fl5",
+				success: "uv_gwf0fla uv_gwf0fl5"
+			},
+			numberWrapper: "uv_gwf0flb",
+			size: {
+				large: "uv_gwf0flc",
+				medium: "uv_gwf0fld",
+				small: "uv_gwf0fle"
+			},
+			unitWidth: "uv_gwf0flf",
+			unit: "uv_gwf0flg"
+		};
+	}))();
+}
 
 //#endregion
 init_styles_css();

package/dist/components/UnitInput/styles.css.ts.vanilla.js

@@ -1,7 +1,9 @@
 import { __esmMin } from "../../_virtual/_rolldown/runtime.js";
 
 //#region src/components/UnitInput/styles.css.ts.vanilla.css
-var init_styles_css_ts_vanilla = __esmMin(() => {});
+function init_styles_css_ts_vanilla() {
+	return (init_styles_css_ts_vanilla = __esmMin(() => {}))();
+}
 
 //#endregion
 init_styles_css_ts_vanilla();