@vjdesigns/vjdesigns-ui 2.3.0 → 2.5.0

package/dist/components/forms/TagInput/TagInput.mjs

@@ -1,25 +1,26 @@
+"use client";
 import { useControllableState as e } from "../../../hooks/useControllableState.mjs";
-import { useLocale as t } from "../../utilities/LocaleProvider/LocaleProvider.mjs";
+import { cx as t } from "../../../utils/cx.mjs";
 import { assignRef as n } from "../../../utils/refs.mjs";
-import { cx as r } from "../../../utils/cx.mjs";
-import { VisuallyHidden as i } from "../../utilities/VisuallyHidden/VisuallyHidden.mjs";
-import { ErrorIcon as a } from "../../primitives/Icon/icons.mjs";
+import { Chip as r } from "../../data-display/Chip/Chip.mjs";
+import { ErrorIcon as i } from "../../primitives/Icon/icons.mjs";
+import { VisuallyHidden as a } from "../../utilities/VisuallyHidden/VisuallyHidden.mjs";
 import { useFieldContext as o, useFieldControl as s } from "../Field/FieldContext.mjs";
-import { Chip as c } from "../../data-display/Chip/Chip.mjs";
-import l from "./TagInput.module.css.mjs";
-import { useCallback as ee, useEffect as u, useId as te, useLayoutEffect as ne, useRef as d, useState as f } from "react";
-import { jsx as p, jsxs as m } from "react/jsx-runtime";
-//#region src/components/forms/TagInput/TagInput.tsx
-var re = {
+import c from "./TagInput.module.css.mjs";
+import { useLocale as ee } from "../../utilities/LocaleProvider/LocaleProvider.mjs";
+import { useCallback as te, useEffect as l, useId as ne, useLayoutEffect as re, useRef as u, useState as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+// src/components/forms/TagInput/TagInput.tsx
+var ie = {
 	sm: "sm",
 	md: "md",
 	lg: "lg"
-}, ie = {
-	sm: l.sm,
-	md: l.md,
-	lg: l.lg
-}, h = (e) => e.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-function g(e, t) {
+}, ae = {
+	sm: c.sm,
+	md: c.md,
+	lg: c.lg
+}, m = (e) => e.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+function h(e, t) {
 	return {
 		",": t.comma,
 		";": t.semicolon,
@@ -28,284 +29,277 @@ function g(e, t) {
 		"	": t.tab
 	}[e] ?? t.other(e);
 }
-function ae(e, t, n, r) {
+function oe(e, t, n, r) {
 	let i = [
 		n.keys.enter,
 		...t ? [n.keys.tab] : [],
-		...e.map((e) => g(e, n.keys))
+		...e.map((e) => h(e, n.keys))
 	], a = Intl.ListFormat, o = a ? new a(r, { type: "disjunction" }).format(i) : i.join(", ");
 	return n.instructions(o);
 }
-var _ = ({ value: g, defaultValue: _, onValueChange: oe, inputValue: se, defaultInputValue: v, onInputValueChange: ce, delimiters: y = [","], addOnTab: le = !1, addOnBlur: ue = !1, allowDuplicates: de = !1, maxTags: b, validate: fe, transform: pe, size: me, disabled: he, readOnly: ge, invalid: _e, required: ve, placeholder: ye, name: be, chipVariant: xe, chipTone: Se, removeLabel: Ce, tagListLabel: x, instructions: we, messages: Te, className: Ee, inputClassName: De, style: Oe, ref: S, id: ke, onChange: Ae, onKeyDown: je, onPaste: Me, onBlur: Ne, form: C, "aria-describedby": Pe, "aria-labelledby": w, ...T }) => {
-	let { messages: E, locale: Fe } = t(), Ie = Ce ?? E.tagInput.remove, D = {
-		...E.tagInput,
-		...Te
-	}, O = te(), k = `${O}-instructions`, A = `${O}-error`, j = `${O}-max`, M = o(), [N, P] = e({
-		value: g,
-		defaultValue: _ ?? [],
-		onChange: oe
-	}), [F, I] = e({
-		value: se,
-		defaultValue: v ?? "",
-		onChange: ce
-	}), [L, R] = f(null), [Le, Re] = f(null), [z, ze] = f(null), [Be, Ve] = f({
+var g = ({ value: h, defaultValue: g, onValueChange: se, inputValue: ce, defaultInputValue: _, onInputValueChange: le, delimiters: v = [","], addOnTab: ue = !1, addOnBlur: de = !1, allowDuplicates: fe = !1, maxTags: y, validate: pe, transform: me, size: he, disabled: ge, readOnly: _e, invalid: ve, required: ye, placeholder: be, name: xe, chipVariant: Se, chipTone: Ce, removeLabel: we, tagListLabel: b, instructions: Te, messages: Ee, className: De, inputClassName: Oe, style: ke, ref: x, id: Ae, onChange: je, onKeyDown: Me, onPaste: Ne, onBlur: Pe, form: S, "aria-describedby": Fe, "aria-labelledby": C, ...w }) => {
+	let { messages: T, locale: Ie } = ee(), Le = we ?? T.tagInput.remove, E = {
+		...T.tagInput,
+		...Ee
+	}, D = ne(), O = `${D}-instructions`, k = `${D}-error`, A = `${D}-max`, j = o(), [M, N] = e({
+		value: h,
+		defaultValue: g ?? [],
+		onChange: se
+	}), [P, F] = e({
+		value: ce,
+		defaultValue: _ ?? "",
+		onChange: le
+	}), [I, L] = d(null), [Re, ze] = d(null), [R, Be] = d(null), [Ve, He] = d({
 		text: "",
 		n: 0
-	}), B = b !== void 0 && N.length >= b, He = [
-		Pe,
-		k,
-		B ? j : void 0,
-		L ? A : void 0
-	].filter(Boolean).join(" ") || void 0, V = s({
-		id: ke,
-		invalid: _e,
-		required: ve,
-		disabled: he,
-		readOnly: ge,
-		size: me,
-		"aria-describedby": He
-	}, { nativeRequired: !1 }), H = V.size ?? "md", Ue = V.invalid || L !== null, U = !V.disabled && !V.readOnly, W = d(null), G = d(null), We = d([]), K = d(null), q = d(void 0), Ge = ee((e) => {
-		W.current = e, n(S, e);
-	}, [S]);
-	u(() => () => window.clearTimeout(q.current), []);
-	let Ke = (e) => {
-		e && Ve((t) => ({
+	}), z = y !== void 0 && M.length >= y, Ue = [
+		Fe,
+		O,
+		z ? A : void 0,
+		I ? k : void 0
+	].filter(Boolean).join(" ") || void 0, B = s({
+		id: Ae,
+		invalid: ve,
+		required: ye,
+		disabled: ge,
+		readOnly: _e,
+		size: he,
+		"aria-describedby": Ue
+	}, { nativeRequired: !1 }), V = B.size ?? "md", We = B.invalid || I !== null, H = !B.disabled && !B.readOnly, U = u(null), W = u(null), Ge = u([]), G = u(null), K = u(void 0), Ke = te((e) => {
+		U.current = e, n(x, e);
+	}, [x]);
+	l(() => () => window.clearTimeout(K.current), []);
+	let qe = (e) => {
+		e && He((t) => ({
 			text: e,
 			n: t.n + 1
 		}));
-	}, [qe, Je] = f(0), J = () => W.current?.focus(), Y = (e) => {
-		let t = We.current[e]?.querySelector("button:not(:disabled)");
+	}, [Je, Ye] = d(0), q = () => U.current?.focus(), J = (e) => {
+		let t = Ge.current[e]?.querySelector("button:not(:disabled)");
 		return t ? (t.focus(), !0) : !1;
 	};
-	ne(() => {
-		let e = K.current;
-		e !== null && (K.current = null, !(e < N.length && Y(e)) && J());
-	}), u(() => {
-		let e = W.current;
-		e && e.setCustomValidity(V.required && N.length === 0 ? D.required : "");
+	re(() => {
+		let e = G.current;
+		e !== null && (G.current = null, e < M.length && J(e) || q());
+	}), l(() => {
+		let e = U.current;
+		e && e.setCustomValidity(B.required && M.length === 0 ? E.required : "");
 	});
-	let Ye = d(_ ?? []), Xe = d(v ?? "");
-	u(() => {
-		let e = W.current?.form ?? G.current?.closest("form");
+	let Xe = u(g ?? []), Ze = u(_ ?? "");
+	l(() => {
+		let e = U.current?.form ?? W.current?.closest("form");
 		if (!e) return;
 		let t = () => {
-			P(Ye.current), I(Xe.current), R(null);
+			N(Xe.current), F(Ze.current), L(null);
 		};
 		return e.addEventListener("reset", t), () => e.removeEventListener("reset", t);
-	}, [P, I]);
-	let X = y.length > 0 ? new RegExp(y.map(h).join("|")) : null, Ze = new RegExp([
-		...y.map(h),
+	}, [N, F]);
+	let Y = v.length > 0 ? new RegExp(v.map(m).join("|")) : null, Qe = new RegExp([
+		...v.map(m),
 		"\\r?\\n",
 		"\\t"
-	].join("|")), Z = (e) => {
-		let t = [...N], n = [], r = [], i = [], a = null, o = !1;
+	].join("|")), X = (e) => {
+		let t = [...M], n = [], r = [], i = [], a = null, o = !1;
 		for (let s of e) {
 			let e = s.trim();
 			if (!e) continue;
-			let c = (pe ? pe(e) : e).trim();
+			let c = (me ? me(e) : e).trim();
 			if (c) {
-				if (b !== void 0 && t.length >= b) {
-					o = !0;
-					continue;
-				}
-				if (!de && t.includes(c)) {
-					r.push(c);
-					continue;
-				}
-				if (fe) {
-					let t = fe(c);
-					if (t !== !0) {
-						a ??= typeof t == "string" && t ? t : D.invalid(c), i.push(e);
-						continue;
+				if (y !== void 0 && t.length >= y) o = !0;
+				else if (!fe && t.includes(c)) r.push(c);
+				else {
+					if (pe) {
+						let t = pe(c);
+						if (t !== !0) {
+							a ??= typeof t == "string" && t ? t : E.invalid(c), i.push(e);
+							continue;
+						}
 					}
+					t.push(c), n.push(c);
 				}
-				t.push(c), n.push(c);
 			}
 		}
-		n.length > 0 && P(t), R(a), r.length > 0 && (window.clearTimeout(q.current), Re(r[0]), ze(D.duplicate(r[0])), q.current = window.setTimeout(() => Re(null), 1200));
-		let s = b !== void 0 && t.length >= b && n.length > 0, c = [
-			n.length > 0 ? D.added(n) : null,
-			...r.map(D.duplicate),
+		n.length > 0 && N(t), L(a), r.length > 0 && (window.clearTimeout(K.current), ze(r[0]), Be(E.duplicate(r[0])), K.current = window.setTimeout(() => ze(null), 1200));
+		let s = y !== void 0 && t.length >= y && n.length > 0, c = [
+			n.length > 0 ? E.added(n) : null,
+			...r.map(E.duplicate),
 			a,
-			o || s ? D.maxReached(b) : null
+			o || s ? E.maxReached(y) : null
 		].filter(Boolean);
-		return Ke(c.join(". ")), {
+		return qe(c.join(". ")), {
 			rejected: i,
 			added: n.length > 0
 		};
-	}, Qe = (e) => {
-		let t = N[e];
-		t !== void 0 && U && (K.current = e, P(N.filter((t, n) => n !== e)), R(null), Ke(D.removed(t)));
-	}, Q = (e, t = "") => {
-		let n = y[0], r = n === void 0 || n.trim() === "" ? " " : `${n} `;
-		return [...e, t].filter(Boolean).join(r);
-	}, $ = () => {
-		let e = Z([F]);
-		return I(e.rejected.length > 0 ? F : ""), e;
 	}, $e = (e) => {
-		Ae?.(e), z && ze(null);
-		let t = e.target.value;
-		if (X && X.test(t)) {
-			let e = t.split(X), n = e.pop() ?? "", r = Z(e);
-			I(Q(r.rejected, n));
-			return;
-		}
-		L && R(null), I(t);
+		let t = M[e];
+		t !== void 0 && H && (G.current = e, N(M.filter((t, n) => n !== e)), L(null), qe(E.removed(t)));
+	}, Z = (e, t = "") => {
+		let n = v[0], r = n === void 0 || n.trim() === "" ? " " : `${n} `;
+		return [...e, t].filter(Boolean).join(r);
+	}, Q = () => {
+		let e = X([P]);
+		return F(e.rejected.length > 0 ? P : ""), e;
 	}, et = (e) => {
-		if (Me?.(e), e.defaultPrevented) return;
+		je?.(e), R && Be(null);
+		let t = e.target.value;
+		if (Y && Y.test(t)) {
+			let e = t.split(Y), n = e.pop() ?? "", r = X(e);
+			F(Z(r.rejected, n));
+		} else I && L(null), F(t);
+	}, tt = (e) => {
+		if (Ne?.(e), e.defaultPrevented) return;
 		let t = e.clipboardData.getData("text");
-		if (!Ze.test(t)) return;
+		if (!Qe.test(t)) return;
 		e.preventDefault();
-		let n = e.currentTarget, r = n.selectionStart ?? F.length, i = n.selectionEnd ?? F.length, a = F.slice(0, r) + t + F.slice(i), o = Z(a.split(Ze));
-		I(Q(o.rejected));
-	}, tt = () => G.current ? getComputedStyle(G.current).direction === "rtl" : !1, nt = (e) => {
-		if (je?.(e), e.defaultPrevented || e.nativeEvent.isComposing) return;
-		let t = e.currentTarget, n = t.selectionStart === 0 && t.selectionEnd === 0, r = tt() ? "ArrowRight" : "ArrowLeft";
+		let n = e.currentTarget, r = n.selectionStart ?? P.length, i = n.selectionEnd ?? P.length, a = P.slice(0, r) + t + P.slice(i), o = X(a.split(Qe));
+		F(Z(o.rejected));
+	}, nt = () => W.current ? getComputedStyle(W.current).direction === "rtl" : !1, rt = (e) => {
+		if (Me?.(e), e.defaultPrevented || e.nativeEvent.isComposing) return;
+		let t = e.currentTarget, n = t.selectionStart === 0 && t.selectionEnd === 0, r = nt() ? "ArrowRight" : "ArrowLeft";
 		switch (e.key) {
 			case "Enter":
 				if (e.repeat) {
 					e.preventDefault();
 					return;
 				}
-				if (!F.trim()) return;
-				e.preventDefault(), $();
+				if (!P.trim()) return;
+				e.preventDefault(), Q();
 				return;
 			case "Tab": {
-				if (!le || e.shiftKey || !F.trim()) return;
-				let t = $();
+				if (!ue || e.shiftKey || !P.trim()) return;
+				let t = Q();
 				t.added && t.rejected.length === 0 && e.preventDefault();
 				return;
 			}
 			case "Backspace":
-				if (e.repeat || F !== "" || N.length === 0) return;
-				Y(N.length - 1) && e.preventDefault();
+				if (e.repeat || P !== "" || M.length === 0) return;
+				J(M.length - 1) && e.preventDefault();
 				return;
 			case r:
-				if (!n || N.length === 0 || e.shiftKey) return;
-				Y(N.length - 1) && e.preventDefault();
+				if (!n || M.length === 0 || e.shiftKey) return;
+				J(M.length - 1) && e.preventDefault();
 				return;
 			default: return;
 		}
-	}, rt = (e) => {
-		Ne?.(e), ue && F.trim() && $();
-	}, it = (e, t) => {
-		let n = tt(), r = n ? "ArrowRight" : "ArrowLeft", i = n ? "ArrowLeft" : "ArrowRight", a = !0;
+	}, it = (e) => {
+		Pe?.(e), de && P.trim() && Q();
+	}, at = (e, t) => {
+		let n = nt(), r = n ? "ArrowRight" : "ArrowLeft", i = n ? "ArrowLeft" : "ArrowRight", a = !0;
 		switch (e.key) {
 			case r:
-				t > 0 && Y(t - 1);
+				t > 0 && J(t - 1);
 				break;
 			case i:
-				t < N.length - 1 && Y(t + 1) || J();
+				t < M.length - 1 && J(t + 1) || q();
 				break;
 			case "Home":
-				Y(0);
+				J(0);
 				break;
 			case "End":
-				J();
+				q();
 				break;
 			default: a = !1;
 		}
 		a && e.preventDefault();
-	}, at = (e) => {
-		let t = W.current;
-		if (!t || V.disabled) return;
+	}, ot = (e) => {
+		let t = U.current;
+		if (!t || B.disabled) return;
 		let n = e.target;
 		n === t || n.closest("button, a, input, [tabindex]") || (e.preventDefault(), t.focus());
-	}, ot = x === void 0 ? w ?? (M && !M.isGroup ? M.labelId : void 0) : void 0, st = x ?? (ot ? void 0 : E.tagInput.list), ct = we ?? ae(y, le, E.tagInput, Fe), lt = N.length === 0 && !B;
-	return /* @__PURE__ */ m("div", {
-		ref: G,
-		className: r(l.root, Ee),
-		style: Oe,
-		"data-size": H,
+	}, $ = b === void 0 ? C ?? (j && !j.isGroup ? j.labelId : void 0) : void 0, st = b ?? ($ ? void 0 : T.tagInput.list), ct = Te ?? oe(v, ue, T.tagInput, Ie), lt = M.length === 0 && !z;
+	return /* @__PURE__ */ p("div", {
+		ref: W,
+		className: t(c.root, De),
+		style: ke,
+		"data-size": V,
 		children: [
-			/* @__PURE__ */ m("div", {
-				className: r(l.box, ie[H], N.length > 0 && l.hasTags, Ue && l.invalid, V.disabled && l.disabled, V.readOnly && !V.disabled && l.readOnly),
-				onPointerDown: at,
-				children: [N.length > 0 && /* @__PURE__ */ p("ul", {
-					className: l.list,
-					"aria-labelledby": ot,
+			/* @__PURE__ */ p("div", {
+				className: t(c.box, ae[V], M.length > 0 && c.hasTags, We && c.invalid, B.disabled && c.disabled, B.readOnly && !B.disabled && c.readOnly),
+				onPointerDown: ot,
+				children: [M.length > 0 && /* @__PURE__ */ f("ul", {
+					className: c.list,
+					"aria-labelledby": $,
 					"aria-label": st,
-					"aria-describedby": V.readOnly ? V.ariaProps["aria-describedby"] : void 0,
-					children: N.map((e, t) => /* @__PURE__ */ p("li", {
+					"aria-describedby": B.readOnly ? B.ariaProps["aria-describedby"] : void 0,
+					children: M.map((e, t) => /* @__PURE__ */ f("li", {
 						ref: (e) => {
-							We.current[t] = e;
+							Ge.current[t] = e;
 						},
-						className: l.item,
-						"data-highlighted": Le === e || void 0,
-						onKeyDown: (e) => it(e, t),
-						onFocus: () => Je(t),
-						children: /* @__PURE__ */ p(c, {
-							size: re[H],
-							variant: xe,
-							tone: Se,
-							disabled: V.disabled,
-							onRemove: U ? () => Qe(t) : void 0,
-							removeLabel: U ? Ie(e) : void 0,
-							removeTabIndex: t === Math.min(qe, N.length - 1) ? 0 : -1,
+						className: c.item,
+						"data-highlighted": Re === e || void 0,
+						onKeyDown: (e) => at(e, t),
+						onFocus: () => Ye(t),
+						children: /* @__PURE__ */ f(r, {
+							size: ie[V],
+							variant: Se,
+							tone: Ce,
+							disabled: B.disabled,
+							onRemove: H ? () => $e(t) : void 0,
+							removeLabel: H ? Le(e) : void 0,
+							removeTabIndex: t === Math.min(Je, M.length - 1) ? 0 : -1,
 							children: e
 						})
 					}, `${e}-${t}`))
-				}), V.readOnly && !V.disabled ? N.length === 0 && /* @__PURE__ */ p("span", {
-					className: l.empty,
-					children: D.empty
-				}) : /* @__PURE__ */ p("input", {
-					...T,
-					ref: Ge,
-					id: V.id,
+				}), B.readOnly && !B.disabled ? M.length === 0 && /* @__PURE__ */ f("span", {
+					className: c.empty,
+					children: E.empty
+				}) : /* @__PURE__ */ f("input", {
+					...w,
+					ref: Ke,
+					id: B.id,
 					type: "text",
-					form: C,
-					value: F,
-					placeholder: lt ? ye : void 0,
-					disabled: V.disabled,
-					readOnly: B,
-					autoComplete: T.autoComplete ?? "off",
-					...V.ariaProps,
-					"aria-labelledby": w,
-					"aria-invalid": Ue || void 0,
-					"aria-errormessage": L ? A : V.ariaProps["aria-errormessage"],
-					className: r(l.input, De),
-					onChange: $e,
-					onKeyDown: nt,
-					onPaste: et,
-					onBlur: rt
+					form: S,
+					value: P,
+					placeholder: lt ? be : void 0,
+					disabled: B.disabled,
+					readOnly: z,
+					autoComplete: w.autoComplete ?? "off",
+					...B.ariaProps,
+					"aria-labelledby": C,
+					"aria-invalid": We || void 0,
+					"aria-errormessage": I ? k : B.ariaProps["aria-errormessage"],
+					className: t(c.input, Oe),
+					onChange: et,
+					onKeyDown: rt,
+					onPaste: tt,
+					onBlur: it
 				})]
 			}),
-			L && /* @__PURE__ */ m("p", {
-				id: A,
-				className: l.error,
-				children: [/* @__PURE__ */ p(a, {
+			I && /* @__PURE__ */ p("p", {
+				id: k,
+				className: c.error,
+				children: [/* @__PURE__ */ f(i, {
 					size: "sm",
-					className: l.errorIcon
-				}), /* @__PURE__ */ p("span", { children: L })]
+					className: c.errorIcon
+				}), /* @__PURE__ */ f("span", { children: I })]
 			}),
-			/* @__PURE__ */ p(i, {
-				id: k,
+			/* @__PURE__ */ f(a, {
+				id: O,
 				children: ct
 			}),
-			z && /* @__PURE__ */ p("p", {
-				className: l.limit,
-				children: z
+			R && /* @__PURE__ */ f("p", {
+				className: c.limit,
+				children: R
 			}),
-			B && /* @__PURE__ */ p("p", {
-				id: j,
-				className: l.limit,
-				children: D.maxReached(b)
+			z && /* @__PURE__ */ f("p", {
+				id: A,
+				className: c.limit,
+				children: E.maxReached(y)
 			}),
-			/* @__PURE__ */ m(i, {
+			/* @__PURE__ */ p(a, {
 				role: "status",
 				"aria-live": "polite",
 				"aria-atomic": "true",
-				children: [Be.text, Be.n % 2 == 1 ? "\xA0" : ""]
+				children: [Ve.text, Ve.n % 2 == 1 ? "\xA0" : ""]
 			}),
-			be !== void 0 && N.map((e, t) => /* @__PURE__ */ p("input", {
+			xe !== void 0 && M.map((e, t) => /* @__PURE__ */ f("input", {
 				type: "hidden",
-				name: be,
+				name: xe,
 				value: e,
-				form: C,
-				disabled: V.disabled
+				form: S,
+				disabled: B.disabled
 			}, `${e}-${t}`))
 		]
 	});
 };
-//#endregion
-export { _ as TagInput };
+export { g as TagInput };

package/dist/components/forms/TagInput/TagInput.module.css.mjs

@@ -1,4 +1,4 @@
-//#region src/components/forms/TagInput/TagInput.module.css
+// src/components/forms/TagInput/TagInput.module.css
 var e = "_root_y83d4_15", t = "_box_y83d4_31", n = "_hasTags_y83d4_103", r = "_sm_y83d4_115", i = "_md_y83d4_131", a = "_lg_y83d4_147", o = "_disabled_y83d4_167", s = "_readOnly_y83d4_167", c = "_invalid_y83d4_167", l = "_list_y83d4_229", u = "_item_y83d4_255", d = "_input_y83d4_313", f = "_empty_y83d4_397", p = "_error_y83d4_409", m = "_limit_y83d4_431", h = "_errorIcon_y83d4_445", g = {
 	root: e,
 	box: t,
@@ -18,5 +18,4 @@ var e = "_root_y83d4_15", t = "_box_y83d4_31", n = "_hasTags_y83d4_103", r = "_s
 	limit: m,
 	errorIcon: h
 };
-//#endregion
 export { t as box, g as default, o as disabled, f as empty, p as error, h as errorIcon, n as hasTags, d as input, c as invalid, u as item, a as lg, m as limit, l as list, i as md, s as readOnly, e as root, r as sm };

package/dist/components/forms/Textarea/Textarea.cjs.js

@@ -1 +1 @@
-const e=require("../../../hooks/useControllableState.cjs.js"),t=require("../../../hooks/useFormReset.cjs.js"),n=require("../../utilities/LocaleProvider/LocaleProvider.cjs.js"),r=require("../../../utils/cx.cjs.js"),i=require("../../utilities/VisuallyHidden/VisuallyHidden.cjs.js"),a=require("../Field/FieldContext.cjs.js"),o=require("./Textarea.module.css.cjs.js");let s=require("react"),c=require("react/jsx-runtime");var l={sm:o.default.sm,md:o.default.md,lg:o.default.lg},u={outline:o.default.outline,filled:o.default.filled},d={none:o.default.radiusNone,xs:o.default.radiusXs,sm:o.default.radiusSm,md:o.default.radiusMd,lg:o.default.radiusLg,xl:o.default.radiusXl,"2xl":o.default.radius2xl},f={none:o.default.resizeNone,vertical:o.default.resizeVertical,both:o.default.resizeBoth},ee=.9,te=600,p;function m(){return p===void 0&&(p=typeof CSS<`u`&&typeof CSS.supports==`function`&&CSS.supports(`field-sizing`,`content`)),p}var h=typeof window<`u`?s.useLayoutEffect:s.useEffect,g=({size:p,variant:g=`outline`,radius:_,invalid:ne,value:v,defaultValue:y,onValueChange:b,onChange:x,rows:S=3,autoResize:C=!1,minRows:w,maxRows:T,resize:E=`vertical`,showCount:D=!1,maxLength:O,fullWidth:re=!0,className:ie,textareaClassName:ae,style:oe,cols:k,id:A,required:j,disabled:M,readOnly:N,"aria-describedby":P,ref:F,...I})=>{let L=n.useMessages(),R=(0,s.useId)(),z=D&&O!==void 0&&O>0,B=a.useFieldControl({id:A,invalid:ne,required:j,disabled:M,readOnly:N,size:p,"aria-describedby":[P,z?R:void 0].filter(Boolean).join(` `)||void 0}),V=B.size??`md`,H=v!==void 0,[U,W]=e.useControllableState({value:v,defaultValue:y??``,onChange:b});t.useFormReset(()=>B.id?document.getElementById(B.id):null,()=>W(y??``),v===void 0);let G=e=>{x?.(e),W(e.target.value)},K=(0,s.useRef)(null),se=(0,s.useCallback)(e=>{K.current=e;let t;return typeof F==`function`?t=F(e):F&&(F.current=e),()=>{K.current=null,typeof F==`function`?typeof t==`function`?t():F(null):F&&(F.current=null)}},[F]),q=Math.max(1,w??S),J=T===void 0?void 0:Math.max(q,T),Y=(0,s.useCallback)(()=>{let e=K.current;if(!e)return;e.style.height=`auto`;let t=window.getComputedStyle(e),n=parseFloat(t.borderTopWidth)+parseFloat(t.borderBottomWidth);e.style.height=`${e.scrollHeight+n}px`},[]);h(()=>{C&&!m()&&Y()},[C,Y,U,q,J,V]),(0,s.useEffect)(()=>{let e=K.current;if(!C||m()||!e||typeof ResizeObserver>`u`)return;let t=e.offsetWidth,n=new ResizeObserver(()=>{e.offsetWidth!==t&&(t=e.offsetWidth,Y())});return n.observe(e),()=>{n.disconnect(),e.style.height=``}},[C,Y]);let X=U.length,ce=z?X/O:0,Z=z&&ce>=ee,le=z&&X>=O,Q=z?Math.max(0,O-X):0,[ue,$]=(0,s.useState)(``);(0,s.useEffect)(()=>{if(!z)return;if(!Z){$(``);return}let e=window.setTimeout(()=>{$(Q===0?L.textarea.limitReached:L.textarea.remaining(Q))},te);return()=>window.clearTimeout(e)},[z,Z,Q,L]);let de={...C?{"--textarea-min-rows":q,"--textarea-max-rows":J,"--textarea-cols":k}:null};return(0,c.jsxs)(`div`,{className:r.cx(o.default.root,re?o.default.fullWidth:o.default.inline,ie),style:oe,children:[(0,c.jsx)(`textarea`,{...I,...B.ariaProps,ref:se,id:B.id,required:B.required,disabled:B.disabled,readOnly:B.readOnly,maxLength:O,cols:k,rows:C?q:S,...H?{value:U}:{defaultValue:y??``},onChange:G,style:de,className:r.cx(o.default.textarea,l[V],u[g],_&&d[_],f[C?`none`:E],C&&o.default.autoResize,C&&J!==void 0&&o.default.hasMaxRows,B.invalid&&o.default.invalid,ae)}),z&&(0,c.jsxs)(`div`,{id:R,className:r.cx(o.default.counter,l[V],Z&&o.default.counterNear,le&&o.default.counterAtLimit),children:[(0,c.jsxs)(`span`,{"aria-hidden":`true`,children:[X,` / `,O]}),(0,c.jsxs)(i.VisuallyHidden,{children:[X,` of `,O,` characters used`]})]}),z&&(0,c.jsx)(i.VisuallyHidden,{"aria-live":`polite`,"aria-atomic":`true`,children:ue})]})};exports.Textarea=g;
+"use client";const e=require("../../../hooks/useControllableState.cjs.js"),t=require("../../../hooks/useFormReset.cjs.js"),n=require("../../../utils/cx.cjs.js"),r=require("../../utilities/VisuallyHidden/VisuallyHidden.cjs.js"),i=require("../Field/FieldContext.cjs.js"),a=require("./Textarea.module.css.cjs.js"),ee=require("../../utilities/LocaleProvider/LocaleProvider.cjs.js");let o=require("react"),s=require("react/jsx-runtime");var c={sm:a.default.sm,md:a.default.md,lg:a.default.lg},l={outline:a.default.outline,filled:a.default.filled},u={none:a.default.radiusNone,xs:a.default.radiusXs,sm:a.default.radiusSm,md:a.default.radiusMd,lg:a.default.radiusLg,xl:a.default.radiusXl,"2xl":a.default.radius2xl},d={none:a.default.resizeNone,vertical:a.default.resizeVertical,both:a.default.resizeBoth},te=.9,ne=600,f;function p(){return f===void 0&&(f=typeof CSS<`u`&&typeof CSS.supports==`function`&&CSS.supports(`field-sizing`,`content`)),f}var m=typeof window<`u`?o.useLayoutEffect:o.useEffect,h=({size:f,variant:h=`outline`,radius:g,invalid:_,value:v,defaultValue:y,onValueChange:b,onChange:x,rows:S=3,autoResize:C=!1,minRows:w,maxRows:T,resize:E=`vertical`,showCount:D=!1,maxLength:O,fullWidth:re=!0,className:ie,textareaClassName:ae,style:oe,cols:k,id:A,required:j,disabled:M,readOnly:N,"aria-describedby":P,ref:F,...I})=>{let L=ee.useMessages(),R=(0,o.useId)(),z=D&&O!==void 0&&O>0,B=i.useFieldControl({id:A,invalid:_,required:j,disabled:M,readOnly:N,size:f,"aria-describedby":[P,z?R:void 0].filter(Boolean).join(` `)||void 0}),V=B.size??`md`,H=v!==void 0,[U,W]=e.useControllableState({value:v,defaultValue:y??``,onChange:b});t.useFormReset(()=>B.id?document.getElementById(B.id):null,()=>W(y??``),v===void 0);let G=e=>{x?.(e),W(e.target.value)},K=(0,o.useRef)(null),se=(0,o.useCallback)(e=>{K.current=e;let t;return typeof F==`function`?t=F(e):F&&(F.current=e),()=>{K.current=null,typeof F==`function`?typeof t==`function`?t():F(null):F&&(F.current=null)}},[F]),q=Math.max(1,w??S),J=T===void 0?void 0:Math.max(q,T),Y=(0,o.useCallback)(()=>{let e=K.current;if(!e)return;e.style.height=`auto`;let t=window.getComputedStyle(e),n=parseFloat(t.borderTopWidth)+parseFloat(t.borderBottomWidth);e.style.height=`${e.scrollHeight+n}px`},[]);m(()=>{C&&!p()&&Y()},[C,Y,U,q,J,V]),(0,o.useEffect)(()=>{let e=K.current;if(!C||p()||!e||typeof ResizeObserver>`u`)return;let t=e.offsetWidth,n=new ResizeObserver(()=>{e.offsetWidth!==t&&(t=e.offsetWidth,Y())});return n.observe(e),()=>{n.disconnect(),e.style.height=``}},[C,Y]);let X=U.length,ce=z?X/O:0,Z=z&&ce>=te,le=z&&X>=O,Q=z?Math.max(0,O-X):0,[ue,$]=(0,o.useState)(``);(0,o.useEffect)(()=>{if(!z)return;if(!Z){$(``);return}let e=window.setTimeout(()=>{$(Q===0?L.textarea.limitReached:L.textarea.remaining(Q))},ne);return()=>window.clearTimeout(e)},[z,Z,Q,L]);let de={...C?{"--textarea-min-rows":q,"--textarea-max-rows":J,"--textarea-cols":k}:null};return(0,s.jsxs)(`div`,{className:n.cx(a.default.root,re?a.default.fullWidth:a.default.inline,ie),style:oe,children:[(0,s.jsx)(`textarea`,{...I,...B.ariaProps,ref:se,id:B.id,required:B.required,disabled:B.disabled,readOnly:B.readOnly,maxLength:O,cols:k,rows:C?q:S,...H?{value:U}:{defaultValue:y??``},onChange:G,style:de,className:n.cx(a.default.textarea,c[V],l[h],g&&u[g],d[C?`none`:E],C&&a.default.autoResize,C&&J!==void 0&&a.default.hasMaxRows,B.invalid&&a.default.invalid,ae)}),z&&(0,s.jsxs)(`div`,{id:R,className:n.cx(a.default.counter,c[V],Z&&a.default.counterNear,le&&a.default.counterAtLimit),children:[(0,s.jsxs)(`span`,{"aria-hidden":`true`,children:[X,` / `,O]}),(0,s.jsxs)(r.VisuallyHidden,{children:[X,` of `,O,` characters used`]})]}),z&&(0,s.jsx)(r.VisuallyHidden,{"aria-live":`polite`,"aria-atomic":`true`,children:ue})]})};exports.Textarea=h;