@cascivo/react 0.9.0 → 0.10.1

package/dist/node/log-viewer/log-viewer.module.js

@@ -0,0 +1,18 @@
+"use client";
+
+var e = {
+	root: "_root_1mutf_2",
+	toolbar: "_toolbar_1mutf_11",
+	search: "_search_1mutf_20",
+	count: "_count_1mutf_33",
+	spacer: "_spacer_1mutf_38",
+	toggle: "_toggle_1mutf_42",
+	copy: "_copy_1mutf_43",
+	scroll: "_scroll_1mutf_81",
+	sizer: "_sizer_1mutf_96",
+	line: "_line_1mutf_101",
+	ansi: "_ansi_1mutf_128",
+	empty: "_empty_1mutf_149"
+};
+//#endregion
+export { e as default };

package/dist/node/menu/menu.js

@@ -0,0 +1,121 @@
+"use client";
+
+import { usePopover as e } from "../popover/use-popover.js";
+import t from "./menu.module.js";
+import { useSignalEffect as n, useSignals as r, useTypeahead as i } from "@cascivo/core";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { createContext as s } from "react";
+//#region ../components/src/menu/menu.tsx
+var c = s(null);
+function l({ ctx: e, children: o }) {
+	r();
+	let { popoverRef: s, anchorName: c, isOpen: l } = e, u = () => {
+		let e = s.current;
+		return e ? Array.from(e.querySelectorAll("[role=\"menuitem\"]:not([aria-disabled=\"true\"])")) : [];
+	}, d = (e) => {
+		let t = u();
+		t.length !== 0 && t[e(t, t.indexOf(document.activeElement))]?.focus();
+	}, f = i({ onMatch: (e) => {
+		u().find((t) => (t.textContent ?? "").trim().toLowerCase().startsWith(e))?.focus();
+	} });
+	return n(() => {
+		if (!l.value) return;
+		let e = s.current;
+		e && e.querySelector("[role=\"menuitem\"]:not([aria-disabled=\"true\"])")?.focus();
+	}), /* @__PURE__ */ a("div", {
+		ref: s,
+		popover: "auto",
+		role: "menu",
+		"data-state": l.value ? "open" : "closed",
+		style: { positionAnchor: c },
+		className: t.panel,
+		onKeyDown: (e) => {
+			switch (e.key) {
+				case "ArrowDown":
+					e.preventDefault(), d((e, t) => t < 0 ? 0 : (t + 1) % e.length);
+					break;
+				case "ArrowUp":
+					e.preventDefault(), d((e, t) => t < 0 ? e.length - 1 : (t - 1 + e.length) % e.length);
+					break;
+				case "Home":
+					e.preventDefault(), d(() => 0);
+					break;
+				case "End":
+					e.preventDefault(), d((e) => e.length - 1);
+					break;
+				default: f.onKeyDown(e);
+			}
+		},
+		children: o
+	});
+}
+function u({ children: e }) {
+	return /* @__PURE__ */ a(c.Consumer, { children: (t) => {
+		if (!t) throw Error("MenuPanel must be inside <Menu>");
+		return /* @__PURE__ */ a(l, {
+			ctx: t,
+			children: e
+		});
+	} });
+}
+function d({ children: t }) {
+	let n = e(), [r, ...i] = Array.isArray(t) ? t : [t];
+	return /* @__PURE__ */ o(c.Provider, {
+		value: n,
+		children: [r, /* @__PURE__ */ a(u, { children: i })]
+	});
+}
+function f({ ctx: e, children: n, "aria-label": i }) {
+	r();
+	let { triggerRef: o, toggle: s, anchorName: c, isOpen: l } = e;
+	return /* @__PURE__ */ a("button", {
+		ref: o,
+		type: "button",
+		"aria-haspopup": "menu",
+		"aria-expanded": l.value,
+		"aria-label": i,
+		style: { anchorName: c },
+		onClick: s,
+		className: t.trigger,
+		children: n
+	});
+}
+function p({ children: e, "aria-label": t }) {
+	return /* @__PURE__ */ a(c.Consumer, { children: (n) => {
+		if (!n) throw Error("MenuTrigger must be inside <Menu>");
+		return /* @__PURE__ */ a(f, {
+			ctx: n,
+			...t !== void 0 && { "aria-label": t },
+			children: e
+		});
+	} });
+}
+function m({ children: e, onSelect: n, disabled: r }) {
+	return /* @__PURE__ */ a(c.Consumer, { children: (i) => {
+		if (!i) throw Error("MenuItem must be inside <Menu>");
+		let { close: o } = i;
+		function s() {
+			r || (n(), o());
+		}
+		function c(e) {
+			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), s());
+		}
+		return /* @__PURE__ */ a("div", {
+			role: "menuitem",
+			tabIndex: r ? -1 : 0,
+			"aria-disabled": r,
+			onClick: s,
+			onKeyDown: c,
+			className: t.item,
+			children: e
+		});
+	} });
+}
+function h() {
+	return /* @__PURE__ */ a("div", {
+		role: "separator",
+		className: t.separator
+	});
+}
+//#endregion
+export { d as Menu, m as MenuItem, h as MenuSeparator, p as MenuTrigger };

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

