@ultraviolet/ui 3.9.0 → 3.10.0

package/dist/components/TextInput/index.js

@@ -1,305 +1,218 @@
-"use client";
-import { jsxs, jsx } from "react/jsx-runtime";
+'use client';
+import { __name } from "../../_virtual/_rolldown/runtime.js";
+import { Stack } from "../Stack/index.js";
+import { Tooltip } from "../Tooltip/index.js";
+import { Text } from "../Text/index.js";
+import { Loader } from "../Loader/index.js";
+import { Button } from "../Button/index.js";
+import { Label } from "../Label/index.js";
+import { basicPrefix, basicSuffix, ctaSuffix, inputClass, inputWrapper, inputWrapperSizes, stateStack } from "./styles.css.js";
+import { cn } from "@ultraviolet/utils";
+import { forwardRef, useCallback, useId, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { AlertCircleIcon } from "@ultraviolet/icons/AlertCircleIcon";
 import { AutoFixIcon } from "@ultraviolet/icons/AutoFixIcon";
 import { CheckCircleIcon } from "@ultraviolet/icons/CheckCircleIcon";
 import { CloseIcon } from "@ultraviolet/icons/CloseIcon";
 import { EyeIcon } from "@ultraviolet/icons/EyeIcon";
 import { EyeOffIcon } from "@ultraviolet/icons/EyeOffIcon";
-import { cn } from "@ultraviolet/utils";
-import { forwardRef, useId, useState, useRef, useImperativeHandle, useMemo, useCallback } from "react";
-import { Button } from "../Button/index.js";
-import { Label } from "../Label/index.js";
-import { Loader } from "../Loader/index.js";
-import { Stack } from "../Stack/index.js";
-import { Text } from "../Text/index.js";
-import { Tooltip } from "../Tooltip/index.js";
-import { basicPrefix, inputClass, stateStack, basicSuffix, ctaSuffix, inputWrapper, inputWrapperSizes } from "./styles.css.js";
-const TextInput = forwardRef(
-  ({
-    id,
-    className,
-    tabIndex,
-    value,
-    onChange,
-    onChangeValue,
-    placeholder,
-    disabled = false,
-    readOnly = false,
-    success,
-    error,
-    helper,
-    tooltip,
-    label,
-    autoFocus,
-    required = false,
-    "data-testid": dataTestId,
-    name,
-    onFocus,
-    onBlur,
-    clearable = false,
-    labelDescription,
-    type = "text",
-    prefix,
-    suffix,
-    size = "large",
-    loading,
-    onRandomize,
-    minLength,
-    maxLength,
-    "aria-labelledby": ariaLabelledBy,
-    "aria-label": ariaLabel,
-    autoComplete,
-    onKeyDown,
-    onKeyUp,
-    role,
-    "aria-live": ariaLive,
-    "aria-atomic": ariaAtomic,
-    defaultValue,
-    style
-  }, ref) => {
-    const localId = useId();
-    const [hasFocus, setHasFocus] = useState(false);
-    const [localValue, setLocalValue] = useState(defaultValue);
-    const inputRef = useRef(null);
-    useImperativeHandle(ref, () => inputRef.current);
-    const [isPasswordVisible, setIsPasswordVisible] = useState(false);
-    const computedType = type === "password" && isPasswordVisible ? "text" : type;
-    const sentiment = useMemo(() => {
-      if (error) {
-        return "danger";
-      }
-      if (success) {
-        return "success";
-      }
-      return "neutral";
-    }, [error, success]);
-    const onChangeCallback = useCallback(
-      (event) => {
-        onChange?.(event);
-        onChangeValue?.(event.target.value);
-        setLocalValue(event.target.value);
-      },
-      [onChange, onChangeValue]
-    );
-    const computedValue = value ?? localValue;
-    const computedClearable = clearable && !!computedValue;
-    return /* @__PURE__ */ jsxs(
-      Stack,
-      {
-        "aria-atomic": ariaAtomic,
-        "aria-live": ariaLive,
-        className,
-        gap: 0.5,
-        role,
-        children: [
-          label || labelDescription ? /* @__PURE__ */ jsx(
-            Label,
-            {
-              htmlFor: id ?? localId,
-              id: ariaLabelledBy,
-              labelDescription,
-              required,
-              size,
-              children: label
-            }
-          ) : null,
-          /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Tooltip, { text: tooltip, children: /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: cn(inputWrapper, inputWrapperSizes[size]),
-              "data-disabled": disabled,
-              "data-error": !!error,
-              "data-has-focus": hasFocus,
-              "data-readonly": readOnly,
-              "data-success": !!success,
-              children: [
-                prefix ? /* @__PURE__ */ jsx(
-                  Stack,
-                  {
-                    alignItems: "center",
-                    className: basicPrefix,
-                    "data-size": size,
-                    direction: "row",
-                    children: typeof prefix === "string" ? /* @__PURE__ */ jsx(
-                      Text,
-                      {
-                        as: "span",
-                        disabled,
-                        sentiment: "neutral",
-                        variant: "bodySmall",
-                        children: prefix
-                      }
-                    ) : prefix
-                  }
-                ) : null,
-                /* @__PURE__ */ jsx(
-                  "input",
-                  {
-                    "aria-invalid": !!error,
-                    "aria-label": ariaLabel,
-                    "aria-labelledby": ariaLabelledBy,
-                    autoComplete,
-                    autoFocus,
-                    className: inputClass,
-                    "data-size": size,
-                    "data-testid": dataTestId,
-                    defaultValue,
-                    disabled,
-                    id: id ?? localId,
-                    maxLength,
-                    minLength,
-                    name,
-                    onBlur: (event) => {
-                      setHasFocus(false);
-                      onBlur?.(event);
-                    },
-                    onChange: onChangeCallback,
-                    onFocus: (event) => {
-                      setHasFocus(true);
-                      onFocus?.(event);
-                    },
-                    onKeyDown,
-                    onKeyUp,
-                    placeholder,
-                    readOnly,
-                    ref: inputRef,
-                    required,
-                    style,
-                    tabIndex,
-                    type: computedType,
-                    value
-                  }
-                ),
-                success || error || loading || computedClearable ? /* @__PURE__ */ jsxs(
-                  Stack,
-                  {
-                    alignItems: "center",
-                    className: stateStack,
-                    direction: "row",
-                    gap: 1,
-                    children: [
-                      computedClearable ? /* @__PURE__ */ jsx(
-                        Button,
-                        {
-                          "aria-label": "clear value",
-                          disabled: disabled || !computedValue,
-                          onClick: () => {
-                            if (inputRef?.current) {
-                              inputRef.current.value = "";
-                              setLocalValue("");
-                              onChangeCallback({
-                                currentTarget: { value: "" },
-                                target: { value: "" }
-                              });
-                            }
-                          },
-                          sentiment: "neutral",
-                          size: size === "small" ? "xsmall" : "small",
-                          variant: "ghost",
-                          children: /* @__PURE__ */ jsx(CloseIcon, { size: "small" })
-                        }
-                      ) : null,
-                      success ? /* @__PURE__ */ jsx(
-                        CheckCircleIcon,
-                        {
-                          disabled,
-                          sentiment: "success",
-                          size: "small"
-                        }
-                      ) : null,
-                      error ? /* @__PURE__ */ jsx(
-                        AlertCircleIcon,
-                        {
-                          disabled,
-                          sentiment: "danger",
-                          size: "small"
-                        }
-                      ) : null,
-                      loading && !disabled ? /* @__PURE__ */ jsx(Loader, { active: true, size: "small" }) : null
-                    ]
-                  }
-                ) : null,
-                suffix ? /* @__PURE__ */ jsx(
-                  Stack,
-                  {
-                    alignItems: "center",
-                    className: basicSuffix,
-                    direction: "row",
-                    children: typeof suffix === "string" ? /* @__PURE__ */ jsx(
-                      Text,
-                      {
-                        as: "span",
-                        disabled,
-                        sentiment: "neutral",
-                        variant: "bodySmall",
-                        children: suffix
-                      }
-                    ) : suffix
-                  }
-                ) : null,
-                type === "password" ? /* @__PURE__ */ jsx(
-                  Stack,
-                  {
-                    alignItems: "center",
-                    className: ctaSuffix,
-                    direction: "row",
-                    children: /* @__PURE__ */ jsx(
-                      Button,
-                      {
-                        "aria-label": isPasswordVisible ? "hide" : "show",
-                        "data-testid": dataTestId ? `${dataTestId}-visibility-button` : void 0,
-                        disabled,
-                        onClick: () => {
-                          setIsPasswordVisible(!isPasswordVisible);
-                        },
-                        sentiment: "neutral",
-                        size: size === "small" ? "xsmall" : "small",
-                        variant: "ghost",
-                        children: isPasswordVisible ? /* @__PURE__ */ jsx(EyeOffIcon, {}) : /* @__PURE__ */ jsx(EyeIcon, {})
-                      }
-                    )
-                  }
-                ) : null,
-                onRandomize ? /* @__PURE__ */ jsx(
-                  Stack,
-                  {
-                    alignItems: "center",
-                    className: ctaSuffix,
-                    direction: "row",
-                    children: /* @__PURE__ */ jsx(
-                      Button,
-                      {
-                        disabled,
-                        onClick: onRandomize,
-                        sentiment: "neutral",
-                        size: size === "small" ? "xsmall" : "small",
-                        variant: "ghost",
-                        children: /* @__PURE__ */ jsx(AutoFixIcon, {})
-                      }
-                    )
-                  }
-                ) : null
-              ]
-            }
-          ) }) }),
-          error || typeof success === "string" || typeof helper === "string" ? /* @__PURE__ */ jsx(
-            Text,
-            {
-              as: "p",
-              disabled,
-              prominence: error || success ? "default" : "weak",
-              sentiment,
-              variant: "caption",
-              children: error || success || helper
-            }
-          ) : null,
-          !(error || success) && typeof helper !== "string" && helper ? helper : null
-        ]
-      }
-    );
-  }
-);
-export {
-  TextInput
-};
+
+//#region src/components/TextInput/index.tsx
+/**
+* This component offers an extended input HTML. The component can be controlled or uncontrolled.
+* To control the component, you need to pass the value and the `onChange` function.
+* If you don't pass the `onChange` function, the component will be uncontrolled and you can set the default value using `defaultValue`
+*/
+const TextInput = forwardRef(({ id, className, tabIndex, value, onChange, onChangeValue, placeholder, disabled = false, readOnly = false, success, error, helper, tooltip, label, autoFocus, required = false, "data-testid": dataTestId, name, onFocus, onBlur, clearable = false, labelDescription, type = "text", prefix, suffix, size = "large", loading, onRandomize, minLength, maxLength, "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel, autoComplete, onKeyDown, onKeyUp, role, "aria-live": ariaLive, "aria-atomic": ariaAtomic, defaultValue, style }, ref) => {
+	const localId = useId();
+	const [hasFocus, setHasFocus] = useState(false);
+	const [localValue, setLocalValue] = useState(defaultValue);
+	const inputRef = useRef(null);
+	useImperativeHandle(ref, () => inputRef.current);
+	const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+	const computedType = type === "password" && isPasswordVisible ? "text" : type;
+	const sentiment = useMemo(() => {
+		if (error) return "danger";
+		if (success) return "success";
+		return "neutral";
+	}, [error, success]);
+	const onChangeCallback = useCallback((event) => {
+		onChange === null || onChange === void 0 || onChange(event);
+		onChangeValue === null || onChangeValue === void 0 || onChangeValue(event.target.value);
+		setLocalValue(event.target.value);
+	}, [onChange, onChangeValue]);
+	const computedValue = value !== null && value !== void 0 ? value : localValue;
+	const computedClearable = clearable && !!computedValue;
+	return /* @__PURE__ */ jsxs(Stack, {
+		"aria-atomic": ariaAtomic,
+		"aria-live": ariaLive,
+		className,
+		gap: .5,
+		role,
+		children: [
+			label || labelDescription ? /* @__PURE__ */ jsx(Label, {
+				htmlFor: id !== null && id !== void 0 ? id : localId,
+				id: ariaLabelledBy,
+				labelDescription,
+				required,
+				size,
+				children: label
+			}) : null,
+			/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Tooltip, {
+				text: tooltip,
+				children: /* @__PURE__ */ jsxs("div", {
+					className: cn(inputWrapper, inputWrapperSizes[size]),
+					"data-disabled": disabled,
+					"data-error": !!error,
+					"data-has-focus": hasFocus,
+					"data-readonly": readOnly,
+					"data-success": !!success,
+					children: [
+						prefix ? /* @__PURE__ */ jsx(Stack, {
+							alignItems: "center",
+							className: basicPrefix,
+							"data-size": size,
+							direction: "row",
+							children: typeof prefix === "string" ? /* @__PURE__ */ jsx(Text, {
+								as: "span",
+								disabled,
+								sentiment: "neutral",
+								variant: "bodySmall",
+								children: prefix
+							}) : prefix
+						}) : null,
+						/* @__PURE__ */ jsx("input", {
+							"aria-invalid": !!error,
+							"aria-label": ariaLabel,
+							"aria-labelledby": ariaLabelledBy,
+							autoComplete,
+							autoFocus,
+							className: inputClass,
+							"data-size": size,
+							"data-testid": dataTestId,
+							defaultValue,
+							disabled,
+							id: id !== null && id !== void 0 ? id : localId,
+							maxLength,
+							minLength,
+							name,
+							onBlur: (event) => {
+								setHasFocus(false);
+								onBlur === null || onBlur === void 0 || onBlur(event);
+							},
+							onChange: onChangeCallback,
+							onFocus: (event) => {
+								setHasFocus(true);
+								onFocus === null || onFocus === void 0 || onFocus(event);
+							},
+							onKeyDown,
+							onKeyUp,
+							placeholder,
+							readOnly,
+							ref: inputRef,
+							required,
+							style,
+							tabIndex,
+							type: computedType,
+							value
+						}),
+						success || error || loading || computedClearable ? /* @__PURE__ */ jsxs(Stack, {
+							alignItems: "center",
+							className: stateStack,
+							direction: "row",
+							gap: 1,
+							children: [
+								computedClearable ? /* @__PURE__ */ jsx(Button, {
+									"aria-label": "clear value",
+									disabled: disabled || !computedValue,
+									onClick: () => {
+										if (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) {
+											inputRef.current.value = "";
+											setLocalValue("");
+											onChangeCallback({
+												currentTarget: { value: "" },
+												target: { value: "" }
+											});
+										}
+									},
+									sentiment: "neutral",
+									size: size === "small" ? "xsmall" : "small",
+									variant: "ghost",
+									children: /* @__PURE__ */ jsx(CloseIcon, { size: "small" })
+								}) : null,
+								success ? /* @__PURE__ */ jsx(CheckCircleIcon, {
+									disabled,
+									sentiment: "success",
+									size: "small"
+								}) : null,
+								error ? /* @__PURE__ */ jsx(AlertCircleIcon, {
+									disabled,
+									sentiment: "danger",
+									size: "small"
+								}) : null,
+								loading && !disabled ? /* @__PURE__ */ jsx(Loader, {
+									active: true,
+									size: "small"
+								}) : null
+							]
+						}) : null,
+						suffix ? /* @__PURE__ */ jsx(Stack, {
+							alignItems: "center",
+							className: basicSuffix,
+							direction: "row",
+							children: typeof suffix === "string" ? /* @__PURE__ */ jsx(Text, {
+								as: "span",
+								disabled,
+								sentiment: "neutral",
+								variant: "bodySmall",
+								children: suffix
+							}) : suffix
+						}) : null,
+						type === "password" ? /* @__PURE__ */ jsx(Stack, {
+							alignItems: "center",
+							className: ctaSuffix,
+							direction: "row",
+							children: /* @__PURE__ */ jsx(Button, {
+								"aria-label": isPasswordVisible ? "hide" : "show",
+								"data-testid": dataTestId ? `${dataTestId}-visibility-button` : void 0,
+								disabled,
+								onClick: () => {
+									setIsPasswordVisible(!isPasswordVisible);
+								},
+								sentiment: "neutral",
+								size: size === "small" ? "xsmall" : "small",
+								variant: "ghost",
+								children: isPasswordVisible ? /* @__PURE__ */ jsx(EyeOffIcon, {}) : /* @__PURE__ */ jsx(EyeIcon, {})
+							})
+						}) : null,
+						onRandomize ? /* @__PURE__ */ jsx(Stack, {
+							alignItems: "center",
+							className: ctaSuffix,
+							direction: "row",
+							children: /* @__PURE__ */ jsx(Button, {
+								disabled,
+								onClick: onRandomize,
+								sentiment: "neutral",
+								size: size === "small" ? "xsmall" : "small",
+								variant: "ghost",
+								children: /* @__PURE__ */ jsx(AutoFixIcon, {})
+							})
+						}) : null
+					]
+				})
+			}) }),
+			error || typeof success === "string" || typeof helper === "string" ? /* @__PURE__ */ jsx(Text, {
+				as: "p",
+				disabled,
+				prominence: error || success ? "default" : "weak",
+				sentiment,
+				variant: "caption",
+				children: error || success || helper
+			}) : null,
+			!(error || success) && typeof helper !== "string" && helper ? helper : null
+		]
+	});
+});
+
+//#endregion
+export { TextInput };

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

