@cascivo/react 0.8.0 → 0.10.0

package/dist/node/fab/fab.js

@@ -0,0 +1,93 @@
+"use client";
+
+import e from "./fab.module.js";
+import { DismissableLayer as t, Presence as n, cn as r, useControllableSignal as i, useRovingFocus as a, useSignalEffect as o, useSignals as s } from "@cascivo/core";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { useId as u, useRef as d } from "react";
+//#region ../components/src/fab/fab.tsx
+function f({ children: f, label: p, onClick: m, actions: h, position: g = "bottom-end", open: _, defaultOpen: v, onOpenChange: y, className: b }) {
+	s();
+	let x = h != null && h.length > 0, [S, C] = i({
+		value: _,
+		defaultValue: v ?? !1,
+		onChange: y
+	}), w = a({
+		orientation: "vertical",
+		loop: !0
+	}), T = d(null), E = d(null), D = u(), O = d(!1);
+	o(() => {
+		let e = x && S.value;
+		e && !O.current ? E.current?.querySelector("[role=\"menuitem\"]:not([aria-disabled=\"true\"])")?.focus() : !e && O.current && T.current?.focus(), O.current = e;
+	});
+	let k = (e) => {
+		e.disabled || (e.onSelect(), C(!1));
+	}, A = /* @__PURE__ */ c("button", {
+		ref: T,
+		type: "button",
+		"aria-label": p,
+		className: e.fab,
+		...x ? {
+			"aria-haspopup": "menu",
+			"aria-expanded": S.value,
+			"aria-controls": D,
+			"data-state": S.value ? "open" : "closed",
+			onClick: () => C(!S.value)
+		} : { onClick: m },
+		children: /* @__PURE__ */ c("span", {
+			className: e.icon,
+			"aria-hidden": "true",
+			children: f
+		})
+	});
+	return x ? /* @__PURE__ */ c(t, {
+		onDismiss: () => C(!1),
+		escapeDismisses: S.value,
+		disableOutsidePointer: !S.value,
+		children: /* @__PURE__ */ l("div", {
+			className: r(e.root, b),
+			"data-position": g,
+			children: [/* @__PURE__ */ c(n, {
+				present: S,
+				children: /* @__PURE__ */ c("menu", {
+					ref: E,
+					id: D,
+					role: "menu",
+					"aria-label": p,
+					className: e.dial,
+					children: h.map((t, n) => {
+						let r = w.getItemProps(n);
+						return /* @__PURE__ */ c("li", {
+							role: "presentation",
+							className: e.dialItem,
+							children: /* @__PURE__ */ l("button", {
+								ref: r.ref,
+								type: "button",
+								role: "menuitem",
+								tabIndex: r.tabIndex,
+								"aria-disabled": t.disabled || void 0,
+								className: e.action,
+								onKeyDown: r.onKeyDown,
+								onFocus: r.onFocus,
+								onClick: () => k(t),
+								children: [/* @__PURE__ */ c("span", {
+									className: e.actionLabel,
+									children: t.label
+								}), /* @__PURE__ */ c("span", {
+									className: e.actionIcon,
+									"aria-hidden": "true",
+									children: t.icon
+								})]
+							})
+						}, t.id ?? n);
+					})
+				})
+			}), A]
+		})
+	}) : /* @__PURE__ */ c("div", {
+		className: r(e.root, b),
+		"data-position": g,
+		children: A
+	});
+}
+//#endregion
+export { f as Fab };

package/dist/node/fab/fab.module.js

@@ -0,0 +1,14 @@
+"use client";
+
+var e = {
+	root: "_root_142gl_2",
+	fab: "_fab_142gl_21",
+	icon: "_icon_142gl_48",
+	dial: "_dial_142gl_60",
+	dialItem: "_dialItem_142gl_91",
+	action: "_action_142gl_95",
+	actionLabel: "_actionLabel_142gl_129",
+	actionIcon: "_actionIcon_142gl_134"
+};
+//#endregion
+export { e as default };

package/dist/node/field/field.js