@@ -0,0 +1,10 @@
+"use client";
+
+var e = {
+	trigger: "_trigger_11vpw_2",
+	panel: "_panel_11vpw_25",
+	item: "_item_11vpw_69",
+	separator: "_separator_11vpw_92"
+};
+//#endregion
+export { e as default };

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

@@ -0,0 +1,92 @@
+"use client";
+
+import e from "./menu-button.module.js";
+import { DismissableLayer as t, cn as n, useAnchorPosition as r, useSignal as i, useSignalEffect as a, useSignals as o } from "@cascivo/core";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { useId as l, useRef as u } from "react";
+//#region ../components/src/menu-button/menu-button.tsx
+function d(e, t) {
+	if (!e) return;
+	let n = e.querySelectorAll("[role=\"menuitem\"]:not([aria-disabled=\"true\"])");
+	n[t < 0 ? n.length - 1 : t % n.length]?.focus();
+}
+function f({ label: f, items: p, variant: m = "secondary", size: h = "md", disabled: g = !1, align: _ = "start", labels: v, className: y }) {
+	o();
+	let b = i(!1), x = u(null), S = u(null), C = l(), { anchorStyle: w, floatingStyle: T } = r({
+		anchorRef: x,
+		floatingRef: S,
+		placement: _ === "end" ? "bottom-end" : "bottom-start",
+		enabled: b
+	});
+	a(() => {
+		b.value && d(S.current, 0);
+	});
+	function E(e) {
+		g || (b.value = !0, queueMicrotask(() => d(S.current, e)));
+	}
+	function D(e) {
+		b.value = !1, e && x.current?.focus();
+	}
+	function O(e) {
+		e.key === "ArrowDown" || e.key === "Enter" || e.key === " " ? (e.preventDefault(), E(0)) : e.key === "ArrowUp" && (e.preventDefault(), E(-1));
+	}
+	function k(e) {
+		if (e.key === "ArrowDown") {
+			e.preventDefault();
+			let t = e.currentTarget.nextElementSibling;
+			t ? t.focus() : d(S.current, 0);
+		} else if (e.key === "ArrowUp") {
+			e.preventDefault();
+			let t = e.currentTarget.previousElementSibling;
+			t ? t.focus() : d(S.current, -1);
+		} else e.key === "Escape" ? (e.preventDefault(), D(!0)) : e.key === "Tab" && D(!1);
+	}
+	function A(e) {
+		e.disabled || (e.onSelect?.(), D(!0));
+	}
+	return /* @__PURE__ */ c("div", {
+		className: n(e.root, y),
+		children: [/* @__PURE__ */ s("button", {
+			ref: x,
+			type: "button",
+			className: e.trigger,
+			"data-variant": m,
+			"data-size": h,
+			disabled: g,
+			"aria-haspopup": "menu",
+			"aria-expanded": b.value,
+			"aria-controls": C,
+			...v?.open !== void 0 && { "aria-label": v.open },
+			style: w,
+			onClick: () => {
+				b.value ? D(!1) : E(0);
+			},
+			onKeyDown: O,
+			children: f
+		}), b.value ? /* @__PURE__ */ s(t, {
+			onDismiss: () => D(!0),
+			children: /* @__PURE__ */ s("div", {
+				ref: S,
+				id: C,
+				role: "menu",
+				"data-state": "open",
+				"data-align": _,
+				className: e.menu,
+				style: T,
+				children: p.map((t) => /* @__PURE__ */ s("div", {
+					role: "menuitem",
+					tabIndex: -1,
+					"aria-disabled": t.disabled,
+					className: e.item,
+					onClick: () => A(t),
+					onKeyDown: (e) => {
+						e.key === "Enter" || e.key === " " ? (e.preventDefault(), A(t)) : k(e);
+					},
+					children: t.label
+				}, t.id))
+			})
+		}) : null]
+	});
+}
+//#endregion
+export { f as MenuButton };

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

