@ultraviolet/ui 3.23.0 → 3.24.1

package/dist/components/TagList/index.js

@@ -1,13 +1,12 @@
 'use client';
 import { __esmMin, __name } from "../../_virtual/_rolldown/runtime.js";
-import _objectSpread2, { init_objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/objectSpread2.js";
-import { init_styles_css, popoverTriggerWidthVar, tagListStyle } from "./styles.css.js";
+import _objectSpread2, { init_objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/objectSpread2.js";
+import { init_styles_css, tagListStyle } from "./styles.css.js";
 import { Tag, init_Tag } from "../Tag/index.js";
 import { Popover, init_Popover } from "../Popover/index.js";
-import { DEFAULT_POPOVER_MAX_HEIGHT, TAGS_GAP, init_constant } from "./constant.js";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { DEFAULT_POPOVER_MAX_HEIGHT, init_constant } from "./constant.js";
+import { createElement, useEffect, useMemo, useRef, useState } from "react";
 import { cn } from "@ultraviolet/utils";
-import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/TagList/index.tsx
@@ -28,142 +27,93 @@ function init_TagList() {
 			return tag;
 		};
 		TagList = ({ maxLength = 600, tags = DEFAULT_TAGS, threshold = 1, multiline = false, popoverTitle, popoverPlacement, popoverMaxHeight = DEFAULT_POPOVER_MAX_HEIGHT, copiable, copyText, copiedText, sentiment = "neutral", variant = "default", className, "data-testid": dataTestId, style }) => {
-			var _containerRef$current3;
-			var _containerRef$current6;
 			const containerRef = useRef(null);
 			const measureRef = useRef(null);
 			const popoverTriggerRef = useRef(null);
-			const [isReady, setIsReady] = useState(false);
 			const [isPopoverVisible, setIsPopoverVisible] = useState(false);
-			const [popoverTriggerWidth, setPopoverTriggerWidth] = useState(0);
-			const [visibleTags, setVisibleTags] = useState([]);
+			const [visibleTags, setVisibleTags] = useState([tags[0]]);
 			const [hiddenTags, setHiddenTags] = useState([]);
-			const { tmpThreshold, potentiallyVisibleTags, surelyHiddenTags } = useMemo(() => {
-				let tmpThreshold = threshold;
-				while (tmpThreshold > 1 && tags.length > 0 && tags.slice(0, tmpThreshold).reduce((acc, tag) => acc + getTagLabel(tag), "").length > maxLength) tmpThreshold -= 1;
-				const potentiallyVisibleTagsLength = Math.max(1, tags.length > tmpThreshold ? tmpThreshold : tags.length);
-				return {
-					potentiallyVisibleTags: tags.slice(0, potentiallyVisibleTagsLength),
-					surelyHiddenTags: tags.slice(potentiallyVisibleTagsLength),
-					tmpThreshold
-				};
+			const [potentiallyVisibleTags, surelyHiddenTags] = useMemo(() => {
+				if (tags.length === 0) return [[], []];
+				const limit = Math.min(threshold, tags.length);
+				let visibleCount = 0;
+				let currentLength = 0;
+				for (let i = 0; i < limit; i++) {
+					currentLength += getTagLabel(tags[i]).length;
+					if (currentLength > maxLength) break;
+					visibleCount++;
+				}
+				visibleCount = Math.max(visibleCount, 1);
+				return [tags.slice(0, visibleCount), tags.slice(visibleCount)];
 			}, [
 				maxLength,
 				tags,
 				threshold
 			]);
 			useEffect(() => {
-				var _containerRef$current;
-				var _containerRef$current2;
 				if (tags.length === 0 || !containerRef.current || !measureRef.current) return;
-				if (multiline) {
+				if (multiline || typeof ResizeObserver === "undefined") {
 					setVisibleTags(potentiallyVisibleTags);
 					setHiddenTags(surelyHiddenTags);
-					setIsReady(true);
 					return;
 				}
-				const parentWidth = ((_containerRef$current = (_containerRef$current2 = containerRef.current.parentElement) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.offsetWidth) !== null && _containerRef$current !== void 0 ? _containerRef$current : 0) - 32;
-				const { measuredVisibleTags, measuredHiddenTags } = [...measureRef.current.children[0].children].reduce((accumulator, currentValue, index) => {
-					const tagWidth = currentValue.offsetWidth;
-					const gap = index > 0 ? Number.parseInt(TAGS_GAP, 10) : 0;
-					const newAccumulatedWidth = accumulator.accumulatedWidth + tagWidth + gap;
-					if (accumulator.accumulatedWidth + 32 + gap <= parentWidth) return {
-						accumulatedWidth: newAccumulatedWidth,
-						measuredHiddenTags: accumulator.measuredHiddenTags,
-						measuredVisibleTags: [...accumulator.measuredVisibleTags, tags[index]]
-					};
-					return {
-						accumulatedWidth: accumulator.accumulatedWidth,
-						measuredHiddenTags: [...accumulator.measuredHiddenTags, tags[index]],
-						measuredVisibleTags: accumulator.measuredVisibleTags
-					};
-				}, {
-					accumulatedWidth: 0,
-					measuredHiddenTags: [],
-					measuredVisibleTags: []
-				});
-				const finalHiddenTags = [...measuredHiddenTags, ...surelyHiddenTags];
-				setVisibleTags(measuredVisibleTags);
-				setHiddenTags(finalHiddenTags);
-				if (finalHiddenTags.length === 0) setIsReady(true);
+				const handleResize = (entries) => {
+					if (!containerRef.current || !measureRef.current || !popoverTriggerRef.current) return;
+					const totalAvailableWidth = entries[0].contentBoxSize[0].inlineSize;
+					if (measureRef.current.offsetWidth < totalAvailableWidth) {
+						setVisibleTags(potentiallyVisibleTags);
+						setHiddenTags(surelyHiddenTags);
+						return;
+					}
+					const elementsToMeasure = [...measureRef.current.children[0].children];
+					const counterWidth = popoverTriggerRef.current.offsetWidth;
+					let visibleTagsCount = 0;
+					let visibleTagsWidth = 0;
+					for (let i = 0; i < potentiallyVisibleTags.length; i++) {
+						if (i > 0) visibleTagsWidth += 4;
+						visibleTagsWidth += elementsToMeasure[i].offsetWidth;
+						const availableWidth = i < tags.length - 1 ? totalAvailableWidth - counterWidth : totalAvailableWidth;
+						if (visibleTagsWidth > availableWidth) break;
+						visibleTagsCount++;
+					}
+					if (visibleTagsCount === 0) visibleTagsCount = 1;
+					setVisibleTags(tags.slice(0, visibleTagsCount));
+					setHiddenTags(tags.slice(visibleTagsCount));
+				};
+				const resizeObserver = new ResizeObserver(handleResize);
+				resizeObserver.observe(containerRef.current);
+				return () => {
+					resizeObserver.disconnect();
+				};
 			}, [
 				multiline,
 				potentiallyVisibleTags,
 				surelyHiddenTags,
-				tags,
-				threshold,
-				tmpThreshold,
-				(_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 || (_containerRef$current3 = _containerRef$current3.parentElement) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.offsetWidth
+				tags
 			]);
-			useEffect(() => {
-				var _popoverTriggerRef$cu;
-				if ((_popoverTriggerRef$cu = popoverTriggerRef.current) === null || _popoverTriggerRef$cu === void 0 ? void 0 : _popoverTriggerRef$cu.offsetWidth) {
-					var _containerRef$current4;
-					var _containerRef$current5;
-					var _tagsContainer$parent;
-					var _tagsContainer$parent2;
-					const newPopoverTriggerWidth = popoverTriggerRef.current.offsetWidth;
-					setPopoverTriggerWidth(newPopoverTriggerWidth);
-					const tagsContainer = containerRef.current;
-					const tagsContainerWidth = (_containerRef$current4 = (_containerRef$current5 = containerRef.current) === null || _containerRef$current5 === void 0 ? void 0 : _containerRef$current5.offsetWidth) !== null && _containerRef$current4 !== void 0 ? _containerRef$current4 : 0;
-					const parentWidth = (_tagsContainer$parent = tagsContainer === null || tagsContainer === void 0 || (_tagsContainer$parent2 = tagsContainer.parentElement) === null || _tagsContainer$parent2 === void 0 ? void 0 : _tagsContainer$parent2.offsetWidth) !== null && _tagsContainer$parent !== void 0 ? _tagsContainer$parent : 0;
-					if (visibleTags.length > 1 && hiddenTags.length > 0 && tagsContainerWidth + newPopoverTriggerWidth > parentWidth) {
-						var _visibleTags$at;
-						const visibleTagsCopy = visibleTags.filter((_, index) => index < visibleTags.length - 1);
-						const tagToMove = (_visibleTags$at = visibleTags.at(-1)) !== null && _visibleTags$at !== void 0 ? _visibleTags$at : "";
-						setVisibleTags(visibleTagsCopy);
-						setHiddenTags([tagToMove, ...hiddenTags]);
-					}
-					setIsReady(true);
-				}
-			}, [
-				hiddenTags,
-				threshold,
-				visibleTags,
-				visibleTags.length,
-				(_containerRef$current6 = containerRef.current) === null || _containerRef$current6 === void 0 || (_containerRef$current6 = _containerRef$current6.parentElement) === null || _containerRef$current6 === void 0 ? void 0 : _containerRef$current6.offsetWidth
-			]);
-			const renderTag = (tag, index, isEllipsis = false, hidden) => {
+			const renderTag = (tag, index, hidden) => {
+				const tagLabel = getTagLabel(tag);
 				const commonProps = {
-					className: cn(isEllipsis ? "ellipsed" : "", tagListStyle.ellipsisChild),
+					className: tagListStyle.tag,
 					copiable,
 					copiedText,
 					copyText,
-					key: `${getTagLabel(tag)}-${index}`,
-					"data-testid": hidden ? "" : getTagLabel(tag),
+					"data-testid": hidden ? "" : tagLabel,
 					variant,
 					sentiment
 				};
-				if (isKeyValueTag(tag)) return /* @__PURE__ */ jsx(Tag, _objectSpread2({ keyValue: tag }, commonProps));
-				return /* @__PURE__ */ jsxs(Tag, _objectSpread2(_objectSpread2({}, commonProps), {}, { children: [isLabelIconTag(tag) ? tag.icon : void 0, getTagLabel(tag)] }));
+				if (isKeyValueTag(tag)) return /* @__PURE__ */ createElement(Tag, _objectSpread2(_objectSpread2({ keyValue: tag }, commonProps), {}, { key: `${tagLabel}-${index}` }));
+				return /* @__PURE__ */ createElement(Tag, _objectSpread2(_objectSpread2({}, commonProps), {}, { key: `${tagLabel}-${index}` }), isLabelIconTag(tag) ? tag.icon : void 0, tagLabel);
 			};
 			return /* @__PURE__ */ jsxs("div", {
 				className: cn(className, tagListStyle.container),
 				"data-testid": dataTestId,
-				style: _objectSpread2({ visibility: isReady ? "visible" : "hidden" }, style),
-				children: [
-					/* @__PURE__ */ jsx("div", {
-						className: cn(tagListStyle.tagContainer({ multiline }), visibleTags.length === 1 && hiddenTags.length === 0 || popoverTriggerWidth ? tagListStyle.ellipsisContainer : ""),
-						"data-testid": `${dataTestId !== null && dataTestId !== void 0 ? dataTestId : "taglist"}-container`,
-						ref: containerRef,
-						style: assignInlineVars({ [popoverTriggerWidthVar]: `${popoverTriggerWidth || 0}px` }),
-						children: visibleTags.map((tag, index) => renderTag(tag, index, index === visibleTags.length - 1, true))
-					}),
-					/* @__PURE__ */ jsx("div", {
-						ref: measureRef,
-						style: {
-							position: "absolute",
-							visibility: "hidden",
-							whiteSpace: "nowrap",
-							pointerEvents: "none"
-						},
-						children: /* @__PURE__ */ jsx("div", {
-							className: tagListStyle.tagContainer({ multiline }),
-							"data-testid": `${dataTestId !== null && dataTestId !== void 0 ? dataTestId : "taglist"}-measure-container`,
-							children: potentiallyVisibleTags.map((tag, index) => renderTag(tag, index))
-						})
-					}),
-					hiddenTags.length > 0 && /* @__PURE__ */ jsx(Popover, {
+				ref: containerRef,
+				style,
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: cn(tagListStyle.tagContainer({ multiline })),
+					"data-testid": `${dataTestId !== null && dataTestId !== void 0 ? dataTestId : "taglist"}-container`,
+					children: [visibleTags.map((tag, index) => renderTag(tag, index, true)), hiddenTags.length > 0 && /* @__PURE__ */ jsx(Popover, {
 						content: /* @__PURE__ */ jsx("div", {
 							className: tagListStyle.tagContainer({ multiline: true }),
 							children: hiddenTags.map((tag, index) => renderTag(tag, index))
@@ -174,19 +124,31 @@ function init_TagList() {
 						size: "small",
 						title: popoverTitle,
 						visible: isPopoverVisible,
-						children: /* @__PURE__ */ jsxs("span", {
-							className: tagListStyle.tagsWrapper,
+						children: /* @__PURE__ */ jsxs("button", {
+							type: "button",
+							className: tagListStyle.counter,
 							"data-testid": `${dataTestId !== null && dataTestId !== void 0 ? dataTestId : "taglist"}-open`,
 							onClick: () => setIsPopoverVisible(true),
 							onKeyDown: (event) => {
 								if ([" ", "Enter"].includes(event.key)) setIsPopoverVisible(true);
 							},
-							ref: popoverTriggerRef,
-							tabIndex: 0,
 							children: ["+", hiddenTags.length]
 						})
-					})
-				]
+					})]
+				}), /* @__PURE__ */ jsxs("div", {
+					"aria-hidden": "true",
+					ref: measureRef,
+					className: tagListStyle.measurementContainer,
+					children: [/* @__PURE__ */ jsx("div", {
+						className: tagListStyle.tagContainer({ multiline }),
+						children: potentiallyVisibleTags.map((tag, index) => renderTag(tag, index))
+					}), /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						className: tagListStyle.counter,
+						ref: popoverTriggerRef,
+						children: ["+", surelyHiddenTags.length]
+					})]
+				})]
 			});
 		};
 		TagList.displayName = "TagList";

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

@@ -8,8 +8,8 @@ export declare const tagListStyle: {
             };
         };
     }>;
-    ellipsisChild: string;
-    ellipsisContainer: string;
-    tagsWrapper: string;
+    tag: string;
+    counter: string;
+    measurementContainer: string;
 };
 //# sourceMappingURL=styles.css.d.ts.map

package/dist/components/TagList/styles.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/TagList/styles.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,sBAAsB,oBAAc,CAAA;AA2DjD,eAAO,MAAM,YAAY;;;;;;;;;;;;CAMxB,CAAA"}
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/TagList/styles.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,sBAAsB,oBAAc,CAAA;AAuDjD,eAAO,MAAM,YAAY;;;;;;;;;;;;CAMxB,CAAA"}

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

@@ -3,26 +3,25 @@ import { init_styles_css_ts_vanilla } from "./styles.css.ts.vanilla.js";
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 
 //#region src/components/TagList/styles.css.ts
-var popoverTriggerWidthVar, tagListStyle;
+var tagListStyle;
 function init_styles_css() {
 	return (init_styles_css = __esmMin(() => {
 		/* @__PURE__ */ init_styles_css_ts_vanilla();
-		popoverTriggerWidthVar = "var(--uv_1f9zr5y0)";
 		tagListStyle = {
 			container: "uv_1f9zr5y1",
 			tagContainer: createRuntimeFn({
-				defaultClassName: "uv_1f9zr5y2",
-				variantClassNames: { multiline: { true: "uv_1f9zr5y3" } },
+				defaultClassName: "uv_1f9zr5y3",
+				variantClassNames: { multiline: { true: "uv_1f9zr5y4" } },
 				defaultVariants: {},
 				compoundVariants: []
 			}),
-			ellipsisChild: "uv_1f9zr5y5",
-			ellipsisContainer: "uv_1f9zr5y4",
-			tagsWrapper: "uv_1f9zr5y6"
+			tag: "uv_1f9zr5y5",
+			counter: "uv_1f9zr5y6",
+			measurementContainer: "uv_1f9zr5y2"
 		};
 	}))();
 }
 
 //#endregion
 init_styles_css();
-export { init_styles_css, popoverTriggerWidthVar, tagListStyle };
+export { init_styles_css, tagListStyle };

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Text/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AAItD,OAAO,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAG5E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAEhD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAI9C,KAAK,eAAe,GAAG,MAAM,OAAO,WAAW,CAAA;AAC/C,KAAK,cAAc,GAAG,aAAa,CAAC,WAAW,CAAC,CAAA;AAChD,KAAK,eAAe,GAAG,aAAa,CAAC,YAAY,CAAC,CAAA;AAElD,KAAK,SAAS,GAAG;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,SAAS,CAAA;IACnB,SAAS,CAAC,EAAE,cAAc,CAAA;IAC1B,OAAO,EAAE,WAAW,CAAA;IACpB,SAAS,CAAC,EAAE,aAAa,CAAA;IACzB,UAAU,CAAC,EAAE,eAAe,CAAA;IAC5B,EAAE,EAAE,WAAW,CAAA;IACf,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,GAAG,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,MAAM,CAAA;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,UAAU,CAAC,EAAE,eAAe,CAAA;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC,QAAQ,EAAE,QAAQ,GAAG,OAAO,CAAC,CAAA;IAC5C,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,CAAA;6BAKoB,EACnB,OAAO,EACP,QAAQ,EACR,EAAE,EAAE,SAAiB,EACrB,SAAS,EACT,OAAe,EACf,SAAS,EACT,UAAsB,EACtB,SAAS,EACT,QAAgB,EAChB,MAAc,EACd,SAAiB,EACjB,aAAqB,EACrB,EAAE,EACF,GAAG,EACH,UAAU,EACV,OAAO,EACP,IAAI,EACJ,aAAa,EAAE,UAAU,EACzB,aAAa,EAAE,UAAU,EACzB,KAAK,GACN,EAAE,SAAS"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Text/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AAGtD,OAAO,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAG5E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAEhD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAI9C,KAAK,eAAe,GAAG,MAAM,OAAO,WAAW,CAAA;AAC/C,KAAK,cAAc,GAAG,aAAa,CAAC,WAAW,CAAC,CAAA;AAChD,KAAK,eAAe,GAAG,aAAa,CAAC,YAAY,CAAC,CAAA;AAElD,KAAK,SAAS,GAAG;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,SAAS,CAAA;IACnB,SAAS,CAAC,EAAE,cAAc,CAAA;IAC1B,OAAO,EAAE,WAAW,CAAA;IACpB,SAAS,CAAC,EAAE,aAAa,CAAA;IACzB,UAAU,CAAC,EAAE,eAAe,CAAA;IAC5B,EAAE,EAAE,WAAW,CAAA;IACf,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,GAAG,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,MAAM,CAAA;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,UAAU,CAAC,EAAE,eAAe,CAAA;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC,QAAQ,EAAE,QAAQ,GAAG,OAAO,CAAC,CAAA;IAC5C,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,CAAA;6BAKoB,EACnB,OAAO,EACP,QAAQ,EACR,EAAE,EAAE,SAAiB,EACrB,SAAS,EACT,OAAe,EACf,SAAS,EACT,UAAsB,EACtB,SAAS,EACT,QAAgB,EAChB,MAAc,EACd,SAAiB,EACjB,aAAqB,EACrB,EAAE,EACF,GAAG,EACH,UAAU,EACV,OAAO,EACP,IAAI,EACJ,aAAa,EAAE,UAAU,EACzB,aAAa,EAAE,UAAU,EACzB,KAAK,GACN,EAAE,SAAS"}

package/dist/components/Text/index.js

@@ -1,12 +1,11 @@
 'use client';
 import { __esmMin, __name } from "../../_virtual/_rolldown/runtime.js";
-import _objectSpread2, { init_objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/objectSpread2.js";
+import _objectSpread2, { init_objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/objectSpread2.js";
 import recursivelyGetChildrenString, { init_recursivelyGetChildrenString } from "../../helpers/recursivelyGetChildrenString.js";
 import { init_useIsOverflowing, useIsOverflowing } from "../../hooks/useIsOverflowing.js";
 import { Tooltip, init_Tooltip } from "../Tooltip/index.js";
 import { init_style_css, textStyle } from "./style.css.js";
 import { init_variables_css, textVars } from "./variables.css.js";
-import { useRef } from "react";
 import { cn } from "@ultraviolet/utils";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { jsx } from "react/jsx-runtime";
@@ -22,11 +21,10 @@ function init_Text() {
 		init_variables_css();
 		init_objectSpread2();
 		Text = ({ variant, children, as: Component = "div", sentiment, oneLine = false, placement, prominence = "default", className, disabled = false, italic = false, underline = false, strikeThrough = false, id, dir, whiteSpace, htmlFor, role, "data-testid": dataTestId, "aria-hidden": ariaHidden, style }) => {
-			const elementRef = useRef(null);
-			const isOverflowing = useIsOverflowing(elementRef);
+			const [setElement, isOverflowing] = useIsOverflowing({ enabled: oneLine === true });
 			const finalStringChildren = recursivelyGetChildrenString(children);
 			return /* @__PURE__ */ jsx(Tooltip, {
-				text: oneLine && isOverflowing ? finalStringChildren : "",
+				text: isOverflowing ? finalStringChildren : "",
 				children: /* @__PURE__ */ jsx(Component, {
 					role,
 					"aria-hidden": ariaHidden,
@@ -44,7 +42,7 @@ function init_Text() {
 					dir,
 					htmlFor,
 					id,
-					ref: elementRef,
+					ref: setElement,
 					style: _objectSpread2(_objectSpread2({}, assignInlineVars(textVars, {
 						textAlign: placement !== null && placement !== void 0 ? placement : "",
 						whiteSpace: whiteSpace !== null && whiteSpace !== void 0 ? whiteSpace : ""

package/dist/components/Text/style.css.d.ts

@@ -1,54 +1,7 @@
 import type { TextStyleObject } from '@ultraviolet/themes';
-import type { RecipeVariants } from '@vanilla-extract/recipes';
 type StyleText = Omit<TextStyleObject, 'paragraphSpacing' | 'textCase' | 'textDecoration' | 'weight'> & {
     textTransform: string;
 };
-declare const text: import("@vanilla-extract/recipes").RuntimeFn<{
-    disabled: {
-        true: {};
-    };
-    italic: {
-        true: {
-            fontStyle: "italic";
-        };
-    };
-    oneLine: {
-        true: {
-            overflow: "hidden";
-            textOverflow: "ellipsis";
-            whiteSpace: "nowrap";
-        };
-    };
-    prominence: {
-        default: {};
-        strong: {};
-        stronger: {};
-        weak: {};
-    };
-    sentiment: {
-        black: {};
-        danger: {};
-        info: {};
-        neutral: {};
-        primary: {};
-        secondary: {};
-        success: {};
-        warning: {};
-        white: {};
-    };
-    strikeThrough: {
-        true: {
-            textDecoration: "line-through";
-        };
-    };
-    underline: {
-        true: {
-            textDecoration: "underline";
-        };
-    };
-    variant: Record<"body" | "bodySmall" | "bodySmallStrong" | "bodySmallStronger" | "bodyStrong" | "bodyStronger" | "caption" | "captionSmall" | "captionSmallStrong" | "captionSmallStronger" | "captionStrong" | "captionStronger" | "code" | "codeSmall" | "codeSmallStrong" | "codeSmallStronger" | "codeStrong" | "codeStronger" | "heading" | "headingLarge" | "headingLargeStrong" | "headingLargeStronger" | "headingSmall" | "headingSmallStrong" | "headingSmallStronger" | "headingStrong" | "headingStronger", StyleText>;
-}>;
-export type TextVariants = NonNullable<RecipeVariants<typeof text>>;
 export declare const textStyle: {
     text: import("@vanilla-extract/recipes").RuntimeFn<{
         disabled: {

package/dist/components/Text/style.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"style.css.d.ts","sourceRoot":"","sources":["../../../src/components/Text/style.css.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAiB,eAAe,EAAe,MAAM,qBAAqB,CAAA;AAItF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAA;AAsB9D,KAAK,SAAS,GAAG,IAAI,CAAC,eAAe,EAAE,kBAAkB,GAAG,UAAU,GAAG,gBAAgB,GAAG,QAAQ,CAAC,GAAG;IACtG,aAAa,EAAE,MAAM,CAAA;CACtB,CAAA;AAmFD,QAAA,MAAM,IAAI;;QAkBJ,IAAI;;;;;;;;;;;;;;;QAeJ,OAAO;QACP,MAAM;QACN,QAAQ;QACR,IAAI;;;QAGJ,KAAK;QACL,MAAM;QACN,IAAI;QACJ,OAAO;QACP,OAAO;QACP,SAAS;QACT,OAAO;QACP,OAAO;QACP,KAAK;;;;;;;;;;;;;EAcT,CAAA;AAGF,MAAM,MAAM,YAAY,GAAG,WAAW,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC,CAAA;AAEnE,eAAO,MAAM,SAAS;;;YAhDhB,IAAI;;;;;;;;;;;;;;;YAeJ,OAAO;YACP,MAAM;YACN,QAAQ;YACR,IAAI;;;YAGJ,KAAK;YACL,MAAM;YACN,IAAI;YACJ,OAAO;YACP,OAAO;YACP,SAAS;YACT,OAAO;YACP,OAAO;YACP,KAAK;;;;;;;;;;;;;;;CAmB+B,CAAA"}
+{"version":3,"file":"style.css.d.ts","sourceRoot":"","sources":["../../../src/components/Text/style.css.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAiB,eAAe,EAAe,MAAM,qBAAqB,CAAA;AAyBtF,KAAK,SAAS,GAAG,IAAI,CAAC,eAAe,EAAE,kBAAkB,GAAG,UAAU,GAAG,gBAAgB,GAAG,QAAQ,CAAC,GAAG;IACtG,aAAa,EAAE,MAAM,CAAA;CACtB,CAAA;AAoJD,eAAO,MAAM,SAAS;;;YA/ChB,IAAI;;;;;;;;;;;;;;;YAeJ,OAAO;YACP,MAAM;YACN,QAAQ;YACR,IAAI;;;YAGJ,KAAK;YACL,MAAM;YACN,IAAI;YACJ,OAAO;YACP,OAAO;YACP,SAAS;YACT,OAAO;YACP,OAAO;YACP,KAAK;;;;;;;;;;;;;;;CAkB+B,CAAA"}

package/dist/components/TextArea/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.142.0/helpers/esm/objectSpread2.js";
+import _objectSpread2, { init_objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.146.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";

package/dist/components/TimeInput/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.142.0/helpers/esm/objectSpread2.js";
+import _objectSpread2, { init_objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/objectSpread2.js";
 import { Stack, init_Stack } from "../Stack/index.js";
 import { Text, init_Text } from "../Text/index.js";
 import { hasHelperText, init_hasHelperText } from "../../helpers/hasHelperText.js";

package/dist/components/Toaster/Toaster.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.142.0/helpers/esm/objectSpread2.js";
+import _objectSpread2, { init_objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/objectSpread2.js";
 import { CloseButton, init_CloseButton } from "./components/CloseButton.js";
 import { Content, init_Content } from "./components/Content.js";
 import { jsx } from "react/jsx-runtime";

package/dist/components/Toaster/components/Button.js

@@ -1,7 +1,7 @@
 'use client';
 import { __esmMin, __name } from "../../../_virtual/_rolldown/runtime.js";
-import _objectSpread2, { init_objectSpread2 } from "../../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/objectSpread2.js";
-import _objectWithoutProperties, { init_objectWithoutProperties } from "../../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/objectWithoutProperties.js";
+import _objectSpread2, { init_objectSpread2 } from "../../../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/objectSpread2.js";
+import _objectWithoutProperties, { init_objectWithoutProperties } from "../../../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/objectWithoutProperties.js";
 import { Button, init_Button as init_Button$1 } from "../../Button/index.js";
 import { init_styles_css, toasterStyle } from "../styles.css.js";
 import { cn } from "@ultraviolet/utils";

package/dist/components/Toaster/components/Link.js

@@ -1,9 +1,9 @@
 'use client';
 import { __esmMin, __name } from "../../../_virtual/_rolldown/runtime.js";
-import _objectSpread2, { init_objectSpread2 } from "../../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/objectSpread2.js";
+import _objectSpread2, { init_objectSpread2 } from "../../../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/objectSpread2.js";
 import { Link, init_Link as init_Link$1 } from "../../Link/index.js";
-import _objectDestructuringEmpty, { init_objectDestructuringEmpty } from "../../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/objectDestructuringEmpty.js";
-import _extends, { init_extends } from "../../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/extends.js";
+import _objectDestructuringEmpty, { init_objectDestructuringEmpty } from "../../../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/objectDestructuringEmpty.js";
+import _extends, { init_extends } from "../../../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/extends.js";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/Toaster/components/Link.tsx

package/dist/components/Tooltip/TooltipChildren.d.ts

@@ -0,0 +1,10 @@
+import type { TooltipProps } from '.';
+import type { useTooltip } from './useTooltip';
+type TooltipChildrenProps = {
+    tooltip: ReturnType<typeof useTooltip>;
+    tooltipId: string;
+    isTooltipVisible: boolean;
+} & Pick<TooltipProps, 'children' | 'tabIndex' | 'relation' | 'containerFullHeight' | 'containerFullWidth'>;
+export declare const TooltipChildren: ({ children, tooltip, tooltipId, tabIndex, relation, isTooltipVisible, containerFullHeight, containerFullWidth, }: TooltipChildrenProps) => string | number | bigint | boolean | import("react").JSX.Element | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | Iterable<import("react").ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null | undefined;
+export {};
+//# sourceMappingURL=TooltipChildren.d.ts.map

package/dist/components/Tooltip/TooltipChildren.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipChildren.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/TooltipChildren.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,GAAG,CAAA;AACrC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAqB9C,KAAK,oBAAoB,GAAG;IAC1B,OAAO,EAAE,UAAU,CAAC,OAAO,UAAU,CAAC,CAAA;IACtC,SAAS,EAAE,MAAM,CAAA;IACjB,gBAAgB,EAAE,OAAO,CAAA;CAC1B,GAAG,IAAI,CAAC,YAAY,EAAE,UAAU,GAAG,UAAU,GAAG,UAAU,GAAG,qBAAqB,GAAG,oBAAoB,CAAC,CAAA;AAE3G,eAAO,MAAM,eAAe,qHASzB,oBAAoB,gWA4DtB,CAAA"}

package/dist/components/Tooltip/TooltipChildren.js

@@ -0,0 +1,71 @@
+import { __esmMin, __name } from "../../_virtual/_rolldown/runtime.js";
+import _objectSpread2, { init_objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/objectSpread2.js";
+import { init_styles_css, tooltipStyle } from "./styles.css.js";
+import { useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/Tooltip/TooltipChildren.tsx
+var FOCUSABLE_ELEMENTS, TooltipChildren;
+function init_TooltipChildren() {
+	return (init_TooltipChildren = __esmMin(() => {
+		init_styles_css();
+		init_objectSpread2();
+		FOCUSABLE_ELEMENTS = `
+  :is(
+    a[href],
+    button,
+    input:not([type="hidden"]),
+    select,
+    textarea,
+    [tabindex],
+    [contenteditable="true"],
+    details,
+    summary,
+    audio[controls],
+    video[controls]
+  )
+  :not([disabled])
+  :not([tabindex="-1"])
+`.replace(/\s+/g, "");
+		TooltipChildren = ({ children, tooltip, tooltipId, tabIndex = 0, relation, isTooltipVisible, containerFullHeight, containerFullWidth }) => {
+			const eventHandlers = tooltip.getReferenceProps();
+			const ariaAttributeName = relation === "label" ? "aria-labelledby" : "aria-describedby";
+			const ariaAttributeValue = isTooltipVisible ? tooltipId : null;
+			const tooltipWrapperRef = useRef(null);
+			useEffect(() => {
+				if (!tooltipWrapperRef.current) return;
+				const reference = tooltipWrapperRef.current.querySelector(FOCUSABLE_ELEMENTS) || tooltipWrapperRef.current;
+				const existingAriaValue = reference.getAttribute(ariaAttributeName);
+				tooltip.refs.setReference(reference);
+				const clearAriaAttribute = () => {
+					if (existingAriaValue) reference.setAttribute(ariaAttributeName, existingAriaValue);
+					else reference.removeAttribute(ariaAttributeName);
+				};
+				if (ariaAttributeValue) reference.setAttribute(ariaAttributeName, [existingAriaValue, ariaAttributeValue].join(" ").trim());
+				else clearAriaAttribute();
+				if (reference === tooltipWrapperRef.current && tooltipWrapperRef.current.tabIndex !== tabIndex) tooltipWrapperRef.current.tabIndex = tabIndex;
+				return clearAriaAttribute;
+			}, [
+				tooltip,
+				tabIndex,
+				ariaAttributeName,
+				ariaAttributeValue
+			]);
+			if (typeof children === "function") return children(_objectSpread2(_objectSpread2({}, eventHandlers), {}, {
+				[ariaAttributeName]: ariaAttributeValue,
+				ref: tooltip.refs.setReference
+			}));
+			return /* @__PURE__ */ jsx("div", _objectSpread2(_objectSpread2({
+				ref: tooltipWrapperRef,
+				className: tooltipStyle.childrenContainer({
+					fullHeight: containerFullHeight,
+					fullWidth: containerFullWidth
+				})
+			}, eventHandlers), {}, { children }));
+		};
+	}))();
+}
+
+//#endregion
+init_TooltipChildren();
+export { TooltipChildren, init_TooltipChildren };

package/dist/components/Tooltip/TooltipElement.d.ts

@@ -0,0 +1,8 @@
+import type { TooltipProps } from '.';
+import type { useTooltip } from './useTooltip';
+type TooltipElementProps = Pick<TooltipProps, 'id' | 'className' | 'style' | 'data-testid' | 'maxWidth' | 'text'> & {
+    tooltip: ReturnType<typeof useTooltip>;
+};
+export declare const TooltipElement: ({ tooltip, id, className, style, 'data-testid': dataTestId, maxWidth, text, }: TooltipElementProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=TooltipElement.d.ts.map

package/dist/components/Tooltip/TooltipElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipElement.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/TooltipElement.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,GAAG,CAAA;AACrC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAI9C,KAAK,mBAAmB,GAAG,IAAI,CAAC,YAAY,EAAE,IAAI,GAAG,WAAW,GAAG,OAAO,GAAG,aAAa,GAAG,UAAU,GAAG,MAAM,CAAC,GAAG;IAClH,OAAO,EAAE,UAAU,CAAC,OAAO,UAAU,CAAC,CAAA;CACvC,CAAA;AAED,eAAO,MAAM,cAAc,kFAQxB,mBAAmB,gCAyBrB,CAAA"}

package/dist/components/Tooltip/TooltipElement.js

@@ -0,0 +1,39 @@
+import { __esmMin, __name } from "../../_virtual/_rolldown/runtime.js";
+import _objectSpread2, { init_objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/objectSpread2.js";
+import { init_styles_css, tooltipStyle } from "./styles.css.js";
+import { init_styles_css as init_styles_css$1, visuallyHiddenStyle } from "../VisuallyHidden/styles.css.js";
+import { cn } from "@ultraviolet/utils";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/Tooltip/TooltipElement.tsx
+var TooltipElement;
+function init_TooltipElement() {
+	return (init_TooltipElement = __esmMin(() => {
+		init_styles_css$1();
+		init_styles_css();
+		init_objectSpread2();
+		TooltipElement = ({ tooltip, id, className, style, "data-testid": dataTestId, maxWidth, text }) => {
+			return /* @__PURE__ */ jsxs("div", _objectSpread2(_objectSpread2({}, tooltip.getFloatingProps()), {}, {
+				id,
+				className: cn(className, tooltipStyle.tooltip, tooltip.isMounted ? null : visuallyHiddenStyle.visuallyHidden, tooltip.status === "open" || tooltip.status === "close" ? tooltipStyle.animation[tooltip.status] : null),
+				"data-placement": tooltip.finalPlacement,
+				"data-testid": dataTestId,
+				ref: tooltip.refs.setFloating,
+				role: "tooltip",
+				style: _objectSpread2(_objectSpread2({}, tooltip.floatingStyles), {}, { maxWidth: typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth }, style),
+				children: [/* @__PURE__ */ jsx("div", {
+					className: tooltipStyle.arrow,
+					ref: tooltip.arrowRef,
+					style: tooltip.arrowStyle
+				}), /* @__PURE__ */ jsx("div", {
+					className: tooltipStyle.content,
+					children: text
+				})]
+			}));
+		};
+	}))();
+}
+
+//#endregion
+init_TooltipElement();
+export { TooltipElement, init_TooltipElement };