@jfrader/ui 0.4.0 → 0.5.1

package/dist/slider-DVG6-Awh.js

@@ -0,0 +1,308 @@
+'use client';
+import { r as e, t } from "./sx-Dx9JUKp5.js";
+import { n } from "./focus-ring-BK5W5_NY.js";
+import { n as r, r as i } from "./media-8yrN85VT.js";
+import { t as ee } from "./visually-hidden-BJdvqqvn.js";
+import { a as te, c as a, d as o, f as ne, g as s, h as re, i as ie, l as ae, m as c, n as l, o as oe, p as se, r as u, s as ce, t as d, u as le } from "./use-slider-interaction-ChL-208h.js";
+import { useState as ue } from "react";
+import { vars as f } from "@jfrader/tokens/vars";
+import { createElement as p } from "@emotion/react";
+import { jsx as m, jsxs as h } from "@emotion/react/jsx-runtime";
+import { MotionConfig as g, motion as _, useReducedMotion as de } from "motion/react";
+//#region src/components/slider/slider.tsx
+var fe = {
+	type: "spring",
+	stiffness: 420,
+	damping: 30
+}, pe = 8, me = e(c, { label: "slider" }), he = e({
+	position: "absolute",
+	insetInline: 0,
+	insetBlockStart: "50%",
+	transform: "translateY(-50%)",
+	blockSize: f.space[1],
+	boxSizing: "border-box",
+	border: `1px solid ${f.color.borderControl}`,
+	borderRadius: f.radius.full,
+	background: f.color.surfaceInset,
+	pointerEvents: "none",
+	[r]: {
+		forcedColorAdjust: "none",
+		background: "Canvas",
+		borderColor: "CanvasText"
+	}
+}), ge = e({
+	position: "absolute",
+	insetBlock: 0,
+	background: f.color.accent,
+	borderRadius: f.radius.full,
+	[r]: { background: "Highlight" }
+}), _e = e({
+	position: "absolute",
+	insetBlockStart: "50%",
+	transform: "translate(-50%, -50%)",
+	"&:dir(rtl)": { transform: "translate(50%, -50%)" },
+	inlineSize: f.space[8],
+	blockSize: f.space[8],
+	display: "grid",
+	placeItems: "center",
+	borderRadius: f.radius.full,
+	cursor: "grab",
+	"&:focus-visible": {
+		...n,
+		zIndex: 2
+	},
+	"&[data-dragging]": {
+		cursor: "grabbing",
+		zIndex: 3
+	},
+	"&[aria-disabled=\"true\"]": { cursor: "default" }
+}), ve = e({
+	inlineSize: f.space[6],
+	blockSize: f.space[6],
+	boxSizing: "border-box",
+	border: `2px solid ${f.color.borderControl}`,
+	borderRadius: f.radius.full,
+	background: f.color.surfaceRaised,
+	boxShadow: f.shadow.raised,
+	pointerEvents: "none",
+	[r]: {
+		forcedColorAdjust: "none",
+		background: "Canvas",
+		borderColor: "CanvasText",
+		boxShadow: "none"
+	}
+}), ye = e({
+	position: "absolute",
+	insetBlockEnd: `calc(100% + ${f.space[2]})`,
+	paddingInline: f.space[2],
+	paddingBlock: f.space[1],
+	inlineSize: "max-content",
+	maxInlineSize: "min(24rem, 80vw)",
+	overflowWrap: "anywhere",
+	border: `1px solid ${f.color.borderControl}`,
+	borderRadius: f.radius.md,
+	background: f.color.surfaceRaised,
+	color: f.color.text,
+	boxShadow: f.shadow.raised,
+	pointerEvents: "none",
+	fontSize: f.textSize.xs,
+	opacity: 0,
+	transition: `opacity ${f.motion.duration.fast} ${f.motion.easeStandard}`,
+	"[data-dragging] > &, [data-slider-thumb]:focus-visible > &": { opacity: 1 },
+	[i]: { transitionDuration: "0s" },
+	[r]: {
+		borderColor: "CanvasText",
+		boxShadow: "none"
+	}
+}), be = e({
+	position: "absolute",
+	insetBlockStart: "50%",
+	transform: "translate(-50%, -50%)",
+	inlineSize: f.space[1],
+	blockSize: f.space[2],
+	border: `1px solid ${f.color.borderControl}`,
+	background: f.color.surfaceRaised,
+	boxSizing: "border-box",
+	pointerEvents: "none",
+	[r]: {
+		background: "Canvas",
+		borderColor: "CanvasText"
+	}
+});
+function v(e) {
+	let { ref: n, type: r = "single", value: i, defaultValue: c, label: f, description: v, error: y, invalid: b = !1, disabled: x = !1, min: S = 0, max: C = 100, step: w = 1, largeStep: T, minStepsBetweenThumbs: E = 0, marks: D = [], thumbLabels: O, locale: k, formatOptions: A, formatValue: j, showValue: M = !0, start: N, end: P, name: F, size: I = "md", slotProps: L, onValueChange: xe, onValueCommit: Se, className: Ce, sx: we, onKeyDown: Te, "aria-label": Ee, "aria-labelledby": De, "aria-describedby": Oe, "aria-invalid": ke, ...Ae } = e, R = r === "range", z = de(), [je, B] = ue(0), V = te({
+		component: "Slider",
+		range: R,
+		value: i,
+		defaultValue: c,
+		min: S,
+		max: C,
+		step: w,
+		largeStep: T,
+		minStepsBetweenThumbs: E,
+		disabled: x,
+		onValueChange: (t) => {
+			e.type, e.onValueChange?.(t);
+		},
+		onValueCommit: (t) => {
+			e.type, e.onValueCommit?.(t);
+		},
+		onPointerSample: ({ raw: e, low: t, high: n, rtl: r }) => B(z ? 0 : Math.max(-8, Math.min(pe, (e - Math.max(t, Math.min(n, e))) * (r ? -1 : 1)))),
+		onGestureEnd: () => B(0)
+	}), { id: H, current: U, values: W, active: G, bounds: Me, percent: K } = V, { formatter: q, format: J } = ie(k, A, j), Ne = typeof U == "number" ? J(U) : !j && "formatRange" in q ? q.formatRange(U[0], U[1]) : `${J(U[0])} – ${J(U[1])}`, Y = V.normalizeMarks(D), X = R ? K(W[0]) : 0, Pe = K(W[+!!R]), Z = d(f), Q = d(v), $ = d(y);
+	return /* @__PURE__ */ m(g, {
+		reducedMotion: "user",
+		children: /* @__PURE__ */ m(t, {
+			className: Ce,
+			styles: me,
+			sx: we,
+			children: (e) => /* @__PURE__ */ h("div", {
+				...Ae,
+				ref: n,
+				className: e,
+				"data-ui": "slider",
+				"data-disabled": x || void 0,
+				onKeyDown: (e) => {
+					Te?.(e), V.handleRootKeyDown(e);
+				},
+				children: [
+					(Z || M) && /* @__PURE__ */ h("div", {
+						css: ae,
+						children: [Z && /* @__PURE__ */ m("span", {
+							...L?.label,
+							id: `${H}-label`,
+							css: [le, L?.label?.css],
+							children: f
+						}), M && /* @__PURE__ */ m("span", {
+							...L?.readout,
+							"aria-hidden": "true",
+							css: [se, L?.readout?.css],
+							children: Ne
+						})]
+					}),
+					Q && /* @__PURE__ */ m("div", {
+						...L?.description,
+						id: `${H}-description`,
+						css: [ce, L?.description?.css],
+						children: v
+					}),
+					$ && /* @__PURE__ */ m("div", {
+						...L?.error,
+						id: `${H}-error`,
+						role: "alert",
+						css: [a, L?.error?.css],
+						children: y
+					}),
+					/* @__PURE__ */ h("div", {
+						css: re,
+						children: [
+							d(N) && /* @__PURE__ */ m("div", {
+								...L?.start,
+								children: N
+							}),
+							/* @__PURE__ */ h("div", {
+								...L?.control,
+								...V.controlHandlers(L?.control),
+								css: [
+									oe,
+									s[I],
+									L?.control?.css
+								],
+								"data-ui": "slider-control",
+								"data-disabled": x || void 0,
+								children: [
+									/* @__PURE__ */ m("div", {
+										...L?.track,
+										"data-ui": "slider-track",
+										"aria-hidden": "true",
+										css: [he, L?.track?.css],
+										children: /* @__PURE__ */ m("div", {
+											...L?.fill,
+											"data-ui": "slider-fill",
+											css: [ge, L?.fill?.css],
+											style: {
+												...L?.fill?.style,
+												insetInlineStart: `${X}%`,
+												inlineSize: `${Pe - X}%`
+											}
+										})
+									}),
+									Y.map((e, t) => /* @__PURE__ */ m("span", {
+										"aria-hidden": "true",
+										css: be,
+										style: { insetInlineStart: `${K(e.value)}%` }
+									}, t)),
+									W.map((e, t) => {
+										let n = l(L?.thumb, t), [r, i] = Me(t);
+										return /* @__PURE__ */ p("div", {
+											...n,
+											key: t,
+											id: `${H}-thumb-${t}`,
+											"data-slider-thumb": t,
+											"data-dragging": G === t || void 0,
+											role: "slider",
+											tabIndex: x ? -1 : 0,
+											"aria-orientation": "horizontal",
+											"aria-disabled": x,
+											"aria-invalid": $ || b ? !0 : n?.["aria-invalid"] ?? ke,
+											"aria-valuemin": r,
+											"aria-valuemax": i,
+											"aria-valuenow": e,
+											"aria-valuetext": J(e),
+											"aria-label": n?.["aria-label"] ?? (R ? O?.[t] : Ee),
+											"aria-labelledby": u(De, n?.["aria-labelledby"], R ? `${H}-name-${t}` : Z && `${H}-label`),
+											"aria-describedby": u(Oe, n?.["aria-describedby"], Q && `${H}-description`, $ && `${H}-error`),
+											css: [_e, n?.css],
+											style: {
+												...n?.style,
+												insetInlineStart: `${K(e)}%`
+											},
+											onFocus: (e) => {
+												V.noteFocus(t), n?.onFocus?.(e);
+											},
+											onKeyDown: (e) => {
+												n?.onKeyDown?.(e);
+											}
+										}, /* @__PURE__ */ m(_.span, {
+											"aria-hidden": "true",
+											css: ve,
+											animate: {
+												scale: z ? 1 : G === t ? .95 : 1,
+												x: z ? 0 : G === t ? je : 0
+											},
+											transition: z ? { duration: 0 } : fe
+										}), R && /* @__PURE__ */ m("span", {
+											id: `${H}-name-${t}`,
+											css: ee,
+											children: O?.[t]
+										}), /* @__PURE__ */ m("span", {
+											...L?.bubble,
+											"data-ui": "slider-bubble",
+											"aria-hidden": "true",
+											css: [ye, L?.bubble?.css],
+											style: {
+												...L?.bubble?.style,
+												...K(e) <= 50 ? { insetInlineStart: 0 } : { insetInlineEnd: 0 }
+											},
+											children: J(e)
+										}));
+									})
+								]
+							}),
+							d(P) && /* @__PURE__ */ m("div", {
+								...L?.end,
+								children: P
+							})
+						]
+					}),
+					Y.some((e) => d(e.label)) && /* @__PURE__ */ m("div", {
+						css: ne,
+						children: Y.map((e, t) => {
+							if (!d(e.label)) return null;
+							let n = l(L?.mark, t);
+							return /* @__PURE__ */ p("button", {
+								...n,
+								key: t,
+								type: "button",
+								disabled: x,
+								css: [o, n?.css],
+								onClick: (t) => {
+									n?.onClick?.(t), t.defaultPrevented || V.selectMark(e.value);
+								}
+							}, e.label);
+						})
+					}),
+					F !== void 0 && W.map((e, t) => /* @__PURE__ */ m("input", {
+						type: "hidden",
+						disabled: x,
+						name: typeof F == "string" ? F : F[t],
+						value: e
+					}, t))
+				]
+			})
+		})
+	});
+}
+v.displayName = "Slider";
+//#endregion
+export { v as t };

