@commenda/pathfinder 0.1.0 → 0.2.0

package/dist/components/selection/SearchableChoice.js

@@ -1,168 +1,183 @@
 "use client";
-import { SearchMdIcon as e } from "../icons/SearchMdIcon.js";
-import { Checkbox as t } from "../checkbox/Checkbox.js";
-import { choicePopupClass as n } from "./choice-styles.js";
-import { ChoiceField as r } from "./ChoiceField.js";
-import { ChoiceList as i } from "./ChoiceList.js";
-import { useMemo as a, useRef as o, useState as s } from "react";
-import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
-import { Combobox as d } from "@base-ui/react/combobox";
+import { hoverHighlightClass as e, useHoverHighlight as t } from "../controls/useHoverHighlight.js";
+import { SearchMdIcon as n } from "../icons/SearchMdIcon.js";
+import { choiceIndicatorMotionProps as r } from "../choices/choice-motion.js";
+import { Checkbox as i } from "../checkbox/Checkbox.js";
+import { choicePopupClass as a } from "./choice-styles.js";
+import { ChoiceField as o } from "./ChoiceField.js";
+import { ChoiceList as s } from "./ChoiceList.js";
+import c from "clsx";
+import { useMemo as l, useRef as u, useState as d } from "react";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+import { Combobox as h } from "@base-ui/react/combobox";
 //#region src/components/selection/SearchableChoice.tsx
