@vjdesigns/vjdesigns-ui 0.0.0-stage → 2.0.0

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

@@ -0,0 +1,224 @@
+import { useLocale as e } from "../../utilities/LocaleProvider/LocaleProvider.mjs";
+import { useMergedRef as t } from "../../../hooks/useMergedRef.mjs";
+import { cx as n } from "../../../utils/cx.mjs";
+import { VisuallyHidden as r } from "../../utilities/VisuallyHidden/VisuallyHidden.mjs";
+import { ArrowDownIcon as i, ArrowUpIcon as a, MinusIcon as o } from "../../primitives/Icon/icons.mjs";
+import { Progress as s } from "../../feedback/Progress/Progress.mjs";
+import c from "./Stat.module.css.mjs";
+import { createContext as l, useContext as u, useEffect as d, useMemo as f, useRef as p, useState as m } from "react";
+import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
+//#region src/components/data-display/Stat/Stat.tsx
+var ee = {
+	sm: c.sm,
+	md: c.md,
+	lg: c.lg,
+	xl: c.xl
+}, te = {
+	start: c.alignStart,
+	center: c.alignCenter,
+	end: c.alignEnd
+}, ne = {
+	plain: c.plain,
+	card: c.card,
+	accent: c.accent
+}, re = {
+	start: c.accentStart,
+	top: c.accentTop
+}, ie = {
+	neutral: c.toneNeutral,
+	primary: c.tonePrimary,
+	accent: c.toneAccent,
+	success: c.toneSuccess,
+	warning: c.toneWarning,
+	danger: c.toneDanger,
+	info: c.toneInfo
+}, v = {
+	neutral: c.barNeutral,
+	primary: c.barPrimary,
+	accent: c.barAccent,
+	success: c.barSuccess,
+	warning: c.barWarning,
+	danger: c.barDanger,
+	info: c.barInfo
+}, ae = {
+	increase: a,
+	decrease: i,
+	neutral: o
+}, y = {
+	style: "percent",
+	maximumFractionDigits: 1
+}, b = 1200, x = (e) => 1 - (1 - e) ** 3, S = () => typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches, C = (e) => {
+	if (!Number.isFinite(e)) return 0;
+	let [, t = ""] = String(e).split(".");
+	return Math.min(4, t.replace(/e.*$/, "").length);
+};
+function w(e) {
+	return e > 0 ? "increase" : e < 0 ? "decrease" : "neutral";
+}
+function oe(e, t, n) {
+	let r = t && e !== void 0, [i, a] = m(() => r && !S() ? 0 : e), o = p(i);
+	return o.current = i, d(() => {
+		if (!r || S()) {
+			a(e);
+			return;
+		}
+		if (!n) return;
+		let t = o.current ?? 0, i = e, s = 10 ** C(i), c = 0, l, u = (e) => {
+			l ??= e;
+			let n = Math.min(1, (e - l) / b), r = t + (i - t) * x(n);
+			a(n >= 1 ? i : Math.round(r * s) / s), n < 1 && (c = requestAnimationFrame(u));
+		}, d = () => {
+			c = requestAnimationFrame(u);
+		};
+		if (typeof IntersectionObserver > "u") return d(), () => cancelAnimationFrame(c);
+		let f = new IntersectionObserver((e) => {
+			e.some((e) => e.isIntersecting) && (f.disconnect(), d());
+		}, { threshold: .25 });
+		return f.observe(n), () => {
+			f.disconnect(), cancelAnimationFrame(c);
+		};
+	}, [
+		r,
+		e,
+		n
+	]), i;
+}
+var T = l(!1), E = ({ label: i, value: a, format: o, locale: l, prefix: d, suffix: p, unit: b, helpText: x, icon: S, size: C = "md", align: E = "start", variant: D = "plain", accentPosition: O = "start", tone: k, change: A, changeType: j, positiveIsGood: M = !0, changeFormat: N = y, comparisonLabel: P, changeLabel: se, progress: F, sparkline: I, animate: L = !1, loading: R = !1, loadingLabel: z, className: B, ref: V, ...H }) => {
+	let { messages: U, locale: W } = e(), G = l ?? W, ce = z ?? U.stat.loading, le = u(T), [ue, de] = m(null), fe = t(de, V), K = typeof a == "number", q = f(() => new Intl.NumberFormat(G, o), [G, o]), pe = f(() => new Intl.NumberFormat(G, N), [G, N]), J = oe(K ? a : void 0, L && K && !R, ue), Y = K ? q.format(a) : void 0, X = K && J !== void 0 ? q.format(J) : Y, me = L && K, Z = A !== void 0 && Number.isFinite(A), Q = j ?? (Z ? w(A) : "neutral"), he = Q === "neutral" ? "neutral" : Q === "increase" === M ? "positive" : "negative", $ = Z ? pe.format(Math.abs(A)) : "", ge = Z ? Q === "neutral" ? $ : `${Q === "increase" ? "+" : "−"}${$}` : "", _e = se ?? [Q === "increase" ? U.stat.increased($) : Q === "decrease" ? U.stat.decreased($) : A === 0 ? U.stat.noChange : U.stat.changed($), P].filter(Boolean).join(" "), ve = ae[Q], ye = typeof i == "string" || typeof i == "number" ? U.stat.progressNamed(String(i)) : U.stat.progress, be = le ? "div" : "dl", xe = k ?? "accent";
+	return /* @__PURE__ */ _(be, {
+		...H,
+		ref: fe,
+		"aria-busy": R || void 0,
+		"data-variant": D,
+		className: n(c.root, ee[C], te[E], ne[D], D === "accent" && re[O], D === "accent" && v[xe], ie[k ?? "primary"], I != null && c.hasSparkline, B),
+		children: [
+			/* @__PURE__ */ _("dt", {
+				className: c.labelRow,
+				children: [S != null && /* @__PURE__ */ g("span", {
+					className: c.icon,
+					"aria-hidden": "true",
+					children: S
+				}), /* @__PURE__ */ g("span", {
+					className: c.label,
+					children: i
+				})]
+			}),
+			/* @__PURE__ */ g("dd", {
+				className: c.valueRow,
+				children: R ? /* @__PURE__ */ _(h, { children: [
+					/* @__PURE__ */ g("span", {
+						className: n(c.skeleton, c.skeletonValue),
+						"aria-hidden": "true"
+					}),
+					Z && /* @__PURE__ */ g("span", {
+						className: n(c.skeleton, c.skeletonChange),
+						"aria-hidden": "true"
+					}),
+					/* @__PURE__ */ g(r, { children: ce })
+				] }) : /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ _("span", {
+					className: c.value,
+					children: [
+						d != null && /* @__PURE__ */ g("span", {
+							className: c.affix,
+							children: d
+						}),
+						me ? /* @__PURE__ */ _("span", {
+							className: c.counter,
+							children: [
+								/* @__PURE__ */ g("span", {
+									className: c.counterGhost,
+									"aria-hidden": "true",
+									children: Y
+								}),
+								/* @__PURE__ */ g("span", {
+									className: c.counterLive,
+									"aria-hidden": "true",
+									children: X
+								}),
+								/* @__PURE__ */ g(r, { children: Y })
+							]
+						}) : /* @__PURE__ */ g("span", {
+							className: c.number,
+							children: K ? Y : a
+						}),
+						p != null && /* @__PURE__ */ g("span", {
+							className: c.affix,
+							children: p
+						}),
+						b != null && /* @__PURE__ */ g("span", {
+							className: c.unit,
+							children: b
+						})
+					]
+				}), Z && /* @__PURE__ */ _("span", {
+					className: c.change,
+					"data-trend": Q,
+					"data-sentiment": he,
+					children: [/* @__PURE__ */ _("span", {
+						className: c.changeVisible,
+						"aria-hidden": "true",
+						children: [/* @__PURE__ */ g(ve, {
+							className: c.changeIcon,
+							strokeWidth: 2.5
+						}), ge]
+					}), /* @__PURE__ */ g(r, { children: `, ${_e}` })]
+				})] })
+			}),
+			I != null && /* @__PURE__ */ g("dd", {
+				className: c.sparkline,
+				children: I
+			}),
+			x != null && /* @__PURE__ */ g("dd", {
+				className: c.helpText,
+				children: x
+			}),
+			F && /* @__PURE__ */ g("dd", {
+				className: c.progress,
+				children: /* @__PURE__ */ g(s, {
+					size: "sm",
+					value: R ? null : F.value,
+					max: F.max ?? 100,
+					tone: F.tone ?? k ?? "primary",
+					label: F.label,
+					showValue: F.showValue,
+					valueText: F.valueText,
+					"aria-label": F.label ? void 0 : ye
+				})
+			})
+		]
+	});
+}, D = [
+	"base",
+	"sm",
+	"md",
+	"lg",
+	"xl",
+	"2xl"
+], O = {
+	plain: c.groupPlain,
+	card: c.groupCard
+}, k = ({ children: e, columns: t, divided: r = !1, variant: i = "plain", className: a, style: o, ...s }) => {
+	let l;
+	if (t !== void 0) {
+		let e = {}, n;
+		for (let r of D) {
+			let i = typeof t == "number" ? r === "base" ? t : void 0 : t[r];
+			i !== void 0 && (n = Math.max(1, Math.round(i))), n !== void 0 && (e[`--_cols-${r}`] = n);
+		}
+		l = e;
+	}
+	return /* @__PURE__ */ g(T.Provider, {
+		value: !0,
+		children: /* @__PURE__ */ g("dl", {
+			...s,
+			className: n(c.group, O[i], t === void 0 ? c.groupAuto : c.groupColumns, r && c.groupDivided, a),
+			style: l ? {
+				...l,
+				...o
+			} : o,
+			children: e
+		})
+	});
+};
+//#endregion
+export { E as Stat, k as StatGroup, w as getStatChangeType };

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