@@ -3,7 +3,7 @@ export declare const basicPrefix: string;
 export declare const stateStack: string;
 export declare const basicSuffix: string;
 export declare const ctaSuffix: string;
-export declare const inputWrapperSizes: Record<"small" | "large" | "medium", string>;
+export declare const inputWrapperSizes: Record<"large" | "medium" | "small", string>;
 export declare const inputWrapper: string;
 export declare const inputClass: string;
 //# sourceMappingURL=styles.css.d.ts.map

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

@@ -1,18 +1,18 @@
-/* empty css                                       */
-/* empty css                          */
+/* empty css                                   */
+/* empty css                      */
+
+//#region src/components/TextInput/styles.css.ts
 var basicPrefix = "uv_q3q8041";
 var stateStack = "uv_q3q8042";
 var basicSuffix = "uv_q3q8043";
 var ctaSuffix = "uv_q3q8044";
-var inputWrapperSizes = { large: "uv_q3q8045", medium: "uv_q3q8046", small: "uv_q3q8047" };
+var inputWrapperSizes = {
+	large: "uv_q3q8045",
+	medium: "uv_q3q8046",
+	small: "uv_q3q8047"
+};
 var inputWrapper = "uv_q3q8048";
 var inputClass = "uv_q3q8049";
-export {
-  basicPrefix,
-  basicSuffix,
-  ctaSuffix,
-  inputClass,
-  inputWrapper,
-  inputWrapperSizes,
-  stateStack
-};
+
+//#endregion
+export { basicPrefix, basicSuffix, ctaSuffix, inputClass, inputWrapper, inputWrapperSizes, stateStack };

