@vjdesigns/vjdesigns-ui 2.0.0 → 2.2.0

package/dist/components/data-display/Chat/Chat.mjs

@@ -0,0 +1,301 @@
+import { useControllableState as e } from "../../../hooks/useControllableState.mjs";
+import { useMessages as t } from "../../utilities/LocaleProvider/LocaleProvider.mjs";
+import { useClipboard as n } from "../../../hooks/useClipboard.mjs";
+import { useReducedMotion as r } from "../../../hooks/useEnvironment.mjs";
+import { cx as i } from "../../../utils/cx.mjs";
+import { announce as a } from "../../../utils/announce.mjs";
+import { VisuallyHidden as o } from "../../utilities/VisuallyHidden/VisuallyHidden.mjs";
+import { Button as s, IconButton as c } from "../../primitives/Button/Button.mjs";
+import { Icon as l } from "../../primitives/Icon/Icon.mjs";
+import { ScrollArea as u } from "../../layout/ScrollArea/ScrollArea.mjs";
+import { Textarea as ee } from "../../forms/Textarea/Textarea.mjs";
+import d from "./Chat.module.css.mjs";
+import { useCallback as f, useEffect as p, useId as te, useLayoutEffect as ne, useRef as m, useState as h } from "react";
+import { jsx as g, jsxs as _ } from "react/jsx-runtime";
+//#region src/components/data-display/Chat/Chat.tsx
+var re = 48, ie = typeof window < "u" ? ne : p;
+function ae(e) {
+	return e != null && typeof e[Symbol.asyncIterator] == "function";
+}
+var oe = () => /* @__PURE__ */ g(l, { children: /* @__PURE__ */ g("rect", {
+	x: "7",
+	y: "7",
+	width: "10",
+	height: "10",
+	rx: "2",
+	fill: "currentColor",
+	stroke: "none"
+}) }), v = ({ messages: ne, defaultMessages: v, onMessagesChange: se, onSend: y, onStop: ce, onError: b, draft: le, defaultDraft: ue, onDraftChange: de, suggestions: x, emptyState: fe, renderContent: S, assistantName: pe, assistantAvatar: me, userAvatar: he, copyable: C = !0, disclaimer: w, placeholder: ge, maxLength: T, disabled: E = !1, labels: _e, className: ve, "aria-label": ye, ...D }) => {
+	let O = {
+		...t().chat,
+		..._e
+	}, k = pe ?? O.assistant, be = r(), A = te(), j = `${A}-hint`, [M, N] = e({
+		value: ne,
+		defaultValue: v ?? [],
+		onChange: se
+	}), P = m(M), F = m(M);
+	M !== F.current && (F.current = M, P.current = M);
+	let I = f((e) => {
+		let t = e(P.current);
+		P.current = t, N(t);
+	}, [N]), L = f((e, t) => I((n) => n.map((n) => n.id === e ? {
+		...n,
+		...t
+	} : n)), [I]), xe = m(0), R = () => `${A}-${++xe.current}`, [z, B] = e({
+		value: le,
+		defaultValue: ue ?? "",
+		onChange: de
+	}), [V, H] = h(!1), U = m(null), W = m(null), G = m(y);
+	G.current = y;
+	let K = m(b);
+	K.current = b, p(() => () => U.current?.abort(), []);
+	let q = m(null), J = m(!0), [Se, Y] = h(!0), Ce = () => {
+		let e = q.current;
+		if (!e) return;
+		let t = e.scrollHeight - e.scrollTop - e.clientHeight <= re;
+		J.current = t, Y(t);
+	};
+	ie(() => {
+		let e = q.current;
+		e && J.current && (e.scrollTop = e.scrollHeight);
+	}, [M]);
+	let we = () => {
+		let e = q.current;
+		e && (J.current = !0, Y(!0), e.scrollTo({
+			top: e.scrollHeight,
+			behavior: be ? "auto" : "smooth"
+		}), W.current?.focus());
+	}, X = async (e, t) => {
+		let n = R();
+		I(() => [...e, {
+			id: n,
+			role: "assistant",
+			content: "",
+			status: "streaming"
+		}]), J.current = !0, Y(!0), H(!0), a(O.typing(k));
+		let r = new AbortController();
+		U.current = r;
+		let i = "";
+		try {
+			let o = await G.current?.(t, {
+				messages: e,
+				signal: r.signal
+			});
+			if (typeof o == "string") i = o;
+			else if (ae(o)) for await (let e of o) {
+				if (r.signal.aborted) break;
+				i += e, L(n, { content: i });
+			}
+			else if (!r.signal.aborted) {
+				I((e) => e.filter((e) => e.id !== n));
+				return;
+			}
+			if (r.signal.aborted) throw r.signal.reason;
+			L(n, {
+				content: i,
+				status: "done"
+			}), a(`${O.assistantSaid(k)} ${i}`);
+		} catch (e) {
+			r.signal.aborted ? (L(n, {
+				content: i,
+				status: "stopped"
+			}), a(O.stopped)) : (K.current?.(e), L(n, {
+				content: i,
+				status: "error"
+			}), a(O.error));
+		} finally {
+			U.current === r && (U.current = null), H(!1);
+		}
+	}, Z = (e) => {
+		let t = e.trim();
+		!t || V || E || (B(""), X([...P.current, {
+			id: R(),
+			role: "user",
+			content: t,
+			status: "done"
+		}], t));
+	}, Q = () => {
+		U.current && (U.current.abort(), ce?.(), W.current?.focus());
+	}, Te = (e) => {
+		let t = P.current, n = t.findIndex((t) => t.id === e) - 1;
+		for (; n >= 0 && t[n].role !== "user";) n--;
+		n < 0 || V || (X(t.slice(0, n + 1), t[n].content), W.current?.focus());
+	}, Ee = (e) => {
+		e.preventDefault(), V ? Q() : Z(z);
+	}, De = (e) => {
+		if (e.key === "Escape" && V) {
+			e.preventDefault(), Q();
+			return;
+		}
+		e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing && (e.preventDefault(), Z(e.currentTarget.value));
+	}, { copy: Oe } = n(), [$, ke] = h(null);
+	p(() => {
+		if ($ === null) return;
+		let e = window.setTimeout(() => ke(null), 2e3);
+		return () => window.clearTimeout(e);
+	}, [$]);
+	let Ae = async (e) => {
+		await Oe(e.content) && (ke(e.id), a(O.copied));
+	}, je = M.filter((e) => e.role !== "system").length === 0, Me = M[M.length - 1], Ne = (e) => {
+		if (e.role === "system") return /* @__PURE__ */ g("p", {
+			className: d.system,
+			children: e.content
+		}, e.id);
+		let t = e.role === "user", n = e.status ?? "done", r = n === "streaming" && e.content === "", a = t ? he : me, u = !t && !V && e === Me && (n === "error" || n === "stopped");
+		return /* @__PURE__ */ _("article", {
+			className: i(d.message, t ? d.user : d.assistant),
+			"data-role": e.role,
+			"data-status": n,
+			"aria-busy": n === "streaming" || void 0,
+			children: [a != null && /* @__PURE__ */ g("div", {
+				className: d.avatar,
+				"aria-hidden": "true",
+				children: a
+			}), /* @__PURE__ */ _("div", {
+				className: d.body,
+				children: [
+					r ? /* @__PURE__ */ _("div", {
+						className: d.bubble,
+						children: [/* @__PURE__ */ _("span", {
+							className: d.dots,
+							"aria-hidden": "true",
+							children: [
+								/* @__PURE__ */ g("span", {}),
+								/* @__PURE__ */ g("span", {}),
+								/* @__PURE__ */ g("span", {})
+							]
+						}), /* @__PURE__ */ g(o, { children: O.typing(k) })]
+					}) : e.content !== "" && /* @__PURE__ */ _("div", {
+						className: d.bubble,
+						children: [/* @__PURE__ */ _(o, { children: [t ? O.youSaid : O.assistantSaid(k), " "] }), S ? S(e) : /* @__PURE__ */ g("p", {
+							className: d.text,
+							children: e.content
+						})]
+					}),
+					n === "error" && /* @__PURE__ */ _("p", {
+						className: d.error,
+						children: [/* @__PURE__ */ g(l, {
+							name: "error",
+							size: "sm"
+						}), /* @__PURE__ */ g("span", { children: e.error ?? O.error })]
+					}),
+					n === "stopped" && /* @__PURE__ */ g("p", {
+						className: d.note,
+						children: O.stopped
+					}),
+					!t && (u || C && n === "done" && e.content !== "") && /* @__PURE__ */ _("div", {
+						className: d.actions,
+						children: [C && n === "done" && e.content !== "" && /* @__PURE__ */ g(c, {
+							variant: "ghost",
+							tone: "neutral",
+							size: "sm",
+							"aria-label": $ === e.id ? O.copied : O.copy,
+							onClick: () => void Ae(e),
+							children: /* @__PURE__ */ g(l, { name: $ === e.id ? "check" : "copy" })
+						}), u && /* @__PURE__ */ g(s, {
+							variant: "ghost",
+							tone: "neutral",
+							size: "sm",
+							startIcon: /* @__PURE__ */ g(l, { name: "refresh" }),
+							onClick: () => Te(e.id),
+							children: O.retry
+						})]
+					})
+				]
+			})]
+		}, e.id);
+	};
+	return /* @__PURE__ */ _("section", {
+		...D,
+		"aria-label": ye ?? (D["aria-labelledby"] ? void 0 : O.region),
+		className: i(d.root, ve),
+		children: [/* @__PURE__ */ _("div", {
+			className: d.logWrap,
+			children: [/* @__PURE__ */ g(u, {
+				className: d.log,
+				viewportRef: q,
+				onViewportScroll: Ce,
+				"aria-label": O.log,
+				"aria-busy": V || void 0,
+				tabIndex: 0,
+				children: /* @__PURE__ */ _("div", {
+					className: d.messages,
+					children: [je && /* @__PURE__ */ _("div", {
+						className: d.empty,
+						children: [fe ?? /* @__PURE__ */ g("p", {
+							className: d.emptyTitle,
+							children: O.emptyTitle
+						}), x && x.length > 0 && /* @__PURE__ */ g("div", {
+							role: "group",
+							"aria-label": O.suggestions,
+							className: d.suggestions,
+							children: x.map((e) => /* @__PURE__ */ g(s, {
+								variant: "outline",
+								tone: "neutral",
+								size: "sm",
+								disabled: E,
+								className: d.suggestion,
+								onClick: () => Z(e),
+								children: e
+							}, e))
+						})]
+					}), M.map(Ne)]
+				})
+			}), !Se && !je && /* @__PURE__ */ g(c, {
+				variant: "soft",
+				tone: "neutral",
+				size: "sm",
+				className: d.jump,
+				"aria-label": O.scrollToLatest,
+				onClick: we,
+				children: /* @__PURE__ */ g(l, { name: "arrow-down" })
+			})]
+		}), /* @__PURE__ */ _("form", {
+			className: d.composer,
+			onSubmit: Ee,
+			children: [
+				/* @__PURE__ */ _("div", {
+					className: d.inputRow,
+					children: [/* @__PURE__ */ g(ee, {
+						ref: W,
+						className: d.input,
+						"aria-label": O.input,
+						"aria-describedby": j,
+						placeholder: ge ?? O.placeholder,
+						value: z,
+						onValueChange: B,
+						onKeyDown: De,
+						autoResize: !0,
+						rows: 1,
+						maxRows: 6,
+						maxLength: T,
+						showCount: T !== void 0,
+						disabled: E,
+						enterKeyHint: "send"
+					}), V ? /* @__PURE__ */ g(c, {
+						type: "submit",
+						variant: "soft",
+						tone: "neutral",
+						"aria-label": O.stop,
+						children: /* @__PURE__ */ g(oe, {})
+					}) : /* @__PURE__ */ g(c, {
+						type: "submit",
+						"aria-label": O.send,
+						disabled: E || z.trim() === "",
+						children: /* @__PURE__ */ g(l, { name: "arrow-up" })
+					})]
+				}),
+				/* @__PURE__ */ g(o, {
+					id: j,
+					children: O.hint
+				}),
+				w != null && /* @__PURE__ */ g("p", {
+					className: d.disclaimer,
+					children: w
+				})
+			]
+		})]
+	});
+};
+//#endregion
+export { v as Chat };

