@ultraviolet/ui 3.8.2 → 3.10.0

package/dist/components/UnitInput/index.js

@@ -1,194 +1,135 @@
-"use client";
-import { jsxs, jsx } from "react/jsx-runtime";
-import { AlertCircleIcon } from "@ultraviolet/icons/AlertCircleIcon";
-import { CheckCircleIcon } from "@ultraviolet/icons/CheckCircleIcon";
-import { cn } from "@ultraviolet/utils";
-import { assignInlineVars } from "@vanilla-extract/dynamic";
-import { useState, useId, useMemo, useEffect } from "react";
-import { Label } from "../Label/index.js";
-import { Row } from "../Row/index.js";
-import { SelectInput } from "../SelectInput/index.js";
+'use client';
+import { __name } from "../../_virtual/_rolldown/runtime.js";
 import { Stack } from "../Stack/index.js";
 import { Text } from "../Text/index.js";
-import { unitInputNumberWrapper, unitInputNumber, widthSelectInput, unitInputUnit, unitInputUnitWidth, unitInputSize, unitInputState } from "./styles.css.js";
-const 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
-}) => {
-  const [val, setVal] = useState(value);
-  const localId = useId();
-  const sentiment = useMemo(() => {
-    if (error) {
-      return "danger";
-    }
-    if (success) {
-      return "success";
-    }
-    return "neutral";
-  }, [error, success]);
-  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: 0.5,
-      maxWidth,
-      onBlur,
-      onFocus,
-      onKeyDown,
-      width,
-      children: [
-        label || labelInformation ? /* @__PURE__ */ jsx(
-          Label,
-          {
-            htmlFor: id ?? localId,
-            labelDescription: labelInformation,
-            required,
-            size,
-            children: label
-          }
-        ) : null,
-        /* @__PURE__ */ jsxs(
-          Row,
-          {
-            className: cn(unitInputSize[size], unitInputState[computedState]),
-            "data-disabled": !!disabled,
-            "data-testid": dataTestId,
-            templateColumns: templateColumns ?? "1fr auto",
-            children: [
-              /* @__PURE__ */ jsxs("div", { className: unitInputNumberWrapper, id: "input-field", children: [
-                /* @__PURE__ */ jsx(
-                  "input",
-                  {
-                    "aria-invalid": !!error,
-                    autoFocus,
-                    className: cn(className, unitInputNumber[size]),
-                    "data-testid": "unit-input",
-                    disabled,
-                    id: id ?? localId,
-                    max,
-                    min,
-                    name: `${name}-value`,
-                    onChange: (event) => {
-                      const numericValue = Number.parseInt(event.target.value, 10);
-                      if (numericValue > max) {
-                        setVal(max);
-                        onChange?.(max);
-                      } else if (numericValue < min) {
-                        setVal(min);
-                        onChange?.(min);
-                      } else {
-                        setVal(numericValue);
-                        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,
-                {
-                  className: cn(unitInputUnit, unitInputUnitWidth),
-                  clearable: false,
-                  "data-disabled": disabled,
-                  disabled,
-                  dropdownAlign,
-                  error: unitError,
-                  id: "unit",
-                  multiselect: false,
-                  name: `${name}-unit`,
-                  onChange: (newValue) => {
-                    onChangeUnitValue?.(newValue);
-                  },
-                  options,
-                  placeholder: placeholderUnit,
-                  readOnly,
-                  searchable: false,
-                  size,
-                  style: assignInlineVars({
-                    [widthSelectInput]: selectInputWidth.toString()
-                  }),
-                  value: unitValue
-                }
-              )
-            ]
-          }
-        ),
-        error || typeof success === "string" || typeof helper === "string" ? /* @__PURE__ */ jsx(
-          Text,
-          {
-            as: "p",
-            disabled,
-            prominence: sentiment === "neutral" ? "weak" : "default",
-            sentiment,
-            variant: "caption",
-            children: error || success || helper
-          }
-        ) : null,
-        !(error || success) && typeof helper !== "string" && helper ? helper : null
-      ]
-    }
-  );
-};
-export {
-  UnitInput
+import { Label } from "../Label/index.js";
+import { SelectInput } from "../SelectInput/index.js";
+import { Row } from "../Row/index.js";
+import { unitInputNumber, unitInputNumberWrapper, unitInputSize, unitInputState, unitInputUnit, unitInputUnitWidth, widthSelectInput } from "./styles.css.js";
+import { cn } from "@ultraviolet/utils";
+import { useEffect, useId, useMemo, useState } from "react";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AlertCircleIcon } from "@ultraviolet/icons/AlertCircleIcon";
+import { CheckCircleIcon } from "@ultraviolet/icons/CheckCircleIcon";
+
+//#region src/components/UnitInput/index.tsx
+const 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 }) => {
+	const [val, setVal] = useState(value);
+	const uniqueId = useId();
+	const localId = id !== null && id !== void 0 ? id : uniqueId;
+	const sentiment = useMemo(() => {
+		if (error) return "danger";
+		if (success) return "success";
+		return "neutral";
+	}, [error, success]);
+	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(unitInputSize[size], unitInputState[computedState]),
+				"data-disabled": !!disabled,
+				"data-testid": dataTestId,
+				templateColumns: templateColumns !== null && templateColumns !== void 0 ? templateColumns : "1fr auto",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: unitInputNumberWrapper,
+					id: "input-field",
+					children: [
+						/* @__PURE__ */ jsx("input", {
+							"aria-invalid": !!error,
+							autoFocus,
+							className: cn(className, unitInputNumber[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, {
+					className: cn(unitInputUnit, unitInputUnitWidth),
+					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
+				})]
+			}),
+			error || typeof success === "string" || typeof helper === "string" ? /* @__PURE__ */ jsx(Text, {
+				as: "p",
+				disabled,
+				prominence: sentiment === "neutral" ? "weak" : "default",
+				sentiment,
+				variant: "caption",
+				children: error || success || helper
+			}) : null,
+			!(error || success) && typeof helper !== "string" && helper ? helper : null
+		]
+	});
 };
