@jfrader/ui 0.5.1 → 0.6.0

package/dist/command-palette-BrT1n9bb.js

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

package/dist/command-palette.js

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