@jfrader/ui 0.5.1 → 0.6.0

package/dist/sheet-stack.js

@@ -0,0 +1,2 @@
+'use client';
+export { t as SheetStack, n as useSheetStack } from "./sheet-stack-DYX1SGSB.js";

package/dist/shortcut-recorder-VgTQdjjn.js

@@ -0,0 +1,688 @@
+'use client';
+import { i as e } from "./css-BYJhdGh-.js";
+import { n as t } from "./focus-ring-BK5W5_NY.js";
+import { n, r } from "./media-8yrN85VT.js";
+import { t as i } from "./sx-BJXJ2xJK.js";
+import { t as a } from "./use-controlled-state-DpeVQZNR.js";
+import { t as o } from "./visually-hidden-DgVO3NaB.js";
+import { t as s } from "./renderable-DzcIj1Lo.js";
+import { t as c } from "./button-C6OV0C7J.js";
+import { a as ee, i as te, n as l, t as u } from "./field-anatomy-BDIP42MI.js";
+import { t as ne } from "./text-field-D0VP7b4P.js";
+import { t as d } from "./kbd-BI_9qzYr.js";
+import { useEffect as f, useId as re, useMemo as ie, useRef as p, useState as m, useSyncExternalStore as h } from "react";
+import { vars as g } from "@jfrader/tokens/vars";
+import { Fragment as ae, jsx as _, jsxs as v } from "@emotion/react/jsx-runtime";
+import { useMergeRefs as oe } from "@floating-ui/react";
+//#region src/components/shortcut-recorder/shortcut-recorder.tsx
+var y = [
+	"mod",
+	"ctrl",
+	"alt",
+	"shift",
+	"meta"
+], se = {
+	Comma: ",",
+	Equal: "=",
+	Minus: "-",
+	Period: ".",
+	Slash: "/",
+	Semicolon: ";",
+	Quote: "'",
+	BracketLeft: "[",
+	BracketRight: "]",
+	Backslash: "\\",
+	Backquote: "`",
+	Space: "space",
+	Escape: "escape",
+	Backspace: "backspace",
+	Delete: "delete",
+	Enter: "enter",
+	ArrowUp: "arrowup",
+	ArrowDown: "arrowdown",
+	ArrowLeft: "arrowleft",
+	ArrowRight: "arrowright",
+	Home: "home",
+	End: "end",
+	PageUp: "pageup",
+	PageDown: "pagedown",
+	Insert: "insert"
+}, ce = new Set(Object.values(se)), b = {
+	ctrl: "Control",
+	alt: "Alt",
+	shift: "Shift",
+	meta: "Meta",
+	space: "Space",
+	escape: "Escape",
+	backspace: "Backspace",
+	delete: "Delete",
+	enter: "Enter",
+	arrowup: "Up arrow",
+	arrowdown: "Down arrow",
+	arrowleft: "Left arrow",
+	arrowright: "Right arrow",
+	pageup: "Page Up",
+	pagedown: "Page Down",
+	home: "Home",
+	end: "End",
+	insert: "Insert",
+	",": "Comma",
+	"=": "Equals",
+	"-": "Minus",
+	".": "Period",
+	"/": "Slash",
+	";": "Semicolon",
+	"'": "Quote",
+	"[": "Left bracket",
+	"]": "Right bracket",
+	"\\": "Backslash",
+	"`": "Backquote"
+}, x = {
+	ctrl: "⌃",
+	alt: "⌥",
+	shift: "⇧",
+	meta: "⌘"
+}, S = (e) => /^[a-z0-9]$/.test(e) || /^f(?:[1-9]|1[0-9]|2[0-4])$/.test(e) || ce.has(e), C = (e) => e === "mac" ? "meta" : "ctrl";
+function w(e, t) {
+	let n = e.toLowerCase().split("+").map((e) => e.trim()), r = n.at(-1);
+	if (!r || !S(r)) return null;
+	let i = n.slice(0, -1);
+	if (i.some((e) => !y.some((t) => t === e))) return null;
+	let a = i.map((e) => e === C(t) ? "mod" : e);
+	return new Set(a).size === a.length ? [...y.filter((e) => a.includes(e)), r].join("+") : null;
+}
+function T(e, t) {
+	return y.filter((n) => ({
+		mod: t === "mac" ? e.metaKey : e.ctrlKey,
+		ctrl: t === "mac" && e.ctrlKey,
+		alt: e.altKey,
+		shift: e.shiftKey,
+		meta: t === "other" && e.metaKey
+	})[n]);
+}
+function E(e, t) {
+	if (e.repeat || e.isComposing || [
+		"Dead",
+		"Process",
+		"Unidentified",
+		"AltGraph"
+	].includes(e.key) || e.getModifierState?.("AltGraph")) return null;
+	let n = se[e.code] ?? (/^Key[A-Z]$/.test(e.code) ? e.code.slice(3).toLowerCase() : /^Digit[0-9]$/.test(e.code) ? e.code.slice(5) : e.code.toLowerCase());
+	return S(n) ? [...T(e, t), n].join("+") : null;
+}
+function le(e, t, n) {
+	let r = w(t, n);
+	return r !== null && r === E(e, n);
+}
+function ue(e, t) {
+	return `${new Intl.NumberFormat(t).format(e)} ${new Intl.PluralRules(t).select(e) === "one" ? "shortcut" : "shortcuts"}`;
+}
+var D = {
+	placeholder: "Record shortcut",
+	recording: "Recording",
+	canceled: "Recording canceled",
+	cleared: "Shortcut cleared",
+	noShortcut: "No shortcut",
+	clearLabel: "Clear shortcut",
+	cancelLabel: "Cancel",
+	confirmLabel: "Use anyway",
+	reset: (e) => `Reset to ${e}`,
+	set: (e) => `Shortcut set to ${e}`,
+	requireModifier: (e) => `Use ${e === "mac" ? "Command, Control" : "Control, Meta"} or Alt, or a function key`,
+	conflict: (e, t, n) => `${e}: ${n ? "Reserved shortcut" : "Already assigned"} — ${t.label}`,
+	listLabel: "Keyboard shortcuts",
+	searchLabel: "Search shortcuts",
+	searchPlaceholder: "Search shortcuts",
+	empty: "No shortcuts found",
+	results: ue,
+	keyName: (e, t) => {
+		let n = e === "mod" ? C(t) : e, r = n === "meta" && t === "mac" ? "Command" : n === "alt" && t === "mac" ? "Option" : b[n] ?? n.toUpperCase();
+		return {
+			label: t === "mac" ? x[n] ?? (n.length === 1 ? n.toUpperCase() : r) : n.length === 1 ? n.toUpperCase() : r,
+			spoken: r
+		};
+	}
+};
+function O(e, t, n = D) {
+	let r = w(e, t)?.split("+").map((e) => n.keyName(e, t)) ?? [];
+	return {
+		text: r.map((e) => e.label).join(" + "),
+		spoken: r.length ? r.map((e) => e.spoken).join(" + ") : n.noShortcut
+	};
+}
+var de = () => () => {}, k = () => "other", A = () => /Mac|iPhone|iPad/.test(globalThis.navigator?.platform ?? "") ? "mac" : "other";
+function fe(e) {
+	let t = h(de, A, k);
+	return e ?? t;
+}
+function j(e, t) {
+	let [n, r] = m(/* @__PURE__ */ new Set());
+	return f(() => {
+		let n = t ?? (typeof window > "u" ? void 0 : window);
+		if (!e || !n) {
+			r(/* @__PURE__ */ new Set());
+			return;
+		}
+		let i = (e) => {
+			if (e.isComposing || e.getModifierState("AltGraph")) return;
+			let t = E(e, "other"), n = T(e, "other").map((e) => e === "mod" ? "ctrl" : e), i = t?.split("+").at(-1);
+			r((e) => /* @__PURE__ */ new Set([
+				...e,
+				...n,
+				...i ? [i] : []
+			]));
+		}, a = () => r(/* @__PURE__ */ new Set()), o = (e) => {
+			if (e.key === "Meta") {
+				a();
+				return;
+			}
+			let t = E({
+				code: e.code,
+				key: e.key,
+				ctrlKey: !1,
+				altKey: !1,
+				shiftKey: !1,
+				metaKey: !1
+			}, "other"), n = {
+				Control: "ctrl",
+				Alt: "alt",
+				Shift: "shift"
+			}[e.key] ?? t;
+			r((e) => new Set([...e].filter((e) => e !== n)));
+		}, s = () => {
+			n.document.visibilityState !== "visible" && a();
+		};
+		return n.addEventListener("keydown", i), n.addEventListener("keyup", o), n.addEventListener("blur", a), n.document.addEventListener("visibilitychange", s), () => {
+			n.removeEventListener("keydown", i), n.removeEventListener("keyup", o), n.removeEventListener("blur", a), n.document.removeEventListener("visibilitychange", s);
+		};
+	}, [e, t]), n;
+}
+function pe(e = !0) {
+	return j(e);
+}
+var me = e({
+	display: "flex",
+	alignItems: "center",
+	flexWrap: "wrap",
+	gap: g.space[2],
+	minInlineSize: 0,
+	maxInlineSize: "100%"
+}), M = e({
+	minBlockSize: g.space[8],
+	blockSize: "auto",
+	maxInlineSize: "100%",
+	whiteSpace: "normal",
+	paddingBlock: g.space[1]
+}), he = e({
+	display: "inline-flex",
+	flexWrap: "wrap",
+	alignItems: "center",
+	gap: g.space[1],
+	direction: "ltr",
+	maxInlineSize: "100%"
+}), ge = e({
+	"@starting-style": { opacity: 0 },
+	transitionProperty: "border-color, color, opacity",
+	transitionDuration: g.motion.duration.fast,
+	transitionTimingFunction: g.motion.easeStandard,
+	"&[data-pressed=\"true\"]": {
+		borderColor: g.color.borderControl,
+		color: g.color.accentText
+	},
+	[r]: { transitionDuration: "0s" },
+	[n]: {
+		borderColor: "ButtonText",
+		"&[data-pressed=\"true\"]": {
+			borderBlockEndColor: "Highlight",
+			color: "Highlight"
+		}
+	}
+}), _e = e({
+	fontSize: g.textSize.xs,
+	paddingInline: g.space[1]
+}), ve = e({
+	display: "inline-flex",
+	flexWrap: "wrap",
+	alignItems: "center",
+	gap: g.space[2],
+	boxSizing: "border-box",
+	maxInlineSize: "100%",
+	paddingBlock: g.space[1],
+	paddingInline: g.space[3],
+	border: `1px solid ${g.color.borderControl}`,
+	borderRadius: g.radius.sm,
+	backgroundColor: g.color.surface,
+	color: g.color.text,
+	fontFamily: g.font.sans,
+	lineHeight: g.lineHeight.base,
+	cursor: "pointer",
+	transitionProperty: "background-color, border-color",
+	transitionDuration: g.motion.duration.fast,
+	transitionTimingFunction: g.motion.easeStandard,
+	"&:focus-visible": t,
+	"&[aria-pressed=\"true\"]": { backgroundColor: g.color.accentSoft },
+	"&:disabled, &[aria-disabled=\"true\"]": { cursor: "not-allowed" },
+	[r]: { transitionDuration: "0s" },
+	[n]: { borderColor: "ButtonText" }
+}), ye = {
+	sm: e({
+		minBlockSize: g.space[8],
+		fontSize: g.textSize.sm
+	}),
+	md: e({
+		minBlockSize: g.space[10],
+		fontSize: g.textSize.sm
+	}),
+	lg: e({
+		minBlockSize: g.space[12],
+		fontSize: g.textSize.md
+	})
+}, be = e({
+	color: g.color.text,
+	fontSize: g.textSize.sm,
+	fontWeight: g.fontWeight.medium
+}), xe = e({
+	color: g.color.text,
+	backgroundColor: g.color.warningSoft,
+	padding: g.space[2],
+	borderRadius: g.radius.sm,
+	transitionProperty: "opacity",
+	transitionDuration: g.motion.duration.fast,
+	transitionTimingFunction: g.motion.easeStandard,
+	"@starting-style": { opacity: 0 },
+	[r]: { transitionDuration: "0s" }
+}), N = e({
+	display: "grid",
+	gap: g.space[4],
+	color: g.color.text
+}), Se = e({
+	display: "grid",
+	gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 16rem), 1fr))",
+	gap: g.space[6]
+}), Ce = e({
+	display: "flex",
+	justifyContent: "space-between",
+	alignItems: "center",
+	flexWrap: "wrap",
+	gap: g.space[2],
+	paddingBlock: g.space[2]
+}), we = e({
+	listStyle: "none",
+	padding: 0,
+	margin: 0
+}), Te = e({
+	fontSize: g.textSize.md,
+	margin: 0
+});
+function P({ shortcut: e, platform: t, pressed: n, size: r = "md", messages: a = D, locale: o, slotProps: s, className: c, sx: ee, ...te }) {
+	let l = fe(t), u = w(e, l);
+	return /* @__PURE__ */ _(i, {
+		className: c,
+		styles: he,
+		sx: ee,
+		children: (t) => /* @__PURE__ */ _("span", {
+			role: "img",
+			"aria-label": O(e, l, a).spoken,
+			...te,
+			"data-ui": "shortcut-recorder-keys",
+			className: t,
+			children: /* @__PURE__ */ _(d.Group, {
+				"aria-hidden": !0,
+				css: he,
+				children: u?.split("+").map((e) => /* @__PURE__ */ _(d, {
+					"data-pressed": n?.has(e) || n?.has(e === "mod" ? C(l) : e) || void 0,
+					className: s?.key?.className,
+					css: [
+						ge,
+						r === "sm" && _e,
+						s?.key?.css
+					],
+					children: a.keyName(e, l).label
+				}, e))
+			})
+		})
+	});
+}
+P.displayName = "ShortcutRecorder.Keys";
+function Ee({ ref: e, value: t, defaultValue: n = null, onValueChange: r, recording: i, defaultRecording: ne = !1, onRecordingChange: ie, resetValue: h, bindings: g = [], reservedBindings: y = [], warnReserved: se = !0, requireModifier: ce = !0, platform: b, label: x, description: S, error: C, hideLabel: le = !1, size: ue = "md", locale: de, messages: k = D, readOnly: A = !1, disabled: j = !1, name: pe, dir: _e, slotProps: N, className: Se, sx: Ce, onClick: we, onKeyDown: Te, onKeyUp: Ee, onBlur: De, onFocus: Oe, "aria-labelledby": ke, "aria-describedby": Ae, "aria-invalid": je, id: Me, children: Ne, ...F }) {
+	let I = fe(b), L = (e) => e === null ? null : w(e, I), Pe = p({
+		value: n,
+		recording: ne
+	}), R = p(void 0), [z, Fe] = a(t === void 0 ? void 0 : L(t), L(n), (e) => r?.(e, R.current ? { replaced: R.current } : {})), [B, Ie] = a(i, ne, ie), [V, H] = m(null), [Le, U] = m(""), [Re, W] = m(""), [ze, G] = m(null), [Be, K] = m([]), [Ve, He] = m(!1), q = p(null), Ue = oe([q, e]), J = p(!1), Y = p(!1), We = p(!1), Ge = s(x) && x !== "", X = ee({
+		id: Me,
+		description: S === "" ? void 0 : S,
+		error: C === "" ? void 0 : C,
+		"aria-describedby": Ae,
+		"aria-invalid": je
+	}), Ke = re(), qe = `${Ke}-summary`, Je = `${Ke}-label`, Ye = `${Ke}-conflict`, Z = !j && !A, Q = () => {
+		Ie(!1), K([]), W("");
+	}, $ = (e, t) => {
+		R.current = t, Fe(e), R.current = void 0;
+	}, Xe = () => {
+		H(null), Q(), $(null), U(""), G({
+			value: null,
+			text: k.cleared
+		});
+	}, Ze = () => {
+		H(null), G(null), U(k.canceled), q.current?.focus();
+	};
+	f(() => {
+		let e = q.current;
+		if (!e) return;
+		let t = e.ownerDocument.defaultView, n = () => {
+			K([]), J.current = !1, He(!1);
+		}, r = () => {
+			e.ownerDocument.visibilityState !== "visible" && n();
+		};
+		return t?.addEventListener("blur", n), e.ownerDocument.addEventListener("visibilitychange", r), () => {
+			t?.removeEventListener("blur", n), e.ownerDocument.removeEventListener("visibilitychange", r);
+		};
+	}, []), f(() => {
+		let e = q.current?.form, n = () => {
+			t === void 0 && Fe(L(Pe.current.value)), i === void 0 && Ie(Pe.current.recording), H(null), K([]), J.current = !1, U(""), G(null), W("");
+		};
+		return e?.addEventListener("reset", n), () => e?.removeEventListener("reset", n);
+	});
+	let Qe = V ? k.conflict(O(V.shortcut, I, k).spoken, V.binding, V.reserved) : "", $e = L(h === void 0 ? Pe.current.value : h), et = z ? O(z, I, k).spoken : k.noShortcut;
+	return /* @__PURE__ */ v(te, {
+		"data-ui": "shortcut-recorder",
+		dir: _e,
+		className: Se,
+		sx: Ce,
+		part: N?.root,
+		children: [
+			Ge && /* @__PURE__ */ _("span", {
+				id: Je,
+				className: N?.label?.className,
+				css: [
+					be,
+					le && o,
+					N?.label?.css
+				],
+				children: x
+			}),
+			/* @__PURE__ */ v("div", {
+				className: N?.control?.className,
+				css: [me, N?.control?.css],
+				children: [/* @__PURE__ */ v("button", {
+					...F,
+					ref: Ue,
+					id: X.id,
+					type: "button",
+					disabled: j,
+					"aria-disabled": A || F["aria-disabled"],
+					"aria-pressed": B ?? !1,
+					"aria-invalid": X.ariaInvalid,
+					"aria-labelledby": [
+						ke,
+						Ge && Je,
+						(ke || Ge || !F["aria-label"]) && qe
+					].filter(Boolean).join(" ") || void 0,
+					"aria-describedby": [X.describedBy, V && Ye].filter(Boolean).join(" ") || void 0,
+					className: N?.recorder?.className,
+					css: [
+						ve,
+						ye[ue],
+						N?.recorder?.css
+					],
+					onFocus: (e) => {
+						He(!0), We.current = !1, Oe?.(e);
+					},
+					onBlur: (e) => {
+						He(!1), J.current = !1, Y.current = !1, We.current ? K([]) : Q(), We.current = !1, De?.(e);
+					},
+					onClick: (e) => {
+						we?.(e), !Z || e.defaultPrevented || Y.current ? Y.current = !1 : (H(null), K([]), G(null), W(""), J.current = !1, Ie(!B), U(B ? k.canceled : ""));
+					},
+					onKeyDown: (e) => {
+						if (Te?.(e), !Z || e.defaultPrevented || !Ve || e.currentTarget.ownerDocument.activeElement !== e.currentTarget) return;
+						let t = e.nativeEvent;
+						if (t.isComposing || t.repeat || [
+							"Dead",
+							"Process",
+							"Unidentified",
+							"AltGraph"
+						].includes(t.key) || t.getModifierState("AltGraph")) return;
+						let n = !e.ctrlKey && !e.metaKey && !e.altKey && !e.shiftKey;
+						if (e.key === "Tab") {
+							B && (We.current = !0, Q());
+							return;
+						}
+						if (n && e.key === "Escape" && (B || V)) {
+							e.preventDefault(), e.stopPropagation(), V ? Ze() : (Q(), U(k.canceled));
+							return;
+						}
+						if (n && ["Backspace", "Delete"].includes(e.key)) {
+							e.preventDefault(), e.stopPropagation(), J.current || (J.current = !0, Xe());
+							return;
+						}
+						if (!B) return;
+						n && ["Enter", " "].includes(e.key) && (e.preventDefault(), Y.current = e.key === " "), K(T(t, I));
+						let r = E(t, I);
+						if (!r || J.current) return;
+						if (ce && !e.ctrlKey && !e.altKey && !e.metaKey && !/^f\d+$/.test(r)) {
+							W(k.requireModifier(I));
+							return;
+						}
+						e.preventDefault(), e.stopPropagation(), J.current = !0, Q();
+						let i = g.find((e) => w(e.shortcut, I) === r), a = !i && se ? y.find((e) => w(e.shortcut, I) === r) : void 0;
+						i || a ? H({
+							shortcut: r,
+							binding: i ?? a,
+							reserved: !!a
+						}) : ($(r), U(""), G({
+							value: r,
+							text: k.set(O(r, I, k).spoken)
+						}));
+					},
+					onKeyUp: (e) => {
+						Ee?.(e), J.current = !1, Y.current && e.key === " " && e.preventDefault(), Y.current = !1, B && K(e.key === "Meta" ? [] : T(e.nativeEvent, I));
+					},
+					children: [/* @__PURE__ */ _("span", {
+						id: qe,
+						css: o,
+						children: B ? [
+							k.recording,
+							...Be.map((e) => k.keyName(e, I).spoken),
+							et
+						].join(" ") : z ? et : `${k.placeholder} ${et}`
+					}), /* @__PURE__ */ _("span", {
+						"aria-hidden": !0,
+						css: he,
+						children: B ? /* @__PURE__ */ v(ae, { children: [k.recording, Be.map((e) => /* @__PURE__ */ _(d, {
+							css: [ge, N?.key?.css],
+							className: N?.key?.className,
+							children: k.keyName(e, I).label
+						}, e))] }) : z ? /* @__PURE__ */ _(P, {
+							shortcut: z,
+							platform: I,
+							messages: k,
+							locale: de,
+							"aria-hidden": !0,
+							role: "presentation",
+							slotProps: { key: N?.key }
+						}) : k.placeholder
+					})]
+				}), /* @__PURE__ */ v("div", {
+					css: [me, N?.actions?.css],
+					className: N?.actions?.className,
+					children: [/* @__PURE__ */ _(c, {
+						size: "sm",
+						variant: "outline",
+						disabled: j,
+						"aria-disabled": A,
+						css: [M, N?.reset?.css],
+						className: N?.reset?.className,
+						onClick: () => {
+							Z && (Q(), H(null), G(null), $($e));
+						},
+						children: k.reset($e ? O($e, I, k).spoken : k.noShortcut)
+					}), /* @__PURE__ */ _(c, {
+						size: "sm",
+						variant: "outline",
+						disabled: j,
+						"aria-disabled": A,
+						css: [M, N?.clear?.css],
+						className: N?.clear?.className,
+						onClick: () => {
+							Z && Xe();
+						},
+						children: k.clearLabel
+					})]
+				})]
+			}),
+			/* @__PURE__ */ _(u, {
+				id: X.descriptionId,
+				part: N?.description,
+				children: S === "" ? void 0 : S
+			}),
+			/* @__PURE__ */ _(l, {
+				id: X.errorId,
+				part: N?.error,
+				children: C === "" ? void 0 : C
+			}),
+			V && /* @__PURE__ */ v("div", {
+				onKeyDown: (e) => {
+					e.key === "Escape" && !e.defaultPrevented && (e.preventDefault(), e.stopPropagation(), Ze());
+				},
+				children: [/* @__PURE__ */ _("div", {
+					id: Ye,
+					css: [xe, N?.message?.css],
+					className: N?.message?.className,
+					children: Qe
+				}), /* @__PURE__ */ v("div", {
+					css: me,
+					children: [/* @__PURE__ */ _(c, {
+						size: "sm",
+						disabled: j,
+						"aria-disabled": A,
+						css: [M, N?.confirm?.css],
+						className: N?.confirm?.className,
+						onClick: () => {
+							Z && ($(V.shortcut, V.reserved ? void 0 : V.binding), H(null), U(""), G({
+								value: V.shortcut,
+								text: k.set(O(V.shortcut, I, k).spoken)
+							}), q.current?.focus());
+						},
+						children: k.confirmLabel
+					}), /* @__PURE__ */ _(c, {
+						size: "sm",
+						disabled: j,
+						"aria-disabled": A,
+						css: [M, N?.cancel?.css],
+						className: N?.cancel?.className,
+						onClick: Ze,
+						children: k.cancelLabel
+					})]
+				})]
+			}),
+			/* @__PURE__ */ _("span", {
+				role: "status",
+				"aria-live": "polite",
+				"aria-atomic": "true",
+				css: [o, N?.status?.css],
+				className: N?.status?.className,
+				children: Qe || (B ? Re || k.recording : ze && z === ze.value ? ze.text : Le)
+			}),
+			pe !== void 0 && /* @__PURE__ */ _("input", {
+				type: "hidden",
+				name: pe,
+				value: z ?? "",
+				disabled: j,
+				form: F.form
+			})
+		]
+	});
+}
+Ee.displayName = "ShortcutRecorder";
+function De({ groups: e, searchable: t = !0, highlightPressed: n = !0, platform: r, locale: s, messages: c = D, inputValue: ee, defaultInputValue: te = "", onInputChange: l, slotProps: u, className: d, sx: f, ref: re, ...p }) {
+	let [h, g] = a(ee, te, l), [ae, y] = m(null), se = oe([re, y]), ce = j(n, ae?.ownerDocument.defaultView), b = ie(() => {
+		let t = new Intl.Collator(s, {
+			usage: "search",
+			sensitivity: "base"
+		}), n = h ?? "", r = Array.from(n), i = (e) => {
+			let i = Array.from(e);
+			return !n || i.some((e, a) => t.compare(i.slice(a, a + r.length).join(""), n) === 0);
+		};
+		return e.map((e) => ({
+			...e,
+			items: e.items.filter((e) => i(`${e.label} ${e.keywords ?? ""} ${e.shortcut}`))
+		})).filter((e) => e.items.length);
+	}, [
+		s,
+		h,
+		e
+	]), x = b.reduce((e, t) => e + t.items.length, 0), S = c.results === ue ? ue(x, s) : c.results(x);
+	return /* @__PURE__ */ _(i, {
+		className: [d, u?.root?.className].filter(Boolean).join(" "),
+		styles: [N, u?.root?.css],
+		sx: f,
+		children: (e) => /* @__PURE__ */ v("section", {
+			"aria-label": c.listLabel,
+			...p,
+			ref: se,
+			"data-ui": "shortcut-recorder-list",
+			className: e,
+			children: [
+				t && /* @__PURE__ */ _(ne, {
+					label: c.searchLabel,
+					placeholder: c.searchPlaceholder,
+					value: h ?? "",
+					onValueChange: g,
+					slotProps: { control: u?.search },
+					onKeyDown: (e) => {
+						e.key === "Escape" && (e.preventDefault(), e.stopPropagation(), g(""));
+					}
+				}),
+				/* @__PURE__ */ _("div", {
+					css: [Se, u?.groups?.css],
+					className: u?.groups?.className,
+					children: b.map((e) => /* @__PURE__ */ v("div", {
+						css: u?.group?.css,
+						className: u?.group?.className,
+						children: [/* @__PURE__ */ _("h3", {
+							css: [Te, u?.heading?.css],
+							className: u?.heading?.className,
+							children: e.label
+						}), /* @__PURE__ */ _("ul", {
+							css: we,
+							children: e.items.map((e) => /* @__PURE__ */ v("li", {
+								css: [Ce, u?.item?.css],
+								className: u?.item?.className,
+								children: [/* @__PURE__ */ _("span", { children: e.label }), /* @__PURE__ */ _(P, {
+									shortcut: e.shortcut,
+									platform: r,
+									locale: s,
+									messages: c,
+									pressed: n ? ce : void 0,
+									css: u?.keys?.css,
+									className: u?.keys?.className
+								})]
+							}, e.label))
+						})]
+					}, e.label))
+				}),
+				!x && /* @__PURE__ */ _("p", {
+					css: u?.empty?.css,
+					className: u?.empty?.className,
+					children: c.empty
+				}),
+				/* @__PURE__ */ _("span", {
+					role: "status",
+					"aria-live": "polite",
+					"aria-atomic": "true",
+					css: [o, u?.status?.css],
+					className: u?.status?.className,
+					children: S
+				})
+			]
+		})
+	});
+}
+De.displayName = "ShortcutRecorder.List";
+var Oe = Object.assign(Ee, {
+	Keys: P,
+	List: De
+});
+//#endregion
+export { w as a, le as i, D as n, pe as o, O as r, fe as s, Oe as t };

package/dist/shortcut-recorder.js

@@ -0,0 +1,2 @@
+'use client';
+export { t as ShortcutRecorder, n as defaultShortcutMessages, r as formatShortcut, i as matchesShortcut, a as normalizeShortcut, o as usePressedShortcutKeys, s as useShortcutPlatform } from "./shortcut-recorder-VgTQdjjn.js";