package/dist/slider.js

@@ -0,0 +1,2 @@
+'use client';
+export { t as Slider } from "./slider-DVG6-Awh.js";

package/dist/sortable-data-table-CYKT_Ng7.js

@@ -0,0 +1,365 @@
+'use client';
+import { r as e, t } from "./sx-Dx9JUKp5.js";
+import { t as n } from "./focus-ring-BK5W5_NY.js";
+import { n as r, r as i } from "./media-8yrN85VT.js";
+import { t as a } from "./use-controlled-state-DpeVQZNR.js";
+import { t as o } from "./visually-hidden-BJdvqqvn.js";
+import { t as s } from "./renderable-DzcIj1Lo.js";
+import { t as ee } from "./button-NLY0h6EJ.js";
+import { t as c } from "./checkbox-DKSzExj2.js";
+import { useEffect as te, useId as ne, useLayoutEffect as re, useMemo as l, useRef as u, useState as ie } from "react";
+import { vars as d } from "@jfrader/tokens/vars";
+import { jsx as f, jsxs as p } from "@emotion/react/jsx-runtime";
+//#region src/components/sortable-data-table/sortable-data-table.tsx
+var ae = {
+	empty: "No records",
+	missing: "—",
+	clear: "Clear selection",
+	scrollLabel: "Scrollable table",
+	sortButton: (e, t) => `${e}: sort ${t === "asc" ? "descending" : "ascending"}`,
+	sortStatus: (e, t) => `${e}, ${t === "asc" ? "ascending" : "descending"}`,
+	selectRow: (e) => `Select ${e}`,
+	selectAll: "Select all visible rows",
+	selectionStatus: (e, t, n, r) => `${r.visibleSelected} of ${r.visibleRows} visible selected; ${r.totalSelected} selected in total`
+}, oe = e({
+	minInlineSize: 0,
+	maxInlineSize: "100%",
+	color: d.color.text,
+	backgroundColor: d.color.surface,
+	fontFamily: d.font.sans,
+	fontSize: d.textSize.sm,
+	lineHeight: d.lineHeight.base
+}), se = e({
+	overflowX: "auto",
+	maxInlineSize: "100%",
+	border: `1px solid ${d.color.border}`,
+	borderRadius: d.radius.md,
+	"&:focus-visible": n
+}), ce = e({
+	inlineSize: "100%",
+	borderCollapse: "separate",
+	borderSpacing: 0,
+	tableLayout: "auto"
+}), le = e({
+	textAlign: "start",
+	padding: d.space[4],
+	fontWeight: d.fontWeight.medium
+}), m = e({
+	paddingInline: d.space[3],
+	textAlign: "start",
+	verticalAlign: "middle",
+	overflowWrap: "anywhere",
+	borderBlockEnd: `1px solid ${d.color.borderSubtle}`,
+	"&[data-numeric]": {
+		textAlign: "end",
+		fontVariantNumeric: "tabular-nums",
+		"& button": { justifyContent: "flex-end" }
+	}
+}), h = {
+	sm: e({ paddingBlock: d.space[2] }),
+	md: e({ paddingBlock: d.space[3] })
+}, g = e({
+	position: "sticky",
+	insetBlockStart: 0,
+	zIndex: 1,
+	backgroundColor: d.color.surfaceRaised,
+	fontWeight: d.fontWeight.medium
+}), ue = e({
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "space-between",
+	gap: d.space[2],
+	inlineSize: "100%",
+	minBlockSize: d.space[8],
+	minInlineSize: d.space[8],
+	paddingInline: d.space[2],
+	paddingBlock: d.space[1],
+	border: `1px solid ${d.color.borderControl}`,
+	borderRadius: d.radius.sm,
+	backgroundColor: "transparent",
+	color: "inherit",
+	font: "inherit",
+	textAlign: "inherit",
+	cursor: "pointer",
+	transitionProperty: "background-color, color",
+	transitionDuration: d.motion.duration.fast,
+	transitionTimingFunction: d.motion.easeStandard,
+	"&:hover": { backgroundColor: d.color.surfaceHover },
+	"&:focus-visible": n,
+	[i]: { transitionDuration: "0s" },
+	[r]: {
+		borderColor: "ButtonText",
+		color: "ButtonText"
+	}
+}), de = e({
+	"&[data-selected]": { backgroundColor: d.color.accentSoft },
+	[r]: { "&[data-selected]": {
+		outline: "1px solid Highlight",
+		outlineOffset: "-1px"
+	} }
+}), fe = e({
+	display: "flex",
+	flexWrap: "wrap",
+	alignItems: "center",
+	justifyContent: "space-between",
+	gap: d.space[3],
+	padding: d.space[3]
+}), pe = e({
+	minBlockSize: d.space[8],
+	minInlineSize: d.space[8],
+	justifyContent: "center"
+}), me = [], _ = (e) => e.sortable !== !1 && !!(e.accessor || e.compare), he = (e) => e.sortLabel ?? (typeof e.header == "string" ? e.header : ""), v = (e) => e == null || e === "" || typeof e == "number" && !Number.isFinite(e) || e instanceof Date && !Number.isFinite(e.getTime()), y = (e) => [...new Set(e)], ge = (e, t) => {
+	let n = new Set(t);
+	return e.length === n.size && e.every((e) => n.has(e));
+};
+function _e(e, t, n) {
+	return typeof e == "number" && typeof t == "number" ? e - t : e instanceof Date && t instanceof Date ? e.getTime() - t.getTime() : typeof e == "string" && typeof t == "string" ? n.compare(e, t) : 0;
+}
+function b({ ref: e, rows: n, columns: r, getRowId: i, caption: d, captionHidden: b = !1, value: ve, defaultValue: ye = null, onValueChange: be, sortMode: x = "client", selectable: S = !1, getRowLabel: xe, selectedKeys: Se, defaultSelectedKeys: Ce = me, onSelectionChange: we, locale: C, dateFormatOptions: w, timeZone: T, messages: Te, empty: E, loading: Ee = !1, size: D = "md", tableRef: De, slotProps: O, className: Oe, sx: ke, ...k }) {
+	let A = {
+		...ae,
+		...Te
+	}, Ae = ne(), [j, je] = a(ve, ye, be), [Me, Ne] = a(Se, Ce, we), M = y(Me ?? me), N = new Set(M), P = r.find((e) => e.id === j?.columnId && _(e)), F = P && j ? j : null, I = l(() => new Intl.NumberFormat(C), [C]), Pe = l(() => new Intl.DateTimeFormat(C, {
+		...w,
+		...T ? { timeZone: T } : {}
+	}), [
+		C,
+		w,
+		T
+	]), L = l(() => new Intl.Collator(C, {
+		numeric: !0,
+		sensitivity: "base"
+	}), [C]), R = l(() => x === "manual" || !F || !P ? n : n.map((e, t) => ({
+		row: e,
+		index: t
+	})).sort((e, t) => {
+		let n = P.accessor?.(e.row), r = P.accessor?.(t.row);
+		if (P.accessor && (v(n) || v(r))) return Number(v(n)) - Number(v(r)) || e.index - t.index;
+		let i = P.compare ? P.compare(e.row, t.row) : _e(n, r, L);
+		return (Number.isFinite(i) ? i : 0) * (F.direction === "asc" ? 1 : -1) || e.index - t.index;
+	}).map(({ row: e }) => e), [
+		n,
+		F?.columnId,
+		F?.direction,
+		x,
+		P,
+		L
+	]), z = R.map(i), B = z.filter((e) => N.has(e)).length, V = z.length > 0 && B === z.length, Fe = B > 0 && !V, H = A.selectionStatus(B, M.length, z.length, {
+		visibleSelected: I.format(B),
+		totalSelected: I.format(M.length),
+		visibleRows: I.format(z.length)
+	}), U = u(null), W = u(null), G = u(null), K = u(!1), q = u(null), J = u(null), Y = u(null), X = F ? `${F.columnId}:${F.direction}` : "", Z = JSON.stringify([...M].sort()), Q = u({
+		sort: X,
+		selection: Z
+	}), [Ie, Le] = ie("");
+	te(() => {
+		let e = Q.current.sort !== X || Q.current.selection !== Z, t = [];
+		Q.current.sort !== X && F && P && t.push(A.sortStatus(he(P), F.direction)), Q.current.selection !== Z && S && t.push(H), Q.current = {
+			sort: X,
+			selection: Z
+		}, e && Le(t.join(". "));
+	}, [
+		X,
+		Z,
+		S,
+		H,
+		P,
+		A.sortStatus,
+		F?.direction
+	]), re(() => {
+		if (K.current && M.length === 0) {
+			K.current = !1;
+			let e = W.current?.ownerDocument;
+			e?.activeElement === e?.body && W.current?.focus();
+		}
+		let e = q.current;
+		if (!e) return;
+		let t = z.indexOf(e.key);
+		if (t >= 0) {
+			e.index = t;
+			return;
+		}
+		let n = J.current;
+		if (n && n.ownerDocument.activeElement === n.ownerDocument.body) {
+			let t = n.rows[Math.min(e.index, n.rows.length - 1)]?.querySelectorAll("input, button, a[href], select, textarea, [tabindex=\"0\"]");
+			(t?.[Math.min(e.control, t.length - 1)] ?? W.current ?? Y.current)?.focus();
+		}
+		q.current = null;
+	});
+	let Re = (e) => {
+		let t = y(e);
+		ge(M, t) || Ne(t);
+	}, $ = (e, t) => Re(t ? [...M, ...e] : M.filter((t) => !e.includes(t))), ze = (e, t) => {
+		if (e.cell) return e.cell(t);
+		let n = e.accessor?.(t);
+		return v(n) ? A.missing : typeof n == "number" ? I.format(n) : n instanceof Date ? Pe.format(n) : n;
+	}, Be = (e, t) => /* @__PURE__ */ f(c, {
+		"aria-label": A.selectRow(xe(e)),
+		checked: N.has(t),
+		slotProps: { root: { css: pe } },
+		onChange: (e) => {
+			if (e.defaultPrevented || e.nativeEvent.defaultPrevented) return;
+			let n = e.nativeEvent, r = U.current === null ? -1 : z.indexOf(U.current), i = z.indexOf(t), a = n.shiftKey && r >= 0 ? z.slice(Math.min(r, i), Math.max(r, i) + 1) : [t];
+			$(a, e.currentTarget.checked), U.current = t;
+		}
+	});
+	return /* @__PURE__ */ f(t, {
+		className: Oe,
+		styles: [oe],
+		sx: ke,
+		children: (t) => /* @__PURE__ */ p("div", {
+			...k,
+			ref: e,
+			className: t,
+			"data-ui": "sortable-data-table",
+			children: [
+				/* @__PURE__ */ f("div", {
+					ref: Y,
+					role: "region",
+					"aria-label": A.scrollLabel,
+					"aria-describedby": k["aria-describedby"],
+					tabIndex: 0,
+					"data-ui": "sortable-data-table-scroller",
+					className: O?.scroller?.className,
+					css: [se, O?.scroller?.css],
+					children: /* @__PURE__ */ p("table", {
+						ref: De,
+						"aria-busy": Ee || void 0,
+						className: O?.table?.className,
+						css: [ce, O?.table?.css],
+						children: [
+							s(d) && /* @__PURE__ */ f("caption", {
+								id: Ae,
+								className: O?.caption?.className,
+								css: [
+									le,
+									b && o,
+									O?.caption?.css
+								],
+								children: d
+							}),
+							/* @__PURE__ */ p("colgroup", { children: [S && /* @__PURE__ */ f("col", {}), r.map((e) => /* @__PURE__ */ f("col", { style: { width: e.width } }, e.id))] }),
+							/* @__PURE__ */ f("thead", { children: /* @__PURE__ */ p("tr", { children: [S && /* @__PURE__ */ f("th", {
+								scope: "col",
+								css: [
+									m,
+									h[D],
+									g
+								],
+								children: /* @__PURE__ */ f(c, {
+									ref: W,
+									"aria-label": A.selectAll,
+									checked: V,
+									indeterminate: Fe,
+									disabled: !z.length,
+									slotProps: { root: { css: pe } },
+									onChange: (e) => {
+										!e.defaultPrevented && !e.nativeEvent.defaultPrevented && $(z, e.currentTarget.checked);
+									}
+								})
+							}), r.map((e) => /* @__PURE__ */ f("th", {
+								scope: "col",
+								"data-numeric": e.numeric || void 0,
+								"aria-sort": F?.columnId === e.id ? F.direction === "asc" ? "ascending" : "descending" : void 0,
+								className: O?.headerCell?.className,
+								css: [
+									m,
+									h[D],
+									g,
+									O?.headerCell?.css
+								],
+								children: _(e) ? /* @__PURE__ */ p("button", {
+									type: "button",
+									"aria-label": A.sortButton(he(e), F?.columnId === e.id ? F.direction : null),
+									className: O?.sortButton?.className,
+									css: [ue, O?.sortButton?.css],
+									onClick: (t) => {
+										t.defaultPrevented || je({
+											columnId: e.id,
+											direction: F?.columnId === e.id && F.direction === "asc" ? "desc" : "asc"
+										});
+									},
+									children: [s(e.header) && e.header, /* @__PURE__ */ f("span", {
+										"aria-hidden": "true",
+										children: F?.columnId === e.id ? F.direction === "asc" ? "▲" : "▼" : "♢"
+									})]
+								}) : s(e.header) && e.header
+							}, e.id))] }) }),
+							/* @__PURE__ */ f("tbody", {
+								ref: J,
+								children: R.length ? R.map((e, t) => {
+									let n = i(e);
+									return /* @__PURE__ */ p("tr", {
+										"data-selected": S && N.has(n) || void 0,
+										className: O?.row?.className,
+										css: [de, O?.row?.css],
+										onFocusCapture: (e) => {
+											let r = Array.from(e.currentTarget.querySelectorAll("input, button, a[href], select, textarea, [tabindex=\"0\"]"));
+											q.current = {
+												key: n,
+												index: t,
+												control: r.indexOf(e.target)
+											};
+										},
+										onBlurCapture: (e) => {
+											e.relatedTarget && !J.current?.contains(e.relatedTarget) && (q.current = null);
+										},
+										children: [S && /* @__PURE__ */ f("td", {
+											css: [m, h[D]],
+											children: Be(e, n)
+										}), r.map((t) => /* @__PURE__ */ f("td", {
+											"data-numeric": t.numeric || void 0,
+											className: O?.cell?.className,
+											css: [
+												m,
+												h[D],
+												O?.cell?.css
+											],
+											children: ze(t, e)
+										}, t.id))]
+									}, n);
+								}) : /* @__PURE__ */ f("tr", { children: /* @__PURE__ */ f("td", {
+									colSpan: r.length + Number(S),
+									className: O?.cell?.className,
+									css: [
+										m,
+										h[D],
+										O?.cell?.css
+									],
+									children: E === void 0 ? A.empty : s(E) && E
+								}) })
+							})
+						]
+					})
+				}),
+				S && /* @__PURE__ */ p("div", {
+					className: O?.footer?.className,
+					css: [fe, O?.footer?.css],
+					children: [/* @__PURE__ */ f("span", { children: H }), M.length > 0 && /* @__PURE__ */ f(ee, {
+						ref: G,
+						size: "sm",
+						variant: "ghost",
+						onClick: (e) => {
+							e.defaultPrevented || (K.current = G.current?.ownerDocument.activeElement === G.current, Re([]));
+						},
+						onBlur: (e) => {
+							e.relatedTarget && (K.current = !1);
+						},
+						children: A.clear
+					})]
+				}),
+				/* @__PURE__ */ f("p", {
+					role: "status",
+					"aria-live": "polite",
+					"aria-atomic": "true",
+					className: O?.status?.className,
+					css: [o, O?.status?.css],
+					children: Ie
+				})
+			]
+		})
+	});
+}
+b.displayName = "SortableDataTable";
+//#endregion
+export { b as t };

package/dist/sortable-data-table.js

@@ -0,0 +1,2 @@
+'use client';
+export { t as SortableDataTable } from "./sortable-data-table-CYKT_Ng7.js";

package/dist/{spinner-C2YDoiMn.js → spinner-DtxvDPdM.js}

@@ -1,6 +1,6 @@
 'use client';
 import { r as e, t } from "./sx-Dx9JUKp5.js";
-import { n } from "./media-D_eA_I-e.js";
+import { r as n } from "./media-8yrN85VT.js";
 import { t as r } from "./visually-hidden-BJdvqqvn.js";
 import { n as i, t as a } from "./loading-ring-B8-30Dl1.js";
 import { vars as o } from "@jfrader/tokens/vars";

package/dist/spinner.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Spinner } from "./spinner-C2YDoiMn.js";
+export { t as Spinner } from "./spinner-DtxvDPdM.js";