@@ -0,0 +1,10 @@
+"use client";
+
+var e = {
+	root: "_root_rzxsi_2",
+	trigger: "_trigger_rzxsi_7",
+	menu: "_menu_rzxsi_82",
+	item: "_item_rzxsi_104"
+};
+//#endregion
+export { e as default };

package/dist/node/menubar/menubar.js

@@ -0,0 +1,103 @@
+"use client";
+
+import e from "./menubar.module.js";
+import { DismissableLayer as t, Presence as n, cn as r, useAnchorPosition as i, useRovingFocus as a, useSignal as o, useSignals as s } from "@cascivo/core";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+import { useId as d, useRef as f } from "react";
+//#region ../components/src/menubar/menubar.tsx
+function p({ menus: t, "aria-label": n, className: i }) {
+	s();
+	let c = d(), u = o(null), f = a({
+		orientation: "horizontal",
+		loop: !0
+	});
+	return /* @__PURE__ */ l("div", {
+		role: "menubar",
+		"aria-label": n,
+		className: r(e.menubar, i),
+		children: t.map((e, t) => /* @__PURE__ */ l(m, {
+			menu: e,
+			index: t,
+			baseId: c,
+			openId: u,
+			itemProps: f.getItemProps(t)
+		}, e.id))
+	});
+}
+function m({ menu: t, baseId: r, openId: a, itemProps: o }) {
+	s();
+	let d = f(null), p = f(null), m = a.value === t.id, g = `${r}-menu-${t.id}`, { anchorStyle: _, floatingStyle: v } = i({
+		anchorRef: d,
+		floatingRef: p,
+		placement: "bottom-start",
+		enabled: m
+	}), y = () => {
+		(p.current?.querySelector("[role=\"menuitem\"]:not([aria-disabled=\"true\"])"))?.focus();
+	}, b = (e) => {
+		o.onKeyDown(e), !e.defaultPrevented && (e.key === "ArrowDown" || e.key === "Enter" || e.key === " " ? (e.preventDefault(), a.value = t.id, requestAnimationFrame(y)) : e.key === "Escape" && (a.value = null));
+	}, { ref: x, onKeyDown: S, ...C } = o;
+	return /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l("button", {
+		ref: (e) => {
+			d.current = e, x(e);
+		},
+		type: "button",
+		role: "menuitem",
+		"aria-haspopup": "menu",
+		"aria-expanded": m,
+		"aria-controls": g,
+		"data-state": m ? "open" : "closed",
+		className: e.trigger,
+		style: _,
+		onClick: () => {
+			a.value = m ? null : t.id;
+		},
+		onKeyDown: b,
+		...C,
+		children: t.label
+	}), /* @__PURE__ */ l(n, {
+		present: m,
+		children: /* @__PURE__ */ l(h, {
+			menu: t,
+			menuId: g,
+			floatingRef: p,
+			floatingStyle: v,
+			onClose: () => {
+				a.value = null, d.current?.focus();
+			}
+		})
+	})] });
+}
+function h({ menu: n, menuId: r, floatingRef: i, floatingStyle: a, onClose: o }) {
+	let s = (e) => {
+		let t = Array.from(i.current?.querySelectorAll("[role=\"menuitem\"]:not([aria-disabled=\"true\"])") ?? []);
+		if (t.length === 0) return;
+		let n = t.indexOf(e.currentTarget);
+		e.key === "ArrowDown" ? (e.preventDefault(), t[(n + 1) % t.length]?.focus()) : e.key === "ArrowUp" ? (e.preventDefault(), t[(n - 1 + t.length) % t.length]?.focus()) : e.key === "Home" ? (e.preventDefault(), t[0]?.focus()) : e.key === "End" && (e.preventDefault(), t[t.length - 1]?.focus());
+	};
+	return /* @__PURE__ */ l(t, {
+		onDismiss: o,
+		children: /* @__PURE__ */ l("div", {
+			ref: i,
+			id: r,
+			role: "menu",
+			"aria-label": typeof n.label == "string" ? n.label : void 0,
+			className: e.panel,
+			style: a,
+			children: n.items.map((t) => /* @__PURE__ */ l("div", {
+				role: "menuitem",
+				tabIndex: -1,
+				"aria-disabled": t.disabled,
+				className: e.item,
+				onClick: () => {
+					t.disabled || (t.onSelect?.(), o());
+				},
+				onKeyDown: (e) => {
+					t.disabled || (e.key === "Enter" || e.key === " " ? (e.preventDefault(), t.onSelect?.(), o()) : s(e));
+				},
+				children: t.label
+			}, t.id))
+		})
+	});
+}
+//#endregion
+export { p as Menubar };