package/dist/components/data-display/Chat/Chat.module.css.cjs.js

@@ -0,0 +1 @@
+var e=`_root_1vnqg_8`,t=`_logWrap_1vnqg_18`,n=`_log_1vnqg_18`,r=`_messages_1vnqg_30`,i=`_empty_1vnqg_39`,a=`_emptyTitle_1vnqg_48`,o=`_suggestions_1vnqg_56`,s=`_suggestion_1vnqg_56`,c=`_message_1vnqg_30`,l=`_enter_1vnqg_1`,u=`_user_1vnqg_80`,d=`_assistant_1vnqg_85`,f=`_avatar_1vnqg_89`,p=`_body_1vnqg_94`,m=`_bubble_1vnqg_105`,h=`_text_1vnqg_128`,g=`_dots_1vnqg_134`,_=`_bounce_1vnqg_1`,v=`_error_1vnqg_185`,y=`_note_1vnqg_194`,b=`_actions_1vnqg_201`,x=`_system_1vnqg_207`,S=`_jump_1vnqg_217`,C=`_composer_1vnqg_230`,w=`_inputRow_1vnqg_238`,T=`_input_1vnqg_238`,E=`_disclaimer_1vnqg_248`,D={root:e,logWrap:t,log:n,messages:r,empty:i,emptyTitle:a,suggestions:o,suggestion:s,message:c,enter:l,user:u,assistant:d,avatar:f,body:p,bubble:m,text:h,dots:g,bounce:_,error:v,note:y,actions:b,system:x,jump:S,composer:C,inputRow:w,input:T,disclaimer:E};exports.actions=b,exports.assistant=d,exports.avatar=f,exports.body=p,exports.bounce=_,exports.bubble=m,exports.composer=C,exports.default=D,exports.disclaimer=E,exports.dots=g,exports.empty=i,exports.emptyTitle=a,exports.enter=l,exports.error=v,exports.input=T,exports.inputRow=w,exports.jump=S,exports.log=n,exports.logWrap=t,exports.message=c,exports.messages=r,exports.note=y,exports.root=e,exports.suggestion=s,exports.suggestions=o,exports.system=x,exports.text=h,exports.user=u;

package/dist/components/data-display/Chat/Chat.module.css.mjs

