@mortenbrudvik/waveui 0.7.0 → 0.8.0

package/dist/components/input/TagPicker.mjs

@@ -2,248 +2,252 @@
 import { cn as e } from "../../lib/cn.mjs";
 import { warnDeprecated as t, warnOnce as n } from "../../lib/dev.mjs";
 import { composeEventHandlers as r } from "../../lib/composeEventHandlers.mjs";
-import { useControllable as i } from "../../hooks/useControllable.mjs";
-import { useId as a } from "../../hooks/useId.mjs";
-import { getArrowIntent as o, getDirection as ee } from "../../lib/direction.mjs";
-import { useMergedRefs as s } from "../../hooks/useMergedRefs.mjs";
+import { tagPickerClassNames as i } from "../../lib/classNames.mjs";
+import { useControllable as a } from "../../hooks/useControllable.mjs";
+import { useId as o } from "../../hooks/useId.mjs";
+import { getArrowIntent as s, getDirection as ee } from "../../lib/direction.mjs";
+import { useMergedRefs as c } from "../../hooks/useMergedRefs.mjs";
 import { useIsClient as te } from "../../hooks/useIsClient.mjs";
-import { joinIds as c } from "../../lib/aria.mjs";
-import { useFieldContext as l, useFieldControl as ne } from "../../hooks/useFieldControl.mjs";
-import { useAnnounce as re } from "../../hooks/useAnnounce.mjs";
-import { focusRing as u, inputFocusWithin as ie } from "../../lib/styles.mjs";
-import { DismissIcon as d } from "../../lib/icons.mjs";
+import { joinIds as ne } from "../../lib/aria.mjs";
+import { useFieldContext as re, useFieldControl as l } from "../../hooks/useFieldControl.mjs";
+import { useAnnounce as u } from "../../hooks/useAnnounce.mjs";
+import { focusRing as d, inputFocusWithin as ie } from "../../lib/styles.mjs";
+import { DismissIcon as f } from "../../lib/icons.mjs";
 import { isInvalidLook as ae } from "./Input.mjs";
 import { useFormReset as oe } from "../../hooks/useFormReset.mjs";
 import { HiddenInput as se } from "../internal/HiddenInput.mjs";
 import { useListbox as ce } from "../../hooks/useListbox.mjs";
 import { ListboxSurface as le, Option as ue, useListboxPopup as de } from "./Option.mjs";
-import { usePreserveFocus as f } from "../../hooks/usePreserveFocus.mjs";
-import * as p from "react";
-import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import { usePreserveFocus as p } from "../../hooks/usePreserveFocus.mjs";
+import * as m from "react";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
 //#region src/components/input/TagPicker.tsx
-var fe = (e) => `Remove ${e}`, pe = (e) => `Selected: ${e.join(", ")}`, me = (e, t) => `${e} added, ${t} selected`, he = (e, t) => `${e} removed, ${t} selected`, g = [];
+var fe = (e) => `Remove ${e}`, pe = (e) => `Selected: ${e.join(", ")}`, me = (e, t) => `${e} added, ${t} selected`, he = (e, t) => `${e} removed, ${t} selected`, _ = [];
 function ge(e, t) {
 	return e.length === t.length && e.every((e, n) => e === t[n]);
 }
