@vjdesigns/vjdesigns-ui 0.0.0-stage → 1.5.0

package/dist/components/data-display/Table/Table.mjs

@@ -0,0 +1,333 @@
+import { breakpoints as e } from "../../../types/common.mjs";
+import { useMessages as t } from "../../utilities/LocaleProvider/LocaleProvider.mjs";
+import { useMediaQuery as n } from "../../../hooks/useMediaQuery.mjs";
+import { cx as r } from "../../../utils/cx.mjs";
+import { Spinner as i } from "../../feedback/Spinner/Spinner.mjs";
+import { ArrowDownIcon as a, ArrowUpIcon as o, SortIcon as s } from "../../primitives/Icon/icons.mjs";
+import { CheckBox as c } from "../../forms/CheckBox/CheckBox.mjs";
+import l from "./Table.module.css.mjs";
+import { useTableSelection as u, useTableSort as d } from "./useTable.mjs";
+import { createContext as f, useCallback as p, useContext as m, useEffect as h, useId as g, useLayoutEffect as _, useRef as v, useState as y } from "react";
+import { jsx as b, jsxs as x } from "react/jsx-runtime";
+//#region src/components/data-display/Table/Table.tsx
+var S = {
+	plain: l.plain,
+	striped: l.striped,
+	outline: l.outline
+}, C = {
+	compact: l.compact,
+	comfortable: l.comfortable,
+	spacious: l.spacious
+}, w = {
+	auto: l.layoutAuto,
+	fixed: l.layoutFixed
+}, T = {
+	top: l.captionTop,
+	bottom: l.captionBottom
+}, E = {
+	sm: `(max-width: ${e.sm - .02}px)`,
+	md: `(max-width: ${e.md - .02}px)`
+}, D = {
+	start: l.alignStart,
+	center: l.alignCenter,
+	end: l.alignEnd
+}, O = f({
+	stacked: !1,
+	columnCount: 1,
+	registerCaption: () => {}
+}), k = f("body");
+function A({ variant: e = "plain", density: a = "comfortable", stickyHeader: o = !1, maxHeight: s, stickyFirstColumn: c = !1, hoverable: u = !1, layout: d = "auto", fullWidth: f = !0, captionSide: m = "top", loading: g = !1, loadingLabel: D, stackBelow: k, scrollLabel: A, className: j, style: M, children: N, ref: P, "aria-busy": F, ...I }) {
+	let L = t(), R = D ?? L.table.loading, z = A ?? L.table.scrollRegion, B = v(null), V = v(null), [H, U] = y(null), [W, G] = y(!1), [K, q] = y({
+		start: !1,
+		end: !1
+	}), [J, Y] = y(1), X = n(k ? E[k] : void 0), ee = p((e) => {
+		if (V.current = e, typeof P == "function") return P(e);
+		P && (P.current = e);
+	}, [P]), Z = p(() => {
+		let e = B.current;
+		if (!e) return;
+		let t = e.scrollWidth - e.clientWidth, n = t > 1, r = e.scrollHeight - e.clientHeight > 1, i = Math.abs(e.scrollLeft);
+		G(n || r), q((e) => {
+			let r = {
+				start: n && i > 1,
+				end: n && i < t - 1
+			};
+			return e.start === r.start && e.end === r.end ? e : r;
+		});
+	}, []);
+	h(() => {
+		let e = B.current;
+		if (!e || (Z(), typeof ResizeObserver > "u")) return;
+		let t = new ResizeObserver(Z);
+		return t.observe(e), V.current && t.observe(V.current), () => t.disconnect();
+	}, [Z]), _(() => {
+		let e = V.current;
+		if (!e) return;
+		let t = e.tHead?.rows[e.tHead.rows.length - 1], n = t ? Array.from(t.cells) : [], r = n.reduce((e, t) => e + (t.colSpan || 1), 0);
+		if (r > 0 && r !== J && Y(r), !k) return;
+		let i = [];
+		for (let e of n) {
+			let t = (e.textContent ?? "").trim() || e.getAttribute("aria-label") || "";
+			for (let n = 0; n < (e.colSpan || 1); n++) i.push(t);
+		}
+		let a = [...Array.from(e.tBodies).flatMap((e) => Array.from(e.rows)), ...e.tFoot ? Array.from(e.tFoot.rows) : []];
+		for (let e of a) {
+			let t = 0;
+			for (let n of Array.from(e.cells)) {
+				if (!n.hasAttribute("data-label-explicit") && !n.hasAttribute("data-empty")) {
+					let e = i[t];
+					e ? n.setAttribute("data-label", e) : n.removeAttribute("data-label");
+				}
+				t += n.colSpan || 1;
+			}
+		}
+	});
+	let te = p((e) => U(e), []), Q = I["aria-labelledby"], ne = I["aria-label"], re = W ? {
+		role: "region",
+		tabIndex: 0,
+		"aria-labelledby": H ?? Q,
+		"aria-label": H || Q ? void 0 : ne ?? z
+	} : {}, $ = s ?? (o ? "var(--container-xs)" : void 0);
+	return /* @__PURE__ */ b(O.Provider, {
+		value: {
+			stacked: X,
+			columnCount: J,
+			registerCaption: te
+		},
+		children: /* @__PURE__ */ x("div", {
+			className: r(l.frame, S[e], C[a], o && l.stickyHeader, c && l.stickyFirstColumn, u && l.hoverable, X && l.stacked, f && l.fullWidth, j),
+			style: M,
+			"data-loading": g || void 0,
+			"data-scroll-start": K.start || void 0,
+			"data-scroll-end": K.end || void 0,
+			children: [/* @__PURE__ */ b("div", {
+				ref: B,
+				className: l.scroll,
+				style: $ === void 0 ? void 0 : { maxBlockSize: $ },
+				onScroll: Z,
+				...re,
+				children: /* @__PURE__ */ b("table", {
+					...I,
+					ref: ee,
+					role: X ? "table" : I.role,
+					"aria-busy": g || F || void 0,
+					className: r(l.table, w[d], T[m]),
+					children: N
+				})
+			}), g && /* @__PURE__ */ b("div", {
+				className: l.loadingOverlay,
+				children: /* @__PURE__ */ b("span", {
+					className: l.loadingBubble,
+					children: /* @__PURE__ */ b(i, {
+						size: "lg",
+						tone: "primary",
+						label: R
+					})
+				})
+			})]
+		})
+	});
+}
+function j({ className: e, id: t, ...n }) {
+	let i = g(), a = t ?? i, { registerCaption: o } = m(O);
+	return _(() => (o(a), () => o(null)), [a, o]), /* @__PURE__ */ b("caption", {
+		id: a,
+		className: r(l.caption, e),
+		...n
+	});
+}
+function M({ className: e, ...t }) {
+	let { stacked: n } = m(O);
+	return /* @__PURE__ */ b(k.Provider, {
+		value: "head",
+		children: /* @__PURE__ */ b("thead", {
+			role: n ? "rowgroup" : void 0,
+			className: r(l.head, e),
+			...t
+		})
+	});
+}
+function N({ className: e, ...t }) {
+	let { stacked: n } = m(O);
+	return /* @__PURE__ */ b(k.Provider, {
+		value: "body",
+		children: /* @__PURE__ */ b("tbody", {
+			role: n ? "rowgroup" : void 0,
+			className: r(l.body, e),
+			...t
+		})
+	});
+}
+function P({ className: e, ...t }) {
+	let { stacked: n } = m(O);
+	return /* @__PURE__ */ b(k.Provider, {
+		value: "foot",
+		children: /* @__PURE__ */ b("tfoot", {
+			role: n ? "rowgroup" : void 0,
+			className: r(l.foot, e),
+			...t
+		})
+	});
+}
+function F({ selected: e = !1, className: t, ...n }) {
+	let { stacked: i } = m(O);
+	return /* @__PURE__ */ b("tr", {
+		role: i ? "row" : void 0,
+		className: r(l.row, t),
+		"data-selected": e || void 0,
+		...n
+	});
+}
+function I({ align: e, numeric: t, truncate: n }) {
+	return r(D[e ?? (t ? "end" : "start")], t && l.numeric, n && l.truncate);
+}
+function L(e, t) {
+	return e === void 0 ? t : {
+		inlineSize: e,
+		...t
+	};
+}
+function R(e, t, n) {
+	if (n !== void 0 || !e) return n;
+	if (typeof t == "string" || typeof t == "number") return String(t);
+}
+function z({ scope: e, sortable: t = !1, sortDirection: n = "none", onSort: i, align: c, numeric: u, truncate: d, width: f, className: p, style: h, children: g, title: _, ...v }) {
+	let y = m(k), { stacked: S } = m(O), C = e ?? (y === "body" ? "row" : "col"), w = S ? C === "col" || C === "colgroup" ? "columnheader" : "rowheader" : void 0, T = n === "ascending" ? "descending" : "ascending", E = n === "ascending" ? o : n === "descending" ? a : s;
+	return /* @__PURE__ */ b("th", {
+		role: w,
+		scope: C,
+		"aria-sort": t && n !== "none" ? n : void 0,
+		className: r(l.cell, l.headerCell, y === "body" && l.rowHeader, t && l.sortableCell, I({
+			align: c,
+			numeric: u,
+			truncate: d
+		}), p),
+		style: L(f, h),
+		title: R(d, g, _),
+		"data-sorted": t && n !== "none" ? n : void 0,
+		...v,
+		children: t ? /* @__PURE__ */ x("button", {
+			type: "button",
+			className: l.sortButton,
+			onClick: () => i?.(T),
+			children: [/* @__PURE__ */ b("span", {
+				className: l.sortLabel,
+				children: g
+			}), /* @__PURE__ */ b("span", {
+				className: l.sortIcon,
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ b(E, {
+					size: "sm",
+					strokeWidth: 2.5
+				})
+			})]
+		}) : d ? /* @__PURE__ */ b("span", {
+			className: l.truncateInner,
+			children: g
+		}) : g
+	});
+}
+function B({ align: e, numeric: t, truncate: n, width: i, label: a, className: o, style: s, children: c, title: u, ...d }) {
+	let { stacked: f } = m(O);
+	return /* @__PURE__ */ b("td", {
+		role: f ? "cell" : void 0,
+		className: r(l.cell, l.dataCell, I({
+			align: e,
+			numeric: t,
+			truncate: n
+		}), o),
+		style: L(i, s),
+		title: R(n, c, u),
+		"data-label": a,
+		"data-label-explicit": a !== void 0 || void 0,
+		...d,
+		children: n ? /* @__PURE__ */ b("span", {
+			className: l.truncateInner,
+			children: c
+		}) : c
+	});
+}
+function V({ checked: e, onCheckedChange: n, rowLabel: i, checkboxLabel: a, disabled: o, className: s, ...u }) {
+	let d = t(), { stacked: f } = m(O), p = a ?? (i ? d.table.selectRowNamed(i) : d.table.selectRow);
+	return /* @__PURE__ */ b("td", {
+		role: f ? "cell" : void 0,
+		className: r(l.cell, l.selectCell, s),
+		"data-label": d.table.selectColumn,
+		"data-label-explicit": !0,
+		...u,
+		children: /* @__PURE__ */ b(c, {
+			className: l.selectBox,
+			checked: e,
+			onCheckedChange: n,
+			disabled: o,
+			"aria-label": p
+		})
+	});
+}
+function H({ checked: e, indeterminate: n = !1, onCheckedChange: i, checkboxLabel: a, disabled: o, className: s, ...u }) {
+	let d = t(), f = a ?? d.table.selectAll, { stacked: p } = m(O);
+	return /* @__PURE__ */ b("th", {
+		role: p ? "columnheader" : void 0,
+		scope: "col",
+		className: r(l.cell, l.headerCell, l.selectCell, s),
+		...u,
+		children: /* @__PURE__ */ b(c, {
+			className: l.selectBox,
+			checked: e,
+			indeterminate: n,
+			onCheckedChange: i,
+			disabled: o,
+			"aria-label": f
+		})
+	});
+}
+function U({ colSpan: e, icon: t, heading: n, children: i, action: a, className: o, ...s }) {
+	let { stacked: c, columnCount: u } = m(O);
+	return /* @__PURE__ */ b("tr", {
+		role: c ? "row" : void 0,
+		className: r(l.emptyRow, o),
+		...s,
+		children: /* @__PURE__ */ b("td", {
+			role: c ? "cell" : void 0,
+			colSpan: e ?? u,
+			className: l.emptyCell,
+			"data-empty": !0,
+			children: /* @__PURE__ */ x("div", {
+				className: l.empty,
+				children: [
+					t && /* @__PURE__ */ b("span", {
+						className: l.emptyIcon,
+						"aria-hidden": "true",
+						children: t
+					}),
+					n && /* @__PURE__ */ b("p", {
+						className: l.emptyHeading,
+						children: n
+					}),
+					i && /* @__PURE__ */ b("div", {
+						className: l.emptyMessage,
+						children: i
+					}),
+					a && /* @__PURE__ */ b("div", {
+						className: l.emptyAction,
+						children: a
+					})
+				]
+			})
+		})
+	});
+}
+var W = Object.assign(A, {
+	Caption: j,
+	Head: M,
+	Body: N,
+	Foot: P,
+	Row: F,
+	HeaderCell: z,
+	Cell: B,
+	SelectCell: V,
+	SelectAllCell: H,
+	Empty: U
+});
+//#endregion
+export { W as Table, N as TableBody, j as TableCaption, B as TableCell, U as TableEmpty, P as TableFoot, M as TableHead, z as TableHeaderCell, F as TableRow, H as TableSelectAllCell, V as TableSelectCell, u as useTableSelection, d as useTableSort };

