@febkosq8/arc 0.8.3 → 0.8.5

package/dist/arc.js

@@ -11,8 +11,8 @@ import { FiChevronDown as N, FiChevronRight as P, FiMonitor as F, FiMoon as I, F
 import { Dialog as R } from "@base-ui/react/dialog";
 import { RxCross1 as z } from "react-icons/rx";
 import { Select as B } from "@base-ui/react/select";
-import { rankItem as V } from "@tanstack/match-sorter-utils";
-import { columnFilteringFeature as ee, columnResizingFeature as te, columnSizingFeature as ne, columnVisibilityFeature as re, createColumnHelper as ie, createFilteredRowModel as ae, createPaginatedRowModel as oe, createSortedRowModel as se, filterFn_includesString as ce, globalFilteringFeature as le, rowPaginationFeature as ue, rowSortingFeature as de, sortFn_alphanumeric as fe, sortFn_alphanumericCaseSensitive as pe, sortFn_basic as me, sortFn_datetime as he, sortFn_text as ge, sortFn_textCaseSensitive as _e, tableFeatures as ve, useTable as ye } from "@tanstack/react-table";
+import { rankItem as ee } from "@tanstack/match-sorter-utils";
+import { columnFilteringFeature as te, columnResizingFeature as ne, columnSizingFeature as re, columnVisibilityFeature as ie, createFilteredRowModel as ae, createPaginatedRowModel as oe, createSortedRowModel as se, filterFn_includesString as ce, globalFilteringFeature as le, rowPaginationFeature as ue, rowSortingFeature as de, sortFn_alphanumeric as fe, sortFn_alphanumericCaseSensitive as pe, sortFn_basic as me, sortFn_datetime as he, sortFn_text as ge, sortFn_textCaseSensitive as _e, tableFeatures as ve, useTable as ye } from "@tanstack/react-table";
 import { Switch as be } from "@base-ui/react/switch";
 // components/button-group.tsx
 var xe = ({ className: e, orientation: r = "horizontal", selectedVariant: o, children: s, ...c }) => /* @__PURE__ */ f("div", {
@@ -53,7 +53,7 @@ var xe = ({ className: e, orientation: r = "horizontal", selectedVariant: o, chi
 		variant: "primary",
 		size: "md"
 	}
-}), H = Object.assign(({ className: e, variant: n, size: r, ...i }) => /* @__PURE__ */ f("button", {
+}), V = Object.assign(({ className: e, variant: n, size: r, ...i }) => /* @__PURE__ */ f("button", {
 	className: t("arc-button", Se({
 		variant: n,
 		size: r,
@@ -88,7 +88,7 @@ var xe = ({ className: e, orientation: r = "horizontal", selectedVariant: o, chi
 			"aria-hidden": !g,
 			children: w
 		})]
-	}), E = /* @__PURE__ */ f(H, {
+	}), E = /* @__PURE__ */ f(V, {
 		...h,
 		children: T,
 		className: t(d),
@@ -155,7 +155,7 @@ var xe = ({ className: e, orientation: r = "horizontal", selectedVariant: o, chi
 	return /* @__PURE__ */ p("span", {
 		className: "arc-long-press-button relative inline-flex w-fit",
 		"data-long-press-state": y ? "pressing" : void 0,
-		children: [/* @__PURE__ */ f(H, {
+		children: [/* @__PURE__ */ f(V, {
 			...m,
 			children: E,
 			variant: c,
@@ -311,7 +311,7 @@ var xe = ({ className: e, orientation: r = "horizontal", selectedVariant: o, chi
 			}) })]
 		})
 	});
-}, U = ({ data: e, className: n, ...r }) => {
+}, H = ({ data: e, className: n, ...r }) => {
 	let i = Array.isArray(e) ? e.join(", ") : typeof e == "string" ? e : null;
 	return /* @__PURE__ */ f("em", {
 		role: "alert",
@@ -321,18 +321,18 @@ var xe = ({ className: e, orientation: r = "horizontal", selectedVariant: o, chi
 		children: i
 	});
 }, Ae = /* @__PURE__ */ "*.+.×.÷.=.~.!.?.@.#.%.&.§.¶.※.◇.◆.○.●.△.▽.□.■.♠.♣.♦.♤.♧.♢.♪.♫.∴.∵".split(".");
-function W(e, t, n) {
+function U(e, t, n) {
 	let r = Math.sin((e + 1) * 12.9898 + t * 78.233 + n * 37.719) * 43758.5453;
 	return r - Math.floor(r);
 }
-var G = [
+var je = [
 	"circle",
 	"square",
 	"diamond",
 	"star",
 	"heart",
 	"hexagon"
-], je = e("arc-grid-loader__cell grid aspect-square w-full place-items-center overflow-hidden text-center leading-none break-all", {
+], Me = e("arc-grid-loader__cell grid aspect-square w-full place-items-center overflow-hidden text-center leading-none break-all", {
 	variants: { shape: {
 		circle: "rounded-full",
 		square: "rounded-md",
@@ -342,8 +342,8 @@ var G = [
 		hexagon: "arc-grid-loader__cell--hexagon"
 	} },
 	defaultVariants: { shape: "circle" }
-}), Me = ({ className: e, rows: n = 3, columns: r = 3, size: i = 120, maxSize: a = 24, shape: s = "circle", shapes: c = G, colors: l = [], label: d = "Loading", symbols: p = Ae, title: m, style: h, ...g }) => {
-	let [_, v] = u([]), [y, b] = u([]), [x, S] = u([]), C = c.length > 0 ? c : G, [w, T] = u(() => typeof window < "u" && window.matchMedia("(prefers-reduced-motion: reduce)").matches);
+}), Ne = ({ className: e, rows: n = 3, columns: r = 3, size: i = 120, maxSize: a = 24, shape: s = "circle", shapes: c = je, colors: l = [], label: d = "Loading", symbols: p = Ae, title: m, style: h, ...g }) => {
+	let [_, v] = u([]), [y, b] = u([]), [x, S] = u([]), C = c.length > 0 ? c : je, [w, T] = u(() => typeof window < "u" && window.matchMedia("(prefers-reduced-motion: reduce)").matches);
 	if (o(() => {
 		s === "mixed" && b(Array.from({ length: n * r }, () => C[Math.floor(Math.random() * C.length)]));
 	}, [
@@ -386,10 +386,10 @@ var G = [
 				gridTemplateRows: `repeat(${n}, minmax(0, 1fr))`
 			},
 			children: Array.from({ length: n * r }, (e, o) => /* @__PURE__ */ f("span", {
-				className: t(je({ shape: s === "mixed" ? y[o] ?? C[Math.floor(W(o, n, r) * C.length)] : s })),
+				className: t(Me({ shape: s === "mixed" ? y[o] ?? C[Math.floor(U(o, n, r) * C.length)] : s })),
 				onAnimationIteration: () => {
 					s === "mixed" && b((e) => {
-						let t = [...e], i = t[o] ?? C[Math.floor(W(o, n, r) * C.length)], a = C.filter((e) => e !== i);
+						let t = [...e], i = t[o] ?? C[Math.floor(U(o, n, r) * C.length)], a = C.filter((e) => e !== i);
 						return t[o] = a.length > 0 ? a[Math.floor(Math.random() * a.length)] : i, t;
 					}), l.length > 1 && S((e) => {
 						let t = [...e];
@@ -400,8 +400,8 @@ var G = [
 					});
 				},
 				style: {
-					animationDelay: l.length > 1 ? `${o / (n * r) * 1200}ms` : `${-W(o, n, r) * 1200}ms`,
-					animationDuration: l.length > 1 ? "1200ms" : `${900 + W(o, n, r) * 600}ms`,
+					animationDelay: l.length > 1 ? `${o / (n * r) * 1200}ms` : `${-U(o, n, r) * 1200}ms`,
+					animationDuration: l.length > 1 ? "1200ms" : `${900 + U(o, n, r) * 600}ms`,
 					backgroundColor: l.length > 0 ? l[(o + (x[o] ?? 0)) % l.length] : void 0,
 					fontSize: `${Math.min(i / Math.max(n, r), a) * .4}px`,
 					maxWidth: a,
@@ -414,7 +414,7 @@ var G = [
 			}, o))
 		})
 	});
-}, K = ({ cardContent: e, children: n, trigger: r = "hover", triggerRender: i, side: a = "bottom", align: o = "center", className: s, open: c, onOpenChange: l }) => /* @__PURE__ */ p(A.Root, {
+}, W = ({ cardContent: e, children: n, trigger: r = "hover", triggerRender: i, side: a = "bottom", align: o = "center", className: s, open: c, onOpenChange: l }) => /* @__PURE__ */ p(A.Root, {
 	open: c,
 	onOpenChange: l,
 	children: [/* @__PURE__ */ f(A.Trigger, {
@@ -432,7 +432,7 @@ var G = [
 			children: [/* @__PURE__ */ f(A.Arrow, { className: t("border-border bg-popover h-3 w-3 rotate-45", "data-[side=bottom]:-top-1.5 data-[side=bottom]:border-t data-[side=bottom]:border-l", "data-[side=top]:-bottom-1.5 data-[side=top]:border-r data-[side=top]:border-b", "data-[side=left]:-right-1.5 data-[side=left]:border-t data-[side=left]:border-r", "data-[side=right]:-left-1.5 data-[side=right]:border-b data-[side=right]:border-l") }), e]
 		})
 	}) })]
-}), Ne = ({ id: e, label: n, help: r, errors: i, className: a, ...o }) => {
+}), Pe = ({ id: e, label: n, help: r, errors: i, className: a, ...o }) => {
 	let s = Array.isArray(i) ? i.map((e) => e == null ? "" : String(e)) : typeof i == "string" ? i : null;
 	return /* @__PURE__ */ p("div", {
 		...o,
@@ -444,7 +444,7 @@ var G = [
 				htmlFor: e,
 				children: n
 			}),
-			r != null && r !== !1 && /* @__PURE__ */ f(K, {
+			r != null && r !== !1 && /* @__PURE__ */ f(W, {
 				trigger: "hover",
 				triggerRender: /* @__PURE__ */ f("button", {
 					type: "button",
@@ -460,10 +460,10 @@ var G = [
 					"aria-hidden": "true"
 				})
 			}),
-			s && (Array.isArray(s) ? s.length > 0 && /* @__PURE__ */ f(U, { data: s }) : /* @__PURE__ */ f(U, { data: s }))
+			s && (Array.isArray(s) ? s.length > 0 && /* @__PURE__ */ f(H, { data: s }) : /* @__PURE__ */ f(H, { data: s }))
 		]
 	});
-}, Pe = e("arc-input rounded border text-foreground placeholder:text-muted-foreground focus:border-transparent focus:outline-hidden focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:border-muted disabled:bg-muted", {
+}, Fe = e("arc-input rounded border text-foreground placeholder:text-muted-foreground focus:border-transparent focus:outline-hidden focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:border-muted disabled:bg-muted", {
 	variants: {
 		variant: {
 			default: "border-border bg-background",
@@ -478,8 +478,8 @@ var G = [
 		variant: "default",
 		as: "input"
 	}
-}), q = ({ as: e = "input", className: n, variant: r, ...i }) => {
-	let a = t(Pe({
+}), G = ({ as: e = "input", className: n, variant: r, ...i }) => {
+	let a = t(Fe({
 		as: e,
 		variant: r
 	}), n);
@@ -488,7 +488,7 @@ var G = [
 		autoComplete: "off",
 		className: a
 	});
-}, Fe = e("arc-card group relative rounded-lg border border-foreground/40 bg-card/90 p-3 shadow-xs", {
+}, Ie = e("arc-card group relative rounded-lg border border-foreground/40 bg-card/90 p-3 shadow-xs", {
 	variants: { variant: {
 		primary: "border-primary bg-primary text-primary-foreground",
 		secondary: "border-secondary bg-secondary text-secondary-foreground",
@@ -500,10 +500,10 @@ var G = [
 		"outline-warning": "border-warning bg-background text-warning"
 	} },
 	defaultVariants: { variant: "outline-secondary" }
-}), J = (e) => {
+}), K = (e) => {
 	let { className: n, variant: r, hoverable: i = !0, hoverLift: a = !0, hoverBorder: o = !0, hoverGradient: s = !0, postHeaderBorder: c = !0, preFooterBorder: l = !0, onPointerMove: u, ...d } = e, p = i && a, m = i && o, h = i && s;
 	return /* @__PURE__ */ f("div", {
-		className: t(Fe({ variant: r }), h && "arc-card-cursor-border", c && "[&_.arc-card-header]:border-b", !c && "[&_.arc-card-header]:border-b-0", l && "[&_.arc-card-footer]:border-t", !l && "[&_.arc-card-footer]:border-t-0", (p || m) && "transition-[border-color,transform] duration-300 ease-out", p && "hover:-translate-y-1", m && "hover:border-primary", n),
+		className: t(Ie({ variant: r }), h && "arc-card-cursor-border", c && "[&_.arc-card-header]:border-b", !c && "[&_.arc-card-header]:border-b-0", l && "[&_.arc-card-footer]:border-t", !l && "[&_.arc-card-footer]:border-t-0", (p || m) && "transition-[border-color,transform] duration-300 ease-out", p && "hover:-translate-y-1", m && "hover:border-primary", n),
 		onPointerMove: h ? (e) => {
 			if (u?.(e), !h) return;
 			let t = e.currentTarget.getBoundingClientRect();
@@ -512,19 +512,19 @@ var G = [
 		...d
 	});
 };
-J.Header = (e) => {
+K.Header = (e) => {
 	let { className: n, ...r } = e;
 	return /* @__PURE__ */ f("h2", {
 		className: t("arc-card-header flex w-full typography-heading-3 flex-col border-foreground/40 px-0 pb-1", n),
 		...r
 	});
-}, J.Content = (e) => {
+}, K.Content = (e) => {
 	let { className: n, ...r } = e;
 	return /* @__PURE__ */ f("div", {
 		className: t("arc-card-content typography-paragraph mt-0! w-full justify-between px-0 py-1 whitespace-pre-wrap", n),
 		...r
 	});
-}, J.Footer = (e) => {
+}, K.Footer = (e) => {
 	let { className: n, ...r } = e;
 	return /* @__PURE__ */ f("div", {
 		className: t("arc-card-footer typography-muted mt-auto mb-0 flex w-full items-end justify-start border-foreground/40 px-0 pt-1", n),
@@ -532,7 +532,7 @@ J.Header = (e) => {
 	});
 };
 // utilities/date-handler.ts
-var Ie = class e {
+var Le = class e {
 	static toDateTime(e) {
 		if (e == null || e === "") return j.invalid("missing date");
 		if (e instanceof Date) return j.fromJSDate(e);
@@ -590,9 +590,9 @@ var Ie = class e {
 		let r = e.getDateTime(t), i = e.getRelativeTime(t);
 		return n.replace("$ISO$", r).replace("$RELATIVE$", i);
 	}
-}, Le = ({ value: e, format: t = "$ISO$ ($RELATIVE$)", ...n }) => {
-	let r = c(() => e ? Ie.getFormattedTime(e, t) : "", [e, t]);
-	return /* @__PURE__ */ f(q, {
+}, Re = ({ value: e, format: t = "$ISO$ ($RELATIVE$)", ...n }) => {
+	let r = c(() => e ? Le.getFormattedTime(e, t) : "", [e, t]);
+	return /* @__PURE__ */ f(G, {
 		type: "text",
 		disabled: !0,
 		readOnly: !0,
@@ -600,7 +600,7 @@ var Ie = class e {
 		size: Math.max(r.length, 1),
 		...n
 	});
-}, Re = e("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", {
+}, ze = e("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", {
 	variants: {
 		variant: {
 			pill: "arc-pill-link min-w-fit border border-transparent text-base text-muted-foreground! transition hover:text-primary! hover:outline-none hover:ring-0 focus:outline-none focus-visible:ring-opacity-75",
@@ -632,8 +632,8 @@ var Ie = class e {
 		variant: "pill",
 		size: "md"
 	}
-}), ze = ({ active: e = !1, className: n, size: r = "md", variant: i = "pill", ...a }) => /* @__PURE__ */ f("a", {
-	className: t(Re({
+}), Be = ({ active: e = !1, className: n, size: r = "md", variant: i = "pill", ...a }) => /* @__PURE__ */ f("a", {
+	className: t(ze({
 		variant: i,
 		size: r
 	}), e && {
@@ -654,15 +654,15 @@ var Ie = class e {
 	}[i], n),
 	"aria-current": e ? "page" : void 0,
 	...a
-}), Y = ({ active: e = !1, className: n, ...r }) => /* @__PURE__ */ f("button", {
+}), q = ({ active: e = !1, className: n, ...r }) => /* @__PURE__ */ f("button", {
 	type: "button",
 	className: t("arc-pill", "inline-flex h-10 pointer-coarse:h-11 w-full items-center justify-center whitespace-nowrap rounded-md border border-transparent px-3 py-2 text-base font-medium text-foreground transition hover:text-primary hover:outline-none hover:ring-0 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-opacity-75", e ? "text-primary!" : "text-muted-foreground", n),
 	"aria-pressed": e,
 	...r
-}), Be = ({ children: e }) => n.toArray(e).map((e, t) => /* @__PURE__ */ p(r, { children: [t > 0 && /* @__PURE__ */ f(M.Separator, { className: "mx-2 h-px bg-border" }), e] }, t)), X = Object.assign(({ className: e, contentClassName: n, active: r, activeClassName: i, buttonText: a, children: o }) => /* @__PURE__ */ p(M.Root, {
+}), Ve = ({ children: e }) => n.toArray(e).map((e, t) => /* @__PURE__ */ p(r, { children: [t > 0 && /* @__PURE__ */ f(M.Separator, { className: "mx-2 h-px bg-border" }), e] }, t)), J = Object.assign(({ className: e, contentClassName: n, active: r, activeClassName: i, buttonText: a, children: o }) => /* @__PURE__ */ p(M.Root, {
 	loopFocus: !0,
 	children: [/* @__PURE__ */ p(M.Trigger, {
-		render: /* @__PURE__ */ f(Y, {
+		render: /* @__PURE__ */ f(q, {
 			active: r,
 			className: t("w-fit", r && i, e)
 		}),
@@ -676,7 +676,7 @@ var Ie = class e {
 		collisionPadding: 8,
 		children: /* @__PURE__ */ f(M.Popup, {
 			className: t("arc-menu-content z-50 flex bg-popover w-fit min-w-40 max-w-[calc(100vw-1rem)] origin-top-right flex-col overflow-hidden rounded-md border border-border text-foreground shadow-lg ring-1 ring-foreground/10 focus:outline-none", n),
-			children: /* @__PURE__ */ f(Be, { children: o })
+			children: /* @__PURE__ */ f(Ve, { children: o })
 		})
 	}) })]
 }), {
@@ -717,12 +717,12 @@ var Ie = class e {
 				collisionPadding: 8,
 				children: /* @__PURE__ */ f(M.Popup, {
 					className: "arc-menu-content z-50 flex bg-popover w-fit min-w-40 max-w-[calc(100vw-1rem)] origin-top-right flex-col overflow-hidden rounded-md border border-border text-foreground shadow-lg ring-1 ring-foreground/10 focus:outline-none",
-					children: /* @__PURE__ */ f(Be, { children: i })
+					children: /* @__PURE__ */ f(Ve, { children: i })
 				})
 			}) })]
 		});
 	}
-}), Ve = ({ open: e = !1, setOpen: n, children: r, initialFocus: i, headerContent: a, footerContent: s, width: c, height: l, className: u, customKeyHandler: d }) => (o(() => {
+}), He = ({ open: e = !1, setOpen: n, children: r, initialFocus: i, headerContent: a, footerContent: s, width: c, height: l, className: u, customKeyHandler: d }) => (o(() => {
 	if (!e) return;
 	let t = (e) => {
 		let t = e.key === "Escape" ? "esc" : (e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "s" ? "ctrl+s" : null;
@@ -761,7 +761,7 @@ var Ie = class e {
 			]
 		})
 	})] })
-})), He = ({ id: e, items: n, value: r, onChange: i, className: a, placeholder: o = "Select options", disabled: s, name: c, preventEmpty: l = !1, "data-name": u, "data-required": d }) => {
+})), Ue = ({ id: e, items: n, value: r, onChange: i, className: a, placeholder: o = "Select options", disabled: s, name: c, preventEmpty: l = !1, "data-name": u, "data-required": d }) => {
 	let h = n.filter((e) => r?.includes(String(e.key)));
 	return /* @__PURE__ */ f(m.Root, {
 		multiple: !0,
@@ -841,7 +841,7 @@ var Ie = class e {
 			}) })]
 		})
 	});
-}, Z = ({ id: e, value: n, onChange: r, data: i, className: a, disabled: o, placeholder: s, ...c }) => /* @__PURE__ */ p(B.Root, {
+}, Y = ({ id: e, value: n, onChange: r, data: i, className: a, disabled: o, placeholder: s, ...c }) => /* @__PURE__ */ p(B.Root, {
 	value: n,
 	onValueChange: (e) => {
 		e !== null && r(e);
@@ -893,7 +893,7 @@ var Ie = class e {
 			})
 		})
 	}) })]
-}), Ue = e("arc-tag inline-flex w-fit items-center rounded-full border border-transparent font-bold", {
+}), We = e("arc-tag inline-flex w-fit items-center rounded-full border border-transparent font-bold", {
 	variants: {
 		variant: {
 			primary: "bg-primary text-primary-foreground",
@@ -917,29 +917,29 @@ var Ie = class e {
 		variant: "primary",
 		size: "xs"
 	}
-}), We = ({ className: e, variant: n, size: r, ...i }) => /* @__PURE__ */ f("div", {
-	className: t(Ue({
+}), Ge = ({ className: e, variant: n, size: r, ...i }) => /* @__PURE__ */ f("div", {
+	className: t(We({
 		variant: n,
 		size: r,
 		className: e
 	})),
 	...i
-}), Ge = (e, t, n, r) => {
-	let i = e.getValue(t), a = V(i, n);
+}), Ke = (e, t, n, r) => {
+	let i = e.getValue(t), a = ee(i, n);
 	return r({ itemRank: a }), a.passed;
-}, Q = {
-	fuzzy: Ge,
+}, X = {
+	fuzzy: Ke,
 	includesString: ce,
 	select: (e, t, n) => {
 		let r = e.getValue(t);
 		return Array.isArray(r) ? r.some((e) => String(e) === String(n)) : typeof r == "string" && r.includes(",") ? r.split(",").map((e) => e.trim()).includes(String(n)) : String(r) === String(n);
 	}
-}, Ke = ve({
+}, qe = ve({
 	columnMeta: {},
-	columnFilteringFeature: ee,
-	columnResizingFeature: te,
-	columnSizingFeature: ne,
-	columnVisibilityFeature: re,
+	columnFilteringFeature: te,
+	columnResizingFeature: ne,
+	columnSizingFeature: re,
+	columnVisibilityFeature: ie,
 	globalFilteringFeature: le,
 	rowPaginationFeature: ue,
 	rowSortingFeature: de,
@@ -954,60 +954,71 @@ var Ie = class e {
 		text: ge,
 		textCaseSensitive: _e
 	},
-	filterFns: Q
+	filterFns: X
 });
-function qe(e) {
-	return Object.prototype.hasOwnProperty.call(Q, e);
+function Je(e) {
+	return Object.prototype.hasOwnProperty.call(X, e);
 }
-function Je(e, t) {
+function Ye(e, t) {
 	if (e !== !1) {
 		if (e === void 0) return t ? "select" : void 0;
-		if (typeof e == "function" || e === "auto" || qe(e)) return e;
-		throw Error(`Unsupported table filterFn "${e}". Use "auto" or one of: ${Object.keys(Q).join(", ")}.`);
+		if (typeof e == "function" || e === "auto" || Je(e)) return e;
+		throw Error(`Unsupported table filterFn "${e}". Use "auto" or one of: ${Object.keys(X).join(", ")}.`);
 	}
 }
-var Ye = ie(), Xe = ({ data: e, columnDef: n, pageSize: r = 10, className: i, showHeader: a = !0, showFilters: o = !0, showSorting: l = !0 }) => {
+var Xe = ({ data: e, columnDef: n, pageSize: r = 10, className: i, showHeader: a = !0, showFilters: o = !0, showSorting: l = !0 }) => {
 	let d = s(), [m, b] = u({
 		pageIndex: 0,
 		pageSize: r
-	}), [x, w] = u([]), [T, D] = u(""), [O, k] = u([]), [A, j] = u({}), M = x.length > 0 || T !== "", N = c(() => n?.map((e) => Ye.accessor(e.accessorKey, {
-		id: e.id,
-		enableResizing: e.enableResizing,
-		enableColumnFilter: e.filterFn !== !1 && e.enableColumnFilter,
-		enableSorting: e.enableSorting,
-		enableHiding: e.enableHiding ?? !0,
-		size: e.size,
-		minSize: e.minSize ?? 50,
-		maxSize: e.maxSize ?? 1e3,
-		filterFn: Je(e.filterFn, e.filterSelectOptions),
-		meta: {
-			headerLabel: e.header,
-			filterSelectOptions: e.filterSelectOptions,
-			mobileFullWidth: e.mobileFullWidth
-		},
-		header: (n) => {
-			let r = n.column.getIsSorted(), i = n.column.getCanSort();
-			return /* @__PURE__ */ f("div", {
-				className: "flex flex-col gap-1.5",
-				children: /* @__PURE__ */ p("div", {
-					className: t("flex items-center gap-1.5", l && i && "cursor-pointer select-none"),
-					onClick: l && i ? n.column.getToggleSortingHandler() : void 0,
-					children: [/* @__PURE__ */ f("span", {
-						className: "min-w-0 truncate text-sm font-semibold tracking-wide",
-						children: e.header
-					}), l && i && /* @__PURE__ */ p("span", {
-						className: "text-muted-foreground ml-auto shrink-0 text-xs",
-						children: [
-							r === "asc" && /* @__PURE__ */ f(v, { className: "text-primary h-3.5 w-3.5" }),
-							r === "desc" && /* @__PURE__ */ f(_, { className: "text-primary h-3.5 w-3.5" }),
-							r === !1 && /* @__PURE__ */ f(y, { className: "h-3 w-3 opacity-60" })
-						]
-					})]
-				})
-			});
-		},
-		cell: e.cell ?? ((e) => e.getValue())
-	})), [n]), P = ye({
+	}), [x, w] = u([]), [T, D] = u(""), [O, k] = u([]), [A, j] = u({}), M = x.length > 0 || T !== "", N = c(() => n?.map((e) => {
+		if (e.accessorFn !== void 0 && !e.id) throw Error("Table columns with accessorFn require a non-empty id.");
+		let n = {
+			enableResizing: e.enableResizing,
+			enableColumnFilter: e.filterFn !== !1 && e.enableColumnFilter,
+			enableSorting: e.enableSorting,
+			enableHiding: e.enableHiding ?? !0,
+			size: e.size,
+			minSize: e.minSize ?? 50,
+			maxSize: e.maxSize ?? 1e3,
+			filterFn: Ye(e.filterFn, e.filterSelectOptions),
+			meta: {
+				headerLabel: e.header,
+				filterSelectOptions: e.filterSelectOptions,
+				mobileFullWidth: e.mobileFullWidth
+			},
+			header: (n) => {
+				let r = n.column.getIsSorted(), i = n.column.getCanSort();
+				return /* @__PURE__ */ f("div", {
+					className: "flex flex-col gap-1.5",
+					children: /* @__PURE__ */ p("div", {
+						className: t("flex items-center gap-1.5", l && i && "cursor-pointer select-none"),
+						onClick: l && i ? n.column.getToggleSortingHandler() : void 0,
+						children: [/* @__PURE__ */ f("span", {
+							className: "min-w-0 truncate text-sm font-semibold tracking-wide",
+							children: e.header
+						}), l && i && /* @__PURE__ */ p("span", {
+							className: "text-muted-foreground ml-auto shrink-0 text-xs",
+							children: [
+								r === "asc" && /* @__PURE__ */ f(v, { className: "text-primary h-3.5 w-3.5" }),
+								r === "desc" && /* @__PURE__ */ f(_, { className: "text-primary h-3.5 w-3.5" }),
+								r === !1 && /* @__PURE__ */ f(y, { className: "h-3 w-3 opacity-60" })
+							]
+						})]
+					})
+				});
+			},
+			cell: e.cell ?? ((e) => e.getValue())
+		};
+		return e.accessorFn === void 0 ? {
+			...n,
+			...e.id === void 0 ? {} : { id: e.id },
+			accessorKey: e.accessorKey
+		} : {
+			...n,
+			id: e.id,
+			accessorFn: e.accessorFn
+		};
+	}), [n]), P = ye({
 		data: e,
 		columns: N,
 		state: {
@@ -1023,8 +1034,8 @@ var Ye = ie(), Xe = ({ data: e, columnDef: n, pageSize: r = 10, className: i, sh
 		onSortingChange: k,
 		onColumnFiltersChange: w,
 		onGlobalFilterChange: D,
-		globalFilterFn: Ge,
-		features: Ke,
+		globalFilterFn: Ke,
+		features: qe,
 		defaultColumn: {
 			size: 200,
 			minSize: 50,
@@ -1039,7 +1050,7 @@ var Ye = ie(), Xe = ({ data: e, columnDef: n, pageSize: r = 10, className: i, sh
 				children: [
 					/* @__PURE__ */ p("div", {
 						className: "flex items-center gap-2",
-						children: [/* @__PURE__ */ p(H, {
+						children: [/* @__PURE__ */ p(V, {
 							variant: "outline-secondary",
 							size: "sm",
 							disabled: !M && O.length === 0,
@@ -1057,7 +1068,7 @@ var Ye = ie(), Xe = ({ data: e, columnDef: n, pageSize: r = 10, className: i, sh
 						children: [
 							/* @__PURE__ */ p("div", {
 								className: "flex items-center gap-1",
-								children: [/* @__PURE__ */ f(H, {
+								children: [/* @__PURE__ */ f(V, {
 									variant: "outline-secondary",
 									size: "icon-md",
 									className: "h-10 w-10 sm:h-8 sm:w-8",
@@ -1073,7 +1084,7 @@ var Ye = ie(), Xe = ({ data: e, columnDef: n, pageSize: r = 10, className: i, sh
 										"aria-hidden": "true",
 										className: "h-3.5 w-3.5"
 									})
-								}), /* @__PURE__ */ f(H, {
+								}), /* @__PURE__ */ f(V, {
 									variant: "outline-secondary",
 									size: "icon-md",
 									className: "h-10 w-10 sm:h-8 sm:w-8",
@@ -1119,7 +1130,7 @@ var Ye = ie(), Xe = ({ data: e, columnDef: n, pageSize: r = 10, className: i, sh
 							}),
 							/* @__PURE__ */ p("div", {
 								className: "flex items-center gap-1",
-								children: [/* @__PURE__ */ f(H, {
+								children: [/* @__PURE__ */ f(V, {
 									variant: "outline-secondary",
 									size: "icon-md",
 									className: "h-10 w-10 sm:h-8 sm:w-8",
@@ -1135,7 +1146,7 @@ var Ye = ie(), Xe = ({ data: e, columnDef: n, pageSize: r = 10, className: i, sh
 										"aria-hidden": "true",
 										className: "h-3.5 w-3.5"
 									})
-								}), /* @__PURE__ */ f(H, {
+								}), /* @__PURE__ */ f(V, {
 									variant: "outline-secondary",
 									size: "icon-md",
 									className: "h-10 w-10 sm:h-8 sm:w-8",
@@ -1158,7 +1169,7 @@ var Ye = ie(), Xe = ({ data: e, columnDef: n, pageSize: r = 10, className: i, sh
 					/* @__PURE__ */ p("label", {
 						htmlFor: `${d}-page-size`,
 						className: "text-muted-foreground flex w-full items-center justify-between gap-2 text-xs md:w-auto",
-						children: ["Rows per page", /* @__PURE__ */ f(Z, {
+						children: ["Rows per page", /* @__PURE__ */ f(Y, {
 							id: `${d}-page-size`,
 							value: P.state.pagination.pageSize.toString(),
 							onChange: (e) => {
@@ -1197,7 +1208,7 @@ var Ye = ie(), Xe = ({ data: e, columnDef: n, pageSize: r = 10, className: i, sh
 								htmlFor: `${d}-sort`,
 								className: "text-muted-foreground mb-1 block text-xs font-medium",
 								children: "Sort by"
-							}), /* @__PURE__ */ f(Z, {
+							}), /* @__PURE__ */ f(Y, {
 								id: `${d}-sort`,
 								value: O[0]?.id ?? "__none__",
 								onChange: (e) => {
@@ -1214,7 +1225,7 @@ var Ye = ie(), Xe = ({ data: e, columnDef: n, pageSize: r = 10, className: i, sh
 									label: e.columnDef.meta?.headerLabel ?? e.id
 								}))]
 							})]
-						}), /* @__PURE__ */ f(H, {
+						}), /* @__PURE__ */ f(V, {
 							variant: "outline-secondary",
 							size: "icon-sm",
 							disabled: O.length === 0,
@@ -1324,7 +1335,7 @@ function Ze({ value: e, onChange: t, debounce: n = 500, ...r }) {
 		i,
 		n,
 		t
-	]), /* @__PURE__ */ f(q, {
+	]), /* @__PURE__ */ f(G, {
 		...r,
 		value: i,
 		onChange: (e) => a(e.target.value),
@@ -1339,7 +1350,7 @@ function Qe({ column: e, idPrefix: t = "" }) {
 		equals: "Equals",
 		fuzzy: "Fuzzy"
 	}, i = e.getFilterValue(), a = e.columnDef.meta?.filterSelectOptions;
-	return a ? /* @__PURE__ */ f(Z, {
+	return a ? /* @__PURE__ */ f(Y, {
 		id: n,
 		value: i ?? "__all__",
 		onChange: (t) => e.setFilterValue(t === "__all__" ? void 0 : t),
@@ -1363,9 +1374,9 @@ function Qe({ column: e, idPrefix: t = "" }) {
 	});
 }
 function $e({ table: e }) {
-	return /* @__PURE__ */ p(K, {
+	return /* @__PURE__ */ p(W, {
 		trigger: "click",
-		triggerRender: /* @__PURE__ */ f(H, {
+		triggerRender: /* @__PURE__ */ f(V, {
 			variant: "outline-secondary",
 			size: "sm",
 			title: "Toggle columns",
@@ -1378,7 +1389,7 @@ function $e({ table: e }) {
 			className: "flex flex-col",
 			children: e.getAllLeafColumns().map((e) => {
 				let n = e.columnDef.meta?.headerLabel ?? e.id, r = e.getCanHide(), i = e.getIsVisible();
-				return /* @__PURE__ */ p(H, {
+				return /* @__PURE__ */ p(V, {
 					variant: "ghost",
 					size: "sm",
 					disabled: !r,
@@ -1521,53 +1532,53 @@ var et = ({ className: e, href: n, text: r, target: i = "_blank", rel: a, ...o }
 			className: "border-success bg-success/70"
 		}
 	]
-}), it = {
+}), Z = {
 	light: L,
 	dark: I,
 	system: F
-}, $ = {
+}, Q = {
 	light: "Light",
 	dark: "Dark",
 	system: "System"
-}, at = "theme", ot = (e) => e === "dark" || e === "system" && typeof window < "u" && window.matchMedia("(prefers-color-scheme: dark)").matches, st = () => {
+}, it = "theme", at = (e) => e === "dark" || e === "system" && typeof window < "u" && window.matchMedia("(prefers-color-scheme: dark)").matches, ot = () => {
 	if (typeof window > "u") return "system";
-	let e = window.localStorage.getItem(at);
+	let e = window.localStorage.getItem(it);
 	return e === "light" || e === "dark" || e === "system" ? e : "system";
-}, ct = (e) => e === "system" ? "light" : e === "light" ? "dark" : "system";
-function lt({ variant: e = "dropdown", showLabel: n = !1 }) {
-	let [r, i] = u(st);
+}, st = (e) => e === "system" ? "light" : e === "light" ? "dark" : "system";
+function ct({ variant: e = "dropdown", showLabel: n = !1 }) {
+	let [r, i] = u(ot);
 	o(() => {
-		typeof window < "u" && (document.documentElement.classList.toggle("dark", ot(r)), window.localStorage.setItem(at, r));
+		typeof window < "u" && (document.documentElement.classList.toggle("dark", at(r)), window.localStorage.setItem(it, r));
 	}, [r]);
 	let a = () => {
-		i(ct(r));
+		i(st(r));
 	};
 	if (e === "toggle") {
-		let e = it[r], t = ct(r);
+		let e = Z[r], t = st(r);
 		return /* @__PURE__ */ f("div", {
 			className: "arc-theme-switcher",
-			children: /* @__PURE__ */ p(Y, {
-				active: ot(r),
+			children: /* @__PURE__ */ p(q, {
+				active: at(r),
 				"aria-label": `Switch to ${t} theme`,
 				title: `Switch to ${t} theme`,
 				onClick: a,
 				className: "w-fit gap-3",
-				children: [/* @__PURE__ */ f(e, { "aria-hidden": "true" }), n && $[r]]
+				children: [/* @__PURE__ */ f(e, { "aria-hidden": "true" }), n && Q[r]]
 			})
 		});
 	}
-	let s = it[r];
+	let s = Z[r];
 	return /* @__PURE__ */ f("div", {
 		className: "arc-theme-switcher",
-		children: /* @__PURE__ */ p(X, {
+		children: /* @__PURE__ */ p(J, {
 			className: "gap-3",
 			contentClassName: "min-w-(--anchor-width)",
-			buttonText: /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f(s, { "aria-hidden": "true" }), n && $[r]] }),
+			buttonText: /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f(s, { "aria-hidden": "true" }), n && Q[r]] }),
 			children: [
-				/* @__PURE__ */ f(X.Item, {
+				/* @__PURE__ */ f(J.Item, {
 					asChild: !0,
 					className: t("border-0! focus-visible:outline-none", n ? "px-3!" : "justify-center! p-0!"),
-					children: /* @__PURE__ */ p(Y, {
+					children: /* @__PURE__ */ p(q, {
 						active: r === "system",
 						title: "System Theme",
 						onClick: () => {
@@ -1577,13 +1588,13 @@ function lt({ variant: e = "dropdown", showLabel: n = !1 }) {
 						children: [/* @__PURE__ */ f(F, {
 							className: "size-4",
 							"aria-hidden": "true"
-						}), n && $.system]
+						}), n && Q.system]
 					})
 				}),
-				/* @__PURE__ */ f(X.Item, {
+				/* @__PURE__ */ f(J.Item, {
 					asChild: !0,
 					className: t("border-0! focus-visible:outline-none", n ? "px-3!" : "justify-center! p-0!"),
-					children: /* @__PURE__ */ p(Y, {
+					children: /* @__PURE__ */ p(q, {
 						active: r === "light",
 						title: "Light Theme",
 						onClick: () => {
@@ -1593,13 +1604,13 @@ function lt({ variant: e = "dropdown", showLabel: n = !1 }) {
 						children: [/* @__PURE__ */ f(L, {
 							className: "size-4",
 							"aria-hidden": "true"
-						}), n && $.light]
+						}), n && Q.light]
 					})
 				}),
-				/* @__PURE__ */ f(X.Item, {
+				/* @__PURE__ */ f(J.Item, {
 					asChild: !0,
 					className: t("border-0! focus-visible:outline-none", n ? "px-3!" : "justify-center! p-0!"),
-					children: /* @__PURE__ */ p(Y, {
+					children: /* @__PURE__ */ p(q, {
 						active: r === "dark",
 						title: "Dark Theme",
 						onClick: () => {
@@ -1609,7 +1620,7 @@ function lt({ variant: e = "dropdown", showLabel: n = !1 }) {
 						children: [/* @__PURE__ */ f(I, {
 							className: "size-4",
 							"aria-hidden": "true"
-						}), n && $.dark]
+						}), n && Q.dark]
 					})
 				})
 			]
@@ -1617,16 +1628,16 @@ function lt({ variant: e = "dropdown", showLabel: n = !1 }) {
 	});
 }
 // components/typing-animation.tsx
-function ut(e) {
+function lt(e) {
 	return e === "newline" ? "\n" : e === "comma" ? ", " : "";
 }
-function dt(e, t, n, r, i) {
+function ut(e, t, n, r, i) {
 	if (r === "character") return Math.max(0, Math.min(e.length, t + n * i));
 	let a = [...e.matchAll(/\S+\s*/g)].map((e) => e.index + e[0].length), o = t;
 	for (let t = 0; t < n; t += 1) o = i === 1 ? a.find((e) => e > o) ?? e.length : [...a].reverse().find((e) => e < o) ?? 0;
 	return o;
 }
-function ft({ strings: e, placeholder: t, perTick: n = {
+function dt({ strings: e, placeholder: t, perTick: n = {
 	amount: 1,
 	unit: "character"
 }, msDelay: r = {
@@ -1671,9 +1682,9 @@ function ft({ strings: e, placeholder: t, perTick: n = {
 				T([]), C(""), N.current += 1, P.current = 0, t = setTimeout(r, _);
 				return;
 			}
-			if (L.current) P.current = dt(i, P.current, b, x, -1), C(i.slice(0, P.current)), P.current === 0 && (L.current = !1, N.current = (N.current + 1) % e.length);
+			if (L.current) P.current = ut(i, P.current, b, x, -1), C(i.slice(0, P.current)), P.current === 0 && (L.current = !1, N.current = (N.current + 1) % e.length);
 			else {
-				if (P.current = dt(i, P.current, b, x, 1), C(i.slice(0, P.current)), L.current = !n && P.current === i.length && (s || N.current < e.length - 1), !n && P.current === i.length && !L.current && !s) {
+				if (P.current = ut(i, P.current, b, x, 1), C(i.slice(0, P.current)), L.current = !n && P.current === i.length && (s || N.current < e.length - 1), !n && P.current === i.length && !L.current && !s) {
 					k(!0);
 					return;
 				}
@@ -1706,13 +1717,13 @@ function ft({ strings: e, placeholder: t, perTick: n = {
 		O,
 		v
 	]);
-	let R = A ? "." : "", z = d !== "clear", B = ut(d), V = w.reduce((e, t) => e + t.split("\n").length, 0);
+	let R = A ? "." : "", z = d !== "clear", B = lt(d), ee = w.reduce((e, t) => e + t.split("\n").length, 0);
 	return z ? /* @__PURE__ */ f("div", {
 		ref: (e) => {
 			M.current = e;
 		},
 		className: "arc-typing-animation overflow-hidden",
-		style: { "--typing-roll-offset": V },
+		style: { "--typing-roll-offset": ee },
 		children: /* @__PURE__ */ p("div", {
 			className: "whitespace-pre-line",
 			children: [
@@ -1737,7 +1748,7 @@ function ft({ strings: e, placeholder: t, perTick: n = {
 	});
 }
 // utilities/hash-navigation.ts
-function pt({ intervalMs: e = 500, maxAttempts: t = 20, behavior: n = "smooth", block: r } = {}) {
+function $({ intervalMs: e = 500, maxAttempts: t = 20, behavior: n = "smooth", block: r } = {}) {
 	if (typeof window > "u") return () => {};
 	let i = 0, a = setInterval(() => {
 		i += 1;
@@ -1755,10 +1766,10 @@ function pt({ intervalMs: e = 500, maxAttempts: t = 20, behavior: n = "smooth",
 	}, e);
 	return () => clearInterval(a);
 }
-function mt(e) {
-	o(() => pt(e), []);
+function ft(e) {
+	o(() => $(e), []);
 }
-function ht({ container: e, sectionIds: t, hashFirstSection: n = !0, onActiveChange: r }) {
+function pt({ container: e, sectionIds: t, hashFirstSection: n = !0, onActiveChange: r }) {
 	let i = t.map((e) => document.getElementById(e)).filter((e) => e !== null), a = window.location.hash.toLowerCase().slice(1) || null, o = () => {
 		let t = e.getBoundingClientRect(), o = t.top + t.height / 2, s = i.find((e) => {
 			let t = e.getBoundingClientRect();
@@ -1770,4 +1781,4 @@ function ht({ container: e, sectionIds: t, hashFirstSection: n = !0, onActiveCha
 	};
 	return o(), e.addEventListener("scroll", o, { passive: !0 }), () => e.removeEventListener("scroll", o);
 }
-export { De as Avatar, H as Button, xe as ButtonGroup, J as Card, Ie as DateHandler, Oe as Divider, Ce as DoubleClickButton, ke as Dropdown, U as ErrorText, Me as GridLoader, q as Input, Le as InputTimestamp, Ne as LabelField, we as LongPressButton, X as Menu, Ve as Modal, He as MultiDropdown, Y as Pill, ze as PillLink, K as PreviewCard, Z as Select, tt as Switch, Xe as Table, We as Tag, et as TextLink, lt as ThemeSwitcher, ft as TypingAnimation, pt as navigateToHashOnLoad, ht as updateHashOnScroll, mt as useHashNavigationOnLoad };
+export { De as Avatar, V as Button, xe as ButtonGroup, K as Card, Le as DateHandler, Oe as Divider, Ce as DoubleClickButton, ke as Dropdown, H as ErrorText, Ne as GridLoader, G as Input, Re as InputTimestamp, Pe as LabelField, we as LongPressButton, J as Menu, He as Modal, Ue as MultiDropdown, q as Pill, Be as PillLink, W as PreviewCard, Y as Select, tt as Switch, Xe as Table, Ge as Tag, et as TextLink, ct as ThemeSwitcher, dt as TypingAnimation, $ as navigateToHashOnLoad, pt as updateHashOnScroll, ft as useHashNavigationOnLoad };

package/dist/components/input-timestamp.d.ts

@@ -1,7 +1,8 @@
 import { ComponentPropsWithoutRef } from 'react';
+import { FormattedTimeTemplate } from '../utilities/date-handler';
 export interface InputTimestampProps extends Omit<ComponentPropsWithoutRef<"input">, "value"> {
     value?: unknown;
-    format?: string;
+    format?: FormattedTimeTemplate;
 }
 declare const InputTimestamp: ({ value, format, ...rest }: InputTimestampProps) => import('react').JSX.Element;
 export default InputTimestamp;

package/dist/components/table.d.ts

@@ -1,5 +1,14 @@
-export type TableColumnDef = {
-    accessorKey: string;
+import { DeepKeys, CellContext } from '@tanstack/react-table';
+import { ReactNode } from 'react';
+type TableColumnMeta = {
+    headerLabel?: string;
+    filterSelectOptions?: {
+        value: string;
+        label: string;
+    }[];
+    mobileFullWidth?: boolean;
+};
+export type TableColumnDef<TData extends object = Record<string, unknown>, TValue = unknown> = {
     header: string;
     id?: string;
     enableResizing?: boolean;
@@ -15,16 +24,49 @@ export type TableColumnDef = {
         label: string;
     }[];
     mobileFullWidth?: boolean;
-    cell?: any;
-};
-export type TableProps = {
-    data: any[];
-    columnDef: TableColumnDef[];
+    cell?: (context: CellContext<typeof features, TData, TValue>) => ReactNode;
+} & ({
+    accessorKey: DeepKeys<TData>;
+    accessorFn?: never;
+} | {
+    accessorKey?: never;
+    accessorFn: (row: TData) => TValue;
+    id: string;
+});
+export type TableProps<TData extends object = Record<string, unknown>> = {
+    data: TData[];
+    columnDef: TableColumnDef<TData, any>[];
     pageSize?: number;
     className?: string;
     showHeader?: boolean;
     showFilters?: boolean;
     showSorting?: boolean;
 };
-declare const Table: ({ data, columnDef, pageSize, className, showHeader, showFilters, showSorting, }: TableProps) => import('react').JSX.Element;
+declare const features: {
+    columnMeta: TableColumnMeta;
+    columnFilteringFeature: import('@tanstack/react-table').TableFeature;
+    columnResizingFeature: import('@tanstack/react-table').TableFeature;
+    columnSizingFeature: import('@tanstack/react-table').TableFeature;
+    columnVisibilityFeature: import('@tanstack/react-table').TableFeature;
+    globalFilteringFeature: import('@tanstack/react-table').TableFeature;
+    rowPaginationFeature: import('@tanstack/react-table').TableFeature;
+    rowSortingFeature: import('@tanstack/react-table').TableFeature;
+    filteredRowModel: (table: import('@tanstack/react-table').Table<any, any>) => () => import('@tanstack/react-table').RowModel<any, any>;
+    paginatedRowModel: (table: import('@tanstack/react-table').Table<any, any>) => () => import('@tanstack/react-table').RowModel<any, any>;
+    sortedRowModel: (table: import('@tanstack/react-table').Table<any, any>) => () => import('@tanstack/react-table').RowModel<any, any>;
+    sortFns: {
+        alphanumeric: import('@tanstack/react-table').CreatedSortFn<any, any>;
+        alphanumericCaseSensitive: import('@tanstack/react-table').CreatedSortFn<any, any>;
+        basic: import('@tanstack/react-table').CreatedSortFn<any, any>;
+        datetime: import('@tanstack/react-table').CreatedSortFn<any, any>;
+        text: import('@tanstack/react-table').CreatedSortFn<any, any>;
+        textCaseSensitive: import('@tanstack/react-table').CreatedSortFn<any, any>;
+    };
+    filterFns: {
+        fuzzy: (row: any, columnId: any, value: any, addMeta: any) => boolean;
+        includesString: import('@tanstack/react-table').CreatedFilterFn<any, any>;
+        select: (row: any, columnId: any, filterValue: any) => boolean;
+    };
+};
+declare const Table: <TData extends object = Record<string, unknown>>({ data, columnDef, pageSize, className, showHeader, showFilters, showSorting, }: TableProps<TData>) => import('react').JSX.Element;
 export default Table;

package/dist/utilities/date-handler.d.ts

@@ -1,13 +1,17 @@
 import { DurationLike, ToRelativeOptions } from 'luxon';
+/** Any Luxon format string; common values are listed for editor suggestions. */
+export type DateTimeFormat = (string & {}) | "dd/MMM/yyyy hh:mm:ss a" | "dd/MM/yyyy" | "MMM d, yyyy" | "yyyy-MM-dd" | "yyyy-MM-dd'T'HH:mm:ss" | "HH:mm:ss" | "hh:mm a" | "cccc, dd LLLL yyyy 'at' hh:mm a" | "D" | "DD" | "DDD" | "t" | "T" | "f" | "F";
+/** Any template string; the listed placeholders are replaced with formatted date values. */
+export type FormattedTimeTemplate = (string & {}) | "$ISO$ ($RELATIVE$)" | "$ISO$" | "$RELATIVE$" | "$ISO$ - $RELATIVE$" | "$RELATIVE$ - $ISO$";
 export declare class DateHandler {
     private static toDateTime;
-    static getDateTime(date: unknown, format?: string): string;
+    static getDateTime(date: unknown, format?: DateTimeFormat): string;
     static getRelativeTime(date: unknown, options?: ToRelativeOptions): string;
     static getTimeDiff(date: unknown): string | null;
     static generateOffsetDateTime({ offset, future, format, }: {
         offset: DurationLike;
         future?: boolean;
-        format?: string | null;
+        format?: DateTimeFormat | null;
     }): string;
-    static getFormattedTime(date: unknown, format?: string): string;
+    static getFormattedTime(date: unknown, format?: FormattedTimeTemplate): string;
 }

package/dist/utilities/index.d.ts

@@ -1,3 +1,4 @@
 export { DateHandler } from './date-handler';
+export type { DateTimeFormat, FormattedTimeTemplate } from './date-handler';
 export { navigateToHashOnLoad, updateHashOnScroll, useHashNavigationOnLoad } from './hash-navigation';
 export type { HashNavigationOptions, UpdateHashOnScrollOptions } from './hash-navigation';

package/package.json

@@ -2,7 +2,7 @@
 	"name": "@febkosq8/arc",
 	"description": "A React components library for febkosq8",
 	"private": false,
-	"version": "0.8.3",
+	"version": "0.8.5",
 	"type": "module",
 	"main": "./dist/arc.js",
 	"types": "./dist/index.d.ts",
@@ -17,9 +17,21 @@
 		"dist",
 		"components/index.css"
 	],
+	"author": {
+		"name": "Febkosq8",
+		"email": "contact@febkosq8.me",
+		"url": "https://febkosq8.me"
+	},
+	"license": "CC-BY-NC-4.0",
+	"engines": {
+		"node": ">=26.13.0"
+	},
 	"homepage": "https://www.npmjs.com/package/@febkosq8/arc",
-	"repository": "https://github.com/febkosq8/arc",
-	"packageManager": "pnpm@12.15.0",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/febkosq8/arc.git"
+	},
+	"packageManager": "pnpm@12.18.0",
 	"scripts": {
 		"build": "vite build",
 		"storybook": "storybook dev -p 6006",
@@ -34,23 +46,23 @@
 	},
 	"dependencies": {
 		"@base-ui/react": "1.9.0",
-		"@rinzai/zen": "0.14.0",
+		"@rinzai/zen": "0.17.0",
 		"@tanstack/match-sorter-utils": "9.2.6",
 		"@tanstack/react-table": "9.3.1",
 		"luxon": "3.7.2",
 		"react-icons": "5.7.0"
 	},
 	"devDependencies": {
-		"@storybook/addon-docs": "10.6.3",
-		"@storybook/react-vite": "10.6.3",
-		"@tailwindcss/postcss": "4.3.3",
+		"@storybook/addon-docs": "10.6.6",
+		"@storybook/react-vite": "10.6.6",
+		"@tailwindcss/vite": "4.3.4",
 		"@types/luxon": "3.7.6",
-		"@types/node": "26.6.5",
+		"@types/node": "26.6.6",
 		"@types/react": "19.3.0",
 		"@types/react-dom": "19.3.0",
 		"@typescript/typescript6": "6.0.2",
-		"@vitejs/plugin-react": "6.1.2",
-		"eslint": "10.13.0",
+		"@vitejs/plugin-react": "6.2.1",
+		"eslint": "10.14.0",
 		"prettier": "3.9.10",
 		"prettier-plugin-css-order": "2.2.0",
 		"prettier-plugin-organize-attributes": "1.0.0",
@@ -58,10 +70,10 @@
 		"prettier-plugin-tailwindcss": "0.8.1",
 		"react": "19.3.1",
 		"react-dom": "19.3.1",
-		"storybook": "10.6.3",
-		"tailwindcss": "4.3.3",
+		"storybook": "10.6.6",
+		"tailwindcss": "4.3.4",
 		"typescript": "7.0.2",
 		"unplugin-dts": "1.1.2",
-		"vite": "8.3.5"
+		"vite": "8.3.6"
 	}
 }