@@ -0,0 +1,32 @@
+//#region src/components/data-display/Chat/Chat.module.css
+var e = "_root_1vnqg_8", t = "_logWrap_1vnqg_18", n = "_log_1vnqg_18", r = "_messages_1vnqg_30", i = "_empty_1vnqg_39", a = "_emptyTitle_1vnqg_48", o = "_suggestions_1vnqg_56", s = "_suggestion_1vnqg_56", c = "_message_1vnqg_30", l = "_enter_1vnqg_1", u = "_user_1vnqg_80", d = "_assistant_1vnqg_85", f = "_avatar_1vnqg_89", p = "_body_1vnqg_94", m = "_bubble_1vnqg_105", h = "_text_1vnqg_128", g = "_dots_1vnqg_134", _ = "_bounce_1vnqg_1", v = "_error_1vnqg_185", y = "_note_1vnqg_194", b = "_actions_1vnqg_201", x = "_system_1vnqg_207", S = "_jump_1vnqg_217", C = "_composer_1vnqg_230", w = "_inputRow_1vnqg_238", T = "_input_1vnqg_238", E = "_disclaimer_1vnqg_248", D = {
+	root: e,
+	logWrap: t,
+	log: n,
+	messages: r,
+	empty: i,
+	emptyTitle: a,
+	suggestions: o,
+	suggestion: s,
+	message: c,
+	enter: l,
+	user: u,
+	assistant: d,
+	avatar: f,
+	body: p,
+	bubble: m,
+	text: h,
+	dots: g,
+	bounce: _,
+	error: v,
+	note: y,
+	actions: b,
+	system: x,
+	jump: S,
+	composer: C,
+	inputRow: w,
+	input: T,
+	disclaimer: E
+};
+//#endregion
+export { b as actions, d as assistant, f as avatar, p as body, _ as bounce, m as bubble, C as composer, D as default, E as disclaimer, g as dots, i as empty, a as emptyTitle, l as enter, v as error, T as input, w as inputRow, S as jump, n as log, t as logWrap, c as message, r as messages, y as note, e as root, s as suggestion, o as suggestions, x as system, h as text, u as user };

package/dist/components/data-display/Chat/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Chat';
+export * from './streams';

package/dist/components/data-display/Chat/streams.cjs.js

@@ -0,0 +1,4 @@
+function e(e){let t=e instanceof Response?e.body:e;if(!t)throw Error(`readTextStream: the response has no body to read.`);return t}async function*t(t){let n=e(t).getReader(),r=new TextDecoder;try{for(;;){let{done:e,value:t}=await n.read();if(e)break;let i=r.decode(t,{stream:!0});i&&(yield i)}let e=r.decode();e&&(yield e)}finally{n.releaseLock()}}async function*n(e){let n=``,r=function*(e){let t=n.split(/\r?\n\r?\n/);n=e?``:t.pop()??``;for(let e of t){let t=e.split(/\r?\n/).filter(e=>e.startsWith(`data:`)).map(e=>e.slice(5).replace(/^ /,``));t.length>0&&(yield t.join(`
+`))}};for await(let i of t(e))n+=i,yield*r(!1);n+=`
+
+`,yield*r(!0)}exports.readEventStream=n,exports.readTextStream=t;

package/dist/components/data-display/Chat/streams.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Helpers for turning a streaming HTTP response into the `AsyncIterable<string>`
+ * that `Chat`'s `onSend` can return. They read with `getReader()`, so they
+ * work in browsers without async iteration of `ReadableStream`.
+ */
+type ByteSource = Response | ReadableStream<Uint8Array> | null | undefined;
+/**
+ * Yields decoded text chunks from a plain streaming response (a body that is
+ * just the reply text, sent in pieces).
+ *
+ * ```ts
+ * onSend={async function* (text, { signal }) {
+ *   const res = await fetch("/api/chat", { method: "POST", body: text, signal });
+ *   yield* readTextStream(res);
+ * }}
+ * ```
+ */
+export declare function readTextStream(source: ByteSource): AsyncGenerator<string>;
+/**
+ * Yields the `data` of each server-sent event (`text/event-stream`), the
+ * format most LLM APIs stream in. Multi-line data is joined with `\n`. Parse
+ * each payload yourself, since every API shapes it differently.
+ *
+ * ```ts
+ * for await (const data of readEventStream(res)) {
+ *   if (data === "[DONE]") break;
+ *   yield JSON.parse(data).delta ?? "";
+ * }
+ * ```
+ */
+export declare function readEventStream(source: ByteSource): AsyncGenerator<string>;
+export {};

package/dist/components/data-display/Chat/streams.mjs

@@ -0,0 +1,35 @@
+//#region src/components/data-display/Chat/streams.ts
+function e(e) {
+	let t = e instanceof Response ? e.body : e;
+	if (!t) throw Error("readTextStream: the response has no body to read.");
+	return t;
+}
+async function* t(t) {
+	let n = e(t).getReader(), r = new TextDecoder();
+	try {
+		for (;;) {
+			let { done: e, value: t } = await n.read();
+			if (e) break;
+			let i = r.decode(t, { stream: !0 });
+			i && (yield i);
+		}
+		let e = r.decode();
+		e && (yield e);
+	} finally {
+		n.releaseLock();
+	}
+}
+async function* n(e) {
+	let n = "", r = function* (e) {
+		let t = n.split(/\r?\n\r?\n/);
+		n = e ? "" : t.pop() ?? "";
+		for (let e of t) {
+			let t = e.split(/\r?\n/).filter((e) => e.startsWith("data:")).map((e) => e.slice(5).replace(/^ /, ""));
+			t.length > 0 && (yield t.join("\n"));
+		}
+	};
+	for await (let i of t(e)) n += i, yield* r(!1);
+	n += "\n\n", yield* r(!0);
+}
+//#endregion
+export { n as readEventStream, t as readTextStream };

package/dist/components/feedback/Toast/ToastProvider.cjs.js

@@ -1 +1 @@
-const e=require("../../utilities/LocaleProvider/LocaleProvider.cjs.js"),t=require("./toastStore.cjs.js"),n=require("./useToast.cjs.js"),r=require("./ToastViewport.cjs.js");let i=require("react"),a=require("react/jsx-runtime");var o=[`F8`],s=({children:s,store:c=t.toastStore,placement:l=`bottom-end`,max:u=3,duration:d=5e3,gap:f=3,label:p,hotkey:m=o,showProgress:h=!1,toneLabels:g,closeLabel:_,queuedLabel:v,className:y})=>{let b=e.useMessages(),x=p??b.toast.region,S=_??b.toast.dismiss,C=v??b.toast.queued,w=(0,i.useMemo)(()=>({store:c,api:c===t.toastStore?t.toast:t.createToastApi(c)}),[c]),T=(0,i.useMemo)(()=>({neutral:``,...b.toast.tone,...g}),[b.toast.tone,g]);return(0,a.jsxs)(n.ToastContext.Provider,{value:w,children:[s,(0,a.jsx)(r.ToastViewport,{store:c,placement:l,max:u,duration:d,gap:f,label:x,hotkey:m,showProgress:h,toneLabels:T,closeLabel:S,queuedLabel:C,className:y})]})};exports.ToastProvider=s;
+const e=require("../../utilities/LocaleProvider/LocaleProvider.cjs.js"),t=require("./toastStore.cjs.js"),n=require("./useToast.cjs.js"),r=require("./ToastViewport.cjs.js");let i=require("react"),a=require("react/jsx-runtime");var o=[`F8`],s=globalThis.process?.env?.NODE_ENV!==`production`,c=typeof window<`u`?i.useLayoutEffect:i.useEffect,l=new Map,u=new Set,d=e=>(u.add(e),()=>{u.delete(e)}),f=()=>u.forEach(e=>e());function p(e,t){let[n]=(0,i.useState)(()=>Symbol(`ToastProvider`));return c(()=>{if(t)return;let r=l.get(e)??[];return s&&r.length>0&&console.warn("[ToastProvider] Another ToastProvider already shows this store's toasts, so this one won't draw a second viewport. Use one ToastProvider near the root of your app (inside your LocaleProvider), or pass `store={createToastStore()}` to keep separate toasts."),l.set(e,[...r,n]),f(),()=>{let t=(l.get(e)??[]).filter(e=>e!==n);t.length>0?l.set(e,t):l.delete(e),f()}},[e,t,n]),(0,i.useSyncExternalStore)(d,()=>!t&&l.get(e)?.[0]===n,()=>!t)}var m=({children:s,store:c=t.toastStore,placement:l=`bottom-end`,max:u=3,duration:d=5e3,gap:f=3,label:m,hotkey:h=o,showProgress:g=!1,toneLabels:_,closeLabel:v,queuedLabel:y,className:b})=>{let x=e.useMessages(),S=p(c,(0,i.useContext)(n.ToastContext)?.store===c),C=m??x.toast.region,w=v??x.toast.dismiss,T=y??x.toast.queued,E=(0,i.useMemo)(()=>({store:c,api:c===t.toastStore?t.toast:t.createToastApi(c)}),[c]),D=(0,i.useMemo)(()=>({neutral:``,...x.toast.tone,..._}),[x.toast.tone,_]);return(0,a.jsxs)(n.ToastContext.Provider,{value:E,children:[s,S&&(0,a.jsx)(r.ToastViewport,{store:c,placement:l,max:u,duration:d,gap:f,label:C,hotkey:h,showProgress:g,toneLabels:D,closeLabel:w,queuedLabel:T,className:b})]})};exports.ToastProvider=m;