package/dist/components/data-display/Table/Table.module.css.cjs.js

@@ -0,0 +1 @@
+var e=`_frame_qkkij_49`,t=`_fullWidth_qkkij_83`,n=`_scroll_qkkij_99`,r=`_plain_qkkij_111`,i=`_striped_qkkij_119`,a=`_body_qkkij_119`,o=`_row_qkkij_119`,s=`_outline_qkkij_127`,c=`_cell_qkkij_141`,l=`_foot_qkkij_143`,u=`_compact_qkkij_153`,d=`_comfortable_qkkij_165`,f=`_spacious_qkkij_177`,p=`_table_qkkij_261`,m=`_layoutAuto_qkkij_285`,h=`_layoutFixed_qkkij_291`,g=`_captionTop_qkkij_301`,_=`_captionBottom_qkkij_307`,v=`_caption_qkkij_301`,y=`_dataCell_qkkij_371`,b=`_hoverable_qkkij_379`,x=`_head_qkkij_413`,S=`_headerCell_qkkij_439`,C=`_rowHeader_qkkij_449`,w=`_alignStart_qkkij_479`,T=`_alignCenter_qkkij_485`,E=`_alignEnd_qkkij_491`,D=`_numeric_qkkij_501`,O=`_truncateInner_qkkij_523`,k=`_truncate_qkkij_523`,A=`_sortableCell_qkkij_547`,j=`_sortButton_qkkij_555`,M=`_sortLabel_qkkij_637`,N=`_sortIcon_qkkij_639`,P=`_sortPop_qkkij_1`,F=`_selectCell_qkkij_717`,I=`_selectBox_qkkij_727`,L=`_stickyHeader_qkkij_737`,R=`_stickyFirstColumn_qkkij_751`,z=`_loadingOverlay_qkkij_813`,B=`_loadingBubble_qkkij_833`,V=`_bubbleIn_qkkij_1`,H=`_emptyCell_qkkij_875`,U=`_empty_qkkij_875`,W=`_emptyIcon_qkkij_907`,G=`_emptyHeading_qkkij_931`,K=`_emptyMessage_qkkij_949`,q=`_emptyAction_qkkij_959`,J=`_stacked_qkkij_979`,Y=`_emptyRow_qkkij_1153`,X={frame:e,fullWidth:t,scroll:n,plain:r,striped:i,body:a,row:o,outline:s,cell:c,foot:l,compact:u,comfortable:d,spacious:f,table:p,layoutAuto:m,layoutFixed:h,captionTop:g,captionBottom:_,caption:v,dataCell:y,hoverable:b,head:x,headerCell:S,rowHeader:C,alignStart:w,alignCenter:T,alignEnd:E,numeric:D,truncateInner:O,truncate:k,sortableCell:A,sortButton:j,sortLabel:M,sortIcon:N,sortPop:P,selectCell:F,selectBox:I,stickyHeader:L,stickyFirstColumn:R,loadingOverlay:z,loadingBubble:B,bubbleIn:V,emptyCell:H,empty:U,emptyIcon:W,emptyHeading:G,emptyMessage:K,emptyAction:q,stacked:J,emptyRow:Y};exports.alignCenter=T,exports.alignEnd=E,exports.alignStart=w,exports.body=a,exports.bubbleIn=V,exports.caption=v,exports.captionBottom=_,exports.captionTop=g,exports.cell=c,exports.comfortable=d,exports.compact=u,exports.dataCell=y,exports.default=X,exports.empty=U,exports.emptyAction=q,exports.emptyCell=H,exports.emptyHeading=G,exports.emptyIcon=W,exports.emptyMessage=K,exports.emptyRow=Y,exports.foot=l,exports.frame=e,exports.fullWidth=t,exports.head=x,exports.headerCell=S,exports.hoverable=b,exports.layoutAuto=m,exports.layoutFixed=h,exports.loadingBubble=B,exports.loadingOverlay=z,exports.numeric=D,exports.outline=s,exports.plain=r,exports.row=o,exports.rowHeader=C,exports.scroll=n,exports.selectBox=I,exports.selectCell=F,exports.sortButton=j,exports.sortIcon=N,exports.sortLabel=M,exports.sortPop=P,exports.sortableCell=A,exports.spacious=f,exports.stacked=J,exports.stickyFirstColumn=R,exports.stickyHeader=L,exports.striped=i,exports.table=p,exports.truncate=k,exports.truncateInner=O;

