@simplexable/ui 0.1.0 → 0.2.1

package/dist/index.js

@@ -10205,9 +10205,23 @@ function h_(e, t, n) {
 function g_(e, t) {
 	return `${e}-option-${encodeURIComponent(String(t))}`;
 }
+function __(e) {
+	return String(e ?? "").trim().toLowerCase();
+}
+function v_(e, t) {
+	let n = __(t);
+	return n ? e.findIndex((e) => !e.disabled && __(e.label).startsWith(n)) : -1;
+}
+function y_(e, t, n) {
+	let r = __(n);
+	if (!r || !e.length) return -1;
+	for (let n = t + 1; n < e.length; n += 1) if (!e[n].disabled && __(e[n].label).startsWith(r)) return n;
+	for (let n = 0; n <= t; n += 1) if (!e[n].disabled && __(e[n].label).startsWith(r)) return n;
+	return -1;
+}
 //#endregion
 //#region src/components/Select/SelectOptionList.jsx
-function __({ activeIndex: e = -1, id: r, options: i, selectedValue: a, showSecondary: o = !1, onOptionClick: s }) {
+function b_({ activeIndex: e = -1, id: r, options: i, selectedValue: a, showSecondary: o = !1, onOptionClick: s }) {
 	return i.map((i, c) => {
 		let l = i.value === String(a ?? ""), u = c === e, d = i.secondary ? `${i.label}, ${i.secondary}` : i.label, f = g_(r, i.value);
 		return /* @__PURE__ */ n("li", {
@@ -10247,10 +10261,10 @@ function __({ activeIndex: e = -1, id: r, options: i, selectedValue: a, showSeco
 }
 //#endregion
 //#region src/components/Select/SelectTriggerRow.jsx
-function v_(...e) {
+function x_(...e) {
 	return e.filter(Boolean).join(" ");
 }
-function y_({ activeDescendant: e, ariaProps: r, clearSelection: i, disabled: a = !1, displayValue: o, handleTriggerKeyDown: s, id: c, isInteractive: l, isOpen: u, label: d, listboxId: f, placeholder: p, showClear: m, toggleMenu: h, triggerRef: g }) {
+function S_({ activeDescendant: e, ariaProps: r, clearSelection: i, disabled: a = !1, displayValue: o, handleTriggerKeyDown: s, id: c, isInteractive: l, isOpen: u, label: d, listboxId: f, placeholder: p, showClear: m, toggleMenu: h, triggerRef: g }) {
 	return l ? /* @__PURE__ */ n("div", {
 		className: "sx-select__control-row",
 		children: [
@@ -10260,7 +10274,7 @@ function y_({ activeDescendant: e, ariaProps: r, clearSelection: i, disabled: a
 				"aria-controls": u ? f : void 0,
 				"aria-expanded": u,
 				"aria-haspopup": "listbox",
-				className: v_("sx-field__control", "sx-select__trigger", !o && "sx-select__trigger--placeholder"),
+				className: x_("sx-field__control", "sx-select__trigger", !o && "sx-select__trigger--placeholder"),
 				id: c,
 				ref: g,
 				role: "combobox",
@@ -10286,7 +10300,7 @@ function y_({ activeDescendant: e, ariaProps: r, clearSelection: i, disabled: a
 			}),
 			/* @__PURE__ */ t("button", {
 				"aria-label": u ? `close ${d} options` : `open ${d} options`,
-				className: v_("sx-select__disclosure-button", u && "sx-select__disclosure-button--open"),
+				className: x_("sx-select__disclosure-button", u && "sx-select__disclosure-button--open"),
 				disabled: a,
 				tabIndex: -1,
 				type: "button",
@@ -10302,7 +10316,7 @@ function y_({ activeDescendant: e, ariaProps: r, clearSelection: i, disabled: a
 		className: "sx-select__static-row",
 		children: [/* @__PURE__ */ t("div", {
 			...r,
-			className: v_("sx-field__control", "sx-select__display", !o && "sx-select__display--placeholder"),
+			className: x_("sx-field__control", "sx-select__display", !o && "sx-select__display--placeholder"),
 			id: c,
 			children: o || p
 		}), a && /* @__PURE__ */ t("span", {
@@ -10317,8 +10331,8 @@ function y_({ activeDescendant: e, ariaProps: r, clearSelection: i, disabled: a
 }
 //#endregion
 //#region src/components/Select/useSearchableSingleSelect.js
-var b_ = 300;
-function x_({ debounceMs: e = b_, disabled: t = !1, initialResultsPolicy: n = "all", loadOptions: r, minQueryLength: i = 0, onBlur: a, onChange: o, onSearchQueryChange: s, readOnly: c = !1, resolved: l = !1, searchQuery: u, value: m = "", values: v }) {
+var C_ = 300;
+function w_({ debounceMs: e = C_, disabled: t = !1, initialResultsPolicy: n = "all", loadOptions: r, minQueryLength: i = 0, onBlur: a, onChange: o, onSearchQueryChange: s, readOnly: c = !1, resolved: l = !1, searchQuery: u, value: m = "", values: v }) {
 	let y = h(() => u_(v), [v]), b = f_(y, m) || (m ? {
 		label: String(m),
 		value: String(m)
@@ -10475,8 +10489,8 @@ function x_({ debounceMs: e = b_, disabled: t = !1, initialResultsPolicy: n = "a
 }
 //#endregion
 //#region src/components/Select/useSelectListboxLayout.js
-var S_ = 12, C_ = 4;
-function w_({ isOpen: e, listboxRef: t, triggerRef: n }) {
+var T_ = 12, E_ = 4;
+function D_({ isOpen: e, listboxRef: t, triggerRef: n }) {
 	let [r, i] = _(null);
 	return m(() => {
 		if (!e) {
@@ -10486,13 +10500,13 @@ function w_({ isOpen: e, listboxRef: t, triggerRef: n }) {
 		let r = n.current?.closest(".sx-field__frame"), a = t.current;
 		if (!r || !a || typeof window > "u") return;
 		let o = r.getBoundingClientRect(), s = Math.max(o.width, window.innerWidth - 24);
-		a.style.visibility = "hidden", a.style.left = "0", a.style.right = "auto", a.style.top = "100%", a.style.bottom = "auto", a.style.marginTop = `${C_}px`, a.style.marginBottom = "0", a.style.minWidth = `${o.width}px`, a.style.width = "max-content", a.style.maxWidth = `${s}px`;
-		let c = a.getBoundingClientRect(), l = o.left + c.width > window.innerWidth - S_, u = window.innerHeight - S_ - o.bottom - C_, d = o.top - S_ - C_, f = c.height > u && d > u, p = Math.max(f ? d : u, 0);
+		a.style.visibility = "hidden", a.style.left = "0", a.style.right = "auto", a.style.top = "100%", a.style.bottom = "auto", a.style.marginTop = `${E_}px`, a.style.marginBottom = "0", a.style.minWidth = `${o.width}px`, a.style.width = "max-content", a.style.maxWidth = `${s}px`;
+		let c = a.getBoundingClientRect(), l = o.left + c.width > window.innerWidth - T_, u = window.innerHeight - T_ - o.bottom - E_, d = o.top - T_ - E_, f = c.height > u && d > u, p = Math.max(f ? d : u, 0);
 		a.style.visibility = "", i({
 			bottom: f ? "100%" : "auto",
 			left: l ? "auto" : "0",
-			marginBottom: f ? `${C_}px` : "0",
-			marginTop: f ? "0" : `${C_}px`,
+			marginBottom: f ? `${E_}px` : "0",
+			marginTop: f ? "0" : `${E_}px`,
 			maxHeight: `${p}px`,
 			maxWidth: `${s}px`,
 			minWidth: `${o.width}px`,
@@ -10508,8 +10522,8 @@ function w_({ isOpen: e, listboxRef: t, triggerRef: n }) {
 }
 //#endregion
 //#region src/components/Select/SearchableSingleSelect.jsx
-function T_({ className: e = "", clearable: r = !1, debounceMs: i, disabled: a = !1, errorMessage: o, fieldState: s = "neutral", helperText: c, id: l, initialResultsPolicy: u = "all", label: d, loadOptions: f, minQueryLength: m = 0, onBlur: h, onChange: g, onSearchQueryChange: _, placeholder: v = "select…", readOnly: y = !1, required: b = !1, resolved: x = !1, searchPlaceholder: S = "search…", searchQuery: C, value: w = "", values: T }) {
-	let E = p(), D = l || `sx-searchable-select-${E}`, O = x_({
+function O_({ className: e = "", clearable: r = !1, debounceMs: i, disabled: a = !1, errorMessage: o, fieldState: s = "neutral", helperText: c, id: l, initialResultsPolicy: u = "all", label: d, loadOptions: f, minQueryLength: m = 0, onBlur: h, onChange: g, onSearchQueryChange: _, placeholder: v = "select…", readOnly: y = !1, required: b = !1, resolved: x = !1, searchPlaceholder: S = "search…", searchQuery: C, value: w = "", values: T }) {
+	let E = p(), D = l || `sx-searchable-select-${E}`, O = w_({
 		debounceMs: i,
 		disabled: a,
 		initialResultsPolicy: u,
@@ -10523,7 +10537,7 @@ function T_({ className: e = "", clearable: r = !1, debounceMs: i, disabled: a =
 		searchQuery: C,
 		value: w,
 		values: T
-	}), k = w_({
+	}), k = D_({
 		isOpen: O.isOpen,
 		listboxRef: O.panelRef,
 		triggerRef: O.triggerRef
@@ -10576,7 +10590,7 @@ function T_({ className: e = "", clearable: r = !1, debounceMs: i, disabled: a =
 				tabIndex: O.focusRegion === "list" ? 0 : -1,
 				onKeyDown: O.handleListboxKeyDown,
 				onMouseDown: (e) => e.stopPropagation(),
-				children: /* @__PURE__ */ t(__, {
+				children: /* @__PURE__ */ t(b_, {
 					activeIndex: O.activeIndex,
 					id: O.listboxId,
 					options: O.resultOptions,
@@ -10604,7 +10618,7 @@ function T_({ className: e = "", clearable: r = !1, debounceMs: i, disabled: a =
 		readOnly: y,
 		required: b,
 		resolved: x,
-		children: (e) => /* @__PURE__ */ t(y_, {
+		children: (e) => /* @__PURE__ */ t(S_, {
 			activeDescendant: void 0,
 			ariaProps: e,
 			clearSelection: O.clearSelection,
@@ -10625,13 +10639,20 @@ function T_({ className: e = "", clearable: r = !1, debounceMs: i, disabled: a =
 }
 //#endregion
 //#region src/components/Select/useSingleSelect.js
-function E_({ disabled: e = !1, onBlur: t, onChange: n, readOnly: r = !1, resolved: i = !1, value: a = "", values: o }) {
+function k_(e) {
+	return e.ctrlKey || e.metaKey || e.altKey ? !1 : e.key.length === 1;
+}
+function A_({ disabled: e = !1, onBlur: t, onChange: n, readOnly: r = !1, resolved: i = !1, value: a = "", values: o }) {
 	let s = h(() => u_(o), [o]), c = f_(s, a) || (a ? {
 		label: String(a),
 		value: String(a)
-	} : null), l = !e && !r && !i, [u, m] = _(!1), [v, y] = _(-1), b = g(null), x = g(null), S = p(), C = d(({ focusTrigger: e = !0, invokeBlur: n = !1 } = {}) => {
-		m(!1), y(-1), e && b.current?.focus(), n && t?.();
-	}, [t]), w = d((e = -1) => {
+	} : null), l = !e && !r && !i, [u, m] = _(!1), [v, y] = _(-1), b = g(null), x = g(null), S = g(""), C = g(null), w = p(), T = d(() => {
+		S.current = "", C.current != null && (window.clearTimeout(C.current), C.current = null);
+	}, []), E = d(() => {
+		C.current != null && window.clearTimeout(C.current), C.current = window.setTimeout(T, 700);
+	}, [T]), D = d(({ focusTrigger: e = !0, invokeBlur: n = !1 } = {}) => {
+		T(), m(!1), y(-1), e && b.current?.focus(), n && t?.();
+	}, [t, T]), O = d((e = -1) => {
 		if (!l) return;
 		let t = s.findIndex((e) => e.value === String(a)), n = e >= 0 ? e : t >= 0 && !s[t].disabled ? t : p_(s);
 		y(n), m(!0);
@@ -10639,77 +10660,100 @@ function E_({ disabled: e = !1, onBlur: t, onChange: n, readOnly: r = !1, resolv
 		l,
 		s,
 		a
-	]), T = d((e) => {
-		!e || e.disabled || (n?.(e.value), C({ invokeBlur: !0 }));
-	}, [C, n]), E = d(() => {
-		l && (u ? C() : w());
+	]), k = d((e) => {
+		!e || e.disabled || (n?.(e.value), D({ invokeBlur: !0 }));
+	}, [D, n]), A = d(() => {
+		l && (u ? D() : O());
 	}, [
-		C,
+		D,
 		l,
 		u,
-		w
-	]), D = d((e) => {
-		e.preventDefault(), e.stopPropagation(), l && (n?.(""), C({ invokeBlur: !0 }));
+		O
+	]), j = d((e) => {
+		e.preventDefault(), e.stopPropagation(), l && (n?.(""), D({ invokeBlur: !0 }));
 	}, [
-		C,
+		D,
 		l,
 		n
-	]), O = d((e) => {
-		if (l && [
-			"ArrowDown",
-			"ArrowUp",
-			"End",
-			"Enter",
-			"Escape",
-			"Home",
-			" "
-		].includes(e.key) && !(e.key === "Escape" && !u)) {
-			if (e.preventDefault(), e.stopPropagation(), !u) {
-				e.key === "ArrowUp" ? w(m_(s)) : e.key !== "Escape" && e.key !== "Home" && e.key !== "End" && w();
+	]), ee = d((e, t, n) => {
+		let r = e.toLowerCase(), i = S.current, a = i.length === 1 && i === r, o = -1;
+		if (a) {
+			let e = v_(s, r), i = e - 1;
+			n && t >= 0 && (i = __(s[t]?.label).startsWith(r) ? t : e - 1), o = y_(s, i, r);
+		} else {
+			let e = i + r;
+			S.current = e, o = v_(s, e);
+		}
+		return E(), o;
+	}, [s, E]), te = d((e) => {
+		if (l) {
+			if (k_(e)) {
+				e.preventDefault(), e.stopPropagation();
+				let t = ee(e.key, v, u);
+				if (t < 0) return;
+				u ? y(t) : O(t);
 				return;
 			}
-			e.key === "ArrowDown" && y((e) => h_(s, e, 1)), e.key === "ArrowUp" && y((e) => h_(s, e, -1)), e.key === "Home" && y(p_(s)), e.key === "End" && y(m_(s)), (e.key === "Enter" || e.key === " ") && v >= 0 && T(s[v]), e.key === "Escape" && C({ invokeBlur: !0 });
+			if ([
+				"ArrowDown",
+				"ArrowUp",
+				"End",
+				"Enter",
+				"Escape",
+				"Home",
+				" "
+			].includes(e.key) && !(e.key === "Escape" && !u)) {
+				if (e.preventDefault(), e.stopPropagation(), T(), !u) {
+					e.key === "ArrowUp" ? O(m_(s)) : e.key !== "Escape" && e.key !== "Home" && e.key !== "End" && O();
+					return;
+				}
+				e.key === "ArrowDown" && y((e) => h_(s, e, 1)), e.key === "ArrowUp" && y((e) => h_(s, e, -1)), e.key === "Home" && y(p_(s)), e.key === "End" && y(m_(s)), (e.key === "Enter" || e.key === " ") && v >= 0 && k(s[v]), e.key === "Escape" && D({ invokeBlur: !0 });
+			}
 		}
 	}, [
 		v,
-		C,
+		ee,
+		D,
 		l,
 		u,
-		w,
+		O,
 		s,
-		T
+		T,
+		k
 	]);
 	return f(() => {
 		if (!u) return;
 		let e = (e) => {
-			(b.current?.closest(".sx-field"))?.contains(e.target) || C({
+			(b.current?.closest(".sx-field"))?.contains(e.target) || D({
 				focusTrigger: !1,
 				invokeBlur: !0
 			});
 		};
 		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-	}, [C, u]), f(() => {
+	}, [D, u]), f(() => {
 		!u || v < 0 || x.current?.querySelector(`[data-sx-select-option-index="${v}"]`)?.scrollIntoView?.({ block: "nearest" });
-	}, [v, u]), {
-		activeDescendant: u && v >= 0 ? g_(S, s[v]?.value) : void 0,
+	}, [v, u]), f(() => () => {
+		C.current != null && window.clearTimeout(C.current);
+	}, []), {
+		activeDescendant: u && v >= 0 ? g_(w, s[v]?.value) : void 0,
 		activeIndex: v,
-		clearSelection: D,
-		handleOptionClick: T,
-		handleTriggerKeyDown: O,
+		clearSelection: j,
+		handleOptionClick: k,
+		handleTriggerKeyDown: te,
 		isInteractive: l,
 		isOpen: u,
-		listboxId: S,
+		listboxId: w,
 		listboxRef: x,
 		options: s,
 		selectedOption: c,
-		toggleMenu: E,
+		toggleMenu: A,
 		triggerRef: b
 	};
 }
 //#endregion
 //#region src/components/Select/SingleSelect.jsx
-function D_({ className: e = "", clearable: n = !1, disabled: r = !1, errorMessage: i, fieldState: a = "neutral", helperText: o, id: s, label: c, onBlur: l, onChange: u, placeholder: d = "select…", readOnly: f = !1, required: m = !1, resolved: h = !1, value: g = "", values: _ }) {
-	let v = p(), y = s || `sx-select-${v}`, b = E_({
+function j_({ className: e = "", clearable: n = !1, disabled: r = !1, errorMessage: i, fieldState: a = "neutral", helperText: o, id: s, label: c, onBlur: l, onChange: u, placeholder: d = "select…", readOnly: f = !1, required: m = !1, resolved: h = !1, value: g = "", values: _ }) {
+	let v = p(), y = s || `sx-select-${v}`, b = A_({
 		disabled: r,
 		onBlur: l,
 		onChange: u,
@@ -10717,7 +10761,7 @@ function D_({ className: e = "", clearable: n = !1, disabled: r = !1, errorMessa
 		resolved: h,
 		value: g,
 		values: _
-	}), x = w_({
+	}), x = D_({
 		isOpen: b.isOpen,
 		listboxRef: b.listboxRef,
 		triggerRef: b.triggerRef
@@ -10730,7 +10774,7 @@ function D_({ className: e = "", clearable: n = !1, disabled: r = !1, errorMessa
 		style: x || void 0,
 		tabIndex: -1,
 		onKeyDown: b.handleTriggerKeyDown,
-		children: /* @__PURE__ */ t(__, {
+		children: /* @__PURE__ */ t(b_, {
 			activeIndex: b.activeIndex,
 			id: b.listboxId,
 			options: b.options,
@@ -10751,7 +10795,7 @@ function D_({ className: e = "", clearable: n = !1, disabled: r = !1, errorMessa
 		readOnly: f,
 		required: m,
 		resolved: h,
-		children: (e) => /* @__PURE__ */ t(y_, {
+		children: (e) => /* @__PURE__ */ t(S_, {
 			activeDescendant: b.isOpen && b.activeIndex >= 0 ? `${b.listboxId}-option-${encodeURIComponent(b.options[b.activeIndex]?.value)}` : void 0,
 			ariaProps: e,
 			clearSelection: b.clearSelection,
@@ -10772,7 +10816,7 @@ function D_({ className: e = "", clearable: n = !1, disabled: r = !1, errorMessa
 }
 //#endregion
 //#region src/components/Dialog/SuccessDialog.jsx
-var O_ = [
+var M_ = [
 	"a[href]",
 	"area[href]",
 	"button:not([disabled])",
@@ -10782,7 +10826,7 @@ var O_ = [
 	"[contenteditable=\"true\"]",
 	"[tabindex]:not([tabindex=\"-1\"])"
 ].join(",");
-function k_({ children: e, autoClose: r = !1, className: i = "", closeLabel: a = "close", delay: o = 5, onClose: s, open: c = !1, preview: l = !1, title: u }) {
+function N_({ children: e, autoClose: r = !1, className: i = "", closeLabel: a = "close", delay: o = 5, onClose: s, open: c = !1, preview: l = !1, title: u }) {
 	let d = p(), m = g(null), h = g(null), _ = g(s);
 	if (_.current = s, f(() => {
 		if (!c || l) return;
@@ -10796,7 +10840,7 @@ function k_({ children: e, autoClose: r = !1, className: i = "", closeLabel: a =
 				return;
 			}
 			if (t.key !== "Tab" || !e) return;
-			let n = [...e.querySelectorAll(O_)];
+			let n = [...e.querySelectorAll(M_)];
 			if (n.length === 0) {
 				t.preventDefault(), e.focus();
 				return;
@@ -10874,7 +10918,7 @@ function k_({ children: e, autoClose: r = !1, className: i = "", closeLabel: a =
 }
 //#endregion
 //#region src/components/TextInput/TextInput.jsx
-var A_ = u(function({ label: e, value: n, onChange: r, onBlur: i, placeholder: a, required: o = !1, disabled: s = !1, readOnly: c = !1, error: l = !1, errorMessage: u, helperText: d, resolved: f = !1, fieldState: m = "neutral", status: h, isOpen: g = !1, type: _ = "text", className: v = "", id: y, ...b }, x) {
+var P_ = u(function({ label: e, value: n, onChange: r, onBlur: i, placeholder: a, required: o = !1, disabled: s = !1, readOnly: c = !1, error: l = !1, errorMessage: u, helperText: d, resolved: f = !1, fieldState: m = "neutral", status: h, isOpen: g = !1, type: _ = "text", className: v = "", id: y, ...b }, x) {
 	let S = p(), C = y || `sx-text-input-${S}`, w = typeof l == "string" ? l : u, T = !!l || !!w, E = m === "neutral" ? h : m;
 	return /* @__PURE__ */ t(ge, {
 		className: v,
@@ -10906,110 +10950,189 @@ var A_ = u(function({ label: e, value: n, onChange: r, onBlur: i, placeholder: a
 			value: n
 		})
 	});
-});
+}), F_ = 1.2, I_ = 16, L_ = "data-sx-textarea-measure", R_ = /* @__PURE__ */ "borderBottomStyle.borderBottomWidth.borderLeftStyle.borderLeftWidth.borderRightStyle.borderRightWidth.borderTopStyle.borderTopWidth.boxSizing.fontFamily.fontSize.fontStretch.fontStyle.fontVariant.fontWeight.letterSpacing.lineHeight.paddingBottom.paddingLeft.paddingRight.paddingTop.tabSize.textIndent.textTransform.whiteSpace.wordBreak.wordSpacing".split(".");
+function z_(e) {
+	let t = Number.parseFloat(e);
+	return Number.isFinite(t) ? t : 0;
+}
+function B_(e) {
+	return H_(e.fontSize, I_);
+}
+function V_(e, t = B_(e)) {
+	let n = e.lineHeight;
+	if (!n || n === "normal") return t * F_;
+	let r = z_(n);
+	return r <= 0 ? t * F_ : n.endsWith("px") ? r : n.endsWith("%") ? r / 100 * t : n.endsWith("rem") ? r * I_ : n.endsWith("em") || /^-?\d+(\.\d+)?$/.test(n.trim()) ? r * t : r;
+}
+function H_(e, t = I_) {
+	if (!e) return 0;
+	let n = z_(e);
+	return n === 0 ? 0 : e.endsWith("px") ? n : e.endsWith("rem") ? n * I_ : e.endsWith("em") ? n * t : e.endsWith("%") ? n / 100 * t : n;
+}
+function U_(e) {
+	let t = getComputedStyle(e), n = B_(t), r = H_(t.paddingTop, n) + H_(t.paddingBottom, n);
+	return {
+		border: H_(t.borderTopWidth, n) + H_(t.borderBottomWidth, n),
+		fontSize: n,
+		isBorderBox: t.boxSizing === "border-box",
+		padding: r,
+		rowHeight: V_(t, n),
+		style: t
+	};
+}
+function W_(e, t) {
+	let n = getComputedStyle(e), r = t.style;
+	r.width = `${e.getBoundingClientRect().width}px`, R_.forEach((e) => {
+		r[e] = n[e];
+	});
+}
+function G_(e) {
+	let t = e.ownerDocument, n = t.querySelector(`textarea[${L_}]`);
+	return n || (n = t.createElement("textarea"), n.setAttribute(L_, ""), n.setAttribute("aria-hidden", "true"), n.setAttribute("tabindex", "-1"), n.readOnly = !0, n.style.position = "absolute", n.style.top = "-9999px", n.style.left = "-9999px", n.style.visibility = "hidden", n.style.pointerEvents = "none", n.style.overflow = "hidden", n.style.resize = "none", t.body.appendChild(n)), W_(e, n), n;
+}
+function K_(e, t) {
+	let n = G_(e), r = n.style.height, i = n.style.overflowY;
+	n.style.overflowY = "hidden", n.style.height = "0px", n.value = "x";
+	let a = n.scrollHeight;
+	n.value = "x\nx";
+	let o = n.scrollHeight;
+	n.value = "", n.style.height = r, n.style.overflowY = i;
+	let s = o - a;
+	return s > 0 ? s : t.rowHeight;
+}
+function q_(e, t = U_(e)) {
+	return K_(e, t);
+}
+function J_(e, t) {
+	return t.isBorderBox ? e + t.border : e - t.padding;
+}
+function Y_(e, t, n) {
+	let r = t * e;
+	return n.isBorderBox ? r + n.padding + n.border : r;
+}
+function X_(e, t) {
+	if (e == null || e === "") return;
+	let n = Number(e);
+	if (!Number.isInteger(n) || n < 1) throw Error("TextArea: maxRows must be a positive integer.");
+	if (n < t) throw Error(`TextArea: maxRows (${n}) must not be less than minRows (${t}).`);
+	return n;
+}
+function Z_(e, t) {
+	let { selectionDirection: n, selectionEnd: r, selectionStart: i } = e;
+	if (t(), document.activeElement === e) try {
+		e.setSelectionRange(i, r, n);
+	} catch {}
+}
+function Q_(e, t, n) {
+	Z_(e, () => {
+		let r = U_(e), i = q_(e, r), a = Y_(t, i, r), o = n == null ? null : Y_(n, i, r);
+		e.style.overflowY = "hidden", e.style.height = "0px";
+		let s = J_(e.scrollHeight, r), c = Math.max(s, a), l = o != null && c > o, u = l ? o : c, d = l ? "auto" : "hidden";
+		e.style.minHeight = `${a}px`, e.style.maxHeight = o == null ? "" : `${o}px`, e.style.height = `${u}px`, e.style.overflowY = d;
+	});
+}
 //#endregion
 //#region src/components/Field/useAutoResizeTextarea.js
-function j_(e, t = 2) {
-	let n = g(null), r = g(null), i = d(() => {
-		typeof requestAnimationFrame > "u" || (r.current !== null && typeof cancelAnimationFrame < "u" && cancelAnimationFrame(r.current), r.current = requestAnimationFrame(() => {
-			r.current = null;
-			let e = n.current;
-			if (!e) return;
-			e.style.height = "0px";
-			let t = Math.max(e.scrollHeight, e.getBoundingClientRect().height, Number.parseFloat(getComputedStyle(e).minHeight) || 0);
-			e.style.height = `${Math.max(t, 0)}px`;
-		}));
-	}, []);
+function $_(e, t = 2, n) {
+	let r = g(null), i = g(null), a = d(() => {
+		let e = r.current;
+		e && Q_(e, t, n);
+	}, [n, t]);
 	return m(() => {
-		i();
+		a();
 	}, [
+		n,
 		t,
-		i,
+		a,
 		e
 	]), f(() => {
-		let e = n.current;
+		let e = r.current;
 		if (!e || typeof ResizeObserver > "u") return;
-		let t = e.getBoundingClientRect().width, r = new ResizeObserver((e) => {
+		let t = e.getBoundingClientRect().width, n = new ResizeObserver((e) => {
 			let n = e[0]?.contentRect.width;
-			n !== t && (t = n, i());
+			if (n !== t) {
+				if (t = n, typeof requestAnimationFrame > "u") {
+					a();
+					return;
+				}
+				i.current !== null && typeof cancelAnimationFrame < "u" && cancelAnimationFrame(i.current), i.current = requestAnimationFrame(() => {
+					i.current = null, a();
+				});
+			}
 		});
-		return r.observe(e), () => r.disconnect();
-	}, [i]), f(() => () => {
-		r.current !== null && typeof cancelAnimationFrame < "u" && cancelAnimationFrame(r.current);
+		return n.observe(e), () => n.disconnect();
+	}, [a]), f(() => () => {
+		i.current !== null && typeof cancelAnimationFrame < "u" && cancelAnimationFrame(i.current);
 	}, []), {
-		syncHeight: i,
-		textareaRef: n
+		syncHeight: a,
+		textareaRef: r
 	};
 }
 //#endregion
 //#region src/components/TextArea/TextArea.jsx
-var M_ = u(function({ label: e, value: n, onChange: r, onBlur: i, onInput: a, placeholder: o, required: s = !1, disabled: c = !1, readOnly: l = !1, error: u = !1, errorMessage: d, helperText: f, resolved: m = !1, fieldState: h = "neutral", status: g, isOpen: _ = !1, minRows: v = 2, className: y = "", id: b, ...x }, S) {
-	let C = p(), w = b || `sx-text-area-${C}`, T = Number.isFinite(Number(v)) && Number(v) > 0 ? Number(v) : 2, { syncHeight: E, textareaRef: D } = j_(n, T), O = typeof u == "string" ? u : d, k = !!u || !!O, A = h === "neutral" ? g : h, j = (e) => {
-		D.current = e, typeof S == "function" ? S(e) : S && (S.current = e);
-	}, ee = (e) => {
-		a?.(e), E();
+var ev = u(function({ label: e, value: n, onChange: r, onBlur: i, onInput: a, placeholder: o, required: s = !1, disabled: c = !1, readOnly: l = !1, error: u = !1, errorMessage: d, helperText: f, resolved: m = !1, fieldState: h = "neutral", status: g, isOpen: _ = !1, minRows: v = 2, maxRows: y, className: b = "", id: x, ...S }, C) {
+	let w = p(), T = x || `sx-text-area-${w}`, E = Number.isFinite(Number(v)) && Number(v) > 0 ? Number(v) : 2, { syncHeight: D, textareaRef: O } = $_(n, E, X_(y, E)), k = typeof u == "string" ? u : d, A = !!u || !!k, j = h === "neutral" ? g : h, ee = (e) => {
+		O.current = e, typeof C == "function" ? C(e) : C && (C.current = e);
+	}, te = (e) => {
+		a?.(e), D();
 	};
 	return /* @__PURE__ */ t(ge, {
-		className: y,
+		className: b,
 		disabled: c,
-		errorMessage: O,
-		fieldState: A,
+		errorMessage: k,
+		fieldState: j,
 		helperText: f,
-		id: w,
-		invalid: k,
+		id: T,
+		invalid: A,
 		isOpen: _,
 		label: e,
 		readOnly: l,
 		required: s,
 		resolved: m,
 		children: (e) => /* @__PURE__ */ t("textarea", {
-			...x,
+			...S,
 			...e,
-			"aria-busy": A === "validating" || void 0,
+			"aria-busy": j === "validating" || void 0,
 			className: "sx-field__control sx-field__control--textarea sx-text-area__control",
 			disabled: c,
-			id: w,
+			id: T,
 			onBlur: i,
 			onChange: r,
-			onInput: ee,
+			onInput: te,
 			placeholder: o,
 			readOnly: l || m,
-			ref: j,
+			ref: ee,
 			required: s,
 			rows: 1,
-			style: {
-				minHeight: `${1.35 * T}rem`,
-				...x.style
-			},
 			value: n
 		})
 	});
-}), N_ = /^([01]\d|2[0-3]):([0-5]\d)$/, P_ = [
+}), tv = /^([01]\d|2[0-3]):([0-5]\d)$/, nv = [
 	2e3,
 	0,
 	1
 ];
-function F_(e) {
+function rv(e) {
 	if (typeof e != "string") return null;
-	let t = N_.exec(e);
+	let t = tv.exec(e);
 	return t ? {
 		hour: Number(t[1]),
 		minute: Number(t[2])
 	} : null;
 }
-function I_(e) {
-	let t = F_(e);
-	return t ? new Date(P_[0], P_[1], P_[2], t.hour, t.minute) : null;
+function iv(e) {
+	let t = rv(e);
+	return t ? new Date(nv[0], nv[1], nv[2], t.hour, t.minute) : null;
 }
-function L_(e) {
+function av(e) {
 	return !(e instanceof Date) || Number.isNaN(e.getTime()) ? null : `${String(e.getHours()).padStart(2, "0")}:${String(e.getMinutes()).padStart(2, "0")}`;
 }
-function R_(e) {
-	let t = F_(e);
+function ov(e) {
+	let t = rv(e);
 	return t ? t.hour * 60 + t.minute : null;
 }
-function z_(e, t = "24h") {
-	let n = F_(e);
+function sv(e, t = "24h") {
+	let n = rv(e);
 	if (!n) return "";
 	if (t !== "12h") return `${String(n.hour).padStart(2, "0")}:${String(n.minute).padStart(2, "0")}`;
 	let r = n.hour >= 12 ? "PM" : "AM";
@@ -11017,12 +11140,12 @@ function z_(e, t = "24h") {
 }
 //#endregion
 //#region src/components/Picker/TimePicker.jsx
-function B_({ className: e = "", clearable: r = !1, disabled: i = !1, errorMessage: a, fieldState: o = "neutral", helperText: s, id: c, label: l, maxTime: u = null, minTime: f = null, onBlur: m, onChange: h, placeholder: g = "select time", readOnly: v = !1, required: y = !1, resolved: b = !1, timeFormat: x = "24h", timeInterval: S = 15, timeIntervals: C, value: w = null }) {
-	let T = p(), E = c || `sx-time-picker-${T}`, [D, O] = _(!1), k = !i && !v && !b, A = F_(w), j = I_(w), ee = I_(f), te = I_(u), ne = z_(w, x), re = d((e) => {
-		O(!1), h?.(e ? L_(e) : null);
+function cv({ className: e = "", clearable: r = !1, disabled: i = !1, errorMessage: a, fieldState: o = "neutral", helperText: s, id: c, label: l, maxTime: u = null, minTime: f = null, onBlur: m, onChange: h, placeholder: g = "select time", readOnly: v = !1, required: y = !1, resolved: b = !1, timeFormat: x = "24h", timeInterval: S = 15, timeIntervals: C, value: w = null }) {
+	let T = p(), E = c || `sx-time-picker-${T}`, [D, O] = _(!1), k = !i && !v && !b, A = rv(w), j = iv(w), ee = iv(f), te = iv(u), ne = sv(w, x), re = d((e) => {
+		O(!1), h?.(e ? av(e) : null);
 	}, [h]), ie = d((e) => {
 		e.preventDefault(), e.stopPropagation(), k && h?.(null);
-	}, [k, h]), ae = R_(f), oe = R_(u), se = d((e) => {
+	}, [k, h]), ae = ov(f), oe = ov(u), se = d((e) => {
 		if (!e || !A) return !0;
 		let t = e.getHours() * 60 + e.getMinutes();
 		return (ae == null || t >= ae) && (oe == null || t <= oe);
@@ -11103,7 +11226,7 @@ function B_({ className: e = "", clearable: r = !1, disabled: i = !1, errorMessa
 }
 //#endregion
 //#region src/components/Alert/Warning.jsx
-function V_({ autoClear: e = !1, autoClearInterval: r = 30, children: i, className: a = "", onClose: o, showClose: s = !1, title: c }) {
+function lv({ autoClear: e = !1, autoClearInterval: r = 30, children: i, className: a = "", onClose: o, showClose: s = !1, title: c }) {
 	let [l, u] = _(!0), d = () => {
 		u(!1), o?.();
 	};
@@ -11148,4 +11271,4 @@ function V_({ autoClear: e = !1, autoClearInterval: r = 30, children: i, classNa
 	}) : null;
 }
 //#endregion
-export { ie as Badge, ne as Button, et as CheckboxField, ut as CheckboxGroup, Yl as DatePicker, l_ as DateTimePicker, ge as FieldShell, dt as InfoAlert, ft as RadioGroup, T_ as SearchableSingleSelect, D_ as SingleSelect, k_ as SuccessDialog, M_ as TextArea, A_ as TextInput, B_ as TimePicker, V_ as Warning };
+export { ie as Badge, ne as Button, et as CheckboxField, ut as CheckboxGroup, Yl as DatePicker, l_ as DateTimePicker, ge as FieldShell, dt as InfoAlert, ft as RadioGroup, O_ as SearchableSingleSelect, j_ as SingleSelect, N_ as SuccessDialog, ev as TextArea, P_ as TextInput, cv as TimePicker, lv as Warning };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simplexable/ui",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "description": "Reusable React UI components and styles for Simplexable applications",
   "type": "module",
   "files": [
@@ -16,6 +16,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
+    "test": "vitest run",
     "prepublishOnly": "npm run build"
   },
   "peerDependencies": {
@@ -26,10 +27,15 @@
     "access": "restricted"
   },
   "devDependencies": {
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.3",
     "@vitejs/plugin-react": "^6.1.1",
+    "jsdom": "^29.1.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "vite": "^8.2.2"
+    "vite": "^8.2.2",
+    "vitest": "^4.1.11"
   },
   "dependencies": {
     "@phosphor-icons/react": "^2.1.10",