package/dist/components/TimeInput/constants.js

@@ -1,9 +1,16 @@
-const DEFAULT_PLACEHOLDER = { h: "00", m: "00", s: "00" };
-const TIME_KEYS = ["h", "m", "s"];
+//#region src/components/TimeInput/constants.ts
+const DEFAULT_PLACEHOLDER = {
+	h: "00",
+	m: "00",
+	s: "00"
+};
+const TIME_KEYS = [
+	"h",
+	"m",
+	"s"
+];
 const DEFAULT_DATE = /* @__PURE__ */ new Date();
 DEFAULT_DATE.setHours(0, 0, 0);
-export {
-  DEFAULT_DATE,
-  DEFAULT_PLACEHOLDER,
-  TIME_KEYS
-};
+
+//#endregion
+export { DEFAULT_DATE, DEFAULT_PLACEHOLDER, TIME_KEYS };

package/dist/components/TimeInput/helpers.d.ts

@@ -1,10 +1,9 @@
-import type { TIME_KEYS } from './constants';
 export declare const isNumber: (key: string) => boolean;
 export declare const isAOrP: (key: string) => boolean;
 export declare const isCompleteHour: (timeFormat: number, value: number) => boolean;
-export declare const canConcat: (oldValue: number, type: (typeof TIME_KEYS)[number], key: number, timeFormat: 24 | 12) => boolean;
-export declare const getLastTypedChar: (value: string, oldValue?: number) => string;
-export declare const getValueByType: (type: (typeof TIME_KEYS)[number], value?: Date | null) => number;
-export declare const setValueByType: (type: (typeof TIME_KEYS)[number], date: Date | undefined, value: number) => number | undefined;
-export declare const format: (value: number, type: (typeof TIME_KEYS)[number], timeFormat: 24 | 12) => string;
+export declare const canConcat: (oldValue: number, type: "h" | "m" | "s", key: number, timeFormat: 12 | 24) => boolean;
+export declare const getLastTypedChar: (value: string, oldValue?: number | undefined) => string;
+export declare const getValueByType: (type: "h" | "m" | "s", value?: Date | null | undefined) => number;
+export declare const setValueByType: (type: "h" | "m" | "s", date: Date | undefined, value: number) => number | undefined;
+export declare const format: (value: number, type: "h" | "m" | "s", timeFormat: 12 | 24) => string;
 //# sourceMappingURL=helpers.d.ts.map

