@cascivo/react 0.8.0 → 0.10.0

package/dist/node/segmented-control/segmented-control.js

@@ -0,0 +1,43 @@
+"use client";
+
+import e from "./segmented-control.module.js";
+import { cn as t } from "@cascivo/core";
+import { jsx as n } from "react/jsx-runtime";
+//#region ../components/src/segmented-control/segmented-control.tsx
+function r({ options: r, value: i, onValueChange: a, size: o = "md", disabled: s = !1, className: c, ...l }) {
+	function u(e, t) {
+		let n = r.filter((e) => !e.disabled), i = n.findIndex((e) => e.value === r[t]?.value);
+		if (e.key === "ArrowRight") {
+			e.preventDefault();
+			let t = n[(i + 1) % n.length];
+			t && a(t.value);
+		} else if (e.key === "ArrowLeft") {
+			e.preventDefault();
+			let t = n[(i - 1 + n.length) % n.length];
+			t && a(t.value);
+		}
+	}
+	return /* @__PURE__ */ n("div", {
+		role: "group",
+		className: t(e.wrapper, c),
+		"data-size": o,
+		"data-disabled": s ? "" : void 0,
+		...l,
+		children: r.map((t, r) => /* @__PURE__ */ n("button", {
+			type: "button",
+			role: "radio",
+			"aria-checked": t.value === i,
+			"data-selected": t.value === i ? "" : void 0,
+			"data-size": o,
+			className: e.segment,
+			disabled: s || t.disabled,
+			onClick: () => {
+				t.disabled || a(t.value);
+			},
+			onKeyDown: (e) => u(e, r),
+			children: t.label
+		}, t.value))
+	});
+}
+//#endregion
+export { r as SegmentedControl };

package/dist/node/segmented-control/segmented-control.module.js

@@ -0,0 +1,8 @@
+"use client";
+
+var e = {
+	wrapper: "_wrapper_196gt_2",
+	segment: "_segment_196gt_33"
+};
+//#endregion
+export { e as default };

package/dist/node/select/select.js

@@ -0,0 +1,71 @@
+"use client";
+
+import e from "./select.module.js";
+import { cn as t, createMachine as n, useMachine as r } from "@cascivo/core";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region ../components/src/select/select.tsx
+var o = n({
+	initial: "idle",
+	states: {
+		idle: { on: { FOCUS: "focused" } },
+		focused: { on: { BLUR: "idle" } }
+	}
+});
+function s({ label: n, hint: s, error: c, placeholder: l, options: u, size: d = "md", className: f, id: p, defaultValue: m, value: h, onFocus: g, onBlur: _, ...v }) {
+	let [y, b] = r(o), x = p ?? (n ? `cascade-select-${n.toLowerCase().replace(/\s+/g, "-")}` : void 0), S = h !== void 0, C = l !== void 0;
+	return /* @__PURE__ */ a("div", {
+		className: t(e.wrapper, f),
+		"data-state": c ? "error" : y.value,
+		"data-size": d,
+		children: [
+			n && /* @__PURE__ */ i("label", {
+				className: e.label,
+				htmlFor: x,
+				children: n
+			}),
+			/* @__PURE__ */ a("div", {
+				className: e.field,
+				children: [/* @__PURE__ */ a("select", {
+					id: x,
+					className: e.select,
+					"aria-invalid": c ? !0 : void 0,
+					"aria-describedby": c ? `${x}-error` : s ? `${x}-hint` : void 0,
+					value: h,
+					defaultValue: !S && C ? m ?? "" : m,
+					onFocus: (e) => {
+						b("FOCUS"), g?.(e);
+					},
+					onBlur: (e) => {
+						b("BLUR"), _?.(e);
+					},
+					...v,
+					children: [C && /* @__PURE__ */ i("option", {
+						value: "",
+						disabled: !0,
+						children: l
+					}), u.map((e) => /* @__PURE__ */ i("option", {
+						value: e.value,
+						disabled: e.disabled,
+						children: e.label
+					}, e.value))]
+				}), /* @__PURE__ */ i("span", {
+					className: e.chevron,
+					"aria-hidden": "true"
+				})]
+			}),
+			c && /* @__PURE__ */ i("span", {
+				id: `${x}-error`,
+				className: e.error,
+				role: "alert",
+				children: c
+			}),
+			!c && s && /* @__PURE__ */ i("span", {
+				id: `${x}-hint`,
+				className: e.hint,
+				children: s
+			})
+		]
+	});
+}
+//#endregion
+export { s as Select };

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

@@ -0,0 +1,13 @@
+"use client";
+
+var e = {
+	wrapper: "_wrapper_1b5d9_2",
+	label: "_label_1b5d9_24",
+	field: "_field_1b5d9_32",
+	select: "_select_1b5d9_37",
+	chevron: "_chevron_1b5d9_79",
+	error: "_error_1b5d9_92",
+	hint: "_hint_1b5d9_99"
+};
+//#endregion
+export { e as default };

package/dist/node/separator/separator.js