package/dist/components/data-display/Table/Table.module.css.mjs

@@ -0,0 +1,55 @@
+//#region src/components/data-display/Table/Table.module.css
+var e = "_frame_qkkij_49", t = "_fullWidth_qkkij_83", n = "_scroll_qkkij_99", r = "_plain_qkkij_111", i = "_striped_qkkij_119", a = "_body_qkkij_119", o = "_row_qkkij_119", s = "_outline_qkkij_127", c = "_cell_qkkij_141", l = "_foot_qkkij_143", u = "_compact_qkkij_153", d = "_comfortable_qkkij_165", f = "_spacious_qkkij_177", p = "_table_qkkij_261", m = "_layoutAuto_qkkij_285", h = "_layoutFixed_qkkij_291", g = "_captionTop_qkkij_301", _ = "_captionBottom_qkkij_307", v = "_caption_qkkij_301", y = "_dataCell_qkkij_371", b = "_hoverable_qkkij_379", x = "_head_qkkij_413", S = "_headerCell_qkkij_439", C = "_rowHeader_qkkij_449", w = "_alignStart_qkkij_479", T = "_alignCenter_qkkij_485", E = "_alignEnd_qkkij_491", D = "_numeric_qkkij_501", O = "_truncateInner_qkkij_523", k = "_truncate_qkkij_523", A = "_sortableCell_qkkij_547", j = "_sortButton_qkkij_555", M = "_sortLabel_qkkij_637", N = "_sortIcon_qkkij_639", P = "_sortPop_qkkij_1", F = "_selectCell_qkkij_717", I = "_selectBox_qkkij_727", L = "_stickyHeader_qkkij_737", R = "_stickyFirstColumn_qkkij_751", z = "_loadingOverlay_qkkij_813", B = "_loadingBubble_qkkij_833", V = "_bubbleIn_qkkij_1", H = "_emptyCell_qkkij_875", U = "_empty_qkkij_875", W = "_emptyIcon_qkkij_907", G = "_emptyHeading_qkkij_931", K = "_emptyMessage_qkkij_949", q = "_emptyAction_qkkij_959", J = "_stacked_qkkij_979", Y = "_emptyRow_qkkij_1153", X = {
+	frame: e,
+	fullWidth: t,
+	scroll: n,
+	plain: r,
+	striped: i,
+	body: a,
+	row: o,
+	outline: s,
+	cell: c,
+	foot: l,
+	compact: u,
+	comfortable: d,
+	spacious: f,
+	table: p,
+	layoutAuto: m,
+	layoutFixed: h,
+	captionTop: g,
+	captionBottom: _,
+	caption: v,
+	dataCell: y,
+	hoverable: b,
+	head: x,
+	headerCell: S,
+	rowHeader: C,
+	alignStart: w,
+	alignCenter: T,
+	alignEnd: E,
+	numeric: D,
+	truncateInner: O,
+	truncate: k,
+	sortableCell: A,
+	sortButton: j,
+	sortLabel: M,
+	sortIcon: N,
+	sortPop: P,
+	selectCell: F,
+	selectBox: I,
+	stickyHeader: L,
+	stickyFirstColumn: R,
+	loadingOverlay: z,
+	loadingBubble: B,
+	bubbleIn: V,
+	emptyCell: H,
+	empty: U,
+	emptyIcon: W,
+	emptyHeading: G,
+	emptyMessage: K,
+	emptyAction: q,
+	stacked: J,
+	emptyRow: Y
+};
+//#endregion
+export { T as alignCenter, E as alignEnd, w as alignStart, a as body, V as bubbleIn, v as caption, _ as captionBottom, g as captionTop, c as cell, d as comfortable, u as compact, y as dataCell, X as default, U as empty, q as emptyAction, H as emptyCell, G as emptyHeading, W as emptyIcon, K as emptyMessage, Y as emptyRow, l as foot, e as frame, t as fullWidth, x as head, S as headerCell, b as hoverable, m as layoutAuto, h as layoutFixed, B as loadingBubble, z as loadingOverlay, D as numeric, s as outline, r as plain, o as row, C as rowHeader, n as scroll, I as selectBox, F as selectCell, j as sortButton, N as sortIcon, M as sortLabel, P as sortPop, A as sortableCell, f as spacious, J as stacked, R as stickyFirstColumn, L as stickyHeader, i as striped, p as table, k as truncate, O as truncateInner };

