@ultraviolet/ui 3.8.2 → 3.10.0

package/dist/components/TextArea/index.js

@@ -1,207 +1,164 @@
-"use client";
-import { jsxs, jsx } from "react/jsx-runtime";
-import { AlertCircleIcon } from "@ultraviolet/icons/AlertCircleIcon";
-import { CheckCircleIcon } from "@ultraviolet/icons/CheckCircleIcon";
-import { CloseIcon } from "@ultraviolet/icons/CloseIcon";
-import { useTheme } from "@ultraviolet/themes";
-import { assignInlineVars } from "@vanilla-extract/dynamic";
-import { forwardRef, useId, useRef, useImperativeHandle, useEffect, useMemo } from "react";
+'use client';
+import { __name } from "../../_virtual/_rolldown/runtime.js";
+import { _objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.113.0/helpers/objectSpread2.js";
+import { Stack } from "../Stack/index.js";
+import { Tooltip } from "../Tooltip/index.js";
+import { Text } from "../Text/index.js";
 import { Button } from "../Button/index.js";
-import { SIZE_HEIGHT } from "../Button/constants.js";
 import { Label } from "../Label/index.js";
 import { Row } from "../Row/index.js";
-import { Stack } from "../Stack/index.js";
-import { Text } from "../Text/index.js";
-import { Tooltip } from "../Tooltip/index.js";
-import { textareaWrapper, textArea, paddingRightVar, textAreaClearableContainer } from "./styles.css.js";
+import { SIZE_HEIGHT } from "../Button/constants.js";
+import { paddingRightVar, textArea, textAreaClearableContainer, textareaWrapper } from "./styles.css.js";
+import { forwardRef, useEffect, useId, useImperativeHandle, useMemo, useRef } from "react";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTheme } from "@ultraviolet/themes";
+import { AlertCircleIcon } from "@ultraviolet/icons/AlertCircleIcon";
+import { CheckCircleIcon } from "@ultraviolet/icons/CheckCircleIcon";
+import { CloseIcon } from "@ultraviolet/icons/CloseIcon";
+
+//#region src/components/TextArea/index.tsx
 const STATE_ICON_SIZE = "small";