@@ -0,0 +1,48 @@
+"use client";
+
+import { Label as e } from "../label/label.js";
+import t from "./field.module.js";
+import { cn as n, useId as r } from "@cascivo/core";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { Children as o, cloneElement as s, isValidElement as c } from "react";
+//#region ../components/src/field/field.tsx
+var l = /* @__PURE__ */ new Set();
+function u() {
+	return globalThis.process?.env?.NODE_ENV !== "production";
+}
+function d(e, t) {
+	if (!u() || e == null || t.props.label == null) return;
+	let n = String(e);
+	l.has(n) || (l.add(n), console.warn(`cascivo Field: both the Field and its child control define a \`label\` (${n}). Omit the child's \`label\` inside a Field — it renders a second <label> for the same control. The Field owns the label.`));
+}
+function f({ label: l, description: u, error: f, required: p = !1, disabled: m = !1, id: h, children: g, className: _ }) {
+	let v = r("cascade-field"), y = h ?? v, b = `${y}-description`, x = `${y}-error`, S = [u ? b : null, f ? x : null].filter(Boolean).join(" ") || void 0, C = { id: y };
+	S && (C["aria-describedby"] = S), f && (C["aria-invalid"] = !0), (m || g.props.disabled) && (C.disabled = !0), c(g) && d(l, g);
+	let w = c(g) ? s(o.only(g), C) : g;
+	return /* @__PURE__ */ a("div", {
+		className: n(t.field, _),
+		"data-disabled": m ? "" : void 0,
+		children: [
+			l && /* @__PURE__ */ i(e, {
+				htmlFor: y,
+				required: p,
+				disabled: m,
+				children: l
+			}),
+			w,
+			u && /* @__PURE__ */ i("p", {
+				id: b,
+				className: t.description,
+				children: u
+			}),
+			f && /* @__PURE__ */ i("p", {
+				id: x,
+				role: "alert",
+				className: t.error,
+				children: f
+			})
+		]
+	});
+}
+//#endregion
+export { f as Field };

package/dist/node/field/field.module.js

@@ -0,0 +1,9 @@
+"use client";
+
+var e = {
+	field: "_field_ws86v_2",
+	description: "_description_ws86v_12",
+	error: "_error_ws86v_19"
+};
+//#endregion
+export { e as default };

package/dist/node/file-uploader/file-uploader.js

@@ -0,0 +1,122 @@
+"use client";
+
+import { Spinner as e } from "../spinner/spinner.js";
+import t from "./file-uploader.module.js";
+import { cn as n, useSignal as r, useSignals as i } from "@cascivo/core";
+import { builtin as a, t as o } from "@cascivo/i18n";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { useRef as l } from "react";
+//#region ../components/src/file-uploader/file-uploader.tsx
+function u(e, t) {
+	let n = t.split(",").map((e) => e.trim()).filter(Boolean);
+	return n.length === 0 ? !0 : n.some((t) => t.startsWith(".") ? e.name.toLowerCase().endsWith(t.toLowerCase()) : t.endsWith("/*") ? e.type.startsWith(t.slice(0, -1)) : e.type === t);
+}
+function d(e) {
+	return e >= 1024 * 1024 ? `${(e / (1024 * 1024)).toFixed(1)} MB` : e >= 1024 ? `${(e / 1024).toFixed(1)} KB` : `${e} B`;
+}
+function f({ files: f = [], onFilesAdded: p, onRemove: m, multiple: h = !1, accept: g, maxSize: _, onRejected: v, label: y, hint: b, labels: x, disabled: S = !1, className: C }) {
+	i();
+	let w = l(null), T = r(!1), E = y ?? x?.label ?? o(a.fileUploader.label), D = x?.drop ?? o(a.fileUploader.drop), O = x?.uploading ?? o(a.fileUploader.uploading), k = x?.complete ?? o(a.fileUploader.complete), A = x?.error ?? o(a.fileUploader.error), j = (e) => x?.remove ? x.remove.replace("{name}", e) : o(a.fileUploader.remove, { name: e }), M = `cascade-uploader-${E.toLowerCase().replace(/\s+/g, "-")}`, N = `${M}-label`, P = `${M}-hint`, F = (e) => {
+		if (!e || e.length === 0) return;
+		let t = h ? Array.from(e) : Array.from(e).slice(0, 1), n = [], r = [], i = [];
+		for (let e of t) g && !u(e, g) ? r.push(e) : _ !== void 0 && e.size > _ ? i.push(e) : n.push(e);
+		r.length > 0 && v?.(r, "type"), i.length > 0 && v?.(i, "size"), n.length > 0 && p?.(n);
+	};
+	return /* @__PURE__ */ c("div", {
+		className: n(t.uploader, C),
+		children: [
+			/* @__PURE__ */ s("span", {
+				id: N,
+				className: t.label,
+				children: E
+			}),
+			/* @__PURE__ */ s("input", {
+				ref: w,
+				type: "file",
+				className: t.input,
+				tabIndex: -1,
+				"aria-hidden": "true",
+				multiple: h,
+				accept: g,
+				disabled: S,
+				onChange: (e) => {
+					F(e.target.files), e.target.value = "";
+				}
+			}),
+			/* @__PURE__ */ s("button", {
+				type: "button",
+				className: t.zone,
+				"data-state": T.value ? "dragover" : "idle",
+				disabled: S,
+				"aria-describedby": b ? `${N} ${P}` : N,
+				onClick: () => w.current?.click(),
+				onDragEnter: (e) => {
+					e.preventDefault(), S || (T.value = !0);
+				},
+				onDragOver: (e) => e.preventDefault(),
+				onDragLeave: () => {
+					T.value = !1;
+				},
+				onDrop: (e) => {
+					e.preventDefault(), T.value = !1, !S && F(e.dataTransfer.files);
+				},
+				children: D
+			}),
+			b && /* @__PURE__ */ s("span", {
+				id: P,
+				className: t.hint,
+				children: b
+			}),
+			f.length > 0 && /* @__PURE__ */ s("ul", {
+				className: t.list,
+				"aria-live": "polite",
+				children: f.map((n) => /* @__PURE__ */ c("li", {
+					className: t.file,
+					"data-state": n.status,
+					children: [
+						/* @__PURE__ */ c("span", {
+							className: t.status,
+							children: [
+								n.status === "uploading" && /* @__PURE__ */ s(e, {
+									size: "sm",
+									label: O
+								}),
+								n.status === "complete" && /* @__PURE__ */ s("span", {
+									className: t["glyph-complete"],
+									"aria-label": k,
+									children: "✓"
+								}),
+								n.status === "error" && /* @__PURE__ */ s("span", {
+									className: t["glyph-error"],
+									"aria-label": A,
+									children: "✕"
+								})
+							]
+						}),
+						/* @__PURE__ */ s("span", {
+							className: t.name,
+							children: n.name
+						}),
+						n.size !== void 0 && /* @__PURE__ */ s("span", {
+							className: t.size,
+							children: d(n.size)
+						}),
+						/* @__PURE__ */ s("button", {
+							type: "button",
+							className: t.remove,
+							"aria-label": j(n.name),
+							onClick: () => m?.(n.id),
+							children: "✕"
+						}),
+						n.status === "error" && n.errorMessage && /* @__PURE__ */ s("span", {
+							className: t["error-message"],
+							children: n.errorMessage
+						})
+					]
+				}, n.id))
+			})
+		]
+	});
+}
+//#endregion
+export { f as FileUploader };