package/dist/node/menubar/menubar.module.js

@@ -0,0 +1,10 @@
+"use client";
+
+var e = {
+	menubar: "_menubar_1fs00_2",
+	trigger: "_trigger_1fs00_12",
+	panel: "_panel_1fs00_35",
+	item: "_item_1fs00_66"
+};
+//#endregion
+export { e as default };

package/dist/node/modal/modal.js

@@ -0,0 +1,70 @@
+"use client";
+
+import e from "./modal.module.js";
+import { cn as t, useDraggable as n, useId 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 { useRef as d } from "react";
+//#region ../components/src/modal/modal.tsx
+function f({ open: f = !1, onClose: p, title: m, description: h, children: g, className: _, size: v = "md", draggable: y = !1 }) {
+	o();
+	let b = d(null), x = d(p);
+	x.current = p;
+	let S = r("cascivo-modal-title"), C = r("cascivo-modal-desc"), { handleRef: w, offset: T } = n({ isDisabled: !y }), E = y ? {
+		"--modal-x": `${T.value.x}px`,
+		"--modal-y": `${T.value.y}px`
+	} : void 0, D = i(f);
+	return D.value = f, a(() => {
+		let e = b.current;
+		e && (D.value ? e.open || e.showModal() : e.open && e.close());
+	}), a(() => {
+		let e = b.current;
+		if (!e) return;
+		let t = () => x.current?.();
+		return e.addEventListener("close", t), () => e.removeEventListener("close", t);
+	}), /* @__PURE__ */ l("dialog", {
+		ref: b,
+		"data-size": v,
+		"data-draggable": y || void 0,
+		className: t(e.dialog, _),
+		style: E,
+		onClick: (e) => {
+			e.target === b.current && b.current?.close();
+		},
+		"aria-labelledby": m ? S : void 0,
+		"aria-describedby": h ? C : void 0,
+		children: /* @__PURE__ */ u("div", {
+			className: e.panel,
+			children: [
+				(m || p) && /* @__PURE__ */ u("div", {
+					className: e.header,
+					ref: y ? (e) => {
+						w.current = e;
+					} : void 0,
+					children: [m && /* @__PURE__ */ l("h2", {
+						id: S,
+						className: e.title,
+						children: m
+					}), p && /* @__PURE__ */ l("button", {
+						type: "button",
+						className: e.close,
+						onClick: () => b.current?.close(),
+						"aria-label": c(s.modal.close),
+						children: "✕"
+					})]
+				}),
+				h && /* @__PURE__ */ l("p", {
+					id: C,
+					className: e.description,
+					children: h
+				}),
+				/* @__PURE__ */ l("div", {
+					className: e.body,
+					children: g
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { f as Modal };

package/dist/node/modal/modal.module.js

@@ -0,0 +1,13 @@
+"use client";
+
+var e = {
+	dialog: "_dialog_t1gwg_2",
+	panel: "_panel_t1gwg_69",
+	header: "_header_t1gwg_79",
+	title: "_title_t1gwg_101",
+	close: "_close_t1gwg_110",
+	description: "_description_t1gwg_138",
+	body: "_body_t1gwg_148"
+};
+//#endregion
+export { e as default };

package/dist/node/multi-select/multi-select.js

@@ -0,0 +1,106 @@
+"use client";
+
+import { usePopover as e } from "../popover/use-popover.js";
+import t from "./multi-select.module.js";
+import { cn as n, useComputed 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 { useRef as d } from "react";
+//#region ../components/src/multi-select/multi-select.tsx
+function f({ options: f, value: p, onValueChange: m, placeholder: h, disabled: g = !1, labels: _, className: v, ...y }) {
+	o();
+	let b = e({ placement: "bottom" }), x = i(""), S = i(-1), C = d(null), w = d(null), T = r(() => {
+		let e = x.value.toLowerCase();
+		return e ? f.filter((t) => t.label.toLowerCase().includes(e)) : f;
+	});
+	a(() => {
+		b.isOpen.value ? (S.value = -1, setTimeout(() => w.current?.focus(), 0)) : x.value = "";
+	}), a(() => {
+		let e = C.current;
+		if (!e || !b.isOpen.value) return;
+		let t = (e) => {
+			let t = T.value;
+			if (e.key === "ArrowDown") e.preventDefault(), S.value = Math.min(S.value + 1, t.length - 1);
+			else if (e.key === "ArrowUp") e.preventDefault(), S.value = Math.max(S.value - 1, -1);
+			else if (e.key === " " || e.key === "Enter") {
+				let n = t[S.value];
+				n && !n.disabled && (e.preventDefault(), E(n.value));
+			} else e.key === "Escape" && b.close();
+		};
+		return e.addEventListener("keydown", t), () => e.removeEventListener("keydown", t);
+	});
+	function E(e) {
+		p.includes(e) ? m(p.filter((t) => t !== e)) : m([...p, e]);
+	}
+	let D = p.length === 0 ? h ?? _?.placeholder ?? c(s.multiSelect.placeholder) : _?.selected ? _.selected(p.length) : c(s.multiSelect.selected, { count: String(p.length) }), O = _?.search ?? c(s.multiSelect.search), k = _?.noResults ?? c(s.multiSelect.noResults);
+	return /* @__PURE__ */ u("div", {
+		className: n(t.wrapper, v),
+		...y,
+		children: [/* @__PURE__ */ u("button", {
+			ref: b.triggerRef,
+			type: "button",
+			className: t.trigger,
+			"aria-haspopup": "listbox",
+			"aria-expanded": b.isOpen.value,
+			disabled: g,
+			style: { anchorName: b.anchorName },
+			onClick: () => b.toggle(),
+			children: [/* @__PURE__ */ l("span", {
+				className: t["trigger-label"],
+				children: D
+			}), /* @__PURE__ */ l("span", {
+				className: t.chevron,
+				"aria-hidden": "true"
+			})]
+		}), /* @__PURE__ */ u("div", {
+			ref: b.popoverRef,
+			popover: "auto",
+			className: t.panel,
+			style: { positionAnchor: b.anchorName },
+			tabIndex: -1,
+			children: [/* @__PURE__ */ l("div", {
+				className: t["search-row"],
+				children: /* @__PURE__ */ l("input", {
+					ref: w,
+					type: "search",
+					className: t.search,
+					placeholder: O,
+					value: x.value,
+					onChange: (e) => {
+						x.value = e.currentTarget.value, S.value = -1;
+					}
+				})
+			}), /* @__PURE__ */ l("div", {
+				ref: C,
+				role: "listbox",
+				"aria-multiselectable": "true",
+				"aria-label": _?.label ?? c(s.multiSelect.label),
+				className: t.options,
+				children: T.value.length === 0 ? /* @__PURE__ */ l("div", {
+					className: t["no-results"],
+					children: k
+				}) : T.value.map((e, n) => /* @__PURE__ */ u("div", {
+					role: "option",
+					"aria-selected": p.includes(e.value),
+					"aria-disabled": e.disabled,
+					"data-active": n === S.value ? "" : void 0,
+					"data-selected": p.includes(e.value) ? "" : void 0,
+					"data-disabled": e.disabled ? "" : void 0,
+					className: t.option,
+					onMouseDown: (t) => {
+						t.preventDefault(), e.disabled || E(e.value);
+					},
+					onMouseEnter: () => {
+						S.value = n;
+					},
+					children: [/* @__PURE__ */ l("span", {
+						className: t.checkbox,
+						"aria-hidden": "true"
+					}), e.label]
+				}, e.value))
+			})]
+		})]
+	});
+}
+//#endregion
+export { f as MultiSelect };

package/dist/node/multi-select/multi-select.module.js

@@ -0,0 +1,17 @@
+"use client";
+
+var e = {
+	wrapper: "_wrapper_nkk1l_2",
+	trigger: "_trigger_nkk1l_8",
+	"trigger-label": "_trigger-label_nkk1l_47",
+	chevron: "_chevron_nkk1l_59",
+	panel: "_panel_nkk1l_79",
+	"search-row": "_search-row_nkk1l_117",
+	search: "_search_nkk1l_117",
+	options: "_options_nkk1l_138",
+	option: "_option_nkk1l_138",
+	checkbox: "_checkbox_nkk1l_166",
+	"no-results": "_no-results_nkk1l_181"
+};
+//#endregion
+export { e as default };

package/dist/node/native-select/native-select.js

@@ -0,0 +1,37 @@
+"use client";
+
+import e from "./native-select.module.js";
+import { cn as t } from "@cascivo/core";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region ../components/src/native-select/native-select.tsx
+function i({ options: i, children: a, size: o = "md", invalid: s, disabled: c, placeholder: l, value: u, defaultValue: d, className: f, ...p }) {
+	let m = u !== void 0, h = l !== void 0;
+	return /* @__PURE__ */ r("div", {
+		className: t(e.root, f),
+		"data-size": o,
+		"data-invalid": s || void 0,
+		children: [/* @__PURE__ */ r("select", {
+			className: e.select,
+			disabled: c,
+			"aria-invalid": s || void 0,
+			value: u,
+			defaultValue: !m && h ? d ?? "" : d,
+			...p,
+			children: [h && /* @__PURE__ */ n("option", {
+				value: "",
+				disabled: !0,
+				hidden: !0,
+				children: l
+			}), i ? i.map((e) => /* @__PURE__ */ n("option", {
+				value: e.value,
+				disabled: e.disabled,
+				children: e.label
+			}, e.value)) : a]
+		}), /* @__PURE__ */ n("span", {
+			className: e.chevron,
+			"aria-hidden": "true"
+		})]
+	});
+}
+//#endregion
+export { i as NativeSelect };

package/dist/node/native-select/native-select.module.js

@@ -0,0 +1,9 @@
+"use client";
+
+var e = {
+	root: "_root_1s4kv_2",
+	select: "_select_1s4kv_24",
+	chevron: "_chevron_1s4kv_66"
+};
+//#endregion
+export { e as default };