+
+//#endregion
+export { UnitInput };

package/dist/components/UnitInput/styles.css.d.ts

@@ -1,8 +1,8 @@
 export declare const widthSelectInput: `var(--${string})`;
-export declare const unitInputNumber: Record<"small" | "large" | "medium", string>;
-export declare const unitInputState: Record<"success" | "default" | "disabled" | "error" | "readOnly", string>;
+export declare const unitInputNumber: Record<"large" | "medium" | "small", string>;
+export declare const unitInputState: Record<"default" | "disabled" | "error" | "readOnly" | "success", string>;
 export declare const unitInputNumberWrapper: string;
-export declare const unitInputSize: Record<"small" | "large" | "medium", string>;
+export declare const unitInputSize: Record<"large" | "medium" | "small", string>;
 export declare const unitInputUnitWidth: string;
 export declare const unitInputUnit: string;
 //# sourceMappingURL=styles.css.d.ts.map

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

@@ -1,17 +1,27 @@
-/* empty css                          */
+/* empty css                      */
+
+//#region src/components/UnitInput/styles.css.ts
 var widthSelectInput = "var(--uv_gwf0fl0)";
-var unitInputNumber = { large: "uv_gwf0fl2 uv_gwf0fl1", medium: "uv_gwf0fl3 uv_gwf0fl1", small: "uv_gwf0fl4 uv_gwf0fl1" };
-var unitInputState = { "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" };
+var unitInputNumber = {
+	large: "uv_gwf0fl2 uv_gwf0fl1",
+	medium: "uv_gwf0fl3 uv_gwf0fl1",
+	small: "uv_gwf0fl4 uv_gwf0fl1"
+};
+var unitInputState = {
+	"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"
+};
 var unitInputNumberWrapper = "uv_gwf0flb";
-var unitInputSize = { large: "uv_gwf0flc", medium: "uv_gwf0fld", small: "uv_gwf0fle" };
+var unitInputSize = {
+	large: "uv_gwf0flc",
+	medium: "uv_gwf0fld",
+	small: "uv_gwf0fle"
+};
 var unitInputUnitWidth = "uv_gwf0flf";
 var unitInputUnit = "uv_gwf0flg";
-export {
-  unitInputNumber,
-  unitInputNumberWrapper,
-  unitInputSize,
-  unitInputState,
-  unitInputUnit,
-  unitInputUnitWidth,
-  widthSelectInput
-};
+
+//#endregion
+export { unitInputNumber, unitInputNumberWrapper, unitInputSize, unitInputState, unitInputUnit, unitInputUnitWidth, widthSelectInput };

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

@@ -36,6 +36,6 @@ type VerificationCodeProps = {
 /**
  * Verification code allows you to enter a code in multiple fields (4 by default).
  */
-export declare const VerificationCode: ({ disabled, className, error, fields, initialValue, inputId, size, onChange, onComplete, placeholder, required, type, "data-testid": dataTestId, "aria-label": ariaLabel, label, labelDescription, helper, success, style, }: VerificationCodeProps) => import("react/jsx-runtime").JSX.Element;
+export declare const VerificationCode: ({ disabled, className, error, fields, initialValue, inputId, size, onChange, onComplete, placeholder, required, type, 'data-testid': dataTestId, 'aria-label': ariaLabel, label, labelDescription, helper, success, style, }: VerificationCodeProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/VerificationCode/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAGV,aAAa,EAGb,SAAS,EACV,MAAM,OAAO,CAAA;AAWd,KAAK,qBAAqB,GAAG;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAA;IAC9C;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IAClC;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACpC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAA;IACxB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,gBAAgB,CAAC,EAAE,SAAS,CAAA;IAC5B,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IAC1B,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,GAAI,8NAoB9B,qBAAqB,4CAyNvB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/VerificationCode/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAGV,aAAa,EAGb,SAAS,EACV,MAAM,OAAO,CAAA;AAWd,KAAK,qBAAqB,GAAG;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAA;IAC9C;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IAClC;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACpC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAA;IACxB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,gBAAgB,CAAC,EAAE,SAAS,CAAA;IAC5B,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IAC1B,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,kSA6O5B,CAAA"}