package/dist/node/file-uploader/file-uploader.module.js

@@ -0,0 +1,20 @@
+"use client";
+
+var e = {
+	uploader: "_uploader_bw6tn_2",
+	label: "_label_bw6tn_9",
+	input: "_input_bw6tn_15",
+	zone: "_zone_bw6tn_24",
+	hint: "_hint_bw6tn_57",
+	list: "_list_bw6tn_62",
+	file: "_file_bw6tn_71",
+	status: "_status_bw6tn_88",
+	"glyph-complete": "_glyph-complete_bw6tn_94",
+	"glyph-error": "_glyph-error_bw6tn_98",
+	name: "_name_bw6tn_102",
+	size: "_size_bw6tn_109",
+	remove: "_remove_bw6tn_115",
+	"error-message": "_error-message_bw6tn_135"
+};
+//#endregion
+export { e as default };

package/dist/node/filter/filter.js

@@ -0,0 +1,34 @@
+"use client";
+
+import e from "./filter.module.js";
+import { useControllableSignal as t, useSignals as n } from "@cascivo/core";
+import { jsx as r } from "react/jsx-runtime";
+//#region ../components/src/filter/filter.tsx
+function i({ options: i, value: a, defaultValue: o = [], onValueChange: s, onChange: c, multi: l = !1, variant: u = "pill", className: d, ...f }) {
+	n();
+	let [p, m] = t({
+		value: a,
+		defaultValue: o,
+		onChange: s ?? c
+	});
+	function h(e) {
+		let t = p.value, n;
+		n = l ? t.includes(e) ? t.filter((t) => t !== e) : [...t, e] : t.includes(e) ? [] : [e], m(n);
+	}
+	return /* @__PURE__ */ r("div", {
+		role: "group",
+		className: [e.filter, d].filter(Boolean).join(" "),
+		"data-variant": u,
+		...f,
+		children: i.map((t) => /* @__PURE__ */ r("button", {
+			type: "button",
+			className: e.item,
+			"data-selected": p.value.includes(t.value) || void 0,
+			onClick: () => h(t.value),
+			"aria-pressed": p.value.includes(t.value),
+			children: t.label
+		}, t.value))
+	});
+}
+//#endregion
+export { i as Filter };

