@cascivo/react 0.8.0 → 0.10.0

package/dist/node/combobox/combobox.js

@@ -0,0 +1,164 @@
+"use client";
+
+import e from "./combobox.module.js";
+import { cn as t, createMachine as n, useMachine as r, useSignal as i, useSignalEffect as a, useSignals as o } from "@cascivo/core";
+import { builtin as s, t as c } from "@cascivo/i18n";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { useId as d, useRef as f } from "react";
+//#region ../components/src/combobox/combobox.tsx
+var p = n({
+	initial: "closed",
+	states: {
+		closed: { on: { OPEN: "open" } },
+		open: { on: { CLOSE: "closed" } }
+	}
+});
+function m({ options: n, value: m, defaultValue: h, onValueChange: g, onChange: _, clearable: v = !1, searchable: y = !0, label: b, hint: x, error: S, size: C = "md", disabled: w = !1, labels: T, className: E, id: D }) {
+	o();
+	let [O, k] = r(p), A = d(), j = D ?? `cascade-combobox-${A}`, M = `${A}-listbox`, N = f(null), P = T?.placeholder ?? c(s.combobox.placeholder), F = T?.empty ?? c(s.combobox.empty), I = T?.clear ?? c(s.combobox.clear), L = T?.search ?? c(s.combobox.search), R = i(m ?? h);
+	m !== void 0 && (R.value = m);
+	let z = i(""), B = i(0), V = O.value === "open", H = n.filter((e) => !y || !z.value ? !0 : e.label.toLowerCase().includes(z.value.toLowerCase())), U = n.find((e) => e.value === R.value);
+	a(() => {
+		if (!V) return;
+		let e = (e) => {
+			let t = document.getElementById(`${A}-root`);
+			t && !t.contains(e.target) && k("CLOSE");
+		};
+		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+	});
+	let W = () => {
+		w || (z.value = "", B.value = 0, k("OPEN"), setTimeout(() => N.current?.focus(), 0));
+	}, G = () => {
+		k("CLOSE"), z.value = "";
+	}, K = g ?? _, q = (e) => {
+		m === void 0 && (R.value = e), K?.(e), G();
+	}, J = () => {
+		m === void 0 && (R.value = void 0), K?.(void 0);
+	}, Y = H.flatMap((e, t) => e.disabled ? [] : [t]), X = (e) => {
+		if (Y.length === 0) return;
+		let t = Y[(Y.indexOf(B.value) + e + Y.length) % Y.length];
+		t !== void 0 && (B.value = t);
+	}, Z = (e) => {
+		(e.key === "Enter" || e.key === " " || e.key === "ArrowDown") && (e.preventDefault(), W());
+	}, Q = (e) => {
+		switch (e.key) {
+			case "ArrowDown":
+				e.preventDefault(), X(1);
+				break;
+			case "ArrowUp":
+				e.preventDefault(), X(-1);
+				break;
+			case "Enter": {
+				e.preventDefault();
+				let t = H[B.value];
+				t && !t.disabled && q(t.value);
+				break;
+			}
+			case "Escape":
+				e.preventDefault(), G();
+				break;
+			case "Tab":
+				G();
+				break;
+		}
+	}, $ = (e) => `${A}-option-${e}`;
+	return /* @__PURE__ */ u("div", {
+		id: `${A}-root`,
+		className: t(e.wrapper, E),
+		"data-state": S ? "error" : O.value,
+		"data-size": C,
+		children: [
+			b && /* @__PURE__ */ l("label", {
+				className: e.label,
+				htmlFor: j,
+				children: b
+			}),
+			/* @__PURE__ */ u("div", {
+				className: e.field,
+				children: [/* @__PURE__ */ u("button", {
+					id: j,
+					type: "button",
+					role: "combobox",
+					"aria-expanded": V,
+					"aria-controls": M,
+					"aria-haspopup": "listbox",
+					"aria-activedescendant": V && B.value >= 0 ? $(B.value) : void 0,
+					"aria-invalid": S ? !0 : void 0,
+					"aria-describedby": S ? `${A}-error` : x ? `${A}-hint` : void 0,
+					className: e.trigger,
+					disabled: w,
+					onKeyDown: Z,
+					onClick: V ? G : W,
+					children: [/* @__PURE__ */ l("span", {
+						className: t(e.value, U ? void 0 : e.placeholder),
+						children: U?.label ?? P
+					}), /* @__PURE__ */ l("span", {
+						className: e.chevron,
+						"aria-hidden": "true"
+					})]
+				}), v && R.value !== void 0 && /* @__PURE__ */ l("button", {
+					type: "button",
+					className: e.clear,
+					"aria-label": I,
+					onClick: (e) => {
+						e.stopPropagation(), J();
+					},
+					children: "✕"
+				})]
+			}),
+			/* @__PURE__ */ u("div", {
+				role: "listbox",
+				id: M,
+				className: e.listbox,
+				"data-state": V ? "open" : "closed",
+				"aria-label": b,
+				children: [y && V && /* @__PURE__ */ l("div", {
+					className: e.searchWrapper,
+					children: /* @__PURE__ */ l("input", {
+						ref: N,
+						type: "text",
+						className: e.search,
+						value: z.value,
+						onChange: (e) => {
+							z.value = e.target.value, B.value = 0;
+						},
+						onKeyDown: Q,
+						"aria-label": L,
+						autoComplete: "off"
+					})
+				}), H.length === 0 ? /* @__PURE__ */ l("div", {
+					className: e.empty,
+					children: F
+				}) : H.map((t, n) => /* @__PURE__ */ l("div", {
+					id: $(n),
+					role: "option",
+					"aria-selected": t.value === R.value,
+					"aria-disabled": t.disabled || void 0,
+					"data-state": n === B.value ? "active" : void 0,
+					"data-disabled": t.disabled || void 0,
+					className: e.option,
+					onMouseEnter: () => {
+						t.disabled || (B.value = n);
+					},
+					onClick: () => {
+						t.disabled || q(t.value);
+					},
+					children: t.label
+				}, t.value))]
+			}),
+			S && /* @__PURE__ */ l("span", {
+				id: `${A}-error`,
+				className: e.error,
+				role: "alert",
+				children: S
+			}),
+			!S && x && /* @__PURE__ */ l("span", {
+				id: `${A}-hint`,
+				className: e.hint,
+				children: x
+			})
+		]
+	});
+}
+//#endregion
+export { m as Combobox };