package/dist/components/data-display/Table/index.d.ts

@@ -0,0 +1 @@
+export * from './Table';

package/dist/components/data-display/Table/useTable.cjs.js

@@ -0,0 +1 @@
+const e=require("../../../hooks/useControllableState.cjs.js");let t=require("react");function n(e,t){return e==null&&t==null?0:e==null?1:t==null?-1:typeof e==`number`&&typeof t==`number`?e-t:e instanceof Date&&t instanceof Date?e.getTime()-t.getTime():String(e).localeCompare(String(t),void 0,{numeric:!0,sensitivity:`base`})}function r(e,{initial:r,compare:i}={}){let[a,o]=(0,t.useState)(r??{key:null,direction:`none`}),s=(0,t.useMemo)(()=>{let{key:t,direction:r}=a;if(t===null||r===`none`)return e.slice();let o=r===`ascending`?1:-1,s=i?(e,n)=>i(e,n,t):(e,r)=>n(e[t],r[t]);return e.slice().sort((e,t)=>s(e,t)*o)},[e,a,i]),c=(0,t.useCallback)(e=>a.key===e?a.direction:`none`,[a]),l=(0,t.useCallback)((e,t)=>{o(n=>t?{key:t===`none`?null:e,direction:t}:n.key===e&&n.direction===`ascending`?{key:e,direction:`descending`}:{key:e,direction:`ascending`})},[]);return{sortedRows:s,sort:a,setSort:o,getSortDirection:c,toggleSort:l,getSortProps:(0,t.useCallback)(e=>({sortable:!0,sortDirection:c(e),onSort:t=>l(e,t)}),[c,l])}}function i(n,{selected:r,defaultSelected:i=[],onSelectedChange:a,getRowLabel:o}={}){let[s,c]=e.useControllableState({value:r,defaultValue:i,onChange:a}),l=(0,t.useMemo)(()=>new Set(s),[s]),u=(0,t.useMemo)(()=>n.filter(e=>l.has(e)),[n,l]),d=u.length,f=n.length>0&&d===n.length,p=d>0&&!f,m=(0,t.useCallback)(e=>l.has(e),[l]),h=(0,t.useCallback)((e,t)=>{c(n=>{let r=n.includes(e),i=t??!r;return i===r?n:i?[...n,e]:n.filter(t=>t!==e)})},[c]),g=(0,t.useCallback)(e=>c(e?n.slice():[]),[n,c]);return{selected:u,count:d,allSelected:f,someSelected:p,isSelected:m,toggle:h,toggleAll:g,clear:(0,t.useCallback)(()=>c([]),[c]),getSelectProps:(0,t.useCallback)(e=>({checked:l.has(e),onCheckedChange:t=>h(e,t),rowLabel:o?o(e):String(e)}),[l,h,o]),getSelectAllProps:(0,t.useCallback)(()=>({checked:f,indeterminate:p,onCheckedChange:e=>g(p?!0:e)}),[f,p,g])}}exports.useTableSelection=i,exports.useTableSort=r;