package/dist/node/filter/filter.module.js

@@ -0,0 +1,8 @@
+"use client";
+
+var e = {
+	filter: "_filter_uq1vv_2",
+	item: "_item_uq1vv_8"
+};
+//#endregion
+export { e as default };

package/dist/node/form/form.js

@@ -0,0 +1,95 @@
+"use client";
+
+import e from "./form.module.js";
+import { batch as t, cn as n, signal as r, useSignal as i, useSignals as a } from "@cascivo/core";
+import { jsx as o } from "react/jsx-runtime";
+//#region ../components/src/form/form.tsx
+function s(e) {
+	let t = e[0];
+	return t === void 0 ? "" : String(typeof t == "string" || typeof t == "number" ? t : t.key);
+}
+async function c(e, t) {
+	let n = await e["~standard"].validate(t);
+	if (!("issues" in n) || n.issues === void 0) return {};
+	let r = {};
+	for (let e of n.issues) {
+		let t = e.path && e.path.length > 0 ? s(e.path) : "";
+		t && !(t in r) && (r[t] = e.message);
+	}
+	return r;
+}
+function l(e) {
+	let n = r({ ...e.initialValues }), i = r({}), a = r({}), o = r(!1), s = async (t) => {
+		let n = {};
+		return e.schema && (n = await c(e.schema, t)), Object.keys(n).length === 0 && e.validate && (n = await e.validate(t)), n;
+	}, l = 0, u = (t, r) => {
+		if (n.value = {
+			...n.value,
+			[t]: r
+		}, !e.validateOnChange) return;
+		let a = ++l;
+		s(n.value).then((e) => {
+			if (a !== l) return;
+			let n = { ...i.value }, r = e[t];
+			r === void 0 ? delete n[t] : n[t] = r, i.value = n;
+		});
+	};
+	return {
+		values: n,
+		errors: i,
+		touched: a,
+		submitting: o,
+		setValue: u,
+		field(e) {
+			return {
+				get value() {
+					return n.value[e];
+				},
+				onChange: (t) => u(e, t),
+				onBlur: () => {
+					a.value = {
+						...a.value,
+						[e]: !0
+					};
+				},
+				get error() {
+					return i.value[e];
+				}
+			};
+		},
+		async submit(r) {
+			o.value = !0;
+			try {
+				let o = await s(n.value), c = Object.fromEntries(Object.keys(e.initialValues).map((e) => [e, !0]));
+				t(() => {
+					i.value = o, a.value = c;
+				}), Object.keys(o).length === 0 && await r(n.value);
+			} finally {
+				o.value = !1;
+			}
+		},
+		reset() {
+			t(() => {
+				n.value = { ...e.initialValues }, i.value = {}, a.value = {};
+			});
+		}
+	};
+}
+function u(e) {
+	a();
+	let t = i(null);
+	return t.peek() === null && (t.value = l(e)), t.peek();
+}
+function d({ form: t, onValid: r, children: i, className: a, ...s }) {
+	return /* @__PURE__ */ o("form", {
+		noValidate: !0,
+		className: n(e.form, a),
+		onSubmit: (e) => {
+			e.preventDefault(), t.submit(r);
+		},
+		...s,
+		children: i
+	});
+}
+//#endregion
+export { d as Form, l as createForm, u as useForm };

package/dist/node/form/form.module.js

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

package/dist/node/header/header.js

@@ -0,0 +1,44 @@
+"use client";
+
+import e from "./header.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, jsxs as s } from "react/jsx-runtime";
+//#region ../components/src/header/header.tsx
+function c({ brand: c, links: l, actions: u, sticky: d = !1, labels: f, className: p, ...m }) {
+	r();
+	let h = n(), g = f?.nav ?? a(i.header.nav);
+	return /* @__PURE__ */ s("header", {
+		role: "banner",
+		"data-sticky": d || void 0,
+		className: t(e.header, p),
+		...m,
+		children: [
+			c && /* @__PURE__ */ o("div", {
+				className: e.brand,
+				children: c
+			}),
+			l && l.length > 0 && /* @__PURE__ */ o("nav", {
+				"aria-label": g,
+				className: e.nav,
+				children: /* @__PURE__ */ o("ul", {
+					className: e.list,
+					children: l.map((t, n) => /* @__PURE__ */ o("li", { children: /* @__PURE__ */ o(h, {
+						href: t.href,
+						"aria-current": t.active ? "page" : void 0,
+						"data-state": t.active ? "active" : void 0,
+						className: e.link,
+						children: t.label
+					}) }, t.id ?? `${n}-${t.href}`))
+				})
+			}),
+			/* @__PURE__ */ o("div", { className: e.spacer }),
+			u && /* @__PURE__ */ o("div", {
+				className: e.actions,
+				children: u
+			})
+		]
+	});
+}
+//#endregion
+export { c as Header };

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