package/dist/components/TimeInput/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/components/TimeInput/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAI5C,eAAO,MAAM,QAAQ,GAAI,KAAK,MAAM,YAA0B,CAAA;AAC9D,eAAO,MAAM,MAAM,GAAI,KAAK,MAAM,YAAuC,CAAA;AAUzE,eAAO,MAAM,cAAc,GAAI,YAAY,MAAM,EAAE,OAAO,MAAM,YAS/D,CAAA;AAED,eAAO,MAAM,SAAS,GACpB,UAAU,MAAM,EAChB,MAAM,CAAC,OAAO,SAAS,EAAE,MAAM,CAAC,EAChC,KAAK,MAAM,EACX,YAAY,EAAE,GAAG,EAAE,YAIW,CAAA;AAEhC,eAAO,MAAM,gBAAgB,GAAI,OAAO,MAAM,EAAE,WAAW,MAAM,WAgBhE,CAAA;AAED,eAAO,MAAM,cAAc,GACzB,MAAM,CAAC,OAAO,SAAS,EAAE,MAAM,CAAC,EAChC,QAAQ,IAAI,GAAG,IAAI,WAapB,CAAA;AAED,eAAO,MAAM,cAAc,GACzB,MAAM,CAAC,OAAO,SAAS,EAAE,MAAM,CAAC,EAChC,MAAM,IAAI,GAAG,SAAS,EACtB,OAAO,MAAM,uBAUd,CAAA;AAED,eAAO,MAAM,MAAM,GACjB,OAAO,MAAM,EACb,MAAM,CAAC,OAAO,SAAS,EAAE,MAAM,CAAC,EAChC,YAAY,EAAE,GAAG,EAAE,WAQpB,CAAA"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/components/TimeInput/helpers.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,QAAQ,0BAAyC,CAAA;AAC9D,eAAO,MAAM,MAAM,0BAAsD,CAAA;AAUzE,eAAO,MAAM,cAAc,gDAS1B,CAAA;AAED,eAAO,MAAM,SAAS,wFAQU,CAAA;AAEhC,eAAO,MAAM,gBAAgB,0DAgB5B,CAAA;AAED,eAAO,MAAM,cAAc,oEAe1B,CAAA;AAED,eAAO,MAAM,cAAc,sFAa1B,CAAA;AAED,eAAO,MAAM,MAAM,uEAWlB,CAAA"}