package/dist/components/data-display/Table/useTable.d.ts

@@ -0,0 +1,118 @@
+/** Sort order of a column. Matches the values of the `aria-sort` attribute. */
+export type TableSortDirection = "ascending" | "descending" | "none";
+/** The active sort: which column, and in which direction. */
+export interface TableSortState<K extends string = string> {
+    /** Column key being sorted, or `null` when unsorted. */
+    key: K | null;
+    /** Direction of the sort. `"none"` when `key` is `null`. */
+    direction: TableSortDirection;
+}
+/** Options for `useTableSort`. */
+export interface UseTableSortOptions<T, K extends string> {
+    /** Sort applied on first render. @default { key: null, direction: "none" } */
+    initial?: TableSortState<NoInfer<K>>;
+    /**
+     * Custom ascending comparator for a column. Return a negative number when
+     * `a` sorts before `b`. The hook flips it for descending. When omitted,
+     * `row[key]` is compared: numbers numerically, dates by time, everything
+     * else as locale-aware strings with numeric collation.
+     */
+    compare?: (a: T, b: T, key: NoInfer<K>) => number;
+}
+/** What `useTableSort` returns. */
+export interface UseTableSortResult<T, K extends string> {
+    /** A sorted copy of `rows`. The input array is never mutated. */
+    sortedRows: T[];
+    /** The active sort. */
+    sort: TableSortState<K>;
+    /** Replace the active sort. */
+    setSort: (sort: TableSortState<K>) => void;
+    /** Direction for a column: the active direction for the sorted column, `"none"` for the rest. */
+    getSortDirection: (key: K) => TableSortDirection;
+    /**
+     * Sort by a column. With a `direction`, uses it; otherwise toggles
+     * ascending, then descending, then ascending again.
+     */
+    toggleSort: (key: K, direction?: TableSortDirection) => void;
+    /**
+     * Props to spread on a sortable `Table.HeaderCell`:
+     * `sortable`, `sortDirection`, and `onSort`.
+     */
+    getSortProps: (key: K) => {
+        sortable: true;
+        sortDirection: TableSortDirection;
+        onSort: (nextDirection: TableSortDirection) => void;
+    };
+}
+/**
+ * Client-side sorting state for a `Table`. Keeps one active column, sorts a
+ * copy of `rows` (stable), and hands out `Table.HeaderCell` props.
+ *
+ * ```tsx
+ * const { sortedRows, getSortProps } = useTableSort(players, {
+ *   initial: { key: "ppg", direction: "descending" },
+ * });
+ * <Table.HeaderCell {...getSortProps("ppg")}>PPG</Table.HeaderCell>
+ * ```
+ */
+export declare function useTableSort<T, K extends string = Extract<keyof T, string>>(rows: readonly T[], { initial, compare }?: UseTableSortOptions<T, K>): UseTableSortResult<T, K>;
+/** Options for `useTableSelection`. */
+export interface UseTableSelectionOptions<Id extends string | number> {
+    /** Selected ids (controlled). */
+    selected?: Id[];
+    /** Initially selected ids (uncontrolled). @default [] */
+    defaultSelected?: Id[];
+    /** Called with the next list of selected ids. */
+    onSelectedChange?: (selected: Id[]) => void;
+    /**
+     * Readable name for a row, used in its checkbox's accessible name
+     * ("Select row {name}"). @default String(id)
+     */
+    getRowLabel?: (id: Id) => string;
+}
+/** What `useTableSelection` returns. */
+export interface UseTableSelectionResult<Id extends string | number> {
+    /** Selected ids, in the order of `ids`. */
+    selected: Id[];
+    /** Number of selected rows. */
+    count: number;
+    /** Whether every row is selected (and there is at least one row). */
+    allSelected: boolean;
+    /** Whether some, but not all, rows are selected. Drives the indeterminate header box. */
+    someSelected: boolean;
+    /** Whether a row is selected. */
+    isSelected: (id: Id) => boolean;
+    /** Select or deselect one row. Without `checked`, toggles it. */
+    toggle: (id: Id, checked?: boolean) => void;
+    /** Select or deselect every row. */
+    toggleAll: (checked: boolean) => void;
+    /** Deselect every row. */
+    clear: () => void;
+    /** Props to spread on a row's `Table.SelectCell`. */
+    getSelectProps: (id: Id) => {
+        checked: boolean;
+        onCheckedChange: (checked: boolean) => void;
+        rowLabel: string;
+    };
+    /** Props to spread on `Table.SelectAllCell`. */
+    getSelectAllProps: () => {
+        checked: boolean;
+        indeterminate: boolean;
+        onCheckedChange: (checked: boolean) => void;
+    };
+}
+/**
+ * Row selection state for a `Table`, with select-all and a mixed state.
+ * Supports controlled (`selected` / `onSelectedChange`) and uncontrolled use.
+ * Ids that are no longer in `ids` are ignored.
+ *
+ * ```tsx
+ * const selection = useTableSelection(rows.map((r) => r.id), {
+ *   getRowLabel: (id) => byId[id].name,
+ * });
+ * <Table.SelectAllCell {...selection.getSelectAllProps()} />
+ * <Table.Row selected={selection.isSelected(row.id)}>
+ *   <Table.SelectCell {...selection.getSelectProps(row.id)} />
+ * ```
+ */
+export declare function useTableSelection<Id extends string | number>(ids: readonly Id[], { selected: selectedProp, defaultSelected, onSelectedChange, getRowLabel, }?: UseTableSelectionOptions<Id>): UseTableSelectionResult<Id>;