package/dist/node/combobox/combobox.module.js

@@ -0,0 +1,21 @@
+"use client";
+
+var e = {
+	wrapper: "_wrapper_bi94t_2",
+	label: "_label_bi94t_10",
+	field: "_field_bi94t_16",
+	trigger: "_trigger_bi94t_22",
+	value: "_value_bi94t_70",
+	placeholder: "_placeholder_bi94t_76",
+	chevron: "_chevron_bi94t_80",
+	clear: "_clear_bi94t_96",
+	listbox: "_listbox_bi94t_122",
+	searchWrapper: "_searchWrapper_bi94t_156",
+	search: "_search_bi94t_156",
+	option: "_option_bi94t_178",
+	empty: "_empty_bi94t_201",
+	error: "_error_bi94t_208",
+	hint: "_hint_bi94t_213"
+};
+//#endregion
+export { e as default };

package/dist/node/command-menu/command-menu.js

@@ -0,0 +1,425 @@
+"use client";
+
+import { Spinner as e } from "../spinner/spinner.js";
+import { Kbd as t } from "../kbd/kbd.js";
+import n from "./command-menu.module.js";
+import { batch as r, cn as i, useSignal as a, useSignalEffect as o, useSignals as s } from "@cascivo/core";
+import { builtin as c, t as l } from "@cascivo/i18n";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { useId as ee, useRef as f } from "react";
+//#region ../components/src/command-menu/command-menu.tsx
+function p(e, t) {
+	if (e.length === 0) return {
+		score: 1,
+		indices: []
+	};
+	let n = e.toLowerCase(), r = t.toLowerCase(), i = 0, a = 0, o = -2, s = [];
+	for (let e = 0; e < r.length && a < n.length; e++) {
+		if (r[e] !== n[a]) continue;
+		i += 1, e === o + 1 && (i += 4);
+		let t = e === 0 ? " " : r[e - 1];
+		(t === " " || t === "-" || t === "_" || t === "/") && (i += 8), o = e, s.push(e), a++;
+	}
+	return a === n.length ? {
+		score: i,
+		indices: s
+	} : null;
+}
+function m(e, t) {
+	return p(e, t)?.score ?? 0;
+}
+function h(e, t) {
+	let n = m(e, t.label);
+	for (let r of t.keywords ?? []) {
+		let t = m(e, r);
+		t > n && (n = t);
+	}
+	return n;
+}
+function g(e, t) {
+	if (t.length === 0) return e;
+	let r = new Set(t), i = [], a = "", o = r.has(0), s = (e) => {
+		a !== "" && (i.push(o ? /* @__PURE__ */ u("mark", {
+			className: n.match,
+			children: a
+		}, e) : a), a = "");
+	};
+	for (let t = 0; t < e.length; t++) {
+		let n = r.has(t);
+		n !== o && (s(t), o = n), a += e[t];
+	}
+	return s(e.length), i;
+}
+function _(e, t) {
+	for (let n of t) {
+		let t = n.prefix;
+		if (t) {
+			if (e.startsWith(`${t} `) || e.startsWith(`${t}:`)) return {
+				scope: n,
+				rest: e.slice(t.length + 1).replace(/^\s+/, "")
+			};
+			if (!/\w/.test(t) && e.startsWith(t)) return {
+				scope: n,
+				rest: e.slice(t.length).replace(/^\s+/, "")
+			};
+		}
+	}
+	return null;
+}
+function v({ open: m, onOpenChange: v, groups: te, placeholder: y, emptyLabel: b, hotkey: x = !0, label: S, loading: C = !1, onQueryChange: w, scopes: T = [], className: E }) {
+	s();
+	let D = S ?? l(c.commandMenu.label), ne = b ?? l(c.commandMenu.empty), O = ee(), k = `${O}-listbox`, A = f(null), j = f(null), M = f([]), N = f(v);
+	N.current = v;
+	let P = f(w);
+	P.current = w;
+	let F = a(m);
+	F.value = m;
+	let I = a(x);
+	I.value = x;
+	let L = a(""), R = a(0), z = a([]), B = a(null), re = z.value.at(-1)?.groups ?? te, ie = y ?? z.value.at(-1)?.placeholder ?? l(c.commandMenu.placeholder), V = T.find((e) => e.id === B.value) ?? null, H = re.filter((e) => !B.value || !e.scope || e.scope === B.value).map((e) => ({
+		heading: e.heading,
+		items: e.items.map((e) => ({
+			item: e,
+			score: h(L.value, e)
+		})).filter(({ score: e }) => e > 0).sort((e, t) => t.score - e.score).map(({ item: e }) => ({
+			item: e,
+			indices: p(L.value, e.label)?.indices ?? []
+		}))
+	})).filter((e) => e.items.length > 0), U = H.flatMap((e) => e.items.map((e) => e.item)), W = U.flatMap((e, t) => e.disabled ? [] : [t]), G = W.includes(R.value) ? R.value : W[0] ?? -1, K = (e) => `${O}-option-${e}`;
+	o(() => {
+		let e = A.current;
+		e && (F.value ? e.open || (r(() => {
+			L.value = "", R.value = 0, z.value = [], B.value = null;
+		}), typeof e.showModal == "function" && e.showModal(), j.current?.focus()) : e.open && (z.value = [], e.close()));
+	}), o(() => {
+		let e = A.current;
+		if (!e) return;
+		let t = () => N.current(!1);
+		return e.addEventListener("close", t), () => e.removeEventListener("close", t);
+	}), o(() => {
+		if (!I.value) return;
+		let e = (e) => {
+			(e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k" && (e.preventDefault(), N.current(!F.value));
+		};
+		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
+	});
+	let q = (e) => {
+		R.value = e;
+		let t = M.current[e];
+		t && typeof t.scrollIntoView == "function" && t.scrollIntoView({ block: "nearest" });
+	}, J = (e) => {
+		if (W.length === 0) return;
+		let t = W[(W.indexOf(G) + e + W.length) % W.length];
+		t !== void 0 && q(t);
+	}, Y = (e) => {
+		e.onSelect(), v(!1);
+	}, X = (e, t) => {
+		if (!(!e || e.disabled)) {
+			if (e.page) {
+				if (t === "secondary") return;
+				r(() => {
+					z.value = [...z.value, e.page], L.value = "", R.value = 0;
+				});
+				return;
+			}
+			if (e.actions && e.actions.length > 0) {
+				let n = t === "secondary" ? e.actions[1] : e.actions[0];
+				n && Y(n);
+				return;
+			}
+			t !== "secondary" && (e.onSelect?.(), v(!1));
+		}
+	}, ae = (e) => {
+		if (T.length === 0) return;
+		let t = [null, ...T.map((e) => e.id)], n = t[(t.indexOf(B.value) + e + t.length) % t.length];
+		r(() => {
+			B.value = n ?? null, R.value = 0;
+		});
+	}, Z = () => {
+		r(() => {
+			B.value = null, R.value = 0;
+		}), j.current?.focus();
+	}, Q = () => {
+		r(() => {
+			z.value = z.value.slice(0, -1), L.value = "", R.value = 0;
+		});
+	}, oe = (e) => {
+		switch (e.key) {
+			case "ArrowDown":
+				e.preventDefault(), J(1);
+				break;
+			case "ArrowUp":
+				e.preventDefault(), J(-1);
+				break;
+			case "Tab":
+				T.length > 0 && (e.preventDefault(), ae(e.shiftKey ? -1 : 1));
+				break;
+			case "Home":
+				e.preventDefault(), W[0] !== void 0 && q(W[0]);
+				break;
+			case "End": {
+				e.preventDefault();
+				let t = W[W.length - 1];
+				t !== void 0 && q(t);
+				break;
+			}
+			case "Enter":
+				e.preventDefault(), G >= 0 && X(U[G], e.metaKey || e.ctrlKey ? "secondary" : "primary");
+				break;
+			case "Backspace":
+				L.value === "" && (z.value.length > 0 ? (e.preventDefault(), Q()) : B.value && (e.preventDefault(), Z()));
+				break;
+		}
+	}, se = (e) => {
+		e.key === "Escape" && (e.preventDefault(), z.value.length > 0 ? Q() : A.current?.close());
+	}, ce = (e) => {
+		e.target === A.current && A.current?.close();
+	}, $ = -1;
+	return /* @__PURE__ */ u("dialog", {
+		ref: A,
+		"aria-label": D,
+		className: i(n.dialog, E),
+		onClick: ce,
+		onKeyDown: se,
+		children: /* @__PURE__ */ d("div", {
+			className: n.panel,
+			children: [
+				/* @__PURE__ */ d("div", {
+					className: n.search,
+					children: [
+						/* @__PURE__ */ d("svg", {
+							className: n.searchIcon,
+							"aria-hidden": "true",
+							viewBox: "0 0 16 16",
+							width: "16",
+							height: "16",
+							fill: "none",
+							stroke: "currentColor",
+							strokeWidth: "1.5",
+							strokeLinecap: "round",
+							children: [/* @__PURE__ */ u("circle", {
+								cx: "7",
+								cy: "7",
+								r: "4.5"
+							}), /* @__PURE__ */ u("line", {
+								x1: "10.5",
+								y1: "10.5",
+								x2: "14",
+								y2: "14"
+							})]
+						}),
+						V && /* @__PURE__ */ d("span", {
+							className: n.scopeChip,
+							children: [V.label, /* @__PURE__ */ u("button", {
+								type: "button",
+								className: n.scopeClear,
+								"aria-label": l(c.commandMenu.clearScope),
+								onClick: Z,
+								children: /* @__PURE__ */ u("svg", {
+									viewBox: "0 0 16 16",
+									width: "12",
+									height: "12",
+									"aria-hidden": "true",
+									children: /* @__PURE__ */ u("path", {
+										d: "M4 4l8 8M12 4l-8 8",
+										fill: "none",
+										stroke: "currentColor",
+										strokeWidth: "1.5",
+										strokeLinecap: "round"
+									})
+								})
+							})]
+						}),
+						/* @__PURE__ */ u("input", {
+							ref: j,
+							type: "text",
+							role: "combobox",
+							"aria-expanded": "true",
+							"aria-controls": k,
+							"aria-activedescendant": G >= 0 ? K(G) : void 0,
+							"aria-autocomplete": "list",
+							"aria-label": D,
+							autoComplete: "off",
+							spellCheck: !1,
+							className: n.input,
+							placeholder: ie,
+							value: L.value,
+							onChange: (e) => {
+								let t = e.target.value;
+								if (!B.value && T.length > 0) {
+									let e = _(t, T);
+									e && (B.value = e.scope.id, t = e.rest);
+								}
+								L.value = t, R.value = 0, P.current?.(t);
+							},
+							onKeyDown: oe
+						})
+					]
+				}),
+				T.length > 0 && /* @__PURE__ */ d("div", {
+					className: n.scopes,
+					children: [/* @__PURE__ */ u("span", {
+						className: n.scopesLabel,
+						children: l(c.commandMenu.scopeLabel)
+					}), T.map((e) => /* @__PURE__ */ d("button", {
+						type: "button",
+						className: n.scopePill,
+						"data-active": e.id === B.value || void 0,
+						onClick: () => {
+							r(() => {
+								B.value = B.value === e.id ? null : e.id, R.value = 0;
+							}), j.current?.focus();
+						},
+						children: [e.prefix && /* @__PURE__ */ u("span", {
+							className: n.scopePrefix,
+							children: e.prefix
+						}), e.label]
+					}, e.id))]
+				}),
+				/* @__PURE__ */ d("div", {
+					className: n.list,
+					children: [/* @__PURE__ */ u("div", {
+						role: "listbox",
+						id: k,
+						"aria-label": S,
+						tabIndex: 0,
+						children: H.map((e, r) => /* @__PURE__ */ d("div", {
+							role: "group",
+							"aria-label": e.heading,
+							className: n.group,
+							children: [e.heading && /* @__PURE__ */ d("div", {
+								className: n.heading,
+								"aria-hidden": "true",
+								children: [/* @__PURE__ */ u("span", { children: e.heading }), L.value !== "" && /* @__PURE__ */ u("span", {
+									className: n.count,
+									children: l(c.commandMenu.matches, { count: e.items.length })
+								})]
+							}), e.items.map((e) => {
+								let { item: r, indices: i } = e;
+								$++;
+								let a = $;
+								return /* @__PURE__ */ d("div", {
+									ref: (e) => {
+										M.current[a] = e;
+									},
+									id: K(a),
+									role: "option",
+									"aria-selected": a === G,
+									"aria-disabled": r.disabled || void 0,
+									"data-state": a === G ? "active" : void 0,
+									"data-disabled": r.disabled || void 0,
+									className: n.option,
+									onMouseEnter: () => {
+										r.disabled || (R.value = a);
+									},
+									onClick: () => X(r, "primary"),
+									children: [
+										r.icon && /* @__PURE__ */ u("span", {
+											className: n.icon,
+											"aria-hidden": "true",
+											children: r.icon
+										}),
+										/* @__PURE__ */ d("span", {
+											className: n.text,
+											children: [/* @__PURE__ */ u("span", {
+												className: n.label,
+												children: g(r.label, i)
+											}), r.description && /* @__PURE__ */ u("span", {
+												className: n.description,
+												children: r.description
+											})]
+										}),
+										r.status && /* @__PURE__ */ d("span", {
+											className: n.status,
+											"data-tone": r.status.tone ?? "neutral",
+											children: [/* @__PURE__ */ u("span", {
+												className: n.statusDot,
+												"aria-hidden": "true"
+											}), r.status.label]
+										}),
+										r.actions && r.actions.length > 0 && /* @__PURE__ */ u("span", {
+											className: n.actions,
+											children: r.actions.map((e) => /* @__PURE__ */ d("span", {
+												className: n.action,
+												onClick: (t) => {
+													t.stopPropagation(), Y(e);
+												},
+												children: [e.label, e.shortcut && /* @__PURE__ */ u("span", {
+													className: n.actionKeys,
+													"aria-hidden": "true",
+													children: e.shortcut.map((e, n) => /* @__PURE__ */ u(t, {
+														size: "sm",
+														children: e
+													}, n))
+												})]
+											}, e.id))
+										}),
+										r.shortcut && /* @__PURE__ */ u("span", {
+											className: n.shortcut,
+											"aria-hidden": "true",
+											children: r.shortcut.map((e, n) => /* @__PURE__ */ u(t, {
+												size: "sm",
+												children: e
+											}, n))
+										})
+									]
+								}, r.id);
+							})]
+						}, e.heading ?? `group-${r}`))
+					}), U.length === 0 && (C ? /* @__PURE__ */ d("div", {
+						role: "status",
+						className: n.empty,
+						children: [/* @__PURE__ */ u(e, { size: "sm" }), l(c.commandMenu.loading)]
+					}) : /* @__PURE__ */ u("div", {
+						role: "status",
+						className: n.empty,
+						children: ne
+					}))]
+				}),
+				/* @__PURE__ */ d("div", {
+					className: n.footer,
+					"aria-hidden": "true",
+					children: [
+						/* @__PURE__ */ d("span", {
+							className: n.hint,
+							children: [
+								/* @__PURE__ */ u(t, {
+									size: "sm",
+									children: "↑"
+								}),
+								/* @__PURE__ */ u(t, {
+									size: "sm",
+									children: "↓"
+								}),
+								" navigate"
+							]
+						}),
+						/* @__PURE__ */ d("span", {
+							className: n.hint,
+							children: [/* @__PURE__ */ u(t, {
+								size: "sm",
+								children: "↵"
+							}), " open"]
+						}),
+						T.length > 0 && /* @__PURE__ */ d("span", {
+							className: n.hint,
+							children: [/* @__PURE__ */ u(t, {
+								size: "sm",
+								children: "Tab"
+							}), " scope"]
+						}),
+						/* @__PURE__ */ d("span", {
+							className: n.hint,
+							children: [/* @__PURE__ */ u(t, {
+								size: "sm",
+								children: "esc"
+							}), " close"]
+						})
+					]
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { v as CommandMenu, p as fuzzyMatch, m as fuzzyScore };

package/dist/node/command-menu/command-menu.module.js

@@ -0,0 +1,36 @@
+"use client";
+
+var e = {
+	dialog: "_dialog_1dfrg_2",
+	panel: "_panel_1dfrg_62",
+	search: "_search_1dfrg_72",
+	searchIcon: "_searchIcon_1dfrg_80",
+	scopeChip: "_scopeChip_1dfrg_85",
+	scopeClear: "_scopeClear_1dfrg_101",
+	input: "_input_1dfrg_123",
+	scopes: "_scopes_1dfrg_142",
+	scopesLabel: "_scopesLabel_1dfrg_153",
+	scopePill: "_scopePill_1dfrg_163",
+	scopePrefix: "_scopePrefix_1dfrg_193",
+	list: "_list_1dfrg_199",
+	group: "_group_1dfrg_205",
+	heading: "_heading_1dfrg_209",
+	count: "_count_1dfrg_222",
+	option: "_option_1dfrg_228",
+	icon: "_icon_1dfrg_253",
+	text: "_text_1dfrg_260",
+	label: "_label_1dfrg_268",
+	match: "_match_1dfrg_274",
+	description: "_description_1dfrg_280",
+	status: "_status_1dfrg_289",
+	statusDot: "_statusDot_1dfrg_316",
+	actions: "_actions_1dfrg_325",
+	action: "_action_1dfrg_325",
+	actionKeys: "_actionKeys_1dfrg_369",
+	shortcut: "_shortcut_1dfrg_374",
+	empty: "_empty_1dfrg_392",
+	footer: "_footer_1dfrg_400",
+	hint: "_hint_1dfrg_411"
+};
+//#endregion
+export { e as default };