-function _e({ label: t, disabled: n, onClick: r, onKeyDown: i, getFallback: a }) {
-	let o = p.useRef(null);
-	return f(o, a), /* @__PURE__ */ m("button", {
-		ref: o,
+function _e({ label: t, disabled: n, onClick: r, onKeyDown: a, getFallback: o }) {
+	let s = m.useRef(null);
+	return p(s, o), /* @__PURE__ */ h("button", {
+		ref: s,
 		type: "button",
 		"data-wave-tagpicker-remove": "",
 		disabled: n,
 		"aria-label": t,
-		className: e("ms-0.5 inline-flex rounded-sm bg-transparent p-0 text-muted-foreground not-disabled:not-aria-disabled:hover:text-foreground disabled:cursor-not-allowed", u),
+		className: e(i.removeButton, "ms-0.5 inline-flex rounded-sm bg-transparent p-0 text-muted-foreground not-disabled:not-aria-disabled:hover:text-foreground disabled:cursor-not-allowed", d),
 		onClick: r,
-		onKeyDown: i,
-		children: /* @__PURE__ */ m(d, { size: 12 })
+		onKeyDown: a,
+		children: /* @__PURE__ */ h(f, { size: 12 })
 	});
 }
-var _ = (u) => {
-	let { options: d, value: f, defaultValue: _, onValueChange: ve, onChange: v, open: ye, defaultOpen: be, onOpenChange: xe, placeholder: Se = "Select...", disabled: y = !1, name: Ce, form: b, required: x, autoComplete: we = "off", autoCapitalize: Te, autoCorrect: Ee, maxLength: S, readOnly: C, labels: w, inputMode: T, spellCheck: E, enterKeyHint: D, autoFocus: De, tabIndex: Oe, id: ke, "aria-label": Ae, "aria-labelledby": je, "aria-describedby": Me, "aria-invalid": Ne, "aria-required": Pe, "aria-errormessage": Fe, "aria-details": Ie, onFocus: Le, onBlur: Re, onKeyDown: ze, onKeyUp: Be, controlRef: Ve, className: He, ref: Ue, ...We } = u;
-	v !== void 0 && t("TagPicker", "onChange", "onValueChange");
-	let O = l(), Ge = (x ?? O?.required ?? !1) && !C, k = ne({
-		id: ke,
-		"aria-label": Ae,
-		"aria-labelledby": je,
-		"aria-describedby": Me,
-		"aria-invalid": Ne,
-		"aria-required": Pe ?? x
-	}), Ke = ae(!1, k["aria-invalid"]), [A, j] = i(f, _ ?? g, (e) => {
+var v = (d) => {
+	let { options: f, value: p, defaultValue: v, onValueChange: ve, onChange: y, open: ye, defaultOpen: be, onOpenChange: xe, placeholder: Se = "Select...", disabled: b = !1, name: Ce, form: x, required: S, autoComplete: we = "off", autoCapitalize: Te, autoCorrect: Ee, maxLength: C, readOnly: w, labels: T, inputMode: E, spellCheck: D, enterKeyHint: De, autoFocus: Oe, tabIndex: ke, id: Ae, "aria-label": je, "aria-labelledby": Me, "aria-describedby": Ne, "aria-invalid": Pe, "aria-required": Fe, "aria-errormessage": Ie, "aria-details": Le, onFocus: Re, onBlur: ze, onKeyDown: Be, onKeyUp: Ve, controlRef: He, className: Ue, ref: We, ...Ge } = d;
+	y !== void 0 && t("TagPicker", "onChange", "onValueChange");
+	let O = re(), k = (S ?? O?.required ?? !1) && !w, A = l({
+		id: Ae,
+		"aria-label": je,
+		"aria-labelledby": Me,
+		"aria-describedby": Ne,
+		"aria-invalid": Pe,
+		"aria-required": Fe ?? S
+	}), Ke = ae(!1, A["aria-invalid"]), [j, M] = a(p, v ?? _, (e) => {
 		let t = [...e];
-		ve?.(t), v?.(t);
-	}), M = !y && !C, [N, P] = i(ye, (be ?? !1) && M, xe), qe = te(), F = N && M && qe, [I, L] = p.useState(""), [Je, Ye] = p.useState(M);
-	Je !== M && (Ye(M), M || L(""));
-	let R = !M && N;
-	p.useEffect(() => {
-		R && P(!1);
-	}, [R, P]);
-	let z = re(), B = p.useRef(null), V = p.useRef(null), H = a("tagpicker-summary"), U = p.useMemo(() => {
+		ve?.(t), y?.(t);
+	}), N = !b && !w, [P, F] = a(ye, (be ?? !1) && N, xe), qe = te(), I = P && N && qe, [L, R] = m.useState(""), [Je, Ye] = m.useState(N);
+	Je !== N && (Ye(N), N || R(""));
+	let z = !N && P;
+	m.useEffect(() => {
+		z && F(!1);
+	}, [z, F]);
+	let B = u(), V = m.useRef(null), H = m.useRef(null), U = o("tagpicker-summary"), W = m.useMemo(() => {
 		let e = /* @__PURE__ */ new Map();
-		for (let t of d) e.has(t.value) || e.set(t.value, t.label);
+		for (let t of f) e.has(t.value) || e.set(t.value, t.label);
 		return e;
-	}, [d]), W = (e) => U.get(e) ?? e, Xe = p.useMemo(() => {
-		let e = new Set(A);
-		return d.filter((t) => !e.has(t.value)).map((e) => ({
+	}, [f]), G = (e) => W.get(e) ?? e, Xe = m.useMemo(() => {
+		let e = new Set(j);
+		return f.filter((t) => !e.has(t.value)).map((e) => ({
 			value: e.value,
 			label: e.label
 		}));
-	}, [d, A]), Ze = p.useMemo(() => I ? (e) => e.label.toLowerCase().includes(I.toLowerCase()) : void 0, [I]), G = A.filter((e) => !U.has(e)).join("\0");
-	p.useEffect(() => {
-		G && n("TagPicker:unknown-value", `TagPicker: the selected value(s) ${G.split("\0").map((e) => `"${e}"`).join(", ")} match no option; the raw value is shown as the tag label.`);
-	}, [G]);
-	let Qe = () => V.current, K = () => V.current?.focus(), $e = (e) => {
-		if (!M || A.includes(e)) return;
-		let t = [...A, e];
-		j(t), L(""), z((w?.added ?? me)(W(e), t.length));
-	}, q = (e) => {
-		if (!M) return;
-		let t = A.filter((t) => t !== e);
-		j(t), z((w?.removed ?? he)(W(e), t.length)), K();
-	}, J = ce({
-		open: F,
-		onOpenChange: (e) => P(e),
+	}, [f, j]), Ze = m.useMemo(() => L ? (e) => e.label.toLowerCase().includes(L.toLowerCase()) : void 0, [L]), K = j.filter((e) => !W.has(e)).join("\0");
+	m.useEffect(() => {
+		K && n("TagPicker:unknown-value", `TagPicker: the selected value(s) ${K.split("\0").map((e) => `"${e}"`).join(", ")} match no option; the raw value is shown as the tag label.`);
+	}, [K]);
+	let Qe = () => H.current, q = () => H.current?.focus(), $e = (e) => {
+		if (!N || j.includes(e)) return;
+		let t = [...j, e];
+		M(t), R(""), B((T?.added ?? me)(G(e), t.length));
+	}, J = (e) => {
+		if (!N) return;
+		let t = j.filter((t) => t !== e);
+		M(t), B((T?.removed ?? he)(G(e), t.length)), q();
+	}, Y = ce({
+		open: I,
+		onOpenChange: (e) => F(e),
 		mode: "editable",
 		multiple: !0,
-		selectedValues: A,
+		selectedValues: j,
 		onSelect: (e) => $e(e),
 		items: Xe,
 		filter: Ze,
-		autoHighlight: I ? "first" : !1,
+		autoHighlight: L ? "first" : !1,
 		idPrefix: "tagpicker-listbox",
-		onClearDraft: I ? () => L("") : void 0
-	}), Y = F && J.items.length > 0, X = w?.noMatches ?? "No matches", Z = F && (Y || I !== ""), Q = Z && !Y, { layerId: et, setReference: tt, surfaceRef: nt, floatingProps: rt } = de({
-		open: F,
-		surfaceOpen: Z,
-		onDismiss: () => P(!1),
-		rootRef: B,
-		anchorRef: V
-	}), it = s(B, Ue), at = s(V, Ve);
-	oe(V, () => {
-		let e = _ ?? g;
-		j((t) => ge(t, e) ? t : [...e]), L("");
-	}, b);
-	let $ = (e) => Array.from(e.closest("[data-wave-tagpicker-control]")?.querySelectorAll("[data-wave-tagpicker-remove]") ?? []), ot = (e) => {
-		if (M) {
-			if (e.key === "Escape" && F && !Z && !e.nativeEvent.isComposing) {
-				P(!1);
+		onClearDraft: L ? () => R("") : void 0
+	}), X = I && Y.items.length > 0, Z = T?.noMatches ?? "No matches", Q = I && (X || L !== ""), et = Q && !X, { layerId: tt, setReference: nt, surfaceRef: rt, floatingProps: it } = de({
+		open: I,
+		surfaceOpen: Q,
+		onDismiss: () => F(!1),
+		rootRef: V,
+		anchorRef: H
+	}), at = c(V, We), ot = c(H, He);
+	oe(H, () => {
+		let e = v ?? _;
+		M((t) => ge(t, e) ? t : [...e]), R("");
+	}, x);
+	let $ = (e) => Array.from(e.closest("[data-wave-tagpicker-control]")?.querySelectorAll("[data-wave-tagpicker-remove]") ?? []), st = (e) => {
+		if (N) {
+			if (e.key === "Escape" && I && !Q && !e.nativeEvent.isComposing) {
+				F(!1);
 				return;
 			}
-			if (e.key === "Backspace" && I === "" && A.length > 0) {
+			if (e.key === "Backspace" && L === "" && j.length > 0) {
 				e.preventDefault(), $(e.currentTarget).at(-1)?.focus();
 				return;
 			}
-			J.onKeyDown(e);
+			Y.onKeyDown(e);
 		}
-	}, st = (e, t) => {
-		if (!M) return;
+	}, ct = (e, t) => {
+		if (!N) return;
 		let n = $(e.currentTarget), r = n.indexOf(e.currentTarget);
 		if (e.key === "Backspace" || e.key === "Delete") {
-			e.preventDefault(), q(t);
+			e.preventDefault(), J(t);
 			return;
 		}
 		if (e.key === "Escape") {
-			e.preventDefault(), K();
+			e.preventDefault(), q();
 			return;
 		}
-		let i = o(e.key, {
+		let i = s(e.key, {
 			orientation: "horizontal",
 			dir: ee(e.currentTarget)
 		});
-		i === "prev" && r > 0 ? (e.preventDefault(), n[r - 1].focus()) : i === "next" && (e.preventDefault(), r < n.length - 1 ? n[r + 1].focus() : K());
-	}, ct = k["aria-label"] === void 0 ? k["aria-labelledby"] ?? O?.labelId : k["aria-labelledby"];
-	return /* @__PURE__ */ h("div", {
-		...We,
-		ref: it,
-		className: e("relative", He),
+		i === "prev" && r > 0 ? (e.preventDefault(), n[r - 1].focus()) : i === "next" && (e.preventDefault(), r < n.length - 1 ? n[r + 1].focus() : q());
+	}, lt = A["aria-label"] === void 0 ? A["aria-labelledby"] ?? O?.labelId : A["aria-labelledby"];
+	return /* @__PURE__ */ g("div", {
+		...Ge,
+		ref: at,
+		className: e(i.root, "relative", Ue),
 		children: [
-			/* @__PURE__ */ h("div", {
-				ref: tt,
+			/* @__PURE__ */ g("div", {
+				ref: nt,
 				"data-wave-tagpicker-control": "",
 				role: "group",
-				"aria-disabled": y || void 0,
-				className: e("flex flex-wrap items-center gap-1 rounded border border-input border-b-stroke-accessible bg-background px-2 py-1.5", ie, Ke && "border-destructive focus-within:border-b-destructive", y && "cursor-not-allowed opacity-50"),
+				"aria-disabled": b || void 0,
+				className: e(i.control, "flex flex-wrap items-center gap-1 rounded border border-input border-b-stroke-accessible bg-background px-2 py-1.5", ie, Ke && "border-destructive focus-within:border-b-destructive", b && "cursor-not-allowed opacity-50"),
 				onClick: (e) => {
-					y || e.target.closest("button") || (K(), !F && M && P(!0));
+					b || e.target.closest("button") || (q(), !I && N && F(!0));
 				},
 				children: [
-					A.length > 0 && /* @__PURE__ */ m("div", {
+					j.length > 0 && /* @__PURE__ */ h("div", {
 						role: "list",
-						"aria-label": w?.selected ?? "Selected",
-						className: "flex flex-wrap items-center gap-1",
-						children: A.map((e) => {
-							let t = W(e);
-							return /* @__PURE__ */ h("div", {
+						"aria-label": T?.selected ?? "Selected",
+						className: e(i.group, "flex flex-wrap items-center gap-1"),
+						children: j.map((t) => {
+							let n = G(t);
+							return /* @__PURE__ */ g("div", {
 								role: "listitem",
-								className: "inline-flex items-center gap-1 rounded bg-muted px-2 py-0.5 text-body-1 text-foreground",
-								children: [t, !C && /* @__PURE__ */ m(_e, {
-									label: (w?.remove ?? fe)(t),
-									disabled: y,
-									onClick: () => q(e),
-									onKeyDown: (t) => st(t, e),
+								className: e(i.tag, "inline-flex items-center gap-1 rounded bg-muted px-2 py-0.5 text-body-1 text-foreground"),
+								children: [n, !w && /* @__PURE__ */ h(_e, {
+									label: (T?.remove ?? fe)(n),
+									disabled: b,
+									onClick: () => J(t),
+									onKeyDown: (e) => ct(e, t),
 									getFallback: Qe
 								})]
-							}, e);
+							}, t);
 						})
 					}),
-					A.length > 0 && /* @__PURE__ */ m("span", {
-						id: H,
+					j.length > 0 && /* @__PURE__ */ h("span", {
+						id: U,
 						hidden: !0,
-						children: (w?.summary ?? pe)(A.map(W))
+						children: (T?.summary ?? pe)(j.map(G))
 					}),
-					/* @__PURE__ */ m("input", {
+					/* @__PURE__ */ h("input", {
 						type: "text",
 						autoComplete: we,
-						...k,
-						...J.getComboboxProps(),
-						"aria-expanded": Y,
-						"aria-describedby": c(k["aria-describedby"], A.length > 0 ? H : void 0),
-						"aria-errormessage": Fe,
-						"aria-details": Ie,
-						ref: at,
-						disabled: y,
-						readOnly: C,
-						placeholder: A.length === 0 ? Se : "",
+						...A,
+						...Y.getComboboxProps(),
+						"aria-expanded": X,
+						"aria-describedby": ne(A["aria-describedby"], j.length > 0 ? U : void 0),
+						"aria-errormessage": Ie,
+						"aria-details": Le,
+						ref: ot,
+						disabled: b,
+						readOnly: w,
+						placeholder: j.length === 0 ? Se : "",
 						autoCapitalize: Te,
 						autoCorrect: Ee,
-						maxLength: S,
-						inputMode: T,
-						spellCheck: E,
-						enterKeyHint: D,
-						autoFocus: De,
-						tabIndex: Oe,
-						value: I,
+						maxLength: C,
+						inputMode: E,
+						spellCheck: D,
+						enterKeyHint: De,
+						autoFocus: Oe,
+						tabIndex: ke,
+						value: L,
 						onChange: (e) => {
-							M && (L(e.target.value), F || P(!0));
+							N && (R(e.target.value), I || F(!0));
 						},
-						onKeyDown: r(ze, ot),
-						onKeyUp: r(Be, J.onKeyUp),
-						onFocus: Le,
-						onBlur: Re,
-						className: "min-w-15 flex-1 bg-transparent py-0.5 text-body-1 text-foreground placeholder:text-muted-foreground focus:outline-hidden"
+						onKeyDown: r(Be, st),
+						onKeyUp: r(Ve, Y.onKeyUp),
+						onFocus: Re,
+						onBlur: ze,
+						className: e(i.input, "min-w-15 flex-1 bg-transparent py-0.5 text-body-1 text-foreground placeholder:text-muted-foreground focus:outline-hidden")
 					})
 				]
 			}),
-			/* @__PURE__ */ m("span", {
+			/* @__PURE__ */ h("span", {
 				role: "status",
 				className: "sr-only",
-				children: Q && X
+				children: et && Z
 			}),
-			/* @__PURE__ */ m(le, {
-				listbox: J,
-				layerId: et,
-				surfaceRef: nt,
-				floatingProps: rt,
-				open: F,
-				expanded: Y,
+			/* @__PURE__ */ h(le, {
+				listbox: Y,
+				layerId: tt,
+				surfaceRef: rt,
+				floatingProps: it,
+				open: I,
+				expanded: X,
 				showCheck: !1,
-				emptyContent: I === "" ? void 0 : /* @__PURE__ */ m("div", {
+				listboxClassName: i.listbox,
+				surfaceClassName: i.surface,
+				emptyContent: L === "" ? void 0 : /* @__PURE__ */ h("div", {
 					"aria-hidden": "true",
-					className: "px-3 py-1.5 text-body-1 text-muted-foreground",
-					children: X
+					className: e(i.emptyMessage, "px-3 py-1.5 text-body-1 text-muted-foreground"),
+					children: Z
 				}),
-				"aria-label": k["aria-label"],
-				"aria-labelledby": ct,
-				children: Y && J.items.map((e) => /* @__PURE__ */ m(ue, {
+				"aria-label": A["aria-label"],
+				"aria-labelledby": lt,
+				children: X && Y.items.map((e) => /* @__PURE__ */ h(ue, {
 					value: e.value,
 					label: e.label,
+					className: i.option,
 					children: e.label
 				}, e.value))
 			}),
-			/* @__PURE__ */ m(se, {
+			/* @__PURE__ */ h(se, {
 				name: Ce,
-				form: b,
-				disabled: y,
-				value: A,
+				form: x,
+				disabled: b,
+				value: j,
 				type: "text",
-				required: Ge,
-				onInvalid: K
+				required: k,
+				onInvalid: q
 			})
 		]
 	});
 };
-_.displayName = "TagPicker";
+v.displayName = "TagPicker";
 //#endregion
-export { _ as TagPicker };
+export { v as TagPicker };
 
 //# sourceMappingURL=TagPicker.mjs.map

package/dist/components/input/TagPicker.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TagPicker.mjs","names":["useId","useId$1","React","defaultRemoveLabel","label","defaultSummaryLabel","labels","defaultAddedLabel","count","defaultRemovedLabel","EMPTY","sameTags","a","b","value","index","TagRemoveButton","ref","usePreserveFocus","getFallback","cn","focusRing","DismissIcon","TagPicker","valueProp","openProp","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaInvalid","ariaRequired","ariaErrorMessage","ariaDetails","rest","props","onChange","warnDeprecated","field","useFieldContext","validates","required","readOnly","fieldProps","useFieldControl","invalidLook","isInvalidLook","selected","setSelected","useControllable","defaultValue","list","next","onValueChange","interactive","disabled","openState","setOpen","defaultOpen","onOpenChange","isClient","useIsClient","open","query","setQuery","wasInteractive","setWasInteractive","lockedOpen","announce","useAnnounce","rootRef","inputRef","summaryId","labelByValue","map","option","options","labelOf","available","chosen","filter","item","unknownValues","warnOnce","v","getInput","focusInput","addTag","removeTag","listbox","useListbox","expanded","noMatchesText","surfaceOpen","noMatches","useListboxPopup","rootMergedRef","useMergedRefs","inputMergedRef","controlRef","initial","current","form","removeButtons","from","handleInputKeyDown","event","handleTagKeyDown","buttons","intent","getArrowIntent","getDirection","listLabelledBy","className","setReference","inputFocusWithin","joinIds","placeholder","composeEventHandlers","onKeyDown","onKeyUp","ListboxSurface","Option","HiddenInput"],"sources":["../../../src/components/input/TagPicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { joinIds } from '../../lib/aria';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { warnDeprecated, warnOnce } from '../../lib/dev';\nimport { getArrowIntent, getDirection } from '../../lib/direction';\nimport { DismissIcon } from '../../lib/icons';\nimport { focusRing, inputFocusWithin, inputInvalidWithin } from '../../lib/styles';\nimport { useAnnounce } from '../../hooks/useAnnounce';\nimport { useControllable } from '../../hooks/useControllable';\nimport { useFieldContext, useFieldControl } from '../../hooks/useFieldControl';\nimport { useFormReset } from '../../hooks/useFormReset';\nimport { useId } from '../../hooks/useId';\nimport { useIsClient } from '../../hooks/useIsClient';\nimport { useListbox, type ListboxItem } from '../../hooks/useListbox';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { usePreserveFocus } from '../../hooks/usePreserveFocus';\nimport { HiddenInput } from '../internal/HiddenInput';\nimport { isInvalidLook } from './Input';\nimport { ListboxSurface, Option, useListboxPopup } from './Option';\nimport type { RoutedHandlers } from './routedHandlers';\n\n/** Represents a single selectable tag option. */\nexport interface TagPickerOption {\n  /** Unique identifier for the option. */\n  value: string;\n  /** Display label for the option. */\n  label: string;\n}\n\n/**\n * The TagPicker's built-in names, descriptions and announcements, for localization. Each member is\n * optional and falls back to its English default.\n */\nexport interface TagPickerLabels {\n  /** Name of a tag's remove button.\n   * @default (label) => `Remove ${label}`\n   */\n  remove?: (label: string) => string;\n  /** Name of the list of selected tags.\n   * @default 'Selected'\n   */\n  selected?: string;\n  /** Description of the input that sums up the selected tags (their labels, in order).\n   * @default (labels) => `Selected: ${labels.join(', ')}`\n   */\n  summary?: (labels: string[]) => string;\n  /** Announcement when a tag is added; `count` is the number of tags after the change.\n   * @default (label, count) => `${label} added, ${count} selected`\n   */\n  added?: (label: string, count: number) => string;\n  /** Announcement when a tag is removed; `count` is the number of tags after the change.\n   * @default (label, count) => `${label} removed, ${count} selected`\n   */\n  removed?: (label: string, count: number) => string;\n  /** Status text (announced, and shown in the popup) when the typed text matches no option.\n   * @default 'No matches'\n   */\n  noMatches?: string;\n}\n\nconst defaultRemoveLabel = (label: string) => `Remove ${label}`;\nconst defaultSummaryLabel = (labels: string[]) => `Selected: ${labels.join(', ')}`;\nconst defaultAddedLabel = (label: string, count: number) => `${label} added, ${count} selected`;\nconst defaultRemovedLabel = (label: string, count: number) => `${label} removed, ${count} selected`;\n\n/** Properties for the TagPicker component. */\nexport interface TagPickerProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'onChange' | 'defaultValue' | RoutedHandlers\n> {\n  /** Available options to choose from. */\n  options: readonly TagPickerOption[];\n  /** Controlled array of selected option values (`[]` for none). */\n  value?: readonly string[];\n  /**\n   * Initial selected values for uncontrolled usage; a form reset restores them.\n   * @default []\n   */\n  defaultValue?: readonly string[];\n  /**\n   * Called with the new selection when it changes: a tag is added or removed, or a form reset\n   * restores different tags.\n   */\n  onValueChange?: (value: string[]) => void;\n  /**\n   * Called with the new selection when it changes: a tag is added or removed, or a form reset\n   * restores different tags.\n   * @deprecated Use `onValueChange`.\n   */\n  onChange?: (value: string[]) => void;\n  /**\n   * Controlled open state of the option list. The list renders only in the browser: an open\n   * picker is closed in the server HTML and opens once it has hydrated.\n   */\n  open?: boolean;\n  /**\n   * Initial open state for uncontrolled usage. A picker that starts disabled or read-only starts\n   * closed. The list renders only in the browser: it is closed in the server HTML and opens once\n   * the picker has hydrated.\n   * @default false\n   */\n  defaultOpen?: boolean;\n  /** Called when the option list opens or closes. */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * Placeholder text shown when no tags are selected.\n   * @default 'Select...'\n   */\n  placeholder?: string;\n  /**\n   * Whether the tag picker is disabled: nothing can be added or removed, and the remove buttons\n   * leave the tab order.\n   * @default false\n   */\n  disabled?: boolean;\n  /** Name of the values in form submissions (one hidden input per value). */\n  name?: string;\n  /** Id of the form the values belong to, when the TagPicker is outside it. */\n  form?: string;\n  /**\n   * At least one tag is required to submit the form (native constraint validation). Like a native\n   * readonly input, a `readOnly` TagPicker does not block submission.\n   */\n  required?: boolean;\n  /**\n   * The `autocomplete` attribute of the `<input role=\"combobox\">`. Browser autofill is off unless\n   * you set it (for example `'on'`).\n   * @default 'off'\n   */\n  autoComplete?: string;\n  /** The maximum length of the typed text (`maxlength` of the `<input role=\"combobox\">`). */\n  maxLength?: number;\n  /**\n   * The selection cannot be changed: the input is read-only, the tags have no remove buttons, and\n   * the option list neither opens (click, keyboard, a controlled `open`) nor adds tags; Escape is\n   * left to the page. Turning it (or `disabled`) on while the list is open closes it\n   * (`onOpenChange(false)`); a focused remove button hands focus to the input.\n   */\n  readOnly?: boolean;\n  /**\n   * Names of the remove buttons and the tag list, the summary that describes the input, the\n   * announcements and the \"No matches\" text, for localization. Unset members keep their English\n   * defaults.\n   */\n  labels?: TagPickerLabels;\n  /** Called when the `<input role=\"combobox\">` receives focus (the root keeps other handlers). */\n  onFocus?: React.FocusEventHandler<HTMLInputElement>;\n  /** Called when the `<input role=\"combobox\">` loses focus. */\n  onBlur?: React.FocusEventHandler<HTMLInputElement>;\n  /**\n   * Called on a key press in the `<input role=\"combobox\">`, before the built-in listbox and tag\n   * keys; `event.preventDefault()` skips them.\n   */\n  onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;\n  /** Called when a key is released in the `<input role=\"combobox\">`. */\n  onKeyUp?: React.KeyboardEventHandler<HTMLInputElement>;\n  /** Ref to the `<input role=\"combobox\">` (the focusable element). */\n  controlRef?: React.Ref<HTMLInputElement>;\n  /** Ref to the root `<div>`. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\nconst EMPTY: readonly string[] = [];\n\n/** Whether two selections hold the same values in the same order. */\nfunction sameTags(a: readonly string[], b: readonly string[]): boolean {\n  return a.length === b.length && a.every((value, index) => value === b[index]);\n}\n\ninterface TagRemoveButtonProps {\n  /** The accessible name of the button. */\n  label: string;\n  disabled: boolean;\n  onClick: () => void;\n  onKeyDown: React.KeyboardEventHandler<HTMLButtonElement>;\n  /** The element that receives focus when this button unmounts while focused (the input). */\n  getFallback: () => HTMLElement | null;\n}\n\n/**\n * A tag's remove button. When it unmounts while focused (`readOnly` turned on, or a controlled\n * value dropped its tag), focus moves to the input instead of falling to `<body>` (C-DISABLED).\n */\nfunction TagRemoveButton({\n  label,\n  disabled,\n  onClick,\n  onKeyDown,\n  getFallback,\n}: TagRemoveButtonProps) {\n  const ref = React.useRef<HTMLButtonElement | null>(null);\n  usePreserveFocus(ref, getFallback);\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      data-wave-tagpicker-remove=\"\"\n      disabled={disabled}\n      aria-label={label}\n      className={cn(\n        // Padding and background set here (C-NATIVE), not left to an app-wide rule.\n        'ms-0.5 inline-flex rounded-sm bg-transparent p-0 text-muted-foreground not-disabled:not-aria-disabled:hover:text-foreground disabled:cursor-not-allowed',\n        focusRing,\n      )}\n      onClick={onClick}\n      onKeyDown={onKeyDown}\n    >\n      <DismissIcon size={12} />\n    </button>\n  );\n}\n\n/**\n * A multi-select combobox that shows the selected values as removable tags. Typing filters the\n * options and makes the first match active; ArrowDown/ArrowUp move the highlight\n * (`aria-activedescendant`), Enter adds the highlighted option and keeps the list open (with\n * nothing highlighted — no typed text, or text that matches no option — Enter is left to the\n * surrounding form), Escape closes the list (and then clears the typed text). Backspace in the\n * empty input moves focus to the last tag; Backspace or Delete there removes it. Additions and\n * removals are announced (\"Cherry removed, 2 selected\"), and so is \"No matches\" for text that\n * matches no option.\n *\n * The tags form a list named \"Selected\"; the input is described by a summary of the selected\n * labels (\"Selected: Apple, Banana\"). These built-in texts are English; `labels` localizes them.\n * The `<input>` receives `id`, `aria-label`, `aria-labelledby`, `aria-describedby`,\n * `aria-invalid`, `aria-required`, `aria-errormessage`, `aria-details`, `tabIndex`, `autoFocus`,\n * `onFocus`/`onBlur`/`onKeyDown`/`onKeyUp` and the text input attributes `autoComplete`,\n * `autoCapitalize`, `autoCorrect`, `maxLength`, `inputMode`, `spellCheck` and `enterKeyHint`.\n * `ref`, `className`, `style`, other `aria-*` attributes and the remaining props stay on the root\n * `<div>`. Inside a `Field` the input is labelled and described by it. The tag area shows the\n * error look whenever the input ends up `aria-invalid` (its own `aria-invalid` or a `Field`\n * error). With `name`/`required` the values take part in form submission, validation and reset.\n * Selected values without a matching option are shown with their raw value. The open list renders\n * only in the browser: an open list (`defaultOpen`, `open`) is closed in the server HTML and opens\n * once the picker has hydrated.\n */\nexport const TagPicker = (props: TagPickerProps) => {\n  const {\n    options,\n    value: valueProp,\n    defaultValue,\n    onValueChange,\n    onChange,\n    open: openProp,\n    defaultOpen,\n    onOpenChange,\n    placeholder = 'Select...',\n    disabled = false,\n    name,\n    form,\n    required,\n    autoComplete = 'off',\n    autoCapitalize,\n    autoCorrect,\n    maxLength,\n    readOnly,\n    labels,\n    inputMode,\n    spellCheck,\n    enterKeyHint,\n    autoFocus,\n    tabIndex,\n    id,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    'aria-invalid': ariaInvalid,\n    'aria-required': ariaRequired,\n    'aria-errormessage': ariaErrorMessage,\n    'aria-details': ariaDetails,\n    onFocus,\n    onBlur,\n    onKeyDown,\n    onKeyUp,\n    controlRef,\n    className,\n    ref,\n    ...rest\n  } = props;\n\n  if (onChange !== undefined) warnDeprecated('TagPicker', 'onChange', 'onValueChange');\n\n  const field = useFieldContext();\n  const isRequired = required ?? field?.required ?? false;\n  // Like a native readonly input, a read-only TagPicker is barred from constraint validation (the\n  // user could not fix it); its values are still submitted.\n  const validates = isRequired && !readOnly;\n  const fieldProps = useFieldControl({\n    id,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    'aria-invalid': ariaInvalid,\n    // An explicit `required={false}` wins over a required Field, so aria-required matches\n    // `isRequired`.\n    'aria-required': ariaRequired ?? required,\n  });\n  // The error look follows the resolved state: the consumer's `aria-invalid` or the Field's.\n  const invalidLook = isInvalidLook(false, fieldProps['aria-invalid']);\n\n  const [selected, setSelected] = useControllable<readonly string[]>(\n    valueProp,\n    defaultValue ?? EMPTY,\n    (next) => {\n      // The props are read only; the callbacks receive an array of their own.\n      const list = [...next];\n      onValueChange?.(list);\n      onChange?.(list);\n    },\n  );\n  const interactive = !disabled && !readOnly;\n  // A picker that starts disabled or read-only never shows its list, so it starts closed (no close\n  // to report later).\n  const [openState, setOpen] = useControllable(\n    openProp,\n    (defaultOpen ?? false) && interactive,\n    onOpenChange,\n  );\n  // The open list lives in a portal, which renders only in the browser: until then (the server\n  // HTML, hydration) the picker shows the closed inline list and reports it closed, so\n  // aria-controls and aria-activedescendant never name a missing element.\n  const isClient = useIsClient();\n  const open = openState && interactive && isClient;\n  const [query, setQuery] = React.useState('');\n  // Locking the control (readOnly/disabled) while typing drops the typed text (adjust-during-render\n  // pattern, C-HOOKS).\n  const [wasInteractive, setWasInteractive] = React.useState(interactive);\n  if (wasInteractive !== interactive) {\n    setWasInteractive(interactive);\n    if (!interactive) setQuery('');\n  }\n  // Locking also closes the list itself, not only the derived `open`, so unlocking does not reopen\n  // it without a user action. The close is reported through onOpenChange (a consumer callback from\n  // an effect, C-HOOKS); a controlled `open` that stays true is still not shown while locked.\n  const lockedOpen = !interactive && openState;\n  React.useEffect(() => {\n    if (lockedOpen) setOpen(false);\n  }, [lockedOpen, setOpen]);\n  const announce = useAnnounce();\n\n  const rootRef = React.useRef<HTMLDivElement | null>(null);\n  const inputRef = React.useRef<HTMLInputElement | null>(null);\n  const summaryId = useId('tagpicker-summary');\n\n  const labelByValue = React.useMemo(() => {\n    const map = new Map<string, string>();\n    for (const option of options) if (!map.has(option.value)) map.set(option.value, option.label);\n    return map;\n  }, [options]);\n  const labelOf = (value: string) => labelByValue.get(value) ?? value;\n\n  const available = React.useMemo<ListboxItem[]>(() => {\n    const chosen = new Set(selected);\n    return options\n      .filter((option) => !chosen.has(option.value))\n      .map((option) => ({ value: option.value, label: option.label }));\n  }, [options, selected]);\n  const filter = React.useMemo(\n    () =>\n      query\n        ? (item: ListboxItem) => item.label.toLowerCase().includes(query.toLowerCase())\n        : undefined,\n    [query],\n  );\n\n  // Unknown values render as tags labelled by the raw value (input-pickers#22).\n  const unknownValues = selected.filter((value) => !labelByValue.has(value)).join('\\u0000');\n  React.useEffect(() => {\n    if (!unknownValues) return;\n    warnOnce(\n      'TagPicker:unknown-value',\n      `TagPicker: the selected value(s) ${unknownValues\n        .split('\\u0000')\n        .map((v) => `\"${v}\"`)\n        .join(', ')} match no option; the raw value is shown as the tag label.`,\n    );\n  }, [unknownValues]);\n\n  const getInput = () => inputRef.current;\n  const focusInput = () => inputRef.current?.focus();\n\n  const addTag = (value: string) => {\n    if (!interactive || selected.includes(value)) return;\n    const next = [...selected, value];\n    setSelected(next);\n    setQuery('');\n    announce((labels?.added ?? defaultAddedLabel)(labelOf(value), next.length));\n  };\n\n  const removeTag = (value: string) => {\n    if (!interactive) return;\n    const next = selected.filter((v) => v !== value);\n    setSelected(next);\n    announce((labels?.removed ?? defaultRemovedLabel)(labelOf(value), next.length));\n    focusInput();\n  };\n\n  const listbox = useListbox({\n    open,\n    onOpenChange: (next) => setOpen(next),\n    mode: 'editable',\n    multiple: true,\n    selectedValues: selected,\n    onSelect: (value) => addTag(value),\n    items: available,\n    filter,\n    // Typing a filter makes its first match active (as in Combobox), so Enter adds what the list\n    // shows instead of submitting the form. Nothing is active on open or with the text cleared.\n    autoHighlight: query ? 'first' : false,\n    idPrefix: 'tagpicker-listbox',\n    onClearDraft: query ? () => setQuery('') : undefined,\n  });\n\n  // aria-expanded only while a listbox with options is shown (input-pickers#21).\n  const expanded = open && listbox.items.length > 0;\n  const noMatchesText = labels?.noMatches ?? 'No matches';\n  // The popup shows the options, or \"No matches\" for a query.\n  const surfaceOpen = open && (expanded || query !== '');\n  const noMatches = surfaceOpen && !expanded;\n  const { layerId, setReference, surfaceRef, floatingProps } = useListboxPopup({\n    open,\n    surfaceOpen,\n    onDismiss: () => setOpen(false),\n    rootRef,\n    anchorRef: inputRef,\n  });\n\n  const rootMergedRef = useMergedRefs<HTMLDivElement>(rootRef, ref);\n  const inputMergedRef = useMergedRefs<HTMLInputElement>(inputRef, controlRef);\n\n  useFormReset(\n    inputRef,\n    () => {\n      // Compared by content (C-FORMS): an inline default is a new array on every render, and a\n      // reset that keeps the same tags reports nothing.\n      const initial = defaultValue ?? EMPTY;\n      setSelected((current) => (sameTags(current, initial) ? current : [...initial]));\n      setQuery('');\n    },\n    form,\n  );\n\n  /** The tags' remove buttons, found from an element inside the component (no ref read). */\n  const removeButtons = (from: Element) =>\n    Array.from(\n      from\n        .closest('[data-wave-tagpicker-control]')\n        ?.querySelectorAll<HTMLButtonElement>('[data-wave-tagpicker-remove]') ?? [],\n    );\n\n  const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    // Read-only: no listbox keys at all (they would open the list, add or remove tags).\n    if (!interactive) return;\n    if (event.key === 'Escape' && open && !surfaceOpen && !event.nativeEvent.isComposing) {\n      // Open with nothing shown (every option selected, no query): close, but leave Escape to an\n      // enclosing layer (overlays#1) instead of consuming it for an invisible list.\n      setOpen(false);\n      return;\n    }\n    if (event.key === 'Backspace' && query === '' && selected.length > 0) {\n      // First Backspace moves to the last tag; Backspace/Delete there removes it (input-pickers#14).\n      event.preventDefault();\n      removeButtons(event.currentTarget).at(-1)?.focus();\n      return;\n    }\n    listbox.onKeyDown(event);\n  };\n\n  const handleTagKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>, value: string) => {\n    if (!interactive) return;\n    const buttons = removeButtons(event.currentTarget);\n    const index = buttons.indexOf(event.currentTarget);\n    if (event.key === 'Backspace' || event.key === 'Delete') {\n      event.preventDefault();\n      removeTag(value);\n      return;\n    }\n    if (event.key === 'Escape') {\n      // Consumed here, so an enclosing layer ignores it (spec §5.4).\n      event.preventDefault();\n      focusInput();\n      return;\n    }\n    const intent = getArrowIntent(event.key, {\n      orientation: 'horizontal',\n      dir: getDirection(event.currentTarget),\n    });\n    if (intent === 'prev' && index > 0) {\n      event.preventDefault();\n      buttons[index - 1].focus();\n    } else if (intent === 'next') {\n      event.preventDefault();\n      if (index < buttons.length - 1) buttons[index + 1].focus();\n      else focusInput();\n    }\n  };\n\n  const listLabelledBy =\n    fieldProps['aria-label'] === undefined\n      ? (fieldProps['aria-labelledby'] ?? field?.labelId)\n      : fieldProps['aria-labelledby'];\n\n  return (\n    <div {...rest} ref={rootMergedRef} className={cn('relative', className)}>\n      <div\n        ref={setReference}\n        data-wave-tagpicker-control=\"\"\n        role=\"group\"\n        aria-disabled={disabled || undefined}\n        className={cn(\n          'flex flex-wrap items-center gap-1 rounded border border-input border-b-stroke-accessible bg-background px-2 py-1.5',\n          inputFocusWithin,\n          invalidLook && inputInvalidWithin,\n          disabled && 'cursor-not-allowed opacity-50',\n        )}\n        onClick={(event) => {\n          if (disabled || (event.target as Element).closest('button')) return;\n          focusInput();\n          if (!open && interactive) setOpen(true);\n        }}\n      >\n        {selected.length > 0 && (\n          <div\n            role=\"list\"\n            aria-label={labels?.selected ?? 'Selected'}\n            className=\"flex flex-wrap items-center gap-1\"\n          >\n            {selected.map((value) => {\n              const label = labelOf(value);\n              return (\n                <div\n                  key={value}\n                  role=\"listitem\"\n                  className=\"inline-flex items-center gap-1 rounded bg-muted px-2 py-0.5 text-body-1 text-foreground\"\n                >\n                  {label}\n                  {!readOnly && (\n                    <TagRemoveButton\n                      label={(labels?.remove ?? defaultRemoveLabel)(label)}\n                      disabled={disabled}\n                      onClick={() => removeTag(value)}\n                      onKeyDown={(event) => handleTagKeyDown(event, value)}\n                      getFallback={getInput}\n                    />\n                  )}\n                </div>\n              );\n            })}\n          </div>\n        )}\n        {selected.length > 0 && (\n          // Describes the input. The list itself would read every \"Remove …\" button name too.\n          <span id={summaryId} hidden>\n            {(labels?.summary ?? defaultSummaryLabel)(selected.map(labelOf))}\n          </span>\n        )}\n        <input\n          type=\"text\"\n          autoComplete={autoComplete}\n          {...fieldProps}\n          {...listbox.getComboboxProps()}\n          aria-expanded={expanded}\n          aria-describedby={joinIds(\n            fieldProps['aria-describedby'],\n            selected.length > 0 ? summaryId : undefined,\n          )}\n          aria-errormessage={ariaErrorMessage}\n          aria-details={ariaDetails}\n          ref={inputMergedRef}\n          disabled={disabled}\n          readOnly={readOnly}\n          placeholder={selected.length === 0 ? placeholder : ''}\n          autoCapitalize={autoCapitalize}\n          autoCorrect={autoCorrect}\n          maxLength={maxLength}\n          inputMode={inputMode}\n          spellCheck={spellCheck}\n          enterKeyHint={enterKeyHint}\n          autoFocus={autoFocus}\n          tabIndex={tabIndex}\n          value={query}\n          onChange={(event) => {\n            if (!interactive) return;\n            setQuery(event.target.value);\n            if (!open) setOpen(true);\n          }}\n          onKeyDown={composeEventHandlers(onKeyDown, handleInputKeyDown)}\n          onKeyUp={composeEventHandlers(onKeyUp, listbox.onKeyUp)}\n          onFocus={onFocus}\n          onBlur={onBlur}\n          className=\"min-w-15 flex-1 bg-transparent py-0.5 text-body-1 text-foreground placeholder:text-muted-foreground focus:outline-hidden\"\n        />\n      </div>\n      {/* Mounted before its text: a live region added together with its text is not announced by\n          every screen reader. The row in the popup is the visible copy. */}\n      <span role=\"status\" className=\"sr-only\">\n        {noMatches && noMatchesText}\n      </span>\n      <ListboxSurface\n        listbox={listbox}\n        layerId={layerId}\n        surfaceRef={surfaceRef}\n        floatingProps={floatingProps}\n        open={open}\n        expanded={expanded}\n        showCheck={false}\n        emptyContent={\n          query !== '' ? (\n            <div aria-hidden=\"true\" className=\"px-3 py-1.5 text-body-1 text-muted-foreground\">\n              {noMatchesText}\n            </div>\n          ) : undefined\n        }\n        aria-label={fieldProps['aria-label']}\n        aria-labelledby={listLabelledBy}\n      >\n        {expanded &&\n          listbox.items.map((item) => (\n            <Option key={item.value} value={item.value} label={item.label}>\n              {item.label}\n            </Option>\n          ))}\n      </ListboxSurface>\n      <HiddenInput\n        name={name}\n        form={form}\n        disabled={disabled}\n        value={selected}\n        type=\"text\"\n        required={validates}\n        onInvalid={focusInput}\n      />\n    </div>\n  );\n};\nTagPicker.displayName = 'TagPicker';\n"],"mappings":"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"}
+{"version":3,"file":"TagPicker.mjs","names":["useId","useId$1","React","defaultRemoveLabel","label","defaultSummaryLabel","labels","defaultAddedLabel","count","defaultRemovedLabel","EMPTY","sameTags","a","b","value","index","TagRemoveButton","ref","usePreserveFocus","getFallback","cn","tagPickerClassNames","focusRing","DismissIcon","TagPicker","valueProp","openProp","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaInvalid","ariaRequired","ariaErrorMessage","ariaDetails","rest","props","onChange","warnDeprecated","field","useFieldContext","validates","required","readOnly","fieldProps","useFieldControl","invalidLook","isInvalidLook","selected","setSelected","useControllable","defaultValue","list","next","onValueChange","interactive","disabled","openState","setOpen","defaultOpen","onOpenChange","isClient","useIsClient","open","query","setQuery","wasInteractive","setWasInteractive","lockedOpen","announce","useAnnounce","rootRef","inputRef","summaryId","labelByValue","map","option","options","labelOf","available","chosen","filter","item","unknownValues","warnOnce","v","getInput","focusInput","addTag","removeTag","listbox","useListbox","expanded","noMatchesText","surfaceOpen","noMatches","useListboxPopup","rootMergedRef","useMergedRefs","inputMergedRef","controlRef","initial","current","form","removeButtons","from","handleInputKeyDown","event","handleTagKeyDown","buttons","intent","getArrowIntent","getDirection","listLabelledBy","className","setReference","inputFocusWithin","joinIds","placeholder","composeEventHandlers","onKeyDown","onKeyUp","ListboxSurface","Option","HiddenInput"],"sources":["../../../src/components/input/TagPicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { joinIds } from '../../lib/aria';\nimport { tagPickerClassNames } from '../../lib/classNames';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { warnDeprecated, warnOnce } from '../../lib/dev';\nimport { getArrowIntent, getDirection } from '../../lib/direction';\nimport { DismissIcon } from '../../lib/icons';\nimport { focusRing, inputFocusWithin, inputInvalidWithin } from '../../lib/styles';\nimport { useAnnounce } from '../../hooks/useAnnounce';\nimport { useControllable } from '../../hooks/useControllable';\nimport { useFieldContext, useFieldControl } from '../../hooks/useFieldControl';\nimport { useFormReset } from '../../hooks/useFormReset';\nimport { useId } from '../../hooks/useId';\nimport { useIsClient } from '../../hooks/useIsClient';\nimport { useListbox, type ListboxItem } from '../../hooks/useListbox';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { usePreserveFocus } from '../../hooks/usePreserveFocus';\nimport { HiddenInput } from '../internal/HiddenInput';\nimport { isInvalidLook } from './Input';\nimport { ListboxSurface, Option, useListboxPopup } from './Option';\nimport type { RoutedHandlers } from './routedHandlers';\n\n/** Represents a single selectable tag option. */\nexport interface TagPickerOption {\n  /** Unique identifier for the option. */\n  value: string;\n  /** Display label for the option. */\n  label: string;\n}\n\n/**\n * The TagPicker's built-in names, descriptions and announcements, for localization. Each member is\n * optional and falls back to its English default.\n */\nexport interface TagPickerLabels {\n  /** Name of a tag's remove button.\n   * @default (label) => `Remove ${label}`\n   */\n  remove?: (label: string) => string;\n  /** Name of the list of selected tags.\n   * @default 'Selected'\n   */\n  selected?: string;\n  /** Description of the input that sums up the selected tags (their labels, in order).\n   * @default (labels) => `Selected: ${labels.join(', ')}`\n   */\n  summary?: (labels: string[]) => string;\n  /** Announcement when a tag is added; `count` is the number of tags after the change.\n   * @default (label, count) => `${label} added, ${count} selected`\n   */\n  added?: (label: string, count: number) => string;\n  /** Announcement when a tag is removed; `count` is the number of tags after the change.\n   * @default (label, count) => `${label} removed, ${count} selected`\n   */\n  removed?: (label: string, count: number) => string;\n  /** Status text (announced, and shown in the popup) when the typed text matches no option.\n   * @default 'No matches'\n   */\n  noMatches?: string;\n}\n\nconst defaultRemoveLabel = (label: string) => `Remove ${label}`;\nconst defaultSummaryLabel = (labels: string[]) => `Selected: ${labels.join(', ')}`;\nconst defaultAddedLabel = (label: string, count: number) => `${label} added, ${count} selected`;\nconst defaultRemovedLabel = (label: string, count: number) => `${label} removed, ${count} selected`;\n\n/** Properties for the TagPicker component. */\nexport interface TagPickerProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'onChange' | 'defaultValue' | RoutedHandlers\n> {\n  /** Available options to choose from. */\n  options: readonly TagPickerOption[];\n  /** Controlled array of selected option values (`[]` for none). */\n  value?: readonly string[];\n  /**\n   * Initial selected values for uncontrolled usage; a form reset restores them.\n   * @default []\n   */\n  defaultValue?: readonly string[];\n  /**\n   * Called with the new selection when it changes: a tag is added or removed, or a form reset\n   * restores different tags.\n   */\n  onValueChange?: (value: string[]) => void;\n  /**\n   * Called with the new selection when it changes: a tag is added or removed, or a form reset\n   * restores different tags.\n   * @deprecated Use `onValueChange`.\n   */\n  onChange?: (value: string[]) => void;\n  /**\n   * Controlled open state of the option list. The list renders only in the browser: an open\n   * picker is closed in the server HTML and opens once it has hydrated.\n   */\n  open?: boolean;\n  /**\n   * Initial open state for uncontrolled usage. A picker that starts disabled or read-only starts\n   * closed. The list renders only in the browser: it is closed in the server HTML and opens once\n   * the picker has hydrated.\n   * @default false\n   */\n  defaultOpen?: boolean;\n  /** Called when the option list opens or closes. */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * Placeholder text shown when no tags are selected.\n   * @default 'Select...'\n   */\n  placeholder?: string;\n  /**\n   * Whether the tag picker is disabled: nothing can be added or removed, and the remove buttons\n   * leave the tab order.\n   * @default false\n   */\n  disabled?: boolean;\n  /** Name of the values in form submissions (one hidden input per value). */\n  name?: string;\n  /** Id of the form the values belong to, when the TagPicker is outside it. */\n  form?: string;\n  /**\n   * At least one tag is required to submit the form (native constraint validation). Like a native\n   * readonly input, a `readOnly` TagPicker does not block submission.\n   */\n  required?: boolean;\n  /**\n   * The `autocomplete` attribute of the `<input role=\"combobox\">`. Browser autofill is off unless\n   * you set it (for example `'on'`).\n   * @default 'off'\n   */\n  autoComplete?: string;\n  /** The maximum length of the typed text (`maxlength` of the `<input role=\"combobox\">`). */\n  maxLength?: number;\n  /**\n   * The selection cannot be changed: the input is read-only, the tags have no remove buttons, and\n   * the option list neither opens (click, keyboard, a controlled `open`) nor adds tags; Escape is\n   * left to the page. Turning it (or `disabled`) on while the list is open closes it\n   * (`onOpenChange(false)`); a focused remove button hands focus to the input.\n   */\n  readOnly?: boolean;\n  /**\n   * Names of the remove buttons and the tag list, the summary that describes the input, the\n   * announcements and the \"No matches\" text, for localization. Unset members keep their English\n   * defaults.\n   */\n  labels?: TagPickerLabels;\n  /** Called when the `<input role=\"combobox\">` receives focus (the root keeps other handlers). */\n  onFocus?: React.FocusEventHandler<HTMLInputElement>;\n  /** Called when the `<input role=\"combobox\">` loses focus. */\n  onBlur?: React.FocusEventHandler<HTMLInputElement>;\n  /**\n   * Called on a key press in the `<input role=\"combobox\">`, before the built-in listbox and tag\n   * keys; `event.preventDefault()` skips them.\n   */\n  onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;\n  /** Called when a key is released in the `<input role=\"combobox\">`. */\n  onKeyUp?: React.KeyboardEventHandler<HTMLInputElement>;\n  /** Ref to the `<input role=\"combobox\">` (the focusable element). */\n  controlRef?: React.Ref<HTMLInputElement>;\n  /** Ref to the root `<div>`. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\nconst EMPTY: readonly string[] = [];\n\n/** Whether two selections hold the same values in the same order. */\nfunction sameTags(a: readonly string[], b: readonly string[]): boolean {\n  return a.length === b.length && a.every((value, index) => value === b[index]);\n}\n\ninterface TagRemoveButtonProps {\n  /** The accessible name of the button. */\n  label: string;\n  disabled: boolean;\n  onClick: () => void;\n  onKeyDown: React.KeyboardEventHandler<HTMLButtonElement>;\n  /** The element that receives focus when this button unmounts while focused (the input). */\n  getFallback: () => HTMLElement | null;\n}\n\n/**\n * A tag's remove button. When it unmounts while focused (`readOnly` turned on, or a controlled\n * value dropped its tag), focus moves to the input instead of falling to `<body>` (C-DISABLED).\n */\nfunction TagRemoveButton({\n  label,\n  disabled,\n  onClick,\n  onKeyDown,\n  getFallback,\n}: TagRemoveButtonProps) {\n  const ref = React.useRef<HTMLButtonElement | null>(null);\n  usePreserveFocus(ref, getFallback);\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      data-wave-tagpicker-remove=\"\"\n      disabled={disabled}\n      aria-label={label}\n      className={cn(\n        tagPickerClassNames.removeButton,\n        // Padding and background set here (C-NATIVE), not left to an app-wide rule.\n        'ms-0.5 inline-flex rounded-sm bg-transparent p-0 text-muted-foreground not-disabled:not-aria-disabled:hover:text-foreground disabled:cursor-not-allowed',\n        focusRing,\n      )}\n      onClick={onClick}\n      onKeyDown={onKeyDown}\n    >\n      <DismissIcon size={12} />\n    </button>\n  );\n}\n\n/**\n * A multi-select combobox that shows the selected values as removable tags. Typing filters the\n * options and makes the first match active; ArrowDown/ArrowUp move the highlight\n * (`aria-activedescendant`), Enter adds the highlighted option and keeps the list open (with\n * nothing highlighted — no typed text, or text that matches no option — Enter is left to the\n * surrounding form), Escape closes the list (and then clears the typed text). Backspace in the\n * empty input moves focus to the last tag; Backspace or Delete there removes it. Additions and\n * removals are announced (\"Cherry removed, 2 selected\"), and so is \"No matches\" for text that\n * matches no option.\n *\n * The tags form a list named \"Selected\"; the input is described by a summary of the selected\n * labels (\"Selected: Apple, Banana\"). These built-in texts are English; `labels` localizes them.\n * The `<input>` receives `id`, `aria-label`, `aria-labelledby`, `aria-describedby`,\n * `aria-invalid`, `aria-required`, `aria-errormessage`, `aria-details`, `tabIndex`, `autoFocus`,\n * `onFocus`/`onBlur`/`onKeyDown`/`onKeyUp` and the text input attributes `autoComplete`,\n * `autoCapitalize`, `autoCorrect`, `maxLength`, `inputMode`, `spellCheck` and `enterKeyHint`.\n * `ref`, `className`, `style`, other `aria-*` attributes and the remaining props stay on the root\n * `<div>`. Inside a `Field` the input is labelled and described by it. The tag area shows the\n * error look whenever the input ends up `aria-invalid` (its own `aria-invalid` or a `Field`\n * error). With `name`/`required` the values take part in form submission, validation and reset.\n * Selected values without a matching option are shown with their raw value. The open list renders\n * only in the browser: an open list (`defaultOpen`, `open`) is closed in the server HTML and opens\n * once the picker has hydrated.\n */\nexport const TagPicker = (props: TagPickerProps) => {\n  const {\n    options,\n    value: valueProp,\n    defaultValue,\n    onValueChange,\n    onChange,\n    open: openProp,\n    defaultOpen,\n    onOpenChange,\n    placeholder = 'Select...',\n    disabled = false,\n    name,\n    form,\n    required,\n    autoComplete = 'off',\n    autoCapitalize,\n    autoCorrect,\n    maxLength,\n    readOnly,\n    labels,\n    inputMode,\n    spellCheck,\n    enterKeyHint,\n    autoFocus,\n    tabIndex,\n    id,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    'aria-invalid': ariaInvalid,\n    'aria-required': ariaRequired,\n    'aria-errormessage': ariaErrorMessage,\n    'aria-details': ariaDetails,\n    onFocus,\n    onBlur,\n    onKeyDown,\n    onKeyUp,\n    controlRef,\n    className,\n    ref,\n    ...rest\n  } = props;\n\n  if (onChange !== undefined) warnDeprecated('TagPicker', 'onChange', 'onValueChange');\n\n  const field = useFieldContext();\n  const isRequired = required ?? field?.required ?? false;\n  // Like a native readonly input, a read-only TagPicker is barred from constraint validation (the\n  // user could not fix it); its values are still submitted.\n  const validates = isRequired && !readOnly;\n  const fieldProps = useFieldControl({\n    id,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    'aria-invalid': ariaInvalid,\n    // An explicit `required={false}` wins over a required Field, so aria-required matches\n    // `isRequired`.\n    'aria-required': ariaRequired ?? required,\n  });\n  // The error look follows the resolved state: the consumer's `aria-invalid` or the Field's.\n  const invalidLook = isInvalidLook(false, fieldProps['aria-invalid']);\n\n  const [selected, setSelected] = useControllable<readonly string[]>(\n    valueProp,\n    defaultValue ?? EMPTY,\n    (next) => {\n      // The props are read only; the callbacks receive an array of their own.\n      const list = [...next];\n      onValueChange?.(list);\n      onChange?.(list);\n    },\n  );\n  const interactive = !disabled && !readOnly;\n  // A picker that starts disabled or read-only never shows its list, so it starts closed (no close\n  // to report later).\n  const [openState, setOpen] = useControllable(\n    openProp,\n    (defaultOpen ?? false) && interactive,\n    onOpenChange,\n  );\n  // The open list lives in a portal, which renders only in the browser: until then (the server\n  // HTML, hydration) the picker shows the closed inline list and reports it closed, so\n  // aria-controls and aria-activedescendant never name a missing element.\n  const isClient = useIsClient();\n  const open = openState && interactive && isClient;\n  const [query, setQuery] = React.useState('');\n  // Locking the control (readOnly/disabled) while typing drops the typed text (adjust-during-render\n  // pattern, C-HOOKS).\n  const [wasInteractive, setWasInteractive] = React.useState(interactive);\n  if (wasInteractive !== interactive) {\n    setWasInteractive(interactive);\n    if (!interactive) setQuery('');\n  }\n  // Locking also closes the list itself, not only the derived `open`, so unlocking does not reopen\n  // it without a user action. The close is reported through onOpenChange (a consumer callback from\n  // an effect, C-HOOKS); a controlled `open` that stays true is still not shown while locked.\n  const lockedOpen = !interactive && openState;\n  React.useEffect(() => {\n    if (lockedOpen) setOpen(false);\n  }, [lockedOpen, setOpen]);\n  const announce = useAnnounce();\n\n  const rootRef = React.useRef<HTMLDivElement | null>(null);\n  const inputRef = React.useRef<HTMLInputElement | null>(null);\n  const summaryId = useId('tagpicker-summary');\n\n  const labelByValue = React.useMemo(() => {\n    const map = new Map<string, string>();\n    for (const option of options) if (!map.has(option.value)) map.set(option.value, option.label);\n    return map;\n  }, [options]);\n  const labelOf = (value: string) => labelByValue.get(value) ?? value;\n\n  const available = React.useMemo<ListboxItem[]>(() => {\n    const chosen = new Set(selected);\n    return options\n      .filter((option) => !chosen.has(option.value))\n      .map((option) => ({ value: option.value, label: option.label }));\n  }, [options, selected]);\n  const filter = React.useMemo(\n    () =>\n      query\n        ? (item: ListboxItem) => item.label.toLowerCase().includes(query.toLowerCase())\n        : undefined,\n    [query],\n  );\n\n  // Unknown values render as tags labelled by the raw value (input-pickers#22).\n  const unknownValues = selected.filter((value) => !labelByValue.has(value)).join('\\u0000');\n  React.useEffect(() => {\n    if (!unknownValues) return;\n    warnOnce(\n      'TagPicker:unknown-value',\n      `TagPicker: the selected value(s) ${unknownValues\n        .split('\\u0000')\n        .map((v) => `\"${v}\"`)\n        .join(', ')} match no option; the raw value is shown as the tag label.`,\n    );\n  }, [unknownValues]);\n\n  const getInput = () => inputRef.current;\n  const focusInput = () => inputRef.current?.focus();\n\n  const addTag = (value: string) => {\n    if (!interactive || selected.includes(value)) return;\n    const next = [...selected, value];\n    setSelected(next);\n    setQuery('');\n    announce((labels?.added ?? defaultAddedLabel)(labelOf(value), next.length));\n  };\n\n  const removeTag = (value: string) => {\n    if (!interactive) return;\n    const next = selected.filter((v) => v !== value);\n    setSelected(next);\n    announce((labels?.removed ?? defaultRemovedLabel)(labelOf(value), next.length));\n    focusInput();\n  };\n\n  const listbox = useListbox({\n    open,\n    onOpenChange: (next) => setOpen(next),\n    mode: 'editable',\n    multiple: true,\n    selectedValues: selected,\n    onSelect: (value) => addTag(value),\n    items: available,\n    filter,\n    // Typing a filter makes its first match active (as in Combobox), so Enter adds what the list\n    // shows instead of submitting the form. Nothing is active on open or with the text cleared.\n    autoHighlight: query ? 'first' : false,\n    idPrefix: 'tagpicker-listbox',\n    onClearDraft: query ? () => setQuery('') : undefined,\n  });\n\n  // aria-expanded only while a listbox with options is shown (input-pickers#21).\n  const expanded = open && listbox.items.length > 0;\n  const noMatchesText = labels?.noMatches ?? 'No matches';\n  // The popup shows the options, or \"No matches\" for a query.\n  const surfaceOpen = open && (expanded || query !== '');\n  const noMatches = surfaceOpen && !expanded;\n  const { layerId, setReference, surfaceRef, floatingProps } = useListboxPopup({\n    open,\n    surfaceOpen,\n    onDismiss: () => setOpen(false),\n    rootRef,\n    anchorRef: inputRef,\n  });\n\n  const rootMergedRef = useMergedRefs<HTMLDivElement>(rootRef, ref);\n  const inputMergedRef = useMergedRefs<HTMLInputElement>(inputRef, controlRef);\n\n  useFormReset(\n    inputRef,\n    () => {\n      // Compared by content (C-FORMS): an inline default is a new array on every render, and a\n      // reset that keeps the same tags reports nothing.\n      const initial = defaultValue ?? EMPTY;\n      setSelected((current) => (sameTags(current, initial) ? current : [...initial]));\n      setQuery('');\n    },\n    form,\n  );\n\n  /** The tags' remove buttons, found from an element inside the component (no ref read). */\n  const removeButtons = (from: Element) =>\n    Array.from(\n      from\n        .closest('[data-wave-tagpicker-control]')\n        ?.querySelectorAll<HTMLButtonElement>('[data-wave-tagpicker-remove]') ?? [],\n    );\n\n  const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    // Read-only: no listbox keys at all (they would open the list, add or remove tags).\n    if (!interactive) return;\n    if (event.key === 'Escape' && open && !surfaceOpen && !event.nativeEvent.isComposing) {\n      // Open with nothing shown (every option selected, no query): close, but leave Escape to an\n      // enclosing layer (overlays#1) instead of consuming it for an invisible list.\n      setOpen(false);\n      return;\n    }\n    if (event.key === 'Backspace' && query === '' && selected.length > 0) {\n      // First Backspace moves to the last tag; Backspace/Delete there removes it (input-pickers#14).\n      event.preventDefault();\n      removeButtons(event.currentTarget).at(-1)?.focus();\n      return;\n    }\n    listbox.onKeyDown(event);\n  };\n\n  const handleTagKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>, value: string) => {\n    if (!interactive) return;\n    const buttons = removeButtons(event.currentTarget);\n    const index = buttons.indexOf(event.currentTarget);\n    if (event.key === 'Backspace' || event.key === 'Delete') {\n      event.preventDefault();\n      removeTag(value);\n      return;\n    }\n    if (event.key === 'Escape') {\n      // Consumed here, so an enclosing layer ignores it (spec §5.4).\n      event.preventDefault();\n      focusInput();\n      return;\n    }\n    const intent = getArrowIntent(event.key, {\n      orientation: 'horizontal',\n      dir: getDirection(event.currentTarget),\n    });\n    if (intent === 'prev' && index > 0) {\n      event.preventDefault();\n      buttons[index - 1].focus();\n    } else if (intent === 'next') {\n      event.preventDefault();\n      if (index < buttons.length - 1) buttons[index + 1].focus();\n      else focusInput();\n    }\n  };\n\n  const listLabelledBy =\n    fieldProps['aria-label'] === undefined\n      ? (fieldProps['aria-labelledby'] ?? field?.labelId)\n      : fieldProps['aria-labelledby'];\n\n  return (\n    <div\n      {...rest}\n      ref={rootMergedRef}\n      className={cn(tagPickerClassNames.root, 'relative', className)}\n    >\n      <div\n        ref={setReference}\n        data-wave-tagpicker-control=\"\"\n        role=\"group\"\n        aria-disabled={disabled || undefined}\n        className={cn(\n          tagPickerClassNames.control,\n          'flex flex-wrap items-center gap-1 rounded border border-input border-b-stroke-accessible bg-background px-2 py-1.5',\n          inputFocusWithin,\n          invalidLook && inputInvalidWithin,\n          disabled && 'cursor-not-allowed opacity-50',\n        )}\n        onClick={(event) => {\n          if (disabled || (event.target as Element).closest('button')) return;\n          focusInput();\n          if (!open && interactive) setOpen(true);\n        }}\n      >\n        {selected.length > 0 && (\n          <div\n            role=\"list\"\n            aria-label={labels?.selected ?? 'Selected'}\n            className={cn(tagPickerClassNames.group, 'flex flex-wrap items-center gap-1')}\n          >\n            {selected.map((value) => {\n              const label = labelOf(value);\n              return (\n                <div\n                  key={value}\n                  role=\"listitem\"\n                  className={cn(\n                    tagPickerClassNames.tag,\n                    'inline-flex items-center gap-1 rounded bg-muted px-2 py-0.5 text-body-1 text-foreground',\n                  )}\n                >\n                  {label}\n                  {!readOnly && (\n                    <TagRemoveButton\n                      label={(labels?.remove ?? defaultRemoveLabel)(label)}\n                      disabled={disabled}\n                      onClick={() => removeTag(value)}\n                      onKeyDown={(event) => handleTagKeyDown(event, value)}\n                      getFallback={getInput}\n                    />\n                  )}\n                </div>\n              );\n            })}\n          </div>\n        )}\n        {selected.length > 0 && (\n          // Describes the input. The list itself would read every \"Remove …\" button name too.\n          <span id={summaryId} hidden>\n            {(labels?.summary ?? defaultSummaryLabel)(selected.map(labelOf))}\n          </span>\n        )}\n        <input\n          type=\"text\"\n          autoComplete={autoComplete}\n          {...fieldProps}\n          {...listbox.getComboboxProps()}\n          aria-expanded={expanded}\n          aria-describedby={joinIds(\n            fieldProps['aria-describedby'],\n            selected.length > 0 ? summaryId : undefined,\n          )}\n          aria-errormessage={ariaErrorMessage}\n          aria-details={ariaDetails}\n          ref={inputMergedRef}\n          disabled={disabled}\n          readOnly={readOnly}\n          placeholder={selected.length === 0 ? placeholder : ''}\n          autoCapitalize={autoCapitalize}\n          autoCorrect={autoCorrect}\n          maxLength={maxLength}\n          inputMode={inputMode}\n          spellCheck={spellCheck}\n          enterKeyHint={enterKeyHint}\n          autoFocus={autoFocus}\n          tabIndex={tabIndex}\n          value={query}\n          onChange={(event) => {\n            if (!interactive) return;\n            setQuery(event.target.value);\n            if (!open) setOpen(true);\n          }}\n          onKeyDown={composeEventHandlers(onKeyDown, handleInputKeyDown)}\n          onKeyUp={composeEventHandlers(onKeyUp, listbox.onKeyUp)}\n          onFocus={onFocus}\n          onBlur={onBlur}\n          className={cn(\n            tagPickerClassNames.input,\n            'min-w-15 flex-1 bg-transparent py-0.5 text-body-1 text-foreground placeholder:text-muted-foreground focus:outline-hidden',\n          )}\n        />\n      </div>\n      {/* Mounted before its text: a live region added together with its text is not announced by\n          every screen reader. The row in the popup is the visible copy. */}\n      <span role=\"status\" className=\"sr-only\">\n        {noMatches && noMatchesText}\n      </span>\n      <ListboxSurface\n        listbox={listbox}\n        layerId={layerId}\n        surfaceRef={surfaceRef}\n        floatingProps={floatingProps}\n        open={open}\n        expanded={expanded}\n        showCheck={false}\n        listboxClassName={tagPickerClassNames.listbox}\n        surfaceClassName={tagPickerClassNames.surface}\n        emptyContent={\n          query !== '' ? (\n            <div\n              aria-hidden=\"true\"\n              className={cn(\n                tagPickerClassNames.emptyMessage,\n                'px-3 py-1.5 text-body-1 text-muted-foreground',\n              )}\n            >\n              {noMatchesText}\n            </div>\n          ) : undefined\n        }\n        aria-label={fieldProps['aria-label']}\n        aria-labelledby={listLabelledBy}\n      >\n        {expanded &&\n          listbox.items.map((item) => (\n            <Option\n              key={item.value}\n              value={item.value}\n              label={item.label}\n              className={tagPickerClassNames.option}\n            >\n              {item.label}\n            </Option>\n          ))}\n      </ListboxSurface>\n      <HiddenInput\n        name={name}\n        form={form}\n        disabled={disabled}\n        value={selected}\n        type=\"text\"\n        required={validates}\n        onInvalid={focusInput}\n      />\n    </div>\n  );\n};\nTagPicker.displayName = 'TagPicker';\n"],"mappings":"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"}

package/dist/components/input/Textarea.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/aria.cjs"),r=require("../../hooks/useFieldControl.cjs"),i=require("../../lib/styles.cjs"),a=require("./Input.cjs");let o=require("react");o=e.__toESM(o,1);let s=require("react/jsx-runtime");var c=({error:e,errorMessageProps:o,className:c,ref:l,id:u,"aria-label":d,"aria-labelledby":f,"aria-describedby":p,"aria-invalid":m,"aria-required":h,"aria-errormessage":g,required:_,...v})=>{let{invalid:y,messageId:b,message:x}=a.useControlErrorMessage(e,o,m),S=r.useFieldControl({id:u,"aria-label":d,"aria-labelledby":f,"aria-describedby":n.joinIds(p,b),"aria-invalid":m??(y||void 0),"aria-required":h,required:_},{nativeRequired:!0}),C=a.isInvalidLook(y,S[`aria-invalid`]),w=(0,s.jsx)(`textarea`,{ref:l,className:t.cn(`min-h-20 w-full resize-y rounded border border-input border-b-stroke-accessible bg-background px-3 py-2 text-body-1 text-foreground`,`placeholder:text-muted-foreground`,i.inputFocus,`disabled:cursor-not-allowed disabled:opacity-50`,C&&`border-destructive focus:border-b-destructive`,c),...v,...S,"aria-errormessage":n.joinIds(g,b)});return x?(0,s.jsxs)(s.Fragment,{children:[w,x]}):w};c.displayName=`Textarea`,exports.Textarea=c;
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/classNames.cjs"),r=require("../../lib/aria.cjs"),i=require("../../hooks/useFieldControl.cjs"),a=require("../../lib/styles.cjs"),o=require("./Input.cjs");let s=require("react");s=e.__toESM(s,1);let c=require("react/jsx-runtime");var l=({error:e,errorMessageProps:s,className:l,ref:u,id:d,"aria-label":f,"aria-labelledby":p,"aria-describedby":m,"aria-invalid":h,"aria-required":g,"aria-errormessage":_,required:v,...y})=>{let{invalid:b,messageId:x,message:S}=o.useControlErrorMessage(e,s,h,n.textareaClassNames.errorMessage),C=i.useFieldControl({id:d,"aria-label":f,"aria-labelledby":p,"aria-describedby":r.joinIds(m,x),"aria-invalid":h??(b||void 0),"aria-required":g,required:v},{nativeRequired:!0}),w=o.isInvalidLook(b,C[`aria-invalid`]),T=(0,c.jsx)(`textarea`,{ref:u,className:t.cn(n.textareaClassNames.root,`min-h-20 w-full resize-y rounded border border-input border-b-stroke-accessible bg-background px-3 py-2 text-body-1 text-foreground`,`placeholder:text-muted-foreground`,a.inputFocus,`disabled:cursor-not-allowed disabled:opacity-50`,w&&`border-destructive focus:border-b-destructive`,l),...y,...C,"aria-errormessage":r.joinIds(_,x)});return S?(0,c.jsxs)(c.Fragment,{children:[T,S]}):T};l.displayName=`Textarea`,exports.Textarea=l;
 //# sourceMappingURL=Textarea.cjs.map