package/dist/components/data-display/Table/useTable.mjs

@@ -0,0 +1,89 @@
+import { useControllableState as e } from "../../../hooks/useControllableState.mjs";
+import { useCallback as t, useMemo as n, useState as r } from "react";
+//#region src/components/data-display/Table/useTable.ts
+function i(e, t) {
+	return e == null && t == null ? 0 : e == null ? 1 : t == null ? -1 : typeof e == "number" && typeof t == "number" ? e - t : e instanceof Date && t instanceof Date ? e.getTime() - t.getTime() : String(e).localeCompare(String(t), void 0, {
+		numeric: !0,
+		sensitivity: "base"
+	});
+}
+function a(e, { initial: a, compare: o } = {}) {
+	let [s, c] = r(a ?? {
+		key: null,
+		direction: "none"
+	}), l = n(() => {
+		let { key: t, direction: n } = s;
+		if (t === null || n === "none") return e.slice();
+		let r = n === "ascending" ? 1 : -1, a = o ? (e, n) => o(e, n, t) : (e, n) => i(e[t], n[t]);
+		return e.slice().sort((e, t) => a(e, t) * r);
+	}, [
+		e,
+		s,
+		o
+	]), u = t((e) => s.key === e ? s.direction : "none", [s]), d = t((e, t) => {
+		c((n) => t ? {
+			key: t === "none" ? null : e,
+			direction: t
+		} : n.key === e && n.direction === "ascending" ? {
+			key: e,
+			direction: "descending"
+		} : {
+			key: e,
+			direction: "ascending"
+		});
+	}, []);
+	return {
+		sortedRows: l,
+		sort: s,
+		setSort: c,
+		getSortDirection: u,
+		toggleSort: d,
+		getSortProps: t((e) => ({
+			sortable: !0,
+			sortDirection: u(e),
+			onSort: (t) => d(e, t)
+		}), [u, d])
+	};
+}
+function o(r, { selected: i, defaultSelected: a = [], onSelectedChange: o, getRowLabel: s } = {}) {
+	let [c, l] = e({
+		value: i,
+		defaultValue: a,
+		onChange: o
+	}), u = n(() => new Set(c), [c]), d = n(() => r.filter((e) => u.has(e)), [r, u]), f = d.length, p = r.length > 0 && f === r.length, m = f > 0 && !p, h = t((e) => u.has(e), [u]), g = t((e, t) => {
+		l((n) => {
+			let r = n.includes(e), i = t ?? !r;
+			return i === r ? n : i ? [...n, e] : n.filter((t) => t !== e);
+		});
+	}, [l]), _ = t((e) => l(e ? r.slice() : []), [r, l]);
+	return {
+		selected: d,
+		count: f,
+		allSelected: p,
+		someSelected: m,
+		isSelected: h,
+		toggle: g,
+		toggleAll: _,
+		clear: t(() => l([]), [l]),
+		getSelectProps: t((e) => ({
+			checked: u.has(e),
+			onCheckedChange: (t) => g(e, t),
+			rowLabel: s ? s(e) : String(e)
+		}), [
+			u,
+			g,
+			s
+		]),
+		getSelectAllProps: t(() => ({
+			checked: p,
+			indeterminate: m,
+			onCheckedChange: (e) => _(m ? !0 : e)
+		}), [
+			p,
+			m,
+			_
+		])
+	};
+}
+//#endregion
+export { o as useTableSelection, a as useTableSort };

