@jfrader/ui 0.4.0 → 0.5.1

package/dist/command-palette-BmQu2w4H.js

@@ -0,0 +1,391 @@
+'use client';
+import { r as e, t } from "./sx-Dx9JUKp5.js";
+import { t as n } from "./focus-ring-BK5W5_NY.js";
+import { t as r } from "./use-controlled-state-DpeVQZNR.js";
+import { t as i } from "./visually-hidden-BJdvqqvn.js";
+import { t as a } from "./renderable-DzcIj1Lo.js";
+import { n as o, t as s } from "./surface-DZ4d-2aL.js";
+import { t as c } from "./trigger-style-B1KVC8O1.js";
+import { t as l } from "./overlay-layer-qEbpEtb8.js";
+import { i as u, r as d, t as f } from "./use-native-dialog-DWpIUVO1.js";
+import { n as p, t as m } from "./listbox-style-WX-RASp1.js";
+import { a as h, r as g, t as _ } from "./collection-registry-k6JcD3Jr.js";
+import { createContext as v, useCallback as y, useContext as b, useId as x, useMemo as S, useRef as C, useState as w } from "react";
+import { vars as T } from "@jfrader/tokens/vars";
+import { jsx as E, jsxs as D } from "@emotion/react/jsx-runtime";
+import { FloatingList as O, useFloatingRootContext as k, useInteractions as A, useListNavigation as j, useMergeRefs as M } from "@floating-ui/react";
+//#region src/components/command-palette/command-palette.styles.ts
+var N = e({
+	...s,
+	marginBlockStart: T.space[12]
+}), P = e({
+	...o,
+	display: "flex",
+	flexDirection: "column",
+	borderRadius: T.radius.lg,
+	boxShadow: T.shadow.floating,
+	inlineSize: "min(560px, calc(100vw - 32px))"
+}), F = e({
+	boxSizing: "border-box",
+	inlineSize: "100%",
+	blockSize: "48px",
+	margin: 0,
+	border: 0,
+	borderBlockEnd: `1px solid ${T.color.borderControl}`,
+	borderStartStartRadius: T.radius.lg,
+	borderStartEndRadius: T.radius.lg,
+	backgroundColor: "transparent",
+	paddingInline: T.space[4],
+	font: "inherit",
+	fontSize: T.textSize.md,
+	color: T.color.text,
+	"&::placeholder": { color: T.color.textSubtle },
+	"&:focus-visible": { ...n }
+}), I = e({
+	boxSizing: "border-box",
+	display: "flex",
+	flexDirection: "column",
+	maxBlockSize: "320px",
+	overflow: "auto",
+	padding: T.space[1],
+	"&[hidden]": { display: "none" }
+}), L = e({
+	display: "flex",
+	flexDirection: "column",
+	"&[hidden]": { display: "none" }
+}), ee = e({
+	paddingBlock: T.space[1],
+	paddingInline: T.space[2],
+	fontSize: T.textSize.xs,
+	fontWeight: T.fontWeight.medium,
+	color: T.color.textMuted
+}), te = e({
+	minInlineSize: 0,
+	overflowWrap: "anywhere",
+	"&[hidden]": { display: "none" }
+}), R = e({
+	paddingBlock: T.space[6],
+	paddingInline: T.space[4],
+	textAlign: "center",
+	fontSize: T.textSize.sm,
+	color: T.color.textMuted
+}), ne = "Command palette", re = "No results", z = new Intl.PluralRules("en"), ie = (e, t) => e.toLocaleLowerCase().includes(t.toLocaleLowerCase()), ae = (e) => `${e} ${z.select(e) === "one" ? "result" : "results"}`, B = v(null), V = v(null);
+function H(e) {
+	let t = b(B);
+	if (!t) throw Error(`CommandPalette.${e} must be rendered inside <CommandPalette>.`);
+	return t;
+}
+var U = (e) => {
+	e?.setAttribute("autofocus", "");
+};
+function W({ open: e, defaultOpen: t = !1, onOpenChange: n, label: i = ne, filter: a = ie, emptyMessage: o = re, formatResultCount: s = ae, children: c }) {
+	let l = x(), [d = !1, f] = r(e, t, n), { dialogElementRef: p, setDialogElement: m, setOpen: g, requestClose: _, repairToken: v } = u(d, f), [b, T] = w(""), [D, O] = w(!1), [M, N] = w(null), [P, F] = h(), [I, L] = w(null), [ee, te] = w(null), [R, z] = w(d), V = C([]);
+	d !== R && (z(d), d && (T(""), O(!1), N(null)));
+	let H = y(() => {
+		g(!(d && p.current?.open));
+	}, [
+		d,
+		g,
+		p
+	]), { matchedValues: U, matchedIndices: W, visibleGroupIds: G } = S(() => {
+		let e = /* @__PURE__ */ new Set(), t = [], n = /* @__PURE__ */ new Set();
+		return P.forEach((r, i) => {
+			r.index !== -1 && (b === "" || a(r.label, b) || r.keywords !== void 0 && a(r.keywords, b)) && (e.add(i), r.disabled || t.push(r.index), r.groupId !== null && n.add(r.groupId));
+		}), t.sort((e, t) => e - t), {
+			matchedValues: e,
+			matchedIndices: t,
+			visibleGroupIds: n
+		};
+	}, [
+		P,
+		b,
+		a
+	]), K = S(() => new Set(W), [W]), q = M !== null && K.has(M) ? M : W[0] ?? null, J = k({
+		open: d,
+		onOpenChange: (e) => g(e),
+		elements: {
+			reference: I,
+			floating: ee
+		}
+	}), Y = j(J, {
+		listRef: V,
+		activeIndex: q,
+		onNavigate: (e) => {
+			e !== null && N(e);
+		},
+		virtual: !0,
+		loop: !0,
+		focusItemOnOpen: !1,
+		disabledIndices: (e) => !K.has(e)
+	}), { getReferenceProps: X, getFloatingProps: Z, getItemProps: Q } = A([Y]), $ = U.size, oe = D ? s($) : "", se = S(() => ({
+		open: d,
+		setOpen: g,
+		toggleOpen: H,
+		requestClose: _,
+		repairToken: v,
+		setDialogElement: m,
+		label: i,
+		emptyMessage: o,
+		baseId: l,
+		listId: `${l}-list`,
+		query: b,
+		announcement: oe,
+		matchCount: $,
+		matchedValues: U,
+		visibleGroupIds: G,
+		activeIndex: q,
+		elementsRef: V,
+		setInputElement: L,
+		setListElement: te,
+		getReferenceProps: X,
+		getFloatingProps: Z,
+		getItemProps: Q,
+		changeQuery: (e) => {
+			T(e), O(!0), N(null);
+		},
+		moveToEdge: (e) => {
+			let t = e === "first" ? W[0] : W[W.length - 1];
+			t !== void 0 && N(t);
+		},
+		registration: F
+	}), [
+		d,
+		g,
+		H,
+		_,
+		v,
+		m,
+		i,
+		o,
+		l,
+		b,
+		oe,
+		$,
+		U,
+		W,
+		G,
+		q,
+		X,
+		Z,
+		Q,
+		F
+	]);
+	return /* @__PURE__ */ E(B.Provider, {
+		value: se,
+		children: c
+	});
+}
+function G(e) {
+	return /* @__PURE__ */ E(l, { children: /* @__PURE__ */ E(W, { ...e }) });
+}
+G.displayName = "CommandPalette";
+function K({ ref: e, onClick: n, className: r, sx: i, ...a }) {
+	let { open: o, toggleOpen: s } = H("Trigger"), l = (e) => {
+		n?.(e), e.defaultPrevented || s();
+	};
+	return /* @__PURE__ */ E(t, {
+		className: r,
+		styles: c,
+		sx: i,
+		children: (t) => /* @__PURE__ */ E("button", {
+			type: "button",
+			...a,
+			ref: e,
+			"data-ui": "command-palette-trigger",
+			"aria-haspopup": "dialog",
+			"aria-expanded": o,
+			onClick: l,
+			className: t
+		})
+	});
+}
+K.displayName = "CommandPalette.Trigger";
+function q({ ref: e, className: n, sx: r, ...a }) {
+	let { children: o, onCancel: s, onClick: c, onClose: l, ...u } = f(a), p = H("Content"), { label: m, announcement: h } = p, g = d(p, {
+		onCancel: s,
+		onClick: c,
+		onClose: l
+	}, e);
+	return /* @__PURE__ */ E(t, {
+		className: n,
+		styles: N,
+		sx: r,
+		children: (e) => /* @__PURE__ */ E("dialog", {
+			"aria-label": m,
+			...u,
+			...g,
+			"data-ui": "command-palette",
+			"aria-modal": "true",
+			className: e,
+			children: /* @__PURE__ */ D("div", {
+				css: P,
+				children: [o, /* @__PURE__ */ E("div", {
+					role: "status",
+					"aria-live": "polite",
+					"aria-atomic": "true",
+					css: i,
+					children: h
+				})]
+			})
+		})
+	});
+}
+q.displayName = "CommandPalette.Content";
+function J({ ref: e, onChange: n, onKeyDown: r, className: i, sx: a, ...o }) {
+	let { label: s, listId: c, query: l, matchCount: u, activeIndex: d, elementsRef: f, requestClose: p, setInputElement: m, getReferenceProps: h, changeQuery: g, moveToEdge: _ } = H("Input"), v = M([
+		m,
+		U,
+		e
+	]), y = (e) => {
+		n?.(e), g(e.currentTarget.value);
+	}, b = (e) => {
+		r?.(e), !(e.defaultPrevented || e.nativeEvent.isComposing) && (e.key === "Escape" ? (e.preventDefault(), p()) : (e.key === "Home" || e.key === "End") && !e.shiftKey && !e.ctrlKey && !e.metaKey && !e.altKey ? (e.preventDefault(), _(e.key === "Home" ? "first" : "last")) : e.key === "Enter" && d !== null && (e.preventDefault(), f.current[d]?.click()));
+	};
+	return /* @__PURE__ */ E(t, {
+		className: i,
+		styles: F,
+		sx: a,
+		children: (e) => /* @__PURE__ */ E("input", {
+			"aria-label": s,
+			autoComplete: "off",
+			spellCheck: !1,
+			...h({
+				...o,
+				onChange: y,
+				onKeyDown: b
+			}),
+			ref: v,
+			type: "text",
+			value: l,
+			role: "combobox",
+			"aria-autocomplete": "list",
+			"aria-expanded": u > 0,
+			"aria-controls": c,
+			"data-ui": "command-palette-input",
+			className: e
+		})
+	});
+}
+J.displayName = "CommandPalette.Input";
+function Y({ ref: e, onMouseDown: n, children: r, className: i, sx: a, ...o }) {
+	let { label: s, listId: c, matchCount: l, elementsRef: u, setListElement: d, getFloatingProps: f } = H("List"), p = M([d, e]), m = (e) => {
+		n?.(e), e.preventDefault();
+	};
+	return /* @__PURE__ */ E(t, {
+		className: i,
+		styles: I,
+		sx: a,
+		children: (e) => /* @__PURE__ */ E("div", {
+			"aria-label": s,
+			...f({
+				...o,
+				onMouseDown: m
+			}),
+			ref: p,
+			id: c,
+			role: "listbox",
+			hidden: l === 0,
+			"data-ui": "command-palette-list",
+			className: e,
+			children: /* @__PURE__ */ E(O, {
+				elementsRef: u,
+				children: r
+			})
+		})
+	});
+}
+Y.displayName = "CommandPalette.List";
+function X({ ref: e, children: n, className: r, sx: i, ...o }) {
+	let { matchCount: s, emptyMessage: c } = H("Empty");
+	return s > 0 ? null : /* @__PURE__ */ E(t, {
+		className: r,
+		styles: R,
+		sx: i,
+		children: (t) => /* @__PURE__ */ E("div", {
+			...o,
+			ref: e,
+			"data-ui": "command-palette-empty",
+			className: t,
+			children: a(n) ? n : c
+		})
+	});
+}
+X.displayName = "CommandPalette.Empty";
+function Z({ ref: e, label: n, children: r, "aria-labelledby": i, className: a, sx: o, ...s }) {
+	let { visibleGroupIds: c } = H("Group"), l = x(), u = `${l}-heading`;
+	return /* @__PURE__ */ E(t, {
+		className: a,
+		styles: L,
+		sx: o,
+		children: (t) => /* @__PURE__ */ D("div", {
+			...s,
+			ref: e,
+			role: "group",
+			"aria-labelledby": [i, u].filter(Boolean).join(" "),
+			hidden: !c.has(l),
+			"data-ui": "command-palette-group",
+			className: t,
+			children: [/* @__PURE__ */ E("div", {
+				id: u,
+				css: ee,
+				children: n
+			}), /* @__PURE__ */ E(V.Provider, {
+				value: l,
+				children: r
+			})]
+		})
+	});
+}
+Z.displayName = "CommandPalette.Group";
+function Q({ ref: e, value: n, onSelect: r, keywords: i, "aria-disabled": a, onClick: o, children: s, className: c, sx: l, ...u }) {
+	let { baseId: d, activeIndex: f, matchedValues: h, getItemProps: v, setOpen: y, registration: x } = H("Item"), S = b(V), w = a === !0 || a === "true", T = C(null), { ref: D, index: O } = g(n, x, T, (e, t) => ({
+		index: e,
+		label: t,
+		disabled: w,
+		keywords: i,
+		groupId: S
+	})), k = M([
+		D,
+		T,
+		e
+	]), A = O !== -1 && f === O, j = (e) => {
+		o?.(e), !(e.defaultPrevented || w) && (r?.(), y(!1));
+	};
+	return /* @__PURE__ */ E(t, {
+		className: c,
+		styles: [
+			p,
+			m,
+			te
+		],
+		sx: l,
+		children: (e) => /* @__PURE__ */ E("div", {
+			...v({
+				id: _(d, n),
+				...u,
+				onClick: j
+			}),
+			ref: k,
+			role: "option",
+			"aria-disabled": a,
+			"aria-selected": A,
+			hidden: !h.has(n),
+			"data-active": A || void 0,
+			"data-ui": "command-palette-item",
+			className: e,
+			children: s
+		})
+	});
+}
+Q.displayName = "CommandPalette.Item";
+var $ = Object.assign(G, {
+	Trigger: K,
+	Content: q,
+	Input: J,
+	List: Y,
+	Empty: X,
+	Group: Z,
+	Item: Q
+});
+//#endregion
+export { $ as t };

package/dist/command-palette.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as CommandPalette } from "./command-palette-V_2pEay7.js";
+export { t as CommandPalette } from "./command-palette-BmQu2w4H.js";