@@ -0,0 +1,21 @@
+"use client";
+
+import e from "./separator.module.js";
+import { cn as t } from "@cascivo/core";
+import { jsx as n } from "react/jsx-runtime";
+//#region ../components/src/separator/separator.tsx
+function r({ orientation: r = "horizontal", decorative: i = !1, className: a, ...o }) {
+	return r === "horizontal" && !i ? /* @__PURE__ */ n("hr", {
+		"data-orientation": "horizontal",
+		className: t(e.separator, a),
+		...o
+	}) : /* @__PURE__ */ n("div", {
+		role: i ? "none" : "separator",
+		"aria-orientation": i ? void 0 : r,
+		"data-orientation": r,
+		className: t(e.separator, a),
+		...o
+	});
+}
+//#endregion
+export { r as Separator };

package/dist/node/separator/separator.module.js

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

package/dist/node/sheet/sheet.js

@@ -0,0 +1,50 @@
+"use client";
+
+import e from "./sheet.module.js";
+import { useSignal as t, useSignalEffect 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 { useId as s, useRef as c } from "react";
+//#region ../components/src/sheet/sheet.tsx
+function l({ open: l, onClose: u, title: d, children: f, side: p = "end" }) {
+	let m = c(null), h = s(), g = t(l);
+	g.value = l;
+	let _ = c(u);
+	return _.current = u, n(() => {
+		let e = m.current;
+		if (e) if (g.value) try {
+			e.showPopover();
+		} catch {}
+		else try {
+			e.hidePopover();
+		} catch {}
+	}), /* @__PURE__ */ o("div", {
+		ref: m,
+		popover: "manual",
+		role: "dialog",
+		"aria-modal": "true",
+		"aria-labelledby": d == null ? void 0 : h,
+		"data-state": l ? "open" : "closed",
+		"data-side": p,
+		className: e.sheet,
+		children: [/* @__PURE__ */ o("div", {
+			className: e.header,
+			children: [d != null && /* @__PURE__ */ a("span", {
+				id: h,
+				className: e.title,
+				children: d
+			}), /* @__PURE__ */ a("button", {
+				type: "button",
+				"aria-label": i(r.sheet.close),
+				onClick: () => _.current(),
+				className: e.close,
+				children: "✕"
+			})]
+		}), /* @__PURE__ */ a("div", {
+			className: e.body,
+			children: f
+		})]
+	});
+}
+//#endregion
+export { l as Sheet };

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

@@ -0,0 +1,11 @@
+"use client";
+
+var e = {
+	sheet: "_sheet_18eks_2",
+	header: "_header_18eks_133",
+	title: "_title_18eks_142",
+	close: "_close_18eks_148",
+	body: "_body_18eks_176"
+};
+//#endregion
+export { e as default };

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

@@ -0,0 +1,166 @@
+"use client";
+
+import { usePopover as e } from "../popover/use-popover.js";
+import t from "./shell-header.module.js";
+import { cn as n, getLinkComponent 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";
+//#region ../components/src/shell-header/shell-header.tsx
+function d(e) {
+	return typeof e == "object" && !!e && "name" in e;
+}
+function f(e) {
+	return "items" in e;
+}
+function p({ item: n }) {
+	o();
+	let s = r(), { triggerRef: c, popoverRef: d, isOpen: f, anchorName: p, toggle: m, close: h } = e(), g = n.items.some((e) => e.active), _ = i(!1);
+	a(() => {
+		if (!_.value || !f.value) return;
+		_.value = !1;
+		let e = d.current;
+		e && e.querySelector("[role=\"menuitem\"]")?.focus();
+	});
+	function v(e) {
+		e.key === "ArrowDown" ? (e.preventDefault(), f.value ? d.current?.querySelector("[role=\"menuitem\"]")?.focus() : (_.value = !0, m())) : e.key === "Escape" && (e.preventDefault(), h());
+	}
+	function y(e) {
+		let t = Array.from(d.current?.querySelectorAll("[role=\"menuitem\"]") ?? []), n = t.indexOf(document.activeElement);
+		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 === "Escape" && (h(), c.current?.focus());
+	}
+	return /* @__PURE__ */ u("li", {
+		className: t.navMenuWrapper,
+		children: [/* @__PURE__ */ u("button", {
+			ref: c,
+			type: "button",
+			"aria-haspopup": "menu",
+			"aria-expanded": f.value,
+			"data-state": g ? "active" : void 0,
+			style: { anchorName: p },
+			className: t.navMenuTrigger,
+			onClick: m,
+			onKeyDown: v,
+			children: [n.label, /* @__PURE__ */ l("svg", {
+				viewBox: "0 0 16 16",
+				width: "12",
+				height: "12",
+				"aria-hidden": "true",
+				className: t.chevron,
+				children: /* @__PURE__ */ l("path", {
+					d: "M4 6l4 4 4-4",
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: "1.5",
+					strokeLinecap: "round",
+					strokeLinejoin: "round"
+				})
+			})]
+		}), /* @__PURE__ */ l("div", {
+			ref: d,
+			popover: "auto",
+			role: "menu",
+			"aria-label": n.label,
+			"data-state": f.value ? "open" : "closed",
+			style: { positionAnchor: p },
+			className: t.navMenuPanel,
+			onKeyDown: y,
+			children: n.items.map((e, n) => /* @__PURE__ */ l(s, {
+				href: e.href,
+				role: "menuitem",
+				"aria-current": e.active ? "page" : void 0,
+				"data-state": e.active ? "active" : void 0,
+				className: t.navMenuItem,
+				onClick: h,
+				children: e.label
+			}, e.id ?? `${n}-${e.href}`))
+		})]
+	});
+}
+function m({ brand: e, nav: i, actions: a, end: m, onMenuClick: h, menuExpanded: g, skipToContentHref: _ = "#cascade-main", labels: v, className: y }) {
+	o();
+	let b = r(), x = v?.nav ?? c(s.shellHeader.nav), S = g ? v?.closeMenu ?? c(s.shellHeader.closeMenu) : v?.openMenu ?? c(s.shellHeader.openMenu);
+	return /* @__PURE__ */ u("header", {
+		role: "banner",
+		className: n(t.header, y),
+		children: [
+			_ !== !1 && /* @__PURE__ */ l("a", {
+				href: _,
+				className: t.skipLink,
+				children: v?.skipToContent ?? c(s.shellHeader.skipToContent)
+			}),
+			h && /* @__PURE__ */ l("button", {
+				type: "button",
+				"aria-label": S,
+				"aria-expanded": g ?? !1,
+				className: t.menuButton,
+				onClick: h,
+				children: /* @__PURE__ */ l("svg", {
+					viewBox: "0 0 16 16",
+					width: "16",
+					height: "16",
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ l("path", {
+						d: "M2 4h12M2 8h12M2 12h12",
+						stroke: "currentColor",
+						strokeWidth: "1.5",
+						strokeLinecap: "round"
+					})
+				})
+			}),
+			e != null && (d(e) ? /* @__PURE__ */ u(b, {
+				href: e.href ?? "/",
+				"aria-label": [e.prefix, e.name].filter(Boolean).join(" "),
+				className: t.brand,
+				children: [e.prefix && /* @__PURE__ */ l("span", {
+					className: t.brandPrefix,
+					children: e.prefix
+				}), /* @__PURE__ */ l("span", {
+					className: t.brandName,
+					children: e.name
+				})]
+			}) : /* @__PURE__ */ l("div", {
+				className: t.brand,
+				children: e
+			})),
+			i && i.length > 0 && /* @__PURE__ */ l("nav", {
+				"aria-label": x,
+				className: t.nav,
+				children: /* @__PURE__ */ l("ul", {
+					className: t.navList,
+					children: i.map((e, n) => f(e) ? /* @__PURE__ */ l(p, { item: e }, e.id ?? `${n}-${e.label}`) : /* @__PURE__ */ l("li", { children: /* @__PURE__ */ l(b, {
+						href: e.href,
+						"aria-current": e.active ? "page" : void 0,
+						"data-state": e.active ? "active" : void 0,
+						className: t.navLink,
+						...e.onClick ? { onClick: e.onClick } : {},
+						children: e.label
+					}) }, e.id ?? `${n}-${e.href}`))
+				})
+			}),
+			/* @__PURE__ */ l("div", { className: t.spacer }),
+			a && a.length > 0 && /* @__PURE__ */ l("div", {
+				className: t.actions,
+				children: a.map((e) => /* @__PURE__ */ l("button", {
+					type: "button",
+					"aria-label": e.label,
+					"aria-pressed": e.active ?? !1,
+					title: e.label,
+					"data-state": e.active ? "active" : void 0,
+					className: t.action,
+					onClick: e.onClick,
+					children: /* @__PURE__ */ l("span", {
+						className: t.actionIcon,
+						"aria-hidden": "true",
+						children: e.icon
+					})
+				}, e.id))
+			}),
+			m && /* @__PURE__ */ l("div", {
+				className: t.end,
+				children: m
+			})
+		]
+	});
+}
+//#endregion
+export { m as ShellHeader };

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

@@ -0,0 +1,25 @@
+"use client";
+
+var e = {
+	header: "_header_80jhs_2",
+	skipLink: "_skipLink_80jhs_14",
+	menuButton: "_menuButton_80jhs_36",
+	brand: "_brand_80jhs_59",
+	brandPrefix: "_brandPrefix_80jhs_69",
+	brandName: "_brandName_80jhs_73",
+	nav: "_nav_80jhs_77",
+	navList: "_navList_80jhs_81",
+	navLink: "_navLink_80jhs_90",
+	navMenuWrapper: "_navMenuWrapper_80jhs_119",
+	navMenuTrigger: "_navMenuTrigger_80jhs_124",
+	chevron: "_chevron_80jhs_156",
+	navMenuPanel: "_navMenuPanel_80jhs_164",
+	navMenuItem: "_navMenuItem_80jhs_197",
+	spacer: "_spacer_80jhs_219",
+	actions: "_actions_80jhs_223",
+	action: "_action_80jhs_223",
+	actionIcon: "_actionIcon_80jhs_257",
+	end: "_end_80jhs_265"
+};
+//#endregion
+export { e as default };