@cascivo/react 0.8.0 → 0.10.0

package/dist/node/alert-dialog/alert-dialog.js

@@ -0,0 +1,68 @@
+"use client";
+
+import e from "./alert-dialog.module.js";
+import { useId as t, useSignal as n, useSignalEffect as r } from "@cascivo/core";
+import { builtin as i, t as a } from "@cascivo/i18n";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { useRef as c } from "react";
+//#region ../components/src/alert-dialog/alert-dialog.tsx
+function l({ open: l, title: u, description: d, onConfirm: f, onCancel: p, labels: m, variant: h = "default" }) {
+	let g = c(null), _ = t("cascivo-alert-dialog-title"), v = t("cascivo-alert-dialog-desc"), y = n(l);
+	y.value = l;
+	let b = c(null), x = c(p);
+	x.current = p;
+	let S = c(f);
+	return S.current = f, r(() => {
+		let e = g.current;
+		if (e) if (y.value) {
+			try {
+				e.showPopover();
+			} catch {}
+			requestAnimationFrame(() => b.current?.focus());
+		} else try {
+			e.hidePopover();
+		} catch {}
+	}), /* @__PURE__ */ o("div", {
+		ref: g,
+		popover: "manual",
+		role: "alertdialog",
+		"aria-modal": "true",
+		"aria-labelledby": _,
+		"aria-describedby": v,
+		"data-state": l ? "open" : "closed",
+		"data-variant": h,
+		className: e.dialog,
+		children: /* @__PURE__ */ s("div", {
+			className: e.content,
+			children: [
+				/* @__PURE__ */ o("p", {
+					id: _,
+					className: e.title,
+					children: u
+				}),
+				/* @__PURE__ */ o("p", {
+					id: v,
+					className: e.description,
+					children: d
+				}),
+				/* @__PURE__ */ s("div", {
+					className: e.actions,
+					children: [/* @__PURE__ */ o("button", {
+						ref: b,
+						type: "button",
+						className: e.cancel,
+						onClick: () => x.current(),
+						children: m?.cancel ?? a(i.alertDialog.cancel)
+					}), /* @__PURE__ */ o("button", {
+						type: "button",
+						className: e.confirm,
+						onClick: () => S.current(),
+						children: m?.confirm ?? a(i.alertDialog.confirm)
+					})]
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { l as AlertDialog };

package/dist/node/alert-dialog/alert-dialog.module.js

@@ -0,0 +1,13 @@
+"use client";
+
+var e = {
+	dialog: "_dialog_1net6_2",
+	content: "_content_1net6_58",
+	title: "_title_1net6_71",
+	description: "_description_1net6_78",
+	actions: "_actions_1net6_84",
+	cancel: "_cancel_1net6_123",
+	confirm: "_confirm_1net6_124"
+};
+//#endregion
+export { e as default };

package/dist/node/app-shell/app-shell.js

@@ -0,0 +1,80 @@
+"use client";
+
+import e from "./app-shell.module.js";
+import { cn as t, useSignal as n, useSignalEffect as r, useSignals as i } from "@cascivo/core";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+import { cloneElement as c, isValidElement as l, useRef as u } from "react";
+//#region ../components/src/app-shell/app-shell.tsx
+function d({ header: d, nav: f, children: p, footer: m, open: h, defaultOpen: g, onOpenChange: _, className: v }) {
+	i();
+	let y = h !== void 0, b = n(h ?? g ?? !0);
+	y && (b.value = h);
+	let x = u(null), S = u(null);
+	function C(e) {
+		y || (b.value = e), _?.(e);
+	}
+	function w() {
+		typeof document < "u" && (S.current = document.activeElement), C(!b.value);
+	}
+	r(() => {
+		y || g !== void 0 || typeof window > "u" || typeof window.matchMedia != "function" || window.matchMedia("(max-width: 63.999rem)").matches && (b.value = !1);
+	}), r(() => {
+		if (!b.value || typeof document > "u") return;
+		let e = (e) => {
+			e.key === "Escape" && C(!1);
+		};
+		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+	}), r(() => {
+		let e = x.current;
+		if (e) if (b.value) e.removeAttribute("inert");
+		else {
+			e.setAttribute("inert", "");
+			let t = S.current;
+			t && e.contains(document.activeElement) && t.focus();
+		}
+	});
+	let T = l(d) && f ? c(d, {
+		onMenuClick: w,
+		menuExpanded: b.value
+	}) : d;
+	return /* @__PURE__ */ s("div", {
+		className: t(e.shell, v),
+		"data-open": b.value,
+		children: [
+			/* @__PURE__ */ o("div", {
+				className: e.header,
+				children: T
+			}),
+			/* @__PURE__ */ s("div", {
+				className: e.body,
+				children: [f && /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o("div", {
+					ref: x,
+					className: e.navWrapper,
+					"data-open": b.value,
+					"data-testid": "app-shell-nav",
+					children: /* @__PURE__ */ o("div", {
+						className: e.navInner,
+						children: f
+					})
+				}), /* @__PURE__ */ o("div", {
+					className: e.scrim,
+					"data-open": b.value,
+					"data-testid": "app-shell-scrim",
+					"aria-hidden": "true",
+					onClick: () => C(!1)
+				})] }), /* @__PURE__ */ o("main", {
+					id: "cascade-main",
+					tabIndex: -1,
+					className: e.main,
+					children: p
+				})]
+			}),
+			m && /* @__PURE__ */ o("div", {
+				className: e.footer,
+				children: m
+			})
+		]
+	});
+}
+//#endregion
+export { d as AppShell };

package/dist/node/app-shell/app-shell.module.js

@@ -0,0 +1,14 @@
+"use client";
+
+var e = {
+	shell: "_shell_11je2_4",
+	header: "_header_11je2_16",
+	body: "_body_11je2_21",
+	navWrapper: "_navWrapper_11je2_32",
+	navInner: "_navInner_11je2_58",
+	scrim: "_scrim_11je2_70",
+	main: "_main_11je2_87",
+	footer: "_footer_11je2_93"
+};
+//#endregion
+export { e as default };

package/dist/node/aspect-ratio/aspect-ratio.js

@@ -0,0 +1,22 @@
+"use client";
+
+import e from "./aspect-ratio.module.js";
+import { cn as t } from "@cascivo/core";
+import { jsx as n } from "react/jsx-runtime";
+//#region ../components/src/aspect-ratio/aspect-ratio.tsx
+function r({ ratio: r = 16 / 9, className: i, style: a, children: o, ...s }) {
+	return /* @__PURE__ */ n("div", {
+		className: t(e.root, i),
+		style: {
+			"--cascivo-aspect-ratio": r,
+			...a
+		},
+		...s,
+		children: /* @__PURE__ */ n("div", {
+			className: e.inner,
+			children: o
+		})
+	});
+}
+//#endregion
+export { r as AspectRatio };

package/dist/node/aspect-ratio/aspect-ratio.module.js

@@ -0,0 +1,8 @@
+"use client";
+
+var e = {
+	root: "_root_5ltw4_2",
+	inner: "_inner_5ltw4_8"
+};
+//#endregion
+export { e as default };

package/dist/node/avatar/avatar.js

@@ -0,0 +1,57 @@
+"use client";
+
+import e from "./avatar.module.js";
+import { cn as t, createMachine as n, useMachine as r, useSignals as i } from "@cascivo/core";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region ../components/src/avatar/avatar.tsx
+var s = n({
+	initial: "loading",
+	states: {
+		loading: { on: {
+			LOADED: "loaded",
+			ERROR: "error"
+		} },
+		loaded: {},
+		error: {}
+	}
+});
+function c({ src: n, alt: c = "", name: u, fallback: d, size: f = "md", status: p, className: m, ...h }) {
+	i();
+	let [g, _] = r(s), v = !!n && g.value !== "error", y = d ?? l(u), b = c || u || d;
+	return /* @__PURE__ */ o("span", {
+		"data-size": f,
+		"data-status": p,
+		className: t(e.avatar, m),
+		role: v || !b ? void 0 : "img",
+		"aria-label": v ? void 0 : b || void 0,
+		...h,
+		children: [v ? /* @__PURE__ */ a("img", {
+			className: e.image,
+			src: n,
+			alt: c || u || "",
+			onLoad: () => _("LOADED"),
+			onError: () => _("ERROR")
+		}) : /* @__PURE__ */ a("span", {
+			className: e.fallback,
+			"aria-hidden": "true",
+			children: y
+		}), p && /* @__PURE__ */ a("span", {
+			className: e.status,
+			"aria-hidden": "true"
+		})]
+	});
+}
+function l(e) {
+	if (!e) return;
+	let t = e.trim().split(/\s+/).filter(Boolean);
+	if (t.length !== 0) return (u(t[0]) + (t.length > 1 ? u(t[t.length - 1]) : "")).toLocaleUpperCase() || void 0;
+}
+function u(e) {
+	if (typeof Intl < "u" && "Segmenter" in Intl) {
+		let t = new Intl.Segmenter(void 0, { granularity: "grapheme" });
+		for (let n of t.segment(e)) return n.segment;
+	}
+	return [...e][0] ?? "";
+}
+//#endregion
+export { c as Avatar };

package/dist/node/avatar/avatar.module.js

@@ -0,0 +1,10 @@
+"use client";
+
+var e = {
+	avatar: "_avatar_18xp4_2",
+	image: "_image_18xp4_43",
+	fallback: "_fallback_18xp4_50",
+	status: "_status_18xp4_55"
+};
+//#endregion
+export { e as default };

package/dist/node/avatar-group/avatar-group.js

@@ -0,0 +1,26 @@
+"use client";
+
+import { Avatar as e } from "../avatar/avatar.js";
+import t from "./avatar-group.module.js";
+import { cn as n } from "@cascivo/core";
+import { builtin as r, t as i } from "@cascivo/i18n";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { Children as s } from "react";
+//#region ../components/src/avatar-group/avatar-group.tsx
+function c({ max: c, total: l, spacing: u = "md", isGrid: d = !1, labels: f, className: p, children: m, ...h }) {
+	let g = s.toArray(m), _ = c == null ? g : g.slice(0, c), v = (l ?? g.length) - _.length, y = f?.more?.(v) ?? i(r.avatarGroup.more, { count: v });
+	return /* @__PURE__ */ o("div", {
+		role: "group",
+		"data-spacing": u,
+		"data-grid": d || void 0,
+		className: n(t.group, p),
+		...h,
+		children: [_, v > 0 && /* @__PURE__ */ a(e, {
+			className: t.overflow,
+			fallback: `+${v}`,
+			"aria-label": y
+		})]
+	});
+}
+//#endregion
+export { c as AvatarGroup };

package/dist/node/avatar-group/avatar-group.module.js

@@ -0,0 +1,8 @@
+"use client";
+
+var e = {
+	group: "_group_il139_2",
+	overflow: "_overflow_il139_34"
+};
+//#endregion
+export { e as default };

package/dist/node/badge/badge.js

@@ -0,0 +1,17 @@
+"use client";
+
+import e from "./badge.module.js";
+import { cn as t } from "@cascivo/core";
+import { jsx as n } from "react/jsx-runtime";
+//#region ../components/src/badge/badge.tsx
+function r({ variant: r = "default", size: i = "md", className: a, children: o, ...s }) {
+	return /* @__PURE__ */ n("span", {
+		"data-variant": r,
+		"data-size": i,
+		className: t(e.badge, a),
+		...s,
+		children: o
+	});
+}
+//#endregion
+export { r as Badge };

package/dist/node/badge/badge.module.js

@@ -0,0 +1,5 @@
+"use client";
+
+var e = { badge: "_badge_beiqa_2" };
+//#endregion
+export { e as default };

package/dist/node/blockquote/blockquote.js

@@ -0,0 +1,18 @@
+"use client";
+
+import e from "./blockquote.module.js";
+import { cn as t } from "@cascivo/core";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region ../components/src/blockquote/blockquote.tsx
+function i({ cite: i, className: a, children: o, ...s }) {
+	return /* @__PURE__ */ r("blockquote", {
+		className: t(e.blockquote, a),
+		...s,
+		children: [o, i ? /* @__PURE__ */ n("footer", {
+			className: e.footer,
+			children: /* @__PURE__ */ n("cite", { children: i })
+		}) : null]
+	});
+}
+//#endregion
+export { i as Blockquote };

package/dist/node/blockquote/blockquote.module.js

@@ -0,0 +1,8 @@
+"use client";
+
+var e = {
+	blockquote: "_blockquote_ja266_2",
+	footer: "_footer_ja266_12"
+};
+//#endregion
+export { e as default };

package/dist/node/bottom-sheet/bottom-sheet.js

@@ -0,0 +1,111 @@
+"use client";
+
+import e from "./bottom-sheet.module.js";
+import { DismissableLayer as t, FocusScope as n, Portal as r, Presence as i, cn as a, useControllableSignal as o, useDraggable as s, useScrollLock as c, useSignals as l } from "@cascivo/core";
+import { builtin as u, t as d } from "@cascivo/i18n";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { useId as m } from "react";
+//#region ../components/src/bottom-sheet/bottom-sheet.tsx
+var h = 120, g = .6, _ = .1, v = [.5, .92];
+function y({ open: y, defaultOpen: b, onOpenChange: x, snapPoints: S = v, activeSnap: C, defaultSnap: w = 0, onSnapChange: T, title: E, description: D, children: O, labels: k, className: A }) {
+	l();
+	let [j, M] = o({
+		value: y,
+		defaultValue: b ?? !1,
+		onChange: x
+	}), [N, P] = o({
+		value: C,
+		defaultValue: w,
+		onChange: T
+	});
+	c(j);
+	let F = S, I = F[F.length - 1] ?? 1, L = F[0] ?? 0, R = F[Math.min(N.value, F.length - 1)] ?? I, { handleRef: z, offset: B, velocity: V, isDragging: H, reset: U } = s({
+		axis: "y",
+		onDragEnd: (e) => {
+			let t = typeof window > "u" ? 0 : window.innerHeight, n = V.value.y;
+			if (U(), t === 0) return;
+			let r = R - e.y / t - n * h / t;
+			if (n > g || r < L - _) {
+				M(!1);
+				return;
+			}
+			let i = 0;
+			for (let e = 1; e < F.length; e++) Math.abs((F[e] ?? 0) - r) < Math.abs((F[i] ?? 0) - r) && (i = e);
+			P(i);
+		}
+	}), W = m(), G = m(), K = k?.close ?? d(u.bottomSheet.close), q = k?.handle ?? d(u.bottomSheet.handle), J = `${(1 - R / I) * 100}%`, Y = {
+		"--_sheet-height": `${I * 100}dvh`,
+		"--_sheet-y": J,
+		"--_sheet-drag": `${B.value.y}px`
+	};
+	return /* @__PURE__ */ f(r, { children: /* @__PURE__ */ f(i, {
+		present: j,
+		children: /* @__PURE__ */ f("div", {
+			className: e.overlay,
+			children: /* @__PURE__ */ f(t, {
+				onDismiss: () => M(!1),
+				children: /* @__PURE__ */ f(n, {
+					trapped: !0,
+					restoreFocus: !0,
+					autoFocus: !0,
+					children: /* @__PURE__ */ p("div", {
+						role: "dialog",
+						"aria-modal": "true",
+						"aria-labelledby": E ? W : void 0,
+						"aria-describedby": D ? G : void 0,
+						"data-dragging": H.value ? "" : void 0,
+						className: a(e.panel, A),
+						style: Y,
+						children: [/* @__PURE__ */ p("div", {
+							className: e.header,
+							ref: z,
+							children: [
+								/* @__PURE__ */ f("div", {
+									className: e.handle,
+									role: "separator",
+									"aria-label": q,
+									"aria-orientation": "horizontal"
+								}),
+								(E || D) && /* @__PURE__ */ p("div", {
+									className: e.heading,
+									children: [E && /* @__PURE__ */ f("h2", {
+										id: W,
+										className: e.title,
+										children: E
+									}), D && /* @__PURE__ */ f("p", {
+										id: G,
+										className: e.description,
+										children: D
+									})]
+								}),
+								/* @__PURE__ */ f("button", {
+									type: "button",
+									"aria-label": K,
+									onClick: () => M(!1),
+									className: e.close,
+									children: /* @__PURE__ */ f("svg", {
+										"aria-hidden": "true",
+										viewBox: "0 0 16 16",
+										className: e.closeIcon,
+										children: /* @__PURE__ */ f("path", {
+											d: "M4 4l8 8M12 4l-8 8",
+											fill: "none",
+											stroke: "currentColor",
+											strokeWidth: "1.5",
+											strokeLinecap: "round"
+										})
+									})
+								})
+							]
+						}), /* @__PURE__ */ f("div", {
+							className: e.body,
+							children: O
+						})]
+					})
+				})
+			})
+		})
+	}) });
+}
+//#endregion
+export { y as BottomSheet };

package/dist/node/bottom-sheet/bottom-sheet.module.js

@@ -0,0 +1,16 @@
+"use client";
+
+var e = {
+	overlay: "_overlay_k9sg5_2",
+	panel: "_panel_k9sg5_25",
+	header: "_header_k9sg5_59",
+	handle: "_handle_k9sg5_77",
+	heading: "_heading_k9sg5_87",
+	title: "_title_k9sg5_93",
+	description: "_description_k9sg5_100",
+	close: "_close_k9sg5_106",
+	closeIcon: "_closeIcon_k9sg5_140",
+	body: "_body_k9sg5_145"
+};
+//#endregion
+export { e as default };

package/dist/node/breadcrumb/breadcrumb.js

@@ -0,0 +1,28 @@
+"use client";
+
+import e from "./breadcrumb.module.js";
+import { cn as t, getLinkComponent as n, useSignals as r } from "@cascivo/core";
+import { builtin as i, t as a } from "@cascivo/i18n";
+import { jsx as o } from "react/jsx-runtime";
+//#region ../components/src/breadcrumb/breadcrumb.tsx
+function s({ items: s, maxVisible: c, className: l, ariaLabel: u }) {
+	r();
+	let d = n(), f = u ?? a(i.breadcrumb.nav), p = s, m = s[0];
+	return m !== void 0 && c !== void 0 && s.length > c && (p = [
+		m,
+		{ label: "…" },
+		...s.slice(s.length - (c - 2))
+	]), /* @__PURE__ */ o("nav", {
+		"aria-label": f,
+		className: t(e.breadcrumb, l),
+		children: /* @__PURE__ */ o("ol", { children: p.map((e, t) => /* @__PURE__ */ o("li", { children: t === p.length - 1 ? /* @__PURE__ */ o("span", {
+			"aria-current": "page",
+			children: e.label
+		}) : e.href === void 0 ? /* @__PURE__ */ o("span", { children: e.label }) : /* @__PURE__ */ o(d, {
+			href: e.href,
+			children: e.label
+		}) }, `${t}-${e.label}`)) })
+	});
+}
+//#endregion
+export { s as Breadcrumb };

package/dist/node/breadcrumb/breadcrumb.module.js

@@ -0,0 +1,5 @@
+"use client";
+
+var e = { breadcrumb: "_breadcrumb_1c3dy_2" };
+//#endregion
+export { e as default };

package/dist/node/button/button.js

@@ -0,0 +1,31 @@
+"use client";
+
+import { Spinner as e } from "../spinner/spinner.js";
+import t from "./button.module.js";
+import { Slot as n, cn as r } from "@cascivo/core";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region ../components/src/button/button.tsx
+function o({ variant: o = "primary", size: s = "md", loading: c = !1, asChild: l = !1, className: u, disabled: d, children: f, ...p }) {
+	let m = {
+		"data-variant": o,
+		"data-size": s,
+		"data-state": c ? "loading" : "idle",
+		"aria-busy": c || void 0,
+		className: r(t.button, u)
+	};
+	return l ? /* @__PURE__ */ i(n, {
+		...m,
+		...p,
+		children: f
+	}) : /* @__PURE__ */ a("button", {
+		...m,
+		disabled: d || c,
+		...p,
+		children: [c && /* @__PURE__ */ i(e, {
+			size: "sm",
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ i("span", { children: f })]
+	});
+}
+//#endregion
+export { o as Button };

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

@@ -0,0 +1,5 @@
+"use client";
+
+var e = { button: "_button_11p57_2" };
+//#endregion
+export { e as default };

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

@@ -0,0 +1,39 @@
+"use client";
+
+import e from "./button-group.module.js";
+import { cn as t } from "@cascivo/core";
+import { jsx as n } from "react/jsx-runtime";
+import { forwardRef as r } from "react";
+//#region ../components/src/button-group/button-group.tsx
+function i(e) {
+	return Array.from(e.querySelectorAll("button, a[href], [tabindex]")).filter((e) => !e.hasAttribute("disabled") && e.getAttribute("aria-disabled") !== "true");
+}
+var a = r(function({ orientation: r = "horizontal", size: a = "md", roving: o = !1, loop: s = !1, className: c, onKeyDown: l, children: u, ...d }, f) {
+	return /* @__PURE__ */ n("div", {
+		role: "group",
+		"data-orientation": r,
+		"data-size": a,
+		className: t(e.buttonGroup, c),
+		ref: f,
+		onKeyDown: (e) => {
+			if (l?.(e), !o) return;
+			let t = r === "horizontal", n = t ? "ArrowRight" : "ArrowDown", a = t ? "ArrowLeft" : "ArrowUp";
+			if (![
+				n,
+				a,
+				"Home",
+				"End"
+			].includes(e.key)) return;
+			let c = i(e.currentTarget);
+			if (c.length === 0) return;
+			let u = c.indexOf(document.activeElement);
+			if (u === -1) return;
+			let d = u;
+			e.key === n ? d = u + 1 : e.key === a ? d = u - 1 : e.key === "Home" ? d = 0 : e.key === "End" && (d = c.length - 1), d < 0 && (d = s ? c.length - 1 : 0), d >= c.length && (d = s ? 0 : c.length - 1), e.preventDefault(), c[d]?.focus();
+		},
+		...d,
+		children: u
+	});
+});
+//#endregion
+export { a as ButtonGroup };

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

@@ -0,0 +1,5 @@
+"use client";
+
+var e = { buttonGroup: "_buttonGroup_3e81x_2" };
+//#endregion
+export { e as default };