@ultraviolet/ui 3.21.0 → 3.21.2

package/dist/components/TagInput/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 { Stack, init_Stack } from "../Stack/index.js";
 import { Tooltip, init_Tooltip } from "../Tooltip/index.js";
 import { Button, init_Button } from "../Button/index.js";
@@ -18,193 +18,195 @@ import { CheckCircleOutlineIcon } from "@ultraviolet/icons/CheckCircleOutlineIco
 
 //#region src/components/TagInput/index.tsx
 var STATUS, convertTagArrayToTagStateArray, TagInput;
-var init_TagInput = __esmMin(() => {
-	init_hasHelperText();
-	init_Button();
-	init_Description();
-	init_Label();
-	init_Stack();
-	init_Tag();
-	init_Tooltip();
-	init_styles_css();
-	init_objectSpread2();
-	STATUS = {
-		IDLE: "idle",
-		LOADING: "loading"
-	};
-	convertTagArrayToTagStateArray = (tags) => {
-		var _ref;
-		return (_ref = tags !== null && tags !== void 0 ? tags : []) === null || _ref === void 0 ? void 0 : _ref.map((tag, index) => typeof tag === "object" ? _objectSpread2(_objectSpread2({}, tag), {}, { index: getUUID(`tag-${index}`) }) : {
-			index: getUUID(`tag-${index}`),
-			label: tag
-		});
-	};
-	TagInput = ({ disabled = false, id, name, onChange, placeholder, value, className, "data-testid": dataTestId, "aria-label": ariaLabel, label, labelDescription, required = false, size = "large", error, success, helper, readOnly = false, tooltip, clearable = false, style, "aria-describedBy": ariaDescribedBy }) => {
-		const [tagInputState, setTagInput] = useState(convertTagArrayToTagStateArray(value));
-		const [input, setInput] = useState("");
-		const [status, setStatus] = useState({});
-		const uniqueId = useId();
-		const localId = id !== null && id !== void 0 ? id : uniqueId;
-		const helperId = useId();
-		useEffect(() => {
-			setTagInput(convertTagArrayToTagStateArray(value));
-		}, [value, setTagInput]);
-		const inputRef = useRef(null);
-		const dispatchOnChange = (newState) => {
-			const changes = newState.map((tag) => typeof tag === "object" ? tag === null || tag === void 0 ? void 0 : tag.label : tag);
-			onChange === null || onChange === void 0 || onChange(changes);
+function init_TagInput() {
+	return (init_TagInput = __esmMin(() => {
+		init_hasHelperText();
+		init_Button();
+		init_Description();
+		init_Label();
+		init_Stack();
+		init_Tag();
+		init_Tooltip();
+		init_styles_css();
+		init_objectSpread2();
+		STATUS = {
+			IDLE: "idle",
+			LOADING: "loading"
 		};
-		const handleContainerClick = () => {
-			if (inputRef.current) {
-				var _inputRef$current;
-				inputRef === null || inputRef === void 0 || (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
-			}
+		convertTagArrayToTagStateArray = (tags) => {
+			var _ref;
+			return (_ref = tags !== null && tags !== void 0 ? tags : []) === null || _ref === void 0 ? void 0 : _ref.map((tag, index) => typeof tag === "object" ? _objectSpread2(_objectSpread2({}, tag), {}, { index: getUUID(`tag-${index}`) }) : {
+				index: getUUID(`tag-${index}`),
+				label: tag
+			});
 		};
-		const onInputChange = (e) => {
-			setInput(e.target.value);
-		};
-		const addTag = () => {
-			const newTagInput = input ? [...tagInputState, {
-				index: getUUID("tag"),
-				label: input
-			}] : tagInputState;
-			setInput("");
-			setTagInput(newTagInput);
-			if (newTagInput.length !== tagInputState.length && newTagInput) {
-				const tag = newTagInput.at(-1);
-				if (tag) setStatus({ [tag.index]: STATUS.LOADING });
-			}
-			try {
-				dispatchOnChange(newTagInput);
-				const tag = newTagInput.at(-1);
-				if (tag) setStatus({ [tag.index]: STATUS.IDLE });
-			} catch (_unused) {
-				setTagInput(tagInputState);
-			}
-		};
-		const deleteTag = (tagIndex) => {
-			setStatus({ [tagIndex]: STATUS.LOADING });
-			const findIndex = tagInputState.findIndex(({ index }) => index === tagIndex);
-			const newTagInput = [...tagInputState];
-			newTagInput.splice(findIndex, 1);
-			try {
-				dispatchOnChange(newTagInput);
+		TagInput = ({ disabled = false, id, name, onChange, placeholder, value, className, "data-testid": dataTestId, "aria-label": ariaLabel, label, labelDescription, required = false, size = "large", error, success, helper, readOnly = false, tooltip, clearable = false, style, "aria-describedBy": ariaDescribedBy }) => {
+			const [tagInputState, setTagInput] = useState(convertTagArrayToTagStateArray(value));
+			const [input, setInput] = useState("");
+			const [status, setStatus] = useState({});
+			const uniqueId = useId();
+			const localId = id !== null && id !== void 0 ? id : uniqueId;
+			const helperId = useId();
+			useEffect(() => {
+				setTagInput(convertTagArrayToTagStateArray(value));
+			}, [value, setTagInput]);
+			const inputRef = useRef(null);
+			const dispatchOnChange = (newState) => {
+				const changes = newState.map((tag) => typeof tag === "object" ? tag === null || tag === void 0 ? void 0 : tag.label : tag);
+				onChange === null || onChange === void 0 || onChange(changes);
+			};
+			const handleContainerClick = () => {
+				if (inputRef.current) {
+					var _inputRef$current;
+					inputRef === null || inputRef === void 0 || (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+				}
+			};
+			const onInputChange = (e) => {
+				setInput(e.target.value);
+			};
+			const addTag = () => {
+				const newTagInput = input ? [...tagInputState, {
+					index: getUUID("tag"),
+					label: input
+				}] : tagInputState;
+				setInput("");
 				setTagInput(newTagInput);
-				setStatus({ [tagIndex]: STATUS.IDLE });
-			} catch (_unused2) {
-				setTagInput(tagInputState);
-			}
-		};
-		const handleInputKeydown = (event) => {
-			var _inputRef$current2;
-			if (event.key === " " || event.key === "Enter") {
-				addTag();
-				event.preventDefault();
-			}
-			if (event.key === "Backspace" && (inputRef === null || inputRef === void 0 || (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.selectionStart) === 0 && tagInputState.length > 0) {
-				event.preventDefault();
-				if (tagInputState) {
-					const tag = tagInputState.at(-1);
-					if (tag) deleteTag(tag.index);
+				if (newTagInput.length !== tagInputState.length && newTagInput) {
+					const tag = newTagInput.at(-1);
+					if (tag) setStatus({ [tag.index]: STATUS.LOADING });
 				}
-			}
-		};
-		const clearAll = () => {
-			setInput("");
-			setTagInput([]);
-			dispatchOnChange([]);
-		};
-		const computedClearable = clearable && tagInputState.length > 0;
-		return /* @__PURE__ */ jsxs(Stack, {
-			className,
-			gap: "0.5",
-			children: [
-				label || labelDescription ? /* @__PURE__ */ jsx(Label, {
-					htmlFor: id !== null && id !== void 0 ? id : localId,
-					labelDescription,
-					required,
-					size,
-					children: label
-				}) : null,
-				/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Tooltip, {
-					text: tooltip,
-					children: /* @__PURE__ */ jsxs("div", {
-						className: cn(className, tagInputStyle.container({ size })),
-						"data-disabled": disabled,
-						"data-error": !!error,
-						"data-readonly": readOnly,
-						"data-success": !!success,
-						"data-testid": dataTestId,
-						onClick: handleContainerClick,
-						onKeyDown: (event) => {
-							if ([" ", "Enter"].includes(event.key)) handleContainerClick();
-						},
-						children: [/* @__PURE__ */ jsxs("div", {
-							className: tagInputStyle.dataContainer,
-							children: [tagInputState.map((tag) => /* @__PURE__ */ jsx(Tag, {
-								disabled,
-								isLoading: status[tag.index] === STATUS.LOADING,
-								onClose: readOnly ? void 0 : (e) => {
-									e.stopPropagation();
-									deleteTag(tag.index);
-								},
-								sentiment: "neutral",
-								children: tag.label
-							}, tag.index)), disabled ? null : /* @__PURE__ */ jsx("input", {
-								"aria-describedby": ariaDescribedBy || (hasHelperText(helper, error, success) ? helperId : void 0),
-								"aria-label": ariaLabel,
-								className: tagInputStyle.tagInput,
-								"data-size": size,
-								id: localId,
-								name,
-								onBlur: addTag,
-								onChange: onInputChange,
-								onKeyDown: handleInputKeydown,
-								placeholder: tagInputState.length === 0 ? placeholder : "",
-								readOnly,
-								ref: inputRef,
-								style,
-								type: "text",
-								value: input
-							})]
-						}), computedClearable || success || error ? /* @__PURE__ */ jsxs("div", {
-							className: tagInputStyle.stateContainer,
-							children: [
-								computedClearable ? /* @__PURE__ */ jsx(Button, {
-									"aria-label": "clear value",
+				try {
+					dispatchOnChange(newTagInput);
+					const tag = newTagInput.at(-1);
+					if (tag) setStatus({ [tag.index]: STATUS.IDLE });
+				} catch (_unused) {
+					setTagInput(tagInputState);
+				}
+			};
+			const deleteTag = (tagIndex) => {
+				setStatus({ [tagIndex]: STATUS.LOADING });
+				const findIndex = tagInputState.findIndex(({ index }) => index === tagIndex);
+				const newTagInput = [...tagInputState];
+				newTagInput.splice(findIndex, 1);
+				try {
+					dispatchOnChange(newTagInput);
+					setTagInput(newTagInput);
+					setStatus({ [tagIndex]: STATUS.IDLE });
+				} catch (_unused2) {
+					setTagInput(tagInputState);
+				}
+			};
+			const handleInputKeydown = (event) => {
+				var _inputRef$current2;
+				if (event.key === " " || event.key === "Enter") {
+					addTag();
+					event.preventDefault();
+				}
+				if (event.key === "Backspace" && (inputRef === null || inputRef === void 0 || (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.selectionStart) === 0 && tagInputState.length > 0) {
+					event.preventDefault();
+					if (tagInputState) {
+						const tag = tagInputState.at(-1);
+						if (tag) deleteTag(tag.index);
+					}
+				}
+			};
+			const clearAll = () => {
+				setInput("");
+				setTagInput([]);
+				dispatchOnChange([]);
+			};
+			const computedClearable = clearable && tagInputState.length > 0;
+			return /* @__PURE__ */ jsxs(Stack, {
+				className,
+				gap: "0.5",
+				children: [
+					label || labelDescription ? /* @__PURE__ */ jsx(Label, {
+						htmlFor: id !== null && id !== void 0 ? id : localId,
+						labelDescription,
+						required,
+						size,
+						children: label
+					}) : null,
+					/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Tooltip, {
+						text: tooltip,
+						children: /* @__PURE__ */ jsxs("div", {
+							className: cn(className, tagInputStyle.container({ size })),
+							"data-disabled": disabled,
+							"data-error": !!error,
+							"data-readonly": readOnly,
+							"data-success": !!success,
+							"data-testid": dataTestId,
+							onClick: handleContainerClick,
+							onKeyDown: (event) => {
+								if ([" ", "Enter"].includes(event.key)) handleContainerClick();
+							},
+							children: [/* @__PURE__ */ jsxs("div", {
+								className: tagInputStyle.dataContainer,
+								children: [tagInputState.map((tag) => /* @__PURE__ */ jsx(Tag, {
 									disabled,
-									onClick: clearAll,
+									isLoading: status[tag.index] === STATUS.LOADING,
+									onClose: readOnly ? void 0 : (e) => {
+										e.stopPropagation();
+										deleteTag(tag.index);
+									},
 									sentiment: "neutral",
-									size: "xsmall",
-									variant: "ghost",
-									children: /* @__PURE__ */ jsx(CloseIcon, {})
-								}) : null,
-								success ? /* @__PURE__ */ jsx(CheckCircleOutlineIcon, {
-									disabled,
-									sentiment: "success",
-									size: "small"
-								}) : null,
-								error ? /* @__PURE__ */ jsx(AlertCircleIcon, {
-									disabled,
-									sentiment: "danger",
-									size: "small"
-								}) : null
-							]
-						}) : null]
+									children: tag.label
+								}, tag.index)), disabled ? null : /* @__PURE__ */ jsx("input", {
+									"aria-describedby": ariaDescribedBy || (hasHelperText(helper, error, success) ? helperId : void 0),
+									"aria-label": ariaLabel,
+									className: tagInputStyle.tagInput,
+									"data-size": size,
+									id: localId,
+									name,
+									onBlur: addTag,
+									onChange: onInputChange,
+									onKeyDown: handleInputKeydown,
+									placeholder: tagInputState.length === 0 ? placeholder : "",
+									readOnly,
+									ref: inputRef,
+									style,
+									type: "text",
+									value: input
+								})]
+							}), computedClearable || success || error ? /* @__PURE__ */ jsxs("div", {
+								className: tagInputStyle.stateContainer,
+								children: [
+									computedClearable ? /* @__PURE__ */ jsx(Button, {
+										"aria-label": "clear value",
+										disabled,
+										onClick: clearAll,
+										sentiment: "neutral",
+										size: "xsmall",
+										variant: "ghost",
+										children: /* @__PURE__ */ jsx(CloseIcon, {})
+									}) : null,
+									success ? /* @__PURE__ */ jsx(CheckCircleOutlineIcon, {
+										disabled,
+										sentiment: "success",
+										size: "small"
+									}) : null,
+									error ? /* @__PURE__ */ jsx(AlertCircleIcon, {
+										disabled,
+										sentiment: "danger",
+										size: "small"
+									}) : null
+								]
+							}) : null]
+						})
+					}) }),
+					/* @__PURE__ */ jsx(Description, {
+						helper,
+						error,
+						success,
+						id: ariaDescribedBy !== null && ariaDescribedBy !== void 0 ? ariaDescribedBy : helperId,
+						disabled: disabled || readOnly
 					})
-				}) }),
-				/* @__PURE__ */ jsx(Description, {
-					helper,
-					error,
-					success,
-					id: ariaDescribedBy !== null && ariaDescribedBy !== void 0 ? ariaDescribedBy : helperId,
-					disabled: disabled || readOnly
-				})
-			]
-		});
-	};
-	TagInput.displayName = "TagInput";
-});
+				]
+			});
+		};
+		TagInput.displayName = "TagInput";
+	}))();
+}
 
 //#endregion
 init_TagInput();

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

@@ -4,24 +4,26 @@ import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 
 //#region src/components/TagInput/styles.css.ts
 var tagInputStyle;
-var init_styles_css = __esmMin(() => {
-	init_styles_css_ts_vanilla();
-	tagInputStyle = {
-		container: createRuntimeFn({
-			defaultClassName: "uv_sjgcm20",
-			variantClassNames: { size: {
-				large: "uv_sjgcm21",
-				medium: "uv_sjgcm22",
-				small: "uv_sjgcm23"
-			} },
-			defaultVariants: { size: "large" },
-			compoundVariants: []
-		}),
-		dataContainer: "uv_sjgcm24",
-		stateContainer: "uv_sjgcm25",
-		tagInput: "uv_sjgcm26"
-	};
-});
+function init_styles_css() {
+	return (init_styles_css = __esmMin(() => {
+		/* @__PURE__ */ init_styles_css_ts_vanilla();
+		tagInputStyle = {
+			container: createRuntimeFn({
+				defaultClassName: "uv_sjgcm20",
+				variantClassNames: { size: {
+					large: "uv_sjgcm21",
+					medium: "uv_sjgcm22",
+					small: "uv_sjgcm23"
+				} },
+				defaultVariants: { size: "large" },
+				compoundVariants: []
+			}),
+			dataContainer: "uv_sjgcm24",
+			stateContainer: "uv_sjgcm25",
+			tagInput: "uv_sjgcm26"
+		};
+	}))();
+}
 
 //#endregion
 init_styles_css();

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

@@ -1,7 +1,9 @@
 import { __esmMin } from "../../_virtual/_rolldown/runtime.js";
 
 //#region src/components/TagInput/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/TagList/constant.js

@@ -3,10 +3,12 @@ import { consoleLightTheme } from "@ultraviolet/themes";
 
 //#region src/components/TagList/constant.ts
 var TAGS_GAP, DEFAULT_POPOVER_MAX_HEIGHT;
-var init_constant = __esmMin(() => {
-	TAGS_GAP = consoleLightTheme.space["1"];
-	DEFAULT_POPOVER_MAX_HEIGHT = "16rem";
-});
+function init_constant() {
+	return (init_constant = __esmMin(() => {
+		TAGS_GAP = consoleLightTheme.space["1"];
+		DEFAULT_POPOVER_MAX_HEIGHT = "16rem";
+	}))();
+}
 
 //#endregion
 init_constant();