package/dist/components/data-display/Timeline/Timeline.cjs.js

@@ -0,0 +1 @@
+const e=require("../../../i18n/en.cjs.js"),t=require("../../utilities/LocaleProvider/LocaleProvider.cjs.js"),n=require("../../../utils/refs.cjs.js"),r=require("../../../utils/cx.cjs.js"),i=require("../../utilities/VisuallyHidden/VisuallyHidden.cjs.js"),a=require("../../primitives/Icon/icons.cjs.js"),o=require("../Card/Card.cjs.js"),s=require("./Timeline.module.css.cjs.js");let c=require("react"),l=require("react/jsx-runtime");var u=e.en.timeline.status,d={sm:s.default.sm,md:s.default.md,lg:s.default.lg},f={vertical:s.default.vertical,horizontal:s.default.horizontal},p={start:s.default.alignStart,alternate:s.default.alignAlternate,end:s.default.alignEnd},m={solid:s.default.solid,dashed:s.default.dashed},h={neutral:s.default.neutral,primary:s.default.primary,accent:s.default.accent,success:s.default.success,warning:s.default.warning,danger:s.default.danger,info:s.default.info},g={complete:s.default.statusComplete,current:s.default.statusCurrent,upcoming:s.default.statusUpcoming,error:s.default.statusError},_=(0,c.createContext)({statusLabels:u});function v({orientation:e=`vertical`,align:i=`start`,size:a=`md`,variant:o=`solid`,statusLabels:u,scrollLabel:h,className:g,children:v,ref:y,...b}){let x=t.useMessages(),S=e===`horizontal`,C=(0,c.useRef)(null),w=(0,c.useRef)(null),[T,E]=(0,c.useState)(!1),D=(0,c.useCallback)(e=>{w.current=e,n.assignRef(y,e)},[y]);(0,c.useLayoutEffect)(()=>{if(!S)return;let e=C.current,t=w.current;if(!e||!t)return;let n=()=>E(e.scrollWidth>e.clientWidth);if(n(),typeof ResizeObserver>`u`)return;let r=new ResizeObserver(n);return r.observe(e),r.observe(t),()=>r.disconnect()},[S]);let O={statusLabels:{...x.timeline.status,...u}},k=(0,l.jsx)(`ol`,{role:`list`,...b,ref:D,className:r.cx(s.default.root,f[e],p[i],d[a],m[o],g),children:v});return(0,l.jsx)(_.Provider,{value:O,children:S?(0,l.jsx)(`div`,{ref:C,className:s.default.scroller,role:T?`region`:void 0,"aria-label":T?h??b[`aria-label`]??x.timeline.region:void 0,tabIndex:T?0:void 0,children:k}):k})}function y({title:e,description:t,time:n,dateTime:u,meta:d,icon:f,marker:p,tone:m,status:v,statusLabel:y,card:b=!1,className:x,children:S,...C}){let{statusLabels:w}=(0,c.useContext)(_),T=m??(v===`error`?`danger`:`primary`),E=v?y??w[v]:void 0,D=p==null?f==null?v?`status`:`dot`:`icon`:`custom`,O=null;D===`custom`?O=p:D===`icon`?O=f:v===`complete`?O=(0,l.jsx)(a.CheckIcon,{strokeWidth:3}):v===`error`&&(O=(0,l.jsx)(a.CloseIcon,{strokeWidth:3}));let k=n!=null||d!=null,A=(0,l.jsxs)(`div`,{className:s.default.body,children:[E&&(0,l.jsx)(i.VisuallyHidden,{children:`${E}: `}),e!=null&&(0,l.jsx)(`div`,{className:s.default.title,children:e}),k&&(0,l.jsxs)(`div`,{className:s.default.meta,children:[n!=null&&(u?(0,l.jsx)(`time`,{className:s.default.time,dateTime:u,children:n}):(0,l.jsx)(`span`,{className:s.default.time,children:n})),n!=null&&d!=null&&(0,l.jsx)(`span`,{className:s.default.separator,"aria-hidden":`true`}),d!=null&&(0,l.jsx)(`span`,{children:d})]}),t!=null&&(0,l.jsx)(`div`,{className:s.default.description,children:t}),S!=null&&(0,l.jsx)(`div`,{className:s.default.extra,children:S})]});return(0,l.jsxs)(`li`,{"aria-current":v===`current`?`step`:void 0,...C,className:r.cx(s.default.item,h[T],v&&g[v],x),"data-status":v,children:[(0,l.jsxs)(`div`,{className:s.default.rail,"aria-hidden":`true`,children:[(0,l.jsx)(`span`,{className:r.cx(s.default.marker,D===`dot`&&s.default.markerDot,D===`icon`&&s.default.markerIcon,D===`status`&&s.default.markerStatus,D===`custom`&&s.default.markerCustom),children:O}),(0,l.jsx)(`span`,{className:s.default.connector})]}),(0,l.jsx)(`div`,{className:r.cx(s.default.content,b&&s.default.contentCard),children:b?(0,l.jsx)(o.Card,{as:`div`,variant:`outline`,padding:`sm`,radius:`lg`,children:A}):A})]})}var b=Object.assign(v,{Item:y});exports.Timeline=b,exports.TimelineItem=y,exports.defaultTimelineStatusLabels=u;