@@ -0,0 +1 @@
+var e=`_root_1b36i_23`,t=`_labelRow_1b36i_95`,n=`_label_1b36i_95`,r=`_icon_1b36i_127`,i=`_valueRow_1b36i_165`,a=`_value_1b36i_165`,o=`_number_1b36i_207`,s=`_affix_1b36i_217`,c=`_unit_1b36i_231`,l=`_counter_1b36i_251`,u=`_counterGhost_1b36i_259`,d=`_counterLive_1b36i_261`,f=`_alignStart_1b36i_277`,p=`_alignCenter_1b36i_283`,m=`_alignEnd_1b36i_289`,h=`_change_1b36i_301`,g=`_changeVisible_1b36i_317`,_=`_changeIcon_1b36i_351`,v=`_helpText_1b36i_391`,y=`_progress_1b36i_403`,b=`_hasSparkline_1b36i_411`,x=`_sparkline_1b36i_431`,S=`_sm_1b36i_499`,C=`_md_1b36i_517`,w=`_lg_1b36i_535`,T=`_xl_1b36i_553`,E=`_plain_1b36i_575`,D=`_card_1b36i_583`,O=`_accent_1b36i_599`,k=`_accentStart_1b36i_607`,A=`_accentTop_1b36i_621`,j=`_toneNeutral_1b36i_639`,M=`_tonePrimary_1b36i_647`,N=`_toneAccent_1b36i_655`,P=`_toneSuccess_1b36i_663`,F=`_toneWarning_1b36i_671`,I=`_toneDanger_1b36i_679`,L=`_toneInfo_1b36i_687`,R=`_barNeutral_1b36i_701`,z=`_barPrimary_1b36i_707`,B=`_barAccent_1b36i_713`,V=`_barSuccess_1b36i_719`,H=`_barWarning_1b36i_725`,U=`_barDanger_1b36i_731`,W=`_barInfo_1b36i_737`,G=`_skeleton_1b36i_749`,K=`_skeletonValue_1b36i_763`,q=`_skeletonChange_1b36i_775`,J=`_group_1b36i_827`,Y=`_groupAuto_1b36i_841`,X=`_groupColumns_1b36i_849`,Z=`_groupPlain_1b36i_909`,Q=`_groupCard_1b36i_917`,$=`_groupDivided_1b36i_939`,ee={root:e,labelRow:t,label:n,icon:r,valueRow:i,value:a,number:o,affix:s,unit:c,counter:l,counterGhost:u,counterLive:d,alignStart:f,alignCenter:p,alignEnd:m,change:h,changeVisible:g,changeIcon:_,helpText:v,progress:y,hasSparkline:b,sparkline:x,sm:S,md:C,lg:w,xl:T,plain:E,card:D,accent:O,accentStart:k,accentTop:A,toneNeutral:j,tonePrimary:M,toneAccent:N,toneSuccess:P,toneWarning:F,toneDanger:I,toneInfo:L,barNeutral:R,barPrimary:z,barAccent:B,barSuccess:V,barWarning:H,barDanger:U,barInfo:W,skeleton:G,"stat-pulse":`_stat-pulse_1b36i_1`,skeletonValue:K,skeletonChange:q,group:J,groupAuto:Y,groupColumns:X,groupPlain:Z,groupCard:Q,groupDivided:$};exports.accent=O,exports.accentStart=k,exports.accentTop=A,exports.affix=s,exports.alignCenter=p,exports.alignEnd=m,exports.alignStart=f,exports.barAccent=B,exports.barDanger=U,exports.barInfo=W,exports.barNeutral=R,exports.barPrimary=z,exports.barSuccess=V,exports.barWarning=H,exports.card=D,exports.change=h,exports.changeIcon=_,exports.changeVisible=g,exports.counter=l,exports.counterGhost=u,exports.counterLive=d,exports.default=ee,exports.group=J,exports.groupAuto=Y,exports.groupCard=Q,exports.groupColumns=X,exports.groupDivided=$,exports.groupPlain=Z,exports.hasSparkline=b,exports.helpText=v,exports.icon=r,exports.label=n,exports.labelRow=t,exports.lg=w,exports.md=C,exports.number=o,exports.plain=E,exports.progress=y,exports.root=e,exports.skeleton=G,exports.skeletonChange=q,exports.skeletonValue=K,exports.sm=S,exports.sparkline=x,exports.toneAccent=N,exports.toneDanger=I,exports.toneInfo=L,exports.toneNeutral=j,exports.tonePrimary=M,exports.toneSuccess=P,exports.toneWarning=F,exports.unit=c,exports.value=a,exports.valueRow=i,exports.xl=T;

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