-const TextArea = forwardRef(
-  ({
-    id,
-    className,
-    tabIndex,
-    value,
-    onChange,
-    placeholder,
-    rows = 3,
-    maxRows,
-    disabled = false,
-    readOnly = false,
-    success,
-    error,
-    helper,
-    minLength,
-    maxLength,
-    tooltip,
-    label,
-    autoFocus,
-    required = false,
-    "data-testid": dataTestId,
-    name,
-    onFocus,
-    onBlur,
-    onKeyDown,
-    clearable = false,
-    labelDescription,
-    "aria-label": ariaLabel,
-    style
-  }, ref) => {
-    const localId = useId();
-    const theme = useTheme();
-    const textAreaRef = useRef(null);
-    useImperativeHandle(ref, () => textAreaRef.current);
-    useEffect(() => {
-      const textArea2 = textAreaRef.current;
-      const padding = theme.space["1.5"];
-      if (!textArea2) {
-        return;
-      }
-      const updateHeight = () => {
-        if (textArea2 && rows === "auto" && !maxRows) {
-          textArea2.style.height = "auto";
-          textArea2.style.resize = "none";
-          textArea2.style.height = `${textArea2.scrollHeight + 2}px`;
-        } else {
-          textArea2.style.resize = "vertical";
-        }
-        if (textArea2 && (maxRows || typeof rows === "number")) {
-          const lineHeight = Number.parseFloat(
-            getComputedStyle(textArea2).lineHeight
-          );
-          if (maxRows) {
-            textArea2.style.height = "auto";
-            const maxHeight = maxRows * lineHeight;
-            textArea2.style.height = `${textArea2.scrollHeight + 2}px`;
-            textArea2.style.maxHeight = `calc(${maxHeight}px + 2*${padding})`;
-          } else if (typeof rows === "number") {
-            textArea2.style.height = "auto";
-          }
-          if (typeof rows === "number") {
-            const minHeight = rows * lineHeight;
-            textArea2.style.minHeight = `calc(${minHeight}px + 2*${padding})`;
-          }
-        }
-      };
-      requestAnimationFrame(updateHeight);
-    }, [value, rows, theme, maxRows, textAreaRef.current?.value]);
-    const sentiment = useMemo(() => {
-      if (error) {
-        return "danger";
-      }
-      if (success) {
-        return "success";
-      }
-      return "neutral";
-    }, [error, success]);
-    const notice = success || error || helper;
-    const computedClearable = clearable && !!value;
-    return /* @__PURE__ */ jsxs(Stack, { className, gap: "0.5", children: [
-      label || labelDescription ? /* @__PURE__ */ jsx(
-        Label,
-        {
-          htmlFor: id ?? localId,
-          labelDescription,
-          required,
-          children: label
-        }
-      ) : null,
-      /* @__PURE__ */ jsx(Tooltip, { text: tooltip, children: /* @__PURE__ */ jsxs("div", { className: textareaWrapper, children: [
-        /* @__PURE__ */ jsx(
-          "textarea",
-          {
-            "aria-invalid": !!error,
-            "aria-label": ariaLabel,
-            autoFocus,
-            className: textArea({
-              error: !!error,
-              success: !!success
-            }),
-            "data-testid": dataTestId,
-            disabled,
-            id: id ?? localId,
-            maxLength,
-            minLength,
-            name,
-            onBlur,
-            onChange: (event) => {
-              onChange(event.currentTarget.value);
-            },
-            onFocus,
-            onKeyDown,
-            placeholder,
-            readOnly: !!readOnly,
-            ref: textAreaRef,
-            rows: rows !== "auto" ? rows : 1,
-            style: {
-              ...assignInlineVars({
-                [paddingRightVar]: `calc(${theme.space[computedClearable && (!!success || !!error) ? "4" : "3"]} + ${computedClearable ? `${SIZE_HEIGHT.xsmall}px` : "0px"} + ${!!success || !!error ? `${STATE_ICON_SIZE}px` : "0px"})`
-              }),
-              ...style
-            },
-            tabIndex,
-            value
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          Stack,
-          {
-            alignItems: "center",
-            className: textAreaClearableContainer,
-            direction: "row",
-            gap: "1",
-            children: [
-              computedClearable ? /* @__PURE__ */ jsx(
-                Button,
-                {
-                  "aria-label": "clear value",
-                  onClick: () => {
-                    onChange("");
-                  },
-                  sentiment: "neutral",
-                  size: "xsmall",
-                  variant: "ghost",
-                  children: /* @__PURE__ */ jsx(CloseIcon, {})
-                }
-              ) : null,
-              success && !error ? /* @__PURE__ */ jsx(CheckCircleIcon, { sentiment: "success", size: STATE_ICON_SIZE }) : null,
-              error ? /* @__PURE__ */ jsx(AlertCircleIcon, { sentiment: "danger" }) : null
-            ]
-          }
-        )
-      ] }) }),
-      notice || maxLength ? /* @__PURE__ */ jsxs(Row, { gap: "1", templateColumns: "minmax(0, 1fr) min-content", children: [
-        /* @__PURE__ */ jsxs("div", { children: [
-          error || success || 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
-        ] }),
-        maxLength ? /* @__PURE__ */ jsxs(
-          Text,
-          {
-            as: "div",
-            prominence: "weak",
-            sentiment: "neutral",
-            variant: "caption",
-            children: [
-              value?.length ?? 0,
-              "/",
-              maxLength
-            ]
-          }
-        ) : null
-      ] }) : null
-    ] });
-  }
-);
-export {
-  TextArea
-};
+/**
+* This component offers an extended textarea HTML
+*/
+const TextArea = forwardRef(({ id, className, tabIndex, value, onChange, placeholder, rows = 3, maxRows, disabled = false, readOnly = false, success, error, helper, minLength, maxLength, tooltip, label, autoFocus, required = false, "data-testid": dataTestId, name, onFocus, onBlur, onKeyDown, clearable = false, labelDescription, "aria-label": ariaLabel, style }, ref) => {
+	var _textAreaRef$current;
+	var _value$length;
+	const localId = useId();
+	const theme = useTheme();
+	const textAreaRef = useRef(null);
+	useImperativeHandle(ref, () => textAreaRef.current);
+	useEffect(() => {
+		const textArea = textAreaRef.current;
+		const padding = theme.space["1.5"];
+		if (!textArea) return;
+		const updateHeight = () => {
+			if (textArea && rows === "auto" && !maxRows) {
+				textArea.style.height = "auto";
+				textArea.style.resize = "none";
+				textArea.style.height = `${textArea.scrollHeight + 2}px`;
+			} else textArea.style.resize = "vertical";
+			if (textArea && (maxRows || typeof rows === "number")) {
+				const lineHeight = Number.parseFloat(getComputedStyle(textArea).lineHeight);
+				if (maxRows) {
+					textArea.style.height = "auto";
+					const maxHeight = maxRows * lineHeight;
+					textArea.style.height = `${textArea.scrollHeight + 2}px`;
+					textArea.style.maxHeight = `calc(${maxHeight}px + 2*${padding})`;
+				} else if (typeof rows === "number") textArea.style.height = "auto";
+				if (typeof rows === "number") {
+					const minHeight = rows * lineHeight;
+					textArea.style.minHeight = `calc(${minHeight}px + 2*${padding})`;
+				}
+			}
+		};
+		requestAnimationFrame(updateHeight);
+	}, [
+		value,
+		rows,
+		theme,
+		maxRows,
+		(_textAreaRef$current = textAreaRef.current) === null || _textAreaRef$current === void 0 ? void 0 : _textAreaRef$current.value
+	]);
+	const sentiment = useMemo(() => {
+		if (error) return "danger";
+		if (success) return "success";
+		return "neutral";
+	}, [error, success]);
+	const notice = success || error || helper;
+	const computedClearable = clearable && !!value;
+	return /* @__PURE__ */ jsxs(Stack, {
+		className,
+		gap: "0.5",
+		children: [
+			label || labelDescription ? /* @__PURE__ */ jsx(Label, {
+				htmlFor: id !== null && id !== void 0 ? id : localId,
+				labelDescription,
+				required,
+				children: label
+			}) : null,
+			/* @__PURE__ */ jsx(Tooltip, {
+				text: tooltip,
+				children: /* @__PURE__ */ jsxs("div", {
+					className: textareaWrapper,
+					children: [/* @__PURE__ */ jsx("textarea", {
+						"aria-invalid": !!error,
+						"aria-label": ariaLabel,
+						autoFocus,
+						className: textArea({
+							error: !!error,
+							success: !!success
+						}),
+						"data-testid": dataTestId,
+						disabled,
+						id: id !== null && id !== void 0 ? id : localId,
+						maxLength,
+						minLength,
+						name,
+						onBlur,
+						onChange: (event) => {
+							onChange(event.currentTarget.value);
+						},
+						onFocus,
+						onKeyDown,
+						placeholder,
+						readOnly: !!readOnly,
+						ref: textAreaRef,
+						rows: rows !== "auto" ? rows : 1,
+						style: _objectSpread2(_objectSpread2({}, assignInlineVars({ [paddingRightVar]: `calc(${theme.space[computedClearable && (!!success || !!error) ? "4" : "3"]} + ${computedClearable ? `${SIZE_HEIGHT.xsmall}px` : "0px"} + ${!!success || !!error ? `${STATE_ICON_SIZE}px` : "0px"})` })), style),
+						tabIndex,
+						value
+					}), /* @__PURE__ */ jsxs(Stack, {
+						alignItems: "center",
+						className: textAreaClearableContainer,
+						direction: "row",
+						gap: "1",
+						children: [
+							computedClearable ? /* @__PURE__ */ jsx(Button, {
+								"aria-label": "clear value",
+								onClick: () => {
+									onChange("");
+								},
+								sentiment: "neutral",
+								size: "xsmall",
+								variant: "ghost",
+								children: /* @__PURE__ */ jsx(CloseIcon, {})
+							}) : null,
+							success && !error ? /* @__PURE__ */ jsx(CheckCircleIcon, {
+								sentiment: "success",
+								size: STATE_ICON_SIZE
+							}) : null,
+							error ? /* @__PURE__ */ jsx(AlertCircleIcon, { sentiment: "danger" }) : null
+						]
+					})]
+				})
+			}),
+			notice || maxLength ? /* @__PURE__ */ jsxs(Row, {
+				gap: "1",
+				templateColumns: "minmax(0, 1fr) min-content",
+				children: [/* @__PURE__ */ jsxs("div", { children: [error || success || 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] }), maxLength ? /* @__PURE__ */ jsxs(Text, {
+					as: "div",
+					prominence: "weak",
+					sentiment: "neutral",
+					variant: "caption",
+					children: [
+						(_value$length = value === null || value === void 0 ? void 0 : value.length) !== null && _value$length !== void 0 ? _value$length : 0,
+						"/",
+						maxLength
+					]
+				}) : null]
+			}) : null
+		]
+	});
+});
+
+//#endregion
+export { TextArea };

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

@@ -1,12 +1,22 @@
-/* empty css                          */
+/* empty css                      */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
+
+//#region src/components/TextArea/styles.css.ts
 var paddingRightVar = "var(--uv_hlf4vn0)";
 var textareaWrapper = "uv_hlf4vn1";
 var textAreaClearableContainer = "uv_hlf4vn2";
-var textArea = createRuntimeFn({ defaultClassName: "uv_hlf4vn3", variantClassNames: { error: { true: "uv_hlf4vn4" }, success: { true: "uv_hlf4vn5" } }, defaultVariants: { error: false, success: false }, compoundVariants: [] });
-export {
-  paddingRightVar,
-  textArea,
-  textAreaClearableContainer,
-  textareaWrapper
-};
+var textArea = createRuntimeFn({
+	defaultClassName: "uv_hlf4vn3",
+	variantClassNames: {
+		error: { true: "uv_hlf4vn4" },
+		success: { true: "uv_hlf4vn5" }
+	},
+	defaultVariants: {
+		error: false,
+		success: false
+	},
+	compoundVariants: []
+});
+
+//#endregion
+export { paddingRightVar, textArea, textAreaClearableContainer, textareaWrapper };

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

@@ -1,30 +1,29 @@
 import type { InputHTMLAttributes, ReactNode } from 'react';
-import type { TEXTINPUT_SIZE_HEIGHT } from './constants';
 /**
  * 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`
  */
 export declare const TextInput: import("react").ForwardRefExoticComponent<{
-    className?: string;
-    clearable?: boolean;
-    'data-testid'?: string;
-    error?: string;
+    className?: string | undefined;
+    clearable?: boolean | undefined;
+    'data-testid'?: string | undefined;
+    error?: string | undefined;
     helper?: ReactNode;
-    label?: string;
+    label?: string | undefined;
     labelDescription?: ReactNode;
-    loading?: boolean;
-    minLength?: number;
-    maxLength?: number;
-    onRandomize?: () => void;
+    loading?: boolean | undefined;
+    minLength?: number | undefined;
+    maxLength?: number | undefined;
+    onRandomize?: (() => void) | undefined;
     prefix?: ReactNode;
-    size?: keyof typeof TEXTINPUT_SIZE_HEIGHT;
-    success?: string | boolean;
+    size?: "large" | "medium" | "small" | undefined;
+    success?: string | boolean | undefined;
     suffix?: ReactNode;
-    tooltip?: string;
-    type?: "text" | "password" | "url" | "email";
-    value?: string;
-    defaultValue?: string;
-    onChangeValue?: (value: string) => void;
-} & Pick<InputHTMLAttributes<HTMLInputElement>, "style" | "disabled" | "id" | "autoFocus" | "tabIndex" | "role" | "aria-atomic" | "aria-label" | "aria-labelledby" | "aria-live" | "onFocus" | "onBlur" | "onChange" | "onKeyDown" | "onKeyUp" | "name" | "autoComplete" | "required" | "placeholder" | "readOnly"> & import("react").RefAttributes<HTMLInputElement>>;
+    tooltip?: string | undefined;
+    type?: "email" | "password" | "text" | "url" | undefined;
+    value?: string | undefined;
+    defaultValue?: string | undefined;
+    onChangeValue?: ((value: string) => void) | undefined;
+} & Pick<InputHTMLAttributes<HTMLInputElement>, "aria-atomic" | "aria-label" | "aria-labelledby" | "aria-live" | "autoComplete" | "autoFocus" | "disabled" | "id" | "name" | "onBlur" | "onChange" | "onFocus" | "onKeyDown" | "onKeyUp" | "placeholder" | "readOnly" | "required" | "role" | "style" | "tabIndex"> & import("react").RefAttributes<HTMLInputElement>>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TextInput/index.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAGV,mBAAmB,EACnB,SAAS,EACV,MAAM,OAAO,CAAA;AAgBd,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAA;AAwDxD;;;;GAIG;AACH,eAAO,MAAM,SAAS;gBAjDR,MAAM;gBACN,OAAO;oBACH,MAAM;YACd,MAAM;aACL,SAAS;YACV,MAAM;uBACK,SAAS;cAClB,OAAO;gBACL,MAAM;gBACN,MAAM;kBACJ,MAAM,IAAI;aACf,SAAS;WACX,MAAM,OAAO,qBAAqB;cAC/B,MAAM,GAAG,OAAO;aACjB,SAAS;cACR,MAAM;WACT,MAAM,GAAG,UAAU,GAAG,KAAK,GAAG,OAAO;YACpC,MAAM;mBACC,MAAM;oBACL,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;sWAkUxC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TextInput/index.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAGV,mBAAmB,EACnB,SAAS,EACV,MAAM,OAAO,CAAA;AAwEd;;;;GAIG;AACH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;sWAoSrB,CAAA"}