@cascivo/react 0.9.0 → 0.10.1

package/dist/node/dropdown/dropdown.js

@@ -0,0 +1,109 @@
+"use client";
+
+import e from "./dropdown.module.js";
+import { composeRefs as t, createMachine as n, useMachine 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 { cloneElement as l, useRef as u } from "react";
+//#region ../components/src/dropdown/dropdown.tsx
+var d = n({
+	initial: "closed",
+	states: {
+		closed: { on: { OPEN: "open" } },
+		open: { on: { CLOSE: "closed" } }
+	}
+});
+function f({ trigger: n, items: f, onSelect: p, placement: m = "bottom-start", open: h, onOpenChange: g }) {
+	o();
+	let [_, v] = r(d), y = u(null), b = u(null), x = u(null), S = u([]), C = i(-1), w = h !== void 0, T = w ? h : _.value === "open", E = i(T);
+	E.value = T;
+	let D = f.map((e, t) => ({
+		item: e,
+		index: t
+	})).filter(({ item: e }) => !e.separator && !e.disabled).map(({ index: e }) => e), O = (e) => {
+		w || v(e ? "OPEN" : "CLOSE"), g?.(e);
+	};
+	a(() => {
+		let e = C.value;
+		E.value && e >= 0 && S.current[e]?.focus();
+	}), a(() => {
+		E.value ? C.value = D[0] ?? -1 : C.value = -1;
+	}), a(() => {
+		E.value ? x.current?.showPopover() : x.current?.hidePopover();
+	}), a(() => {
+		let e = x.current;
+		if (!e) return;
+		let t = (e) => {
+			e.newState === "closed" && O(!1);
+		};
+		return e.addEventListener("toggle", t), () => e.removeEventListener("toggle", t);
+	});
+	let k = (e) => {
+		let t = f[e];
+		!t || t.separator || t.disabled || (p?.(t.value), O(!1), b.current?.focus());
+	}, A = (e) => {
+		D.length !== 0 && (C.value = D[(D.indexOf(C.value) + e + D.length) % D.length] ?? -1);
+	}, j = (e) => {
+		switch (e.key) {
+			case "ArrowDown":
+				e.preventDefault(), A(1);
+				break;
+			case "ArrowUp":
+				e.preventDefault(), A(-1);
+				break;
+			case "Home":
+				e.preventDefault(), C.value = D[0] ?? -1;
+				break;
+			case "End":
+				e.preventDefault(), C.value = D[D.length - 1] ?? -1;
+				break;
+			case "Escape":
+				e.preventDefault(), O(!1), b.current?.focus();
+				break;
+			case "Enter":
+			case " ":
+				e.preventDefault(), k(C.value);
+				break;
+		}
+	}, M = n, N = l(M, {
+		ref: t(b, M.props.ref),
+		onClick: (e) => {
+			M.props.onClick?.(e), O(!T);
+		},
+		"aria-haspopup": "menu",
+		"aria-expanded": T
+	});
+	return /* @__PURE__ */ c("div", {
+		ref: y,
+		className: e.root,
+		children: [N, /* @__PURE__ */ s("div", {
+			ref: x,
+			popover: "auto",
+			role: "menu",
+			"data-placement": m,
+			"data-state": T ? "open" : "closed",
+			className: e.menu,
+			onKeyDown: j,
+			children: f.map((t, n) => t.separator ? /* @__PURE__ */ s("div", {
+				role: "separator",
+				className: e.separator
+			}, `sep-${n}`) : /* @__PURE__ */ c("button", {
+				type: "button",
+				role: "menuitem",
+				ref: (e) => {
+					S.current[n] = e;
+				},
+				tabIndex: C.value === n ? 0 : -1,
+				disabled: t.disabled,
+				className: e.item,
+				onClick: () => k(n),
+				children: [t.icon && /* @__PURE__ */ s("span", {
+					className: e.icon,
+					"aria-hidden": "true",
+					children: t.icon
+				}), t.label]
+			}, t.value))
+		})]
+	});
+}
+//#endregion
+export { f as Dropdown };

package/dist/node/dropdown/dropdown.module.js

@@ -0,0 +1,11 @@
+"use client";
+
+var e = {
+	root: "_root_3wuq6_2",
+	menu: "_menu_3wuq6_7",
+	item: "_item_3wuq6_83",
+	icon: "_icon_3wuq6_111",
+	separator: "_separator_3wuq6_117"
+};
+//#endregion
+export { e as default };

package/dist/node/editable/editable.js

@@ -0,0 +1,67 @@
+"use client";
+
+import e from "./editable.module.js";
+import { cn as t, useSignal as n, useSignalEffect as r, useSignals as i } from "@cascivo/core";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { useRef as s } from "react";
+//#region ../components/src/editable/editable.tsx
+function c({ value: c, onValueChange: l, placeholder: u, disabled: d = !1, submitOnBlur: f = !0, onCancel: p, className: m, ...h }) {
+	i();
+	let g = n(!1), _ = n(c), v = s(null), y = s(p);
+	y.current = p;
+	let b = s(l);
+	b.current = l, g.value || (_.value = c), r(() => {
+		if (g.value) {
+			let e = v.current;
+			e && (e.focus(), e.select());
+		}
+	});
+	function x() {
+		b.current(_.value), g.value = !1;
+	}
+	function S() {
+		_.value = c, g.value = !1, y.current?.();
+	}
+	return g.value ? /* @__PURE__ */ a("div", {
+		className: t(e.wrapper, e.editing, m),
+		...h,
+		children: /* @__PURE__ */ a("input", {
+			ref: v,
+			className: e.input,
+			value: _.value,
+			onChange: (e) => {
+				_.value = e.currentTarget.value;
+			},
+			onKeyDown: (e) => {
+				e.key === "Enter" ? (e.preventDefault(), x()) : e.key === "Escape" && (e.preventDefault(), S());
+			},
+			onBlur: () => {
+				f ? x() : S();
+			}
+		})
+	}) : /* @__PURE__ */ a("div", {
+		className: t(e.wrapper, m),
+		"data-disabled": d ? "" : void 0,
+		...h,
+		children: /* @__PURE__ */ o("button", {
+			type: "button",
+			className: e.preview,
+			disabled: d,
+			onClick: () => {
+				d || (g.value = !0);
+			},
+			children: [/* @__PURE__ */ a("span", {
+				className: e["preview-text"],
+				children: c || /* @__PURE__ */ a("span", {
+					className: e.placeholder,
+					children: u
+				})
+			}), /* @__PURE__ */ a("span", {
+				className: e["edit-icon"],
+				"aria-hidden": "true"
+			})]
+		})
+	});
+}
+//#endregion
+export { c as Editable };

package/dist/node/editable/editable.module.js

@@ -0,0 +1,13 @@
+"use client";
+
+var e = {
+	wrapper: "_wrapper_5e6r0_2",
+	preview: "_preview_5e6r0_8",
+	"preview-text": "_preview-text_5e6r0_42",
+	placeholder: "_placeholder_5e6r0_46",
+	"edit-icon": "_edit-icon_5e6r0_50",
+	editing: "_editing_5e6r0_69",
+	input: "_input_5e6r0_70"
+};
+//#endregion
+export { e as default };

package/dist/node/empty-state/empty-state.js

@@ -0,0 +1,34 @@
+"use client";
+
+import e from "./empty-state.module.js";
+import { cn as t } from "@cascivo/core";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region ../components/src/empty-state/empty-state.tsx
+function i({ icon: i, title: a, description: o, action: s, size: c = "md", className: l, ...u }) {
+	return /* @__PURE__ */ r("div", {
+		"data-size": c,
+		className: t(e["empty-state"], l),
+		...u,
+		children: [
+			i && /* @__PURE__ */ n("span", {
+				className: e.icon,
+				"aria-hidden": "true",
+				children: i
+			}),
+			/* @__PURE__ */ n("h3", {
+				className: e.title,
+				children: a
+			}),
+			o && /* @__PURE__ */ n("p", {
+				className: e.description,
+				children: o
+			}),
+			s && /* @__PURE__ */ n("div", {
+				className: e.action,
+				children: s
+			})
+		]
+	});
+}
+//#endregion
+export { i as EmptyState };

package/dist/node/empty-state/empty-state.module.js

@@ -0,0 +1,11 @@
+"use client";
+
+var e = {
+	"empty-state": "_empty-state_1wem6_2",
+	icon: "_icon_1wem6_18",
+	title: "_title_1wem6_39",
+	description: "_description_1wem6_50",
+	action: "_action_1wem6_62"
+};
+//#endregion
+export { e as default };

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 };