@cascivo/react 0.9.0 → 0.10.1

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

@@ -0,0 +1,58 @@
+"use client";
+
+import e from "./copy-button.module.js";
+import { cn as t, useSignal 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/copy-button/copy-button.tsx
+function c({ value: c, size: l = "md", labels: u, className: d, ...f }) {
+	r();
+	let p = n(!1), m = u?.copy ?? a(i.copyButton.copy), h = u?.copied ?? a(i.copyButton.copied);
+	return /* @__PURE__ */ o("button", {
+		type: "button",
+		"aria-label": p.value ? h : m,
+		"data-state": p.value ? "copied" : "idle",
+		"data-size": l,
+		className: t(e.copyButton, d),
+		onClick: () => {
+			navigator.clipboard.writeText(c), p.value = !0, setTimeout(() => {
+				p.value = !1;
+			}, 2e3);
+		},
+		...f,
+		children: p.value ? /* @__PURE__ */ o("svg", {
+			"aria-hidden": "true",
+			viewBox: "0 0 16 16",
+			className: e.icon,
+			children: /* @__PURE__ */ o("path", {
+				d: "M13.5 4.5 6 12 2.5 8.5",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: "1.5",
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			})
+		}) : /* @__PURE__ */ s("svg", {
+			"aria-hidden": "true",
+			viewBox: "0 0 16 16",
+			className: e.icon,
+			children: [/* @__PURE__ */ o("rect", {
+				x: "5.5",
+				y: "5.5",
+				width: "8",
+				height: "8",
+				rx: "1.5",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: "1.5"
+			}), /* @__PURE__ */ o("path", {
+				d: "M3.5 10.5h-1a1 1 0 0 1-1-1v-7a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v1",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: "1.5"
+			})]
+		})
+	});
+}
+//#endregion
+export { c as CopyButton };

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

@@ -0,0 +1,8 @@
+"use client";
+
+var e = {
+	copyButton: "_copyButton_w0pqt_2",
+	icon: "_icon_w0pqt_45"
+};
+//#endregion
+export { e as default };

package/dist/node/data-list/data-list.js

@@ -0,0 +1,27 @@
+"use client";
+
+import e from "./data-list.module.js";
+import { cn as t } from "@cascivo/core";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region ../components/src/data-list/data-list.tsx
+function i({ items: i, orientation: a = "horizontal", dividers: o = !1, size: s = "md", className: c, ...l }) {
+	return /* @__PURE__ */ n("dl", {
+		"data-orientation": a,
+		"data-size": s,
+		"data-dividers": o ? "" : void 0,
+		className: t(e.list, c),
+		...l,
+		children: i.map((t, i) => /* @__PURE__ */ r("div", {
+			className: e.row,
+			children: [/* @__PURE__ */ n("dt", {
+				className: e.term,
+				children: t.label
+			}), /* @__PURE__ */ n("dd", {
+				className: e.detail,
+				children: t.value
+			})]
+		}, t.id ?? i))
+	});
+}
+//#endregion
+export { i as DataList };

package/dist/node/data-list/data-list.module.js

@@ -0,0 +1,10 @@
+"use client";
+
+var e = {
+	list: "_list_prsqy_2",
+	row: "_row_prsqy_21",
+	term: "_term_prsqy_45",
+	detail: "_detail_prsqy_51"
+};
+//#endregion
+export { e as default };

package/dist/node/data-table/data-table.js

@@ -0,0 +1,370 @@
+"use client";
+
+import { Button as e } from "../button/button.js";
+import { Checkbox as t } from "../checkbox/checkbox.js";
+import n from "./data-table.module.js";
+import { batch as r, cn as i, useComputed as a, useSignal as o, useSignalEffect as ee, useSignals as te } 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 { Fragment as ne, useId as re, useRef as ie } from "react";
+import { flushSync as ae } from "react-dom";
+//#region ../components/src/data-table/data-table.tsx
+function d(e, t) {
+	return e[t];
+}
+function oe(e, t) {
+	return typeof e == "number" && typeof t == "number" ? e - t : String(e ?? "").localeCompare(String(t ?? ""));
+}
+function f({ columns: f, rows: se, getRowId: ce, sort: p, defaultSort: le, sortMode: ue = "client", onSortChange: de, searchable: m = !1, pagination: h, selection: g, batchActions: _, renderExpandedRow: v, density: fe = "normal", zebra: pe = !1, stickyHeader: me = !1, loading: y = !1, emptyState: he, title: b, description: x, labels: S, className: ge, virtualized: C = !1, rowHeight: w = 40, windowSize: _e = 20, overscan: ve = 3 }) {
+	te();
+	let ye = re(), T = {
+		search: S?.search ?? c(s.dataTable.search),
+		empty: S?.empty ?? c(s.dataTable.empty),
+		selectAll: S?.selectAll ?? c(s.dataTable.selectAll),
+		selectRow: S?.selectRow ?? c(s.dataTable.selectRow),
+		itemsSelected: (e) => S?.itemsSelected?.(e) ?? c(s.dataTable.itemsSelected, { count: e }),
+		expandRow: S?.expandRow ?? c(s.dataTable.expandRow),
+		previousPage: S?.previousPage ?? c(s.dataTable.previousPage),
+		nextPage: S?.nextPage ?? c(s.dataTable.nextPage)
+	}, E = o(se);
+	E.value = se;
+	let D = o(f);
+	D.value = f;
+	let O = o(p ?? le);
+	p !== void 0 && (O.value = p);
+	let k = o(g?.selected ?? []);
+	g?.selected !== void 0 && (k.value = g.selected);
+	let A = o(""), j = o(1), M = o(h?.pageSize ?? 0), N = o(/* @__PURE__ */ new Set()), P = ie(null), F = o(0);
+	ee(() => {
+		if (!C) return;
+		let e = P.current;
+		if (!e) return;
+		let t = () => {
+			ae(() => {
+				F.value = e.scrollTop;
+			});
+		};
+		return e.addEventListener("scroll", t, { passive: !0 }), () => e.removeEventListener("scroll", t);
+	});
+	let I = a(() => E.value.map((e, t) => ({
+		row: e,
+		id: ce ? ce(e) : String(t)
+	}))), L = a(() => {
+		let e = A.value.trim().toLowerCase();
+		if (!e) return I.value;
+		let t = D.value;
+		return I.value.filter((n) => t.some((t) => String(d(n.row, t.key) ?? "").toLowerCase().includes(e)));
+	}), R = a(() => {
+		let e = O.value;
+		if (!e || ue === "server") return L.value;
+		let t = L.value.map((e, t) => [e, t]);
+		return t.sort((t, n) => {
+			let r = oe(d(t[0].row, e.key), d(n[0].row, e.key));
+			return e.direction === "desc" && (r = -r), r === 0 ? t[1] - n[1] : r;
+		}), t.map(([e]) => e);
+	}), z = a(() => h ? Math.max(1, Math.ceil(L.value.length / M.value)) : 1), B = a(() => Math.min(j.value, z.value)), V = a(() => {
+		if (!h) return R.value;
+		let e = (B.value - 1) * M.value;
+		return R.value.slice(e, e + M.value);
+	}), H = a(() => C ? Math.floor(F.value / w) : 0), U = a(() => C ? Math.min(H.value + _e + ve * 2, V.value.length) : V.value.length), be = a(() => C ? V.value.slice(H.value, U.value) : V.value), xe = (e) => {
+		let t = O.value, n;
+		n = !t || t.key !== e ? {
+			key: e,
+			direction: "asc"
+		} : t.direction === "asc" ? {
+			key: e,
+			direction: "desc"
+		} : void 0, r(() => {
+			p === void 0 && (O.value = n), j.value = 1;
+		}), de?.(n);
+	}, Se = (e) => {
+		if (![
+			"ArrowUp",
+			"ArrowDown",
+			"ArrowLeft",
+			"ArrowRight"
+		].includes(e.key)) return;
+		let t = e.currentTarget, n = Array.from(t.querySelectorAll("th button, td button, td input[type=\"checkbox\"]")), r = n.indexOf(document.activeElement);
+		if (r === -1) return;
+		e.preventDefault();
+		let i = (e) => e.closest("tr"), a;
+		if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
+			let t = n[r + (e.key === "ArrowRight" ? 1 : -1)];
+			t && i(t) === i(n[r]) && (a = t);
+		} else {
+			let t = e.key === "ArrowDown" ? 1 : -1, o = n[r];
+			for (let e = r + t; e >= 0 && e < n.length; e += t) if (i(n[e]) !== i(o)) {
+				a = n[e];
+				break;
+			}
+		}
+		a?.focus();
+	}, W = (e) => {
+		g?.selected === void 0 && (k.value = e), g?.onChange?.(e);
+	}, Ce = (e) => {
+		let t = k.value;
+		g?.mode === "single" ? W(t.includes(e) ? [] : [e]) : W(t.includes(e) ? t.filter((t) => t !== e) : [...t, e]);
+	}, we = (e) => {
+		let t = new Set(N.value);
+		t.has(e) ? t.delete(e) : t.add(e), N.value = t;
+	}, G = V.value, K = k.value, Te = N.value, q = G.length > 0 && G.every((e) => K.includes(e.id)), Ee = G.some((e) => K.includes(e.id)), J = be.value, Y = H.value, X = U.value, De = () => {
+		let e = G.map((e) => e.id);
+		W(q ? K.filter((t) => !e.includes(t)) : [...new Set([...K, ...e])]);
+	}, Z = f.length + +!!g + +!!v, Oe = h && !C && J.length > 0 ? Math.max(0, M.value - J.length) : 0, ke = `${ye}-title`, Ae = `${ye}-description`, Q = L.value.length, $ = Q === 0 ? 0 : (B.value - 1) * M.value + 1, je = Q === 0 ? 0 : $ + G.length - 1, Me = !!_ && _.length > 0 && K.length > 0;
+	return /* @__PURE__ */ u("div", {
+		className: i(n.root, ge),
+		"data-density": fe,
+		"data-zebra": pe || void 0,
+		"data-sticky-header": me || void 0,
+		"data-paginated": h ? !0 : void 0,
+		children: [
+			/* @__PURE__ */ l("span", {
+				"aria-live": "polite",
+				className: n.srOnly,
+				children: k.value.length > 0 ? T.itemsSelected(k.value.length) : ""
+			}),
+			(b !== void 0 || x !== void 0 || m) && /* @__PURE__ */ u("div", {
+				className: n.toolbar,
+				children: [(b !== void 0 || x !== void 0) && /* @__PURE__ */ u("div", {
+					className: n.heading,
+					children: [b !== void 0 && /* @__PURE__ */ l("div", {
+						id: ke,
+						className: n.title,
+						children: b
+					}), x !== void 0 && /* @__PURE__ */ l("div", {
+						id: Ae,
+						className: n.description,
+						children: x
+					})]
+				}), m && /* @__PURE__ */ l("input", {
+					type: "search",
+					className: n.search,
+					"aria-label": T.search,
+					placeholder: T.search,
+					value: A.value,
+					onChange: (e) => {
+						A.value = e.target.value, j.value = 1;
+					}
+				})]
+			}),
+			Me && /* @__PURE__ */ u("div", {
+				className: n.batchBar,
+				children: [/* @__PURE__ */ l("span", {
+					className: n.batchCount,
+					children: T.itemsSelected(K.length)
+				}), /* @__PURE__ */ l("div", {
+					className: n.batchActions,
+					children: _.map((t, n) => /* @__PURE__ */ l(e, {
+						size: "sm",
+						variant: "secondary",
+						onClick: () => t.onClick(K),
+						children: t.label
+					}, t.id ?? `${n}-${t.label}`))
+				})]
+			}),
+			/* @__PURE__ */ l("div", {
+				ref: C ? P : void 0,
+				className: i(n.scroller, C && n.scrollerVirtualized),
+				children: /* @__PURE__ */ u("table", {
+					className: n.table,
+					"aria-labelledby": b === void 0 ? void 0 : ke,
+					"aria-describedby": x === void 0 ? void 0 : Ae,
+					"aria-busy": y || void 0,
+					"aria-rowcount": C ? G.length : void 0,
+					onKeyDown: Se,
+					children: [
+						/* @__PURE__ */ u("colgroup", { children: [
+							v && /* @__PURE__ */ l("col", { className: n.controlCol }),
+							g && /* @__PURE__ */ l("col", { className: n.controlCol }),
+							f.map((e) => /* @__PURE__ */ l("col", { style: e.width === void 0 ? void 0 : { width: e.width } }, e.key))
+						] }),
+						/* @__PURE__ */ l("thead", { children: /* @__PURE__ */ u("tr", { children: [
+							v && /* @__PURE__ */ l("th", {
+								scope: "col",
+								className: n.controlCell,
+								children: /* @__PURE__ */ l("span", {
+									className: n.srOnly,
+									children: T.expandRow
+								})
+							}),
+							g && /* @__PURE__ */ l("th", {
+								scope: "col",
+								className: n.controlCell,
+								children: g.mode === "multi" ? /* @__PURE__ */ l(t, {
+									"aria-label": T.selectAll,
+									checked: q,
+									indeterminate: Ee && !q,
+									onChange: De
+								}) : /* @__PURE__ */ l("span", {
+									className: n.srOnly,
+									children: T.selectRow
+								})
+							}),
+							f.map((e) => {
+								let t = O.value?.key === e.key ? O.value.direction : void 0, r = t === "asc" ? "ascending" : t === "desc" ? "descending" : "none";
+								return /* @__PURE__ */ l("th", {
+									scope: "col",
+									"data-align": e.align ?? "start",
+									"aria-sort": e.sortable ? r : void 0,
+									children: e.sortable ? /* @__PURE__ */ l("button", {
+										type: "button",
+										className: n.sortButton,
+										"data-state": r,
+										onClick: () => xe(e.key),
+										children: e.header
+									}) : e.header
+								}, e.key);
+							})
+						] }) }),
+						/* @__PURE__ */ u("tbody", { children: [
+							y && Array.from({ length: 5 }, (e, t) => /* @__PURE__ */ l("tr", {
+								className: n.row,
+								children: Array.from({ length: Z }, (e, t) => /* @__PURE__ */ l("td", { children: /* @__PURE__ */ l("span", {
+									className: n.shimmer,
+									"aria-hidden": "true"
+								}) }, t))
+							}, t)),
+							!y && G.length === 0 && /* @__PURE__ */ l("tr", {
+								"data-empty-row": !0,
+								children: /* @__PURE__ */ l("td", {
+									colSpan: Z,
+									className: n.emptyCell,
+									children: he ?? T.empty
+								})
+							}),
+							!y && C && Y > 0 && /* @__PURE__ */ l("tr", {
+								"aria-hidden": "true",
+								style: { height: Y * w }
+							}),
+							!y && J.map((e, r) => {
+								let i = C ? Y + r : r, a = K.includes(e.id), o = Te.has(e.id);
+								return /* @__PURE__ */ u(ne, { children: [/* @__PURE__ */ u("tr", {
+									className: n.row,
+									"data-parity": i % 2 == 0 ? "even" : "odd",
+									"data-state": a ? "selected" : void 0,
+									"aria-rowindex": C ? Y + r + 1 : void 0,
+									children: [
+										v && /* @__PURE__ */ l("td", {
+											className: n.controlCell,
+											children: /* @__PURE__ */ l("button", {
+												type: "button",
+												className: n.expandButton,
+												"aria-expanded": o,
+												"aria-label": T.expandRow,
+												"data-state": o ? "open" : "closed",
+												onClick: () => we(e.id),
+												children: /* @__PURE__ */ l("span", {
+													className: n.chevron,
+													"aria-hidden": "true"
+												})
+											})
+										}),
+										g && /* @__PURE__ */ l("td", {
+											className: n.controlCell,
+											children: /* @__PURE__ */ l(t, {
+												"aria-label": T.selectRow,
+												checked: a,
+												onChange: () => Ce(e.id)
+											})
+										}),
+										f.map((t) => /* @__PURE__ */ l("td", {
+											"data-align": t.align ?? "start",
+											children: t.render ? t.render(e.row) : String(d(e.row, t.key) ?? "")
+										}, t.key))
+									]
+								}), v && /* @__PURE__ */ l("tr", {
+									className: n.expansionRow,
+									"data-state": o ? "open" : "closed",
+									children: /* @__PURE__ */ l("td", {
+										colSpan: Z,
+										children: /* @__PURE__ */ l("div", {
+											className: n.expansionGrid,
+											"data-state": o ? "open" : "closed",
+											children: /* @__PURE__ */ l("div", {
+												className: n.expansionInner,
+												children: v(e.row)
+											})
+										})
+									})
+								})] }, e.id);
+							}),
+							!y && C && X < G.length && /* @__PURE__ */ l("tr", {
+								"aria-hidden": "true",
+								style: { height: (G.length - X) * w }
+							}),
+							Oe > 0 && /* @__PURE__ */ l("tr", {
+								"aria-hidden": "true",
+								"data-filler-row": !0,
+								children: /* @__PURE__ */ l("td", {
+									colSpan: Z,
+									style: {
+										blockSize: `calc(var(--_row-height) * ${Oe})`,
+										padding: 0
+									}
+								})
+							})
+						] })
+					]
+				})
+			}),
+			h && /* @__PURE__ */ u("div", {
+				className: n.footer,
+				children: [
+					h.pageSizeOptions && /* @__PURE__ */ u("label", {
+						className: n.pageSize,
+						children: [/* @__PURE__ */ l("span", { children: "Rows per page" }), /* @__PURE__ */ l("select", {
+							value: M.value,
+							onChange: (e) => {
+								M.value = Number(e.target.value), j.value = 1;
+							},
+							children: h.pageSizeOptions.map((e) => /* @__PURE__ */ l("option", {
+								value: e,
+								children: e
+							}, e))
+						})]
+					}),
+					/* @__PURE__ */ u("span", {
+						className: n.range,
+						children: [
+							$,
+							"–",
+							je,
+							" of ",
+							Q
+						]
+					}),
+					/* @__PURE__ */ u("div", {
+						className: n.pageButtons,
+						children: [/* @__PURE__ */ l("button", {
+							type: "button",
+							className: n.pageButton,
+							"aria-label": T.previousPage,
+							disabled: B.value <= 1,
+							onClick: () => {
+								j.value = B.value - 1;
+							},
+							children: /* @__PURE__ */ l("span", {
+								"aria-hidden": "true",
+								children: "‹"
+							})
+						}), /* @__PURE__ */ l("button", {
+							type: "button",
+							className: n.pageButton,
+							"aria-label": T.nextPage,
+							disabled: B.value >= z.value,
+							onClick: () => {
+								j.value = B.value + 1;
+							},
+							children: /* @__PURE__ */ l("span", {
+								"aria-hidden": "true",
+								children: "›"
+							})
+						})]
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { f as DataTable };

package/dist/node/data-table/data-table.module.js

@@ -0,0 +1,35 @@
+"use client";
+
+var e = {
+	root: "_root_jwjfs_2",
+	toolbar: "_toolbar_jwjfs_26",
+	heading: "_heading_jwjfs_35",
+	title: "_title_jwjfs_41",
+	description: "_description_jwjfs_47",
+	search: "_search_jwjfs_52",
+	batchBar: "_batchBar_jwjfs_79",
+	batchCount: "_batchCount_jwjfs_89",
+	batchActions: "_batchActions_jwjfs_95",
+	scroller: "_scroller_jwjfs_101",
+	scrollerVirtualized: "_scrollerVirtualized_jwjfs_106",
+	table: "_table_jwjfs_112",
+	row: "_row_jwjfs_172",
+	controlCol: "_controlCol_jwjfs_178",
+	controlCell: "_controlCell_jwjfs_182",
+	sortButton: "_sortButton_jwjfs_188",
+	emptyCell: "_emptyCell_jwjfs_236",
+	expansionRow: "_expansionRow_jwjfs_243",
+	expansionGrid: "_expansionGrid_jwjfs_249",
+	expansionInner: "_expansionInner_jwjfs_253",
+	expandButton: "_expandButton_jwjfs_258",
+	chevron: "_chevron_jwjfs_281",
+	shimmer: "_shimmer_jwjfs_296",
+	footer: "_footer_jwjfs_323",
+	pageSize: "_pageSize_jwjfs_333",
+	range: "_range_jwjfs_359",
+	pageButtons: "_pageButtons_jwjfs_364",
+	pageButton: "_pageButton_jwjfs_364",
+	srOnly: "_srOnly_jwjfs_405"
+};
+//#endregion
+export { e as default };