@jc-times/business-ui 0.3.2 → 0.4.1

package/dist/DateInput.js

@@ -1,38 +1,56 @@
 import { useOverlayContainer as e } from "./OverlayContainer.js";
-import { forwardRef as t, useCallback as n, useEffect as r, useId as ee, useRef as i, useState as a } from "react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import { CalendarDays as te, ChevronLeft as ne, ChevronRight as re, X as c } from "lucide-react";
-import * as l from "@radix-ui/react-popover";
-import { Button as u, Calendar as ie, CalendarCell as ae, CalendarGrid as oe, CalendarGridBody as se, CalendarGridHeader as ce, CalendarHeaderCell as le, Heading as ue, I18nProvider as de } from "react-aria-components";
-import { CalendarDate as fe, getLocalTimeZone as d, parseDate as f, today as p } from "@internationalized/date";
+import { WheelDateInput as t } from "./WheelDateInput.js";
+import { forwardRef as n, useCallback as r, useEffect as i, useId as a, useRef as o, useState as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { CalendarDays as ee, ChevronLeft as te, ChevronRight as ne, X as re } from "lucide-react";
+import * as u from "@radix-ui/react-popover";
+import { Button as d, Calendar as ie, CalendarCell as ae, CalendarGrid as oe, CalendarGridBody as se, CalendarGridHeader as ce, CalendarHeaderCell as le, Heading as ue, I18nProvider as de } from "react-aria-components";
+import { CalendarDate as fe, getLocalTimeZone as f, parseDate as p, today as m } from "@internationalized/date";
 //#region src/DateInput.tsx
-var m = "jc-business-ui-date-input-open", h = t(function({ value: t, onValueChange: f, inputRef: h, inputClassName: y, className: x = "", disabled: S, readOnly: C, required: w, inputMode: pe = "numeric", autoComplete: me = "off", onFocus: T, onBlur: he, onKeyDown: ge, min: E, max: D, minDate: _e, maxDate: ve, isDateUnavailable: O, onValidationError: ye, ...k }, A) {
-	let j = `ui-date-calendar-${ee().replaceAll(":", "")}`, be = e(), M = i(null), N = i(!1), P = i(!1), F = i(!1), [I, L] = a(!1), [R, z] = a(() => g(t)), [B, V] = a(""), H = _(t), U = _(_e ?? (E === void 0 ? "" : String(E))), W = _(ve ?? (D === void 0 ? "" : String(D))), [G, K] = a(() => H ?? p(d())), q = !!(S || C), xe = n((e) => {
-		M.current = e, b(h, e), b(A, e);
-	}, [h, A]);
-	r(() => {
-		z(g(t)), V(""), M.current?.setCustomValidity("");
-	}, [t]), r(() => {
+var h = "jc-business-ui-date-input-open", g = "(hover: none) and (pointer: coarse)";
+function _() {
+	return typeof navigator > "u" ? !1 : /iPhone|iPod|Android.+Mobile/i.test(navigator.userAgent);
+}
+var v = n(function({ mobileMode: e = "calendar", ...n }, r) {
+	let [a, o] = s(() => typeof window < "u" && !!window.matchMedia?.(g).matches);
+	return i(() => {
+		if (e !== "wheel" || !window.matchMedia) return;
+		let t = window.matchMedia(g), n = () => o(t.matches);
+		return n(), t.addEventListener("change", n), () => t.removeEventListener("change", n);
+	}, [e]), e === "wheel" && a && _() ? /* @__PURE__ */ c(t, {
+		...n,
+		ref: r
+	}) : /* @__PURE__ */ c(y, {
+		...n,
+		ref: r
+	});
+}), y = n(function({ value: t, onValueChange: n, inputRef: p, inputClassName: g, className: _ = "", disabled: v, readOnly: y, required: C, inputMode: pe = "numeric", autoComplete: me = "off", onFocus: he, onBlur: ge, onKeyDown: _e, min: T, max: E, minDate: D, maxDate: ve, isDateUnavailable: O, onValidationError: ye, ...k }, A) {
+	let j = `ui-date-calendar-${a().replaceAll(":", "")}`, be = e(), M = o(null), N = o(!1), P = o(!1), F = o(!1), [I, L] = s(!1), [R, z] = s(() => b(t)), [B, V] = s(""), H = x(t), U = x(D ?? (T === void 0 ? "" : String(T))), W = x(ve ?? (E === void 0 ? "" : String(E))), [G, K] = s(() => H ?? m(f())), q = !!(v || y), xe = r((e) => {
+		M.current = e, w(p, e), w(A, e);
+	}, [p, A]);
+	i(() => {
+		z(b(t)), V(""), M.current?.setCustomValidity("");
+	}, [t]), i(() => {
 		q && L(!1);
-	}, [q]), r(() => {
+	}, [q]), i(() => {
 		let e = (e) => {
 			e.detail !== j && L(!1);
 		};
-		return document.addEventListener(m, e), () => document.removeEventListener(m, e);
+		return document.addEventListener(h, e), () => document.removeEventListener(h, e);
 	}, [j]);
 	function J(e) {
 		if (!(e && q)) {
 			if (e && !I) {
-				document.dispatchEvent(new CustomEvent(m, { detail: j }));
-				let e = H ?? p(d());
+				document.dispatchEvent(new CustomEvent(h, { detail: j }));
+				let e = H ?? m(f());
 				U && e.compare(U) < 0 && (e = U), W && e.compare(W) > 0 && (e = W), K(e);
 			}
 			L(e);
 		}
 	}
 	function Y(e) {
-		if (!e) return w ? "请选择日期" : "";
-		let t = _(e);
+		if (!e) return C ? "请选择日期" : "";
+		let t = x(e);
 		return t ? U && t.compare(U) < 0 ? `日期不能早于 ${U}` : W && t.compare(W) > 0 ? `日期不能晚于 ${W}` : O?.(t.toString()) ? "该日期不可选择" : "" : "请输入有效日期（YYYY/MM/DD）";
 	}
 	function X(e) {
@@ -40,33 +58,33 @@ var m = "jc-business-ui-date-input-open", h = t(function({ value: t, onValueChan
 	}
 	function Z() {
 		if (q) return;
-		let e = R.trim() ? v(R) : "", n = e === null ? "请输入有效日期（YYYY/MM/DD）" : Y(e);
-		X(n), !n && e !== null && (z(g(e)), e !== t && f(e));
+		let e = R.trim() ? S(R) : "", r = e === null ? "请输入有效日期（YYYY/MM/DD）" : Y(e);
+		X(r), !r && e !== null && (z(b(e)), e !== t && n(e));
 	}
 	function Q(e) {
 		if (q) return;
 		let t = Y(e);
-		X(t), !t && (F.current = !0, f(e), z(g(e)), L(!1));
+		X(t), !t && (F.current = !0, n(e), z(b(e)), L(!1));
 	}
-	let $ = p(d()).toString();
-	return /* @__PURE__ */ s(l.Root, {
+	let $ = m(f()).toString();
+	return /* @__PURE__ */ l(u.Root, {
 		open: I && !q,
 		onOpenChange: J,
 		children: [
-			/* @__PURE__ */ o(l.Anchor, {
+			/* @__PURE__ */ c(u.Anchor, {
 				asChild: !0,
-				children: /* @__PURE__ */ s("span", {
-					className: `ui-date-input${I ? " open" : ""}${x ? ` ${x}` : ""}`,
-					children: [/* @__PURE__ */ o("input", {
+				children: /* @__PURE__ */ l("span", {
+					className: `ui-date-input${I ? " open" : ""}${_ ? ` ${_}` : ""}`,
+					children: [/* @__PURE__ */ c("input", {
 						...k,
 						ref: xe,
-						className: y,
+						className: g,
 						type: "text",
 						inputMode: pe,
 						autoComplete: me,
-						disabled: S,
-						readOnly: C,
-						required: w,
+						disabled: v,
+						readOnly: y,
+						required: C,
 						value: R,
 						placeholder: k.placeholder ?? "YYYY/MM/DD",
 						"aria-haspopup": "dialog",
@@ -75,18 +93,18 @@ var m = "jc-business-ui-date-input-open", h = t(function({ value: t, onValueChan
 						"aria-invalid": B ? !0 : k["aria-invalid"],
 						"aria-describedby": [k["aria-describedby"], B ? `${j}-error` : ""].filter(Boolean).join(" ") || void 0,
 						onFocus: (e) => {
-							T?.(e), !e.defaultPrevented && !N.current && J(!0);
+							he?.(e), !e.defaultPrevented && !N.current && J(!0);
 						},
 						onChange: (e) => {
 							z(e.target.value), B && X("");
 						},
 						onBlur: (e) => {
-							Z(), he?.(e);
+							Z(), ge?.(e);
 						},
 						onKeyDown: (e) => {
-							ge?.(e), !(e.defaultPrevented || e.nativeEvent.isComposing || e.keyCode === 229 || q) && (e.key === "ArrowDown" && (e.preventDefault(), P.current = !0, J(!0), I && document.getElementById(j)?.querySelector("[role=\"gridcell\"] [tabindex=\"0\"]")?.focus()), e.key === "Enter" && (e.preventDefault(), Z()));
+							_e?.(e), !(e.defaultPrevented || e.nativeEvent.isComposing || e.keyCode === 229 || q) && (e.key === "ArrowDown" && (e.preventDefault(), P.current = !0, J(!0), I && document.getElementById(j)?.querySelector("[role=\"gridcell\"] [tabindex=\"0\"]")?.focus()), e.key === "Enter" && (e.preventDefault(), Z()));
 						}
-					}), /* @__PURE__ */ o("button", {
+					}), /* @__PURE__ */ c("button", {
 						type: "button",
 						className: "ui-date-trigger",
 						disabled: q,
@@ -96,22 +114,22 @@ var m = "jc-business-ui-date-input-open", h = t(function({ value: t, onValueChan
 						onClick: () => {
 							P.current = !0, J(!I);
 						},
-						children: /* @__PURE__ */ o(te, {
+						children: /* @__PURE__ */ c(ee, {
 							size: 17,
 							"aria-hidden": "true"
 						})
 					})]
 				})
 			}),
-			B && /* @__PURE__ */ o("span", {
+			B && /* @__PURE__ */ c("span", {
 				id: `${j}-error`,
 				className: "ui-form-error",
 				role: "alert",
 				children: B
 			}),
-			/* @__PURE__ */ o(l.Portal, {
+			/* @__PURE__ */ c(u.Portal, {
 				container: be,
-				children: /* @__PURE__ */ s(l.Content, {
+				children: /* @__PURE__ */ l(u.Content, {
 					id: j,
 					className: "ui-date-calendar",
 					"aria-label": "选择日期",
@@ -129,9 +147,9 @@ var m = "jc-business-ui-date-input-open", h = t(function({ value: t, onValueChan
 					onInteractOutside: (e) => {
 						M.current?.parentElement?.contains(e.target) && e.preventDefault();
 					},
-					children: [/* @__PURE__ */ o(de, {
+					children: [/* @__PURE__ */ c(de, {
 						locale: "zh-CN",
-						children: /* @__PURE__ */ s(ie, {
+						children: /* @__PURE__ */ l(ie, {
 							"aria-label": "选择日期",
 							value: H,
 							onChange: (e) => Q(e.toString()),
@@ -141,49 +159,49 @@ var m = "jc-business-ui-date-input-open", h = t(function({ value: t, onValueChan
 							focusedValue: G,
 							onFocusChange: (e) => K(new fe(e.year, e.month, e.day)),
 							children: [
-								/* @__PURE__ */ s("header", { children: [
-									/* @__PURE__ */ o(u, {
+								/* @__PURE__ */ l("header", { children: [
+									/* @__PURE__ */ c(d, {
 										slot: "previous",
 										"aria-label": "上个月",
-										children: /* @__PURE__ */ o(ne, { size: 18 })
+										children: /* @__PURE__ */ c(te, { size: 18 })
 									}),
-									/* @__PURE__ */ o(ue, {}),
-									/* @__PURE__ */ o(u, {
+									/* @__PURE__ */ c(ue, {}),
+									/* @__PURE__ */ c(d, {
 										slot: "next",
 										"aria-label": "下个月",
-										children: /* @__PURE__ */ o(re, { size: 18 })
+										children: /* @__PURE__ */ c(ne, { size: 18 })
 									})
 								] }),
-								/* @__PURE__ */ s("label", {
+								/* @__PURE__ */ l("label", {
 									className: "ui-date-month-jump",
-									children: ["跳转年月", /* @__PURE__ */ o("input", {
+									children: ["跳转年月", /* @__PURE__ */ c("input", {
 										type: "month",
 										"aria-label": "跳转年月",
 										value: `${G.year.toString().padStart(4, "0")}-${String(G.month).padStart(2, "0")}`,
 										min: U?.toString().slice(0, 7),
 										max: W?.toString().slice(0, 7),
 										onChange: (e) => {
-											let t = _(`${e.target.value}-01`);
+											let t = x(`${e.target.value}-01`);
 											t && K(U && t.compare(U) < 0 ? U : W && t.compare(W) > 0 ? W : t);
 										}
 									})]
 								}),
-								/* @__PURE__ */ s(oe, {
+								/* @__PURE__ */ l(oe, {
 									className: "ui-aria-calendar-grid",
-									children: [/* @__PURE__ */ o(ce, { children: (e) => /* @__PURE__ */ o(le, { children: e }) }), /* @__PURE__ */ o(se, { children: (e) => /* @__PURE__ */ o(ae, {
+									children: [/* @__PURE__ */ c(ce, { children: (e) => /* @__PURE__ */ c(le, { children: e }) }), /* @__PURE__ */ c(se, { children: (e) => /* @__PURE__ */ c(ae, {
 										date: e,
 										"data-date": e.toString()
 									}) })]
 								})
 							]
 						})
-					}), /* @__PURE__ */ s("footer", { children: [/* @__PURE__ */ s("button", {
+					}), /* @__PURE__ */ l("footer", { children: [/* @__PURE__ */ l("button", {
 						type: "button",
 						className: "ui-date-clear",
-						disabled: !t || w,
+						disabled: !t || C,
 						onClick: () => Q(""),
-						children: [/* @__PURE__ */ o(c, { size: 14 }), "清除"]
-					}), /* @__PURE__ */ o("button", {
+						children: [/* @__PURE__ */ c(re, { size: 14 }), "清除"]
+					}), /* @__PURE__ */ c("button", {
 						type: "button",
 						className: "ui-date-today",
 						disabled: !!Y($),
@@ -195,29 +213,29 @@ var m = "jc-business-ui-date-input-open", h = t(function({ value: t, onValueChan
 		]
 	});
 });
-function g(e) {
+function b(e) {
 	return /^\d{4}-\d{2}-\d{2}$/.test(e) ? e.replaceAll("-", "/") : e;
 }
-function _(e) {
-	let t = v(e);
-	return t ? f(t) : null;
+function x(e) {
+	let t = S(e);
+	return t ? p(t) : null;
 }
-function v(e) {
+function S(e) {
 	let t = e.trim().match(/^(\d{4})[/.\-](\d{1,2})[/.\-](\d{1,2})$/);
 	if (!t || Number(t[1]) < 1) return null;
 	let n = `${t[1]}-${t[2].padStart(2, "0")}-${t[3].padStart(2, "0")}`;
 	try {
-		return f(n).toString();
+		return p(n).toString();
 	} catch {
 		return null;
 	}
 }
-function y(e, t) {
+function C(e, t) {
 	let n = new Date(e, t, 1), r = new Date(e, t, 1 - n.getDay());
 	return Array.from({ length: 42 }, (e, t) => ({ date: new Date(r.getFullYear(), r.getMonth(), r.getDate() + t) }));
 }
-function b(e, t) {
+function w(e, t) {
 	typeof e == "function" ? e(t) : e && (e.current = t);
 }
 //#endregion
-export { h as DateInput, y as calendarDays, v as parseDate };
+export { v as DateInput, C as calendarDays, S as parseDate };

package/dist/DateWheelPicker.js

@@ -0,0 +1,58 @@
+import { RecoverableAsyncState as e } from "./RecoverableAsyncState.js";
+import { initialWheelDate as t, wheelBounds as n } from "./date-wheel-model.js";
+import { Component as r, Suspense as i, lazy as a, useEffect as o, useState as s } from "react";
+import { jsx as c } from "react/jsx-runtime";
+//#region src/DateWheelPicker.tsx
+var l = () => a(() => import("./AntDateWheelView.js"));
+function u(e) {
+	let [{ View: r, attempt: a }, o] = s(() => ({
+		View: l(),
+		attempt: 0
+	})), u = n(e.minDate, e.maxDate);
+	return u ? /* @__PURE__ */ c(d, {
+		onError: () => e.onPendingChange?.(!0),
+		onRetry: () => o({
+			View: l(),
+			attempt: a + 1
+		}),
+		children: /* @__PURE__ */ c(i, {
+			fallback: /* @__PURE__ */ c(f, { onPendingChange: e.onPendingChange }),
+			children: /* @__PURE__ */ c(r, {
+				...e,
+				date: t(e.value, e.minDate, e.maxDate),
+				bounds: u
+			})
+		})
+	}, a) : /* @__PURE__ */ c("p", {
+		role: "alert",
+		className: "ui-form-error",
+		children: "日期范围无效"
+	});
+}
+var d = class extends r {
+	state = { failed: !1 };
+	static getDerivedStateFromError() {
+		return { failed: !0 };
+	}
+	componentDidCatch() {
+		this.props.onError();
+	}
+	render() {
+		return this.state.failed ? /* @__PURE__ */ c(e, {
+			phase: "error",
+			loadingTitle: "加载日期选择器",
+			errorTitle: "日期选择器加载失败",
+			onRetry: this.props.onRetry
+		}) : this.props.children;
+	}
+};
+function f({ onPendingChange: e }) {
+	return o(() => {
+		e?.(!0);
+	}, [e]), /* @__PURE__ */ c("p", {
+		role: "status",
+		children: "正在加载日期选择器…"
+	});
+}
+//#endregion
+export { u as DateWheelPicker };

package/dist/MobilePickerPanel.js

@@ -0,0 +1,34 @@
+import { Button as e } from "./Button.js";
+import { useOverlayContainer as t } from "./OverlayContainer.js";
+import { ModalShell as n } from "./ModalShell.js";
+import { useId as r } from "react";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+import { createPortal as s } from "react-dom";
+//#region src/MobilePickerPanel.tsx
+function c({ title: c, children: l, onClose: u, returnFocus: d, initialFocus: f, summary: p }) {
+	let m = r(), h = t();
+	return s(/* @__PURE__ */ a(n, {
+		titleId: `${m}-title`,
+		title: c,
+		closeLabel: "关闭选择面板",
+		mobileMode: "bottom-sheet",
+		onClose: u,
+		returnFocus: d,
+		initialFocus: f,
+		backdropClassName: "ui-picker-sheet-backdrop",
+		panelClassName: "ui-picker-sheet",
+		contentClassName: "ui-picker-sheet-content",
+		footerClassName: "ui-picker-sheet-footer",
+		footer: /* @__PURE__ */ o(i, { children: [p && /* @__PURE__ */ a("span", {
+			className: "ui-picker-sheet-summary",
+			role: "status",
+			children: p
+		}), /* @__PURE__ */ a(e, {
+			onClick: u,
+			children: "完成"
+		})] }),
+		children: l
+	}), h ?? document.body);
+}
+//#endregion
+export { c as MobilePickerPanel };

package/dist/ModalShell.js

@@ -1,105 +1,117 @@
 import { Button as e } from "./Button.js";
 import { OverlayContainerContext as t } from "./OverlayContainer.js";
-import { Children as n, Fragment as r, isValidElement as i, useCallback as a, useEffect as o, useRef as s, useState as c } from "react";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
-import { X as d } from "lucide-react";
-import * as f from "@radix-ui/react-dialog";
+import { useSheetViewport as n } from "./useSheetViewport.js";
+import { Children as r, Fragment as i, isValidElement as a, useCallback as o, useEffect as s, useRef as c, useState as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { X as f } from "lucide-react";
+import * as p from "@radix-ui/react-dialog";
 //#region src/ModalShell.tsx
-function p({ backdropClassName: e = "", panelClassName: n = "", titleId: r, eyebrow: i, title: d, description: p, closeLabel: _, onClose: b, closeDisabled: x = !1, showCloseButton: S = !0, closeIconSize: C = 20, closeOnBackdrop: w = !1, rootRef: T, closeOnEscape: E = !0, initialFocus: D, returnFocus: O, role: k = "dialog", describedBy: A, children: j, footer: M, contentClassName: N = "", contentProps: P, footerClassName: F = "" }) {
-	let I = s(null), [L, R] = c(null), z = s(typeof document > "u" ? null : document.activeElement), B = a((e) => {
-		I.current = e, v(T, e);
-	}, [T]), V = s(!1), { ref: H, ...U } = P ?? {};
-	function W() {
-		return [...document.querySelectorAll("[role='dialog'][aria-modal='true'],[role='alertdialog'][aria-modal='true']")].at(-1) === I.current;
+var m = Symbol("ui-modal-nested-escape");
+function h({ backdropClassName: e = "", panelClassName: r = "", titleId: i, eyebrow: a, title: f, description: h, closeLabel: y, onClose: S, closeDisabled: C = !1, showCloseButton: w = !0, closeIconSize: T = 20, closeOnBackdrop: E = !1, rootRef: D, closeOnEscape: O = !0, initialFocus: k, returnFocus: A, role: j = "dialog", describedBy: M, children: N, footer: P, contentClassName: F = "", contentProps: I, footerClassName: L = "", mobileMode: R = "fullscreen" }) {
+	let z = n(R === "bottom-sheet"), B = c(null), [V, H] = l(null), U = c(typeof document > "u" ? null : document.activeElement), W = o((e) => {
+		B.current = e, b(D, e);
+	}, [D]), G = c(!1), { ref: K, ...q } = I ?? {};
+	function J() {
+		return [...document.querySelectorAll("[role='dialog'][aria-modal='true'],[role='alertdialog'][aria-modal='true']")].at(-1) === B.current;
 	}
-	function G() {
-		!x && W() && b();
+	function Y() {
+		!C && J() && S();
 	}
-	o(() => {
-		h() && M === void 0 && !V.current && m(j) && (V.current = !0, console.warn("[business-ui] ModalShell 的直接 <footer> child 会位于可滚动正文区。固定底栏请改用 footer 属性，并用 footerClassName 定制样式；组件不会自动搬运 children。"));
-	}, [j, M]);
-	function K(e) {
-		w && e.target === e.currentTarget && G(), e.target.closest("button,a[href],input,select,textarea,[tabindex]") || e.preventDefault();
+	s(() => {
+		_() && P === void 0 && !G.current && g(N) && (G.current = !0, console.warn("[business-ui] ModalShell 的直接 <footer> child 会位于可滚动正文区。固定底栏请改用 footer 属性，并用 footerClassName 定制样式；组件不会自动搬运 children。"));
+	}, [N, P]);
+	function X(e) {
+		E && e.target === e.currentTarget && Y(), e.target.closest("button,a[href],input,select,textarea,[tabindex]") || e.preventDefault();
 	}
-	return /* @__PURE__ */ l(f.Root, {
+	return /* @__PURE__ */ u(p.Root, {
 		open: !0,
 		onOpenChange: (e) => {
-			e || G();
+			e || Y();
 		},
-		children: /* @__PURE__ */ l(f.Overlay, {
+		children: /* @__PURE__ */ u(p.Overlay, {
 			asChild: !0,
-			children: /* @__PURE__ */ l(f.Content, {
+			children: /* @__PURE__ */ u(p.Content, {
 				asChild: !0,
 				onEscapeKeyDown: (e) => {
-					(x || !E || I.current?.querySelector("[data-ui-aria-overlay]")) && e.preventDefault();
+					if (!J()) {
+						e[m] = !0, e.preventDefault();
+						return;
+					}
+					(C || !O || B.current?.querySelector("[data-ui-aria-overlay]")) && e.preventDefault();
 				},
 				onInteractOutside: (e) => e.preventDefault(),
 				onOpenAutoFocus: (e) => {
-					let t = y(D);
+					let t = x(k);
 					t && !t.hasAttribute("disabled") && (e.preventDefault(), t.focus());
 				},
 				onCloseAutoFocus: (e) => {
-					if (e.preventDefault(), O !== !1) {
-						let e = y(O) ?? z.current;
+					if (e.preventDefault(), A !== !1) {
+						let e = x(A) ?? U.current;
 						e?.isConnected && e.focus();
 					}
 				},
-				children: /* @__PURE__ */ l("div", {
-					ref: B,
+				children: /* @__PURE__ */ u("div", {
+					ref: W,
 					"data-ui-focus-managed": "radix",
+					"data-mobile-mode": R,
+					style: z,
 					className: `ui-modal-backdrop ${e}`.trim(),
-					role: k,
+					role: j,
 					"aria-modal": "true",
-					"aria-labelledby": r,
-					"aria-describedby": A ?? (p === void 0 ? void 0 : `${r}-description`),
-					onMouseDown: K,
+					"aria-labelledby": i,
+					"aria-describedby": M ?? (h === void 0 ? void 0 : `${i}-description`),
+					onMouseDown: X,
 					tabIndex: -1,
-					children: /* @__PURE__ */ u(t.Provider, {
-						value: L,
-						children: [/* @__PURE__ */ u("section", {
-							className: `ui-modal ${n}`.trim(),
+					onKeyDown: (e) => {
+						let t = e.nativeEvent[m];
+						e.key === "Escape" && (!e.defaultPrevented || t) && J() && O && !C && !B.current?.querySelector("[data-ui-aria-overlay]") && (e.preventDefault(), e.stopPropagation(), Y());
+					},
+					children: /* @__PURE__ */ d(t.Provider, {
+						value: V,
+						children: [/* @__PURE__ */ d("section", {
+							className: `ui-modal ${r}`.trim(),
 							children: [
-								/* @__PURE__ */ u("header", {
+								/* @__PURE__ */ d("header", {
 									className: "ui-modal-header",
-									children: [/* @__PURE__ */ u("div", { children: [
-										i === void 0 ? null : /* @__PURE__ */ l("span", {
+									children: [/* @__PURE__ */ d("div", { children: [
+										a === void 0 ? null : /* @__PURE__ */ u("span", {
 											className: "ui-modal-eyebrow",
-											children: i
+											children: a
 										}),
-										/* @__PURE__ */ l(f.Title, {
+										/* @__PURE__ */ u(p.Title, {
 											asChild: !0,
-											children: /* @__PURE__ */ l("h2", {
-												id: r,
-												children: d
+											children: /* @__PURE__ */ u("h2", {
+												id: i,
+												children: f
 											})
 										}),
-										p === void 0 ? null : /* @__PURE__ */ l(f.Description, {
+										h === void 0 ? null : /* @__PURE__ */ u(p.Description, {
 											asChild: !0,
-											children: /* @__PURE__ */ l("p", {
-												id: `${r}-description`,
-												children: p
+											children: /* @__PURE__ */ u("p", {
+												id: `${i}-description`,
+												children: h
 											})
 										})
-									] }), S && /* @__PURE__ */ l(g, {
-										label: _,
-										disabled: x,
-										size: C,
-										onClose: G
+									] }), w && /* @__PURE__ */ u(v, {
+										label: y,
+										disabled: C,
+										size: T,
+										onClose: Y
 									})]
 								}),
-								/* @__PURE__ */ l("div", {
-									...U,
-									ref: H,
-									className: `ui-modal-content ${N}`.trim(),
-									children: j
+								/* @__PURE__ */ u("div", {
+									...q,
+									ref: K,
+									className: `ui-modal-content ${F}`.trim(),
+									children: N
 								}),
-								M === void 0 ? null : /* @__PURE__ */ l("footer", {
-									className: `ui-modal-footer ${F}`.trim(),
-									children: M
+								P === void 0 ? null : /* @__PURE__ */ u("footer", {
+									className: `ui-modal-footer ${L}`.trim(),
+									children: P
 								})
 							]
-						}), /* @__PURE__ */ l("div", {
-							ref: R,
+						}), /* @__PURE__ */ u("div", {
+							ref: H,
 							className: "ui-overlay-container"
 						})]
 					})
@@ -108,32 +120,32 @@ function p({ backdropClassName: e = "", panelClassName: n = "", titleId: r, eyeb
 		})
 	});
 }
-function m(e) {
-	return n.toArray(e).some((e) => i(e) ? e.type === "footer" || e.type === r && m(e.props.children) : !1);
+function g(e) {
+	return r.toArray(e).some((e) => a(e) ? e.type === "footer" || e.type === i && g(e.props.children) : !1);
 }
-function h() {
+function _() {
 	return typeof process < "u" && process.env.NODE_ENV !== "production";
 }
-function g({ label: t, disabled: n, size: r, onClose: i }) {
-	return /* @__PURE__ */ l(e, {
+function v({ label: t, disabled: n, size: r, onClose: i }) {
+	return /* @__PURE__ */ u(e, {
 		className: "ui-modal-close",
 		variant: "ghost",
 		iconOnly: !0,
 		"aria-label": t,
 		onClick: i,
 		disabled: n,
-		children: /* @__PURE__ */ l(d, {
+		children: /* @__PURE__ */ u(f, {
 			size: r,
 			"aria-hidden": "true"
 		})
 	});
 }
-var _ = p;
-function v(e, t) {
+var y = h;
+function b(e, t) {
 	typeof e == "function" ? e(t) : e && (e.current = t);
 }
-function y(e) {
+function x(e) {
 	return e && "current" in e ? e.current : e || null;
 }
 //#endregion
-export { _ as Dialog, p as ModalShell };
+export { y as Dialog, h as ModalShell };

package/dist/MultiSelect.js

@@ -43,6 +43,7 @@ function x({ values: x, defaultValues: S = y, onValuesChange: C, name: w, select
 		selectionMode: "multiple",
 		value: Z,
 		onChange: (e) => Q(e.map(String)),
+		allowsCustomValue: !0,
 		inputValue: j,
 		defaultInputValue: M,
 		onInputChange: N,
@@ -87,7 +88,10 @@ function x({ values: x, defaultValues: S = y, onValuesChange: C, name: w, select
 							id: e.id,
 							textValue: e.label,
 							className: "ui-selection-tag",
-							children: [e.label, /* @__PURE__ */ r(c, {
+							children: [/* @__PURE__ */ r("span", {
+								className: "ui-selection-tag-label",
+								children: e.label
+							}), /* @__PURE__ */ r(c, {
 								slot: "remove",
 								"aria-label": `移除 ${e.label}`,
 								children: "×"