@@ -0,0 +1,60 @@
+//#region src/components/data-display/Stat/Stat.module.css
+var e = "_root_1b36i_23", t = "_labelRow_1b36i_95", n = "_label_1b36i_95", r = "_icon_1b36i_127", i = "_valueRow_1b36i_165", a = "_value_1b36i_165", o = "_number_1b36i_207", s = "_affix_1b36i_217", c = "_unit_1b36i_231", l = "_counter_1b36i_251", u = "_counterGhost_1b36i_259", d = "_counterLive_1b36i_261", f = "_alignStart_1b36i_277", p = "_alignCenter_1b36i_283", m = "_alignEnd_1b36i_289", h = "_change_1b36i_301", g = "_changeVisible_1b36i_317", _ = "_changeIcon_1b36i_351", v = "_helpText_1b36i_391", y = "_progress_1b36i_403", b = "_hasSparkline_1b36i_411", x = "_sparkline_1b36i_431", S = "_sm_1b36i_499", C = "_md_1b36i_517", w = "_lg_1b36i_535", T = "_xl_1b36i_553", E = "_plain_1b36i_575", D = "_card_1b36i_583", O = "_accent_1b36i_599", k = "_accentStart_1b36i_607", A = "_accentTop_1b36i_621", j = "_toneNeutral_1b36i_639", M = "_tonePrimary_1b36i_647", N = "_toneAccent_1b36i_655", P = "_toneSuccess_1b36i_663", F = "_toneWarning_1b36i_671", I = "_toneDanger_1b36i_679", L = "_toneInfo_1b36i_687", R = "_barNeutral_1b36i_701", z = "_barPrimary_1b36i_707", B = "_barAccent_1b36i_713", V = "_barSuccess_1b36i_719", H = "_barWarning_1b36i_725", U = "_barDanger_1b36i_731", W = "_barInfo_1b36i_737", G = "_skeleton_1b36i_749", K = "_skeletonValue_1b36i_763", q = "_skeletonChange_1b36i_775", J = "_group_1b36i_827", Y = "_groupAuto_1b36i_841", X = "_groupColumns_1b36i_849", Z = "_groupPlain_1b36i_909", Q = "_groupCard_1b36i_917", $ = "_groupDivided_1b36i_939", ee = {
+	root: e,
+	labelRow: t,
+	label: n,
+	icon: r,
+	valueRow: i,
+	value: a,
+	number: o,
+	affix: s,
+	unit: c,
+	counter: l,
+	counterGhost: u,
+	counterLive: d,
+	alignStart: f,
+	alignCenter: p,
+	alignEnd: m,
+	change: h,
+	changeVisible: g,
+	changeIcon: _,
+	helpText: v,
+	progress: y,
+	hasSparkline: b,
+	sparkline: x,
+	sm: S,
+	md: C,
+	lg: w,
+	xl: T,
+	plain: E,
+	card: D,
+	accent: O,
+	accentStart: k,
+	accentTop: A,
+	toneNeutral: j,
+	tonePrimary: M,
+	toneAccent: N,
+	toneSuccess: P,
+	toneWarning: F,
+	toneDanger: I,
+	toneInfo: L,
+	barNeutral: R,
+	barPrimary: z,
+	barAccent: B,
+	barSuccess: V,
+	barWarning: H,
+	barDanger: U,
+	barInfo: W,
+	skeleton: G,
+	"stat-pulse": "_stat-pulse_1b36i_1",
+	skeletonValue: K,
+	skeletonChange: q,
+	group: J,
+	groupAuto: Y,
+	groupColumns: X,
+	groupPlain: Z,
+	groupCard: Q,
+	groupDivided: $
+};
+//#endregion
+export { O as accent, k as accentStart, A as accentTop, s as affix, p as alignCenter, m as alignEnd, f as alignStart, B as barAccent, U as barDanger, W as barInfo, R as barNeutral, z as barPrimary, V as barSuccess, H as barWarning, D as card, h as change, _ as changeIcon, g as changeVisible, l as counter, u as counterGhost, d as counterLive, ee as default, J as group, Y as groupAuto, Q as groupCard, X as groupColumns, $ as groupDivided, Z as groupPlain, b as hasSparkline, v as helpText, r as icon, n as label, t as labelRow, w as lg, C as md, o as number, E as plain, y as progress, e as root, G as skeleton, q as skeletonChange, K as skeletonValue, S as sm, x as sparkline, N as toneAccent, I as toneDanger, L as toneInfo, j as toneNeutral, M as tonePrimary, P as toneSuccess, F as toneWarning, c as unit, a as value, i as valueRow, T as xl };

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

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

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

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

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