-function f({ config: f, multiple: p, values: m, onChange: h, forwardedRef: g, field: _ }) {
-	let [v, y] = s(!1), b = o(null), [x, S] = s(""), [C, w] = s(), [T, E] = s([]), D = f.searchConfig?.mode === "remote" ? f.searchConfig : void 0, O = D?.query ?? x, k = a(() => f.options ?? f.groups.flatMap((e) => e.options), [f.options, f.groups]), A = new Set(m), j = new Map([
-		...T,
-		...f.selectedOptions ?? [],
-		...k
-	].map((e) => [e.value, e])), M = m.map((e) => j.get(e) ?? {
+function g({ config: g, multiple: _, values: v, onChange: y, forwardedRef: b, field: x }) {
+	let S = t(), [C, w] = d(!1), T = u(null), [E, D] = d(""), [O, k] = d(), [A, j] = d([]), M = g.searchConfig?.mode === "remote" ? g.searchConfig : void 0, N = M?.query ?? E, P = l(() => g.options ?? g.groups.flatMap((e) => e.options), [g.options, g.groups]), F = new Set(v), I = new Map([
+		...A,
+		...g.selectedOptions ?? [],
+		...P
+	].map((e) => [e.value, e])), L = v.map((e) => I.get(e) ?? {
 		value: e,
 		label: "Selected value unavailable"
-	}), N = !!D && (D.isLoading || O !== D.resultsQuery), P = a(() => N || D?.error ? [] : D ? k : k.filter((e) => `${e.label} ${e.keywords?.join(" ") ?? ""}`.toLocaleLowerCase().includes(O.toLocaleLowerCase())), [
-		N,
-		D,
-		k,
-		O
-	]), F = f.selectionLimitConfig?.max, I = F !== void 0 && m.length >= F, L = (e) => {
-		if (f.disableConfig?.isDisabled) return;
-		let t = m.filter((e) => j.get(e)?.disableConfig?.isDisabled), n = [.../* @__PURE__ */ new Set([...e, ...t])];
-		F !== void 0 && n.length > F && n.length > m.length || (E(n.flatMap((e) => {
-			let t = j.get(e);
+	}), R = !!M && (M.isLoading || N !== M.resultsQuery), z = l(() => R || M?.error ? [] : M ? P : P.filter((e) => `${e.label} ${e.keywords?.join(" ") ?? ""}`.toLocaleLowerCase().includes(N.toLocaleLowerCase())), [
+		R,
+		M,
+		P,
+		N
+	]), B = g.selectionLimitConfig?.max, V = B !== void 0 && v.length >= B, H = (e) => {
+		if (g.disableConfig?.isDisabled) return;
+		let t = v.filter((e) => I.get(e)?.disableConfig?.isDisabled), n = [.../* @__PURE__ */ new Set([...e, ...t])];
+		B !== void 0 && n.length > B && n.length > v.length || (j(n.flatMap((e) => {
+			let t = I.get(e);
 			return t ? [t] : [];
-		})), h(n));
-	}, R = o(null), z = `${D?.resultsQuery ?? ""}:${String(k.length)}`, B = () => {
-		let e = f.paginationConfig;
-		!e || !e.hasMore || e.isLoadingMore || e.error || N || D?.error || R.current === z || (R.current = z, e.onLoadMore());
-	}, V = P.filter((e) => !e.disableConfig?.isDisabled).map((e) => e.value), H = V.length > 0 && V.every((e) => A.has(e)), U = [.../* @__PURE__ */ new Set([...m, ...V])], W = !H && F !== void 0 && U.length > F;
-	return /* @__PURE__ */ u(d.Root, {
-		multiple: p,
-		items: P.map((e) => e.value),
-		value: p ? m : m[0] ?? null,
+		})), y(n));
+	}, U = u(null), W = `${M?.resultsQuery ?? ""}:${String(P.length)}`, G = () => {
+		let e = g.paginationConfig;
+		!e || !e.hasMore || e.isLoadingMore || e.error || R || M?.error || U.current === W || (U.current = W, e.onLoadMore());
+	}, K = z.filter((e) => !e.disableConfig?.isDisabled).map((e) => e.value), q = K.length > 0 && K.every((e) => F.has(e)), J = [.../* @__PURE__ */ new Set([...v, ...K])], Y = !q && B !== void 0 && J.length > B;
+	return /* @__PURE__ */ m(h.Root, {
+		multiple: _,
+		items: z.map((e) => e.value),
+		value: _ ? v : v[0] ?? null,
 		onValueChange: (e) => {
-			L(Array.isArray(e) ? e : e === null ? [] : [e]);
+			H(Array.isArray(e) ? e : e === null ? [] : [e]);
 		},
-		itemToStringLabel: (e) => j.get(e)?.label ?? "Selected value unavailable",
+		itemToStringLabel: (e) => I.get(e)?.label ?? "Selected value unavailable",
 		filter: null,
-		inputValue: O,
+		inputValue: N,
 		onInputValueChange: (e, t) => {
-			e !== O && t.reason !== "item-press" && t.reason !== "input-clear" && (D ? D.onQueryChange(e) : S(e));
+			e !== N && t.reason !== "item-press" && t.reason !== "input-clear" && (M ? M.onQueryChange(e) : D(e));
 		},
-		open: v,
+		open: C,
 		onOpenChange: (e) => {
-			y(e), e || (_.blur(), D || S(""));
+			w(e), e || (x.blur(), M || D(""));
 		},
-		disabled: f.disableConfig?.isDisabled,
-		autoComplete: f.autoComplete,
-		name: f.name,
-		form: f.form,
-		required: f.required,
-		virtualized: f.listConfig?.virtualized,
+		disabled: g.disableConfig?.isDisabled,
+		autoComplete: g.autoComplete,
+		name: g.name,
+		form: g.form,
+		required: g.required,
+		virtualized: g.listConfig?.virtualized,
 		onItemHighlighted: (e) => {
-			w(e);
+			k(e);
 		},
-		children: [/* @__PURE__ */ l(r, {
-			config: f,
-			field: _,
-			multiple: p,
-			resolved: M,
-			open: v,
-			anchorRef: b,
+		children: [/* @__PURE__ */ p(o, {
+			config: g,
+			field: x,
+			multiple: _,
+			resolved: L,
+			open: C,
+			anchorRef: T,
 			onRemove: (e) => {
-				L(m.filter((t) => t !== e));
+				H(v.filter((t) => t !== e));
 			},
 			onClear: () => {
-				L([]);
+				H([]);
 			},
-			trigger: /* @__PURE__ */ l(d.Trigger, {
-				id: _.id,
-				form: f.form,
-				ref: g,
-				"aria-label": f.label ?? f["aria-label"],
-				"aria-describedby": _.describedBy,
-				"aria-invalid": !!_.error,
+			trigger: /* @__PURE__ */ p(h.Trigger, {
+				id: x.id,
+				form: g.form,
+				ref: b,
+				"aria-label": g.label ?? g["aria-label"],
+				"aria-describedby": x.describedBy,
+				"aria-invalid": !!x.error,
 				onBlur: (e) => {
-					v || _.blur(), f.onBlur?.(e);
+					C || x.blur(), g.onBlur?.(e);
 				},
-				onFocus: f.onFocus
+				onFocus: g.onFocus
 			})
-		}), /* @__PURE__ */ l(d.Portal, { children: /* @__PURE__ */ l(d.Positioner, {
-			anchor: b,
+		}), /* @__PURE__ */ p(h.Portal, { children: /* @__PURE__ */ p(h.Positioner, {
+			anchor: T,
 			align: "start",
 			sideOffset: 4,
 			className: "pf:z-[60]",
-			children: /* @__PURE__ */ u(d.Popup, {
-				className: n,
-				"aria-label": f.label ?? f["aria-label"],
+			children: /* @__PURE__ */ m(h.Popup, {
+				...S.props,
+				onPointerDownCapture: r.onPointerDownCapture,
+				onKeyDownCapture: (e) => {
+					S.props.onKeyDownCapture(), r.onKeyDownCapture(e);
+				},
+				className: c(a, e),
+				"aria-label": g.label ?? g["aria-label"],
 				children: [
-					/* @__PURE__ */ u("div", {
+					S.highlight,
+					/* @__PURE__ */ m("div", {
 						className: "pf:box-border pf:flex pf:h-[36px] pf:items-center pf:gap-md pf:px-lg pf:border-b-[0.5px] pf:border-solid pf:border-soft-pearl-300",
-						children: [/* @__PURE__ */ l("span", {
+						children: [/* @__PURE__ */ p("span", {
 							"aria-hidden": "true",
 							className: "pf:flex pf:size-[16px] pf:shrink-0 pf:items-center pf:justify-center pf:text-soft-pearl-800",
-							children: /* @__PURE__ */ l(e, {
+							children: /* @__PURE__ */ p(n, {
 								size: 16,
 								tone: "inherit"
 							})
-						}), /* @__PURE__ */ l(d.Input, {
-							"aria-label": `Search ${f.label ?? f["aria-label"]}`,
-							placeholder: f.searchConfig?.placeholder ?? "Search options",
+						}), /* @__PURE__ */ p(h.Input, {
+							"aria-label": `Search ${g.label ?? g["aria-label"]}`,
+							placeholder: g.searchConfig?.placeholder ?? "Search options",
 							className: "pf:box-border pf:w-full pf:min-w-0 pf:h-full pf:border-0 pf:bg-transparent pf:p-0 pf:font-body pf:text-label-13 pf:font-normal pf:text-soft-pearl-1000 pf:placeholder:text-soft-pearl-800 pf:outline-none"
 						})]
 					}),
-					p && f.selectAllConfig && /* @__PURE__ */ l(t, {
-						checked: H,
-						indeterminate: !H && V.some((e) => A.has(e)),
-						className: "pf:mx-sm pf:mt-sm pf:mb-xxs pf:px-md pf:py-sm pf:min-h-[32px] pf:w-[calc(100%_-_12px)] pf:[&.pf-choice]:items-center pf:[&.pf-choice]:gap-sm pf:[&_.pf-choice-label]:font-medium pf:[&_.pf-choice-label]:leading-[20px] pf:rounded-sm pf:hover:bg-soft-pearl-200",
-						disabled: !V.length || W,
-						title: W ? "Selection limit would be exceeded" : void 0,
+					_ && g.selectAllConfig && /* @__PURE__ */ p(i, {
+						checked: q,
+						indeterminate: !q && K.some((e) => F.has(e)),
+						className: "pf:select-none pf:mx-sm pf:mt-sm pf:mb-xxs pf:px-md pf:py-sm pf:min-h-[32px] pf:w-[calc(100%_-_12px)] pf:[&.pf-choice]:items-center pf:[&.pf-choice]:gap-sm pf:[&_.pf-choice-label]:font-medium pf:[&_.pf-choice-label]:leading-[20px] pf:rounded-sm pf:hover:bg-soft-pearl-200",
+						disabled: !K.length || Y,
+						title: Y ? "Selection limit would be exceeded" : void 0,
 						onCheckedChange: () => {
-							L(H ? m.filter((e) => !V.includes(e)) : U);
+							H(q ? v.filter((e) => !K.includes(e)) : J);
 						},
-						label: H ? "Deselect listed options" : f.selectAllConfig.label ?? "Select listed options"
+						label: q ? "Clear selection" : g.selectAllConfig.label ?? "Select all"
 					}),
-					/* @__PURE__ */ l(i, {
-						multiple: p,
-						options: P,
-						selected: A,
-						config: f,
-						highlighted: C,
-						atLimit: I,
-						onLoadMore: B
-					}, D?.resultsQuery ?? O),
-					/* @__PURE__ */ l(d.Status, {
-						className: "pf:text-copy-12 pf:text-soft-pearl-800 pf:px-md",
-						children: N ? "Searching…" : D?.error ?? (P.length ? I ? f.selectionLimitConfig?.message ?? `Select up to ${String(F)} options.` : "" : f.emptyLabel ?? "No results.")
+					/* @__PURE__ */ p(s, {
+						multiple: _,
+						options: z,
+						selected: F,
+						config: g,
+						highlighted: O,
+						atLimit: V,
+						onLoadMore: G
+					}, M?.resultsQuery ?? N),
+					/* @__PURE__ */ p(h.Status, {
+						className: c("pf:text-copy-12 pf:text-soft-pearl-800", !R && !M?.error && !z.length ? "pf:px-lg pf:py-xl pf:text-center pf:wrap-anywhere" : "pf:px-md"),
+						children: R ? "Searching…" : M?.error ?? (z.length ? V ? g.selectionLimitConfig?.message ?? `Select up to ${String(B)} options.` : "" : /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p("span", {
+							className: "pf:block pf:text-label-13 pf:font-medium pf:text-soft-pearl-1000",
+							children: g.emptyLabel ?? (N.trim() ? `No matches for “${N.trim()}”` : "No options available")
+						}), N.trim() && /* @__PURE__ */ p("span", {
+							className: "pf:block pf:mt-xs",
+							children: "Try a different search."
+						})] }))
 					}),
-					D?.error && D.onRetry && /* @__PURE__ */ l("button", {
+					M?.error && M.onRetry && /* @__PURE__ */ p("button", {
 						type: "button",
-						className: "pf:box-border pf:w-full pf:text-start pf:px-md pf:py-sm pf:border-0 pf:bg-transparent pf:text-label-13 pf:text-blue-700 pf:font-body pf:rounded-xs pf:hover:bg-soft-pearl-200 pf:focus-visible:outline-2 pf:focus-visible:outline-blue-700 pf:disabled:text-soft-pearl-700",
-						onClick: D.onRetry,
+						className: "pf:cursor-pointer pf:disabled:cursor-default pf:select-none pf:box-border pf:w-full pf:text-start pf:px-md pf:py-sm pf:border-0 pf:bg-transparent pf:text-label-13 pf:text-blue-700 pf:font-body pf:rounded-xs pf:hover:bg-soft-pearl-200 pf:focus-visible:outline-2 pf:focus-visible:outline-blue-700 pf:disabled:text-soft-pearl-700",
+						onClick: M.onRetry,
 						children: "Retry search"
 					}),
-					f.paginationConfig && !N && !D?.error && /* @__PURE__ */ l("div", { children: f.paginationConfig.error ? /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l("span", {
+					g.paginationConfig && !R && !M?.error && /* @__PURE__ */ p("div", { children: g.paginationConfig.error ? /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p("span", {
 						role: "status",
 						className: "pf:text-copy-12 pf:text-red-700",
-						children: f.paginationConfig.error
-					}), /* @__PURE__ */ l("button", {
+						children: g.paginationConfig.error
+					}), /* @__PURE__ */ p("button", {
 						type: "button",
-						className: "pf:box-border pf:w-full pf:text-start pf:px-md pf:py-sm pf:border-0 pf:bg-transparent pf:text-label-13 pf:text-blue-700 pf:font-body pf:rounded-xs pf:hover:bg-soft-pearl-200 pf:focus-visible:outline-2 pf:focus-visible:outline-blue-700 pf:disabled:text-soft-pearl-700",
+						className: "pf:cursor-pointer pf:disabled:cursor-default pf:select-none pf:box-border pf:w-full pf:text-start pf:px-md pf:py-sm pf:border-0 pf:bg-transparent pf:text-label-13 pf:text-blue-700 pf:font-body pf:rounded-xs pf:hover:bg-soft-pearl-200 pf:focus-visible:outline-2 pf:focus-visible:outline-blue-700 pf:disabled:text-soft-pearl-700",
 						onClick: () => {
-							R.current = null, f.paginationConfig?.onRetry?.();
+							U.current = null, g.paginationConfig?.onRetry?.();
 						},
 						children: "Retry loading more"
-					})] }) : f.paginationConfig.hasMore && /* @__PURE__ */ l("button", {
+					})] }) : g.paginationConfig.hasMore && /* @__PURE__ */ p("button", {
 						type: "button",
-						className: "pf:box-border pf:w-full pf:text-start pf:px-md pf:py-sm pf:border-0 pf:bg-transparent pf:text-label-13 pf:text-blue-700 pf:font-body pf:rounded-xs pf:hover:bg-soft-pearl-200 pf:focus-visible:outline-2 pf:focus-visible:outline-blue-700 pf:disabled:text-soft-pearl-700",
-						disabled: f.paginationConfig.isLoadingMore,
-						onClick: B,
-						children: f.paginationConfig.isLoadingMore ? "Loading more…" : "Load more"
+						className: "pf:cursor-pointer pf:disabled:cursor-default pf:select-none pf:box-border pf:w-full pf:text-start pf:px-md pf:py-sm pf:border-0 pf:bg-transparent pf:text-label-13 pf:text-blue-700 pf:font-body pf:rounded-xs pf:hover:bg-soft-pearl-200 pf:focus-visible:outline-2 pf:focus-visible:outline-blue-700 pf:disabled:text-soft-pearl-700",
+						disabled: g.paginationConfig.isLoadingMore,
+						onClick: G,
+						children: g.paginationConfig.isLoadingMore ? "Loading more…" : "Load more"
 					}) }),
-					f.addItemConfig && /* @__PURE__ */ l("button", {
+					g.addItemConfig && /* @__PURE__ */ p("button", {
 						type: "button",
-						className: "pf:box-border pf:w-full pf:text-start pf:px-md pf:py-sm pf:border-0 pf:bg-transparent pf:text-label-13 pf:text-blue-700 pf:font-body pf:rounded-xs pf:hover:bg-soft-pearl-200 pf:focus-visible:outline-2 pf:focus-visible:outline-blue-700 pf:disabled:text-soft-pearl-700",
-						disabled: f.addItemConfig.isDisabled,
+						className: "pf:cursor-pointer pf:disabled:cursor-default pf:select-none pf:box-border pf:w-full pf:text-start pf:px-md pf:py-sm pf:border-0 pf:bg-transparent pf:text-label-13 pf:text-blue-700 pf:font-body pf:rounded-xs pf:hover:bg-soft-pearl-200 pf:focus-visible:outline-2 pf:focus-visible:outline-blue-700 pf:disabled:text-soft-pearl-700",
+						disabled: g.addItemConfig.isDisabled,
 						onClick: () => {
-							f.addItemConfig?.onAddItem(O), y(!1);
+							g.addItemConfig?.onAddItem(N), w(!1);
 						},
-						children: f.addItemConfig.label
+						children: g.addItemConfig.label
 					})
 				]
 			})
@@ -170,4 +185,4 @@ function f({ config: f, multiple: p, values: m, onChange: h, forwardedRef: g, fi
 	});
 }
 //#endregion
-export { f as SearchableChoice };
+export { g as SearchableChoice };

package/dist/components/selection/SelectedTags.js

@@ -59,7 +59,7 @@ function u({ options: u, disabled: d, onRemove: f, onOpen: p }) {
 					onClick: () => {
 						f(n.value);
 					},
-					className: "pf:pointer-events-auto pf:shrink-0 pf:flex pf:size-[12px] pf:items-center pf:justify-center pf:border-0 pf:bg-transparent pf:p-0 pf:text-soft-pearl-800 pf:rounded-xs pf:focus-visible:outline-2 pf:focus-visible:outline-blue-700 pf:disabled:opacity-50",
+					className: "pf:pointer-events-auto pf:shrink-0 pf:flex pf:size-[12px] pf:items-center pf:justify-center pf:border-0 pf:bg-transparent pf:p-0 pf:text-soft-pearl-800 pf:rounded-xs pf:focus-visible:outline-2 pf:focus-visible:outline-blue-700 pf:disabled:opacity-50 pf:cursor-pointer pf:disabled:cursor-default",
 					children: /* @__PURE__ */ c(t, {
 						size: 12,
 						tone: "inherit"

package/dist/components/selection/SimpleChoice.js

@@ -1,122 +1,140 @@
 "use client";
-import { Checkbox as e } from "../checkbox/Checkbox.js";
-import { choiceItemClass as t, choicePopupClass as n } from "./choice-styles.js";
-import { ChoiceField as r } from "./ChoiceField.js";
-import { ChoiceIndicator as i } from "./ChoiceIndicator.js";
-import { OptionContent as a } from "./OptionContent.js";
-import { useRef as o, useState as s } from "react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
-import { Select as u } from "@base-ui/react/select";
+import { hoverHighlightClass as e, useHoverHighlight as t } from "../controls/useHoverHighlight.js";
+import { choiceIndicatorMotionProps as n } from "../choices/choice-motion.js";
+import { Checkbox as r } from "../checkbox/Checkbox.js";
+import { choiceItemClass as i, choicePopupClass as a } from "./choice-styles.js";
+import { ChoiceField as o } from "./ChoiceField.js";
+import { ChoiceIndicator as s } from "./ChoiceIndicator.js";
+import { OptionContent as c } from "./OptionContent.js";
+import l from "clsx";
+import { useRef as u, useState as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { Select as m } from "@base-ui/react/select";
 //#region src/components/selection/SimpleChoice.tsx
-function d({ config: d, multiple: f, values: p, onChange: m, forwardedRef: h, field: g }) {
-	let _ = o(null), [v, y] = s(!1), b = d.options ?? d.groups.flatMap((e) => e.options), x = new Map(b.map((e) => [e.value, e])), S = new Set(p), C = p.map((e) => x.get(e) ?? {
+function h({ config: h, multiple: g, values: _, onChange: v, forwardedRef: y, field: b }) {
+	let x = t(), S = u(null), [C, w] = d(!1), T = h.options ?? h.groups.flatMap((e) => e.options), E = new Map(T.map((e) => [e.value, e])), D = new Set(_), O = _.map((e) => E.get(e) ?? {
 		value: e,
 		label: "Selected value unavailable"
-	}), w = d.selectionLimitConfig?.max, T = (e) => {
-		let t = p.filter((e) => x.get(e)?.disableConfig?.isDisabled), n = [.../* @__PURE__ */ new Set([...e, ...t])];
-		w !== void 0 && n.length > w && n.length > p.length || m(n);
-	}, E = b.filter((e) => !e.disableConfig?.isDisabled).map((e) => e.value), D = E.length > 0 && E.every((e) => S.has(e)), O = [.../* @__PURE__ */ new Set([...p, ...E])], k = (e) => e.map((e) => /* @__PURE__ */ l(u.Item, {
+	}), k = h.selectionLimitConfig?.max, A = (e) => {
+		let t = _.filter((e) => E.get(e)?.disableConfig?.isDisabled), n = [.../* @__PURE__ */ new Set([...e, ...t])];
+		k !== void 0 && n.length > k && n.length > _.length || v(n);
+	}, j = T.filter((e) => !e.disableConfig?.isDisabled).map((e) => e.value), M = j.length > 0 && j.every((e) => D.has(e)), N = [.../* @__PURE__ */ new Set([..._, ...j])], P = (e) => e.map((e) => /* @__PURE__ */ p(m.Item, {
 		value: e.value,
-		disabled: e.disableConfig?.isDisabled || w !== void 0 && p.length >= w && !S.has(e.value),
-		className: t,
+		disabled: e.disableConfig?.isDisabled || k !== void 0 && _.length >= k && !D.has(e.value),
+		className: i,
 		children: [
-			f && /* @__PURE__ */ c(i, {
+			g && /* @__PURE__ */ f(s, {
 				multiple: !0,
-				selected: S.has(e.value),
-				disabled: e.disableConfig?.isDisabled || w !== void 0 && p.length >= w && !S.has(e.value)
+				selected: D.has(e.value),
+				disabled: e.disableConfig?.isDisabled || k !== void 0 && _.length >= k && !D.has(e.value)
 			}),
-			/* @__PURE__ */ c(u.ItemText, {
+			/* @__PURE__ */ f(m.ItemText, {
 				className: "pf:flex pf:flex-1 pf:min-w-0 pf:items-center pf:gap-sm",
-				children: d.renderConfig?.optionContent?.(e, { isSelected: S.has(e.value) }) ?? /* @__PURE__ */ c(a, { option: e })
+				children: h.renderConfig?.optionContent?.(e, { isSelected: D.has(e.value) }) ?? /* @__PURE__ */ f(c, { option: e })
 			}),
-			!f && /* @__PURE__ */ c(i, { selected: S.has(e.value) })
+			!g && /* @__PURE__ */ f(s, { selected: D.has(e.value) })
 		]
 	}, e.value));
-	return /* @__PURE__ */ l(u.Root, {
-		multiple: f,
-		open: v,
+	return /* @__PURE__ */ p(m.Root, {
+		multiple: g,
+		open: C,
 		onOpenChange: (e) => {
-			y(e), e || g.blur();
+			w(e), e || b.blur();
 		},
-		items: b.map(({ value: e, label: t }) => ({
+		items: T.map(({ value: e, label: t }) => ({
 			value: e,
 			label: t
 		})),
-		value: f ? p : p[0] ?? null,
+		value: g ? _ : _[0] ?? null,
 		onValueChange: (e) => {
-			T(Array.isArray(e) ? e : e === null ? [] : [e]);
+			A(Array.isArray(e) ? e : e === null ? [] : [e]);
 		},
-		disabled: d.disableConfig?.isDisabled,
-		autoComplete: d.autoComplete,
-		name: d.name,
-		form: d.form,
-		required: d.required,
-		children: [/* @__PURE__ */ c(r, {
-			config: d,
-			field: g,
-			multiple: f,
-			resolved: C,
-			open: v,
-			anchorRef: _,
+		disabled: h.disableConfig?.isDisabled,
+		autoComplete: h.autoComplete,
+		name: h.name,
+		form: h.form,
+		required: h.required,
+		children: [/* @__PURE__ */ f(o, {
+			config: h,
+			field: b,
+			multiple: g,
+			resolved: O,
+			open: C,
+			anchorRef: S,
 			onRemove: (e) => {
-				T(p.filter((t) => t !== e));
+				A(_.filter((t) => t !== e));
 			},
 			onClear: () => {
-				T([]);
+				A([]);
 			},
-			trigger: /* @__PURE__ */ c(u.Trigger, {
-				id: g.id,
-				form: d.form,
-				ref: h,
-				"aria-label": d.label ?? d["aria-label"],
-				"aria-describedby": g.describedBy,
-				"aria-invalid": !!g.error,
+			trigger: /* @__PURE__ */ f(m.Trigger, {
+				id: b.id,
+				form: h.form,
+				ref: y,
+				"aria-label": h.label ?? h["aria-label"],
+				"aria-describedby": b.describedBy,
+				"aria-invalid": !!b.error,
 				onBlur: (e) => {
-					v || g.blur(), d.onBlur?.(e);
+					C || b.blur(), h.onBlur?.(e);
 				},
-				onFocus: d.onFocus
+				onFocus: h.onFocus
 			})
-		}), /* @__PURE__ */ c(u.Portal, { children: /* @__PURE__ */ c(u.Positioner, {
-			anchor: _,
+		}), /* @__PURE__ */ f(m.Portal, { children: /* @__PURE__ */ f(m.Positioner, {
+			anchor: S,
 			align: "start",
 			sideOffset: 4,
 			className: "pf:z-[60]",
 			alignItemWithTrigger: !1,
-			children: /* @__PURE__ */ l(u.Popup, {
-				className: n,
+			children: /* @__PURE__ */ p(m.Popup, {
+				...x.props,
+				onPointerDownCapture: n.onPointerDownCapture,
+				onKeyDownCapture: (e) => {
+					if (x.props.onKeyDownCapture(), n.onKeyDownCapture(e), ![
+						"ArrowDown",
+						"ArrowUp",
+						"Home",
+						"End"
+					].includes(e.key) || e.target.closest("button, [role=\"checkbox\"]")) return;
+					let t = Array.from(e.currentTarget.querySelectorAll("[role=\"option\"]:not([aria-disabled=\"true\"])"));
+					if (!t.length) return;
+					let r = t.findIndex((e) => e === document.activeElement || e.hasAttribute("data-highlighted")), i = e.key === "Home" ? 0 : e.key === "End" ? t.length - 1 : e.key === "ArrowDown" ? (r + 1) % t.length : (r <= 0 ? t.length : r) - 1;
+					e.preventDefault(), e.stopPropagation(), t[i].focus();
+				},
+				className: l(a, e),
 				children: [
-					f && d.selectAllConfig && /* @__PURE__ */ c(e, {
-						checked: D,
-						indeterminate: !D && E.some((e) => S.has(e)),
-						className: "pf:mx-sm pf:mt-sm pf:mb-xxs pf:px-md pf:py-sm pf:min-h-[32px] pf:w-[calc(100%_-_12px)] pf:[&.pf-choice]:items-center pf:[&.pf-choice]:gap-sm pf:[&_.pf-choice-label]:font-medium pf:[&_.pf-choice-label]:leading-[20px] pf:rounded-sm pf:hover:bg-soft-pearl-200",
-						disabled: !E.length || !D && w !== void 0 && O.length > w,
+					x.highlight,
+					g && h.selectAllConfig && /* @__PURE__ */ f(r, {
+						checked: M,
+						indeterminate: !M && j.some((e) => D.has(e)),
+						className: "pf:select-none pf:mx-sm pf:mt-sm pf:mb-xxs pf:px-md pf:py-sm pf:min-h-[32px] pf:w-[calc(100%_-_12px)] pf:[&.pf-choice]:items-center pf:[&.pf-choice]:gap-sm pf:[&_.pf-choice-label]:font-medium pf:[&_.pf-choice-label]:leading-[20px] pf:rounded-sm pf:hover:bg-soft-pearl-200",
+						disabled: !j.length || !M && k !== void 0 && N.length > k,
 						onCheckedChange: () => {
-							T(D ? p.filter((e) => !E.includes(e)) : O);
+							A(M ? _.filter((e) => !j.includes(e)) : N);
 						},
-						label: D ? "Deselect listed options" : d.selectAllConfig.label ?? "Select listed options"
+						label: M ? "Clear selection" : h.selectAllConfig.label ?? "Select all"
 					}),
-					/* @__PURE__ */ l(u.List, {
-						style: { maxHeight: d.listConfig?.maxHeight ?? 320 },
+					/* @__PURE__ */ p(m.List, {
+						style: { maxHeight: h.listConfig?.maxHeight ?? 320 },
 						className: "pf:overflow-y-auto pf:flex pf:flex-col pf:gap-xxs pf:p-sm",
-						children: [d.groups ? d.groups.map((e) => /* @__PURE__ */ l(u.Group, {
+						children: [h.groups ? h.groups.map((e) => /* @__PURE__ */ p(m.Group, {
 							className: "pf:flex pf:flex-col pf:gap-xxs",
-							children: [/* @__PURE__ */ c(u.GroupLabel, {
+							children: [/* @__PURE__ */ f(m.GroupLabel, {
 								className: "pf:px-md pf:py-xs pf:text-copy-12 pf:text-soft-pearl-800",
 								children: e.label
-							}), k(e.options)]
-						}, e.id)) : k(b), !b.length && /* @__PURE__ */ c("div", {
-							className: "pf:p-md pf:text-soft-pearl-800",
-							children: d.emptyLabel ?? "No options available."
+							}), P(e.options)]
+						}, e.id)) : P(T), !T.length && /* @__PURE__ */ f("div", {
+							className: "pf:px-lg pf:py-xl pf:text-copy-13 pf:text-soft-pearl-800",
+							children: h.emptyLabel ?? "No options available."
 						})]
 					}),
-					d.addItemConfig && /* @__PURE__ */ c("button", {
+					h.addItemConfig && /* @__PURE__ */ f("button", {
 						type: "button",
-						disabled: d.addItemConfig.isDisabled,
-						className: "pf:box-border pf:w-full pf:text-start pf:px-md pf:py-sm pf:border-0 pf:bg-transparent pf:text-label-13 pf:text-blue-700 pf:font-body pf:rounded-xs pf:hover:bg-soft-pearl-200 pf:focus-visible:outline-2 pf:focus-visible:outline-blue-700 pf:disabled:text-soft-pearl-700",
+						disabled: h.addItemConfig.isDisabled,
+						className: "pf:cursor-pointer pf:disabled:cursor-default pf:select-none pf:box-border pf:w-full pf:text-start pf:px-md pf:py-sm pf:border-0 pf:bg-transparent pf:text-label-13 pf:text-blue-700 pf:font-body pf:rounded-xs pf:hover:bg-soft-pearl-200 pf:focus-visible:outline-2 pf:focus-visible:outline-blue-700 pf:disabled:text-soft-pearl-700",
 						onClick: () => {
-							d.addItemConfig?.onAddItem("");
+							h.addItemConfig?.onAddItem("");
 						},
-						children: d.addItemConfig.label
+						children: h.addItemConfig.label
 					})
 				]
 			})
@@ -124,4 +142,4 @@ function d({ config: d, multiple: f, values: p, onChange: m, forwardedRef: h, fi
 	});
 }
 //#endregion
-export { d as SimpleChoice };
+export { h as SimpleChoice };

package/dist/components/selection/choice-styles.d.ts

@@ -1,3 +1,3 @@
 export declare const choicePopupClass = "pf:box-border pf:w-[var(--anchor-width)] pf:min-w-[min(200px,calc(100vw-24px))] pf:max-w-[calc(100vw-24px)] pf:rounded-lg pf:border-[0.5px] pf:border-solid pf:border-soft-pearl-300 pf:bg-background pf:p-0 pf:shadow-[0_1px_2px_#12121205,0_4px_20px_#12121214] pf:font-body pf:text-label-13 pf:leading-[20px] pf:font-medium pf:text-soft-pearl-1000 pf:outline-none";
-export declare const choiceItemClass = "pf:box-border pf:flex pf:items-center pf:gap-sm pf:min-h-[32px] pf:ps-md pf:pe-lg pf:py-sm pf:rounded-sm pf:cursor-default pf:outline-none pf:data-highlighted:bg-soft-pearl-200 pf:data-disabled:text-soft-pearl-700 pf:data-disabled:cursor-not-allowed";
-export declare const choiceActionClass = "pf:box-border pf:w-full pf:text-start pf:px-md pf:py-sm pf:border-0 pf:bg-transparent pf:text-label-13 pf:text-blue-700 pf:font-body pf:rounded-xs pf:hover:bg-soft-pearl-200 pf:focus-visible:outline-2 pf:focus-visible:outline-blue-700 pf:disabled:text-soft-pearl-700";
+export declare const choiceItemClass = "pf:relative pf:select-none pf:box-border pf:flex pf:items-center pf:gap-sm pf:min-h-[32px] pf:ps-md pf:pe-lg pf:py-sm pf:rounded-sm pf:cursor-default pf:outline-none pf:data-highlighted:not-data-disabled:bg-soft-pearl-200 pf:data-disabled:text-soft-pearl-700 pf:data-disabled:cursor-default";
+export declare const choiceActionClass = "pf:cursor-pointer pf:disabled:cursor-default pf:select-none pf:box-border pf:w-full pf:text-start pf:px-md pf:py-sm pf:border-0 pf:bg-transparent pf:text-label-13 pf:text-blue-700 pf:font-body pf:rounded-xs pf:hover:bg-soft-pearl-200 pf:focus-visible:outline-2 pf:focus-visible:outline-blue-700 pf:disabled:text-soft-pearl-700";

package/dist/components/selection/choice-styles.js

@@ -1,4 +1,4 @@
 //#region src/components/selection/choice-styles.ts
-var e = "pf:box-border pf:w-[var(--anchor-width)] pf:min-w-[min(200px,calc(100vw-24px))] pf:max-w-[calc(100vw-24px)] pf:rounded-lg pf:border-[0.5px] pf:border-solid pf:border-soft-pearl-300 pf:bg-background pf:p-0 pf:shadow-[0_1px_2px_#12121205,0_4px_20px_#12121214] pf:font-body pf:text-label-13 pf:leading-[20px] pf:font-medium pf:text-soft-pearl-1000 pf:outline-none", t = "pf:box-border pf:flex pf:items-center pf:gap-sm pf:min-h-[32px] pf:ps-md pf:pe-lg pf:py-sm pf:rounded-sm pf:cursor-default pf:outline-none pf:data-highlighted:bg-soft-pearl-200 pf:data-disabled:text-soft-pearl-700 pf:data-disabled:cursor-not-allowed", n = "pf:box-border pf:w-full pf:text-start pf:px-md pf:py-sm pf:border-0 pf:bg-transparent pf:text-label-13 pf:text-blue-700 pf:font-body pf:rounded-xs pf:hover:bg-soft-pearl-200 pf:focus-visible:outline-2 pf:focus-visible:outline-blue-700 pf:disabled:text-soft-pearl-700";
+var e = "pf:box-border pf:w-[var(--anchor-width)] pf:min-w-[min(200px,calc(100vw-24px))] pf:max-w-[calc(100vw-24px)] pf:rounded-lg pf:border-[0.5px] pf:border-solid pf:border-soft-pearl-300 pf:bg-background pf:p-0 pf:shadow-[0_1px_2px_#12121205,0_4px_20px_#12121214] pf:font-body pf:text-label-13 pf:leading-[20px] pf:font-medium pf:text-soft-pearl-1000 pf:outline-none", t = "pf:relative pf:select-none pf:box-border pf:flex pf:items-center pf:gap-sm pf:min-h-[32px] pf:ps-md pf:pe-lg pf:py-sm pf:rounded-sm pf:cursor-default pf:outline-none pf:data-highlighted:not-data-disabled:bg-soft-pearl-200 pf:data-disabled:text-soft-pearl-700 pf:data-disabled:cursor-default", n = "pf:cursor-pointer pf:disabled:cursor-default pf:select-none pf:box-border pf:w-full pf:text-start pf:px-md pf:py-sm pf:border-0 pf:bg-transparent pf:text-label-13 pf:text-blue-700 pf:font-body pf:rounded-xs pf:hover:bg-soft-pearl-200 pf:focus-visible:outline-2 pf:focus-visible:outline-blue-700 pf:disabled:text-soft-pearl-700";
 //#endregion
 export { n as choiceActionClass, t as choiceItemClass, e as choicePopupClass };

package/dist/components/sheet/Sheet.js

@@ -1,8 +1,8 @@
 "use client";
 import { overlaySurfaceClassNames as e, overlayTitleClassNames as t } from "../overlays/overlay-class-names.js";
 import { OverlayFrame as n } from "../overlays/OverlayFrame.js";
-import { motionRecipe as r } from "../../foundations/motion/motion-tokens.js";
-import { useOverlayState as i } from "../overlays/useOverlayState.js";
+import { useOverlayState as r } from "../overlays/useOverlayState.js";
+import { motionRecipe as i } from "../../foundations/motion/motion-tokens.js";
 import { useSheetDrag as a } from "./useSheetDrag.js";
 import o from "clsx";
 import { jsx as s, jsxs as c } from "react/jsx-runtime";
@@ -14,7 +14,7 @@ var u = {
 	lg: "pf:w-[720px]"
 };
 function d(d) {
-	let { trigger: f, title: p, description: m, side: h = "right", size: g = "md", modal: _ = !1, children: v, footerConfig: y, dismissConfig: b, focusConfig: x, className: S } = d, C = i(d, b), w = h === "bottom", T = w && d.dragConfig?.dismissible !== !1, { popup: E, ...D } = a(T && !C.pending, C.open, () => {
+	let { trigger: f, title: p, description: m, side: h = "right", size: g = "md", modal: _ = !1, children: v, footerConfig: y, dismissConfig: b, focusConfig: x, className: S } = d, C = r(d, b), w = h === "bottom", T = w && d.dragConfig?.dismissible !== !1, { popup: E, ...D } = a(T && !C.pending, C.open, () => {
 		C.requestClose("swipe");
 	});
 	return /* @__PURE__ */ c(l.Root, {
@@ -23,15 +23,15 @@ function d(d) {
 		onOpenChange: C.handleOpenChange,
 		disablePointerDismissal: !_ || b?.outsidePress !== !0,
 		children: [f && /* @__PURE__ */ s(l.Trigger, { render: f }), /* @__PURE__ */ c(l.Portal, { children: [_ && /* @__PURE__ */ s(l.Backdrop, {
-			className: o("pf:fixed pf:inset-0 pf:z-40 pf:bg-soft-pearl-1000/10 pf:transition-opacity pf:duration-200 pf:ease-(--pf-easing-out) pf:data-[starting-style]:opacity-0 pf:data-[ending-style]:opacity-0", "pf:duration-500", !w && "pf:data-[ending-style]:duration-300", !C.animate && "pf:transition-none"),
-			style: { transitionTimingFunction: r.sheetEasing }
+			className: o("pf:fixed pf:inset-0 pf:z-40 pf:bg-soft-pearl-1000/10 pf:transition-opacity pf:duration-180 pf:data-[ending-style]:duration-120 pf:ease-[cubic-bezier(0.23,1,0.32,1)] pf:motion-reduce:transition-none pf:data-[starting-style]:opacity-0 pf:data-[ending-style]:opacity-0", "pf:duration-250", !w && "pf:data-[ending-style]:duration-180", !C.animate && "pf:transition-none"),
+			style: { transitionTimingFunction: i.sheetEasing }
 		}), /* @__PURE__ */ c(l.Popup, {
 			ref: E,
 			initialFocus: x?.initialFocusRef ?? (() => E.current?.querySelector("[data-overlay-body] input:not(:disabled), [data-overlay-body] textarea:not(:disabled), [data-overlay-body] button:not(:disabled), [data-overlay-body] a[href]") ?? E.current),
 			finalFocus: x?.returnFocusRef,
 			"aria-busy": C.pending || void 0,
-			className: o(e, "pf:fixed pf:z-50", w ? "pf:bottom-0 pf:inset-x-0 pf:max-h-[96dvh] pf:rounded-b-none pf:bg-soft-pearl-100 pf:pb-[env(safe-area-inset-bottom)]" : `pf:top-xl pf:right-xl pf:h-[calc(100dvh-32px)] pf:max-w-[calc(100vw-32px)] ${u[g]}`, C.animate && "pf:transition-transform pf:motion-reduce:transition-none", C.animate && (w ? "pf:duration-500 pf:motion-safe:data-[starting-style]:[transform:translateY(100%)] pf:motion-safe:data-[ending-style]:[transform:translateY(100%)]" : "pf:duration-500 pf:data-[ending-style]:duration-300 pf:motion-safe:data-[starting-style]:[transform:translateX(calc(100%+16px))] pf:motion-safe:data-[ending-style]:[transform:translateX(calc(100%+16px))]"), S),
-			style: { transitionTimingFunction: r.sheetEasing },
+			className: o(e, "pf:fixed pf:z-50", w ? "pf:bottom-0 pf:inset-x-0 pf:max-h-[96dvh] pf:rounded-b-none pf:bg-soft-pearl-100 pf:pb-[env(safe-area-inset-bottom)]" : `pf:top-xl pf:right-xl pf:h-[calc(100dvh-32px)] pf:max-w-[calc(100vw-32px)] ${u[g]}`, C.animate && "pf:transition-transform pf:motion-reduce:transition-none", C.animate && (w ? "pf:duration-250 pf:data-[ending-style]:duration-180 pf:motion-safe:data-[starting-style]:[transform:translateY(100%)] pf:motion-safe:data-[ending-style]:[transform:translateY(100%)]" : "pf:duration-250 pf:data-[ending-style]:duration-180 pf:motion-safe:data-[starting-style]:[transform:translateX(calc(100%+16px))] pf:motion-safe:data-[ending-style]:[transform:translateX(calc(100%+16px))]"), S),
+			style: { transitionTimingFunction: i.sheetEasing },
 			children: [w && /* @__PURE__ */ s("button", {
 				type: "button",
 				disabled: !T || C.pending,