package/dist/components/feedback/Toast/ToastProvider.d.ts

@@ -45,7 +45,10 @@ export interface ToastProviderProps {
 }
 /**
  * Renders the toast viewport (in a portal) and provides `useToast()`.
- * Place it once near the root of your app.
+ * Place it once near the root of your app, inside your `LocaleProvider` so
+ * its built-in text (like "+2 more notifications") is in the app's language.
+ * Each store gets one viewport: a second provider on the same store (nested
+ * or not) only provides `useToast()`, so toasts are never drawn twice.
  *
  * Accessibility:
  * - The viewport is a labelled region ("Notifications (F8)"). The hotkey

package/dist/components/feedback/Toast/ToastProvider.mjs

@@ -2,35 +2,53 @@ import { useMessages as e } from "../../utilities/LocaleProvider/LocaleProvider.
 import { createToastApi as t, toast as n, toastStore as r } from "./toastStore.mjs";
 import { ToastContext as i } from "./useToast.mjs";
 import { ToastViewport as a } from "./ToastViewport.mjs";
-import { useMemo as o } from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { useContext as o, useEffect as s, useLayoutEffect as c, useMemo as l, useState as u, useSyncExternalStore as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
 //#region src/components/feedback/Toast/ToastProvider.tsx
-var l = ["F8"], u = ({ children: u, store: d = r, placement: f = "bottom-end", max: p = 3, duration: m = 5e3, gap: h = 3, label: g, hotkey: _ = l, showProgress: v = !1, toneLabels: y, closeLabel: b, queuedLabel: x, className: S }) => {
-	let C = e(), w = g ?? C.toast.region, T = b ?? C.toast.dismiss, E = x ?? C.toast.queued, D = o(() => ({
-		store: d,
-		api: d === r ? n : t(d)
-	}), [d]), O = o(() => ({
+var m = ["F8"], h = globalThis.process?.env?.NODE_ENV !== "production", g = typeof window < "u" ? c : s, _ = /* @__PURE__ */ new Map(), v = /* @__PURE__ */ new Set(), y = (e) => (v.add(e), () => {
+	v.delete(e);
+}), b = () => v.forEach((e) => e());
+function x(e, t) {
+	let [n] = u(() => Symbol("ToastProvider"));
+	return g(() => {
+		if (t) return;
+		let r = _.get(e) ?? [];
+		return h && r.length > 0 && console.warn("[ToastProvider] Another ToastProvider already shows this store's toasts, so this one won't draw a second viewport. Use one ToastProvider near the root of your app (inside your LocaleProvider), or pass `store={createToastStore()}` to keep separate toasts."), _.set(e, [...r, n]), b(), () => {
+			let t = (_.get(e) ?? []).filter((e) => e !== n);
+			t.length > 0 ? _.set(e, t) : _.delete(e), b();
+		};
+	}, [
+		e,
+		t,
+		n
+	]), d(y, () => !t && _.get(e)?.[0] === n, () => !t);
+}
+var S = ({ children: s, store: c = r, placement: u = "bottom-end", max: d = 3, duration: h = 5e3, gap: g = 3, label: _, hotkey: v = m, showProgress: y = !1, toneLabels: b, closeLabel: S, queuedLabel: C, className: w }) => {
+	let T = e(), E = x(c, o(i)?.store === c), D = _ ?? T.toast.region, O = S ?? T.toast.dismiss, k = C ?? T.toast.queued, A = l(() => ({
+		store: c,
+		api: c === r ? n : t(c)
+	}), [c]), j = l(() => ({
 		neutral: "",
-		...C.toast.tone,
-		...y
-	}), [C.toast.tone, y]);
-	return /* @__PURE__ */ c(i.Provider, {
-		value: D,
-		children: [u, /* @__PURE__ */ s(a, {
-			store: d,
-			placement: f,
-			max: p,
-			duration: m,
-			gap: h,
-			label: w,
-			hotkey: _,
-			showProgress: v,
-			toneLabels: O,
-			closeLabel: T,
-			queuedLabel: E,
-			className: S
+		...T.toast.tone,
+		...b
+	}), [T.toast.tone, b]);
+	return /* @__PURE__ */ p(i.Provider, {
+		value: A,
+		children: [s, E && /* @__PURE__ */ f(a, {
+			store: c,
+			placement: u,
+			max: d,
+			duration: h,
+			gap: g,
+			label: D,
+			hotkey: v,
+			showProgress: y,
+			toneLabels: j,
+			closeLabel: O,
+			queuedLabel: k,
+			className: w
 		})]
 	});
 };
 //#endregion
-export { u as ToastProvider };
+export { S as ToastProvider };

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

@@ -1 +1 @@
-const e=require("../../../hooks/useControllableState.cjs.js"),t=require("../../../hooks/useOverlayLayer.cjs.js"),n=require("../../utilities/LocaleProvider/LocaleProvider.cjs.js"),r=require("../../../utils/refs.cjs.js"),i=require("../../../utils/cx.cjs.js"),ee=require("../../utilities/VisuallyHidden/VisuallyHidden.cjs.js"),te=require("../../primitives/Icon/icons.cjs.js"),ne=require("../../data-display/Chip/Chip.cjs.js"),re=require("../Field/FieldContext.cjs.js"),a=require("./comboboxUtils.cjs.js"),o=require("./Combobox.module.css.cjs.js"),ie=require("./ComboboxPopup.cjs.js");let s=require("react"),c=require("react/jsx-runtime"),ae=require("react-dom");var oe={sm:o.default.sm,md:o.default.md,lg:o.default.lg},se={sm:`sm`,md:`sm`,lg:`md`};function l(e){return typeof e==`string`||typeof e==`number`?String(e):``}var ce=500,le=le=>{let u=n.useMessages().combobox,{options:d,renderOption:ue,multiple:f=!1,value:de,defaultValue:fe,onValueChange:pe,inputValue:me,defaultInputValue:he,onInputValueChange:ge,open:_e,defaultOpen:ve=!1,onOpenChange:ye,filter:be,loading:p=!1,loadingMessage:xe=u.loading,emptyMessage:m=u.empty,resultsMessage:Se=u.results,allowCustomValue:h=!1,onCreate:Ce,createLabel:we=u.create,clearable:Te=!1,clearLabel:Ee=u.clear,requiredMessage:De=u.required,clearOnEscape:Oe=!1,showSuggestionsLabel:ke=u.showSuggestions,hideSuggestionsLabel:Ae=u.hideSuggestions,selectedLabel:je=u.selected,autoHighlight:Me=!1,loop:Ne=!0,size:Pe,invalid:Fe,required:Ie,disabled:Le,readOnly:Re,name:g,placement:ze=`bottom-start`,maxHeight:Be,fullWidth:Ve=!0,container:He,inputClassName:Ue,className:We,style:Ge,id:Ke,ref:qe,placeholder:Je,onChange:Ye,onKeyDown:Xe,onBlur:Ze,"aria-describedby":Qe,"aria-label":_,"aria-labelledby":$e,...et}=le,v=re.useFieldContext(),y=re.useFieldControl({id:Ke,invalid:Fe,required:Ie,disabled:Le,readOnly:Re,size:Pe,"aria-describedby":Qe},{nativeRequired:!1}),b=y.size??`md`,x=!y.disabled&&!y.readOnly,tt=(0,s.useId)(),nt=y.id??`${tt}-input`,S=`${tt}-listbox`,C=(0,s.useRef)(null),w=(0,s.useRef)(null),T=(0,s.useRef)(null),rt=(0,s.useCallback)(e=>{C.current=e,r.assignRef(qe,e)},[qe]),E=(0,s.useRef)(new Map);for(let e of d)E.current.set(e.value,e);let D=e=>d.find(t=>t.value===e)??E.current.get(e),[O,k]=e.useControllableState({value:de,defaultValue:fe??(f?[]:null),onChange:pe}),A=f?Array.isArray(O)?O:[]:typeof O==`string`?[O]:[],j=!f&&typeof O==`string`?O:null,M=j===null?``:D(j)?.label??j,[N,P]=e.useControllableState({value:me,defaultValue:he??(f?``:M),onChange:ge}),it=A.length>0||h&&!f&&N.trim()!==``;(0,s.useEffect)(()=>{C.current?.setCustomValidity(y.required&&!it?De:``)},[y.required,it,De]);let[F,I]=e.useControllableState({value:_e,defaultValue:ve,onChange:ye}),at=F&&x,[L,R]=(0,s.useState)(!1),[z,B]=(0,s.useState)(null),ot=be===!1?null:be??a.defaultComboboxFilter,st=(e,t)=>{let n=[];d.forEach((t,r)=>{(!ot||ot(t,e))&&n.push({kind:`option`,key:t.value,option:t,id:`${S}-option-${r}`})});let r=N.trim();return Ce&&t&&r!==``&&!d.some(e=>a.normalizeText(e.label)===a.normalizeText(r))&&n.push({kind:`create`,key:a.CREATE_KEY,text:r,id:`${S}-create`}),a.orderItems(n)},V=f||L,H=st(V?N:``,V),U=z===null?-1:H.findIndex(e=>e.key===z);U>=0&&!a.isEnabled(H[U])&&(U=-1),U===-1&&Me&&V&&N.trim()!==``&&(U=a.findEnabled(H,-1,1,!0));let ct=m!=null&&m!==!1&&m!==``,W=at&&(H.length>0||p||ct),lt=W&&U>=0?H[U].id:void 0,[ut,G]=(0,s.useState)(``),dt=H.filter(e=>e.kind===`option`).length,ft=H.find(e=>e.kind===`create`),K=W?p?l(xe):dt>0?Se(dt):ft?.kind===`create`?l(we(ft.text)):l(m):``;(0,s.useEffect)(()=>{if(!K)return;let e=window.setTimeout(()=>G(K),ce);return()=>window.clearTimeout(e)},[K]),(0,s.useEffect)(()=>{W||G(``)},[W]);let q=(0,s.useRef)(me!==void 0&&!f&&M!==``?null:M);(0,s.useEffect)(()=>{f||q.current===M||(q.current=M,!(h&&M===``)&&(L||P(M)))},[f,M,L,h,P]);let J=e=>{(!e||x)&&(I(e),e||B(null))},pt=t.useOverlayLayer({active:W,elements:()=>[w,T],onEscape:()=>J(!1),onOutsidePress:()=>J(!1)}),Y=e=>{if(!x)return;let t=!f&&N===M,n=f||L&&!t;t&&R(!1);let r=st(n?N:``,n),i=-1;e===`first`?i=a.findEnabled(r,-1,1,!0):e===`last`?i=a.findEnabled(r,-1,-1,!0):e===`selected`&&(i=r.findIndex(e=>e.kind===`option`&&!e.option.disabled&&A.includes(e.option.value)),i<0&&(i=a.findEnabled(r,-1,1,!0))),B(i>=0?r[i].key:null),I(!0)},mt=e=>{let t=a.findEnabled(H,U,e,Ne);B(t>=0?H[t].key:null)},X=(e,t)=>{if(f){let n=A.includes(e);k(n?A.filter(t=>t!==e):[...A,e]),P(``),R(!1),B(e),G(n?u.optionRemoved(t):u.optionSelected(t));return}k(e),q.current=t,P(t),R(!1),J(!1)},ht=e=>{if(!a.isEnabled(e))return;if(e.kind===`option`){X(e.option.value,e.option.label);return}let t=Ce?.(e.text);if(typeof t==`string`){E.current.set(t,{value:t,label:e.text}),X(t,e.text);return}R(!1),f?P(``):J(!1)},gt=e=>{x&&(k(A.filter(t=>t!==e)),G(u.optionRemoved(D(e)?.label??e)))},Z=()=>{k(f?[]:null),q.current=``,P(``),R(!1),B(null)},_t=e=>{Ye?.(e),P(e.target.value),R(!0),B(null),F||J(!0)},vt=e=>{if(Xe?.(e),!(e.defaultPrevented||e.nativeEvent.isComposing||y.disabled))switch(e.key){case`ArrowDown`:if(!x)return;e.preventDefault(),e.altKey?W||Y(`none`):W?mt(1):Y(f?`first`:`selected`);return;case`ArrowUp`:if(!x)return;e.preventDefault(),e.altKey?J(!1):W?mt(-1):Y(`last`);return;case`Enter`:if(!W){f&&h&&N.trim()&&x&&(e.preventDefault(),e.repeat||yt()),!f&&x&&(0,ae.flushSync)(bt);return}if(e.preventDefault(),e.repeat)return;U>=0?ht(H[U]):f&&h&&N.trim()?yt():(!f&&h&&N!==M&&j!==null&&k(null),J(!1));return;case`Escape`:if(W)return;if(F){e.preventDefault(),I(!1);return}if(!x)return;{let t=f?``:M;if(N!==t){e.preventDefault(),P(t),R(!1);return}Oe&&(j!==null||A.length>0)&&(e.preventDefault(),Z())}return;case`Home`:case`End`:case`ArrowLeft`:case`ArrowRight`:z!==null&&B(null);return;case`Backspace`:f&&x&&!e.repeat&&N===``&&A.length>0&&gt(A[A.length-1]);return;default:return}},yt=()=>{let e=N.trim(),t=d.find(t=>a.normalizeText(t.label)===a.normalizeText(e));if(A.includes(t?.value??e)){P(``);return}if(t){t.disabled||X(t.value,t.label);return}E.current.set(e,{value:e,label:e}),X(e,e)},bt=()=>{if(!(f||N===M)){if(N.trim()===``){j===null?N!==``&&P(``):Z();return}if(h){j!==null&&k(null);return}P(M)}},xt=e=>{Ze?.(e),J(!1),R(!1),bt()},St=(0,s.useRef)(()=>{});St.current=()=>{if(de!==void 0)return;let e=fe??(f?[]:null);k(e);let t=typeof e==`string`?D(e)?.label??e:``;P(he??(f?``:t)),J(!1),R(!1)},(0,s.useEffect)(()=>{let e=C.current?.form;if(!e)return;let t=()=>St.current();return e.addEventListener(`reset`,t),()=>e.removeEventListener(`reset`,t)},[]);let Ct=e=>{let t=C.current;if(!t||y.disabled)return;let n=e.target;w.current?.contains(n)&&(n===t||n.closest(`button, a`)||(e.preventDefault(),t.focus()))},wt=e=>{let t=e.target;w.current?.contains(t)&&!t.closest(`button, a`)&&(F||Y(`none`))},Tt=()=>{C.current?.focus(),W||F?J(!1):Y(`none`)},Et=()=>{Z(),G(u.cleared),C.current?.focus()},Q=e=>e.preventDefault(),Dt=Te&&x&&(A.length>0||N!==``),$=f&&A.length>0,Ot=$e??(_?void 0:v&&!v.isGroup?v.labelId:void 0),kt=g===void 0?null:f?A.map(e=>(0,c.jsx)(`input`,{type:`hidden`,name:g,value:e,disabled:y.disabled},e)):(0,c.jsx)(`input`,{type:`hidden`,name:g,value:j??(h?N:``),disabled:y.disabled});return(0,c.jsxs)(`div`,{ref:w,className:i.cx(o.default.root,oe[b],Ve&&o.default.fullWidth,f&&o.default.multiple,$&&o.default.hasChips,y.invalid&&o.default.invalid,y.disabled&&o.default.disabled,y.readOnly&&!y.disabled&&o.default.readOnly,We),style:Ge,"data-size":b,"data-state":W?`open`:`closed`,onMouseDown:Ct,onClick:wt,children:[$&&(0,c.jsx)(ne.ChipGroup,{"aria-label":je,size:se[b],tone:`primary`,variant:`soft`,disabled:y.disabled,focusFallback:C,className:o.default.chips,children:A.map(e=>{let t=D(e);return(0,c.jsx)(ne.Chip,{startIcon:t?.icon,onRemove:x?()=>gt(e):void 0,children:t?.label??e},e)})}),(0,c.jsx)(`input`,{autoComplete:`off`,autoCorrect:`off`,autoCapitalize:`none`,spellCheck:!1,...et,ref:rt,id:nt,type:`text`,role:`combobox`,"aria-label":_,"aria-labelledby":$e,"aria-expanded":W,"aria-controls":S,"aria-autocomplete":`list`,"aria-activedescendant":lt,...y.ariaProps,placeholder:$?void 0:Je,value:N,disabled:y.disabled,readOnly:y.readOnly,className:i.cx(o.default.input,Ue),onChange:_t,onKeyDown:vt,onBlur:xt}),(0,c.jsxs)(`span`,{className:o.default.actions,children:[Dt&&(0,c.jsx)(`button`,{type:`button`,className:o.default.iconButton,"aria-label":Ee,onMouseDown:Q,onClick:Et,children:(0,c.jsx)(te.CloseIcon,{size:b===`lg`?`sm`:`xs`,strokeWidth:2.5})}),(0,c.jsx)(`button`,{type:`button`,tabIndex:-1,className:i.cx(o.default.iconButton,o.default.toggle),"aria-label":W?Ae:ke,disabled:!x,onMouseDown:Q,onClick:Tt,children:(0,c.jsx)(te.ChevronDownIcon,{size:b===`sm`?`sm`:`md`,className:o.default.chevron})})]}),kt,(0,c.jsx)(ee.VisuallyHidden,{role:`status`,"aria-live":`polite`,"aria-atomic":`true`,children:ut}),W&&(0,c.jsx)(ie.ComboboxPopup,{anchorRef:w,positionerRef:T,layer:pt,listboxId:S,labelledBy:Ot,label:_,multiple:f,size:b,placement:ze,maxHeight:Be,items:H,highlightedIndex:U,isSelected:e=>A.includes(e),onHighlight:e=>B(H[e]?.key??null),onChoose:ht,renderOption:ue,createLabel:we,loading:p,loadingMessage:xe,emptyMessage:m,container:He})]})};exports.Combobox=le,exports.defaultComboboxFilter=a.defaultComboboxFilter;
+const e=require("../../../hooks/useControllableState.cjs.js"),t=require("../../../hooks/useOverlayLayer.cjs.js"),n=require("../../utilities/LocaleProvider/LocaleProvider.cjs.js"),r=require("../../../utils/refs.cjs.js"),i=require("../../../utils/cx.cjs.js"),ee=require("../../utilities/VisuallyHidden/VisuallyHidden.cjs.js"),te=require("../../primitives/Icon/icons.cjs.js"),ne=require("../Field/FieldContext.cjs.js"),re=require("../../data-display/Chip/Chip.cjs.js"),a=require("./comboboxUtils.cjs.js"),o=require("./Combobox.module.css.cjs.js"),ie=require("./ComboboxPopup.cjs.js");let s=require("react"),c=require("react/jsx-runtime"),ae=require("react-dom");var oe={sm:o.default.sm,md:o.default.md,lg:o.default.lg},se={sm:`sm`,md:`sm`,lg:`md`};function l(e){return typeof e==`string`||typeof e==`number`?String(e):``}var ce=500,le=le=>{let u=n.useMessages().combobox,{options:d,renderOption:ue,multiple:f=!1,value:de,defaultValue:fe,onValueChange:pe,inputValue:me,defaultInputValue:he,onInputValueChange:ge,open:_e,defaultOpen:ve=!1,onOpenChange:ye,filter:be,loading:p=!1,loadingMessage:xe=u.loading,emptyMessage:m=u.empty,resultsMessage:Se=u.results,allowCustomValue:h=!1,onCreate:Ce,createLabel:we=u.create,clearable:Te=!1,clearLabel:Ee=u.clear,requiredMessage:De=u.required,clearOnEscape:Oe=!1,showSuggestionsLabel:ke=u.showSuggestions,hideSuggestionsLabel:Ae=u.hideSuggestions,selectedLabel:je=u.selected,autoHighlight:Me=!1,loop:Ne=!0,size:Pe,invalid:Fe,required:Ie,disabled:Le,readOnly:Re,name:g,placement:ze=`bottom-start`,maxHeight:Be,fullWidth:Ve=!0,container:He,inputClassName:Ue,className:We,style:Ge,id:Ke,ref:qe,placeholder:Je,onChange:Ye,onKeyDown:Xe,onBlur:Ze,"aria-describedby":Qe,"aria-label":_,"aria-labelledby":$e,...et}=le,v=ne.useFieldContext(),y=ne.useFieldControl({id:Ke,invalid:Fe,required:Ie,disabled:Le,readOnly:Re,size:Pe,"aria-describedby":Qe},{nativeRequired:!1}),b=y.size??`md`,x=!y.disabled&&!y.readOnly,tt=(0,s.useId)(),nt=y.id??`${tt}-input`,S=`${tt}-listbox`,C=(0,s.useRef)(null),w=(0,s.useRef)(null),T=(0,s.useRef)(null),rt=(0,s.useCallback)(e=>{C.current=e,r.assignRef(qe,e)},[qe]),E=(0,s.useRef)(new Map);for(let e of d)E.current.set(e.value,e);let D=e=>d.find(t=>t.value===e)??E.current.get(e),[O,k]=e.useControllableState({value:de,defaultValue:fe??(f?[]:null),onChange:pe}),A=f?Array.isArray(O)?O:[]:typeof O==`string`?[O]:[],j=!f&&typeof O==`string`?O:null,M=j===null?``:D(j)?.label??j,[N,P]=e.useControllableState({value:me,defaultValue:he??(f?``:M),onChange:ge}),it=A.length>0||h&&!f&&N.trim()!==``;(0,s.useEffect)(()=>{C.current?.setCustomValidity(y.required&&!it?De:``)},[y.required,it,De]);let[F,I]=e.useControllableState({value:_e,defaultValue:ve,onChange:ye}),at=F&&x,[L,R]=(0,s.useState)(!1),[z,B]=(0,s.useState)(null),ot=be===!1?null:be??a.defaultComboboxFilter,st=(e,t)=>{let n=[];d.forEach((t,r)=>{(!ot||ot(t,e))&&n.push({kind:`option`,key:t.value,option:t,id:`${S}-option-${r}`})});let r=N.trim();return Ce&&t&&r!==``&&!d.some(e=>a.normalizeText(e.label)===a.normalizeText(r))&&n.push({kind:`create`,key:a.CREATE_KEY,text:r,id:`${S}-create`}),a.orderItems(n)},V=f||L,H=st(V?N:``,V),U=z===null?-1:H.findIndex(e=>e.key===z);U>=0&&!a.isEnabled(H[U])&&(U=-1),U===-1&&Me&&V&&N.trim()!==``&&(U=a.findEnabled(H,-1,1,!0));let ct=m!=null&&m!==!1&&m!==``,W=at&&(H.length>0||p||ct),lt=W&&U>=0?H[U].id:void 0,[ut,G]=(0,s.useState)(``),dt=H.filter(e=>e.kind===`option`).length,ft=H.find(e=>e.kind===`create`),K=W?p?l(xe):dt>0?Se(dt):ft?.kind===`create`?l(we(ft.text)):l(m):``;(0,s.useEffect)(()=>{if(!K)return;let e=window.setTimeout(()=>G(K),ce);return()=>window.clearTimeout(e)},[K]),(0,s.useEffect)(()=>{W||G(``)},[W]);let q=(0,s.useRef)(me!==void 0&&!f&&M!==``?null:M);(0,s.useEffect)(()=>{f||q.current===M||(q.current=M,!(h&&M===``)&&(L||P(M)))},[f,M,L,h,P]);let J=e=>{(!e||x)&&(I(e),e||B(null))},pt=t.useOverlayLayer({active:W,elements:()=>[w,T],onEscape:()=>J(!1),onOutsidePress:()=>J(!1)}),Y=e=>{if(!x)return;let t=!f&&N===M,n=f||L&&!t;t&&R(!1);let r=st(n?N:``,n),i=-1;e===`first`?i=a.findEnabled(r,-1,1,!0):e===`last`?i=a.findEnabled(r,-1,-1,!0):e===`selected`&&(i=r.findIndex(e=>e.kind===`option`&&!e.option.disabled&&A.includes(e.option.value)),i<0&&(i=a.findEnabled(r,-1,1,!0))),B(i>=0?r[i].key:null),I(!0)},mt=e=>{let t=a.findEnabled(H,U,e,Ne);B(t>=0?H[t].key:null)},X=(e,t)=>{if(f){let n=A.includes(e);k(n?A.filter(t=>t!==e):[...A,e]),P(``),R(!1),B(e),G(n?u.optionRemoved(t):u.optionSelected(t));return}k(e),q.current=t,P(t),R(!1),J(!1)},ht=e=>{if(!a.isEnabled(e))return;if(e.kind===`option`){X(e.option.value,e.option.label);return}let t=Ce?.(e.text);if(typeof t==`string`){E.current.set(t,{value:t,label:e.text}),X(t,e.text);return}R(!1),f?P(``):J(!1)},gt=e=>{x&&(k(A.filter(t=>t!==e)),G(u.optionRemoved(D(e)?.label??e)))},Z=()=>{k(f?[]:null),q.current=``,P(``),R(!1),B(null)},_t=e=>{Ye?.(e),P(e.target.value),R(!0),B(null),F||J(!0)},vt=e=>{if(Xe?.(e),!(e.defaultPrevented||e.nativeEvent.isComposing||y.disabled))switch(e.key){case`ArrowDown`:if(!x)return;e.preventDefault(),e.altKey?W||Y(`none`):W?mt(1):Y(f?`first`:`selected`);return;case`ArrowUp`:if(!x)return;e.preventDefault(),e.altKey?J(!1):W?mt(-1):Y(`last`);return;case`Enter`:if(!W){f&&h&&N.trim()&&x&&(e.preventDefault(),e.repeat||yt()),!f&&x&&(0,ae.flushSync)(bt);return}if(e.preventDefault(),e.repeat)return;U>=0?ht(H[U]):f&&h&&N.trim()?yt():(!f&&h&&N!==M&&j!==null&&k(null),J(!1));return;case`Escape`:if(W)return;if(F){e.preventDefault(),I(!1);return}if(!x)return;{let t=f?``:M;if(N!==t){e.preventDefault(),P(t),R(!1);return}Oe&&(j!==null||A.length>0)&&(e.preventDefault(),Z())}return;case`Home`:case`End`:case`ArrowLeft`:case`ArrowRight`:z!==null&&B(null);return;case`Backspace`:f&&x&&!e.repeat&&N===``&&A.length>0&&gt(A[A.length-1]);return;default:return}},yt=()=>{let e=N.trim(),t=d.find(t=>a.normalizeText(t.label)===a.normalizeText(e));if(A.includes(t?.value??e)){P(``);return}if(t){t.disabled||X(t.value,t.label);return}E.current.set(e,{value:e,label:e}),X(e,e)},bt=()=>{if(!(f||N===M)){if(N.trim()===``){j===null?N!==``&&P(``):Z();return}if(h){j!==null&&k(null);return}P(M)}},xt=e=>{Ze?.(e),J(!1),R(!1),bt()},St=(0,s.useRef)(()=>{});St.current=()=>{if(de!==void 0)return;let e=fe??(f?[]:null);k(e);let t=typeof e==`string`?D(e)?.label??e:``;P(he??(f?``:t)),J(!1),R(!1)},(0,s.useEffect)(()=>{let e=C.current?.form;if(!e)return;let t=()=>St.current();return e.addEventListener(`reset`,t),()=>e.removeEventListener(`reset`,t)},[]);let Ct=e=>{let t=C.current;if(!t||y.disabled)return;let n=e.target;w.current?.contains(n)&&(n===t||n.closest(`button, a`)||(e.preventDefault(),t.focus()))},wt=e=>{let t=e.target;w.current?.contains(t)&&!t.closest(`button, a`)&&(F||Y(`none`))},Tt=()=>{C.current?.focus(),W||F?J(!1):Y(`none`)},Et=()=>{Z(),G(u.cleared),C.current?.focus()},Q=e=>e.preventDefault(),Dt=Te&&x&&(A.length>0||N!==``),$=f&&A.length>0,Ot=$e??(_?void 0:v&&!v.isGroup?v.labelId:void 0),kt=g===void 0?null:f?A.map(e=>(0,c.jsx)(`input`,{type:`hidden`,name:g,value:e,disabled:y.disabled},e)):(0,c.jsx)(`input`,{type:`hidden`,name:g,value:j??(h?N:``),disabled:y.disabled});return(0,c.jsxs)(`div`,{ref:w,className:i.cx(o.default.root,oe[b],Ve&&o.default.fullWidth,f&&o.default.multiple,$&&o.default.hasChips,y.invalid&&o.default.invalid,y.disabled&&o.default.disabled,y.readOnly&&!y.disabled&&o.default.readOnly,We),style:Ge,"data-size":b,"data-state":W?`open`:`closed`,onMouseDown:Ct,onClick:wt,children:[$&&(0,c.jsx)(re.ChipGroup,{"aria-label":je,size:se[b],tone:`primary`,variant:`soft`,disabled:y.disabled,focusFallback:C,className:o.default.chips,children:A.map(e=>{let t=D(e);return(0,c.jsx)(re.Chip,{startIcon:t?.icon,onRemove:x?()=>gt(e):void 0,children:t?.label??e},e)})}),(0,c.jsx)(`input`,{autoComplete:`off`,autoCorrect:`off`,autoCapitalize:`none`,spellCheck:!1,...et,ref:rt,id:nt,type:`text`,role:`combobox`,"aria-label":_,"aria-labelledby":$e,"aria-expanded":W,"aria-controls":S,"aria-autocomplete":`list`,"aria-activedescendant":lt,...y.ariaProps,placeholder:$?void 0:Je,value:N,disabled:y.disabled,readOnly:y.readOnly,className:i.cx(o.default.input,Ue),onChange:_t,onKeyDown:vt,onBlur:xt}),(0,c.jsxs)(`span`,{className:o.default.actions,children:[Dt&&(0,c.jsx)(`button`,{type:`button`,className:o.default.iconButton,"aria-label":Ee,onMouseDown:Q,onClick:Et,children:(0,c.jsx)(te.CloseIcon,{size:b===`lg`?`sm`:`xs`,strokeWidth:2.5})}),(0,c.jsx)(`button`,{type:`button`,tabIndex:-1,className:i.cx(o.default.iconButton,o.default.toggle),"aria-label":W?Ae:ke,disabled:!x,onMouseDown:Q,onClick:Tt,children:(0,c.jsx)(te.ChevronDownIcon,{size:b===`sm`?`sm`:`md`,className:o.default.chevron})})]}),kt,(0,c.jsx)(ee.VisuallyHidden,{role:`status`,"aria-live":`polite`,"aria-atomic":`true`,children:ut}),W&&(0,c.jsx)(ie.ComboboxPopup,{anchorRef:w,positionerRef:T,layer:pt,listboxId:S,labelledBy:Ot,label:_,multiple:f,size:b,placement:ze,maxHeight:Be,items:H,highlightedIndex:U,isSelected:e=>A.includes(e),onHighlight:e=>B(H[e]?.key??null),onChoose:ht,renderOption:ue,createLabel:we,loading:p,loadingMessage:xe,emptyMessage:m,container:He})]})};exports.Combobox=le,exports.defaultComboboxFilter=a.defaultComboboxFilter;

package/dist/components/forms/Combobox/Combobox.mjs

@@ -5,8 +5,8 @@ import { assignRef as r } from "../../../utils/refs.mjs";
 import { cx as i } from "../../../utils/cx.mjs";
 import { VisuallyHidden as ee } from "../../utilities/VisuallyHidden/VisuallyHidden.mjs";
 import { ChevronDownIcon as te, CloseIcon as ne } from "../../primitives/Icon/icons.mjs";
-import { Chip as re, ChipGroup as ie } from "../../data-display/Chip/Chip.mjs";
-import { useFieldContext as ae, useFieldControl as oe } from "../Field/FieldContext.mjs";
+import { useFieldContext as re, useFieldControl as ie } from "../Field/FieldContext.mjs";
+import { Chip as ae, ChipGroup as oe } from "../../data-display/Chip/Chip.mjs";
 import { CREATE_KEY as se, defaultComboboxFilter as ce, findEnabled as a, isEnabled as le, normalizeText as o, orderItems as ue } from "./comboboxUtils.mjs";
 import s from "./Combobox.module.css.mjs";
 import { ComboboxPopup as de } from "./ComboboxPopup.mjs";
@@ -27,7 +27,7 @@ function f(e) {
 	return typeof e == "string" || typeof e == "number" ? String(e) : "";
 }
 var ve = 500, ye = (ye) => {
-	let p = n().combobox, { options: m, renderOption: be, multiple: h = !1, value: xe, defaultValue: Se, onValueChange: Ce, inputValue: we, defaultInputValue: Te, onInputValueChange: Ee, open: De, defaultOpen: Oe = !1, onOpenChange: ke, filter: Ae, loading: g = !1, loadingMessage: je = p.loading, emptyMessage: _ = p.empty, resultsMessage: Me = p.results, allowCustomValue: v = !1, onCreate: Ne, createLabel: Pe = p.create, clearable: Fe = !1, clearLabel: Ie = p.clear, requiredMessage: Le = p.required, clearOnEscape: Re = !1, showSuggestionsLabel: ze = p.showSuggestions, hideSuggestionsLabel: Be = p.hideSuggestions, selectedLabel: Ve = p.selected, autoHighlight: He = !1, loop: Ue = !0, size: We, invalid: Ge, required: Ke, disabled: qe, readOnly: Je, name: y, placement: Ye = "bottom-start", maxHeight: Xe, fullWidth: Ze = !0, container: Qe, inputClassName: $e, className: et, style: tt, id: nt, ref: rt, placeholder: it, onChange: at, onKeyDown: ot, onBlur: st, "aria-describedby": ct, "aria-label": b, "aria-labelledby": lt, ...ut } = ye, x = ae(), S = oe({
+	let p = n().combobox, { options: m, renderOption: be, multiple: h = !1, value: xe, defaultValue: Se, onValueChange: Ce, inputValue: we, defaultInputValue: Te, onInputValueChange: Ee, open: De, defaultOpen: Oe = !1, onOpenChange: ke, filter: Ae, loading: g = !1, loadingMessage: je = p.loading, emptyMessage: _ = p.empty, resultsMessage: Me = p.results, allowCustomValue: v = !1, onCreate: Ne, createLabel: Pe = p.create, clearable: Fe = !1, clearLabel: Ie = p.clear, requiredMessage: Le = p.required, clearOnEscape: Re = !1, showSuggestionsLabel: ze = p.showSuggestions, hideSuggestionsLabel: Be = p.hideSuggestions, selectedLabel: Ve = p.selected, autoHighlight: He = !1, loop: Ue = !0, size: We, invalid: Ge, required: Ke, disabled: qe, readOnly: Je, name: y, placement: Ye = "bottom-start", maxHeight: Xe, fullWidth: Ze = !0, container: Qe, inputClassName: $e, className: et, style: tt, id: nt, ref: rt, placeholder: it, onChange: at, onKeyDown: ot, onBlur: st, "aria-describedby": ct, "aria-label": b, "aria-labelledby": lt, ...ut } = ye, x = re(), S = ie({
 		id: nt,
 		invalid: Ge,
 		required: Ke,
@@ -258,7 +258,7 @@ var ve = 500, ye = (ye) => {
 		onMouseDown: Pt,
 		onClick: Ft,
 		children: [
-			Bt && /* @__PURE__ */ d(ie, {
+			Bt && /* @__PURE__ */ d(oe, {
 				"aria-label": Ve,
 				size: _e[C],
 				tone: "primary",
@@ -268,7 +268,7 @@ var ve = 500, ye = (ye) => {
 				className: s.chips,
 				children: M.map((e) => {
 					let t = k(e);
-					return /* @__PURE__ */ d(re, {
+					return /* @__PURE__ */ d(ae, {
 						startIcon: t?.icon,
 						onRemove: w ? () => Dt(e) : void 0,
 						children: t?.label ?? e