@@ -0,0 +1,13 @@
+"use client";
+
+var e = {
+	header: "_header_1n9di_2",
+	brand: "_brand_1n9di_20",
+	nav: "_nav_1n9di_35",
+	list: "_list_1n9di_39",
+	link: "_link_1n9di_48",
+	spacer: "_spacer_1n9di_80",
+	actions: "_actions_1n9di_84"
+};
+//#endregion
+export { e as default };

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

@@ -0,0 +1,74 @@
+"use client";
+
+import e from "./header-panel.module.js";
+import { cn as t, useSignal as n, useSignalEffect as r, useSignals as i } from "@cascivo/core";
+import { builtin as a, t as o } from "@cascivo/i18n";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { useRef as l } from "react";
+//#region ../components/src/header-panel/header-panel.tsx
+function u({ open: u, onClose: d, label: f, children: p, labels: m, className: h }) {
+	i();
+	let g = l(null), _ = l(null), v = n(u);
+	v.value = u;
+	let y = l(d);
+	return y.current = d, r(() => {
+		let e = g.current;
+		if (e) if (v.value) {
+			_.current = document.activeElement;
+			try {
+				e.showPopover();
+			} catch {}
+			e.focus();
+		} else {
+			try {
+				e.hidePopover();
+			} catch {}
+			_.current?.focus(), _.current = null;
+		}
+	}), r(() => {
+		let e = g.current;
+		if (!e) return;
+		let t = (e) => {
+			let t = "newState" in e ? e.newState === "closed" : !0;
+			v.peek() && t && y.current();
+		};
+		return e.addEventListener("toggle", t), () => e.removeEventListener("toggle", t);
+	}), /* @__PURE__ */ c("div", {
+		ref: g,
+		popover: "auto",
+		role: "region",
+		"aria-label": f,
+		tabIndex: -1,
+		"data-state": u ? "open" : "closed",
+		className: t(e.panel, h),
+		children: [/* @__PURE__ */ c("div", {
+			className: e.header,
+			children: [/* @__PURE__ */ s("span", {
+				className: e.title,
+				children: f
+			}), /* @__PURE__ */ s("button", {
+				type: "button",
+				"aria-label": m?.close ?? o(a.headerPanel.close),
+				className: e.close,
+				onClick: () => y.current(),
+				children: /* @__PURE__ */ s("svg", {
+					viewBox: "0 0 16 16",
+					width: "14",
+					height: "14",
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ s("path", {
+						d: "M4 4l8 8M12 4l-8 8",
+						stroke: "currentColor",
+						strokeWidth: "1.5",
+						strokeLinecap: "round"
+					})
+				})
+			})]
+		}), /* @__PURE__ */ s("div", {
+			className: e.body,
+			children: p
+		})]
+	});
+}
+//#endregion
+export { u as HeaderPanel };

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

@@ -0,0 +1,11 @@
+"use client";
+
+var e = {
+	panel: "_panel_gsmp3_2",
+	header: "_header_gsmp3_41",
+	title: "_title_gsmp3_50",
+	close: "_close_gsmp3_57",
+	body: "_body_gsmp3_80"
+};
+//#endregion
+export { e as default };

package/dist/node/heading/heading.js

@@ -0,0 +1,24 @@
+"use client";
+
+import e from "./heading.module.js";
+import { cn as t } from "@cascivo/core";
+import { jsx as n } from "react/jsx-runtime";
+//#region ../components/src/heading/heading.tsx
+var r = {
+	1: "2xl",
+	2: "xl",
+	3: "lg",
+	4: "md",
+	5: "sm",
+	6: "sm"
+};
+function i({ level: i = 2, size: a, className: o, children: s, ...c }) {
+	return /* @__PURE__ */ n(`h${i}`, {
+		"data-size": a ?? r[i],
+		className: t(e.heading, o),
+		...c,
+		children: s
+	});
+}
+//#endregion
+export { i as Heading };

package/dist/node/heading/heading.module.js

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