@@ -0,0 +1,255 @@
+import { ComponentPropsWithRef, CSSProperties, ReactNode } from 'react';
+import { TableSortDirection } from './useTable';
+export * from './useTable';
+/**
+ * Visual style.
+ * - `plain`: row dividers only.
+ * - `striped`: alternating sunken rows plus dividers.
+ * - `outline`: a rounded (`--radius-xl`) card-style frame around the table.
+ */
+export type TableVariant = "plain" | "striped" | "outline";
+/** Cell padding and row height. `comfortable` (default) is already generous. */
+export type TableDensity = "compact" | "comfortable" | "spacious";
+/** CSS `table-layout`. `fixed` uses the first row's widths and is faster and more predictable for truncation. */
+export type TableLayout = "auto" | "fixed";
+/** Where the caption sits. */
+export type TableCaptionSide = "top" | "bottom";
+/** Viewport width below which rows turn into stacked cards: `sm` < 640px, `md` < 768px. */
+export type TableStackBreakpoint = "sm" | "md";
+/** Horizontal alignment of cell content. Logical: `end` is the right edge in LTR. */
+export type TableCellAlign = "start" | "center" | "end";
+/** Props for `Table`. */
+export interface TableProps extends ComponentPropsWithRef<"table"> {
+    /** Visual style. @default "plain" */
+    variant?: TableVariant;
+    /** Cell padding and row height. @default "comfortable" */
+    density?: TableDensity;
+    /** Keeps the header row visible while the body scrolls. Combine with `maxHeight`. @default false */
+    stickyHeader?: boolean;
+    /**
+     * Maximum height of the scroll container (any CSS length). Rows past it
+     * scroll vertically. @default "var(--container-xs)" when `stickyHeader`, otherwise none
+     */
+    maxHeight?: string | number;
+    /** Pins the first column while the table scrolls horizontally. @default false */
+    stickyFirstColumn?: boolean;
+    /** Highlights body rows under the pointer. @default false */
+    hoverable?: boolean;
+    /** CSS `table-layout`. @default "auto" */
+    layout?: TableLayout;
+    /** Stretches the table to the container's width. @default true */
+    fullWidth?: boolean;
+    /** Caption placement. @default "top" */
+    captionSide?: TableCaptionSide;
+    /**
+     * Shows a spinner over the table, dims the body, and sets `aria-busy` on
+     * the `<table>`. Keep previous rows rendered so the layout doesn't jump.
+     * @default false
+     */
+    loading?: boolean;
+    /** Text announced by the loading spinner. @default "Loading" */
+    loadingLabel?: string;
+    /**
+     * Turns rows into stacked cards below this viewport width, labelling each
+     * value with its column header (`data-label`). While stacked, every part
+     * gets an explicit ARIA table role (`table`, `rowgroup`, `row`,
+     * `columnheader`, `cell`), because some browsers drop native table
+     * semantics when CSS changes a table's `display`. The header row is
+     * visually hidden but stays in the accessibility tree.
+     */
+    stackBelow?: TableStackBreakpoint;
+    /**
+     * Accessible name for the scroll region, used when the table overflows and
+     * has no `Table.Caption`, `aria-label`, or `aria-labelledby`.
+     * @default "Scrollable table"
+     */
+    scrollLabel?: string;
+    /** Class name for the outer frame. Every other prop goes on the `<table>`. */
+    className?: string;
+    /** Inline style for the outer frame. */
+    style?: CSSProperties;
+    /** Table sections and caption. */
+    children?: ReactNode;
+}
+/**
+ * A semantic data table: a real `<table>` with `<caption>`, `<thead>`,
+ * `<tbody>`, and `<th scope>` headers, inside a scroll container.
+ *
+ * When the table overflows, the container becomes a focusable, named
+ * `role="region"` so keyboard users can scroll it (SC 2.1.1), and soft edge
+ * shadows show that more content is hidden. This is a static table, not an
+ * ARIA grid: Tab moves between interactive controls (sort buttons,
+ * checkboxes, links), and there is no cell-by-cell arrow-key navigation.
+ *
+ * `className` and `style` go on the outer frame; `ref`, `id`, `aria-*`,
+ * `data-*`, and the rest go on the `<table>`.
+ *
+ * ```tsx
+ * <Table variant="outline" hoverable>
+ *   <Table.Caption>Roster</Table.Caption>
+ *   <Table.Head>
+ *     <Table.Row>
+ *       <Table.HeaderCell>Player</Table.HeaderCell>
+ *       <Table.HeaderCell numeric>PPG</Table.HeaderCell>
+ *     </Table.Row>
+ *   </Table.Head>
+ *   <Table.Body>
+ *     <Table.Row>
+ *       <Table.HeaderCell scope="row">Maya Brooks</Table.HeaderCell>
+ *       <Table.Cell numeric>18.4</Table.Cell>
+ *     </Table.Row>
+ *   </Table.Body>
+ * </Table>
+ * ```
+ */
+declare function TableRoot({ variant, density, stickyHeader, maxHeight, stickyFirstColumn, hoverable, layout, fullWidth, captionSide, loading, loadingLabel: loadingLabelProp, stackBelow, scrollLabel: scrollLabelProp, className, style, children, ref, "aria-busy": ariaBusy, ...rest }: TableProps): import("react").JSX.Element;
+/** Props for `Table.Caption`. */
+export type TableCaptionProps = ComponentPropsWithRef<"caption">;
+/**
+ * The table's title (`<caption>`). It names the table and, when the table
+ * scrolls, its scroll region. Strongly recommended on every table.
+ */
+export declare function TableCaption({ className, id: idProp, ...props }: TableCaptionProps): import("react").JSX.Element;
+/** Props for `Table.Head`. */
+export type TableHeadProps = ComponentPropsWithRef<"thead">;
+/** Props for `Table.Body`. */
+export type TableBodyProps = ComponentPropsWithRef<"tbody">;
+/** Props for `Table.Foot`. */
+export type TableFootProps = ComponentPropsWithRef<"tfoot">;
+/** The header section (`<thead>`). Its last row supplies column labels for `stackBelow`. */
+export declare function TableHead({ className, ...props }: TableHeadProps): import("react").JSX.Element;
+/** The body section (`<tbody>`). */
+export declare function TableBody({ className, ...props }: TableBodyProps): import("react").JSX.Element;
+/** The footer section (`<tfoot>`), for totals and summaries. */
+export declare function TableFoot({ className, ...props }: TableFootProps): import("react").JSX.Element;
+/** Props for `Table.Row`. */
+export interface TableRowProps extends ComponentPropsWithRef<"tr"> {
+    /**
+     * Shows the row as selected. Visual only: `aria-selected` is not valid on
+     * rows of a plain `<table>` (only inside `role="grid"` / `treegrid`), so the
+     * selected state is conveyed to assistive technology by the row's checked
+     * `Table.SelectCell` checkbox. Pair the two.
+     * @default false
+     */
+    selected?: boolean;
+}
+/** A table row (`<tr>`). */
+export declare function TableRow({ selected, className, ...props }: TableRowProps): import("react").JSX.Element;
+interface CellStyleProps {
+    /** Horizontal alignment. @default "start" ("end" when `numeric`) */
+    align?: TableCellAlign;
+    /** Tabular, end-aligned numbers in the display font. @default false */
+    numeric?: boolean;
+    /**
+     * Keeps content on one line and cuts it off with an ellipsis. Works best
+     * with `layout="fixed"` or a `width`. String content also gets a `title`
+     * tooltip; screen readers always read the full text.
+     * @default false
+     */
+    truncate?: boolean;
+    /** Column width (a number of pixels or any CSS length). */
+    width?: number | string;
+}
+/** Props for `Table.HeaderCell`. */
+export interface TableHeaderCellProps extends Omit<ComponentPropsWithRef<"th">, "align" | "width">, CellStyleProps {
+    /**
+     * Which cells this header labels. @default "col" in `Table.Head` and
+     * `Table.Foot`, "row" in `Table.Body` (use a header cell for each row's
+     * key column, such as a player's name)
+     */
+    scope?: "col" | "row" | "colgroup" | "rowgroup";
+    /** Renders the header as a sort button. @default false */
+    sortable?: boolean;
+    /** Current sort of this column. Sets `aria-sort` when not `"none"`. @default "none" */
+    sortDirection?: TableSortDirection;
+    /**
+     * Called when the sort button is pressed, with the suggested next direction
+     * (`ascending` from none or descending, `descending` from ascending).
+     */
+    onSort?: (nextDirection: TableSortDirection) => void;
+}
+/**
+ * A header cell (`<th>`). With `sortable`, the whole cell is a real
+ * `<button>` and the header carries `aria-sort` while it is the sorted column.
+ * The sort icon shows the direction by shape (up arrow, down arrow, or a
+ * neutral double arrow), not by color alone.
+ */
+export declare function TableHeaderCell({ scope: scopeProp, sortable, sortDirection, onSort, align, numeric, truncate, width, className, style, children, title, ...props }: TableHeaderCellProps): import("react").JSX.Element;
+/** Props for `Table.Cell`. */
+export interface TableCellProps extends Omit<ComponentPropsWithRef<"td">, "align" | "width">, CellStyleProps {
+    /**
+     * Column label shown beside the value when rows are stacked (`stackBelow`).
+     * Defaults to the matching header cell's text.
+     */
+    label?: string;
+}
+/** A data cell (`<td>`). */
+export declare function TableCell({ align, numeric, truncate, width, label, className, style, children, title, ...props }: TableCellProps): import("react").JSX.Element;
+/** Props for `Table.SelectCell`. */
+export interface TableSelectCellProps extends Omit<ComponentPropsWithRef<"td">, "onChange" | "children"> {
+    /** Whether the row is selected. */
+    checked: boolean;
+    /** Called with the next checked state. */
+    onCheckedChange: (checked: boolean) => void;
+    /**
+     * Readable name of the row, used for the checkbox's accessible name:
+     * "Select row {rowLabel}". Ignored when `checkboxLabel` is set.
+     */
+    rowLabel?: string;
+    /** Full accessible name for the checkbox, overriding the "Select row" pattern. */
+    checkboxLabel?: string;
+    /** Prevents changing this row's selection. @default false */
+    disabled?: boolean;
+}
+/**
+ * A data cell holding the row's selection checkbox. Pair with `selected` on
+ * the `Table.Row`. Give it a `rowLabel` (or `checkboxLabel`) so each
+ * checkbox has a unique accessible name.
+ */
+export declare function TableSelectCell({ checked, onCheckedChange, rowLabel, checkboxLabel, disabled, className, ...props }: TableSelectCellProps): import("react").JSX.Element;
+/** Props for `Table.SelectAllCell`. */
+export interface TableSelectAllCellProps extends Omit<ComponentPropsWithRef<"th">, "onChange" | "children"> {
+    /** Whether every row is selected. */
+    checked: boolean;
+    /** Whether some, but not all, rows are selected (mixed state). @default false */
+    indeterminate?: boolean;
+    /** Called with the next checked state. */
+    onCheckedChange: (checked: boolean) => void;
+    /** Accessible name for the checkbox. @default "Select all rows" */
+    checkboxLabel?: string;
+    /** Prevents changing the selection. @default false */
+    disabled?: boolean;
+}
+/**
+ * A header cell (`<th scope="col">`) with a "select all" checkbox. Shows the
+ * mixed state (`aria-checked="mixed"`) when some rows are selected.
+ */
+export declare function TableSelectAllCell({ checked, indeterminate, onCheckedChange, checkboxLabel: checkboxLabelProp, disabled, className, ...props }: TableSelectAllCellProps): import("react").JSX.Element;
+/** Props for `Table.Empty`. */
+export interface TableEmptyProps extends Omit<ComponentPropsWithRef<"tr">, "title"> {
+    /** Number of columns to span. @default the measured header column count */
+    colSpan?: number;
+    /** Decorative icon above the message. */
+    icon?: ReactNode;
+    /** Bold heading, such as "No players yet". */
+    heading?: ReactNode;
+    /** Supporting message. */
+    children?: ReactNode;
+    /** An action, such as a "Clear filters" button. */
+    action?: ReactNode;
+}
+/** A full-width row for an empty result. Place it inside `Table.Body`. */
+export declare function TableEmpty({ colSpan, icon, heading, children, action, className, ...props }: TableEmptyProps): import("react").JSX.Element;
+/** Semantic data table. See `TableRoot` docs above; parts are attached as `Table.*`. */
+export declare const Table: typeof TableRoot & {
+    Caption: typeof TableCaption;
+    Head: typeof TableHead;
+    Body: typeof TableBody;
+    Foot: typeof TableFoot;
+    Row: typeof TableRow;
+    HeaderCell: typeof TableHeaderCell;
+    Cell: typeof TableCell;
+    SelectCell: typeof TableSelectCell;
+    SelectAllCell: typeof TableSelectAllCell;
+    Empty: typeof TableEmpty;
+};