@studiolxd/brand 49.28.0 → 50.0.0

package/dist/async-multi-select.js

@@ -2,193 +2,124 @@
 import './async-multi-select.css';
 import { n as e } from "./_shared/brandmessagescontext.js";
 import { Icon as t } from "./icon.js";
-import { Spinner as n } from "./spinner.js";
-import { n as r } from "./_shared/portal-container.js";
-import { forwardRef as i, useCallback as a, useEffect as o, useId as s, useRef as c, useState as l } from "react";
-import { jsx as u, jsxs as d } from "react/jsx-runtime";
-import { Popover as f } from "@base-ui/react/popover";
+import { VisuallyHidden as n } from "./visually-hidden.js";
+import { Spinner as r } from "./spinner.js";
+import { t as i } from "./_shared/useasyncoptions.js";
+import { n as a } from "./_shared/portal-container.js";
+import { forwardRef as o, useState as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { Combobox as u } from "@base-ui/react/combobox";
 //#region src/stories/atoms/AsyncMultiSelect/AsyncMultiSelect.tsx
-function ee(e, t) {
-	typeof e == "function" ? e(t) : e && (e.current = t);
-}
-var p = i(function({ onSearch: i, value: p, defaultValue: te = [], onValueChange: ne, selectedOptions: m, placeholder: h, disabled: g, readOnly: _, size: v = "md", debounceMs: re = 300, id: ie, name: y, error: b = !1, required: x, onBlur: S, className: ae, "aria-label": C, "aria-describedby": oe, removeLabel: se, emptyMessage: ce, loadingLabel: w, container: T }, E) {
-	let D = e("asyncMultiSelect"), O = r(T), [k, A] = l(!1), [j, M] = l(""), [N, P] = l(!1), [F, I] = l([]), [L, R] = l(!1), [z, B] = l(-1), [V, H] = l(te), [U, W] = l([]), G = c(null), K = c(0), q = c(null), J = c(null), Y = s(), le = s(), X = p === void 0 ? V : p, ue = X.map((e) => m?.find((t) => t.value === e) ?? U.find((t) => t.value === e) ?? {
+var d = [], f = (e, t) => e.value === t.value, p = o(function({ onSearch: o, value: p, defaultValue: m = [], onValueChange: h, selectedOptions: g, placeholder: _, disabled: v, readOnly: y, size: b = "md", debounceMs: x = 300, id: S, name: C, error: w = !1, required: T, onBlur: E, className: D, "aria-label": O, "aria-describedby": k, removeLabel: A, emptyMessage: j, loadingLabel: M, container: N }, P) {
+	let F = e("asyncMultiSelect"), I = a(N), { results: L, loading: R, hasSearched: ee, search: z, schedule: B } = i(o, x), [V, H] = s(!1), [U, W] = s(""), [G, K] = s(m), [q, J] = s([]), Y = p === void 0 ? G : p, X = Y.map((e) => g?.find((t) => t.value === e) ?? q.find((t) => t.value === e) ?? {
 		value: e,
 		label: e
-	}), Z = (e) => `${le}-opt-${e}`, Q = a(async (e) => {
-		let t = ++K.current;
-		P(!0), R(!1);
-		try {
-			let n = await i(e);
-			if (t !== K.current) return;
-			I(n), B(-1);
-		} catch {
-			if (t !== K.current) return;
-			I([]), B(-1);
-		} finally {
-			t === K.current && (P(!1), R(!0));
-		}
-	}, [i]);
-	o(() => () => {
-		K.current += 1, G.current && clearTimeout(G.current);
-	}, []);
-	function de(e) {
-		let t = e.target.value;
-		M(t), k || A(!0), G.current && clearTimeout(G.current), G.current = setTimeout(() => void Q(t), re);
-	}
-	function fe(e) {
-		g || _ || k || (e.preventDefault(), q.current?.focus(), B(-1), M(""), I([]), R(!1), A(!0), Q(""));
-	}
-	function $(e, t) {
-		let n = X.includes(e) ? X.filter((t) => t !== e) : [...X, e];
-		t && W((e) => e.some((e) => e.value === t.value) ? e : [...e, t]), p === void 0 && H(n), ne?.(n);
+	});
+	function Z(e) {
+		J((t) => {
+			let n = e.filter((e) => !t.some((t) => t.value === e.value));
+			return n.length ? [...t, ...n] : t;
+		});
+		let t = e.map((e) => e.value);
+		p === void 0 && K(t), h?.(t);
 	}
-	function pe(e) {
-		if (e.key === "ArrowDown") e.preventDefault(), k ? B((e) => Math.min(e + 1, F.length - 1)) : (A(!0), Q(j));
-		else if (e.key === "ArrowUp") e.preventDefault(), B((e) => Math.max(e - 1, -1));
-		else if (e.key === "Enter" && z >= 0 && F[z]) e.preventDefault(), $(F[z].value, F[z]), q.current?.focus();
-		else if (e.key === "Escape") A(!1), M(""), B(-1);
-		else if (e.key === "Tab") A(!1), B(-1);
-		else if (e.key === "Backspace" && j === "" && X.length > 0) {
-			let e = X[X.length - 1];
-			$(e);
-		}
+	function Q(e, t) {
+		e !== V && (H(e), !(e && t.reason === "input-change") && (W(""), e && z("")));
 	}
-	function me(e, t) {
-		if (!e) {
-			if (t.reason === "outside-press") {
-				let e = t.event?.target;
-				if (e instanceof Node && J.current?.contains(e)) return;
-			}
-			A(!1), M(""), B(-1);
-		}
+	function $(e) {
+		e.key === "Escape" && !V && e.preventBaseUIHandler?.();
 	}
-	let he = [
+	let te = [
 		"async-multi-select",
-		v === "md" ? "" : `async-multi-select--${v}`,
-		g ? "async-multi-select--disabled" : "",
-		k ? "async-multi-select--open" : "",
-		b ? "async-multi-select--error" : "",
-		ae ?? ""
-	].filter(Boolean).join(" "), ge = ["async-multi-select__content", v === "md" ? "" : `async-multi-select__content--${v}`].filter(Boolean).join(" ");
-	return /* @__PURE__ */ d(f.Root, {
-		open: k,
-		onOpenChange: me,
-		children: [/* @__PURE__ */ d("div", {
-			ref: J,
-			className: he,
-			"data-popup-open": k || void 0,
-			children: [/* @__PURE__ */ d("div", {
+		b === "md" ? "" : `async-multi-select--${b}`,
+		v ? "async-multi-select--disabled" : "",
+		V ? "async-multi-select--open" : "",
+		w ? "async-multi-select--error" : "",
+		D ?? ""
+	].filter(Boolean).join(" "), ne = ["async-multi-select__content", b === "md" ? "" : `async-multi-select__content--${b}`].filter(Boolean).join(" ");
+	return /* @__PURE__ */ l(u.Root, {
+		multiple: !0,
+		items: R ? d : L,
+		filter: null,
+		value: X,
+		onValueChange: Z,
+		isItemEqualToValue: f,
+		inputValue: U,
+		onInputValueChange: (e, t) => {
+			t.reason === "input-change" && (W(e), B(e));
+		},
+		open: V,
+		onOpenChange: Q,
+		name: C,
+		disabled: v,
+		readOnly: y,
+		children: [/* @__PURE__ */ l(u.InputGroup, {
+			className: te,
+			children: [/* @__PURE__ */ l(u.Chips, {
 				className: "async-multi-select__input-area",
-				children: [
-					ue.map((e) => /* @__PURE__ */ d("span", {
-						className: "async-multi-select__pill",
-						children: [/* @__PURE__ */ u("span", {
-							className: "async-multi-select__pill-label",
-							children: e.label
-						}), !g && !_ && /* @__PURE__ */ u("button", {
-							type: "button",
-							className: "async-multi-select__pill-remove",
-							"aria-label": D("remove", se)(e.label),
-							tabIndex: -1,
-							onMouseDown: (t) => {
-								t.preventDefault(), $(e.value);
-							},
-							children: /* @__PURE__ */ u(t, {
-								name: "close",
-								size: "xs"
-							})
-						})]
-					}, e.value)),
-					/* @__PURE__ */ u("input", {
-						ref: (e) => {
-							q.current = e, ee(E, e);
-						},
-						id: ie,
-						type: "text",
-						className: "async-multi-select__input",
-						value: j,
-						onChange: de,
-						onPointerDown: fe,
-						onKeyDown: pe,
-						placeholder: X.length === 0 ? D("placeholder", h) : void 0,
-						disabled: g,
-						readOnly: _,
-						"aria-label": C,
-						"aria-describedby": oe,
-						"aria-invalid": b || void 0,
-						"aria-required": x || void 0,
-						"aria-expanded": k,
-						"aria-haspopup": "listbox",
-						"aria-controls": k ? Y : void 0,
-						"aria-activedescendant": z >= 0 ? Z(z) : void 0,
-						autoComplete: "off",
-						role: "combobox",
-						"aria-autocomplete": "list",
-						onBlur: S
-					}),
-					y && X.map((e) => /* @__PURE__ */ u("input", {
-						type: "hidden",
-						name: y,
-						value: e
-					}, e))
-				]
-			}), N && /* @__PURE__ */ u(n, {
+				children: [X.map((e) => /* @__PURE__ */ l(u.Chip, {
+					className: "async-multi-select__pill",
+					children: [/* @__PURE__ */ c("span", {
+						className: "async-multi-select__pill-label",
+						children: e.label
+					}), !v && !y && /* @__PURE__ */ c(u.ChipRemove, {
+						className: "async-multi-select__pill-remove",
+						"aria-label": F("remove", A)(e.label),
+						children: /* @__PURE__ */ c(t, {
+							name: "close",
+							size: "xs"
+						})
+					})]
+				}, e.value)), /* @__PURE__ */ c(u.Input, {
+					ref: P,
+					id: S,
+					className: "async-multi-select__input",
+					onKeyDown: $,
+					placeholder: Y.length === 0 ? F("placeholder", _) : void 0,
+					"aria-label": O,
+					"aria-describedby": k,
+					"aria-invalid": w || void 0,
+					"aria-required": T || void 0,
+					onBlur: E
+				})]
+			}), R && /* @__PURE__ */ c(r, {
 				size: "sm",
 				"aria-hidden": !0
 			})]
-		}), /* @__PURE__ */ u(f.Portal, {
-			container: O,
-			children: /* @__PURE__ */ u(f.Positioner, {
+		}), /* @__PURE__ */ c(u.Portal, {
+			container: I,
+			children: /* @__PURE__ */ c(u.Positioner, {
 				className: "async-multi-select__positioner",
-				anchor: J,
 				align: "start",
 				sideOffset: -1,
-				children: /* @__PURE__ */ u(f.Popup, {
-					className: ge,
-					initialFocus: !1,
-					finalFocus: !1,
-					children: /* @__PURE__ */ d("div", {
-						role: "listbox",
-						"aria-multiselectable": "true",
-						"aria-label": C ?? D("placeholder", h),
-						id: Y,
-						children: [
-							N && /* @__PURE__ */ u("div", {
-								className: "async-multi-select__loading",
-								children: /* @__PURE__ */ u(n, {
-									size: "sm",
-									label: D("loading", w)
-								})
-							}),
-							!N && L && F.length === 0 && /* @__PURE__ */ u("div", {
-								className: "async-multi-select__empty",
-								children: D("empty", ce)
-							}),
-							!N && F.map((e, t) => {
-								let n = X.includes(e.value), r = z === t;
-								return /* @__PURE__ */ d("div", {
-									id: Z(t),
-									role: "option",
-									"aria-selected": n,
-									className: [
-										"async-multi-select__item",
-										n ? "async-multi-select__item--selected" : "",
-										r ? "async-multi-select__item--active" : ""
-									].filter(Boolean).join(" "),
-									onPointerDown: (e) => e.preventDefault(),
-									onClick: () => {
-										$(e.value, e), q.current?.focus();
-									},
-									children: [/* @__PURE__ */ u("span", {
-										className: "async-multi-select__item-check",
-										"aria-hidden": "true",
-										children: /* @__PURE__ */ u("span", { className: "async-multi-select__item-check-mark" })
-									}), /* @__PURE__ */ u("span", { children: e.label })]
-								}, e.value);
-							})
-						]
-					})
+				children: /* @__PURE__ */ l(u.Popup, {
+					className: ne,
+					"aria-busy": R || void 0,
+					children: [
+						/* @__PURE__ */ c(u.Status, { children: R && /* @__PURE__ */ l("div", {
+							className: "async-multi-select__loading",
+							children: [/* @__PURE__ */ c(r, {
+								size: "sm",
+								"aria-hidden": !0
+							}), /* @__PURE__ */ c(n, { children: F("loading", M) })]
+						}) }),
+						/* @__PURE__ */ c(u.Empty, { children: !R && ee && /* @__PURE__ */ c("div", {
+							className: "async-multi-select__empty",
+							children: F("empty", j)
+						}) }),
+						/* @__PURE__ */ c(u.List, {
+							"aria-label": O ?? F("placeholder", _),
+							children: (e) => /* @__PURE__ */ l(u.Item, {
+								value: e,
+								className: "async-multi-select__item",
+								children: [/* @__PURE__ */ c("span", {
+									className: "async-multi-select__item-check",
+									"aria-hidden": "true",
+									children: /* @__PURE__ */ c("span", { className: "async-multi-select__item-check-mark" })
+								}), /* @__PURE__ */ c("span", { children: e.label })]
+							}, e.value)
+						})
+					]
 				})
 			})
 		})]

package/dist/async-select.css

@@ -1 +1 @@
-.async-select{align-items:center;gap:var(--async-select-content-gap);block-size:var(--async-select-height);padding-block:0;padding-inline:var(--async-select-padding-inline);font-family:var(--async-select-font-family);font-size:var(--async-select-font-size);line-height:var(--async-select-line-height);font-weight:var(--async-select-font-weight);color:var(--async-select-color);background-color:var(--async-select-bg);border-width:var(--async-select-border-width);border-style:var(--async-select-border-style);border-color:var(--async-select-border-color);border-radius:var(--async-select-border-radius);box-sizing:border-box;width:100%;display:inline-flex}.async-select:focus-within{outline:var(--async-select-focus-ring-width) solid var(--async-select-focus-ring-color);outline-offset:calc(-1 * (var(--async-select-focus-ring-width) + var(--async-select-border-width)))}.async-select.async-select--disabled{opacity:.5;cursor:var(--async-select-disabled-cursor);pointer-events:none}.async-select__input{all:unset;cursor:text;min-width:0;font-family:inherit;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;flex:1}.async-select__input::placeholder{color:var(--async-select-placeholder-color)}.async-select__input:disabled{cursor:var(--async-select-disabled-cursor)}.async-select__clear{all:unset;cursor:pointer;line-height:1;font-size:var(--async-select-font-size);opacity:.7;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.async-select__clear:hover{opacity:1}.async-select__content{background-color:var(--async-select-content-bg);border-width:var(--async-select-border-width);border-style:var(--async-select-border-style);border-color:var(--async-select-content-border-color);min-width:var(--anchor-width);max-height:var(--async-select-content-max-height,var(--available-height));overscroll-behavior:contain;overflow-y:auto}.async-select__content[data-side=bottom]{border-top:none}.async-select__content[data-side=top]{border-bottom:none}.async-select__loading{padding-block:var(--async-select-loading-padding-block);padding-inline:var(--async-select-loading-padding-inline);justify-content:center;align-items:center;display:flex}.async-select__empty{padding-block:var(--async-select-empty-padding-block);padding-inline:var(--async-select-empty-padding-inline);font-size:var(--async-select-empty-font-size);font-family:var(--async-select-empty-font-family);color:var(--async-select-empty-color)}.async-select__item{all:unset;box-sizing:border-box;width:100%;padding-block:var(--async-select-item-padding-block);padding-inline:var(--async-select-padding-inline);font-size:var(--async-select-font-size);font-family:var(--async-select-font-family);color:var(--async-select-color);cursor:pointer;align-items:center;display:flex}.async-select__item:focus-visible,.async-select__item:hover{background-color:var(--async-select-item-highlighted-bg);color:var(--async-select-item-highlighted-color)}.async-select__item.async-select__item--selected{font-weight:var(--async-select-item-selected-font-weight)}.async-select__item.async-select__item--active{background-color:var(--async-select-item-highlighted-bg);color:var(--async-select-item-highlighted-color)}.async-select__content .async-select__item+.async-select__item,.async-select__content[data-side=bottom] .async-select__item:first-child{border-top:var(--async-select-border-width) var(--async-select-border-style) var(--async-select-content-border-color)}.async-select__content[data-side=top] .async-select__item:last-child{border-bottom:var(--async-select-border-width) var(--async-select-border-style) var(--async-select-content-border-color)}.async-select.async-select--sm{font-size:var(--async-select-sm-font-size);--async-select-height:var(--async-select-sm-height);padding-inline:var(--async-select-sm-padding-inline)}.async-select__content--sm .async-select__item{font-size:var(--async-select-sm-font-size);padding-block:var(--async-select-sm-item-padding-block)}.async-select.async-select--lg{font-size:var(--async-select-lg-font-size);--async-select-height:var(--async-select-lg-height);padding-inline:var(--async-select-lg-padding-inline)}.async-select__content--lg .async-select__item{font-size:var(--async-select-lg-font-size);padding-block:var(--async-select-lg-item-padding-block)}.async-select__positioner{z-index:var(--async-select-content-z-index)}.async-select.async-select--error{border-color:var(--async-select-error-border-color)}
+.async-select{align-items:center;gap:var(--async-select-content-gap);block-size:var(--async-select-height);padding-block:0;padding-inline:var(--async-select-padding-inline);font-family:var(--async-select-font-family);font-size:var(--async-select-font-size);line-height:var(--async-select-line-height);font-weight:var(--async-select-font-weight);color:var(--async-select-color);background-color:var(--async-select-bg);border-width:var(--async-select-border-width);border-style:var(--async-select-border-style);border-color:var(--async-select-border-color);border-radius:var(--async-select-border-radius);box-sizing:border-box;inline-size:100%;display:inline-flex}.async-select:focus-within{outline:var(--async-select-focus-ring-width) solid var(--async-select-focus-ring-color);outline-offset:calc(-1 * (var(--async-select-focus-ring-width) + var(--async-select-border-width)))}.async-select.async-select--disabled{opacity:var(--async-select-disabled-opacity);cursor:var(--async-select-disabled-cursor);pointer-events:none}.async-select__input{all:unset;cursor:text;min-inline-size:0;font-family:inherit;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;flex:1}.async-select__input::placeholder{color:var(--async-select-placeholder-color)}.async-select__input:disabled{cursor:var(--async-select-disabled-cursor)}.async-select__clear{all:unset;cursor:pointer;line-height:1;font-size:var(--async-select-font-size);opacity:var(--async-select-clear-opacity);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.async-select__clear:hover{opacity:var(--async-select-clear-hover-opacity)}.async-select__content{background-color:var(--async-select-content-bg);border-width:var(--async-select-border-width);border-style:var(--async-select-border-style);border-color:var(--async-select-content-border-color);min-inline-size:var(--anchor-width);max-block-size:var(--async-select-content-max-height,var(--available-height));overscroll-behavior:contain;overflow-y:auto}.async-select__content[data-side=bottom]{border-block-start:none}.async-select__content[data-side=top]{border-block-end:none}.async-select__loading{padding-block:var(--async-select-loading-padding-block);padding-inline:var(--async-select-loading-padding-inline);justify-content:center;align-items:center;display:flex}.async-select__empty{padding-block:var(--async-select-empty-padding-block);padding-inline:var(--async-select-empty-padding-inline);font-size:var(--async-select-empty-font-size);font-family:var(--async-select-empty-font-family);color:var(--async-select-empty-color)}.async-select__item{all:unset;box-sizing:border-box;inline-size:100%;padding-block:var(--async-select-item-padding-block);padding-inline:var(--async-select-padding-inline);font-size:var(--async-select-font-size);font-family:var(--async-select-font-family);color:var(--async-select-color);cursor:pointer;align-items:center;display:flex}.async-select__item[data-highlighted],.async-select__item:hover{background-color:var(--async-select-item-highlighted-bg);color:var(--async-select-item-highlighted-color)}.async-select__item[data-selected]{font-weight:var(--async-select-item-selected-font-weight)}.async-select__content .async-select__item+.async-select__item,.async-select__content[data-side=bottom] .async-select__item:first-child{border-block-start:var(--async-select-border-width) var(--async-select-border-style) var(--async-select-content-border-color)}.async-select__content[data-side=top] .async-select__item:last-child{border-block-end:var(--async-select-border-width) var(--async-select-border-style) var(--async-select-content-border-color)}.async-select.async-select--sm{font-size:var(--async-select-sm-font-size);--async-select-height:var(--async-select-sm-height);padding-inline:var(--async-select-sm-padding-inline)}.async-select__content--sm .async-select__item{font-size:var(--async-select-sm-font-size);padding-block:var(--async-select-sm-item-padding-block)}.async-select.async-select--lg{font-size:var(--async-select-lg-font-size);--async-select-height:var(--async-select-lg-height);padding-inline:var(--async-select-lg-padding-inline)}.async-select__content--lg .async-select__item{font-size:var(--async-select-lg-font-size);padding-block:var(--async-select-lg-item-padding-block)}.async-select__positioner{z-index:var(--async-select-content-z-index)}.async-select.async-select--error{border-color:var(--async-select-error-border-color)}

package/dist/async-select.js

@@ -2,169 +2,113 @@
 import './async-select.css';
 import { n as e } from "./_shared/brandmessagescontext.js";
 import { Icon as t } from "./icon.js";
-import { Spinner as n } from "./spinner.js";
-import { n as r } from "./_shared/portal-container.js";
-import { forwardRef as i, useCallback as ee, useEffect as a, useId as o, useRef as s, useState as c } from "react";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
-import { Popover as d } from "@base-ui/react/popover";
+import { VisuallyHidden as n } from "./visually-hidden.js";
+import { Spinner as r } from "./spinner.js";
+import { t as i } from "./_shared/useasyncoptions.js";
+import { n as a } from "./_shared/portal-container.js";
+import { forwardRef as o, useState as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { Combobox as u } from "@base-ui/react/combobox";
 //#region src/stories/atoms/AsyncSelect/AsyncSelect.tsx
-function f(e, t) {
-	typeof e == "function" ? e(t) : e && (e.current = t);
-}
-var p = i(function({ onSearch: i, value: p, onValueChange: m, selectedOption: h, placeholder: g, disabled: _, readOnly: v, size: y = "md", debounceMs: b = 300, id: x, name: S, error: C = !1, required: te, onBlur: ne, className: w, "aria-label": T, "aria-describedby": re, emptyMessage: E, loadingLabel: D, clearLabel: ie, container: ae }, oe) {
-	let O = e("asyncSelect"), se = r(ae), [k, A] = c(!1), [j, M] = c(""), [N, P] = c(!1), [F, I] = c([]), [ce, L] = c(!1), [R, z] = c(-1), [B, V] = c(null), [H, U] = c(null), W = s(null), G = s(0), K = s(null), q = s(null), J = o(), le = o(), Y = p === void 0 ? B : p, ue = h === void 0 ? H : h, X = (e) => `${le}-opt-${e}`, Z = ee(async (e) => {
-		let t = ++G.current;
-		P(!0), L(!1);
-		try {
-			let n = await i(e);
-			if (t !== G.current) return;
-			I(n), z(-1);
-		} catch {
-			if (t !== G.current) return;
-			I([]), z(-1);
-		} finally {
-			t === G.current && (P(!1), L(!0));
-		}
-	}, [i]);
-	a(() => () => {
-		G.current += 1, W.current && clearTimeout(W.current);
-	}, []);
-	function de(e) {
-		let t = e.target.value;
-		M(t), W.current && clearTimeout(W.current), W.current = setTimeout(() => void Z(t), b);
+var d = [], f = (e, t) => e.value === t.value, p = o(function({ onSearch: o, value: p, onValueChange: m, selectedOption: h, placeholder: g, disabled: _, readOnly: v, size: y = "md", debounceMs: b = 300, id: x, name: S, error: C = !1, required: w, onBlur: T, className: E, "aria-label": D, "aria-describedby": O, emptyMessage: k, loadingLabel: A, clearLabel: j, container: M }, N) {
+	let P = e("asyncSelect"), F = a(M), { results: I, loading: L, hasSearched: R, search: z, schedule: B, clear: V } = i(o, b), [H, U] = s(!1), [W, G] = s(""), [K, q] = s(null), [J, Y] = s(null), X = p === void 0 ? K : p, Z = (h === void 0 ? J : h)?.label ?? "", Q = X ? {
+		value: X,
+		label: Z
+	} : null;
+	function $(e) {
+		p === void 0 && (q(e?.value ?? null), Y(e)), m?.(e?.value ?? null, e);
 	}
-	function fe(e) {
-		_ || v || k || (e.preventDefault(), K.current?.focus(), z(-1), M(""), I([]), L(!1), A(!0), Z(""));
+	function ee() {
+		$(null), G(""), V();
 	}
-	function Q(e) {
-		p === void 0 && (V(e.value), U(e)), m?.(e.value, e), A(!1), z(-1), M("");
+	function te(e, t) {
+		e !== H && (U(e), !(e && t.reason === "input-change") && (G(""), e && z("")));
 	}
-	function $() {
-		p === void 0 && (V(null), U(null)), m?.(null, null), M(""), I([]), L(!1), K.current?.focus();
+	function ne(e) {
+		_ || v || (e.key === "Escape" && !H ? e.preventBaseUIHandler?.() : (e.key === "Backspace" || e.key === "Delete") && W === "" && X ? (e.preventDefault(), e.preventBaseUIHandler?.(), ee()) : !H && e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey && (e.preventDefault(), e.preventBaseUIHandler?.(), U(!0), G(e.key), V(), B(e.key)));
 	}
-	function pe(e) {
-		e.stopPropagation(), $();
-	}
-	function me(e) {
-		e.key === "ArrowDown" ? (e.preventDefault(), k ? z((e) => Math.min(e + 1, F.length - 1)) : (A(!0), Z(j))) : e.key === "ArrowUp" ? (e.preventDefault(), z((e) => Math.max(e - 1, -1))) : e.key === "Enter" && R >= 0 && F[R] ? (e.preventDefault(), Q(F[R])) : e.key === "Escape" ? (A(!1), M(""), z(-1)) : e.key === "Tab" ? (A(!1), z(-1)) : (e.key === "Backspace" || e.key === "Delete") && j === "" && Y && !_ && !v ? (e.preventDefault(), $()) : !k && e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey && (e.preventDefault(), M(e.key), A(!0), I([]), L(!1), W.current && clearTimeout(W.current), W.current = setTimeout(() => void Z(e.key), b));
-	}
-	function he(e, t) {
-		if (!e) {
-			if (t.reason === "outside-press") {
-				let e = t.event?.target;
-				if (e instanceof Node && q.current?.contains(e)) return;
-			}
-			A(!1), M(""), z(-1);
-		}
-	}
-	let ge = k ? j : ue?.label ?? "", _e = [
+	let re = [
 		"async-select",
 		y === "md" ? "" : `async-select--${y}`,
 		_ ? "async-select--disabled" : "",
 		C ? "async-select--error" : "",
-		w ?? ""
-	].filter(Boolean).join(" "), ve = ["async-select__content", y === "md" ? "" : `async-select__content--${y}`].filter(Boolean).join(" ");
-	return /* @__PURE__ */ u(d.Root, {
-		open: k,
-		onOpenChange: he,
-		children: [/* @__PURE__ */ u("div", {
-			ref: q,
-			className: _e,
-			"data-popup-open": k || void 0,
+		E ?? ""
+	].filter(Boolean).join(" "), ie = ["async-select__content", y === "md" ? "" : `async-select__content--${y}`].filter(Boolean).join(" ");
+	return /* @__PURE__ */ l(u.Root, {
+		items: L ? d : I,
+		filter: null,
+		value: Q,
+		onValueChange: (e) => {
+			$(e), G("");
+		},
+		isItemEqualToValue: f,
+		inputValue: H ? W : Z,
+		onInputValueChange: (e, t) => {
+			t.reason === "input-change" && (G(e), B(e));
+		},
+		open: H,
+		onOpenChange: te,
+		name: S,
+		disabled: _,
+		readOnly: v,
+		children: [/* @__PURE__ */ l(u.InputGroup, {
+			className: re,
 			children: [
-				/* @__PURE__ */ l("input", {
-					ref: (e) => {
-						K.current = e, f(oe, e);
-					},
+				/* @__PURE__ */ c(u.Input, {
+					ref: N,
 					id: x,
-					type: "text",
 					className: "async-select__input",
-					value: ge,
-					onChange: de,
-					onPointerDown: fe,
-					onKeyDown: me,
-					placeholder: O("placeholder", g),
-					disabled: _,
-					readOnly: v,
-					"aria-label": T,
-					"aria-describedby": re,
+					onKeyDown: ne,
+					placeholder: P("placeholder", g),
+					"aria-label": D,
+					"aria-describedby": O,
 					"aria-invalid": C || void 0,
-					"aria-required": te || void 0,
-					"aria-expanded": k,
-					"aria-haspopup": "listbox",
-					"aria-controls": k ? J : void 0,
-					"aria-activedescendant": R >= 0 ? X(R) : void 0,
-					autoComplete: "off",
-					role: "combobox",
-					"aria-autocomplete": "list",
-					onBlur: ne
+					"aria-required": w || void 0,
+					onBlur: T
 				}),
-				S && /* @__PURE__ */ l("input", {
-					type: "hidden",
-					name: S,
-					value: Y ?? ""
-				}),
-				N && /* @__PURE__ */ l(n, {
+				L && /* @__PURE__ */ c(r, {
 					size: "sm",
 					"aria-hidden": !0
 				}),
-				!N && Y && !_ && !v && /* @__PURE__ */ l("button", {
-					type: "button",
+				!L && !_ && !v && /* @__PURE__ */ c(u.Clear, {
 					className: "async-select__clear",
-					"aria-label": O("clear", ie),
-					tabIndex: -1,
-					onMouseDown: pe,
-					children: /* @__PURE__ */ l(t, {
+					"aria-label": P("clear", j),
+					children: /* @__PURE__ */ c(t, {
 						name: "close",
 						size: "xs"
 					})
 				})
 			]
-		}), /* @__PURE__ */ l(d.Portal, {
-			container: se,
-			children: /* @__PURE__ */ l(d.Positioner, {
+		}), /* @__PURE__ */ c(u.Portal, {
+			container: F,
+			children: /* @__PURE__ */ c(u.Positioner, {
 				className: "async-select__positioner",
-				anchor: q,
 				align: "start",
 				sideOffset: -1,
-				children: /* @__PURE__ */ l(d.Popup, {
-					className: ve,
-					initialFocus: !1,
-					finalFocus: !1,
-					children: /* @__PURE__ */ u("div", {
-						role: "listbox",
-						"aria-label": T ?? O("placeholder", g),
-						id: J,
-						children: [
-							N && /* @__PURE__ */ l("div", {
-								className: "async-select__loading",
-								children: /* @__PURE__ */ l(n, {
-									size: "sm",
-									label: O("loading", D)
-								})
-							}),
-							!N && ce && F.length === 0 && /* @__PURE__ */ l("div", {
-								className: "async-select__empty",
-								children: O("empty", E)
-							}),
-							!N && F.map((e, t) => {
-								let n = e.value === Y, r = R === t;
-								return /* @__PURE__ */ l("div", {
-									id: X(t),
-									role: "option",
-									"aria-selected": n,
-									className: [
-										"async-select__item",
-										n ? "async-select__item--selected" : "",
-										r ? "async-select__item--active" : ""
-									].filter(Boolean).join(" "),
-									onPointerDown: (e) => e.preventDefault(),
-									onClick: () => Q(e),
-									children: e.label
-								}, e.value);
-							})
-						]
-					})
+				children: /* @__PURE__ */ l(u.Popup, {
+					className: ie,
+					"aria-busy": L || void 0,
+					children: [
+						/* @__PURE__ */ c(u.Status, { children: L && /* @__PURE__ */ l("div", {
+							className: "async-select__loading",
+							children: [/* @__PURE__ */ c(r, {
+								size: "sm",
+								"aria-hidden": !0
+							}), /* @__PURE__ */ c(n, { children: P("loading", A) })]
+						}) }),
+						/* @__PURE__ */ c(u.Empty, { children: !L && R && /* @__PURE__ */ c("div", {
+							className: "async-select__empty",
+							children: P("empty", k)
+						}) }),
+						/* @__PURE__ */ c(u.List, {
+							"aria-label": D ?? P("placeholder", g),
+							children: (e) => /* @__PURE__ */ c(u.Item, {
+								value: e,
+								className: "async-select__item",
+								children: e.label
+							}, e.value)
+						})
+					]
 				})
 			})
 		})]

package/dist/autocomplete.css

@@ -1 +1 @@
-.autocomplete{align-items:center;gap:var(--autocomplete-content-gap);block-size:var(--autocomplete-height);padding-block:0;padding-inline:var(--autocomplete-padding-inline);font-family:var(--autocomplete-font-family);font-size:var(--autocomplete-font-size);line-height:var(--autocomplete-line-height);font-weight:var(--autocomplete-font-weight);color:var(--autocomplete-color);background-color:var(--autocomplete-bg);border-width:var(--autocomplete-border-width);border-style:var(--autocomplete-border-style);border-color:var(--autocomplete-border-color);border-radius:var(--autocomplete-border-radius);box-sizing:border-box;width:100%;display:inline-flex}.autocomplete:focus-within{outline:var(--autocomplete-focus-ring-width) solid var(--autocomplete-focus-ring-color);outline-offset:calc(-1 * (var(--autocomplete-focus-ring-width) + var(--autocomplete-border-width)))}.autocomplete.autocomplete--disabled{opacity:.5;cursor:var(--autocomplete-disabled-cursor);pointer-events:none}.autocomplete__input{all:unset;cursor:text;min-width:0;font-family:inherit;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;flex:1}.autocomplete__input::placeholder{color:var(--autocomplete-placeholder-color)}.autocomplete__input:disabled{cursor:var(--autocomplete-disabled-cursor)}.autocomplete__content{background-color:var(--autocomplete-content-bg);border-width:var(--autocomplete-border-width);border-style:var(--autocomplete-border-style);border-color:var(--autocomplete-content-border-color);min-width:var(--anchor-width);max-height:var(--autocomplete-content-max-height,var(--available-height));overscroll-behavior:contain;overflow-y:auto}.autocomplete__content[data-side=bottom]{border-top:none}.autocomplete__content[data-side=top]{border-bottom:none}.autocomplete__item{all:unset;box-sizing:border-box;width:100%;padding-block:var(--autocomplete-item-padding-block);padding-inline:var(--autocomplete-padding-inline);font-size:var(--autocomplete-font-size);font-family:var(--autocomplete-font-family);color:var(--autocomplete-color);cursor:pointer;align-items:center;display:flex}.autocomplete__item:focus-visible,.autocomplete__item:hover{background-color:var(--autocomplete-item-highlighted-bg);color:var(--autocomplete-item-highlighted-color)}.autocomplete__item.autocomplete__item--selected{font-weight:var(--autocomplete-item-selected-font-weight)}.autocomplete__item.autocomplete__item--active{background-color:var(--autocomplete-item-highlighted-bg);color:var(--autocomplete-item-highlighted-color)}.autocomplete__content .autocomplete__item+.autocomplete__item,.autocomplete__content[data-side=bottom] .autocomplete__item:first-child{border-top:var(--autocomplete-border-width) var(--autocomplete-border-style) var(--autocomplete-content-border-color)}.autocomplete__content[data-side=top] .autocomplete__item:last-child{border-bottom:var(--autocomplete-border-width) var(--autocomplete-border-style) var(--autocomplete-content-border-color)}.autocomplete.autocomplete--sm{font-size:var(--autocomplete-sm-font-size);--autocomplete-height:var(--autocomplete-sm-height);padding-inline:var(--autocomplete-sm-padding-inline)}.autocomplete__content--sm .autocomplete__item{font-size:var(--autocomplete-sm-font-size);padding-block:var(--autocomplete-sm-item-padding-block)}.autocomplete.autocomplete--lg{font-size:var(--autocomplete-lg-font-size);--autocomplete-height:var(--autocomplete-lg-height);padding-inline:var(--autocomplete-lg-padding-inline)}.autocomplete__content--lg .autocomplete__item{font-size:var(--autocomplete-lg-font-size);padding-block:var(--autocomplete-lg-item-padding-block)}.autocomplete__positioner{z-index:var(--autocomplete-content-z-index)}.autocomplete.autocomplete--error{border-color:var(--autocomplete-error-border-color)}
+.autocomplete{align-items:center;gap:var(--autocomplete-content-gap);block-size:var(--autocomplete-height);padding-block:0;padding-inline:var(--autocomplete-padding-inline);font-family:var(--autocomplete-font-family);font-size:var(--autocomplete-font-size);line-height:var(--autocomplete-line-height);font-weight:var(--autocomplete-font-weight);color:var(--autocomplete-color);background-color:var(--autocomplete-bg);border-width:var(--autocomplete-border-width);border-style:var(--autocomplete-border-style);border-color:var(--autocomplete-border-color);border-radius:var(--autocomplete-border-radius);box-sizing:border-box;inline-size:100%;display:inline-flex}.autocomplete:focus-within{outline:var(--autocomplete-focus-ring-width) solid var(--autocomplete-focus-ring-color);outline-offset:calc(-1 * (var(--autocomplete-focus-ring-width) + var(--autocomplete-border-width)))}.autocomplete.autocomplete--disabled{opacity:var(--autocomplete-disabled-opacity);cursor:var(--autocomplete-disabled-cursor);pointer-events:none}.autocomplete__input{all:unset;cursor:text;min-inline-size:0;font-family:inherit;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;flex:1}.autocomplete__input::placeholder{color:var(--autocomplete-placeholder-color)}.autocomplete__input:disabled{cursor:var(--autocomplete-disabled-cursor)}.autocomplete__content{background-color:var(--autocomplete-content-bg);border-width:var(--autocomplete-border-width);border-style:var(--autocomplete-border-style);border-color:var(--autocomplete-content-border-color);min-inline-size:var(--anchor-width);max-block-size:var(--autocomplete-content-max-height,var(--available-height));overscroll-behavior:contain;overflow-y:auto}.autocomplete__content[data-side=bottom]{border-block-start:none}.autocomplete__content[data-side=top]{border-block-end:none}.autocomplete__item{all:unset;box-sizing:border-box;inline-size:100%;padding-block:var(--autocomplete-item-padding-block);padding-inline:var(--autocomplete-padding-inline);font-size:var(--autocomplete-font-size);font-family:var(--autocomplete-font-family);color:var(--autocomplete-color);cursor:pointer;align-items:center;display:flex}.autocomplete__item[data-highlighted],.autocomplete__item:hover{background-color:var(--autocomplete-item-highlighted-bg);color:var(--autocomplete-item-highlighted-color)}.autocomplete__item.autocomplete__item--selected{font-weight:var(--autocomplete-item-selected-font-weight)}.autocomplete__content .autocomplete__item+.autocomplete__item,.autocomplete__content[data-side=bottom] .autocomplete__item:first-child{border-block-start:var(--autocomplete-border-width) var(--autocomplete-border-style) var(--autocomplete-content-border-color)}.autocomplete__content[data-side=top] .autocomplete__item:last-child{border-block-end:var(--autocomplete-border-width) var(--autocomplete-border-style) var(--autocomplete-content-border-color)}.autocomplete.autocomplete--sm{font-size:var(--autocomplete-sm-font-size);--autocomplete-height:var(--autocomplete-sm-height);padding-inline:var(--autocomplete-sm-padding-inline)}.autocomplete__content--sm .autocomplete__item{font-size:var(--autocomplete-sm-font-size);padding-block:var(--autocomplete-sm-item-padding-block)}.autocomplete.autocomplete--lg{font-size:var(--autocomplete-lg-font-size);--autocomplete-height:var(--autocomplete-lg-height);padding-inline:var(--autocomplete-lg-padding-inline)}.autocomplete__content--lg .autocomplete__item{font-size:var(--autocomplete-lg-font-size);padding-block:var(--autocomplete-lg-item-padding-block)}.autocomplete__positioner{z-index:var(--autocomplete-content-z-index)}.autocomplete.autocomplete--error{border-color:var(--autocomplete-error-border-color)}