@febkosq8/arc 0.7.0 → 0.8.1

package/README.md

@@ -64,6 +64,7 @@ export function Example() {
 - [npm package](https://www.npmjs.com/package/@febkosq8/arc)
 - [GitHub repository](https://github.com/febkosq8/arc)
 - [Component source](./components/)
+- [Utility source](./utilities/)
 - [Storybook stories](./stories/)
 
 Arc is primarily built to meet my own projects' needs. It's shared publicly for anyone who might find the code useful, but it isn't intended as a polished, general-purpose replacement for a larger UI framework.

package/dist/arc.js

@@ -11,16 +11,16 @@ 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 ee } from "@tanstack/match-sorter-utils";
-import { columnFilteringFeature as te, columnResizingFeature as ne, columnSizingFeature as re, columnVisibilityFeature as ie, createColumnHelper as ae, createFilteredRowModel as oe, createPaginatedRowModel as se, createSortedRowModel as ce, filterFn_includesString as le, globalFilteringFeature as ue, rowPaginationFeature as de, rowSortingFeature as fe, sortFn_alphanumeric as pe, sortFn_alphanumericCaseSensitive as me, sortFn_basic as he, sortFn_datetime as ge, sortFn_text as _e, sortFn_textCaseSensitive as ve, tableFeatures as ye, useTable as be } from "@tanstack/react-table";
-import { Switch as xe } from "@base-ui/react/switch";
+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 { Switch as be } from "@base-ui/react/switch";
 //#region components/button-group.tsx
-var Se = ({ className: e, orientation: r = "horizontal", selectedVariant: o, children: s, ...c }) => /* @__PURE__ */ f("div", {
+var xe = ({ className: e, orientation: r = "horizontal", selectedVariant: o, children: s, ...c }) => /* @__PURE__ */ f("div", {
 	role: "group",
 	className: t("arc-button-group inline-flex w-fit gap-0 overflow-hidden rounded-md border border-border", "[&>.arc-button]:rounded-none! [&>.arc-button:not(:first-child)]:border-l [&>.arc-button:not(:first-child)]:border-border", "[&>.arc-double-click-button]:z-1 [&>.arc-double-click-button]:m-0 [&>.arc-double-click-button]:rounded-none! [&>.arc-double-click-button]:p-0", "[&>.arc-double-click-button>.arc-button]:rounded-none! [&>.arc-double-click-button>.arc-double-click-progress-ring]:inset-0 [&>.arc-double-click-button>.arc-double-click-progress-ring]:z-2 [&>.arc-double-click-button>.arc-double-click-progress-ring]:rounded-[inherit]", "[&>.arc-long-press-button]:z-1 [&>.arc-long-press-button]:m-0 [&>.arc-long-press-button]:rounded-none! [&>.arc-long-press-button]:p-0", "[&>.arc-long-press-button>.arc-button]:rounded-none! [&>.arc-long-press-button>.arc-double-click-progress-ring]:inset-0 [&>.arc-long-press-button>.arc-double-click-progress-ring]:z-2 [&>.arc-long-press-button>.arc-double-click-progress-ring]:rounded-[inherit]", r === "vertical" && "flex-col items-stretch [&>.arc-button]:w-full [&>.arc-double-click-button]:w-full [&>.arc-long-press-button]:w-full [&>.arc-button:not(:first-child)]:border-t [&>.arc-button:not(:first-child)]:border-l-0 [&>.arc-double-click-button:not(:first-child)]:border-t [&>.arc-double-click-button:not(:first-child)]:border-l-0 [&>.arc-long-press-button:not(:first-child)]:border-t [&>.arc-long-press-button:not(:first-child)]:border-l-0 [&>.arc-double-click-button:first-child]:rounded-t-md [&>.arc-double-click-button:last-child]:rounded-b-md [&>.arc-long-press-button:first-child]:rounded-t-md [&>.arc-long-press-button:last-child]:rounded-b-md", r === "horizontal" && "[&>.arc-double-click-button:not(:first-child)]:border-l [&>.arc-double-click-button:not(:first-child)]:border-border [&>.arc-long-press-button:not(:first-child)]:border-l [&>.arc-long-press-button:not(:first-child)]:border-border [&>.arc-double-click-button:first-child]:rounded-l-md [&>.arc-double-click-button:last-child]:rounded-r-md [&>.arc-long-press-button:first-child]:rounded-l-md [&>.arc-long-press-button:last-child]:rounded-r-md", e),
 	...c,
 	children: n.map(s, (e) => !o || !a(e) ? e : e.props["aria-pressed"] === !0 ? i(e, { variant: o }) : e)
-}), Ce = e("inline-flex items-center justify-center 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 disabled:pointer-events-none disabled:opacity-50 truncate", {
+}), Se = e("inline-flex items-center justify-center 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 disabled:pointer-events-none disabled:opacity-50 truncate", {
 	variants: {
 		variant: {
 			primary: "bg-primary text-primary-foreground hover:bg-primary/90",
@@ -53,14 +53,14 @@ var Se = ({ className: e, orientation: r = "horizontal", selectedVariant: o, chi
 		variant: "primary",
 		size: "md"
 	}
-}), V = Object.assign(({ className: e, variant: n, size: r, ...i }) => /* @__PURE__ */ f("button", {
-	className: t("arc-button", Ce({
+}), H = Object.assign(({ className: e, variant: n, size: r, ...i }) => /* @__PURE__ */ f("button", {
+	className: t("arc-button", Se({
 		variant: n,
 		size: r,
 		className: e
 	})),
 	...i
-}), { Group: Se }), we = ({ doubleClickMsDuration: e = 2e3, feedbackVariant: n = "warning", feedbackContent: r, variant: i = "primary", children: a, onClick: s, onDoubleClick: c, className: d, style: m, ...h }) => {
+}), { Group: xe }), Ce = ({ doubleClickMsDuration: e = 2e3, feedbackVariant: n = "warning", feedbackContent: r, variant: i = "primary", children: a, onClick: s, onDoubleClick: c, className: d, style: m, ...h }) => {
 	let [g, _] = u(!1), [v, y] = u(0), b = l(void 0), x = l(void 0), S = l(0), C = {
 		primary: "var(--color-primary)",
 		secondary: "var(--color-secondary-foreground)",
@@ -88,7 +88,7 @@ var Se = ({ className: e, orientation: r = "horizontal", selectedVariant: o, chi
 			"aria-hidden": !g,
 			children: w
 		})]
-	}), E = /* @__PURE__ */ f(V, {
+	}), E = /* @__PURE__ */ f(H, {
 		...h,
 		children: T,
 		className: t(d),
@@ -123,7 +123,7 @@ var Se = ({ className: e, orientation: r = "horizontal", selectedVariant: o, chi
 			}
 		})]
 	});
-}, Te = ({ longPressMsDuration: e = 2500, onLongPress: n, onClick: r, preventClick: i = !0, feedbackVariant: a = "warning", feedbackContent: s, variant: c = "primary", children: d, ...m }) => {
+}, we = ({ longPressMsDuration: e = 2500, onLongPress: n, onClick: r, preventClick: i = !0, feedbackVariant: a = "warning", feedbackContent: s, variant: c = "primary", children: d, ...m }) => {
 	let h = l(void 0), g = l(void 0), _ = l(0), v = l(!1), [y, b] = u(!1), [x, S] = u(0), C = () => {
 		h.current && clearTimeout(h.current), g.current && clearInterval(g.current), h.current = void 0, g.current = void 0;
 	};
@@ -155,7 +155,7 @@ var Se = ({ className: e, orientation: r = "horizontal", selectedVariant: o, chi
 	return /* @__PURE__ */ p("span", {
 		className: "arc-long-press-button relative inline-flex",
 		"data-long-press-state": y ? "pressing" : void 0,
-		children: [/* @__PURE__ */ f(V, {
+		children: [/* @__PURE__ */ f(H, {
 			...m,
 			children: E,
 			variant: c,
@@ -190,45 +190,7 @@ var Se = ({ className: e, orientation: r = "horizontal", selectedVariant: o, chi
 			}
 		})]
 	});
-};
-//#endregion
-//#region components/hash-navigation.ts
-function Ee({ intervalMs: e = 500, maxAttempts: t = 20, behavior: n = "smooth", block: r } = {}) {
-	if (typeof window > "u") return () => {};
-	let i = 0, a = setInterval(() => {
-		i += 1;
-		let { hash: e } = window.location;
-		if (!e || i > t) clearInterval(a);
-		else try {
-			let t = document.querySelector(e);
-			t && (t.scrollIntoView({
-				behavior: n,
-				block: r
-			}), clearInterval(a));
-		} catch (t) {
-			console.error(`Invalid hash in URL: ${e}`, t), clearInterval(a);
-		}
-	}, e);
-	return () => clearInterval(a);
-}
-function De(e) {
-	o(() => Ee(e), []);
-}
-function Oe({ 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();
-			return t.top <= o && t.bottom > o;
-		}), c = s ? i.indexOf(s) : -1;
-		if (r?.(c, i), !s || (a === s.id.toLowerCase() && (a = null), c === 0 && a)) return;
-		let l = c === 0 && !n ? "" : `#${s.id}`;
-		window.location.hash !== l && (window.history.replaceState(window.history.state, "", `${window.location.pathname}${window.location.search}${l}`), window.dispatchEvent(new HashChangeEvent("hashchange")));
-	};
-	return o(), e.addEventListener("scroll", o, { passive: !0 }), () => e.removeEventListener("scroll", o);
-}
-//#endregion
-//#region components/avatar.tsx
-var ke = e("arc-avatar inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-muted ring-1 ring-border transition-all", {
+}, Te = e("arc-avatar inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-muted ring-1 ring-border transition-all", {
 	variants: { size: {
 		xs: "size-6 text-xs",
 		sm: "size-7 text-sm",
@@ -237,12 +199,12 @@ var ke = e("arc-avatar inline-flex shrink-0 items-center justify-center overflow
 		xl: "size-12 text-xl"
 	} },
 	defaultVariants: { size: "md" }
-}), Ae = ({ name: e, image: n, size: r, className: i, ...a }) => {
+}), Ee = ({ name: e, image: n, size: r, className: i, ...a }) => {
 	let [s, l] = u(!1), d = n?.trim(), p = !!d && !s, m = c(() => e?.split(" ", 3)?.map((e) => e[0])?.filter((e) => /[A-Za-z]/.test(e))?.join("") || "U", [e]);
 	return o(() => {
 		l(!1);
 	}, [d]), /* @__PURE__ */ f("span", {
-		className: t(ke({
+		className: t(Te({
 			size: r,
 			className: i
 		})),
@@ -259,11 +221,11 @@ var ke = e("arc-avatar inline-flex shrink-0 items-center justify-center overflow
 			children: m
 		})
 	});
-}, je = ({ className: e, ...n }) => /* @__PURE__ */ f("div", {
+}, De = ({ className: e, ...n }) => /* @__PURE__ */ f("div", {
 	role: "separator",
 	className: t("arc-divider w-full border-b border-border", e),
 	...n
-}), Me = ({ items: e, value: n, onChange: r, className: i, placeholder: a = "Select an option", disabled: o, name: s, preventEmpty: c = !1, "data-name": l, "data-required": u }) => {
+}), Oe = ({ items: e, value: n, onChange: r, className: i, placeholder: a = "Select an option", disabled: o, name: s, preventEmpty: c = !1, "data-name": l, "data-required": u }) => {
 	let d = e.find((e) => String(e.key) === String(n)) ?? null;
 	return /* @__PURE__ */ f(m.Root, {
 		items: e,
@@ -324,7 +286,7 @@ var ke = e("arc-avatar inline-flex shrink-0 items-center justify-center overflow
 			}) })]
 		})
 	});
-}, H = ({ data: e, className: n, ...r }) => {
+}, U = ({ data: e, className: n, ...r }) => {
 	let i = Array.isArray(e) ? e.join(", ") : typeof e == "string" ? e : null;
 	return /* @__PURE__ */ f("em", {
 		role: "alert",
@@ -333,45 +295,19 @@ var ke = e("arc-avatar inline-flex shrink-0 items-center justify-center overflow
 		...r,
 		children: i
 	});
-}, Ne = [
-	"(,,> ᴗ <,,)",
-	"≽^•⩊•^≼",
-	"(╥﹏╥)",
-	"(˶ᵔ ᵕ ᵔ˶)",
-	"•⩊•",
-	"˚₊‧꒰ა ₍ᐢ.  ̫.ᐢ₎ ໒꒱ ‧₊˚",
-	"٩(ˊᗜˋ )و",
-	"(≧◡≦)",
-	"⸜(｡˃ ᵕ ˂ )⸝♡",
-	"(˶˃⤙˂˶)",
-	"（˶′◡‵˶）",
-	"(＾▽＾)",
-	"˚₊‧꒰ა.  .໒꒱ ‧₊˚",
-	"( ˶ˆᗜˆ˵ )",
-	"⊹ ₊  ⁺‧₊˚ ♡ ପ(๑•ᴗ•๑)ଓ ♡˚₊‧⁺ ₊ ⊹",
-	"(つ﹏⊂)",
-	"ʕ•̫͡•ʕ•̫͡•ʔ•̫͡•ʔ•̫͡•ʕ•̫͡•ʔ•̫͡ʕ•̫͡•ʕ•̫͡•ʔ•̫͡ʔ•̫͡•",
-	"（´・｀ ）♡",
-	"(╥_╥)",
-	"(♡ˊ͈ ꒳ ˋ͈)",
-	"(⸝⸝๑  ̫ ๑⸝⸝⸝)",
-	"(˶º⤙º˶)",
-	"૮₍｡´ᴖ ˔ ᴖ`｡₎ა",
-	"(•̀ᴗ•́)و ̑̑",
-	"(─‿‿─)"
-];
-function U(e, t, n) {
+}, ke = /* @__PURE__ */ "*.+.×.÷.=.~.!.?.@.#.%.&.§.¶.※.◇.◆.○.●.△.▽.□.■.♠.♣.♦.♤.♧.♢.♪.♫.∴.∵".split(".");
+function W(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 W = [
+var G = [
 	"circle",
 	"square",
 	"diamond",
 	"star",
 	"heart",
 	"hexagon"
-], Pe = e("arc-grid-loader__cell grid aspect-square w-full place-items-center overflow-hidden text-center leading-none break-all", {
+], Ae = 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",
@@ -381,59 +317,40 @@ var W = [
 		hexagon: "arc-grid-loader__cell--hexagon"
 	} },
 	defaultVariants: { shape: "circle" }
-}), Fe = ({ className: e, rows: n = 3, columns: r = 3, size: i = 120, maxSize: a = 24, shape: s = "circle", colors: c = [], label: l = "Loading", symbols: d = Ne, style: p, ...m }) => {
-	let [h, g] = u([]), [_, v] = u([]), [y, b] = u([]), [x, S] = u(() => typeof window < "u" && window.matchMedia("(prefers-reduced-motion: reduce)").matches);
+}), je = ({ 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 = ke, 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);
 	if (o(() => {
-		s === "mixed" && v(Array.from({ length: n * r }, () => W[Math.floor(Math.random() * W.length)]));
-	}, [
-		r,
-		n,
-		s
-	]), o(() => {
-		s === "mixed" && c.length !== 0 && b(Array.from({ length: n * r }, () => Math.floor(Math.random() * c.length)));
+		s === "mixed" && b(Array.from({ length: n * r }, () => C[Math.floor(Math.random() * C.length)]));
 	}, [
+		C,
 		r,
-		c.length,
 		n,
 		s
 	]), o(() => {
-		let e = window.matchMedia("(prefers-reduced-motion: reduce)"), t = () => S(e.matches);
+		let e = window.matchMedia("(prefers-reduced-motion: reduce)"), t = () => T(e.matches);
 		return t(), e.addEventListener("change", t), () => e.removeEventListener("change", t);
 	}, []), o(() => {
-		if (x) return;
-		let e = () => {
-			let e = Array.from({ length: d.length }, (e, t) => t);
-			for (let t = e.length - 1; t > 0; --t) {
-				let n = Math.floor(Math.random() * (t + 1));
-				[e[t], e[n]] = [e[n], e[t]];
-			}
-			g(Array.from({ length: n * r }, (t, n) => e[n % e.length]));
-		};
-		if (e(), d.length < 2) return;
-		let t = window.setInterval(() => {
-			e();
-		}, 900);
-		return () => window.clearInterval(t);
+		w || p.length === 0 || v(Array.from({ length: n * r }, () => Math.floor(Math.random() * p.length)));
 	}, [
 		r,
-		x,
+		w,
 		n,
-		d
+		p
 	]), !Number.isInteger(n) || n < 1) throw RangeError("GridLoader rows must be a positive integer.");
 	if (!Number.isInteger(r) || r < 1) throw RangeError("GridLoader columns must be a positive integer.");
 	if (!Number.isFinite(i) || i <= 0) throw RangeError("GridLoader size must be a positive number.");
 	if (!Number.isFinite(a) || a <= 0) throw RangeError("GridLoader maxSize must be a positive number.");
-	if (d.length === 0) throw RangeError("GridLoader symbols must contain at least one item.");
 	return /* @__PURE__ */ f("span", {
-		...m,
+		...g,
 		role: "status",
 		"aria-live": "polite",
-		"aria-label": l,
+		"aria-label": d,
+		title: m ?? d,
 		className: t("arc-grid-loader inline-flex shrink-0 items-center justify-center align-middle", e),
 		style: {
 			width: i,
 			height: i,
-			...p
+			...h
 		},
 		children: /* @__PURE__ */ f("span", {
 			"aria-hidden": "true",
@@ -444,29 +361,35 @@ var W = [
 				gridTemplateRows: `repeat(${n}, minmax(0, 1fr))`
 			},
 			children: Array.from({ length: n * r }, (e, o) => /* @__PURE__ */ f("span", {
-				className: t(Pe({ shape: s === "mixed" ? _[o] ?? W[Math.floor(U(o, n, r) * W.length)] : s })),
+				className: t(Ae({ shape: s === "mixed" ? y[o] ?? C[Math.floor(W(o, n, r) * C.length)] : s })),
 				onAnimationIteration: () => {
-					s === "mixed" && (v((e) => {
-						let t = [...e], i = t[o] ?? W[Math.floor(U(o, n, r) * W.length)], a = W.filter((e) => e !== i);
-						return t[o] = a[Math.floor(Math.random() * a.length)], t;
-					}), c.length > 1 && b((e) => {
+					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);
+						return t[o] = a.length > 0 ? a[Math.floor(Math.random() * a.length)] : i, t;
+					}), l.length > 1 && S((e) => {
+						let t = [...e];
+						return t[o] = (t[o] ?? 0) + 1, t;
+					}), p.length > 1 && v((e) => {
 						let t = [...e];
-						return t[o] = ((t[o] ?? o % c.length) + (1 + Math.floor(Math.random() * (c.length - 1)))) % c.length, t;
-					}));
+						return t[o] = ((t[o] ?? o % p.length) + (1 + Math.floor(Math.random() * (p.length - 1)))) % p.length, t;
+					});
 				},
 				style: {
-					animationDelay: `${-U(o, n, r) * 1200}ms`,
-					animationDuration: `${900 + U(o, n, r) * 600}ms`,
-					backgroundColor: c.length > 0 ? c[s === "mixed" ? y[o] ?? o % c.length : o % c.length] : void 0,
-					fontSize: `${Math.min(i / Math.max(n, r), a) * .3}px`,
+					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`,
+					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,
 					maxHeight: a
 				},
-				children: d[h[o] ?? o % d.length]
+				children: p.length > 0 && /* @__PURE__ */ f("span", {
+					className: "grid h-full w-full place-items-center text-center leading-none",
+					children: p[_[o] ?? o % p.length]
+				})
 			}, o))
 		})
 	});
-}, G = ({ 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, {
+}, 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, {
 	open: c,
 	onOpenChange: l,
 	children: [/* @__PURE__ */ f(A.Trigger, {
@@ -484,7 +407,7 @@ var W = [
 			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]
 		})
 	}) })]
-}), Ie = ({ id: e, label: n, help: r, errors: i, className: a, ...o }) => {
+}), Me = ({ 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,
@@ -496,7 +419,7 @@ var W = [
 				htmlFor: e,
 				children: n
 			}),
-			r != null && r !== !1 && /* @__PURE__ */ f(G, {
+			r != null && r !== !1 && /* @__PURE__ */ f(K, {
 				trigger: "hover",
 				triggerRender: /* @__PURE__ */ f("button", {
 					type: "button",
@@ -512,10 +435,10 @@ var W = [
 					"aria-hidden": "true"
 				})
 			}),
-			s && (Array.isArray(s) ? s.length > 0 && /* @__PURE__ */ f(H, { data: s }) : /* @__PURE__ */ f(H, { data: s }))
+			s && (Array.isArray(s) ? s.length > 0 && /* @__PURE__ */ f(U, { data: s }) : /* @__PURE__ */ f(U, { data: s }))
 		]
 	});
-}, Le = 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", {
+}, Ne = 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",
@@ -530,8 +453,8 @@ var W = [
 		variant: "default",
 		as: "input"
 	}
-}), K = ({ as: e = "input", className: n, variant: r, ...i }) => {
-	let a = t(Le({
+}), q = ({ as: e = "input", className: n, variant: r, ...i }) => {
+	let a = t(Ne({
 		as: e,
 		variant: r
 	}), n);
@@ -540,7 +463,7 @@ var W = [
 		autoComplete: "off",
 		className: a
 	});
-}, Re = e("arc-card group relative rounded-lg border border-foreground/40 bg-card/90 p-3 shadow-xs", {
+}, Pe = 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",
@@ -552,10 +475,10 @@ var W = [
 		"outline-warning": "border-warning bg-background text-warning"
 	} },
 	defaultVariants: { variant: "outline-secondary" }
-}), q = (e) => {
+}), J = (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(Re({ 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(Pe({ 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();
@@ -564,19 +487,19 @@ var W = [
 		...d
 	});
 };
-q.Header = (e) => {
+J.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
 	});
-}, q.Content = (e) => {
+}, J.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
 	});
-}, q.Footer = (e) => {
+}, J.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),
@@ -584,8 +507,8 @@ q.Header = (e) => {
 	});
 };
 //#endregion
-//#region components/date-handler.ts
-var ze = class e {
+//#region utilities/date-handler.ts
+var Fe = class e {
 	static toDateTime(e) {
 		if (e == null || e === "") return j.invalid("missing date");
 		if (e instanceof Date) return j.fromJSDate(e);
@@ -602,7 +525,7 @@ var ze = class e {
 		}
 		return j.fromJSDate(new Date(String(e)));
 	}
-	static getDateTime(t, n = "dd/MM/yyyy hh:mm:ss a") {
+	static getDateTime(t, n = "dd/MMM/yyyy hh:mm:ss a") {
 		let r = e.toDateTime(t);
 		return r.isValid ? r.toFormat(n) : "";
 	}
@@ -643,9 +566,9 @@ var ze = class e {
 		let r = e.getDateTime(t), i = e.getRelativeTime(t);
 		return n.replace("$ISO$", r).replace("$RELATIVE$", i);
 	}
-}, Be = ({ value: e, format: t = "$ISO$ ($RELATIVE$)", ...n }) => {
-	let r = c(() => e ? ze.getFormattedTime(e, t) : "", [e, t]);
-	return /* @__PURE__ */ f(K, {
+}, Ie = ({ value: e, format: t = "$ISO$ ($RELATIVE$)", ...n }) => {
+	let r = c(() => e ? Fe.getFormattedTime(e, t) : "", [e, t]);
+	return /* @__PURE__ */ f(q, {
 		type: "text",
 		disabled: !0,
 		readOnly: !0,
@@ -653,7 +576,7 @@ var ze = class e {
 		size: Math.max(r.length, 1),
 		...n
 	});
-}, Ve = 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", {
+}, Le = 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",
@@ -674,8 +597,8 @@ var ze = class e {
 		variant: "pill",
 		size: "md"
 	}
-}), He = ({ active: e = !1, className: n, size: r = "md", variant: i = "pill", ...a }) => /* @__PURE__ */ f("a", {
-	className: t(Ve({
+}), Re = ({ active: e = !1, className: n, size: r = "md", variant: i = "pill", ...a }) => /* @__PURE__ */ f("a", {
+	className: t(Le({
 		variant: i,
 		size: r
 	}), e && {
@@ -685,15 +608,15 @@ var ze = class e {
 	}[i], n),
 	"aria-current": e ? "page" : void 0,
 	...a
-}), J = ({ active: e = !1, className: n, ...r }) => /* @__PURE__ */ f("button", {
+}), Y = ({ 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
-}), Ue = ({ 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)), Y = Object.assign(({ className: e, contentClassName: n, active: r, activeClassName: i, buttonText: a, children: o }) => /* @__PURE__ */ p(M.Root, {
+}), ze = ({ 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, {
 	loopFocus: !0,
 	children: [/* @__PURE__ */ p(M.Trigger, {
-		render: /* @__PURE__ */ f(J, {
+		render: /* @__PURE__ */ f(Y, {
 			active: r,
 			className: t("w-fit", r && i, e)
 		}),
@@ -707,7 +630,7 @@ var ze = 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(Ue, { children: o })
+			children: /* @__PURE__ */ f(ze, { children: o })
 		})
 	}) })]
 }), {
@@ -748,12 +671,12 @@ var ze = 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(Ue, { children: i })
+					children: /* @__PURE__ */ f(ze, { children: i })
 				})
 			}) })]
 		});
 	}
-}), We = ({ open: e = !1, setOpen: n, children: r, initialFocus: i, headerContent: a, footerContent: s, width: c, height: l, className: u, customKeyHandler: d }) => (o(() => {
+}), Be = ({ 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;
@@ -792,7 +715,7 @@ var ze = class e {
 			]
 		})
 	})] })
-})), Ge = ({ 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 }) => {
+})), Ve = ({ 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,
@@ -872,7 +795,7 @@ var ze = class e {
 			}) })]
 		})
 	});
-}, X = ({ id: e, value: n, onChange: r, data: i, className: a, disabled: o, placeholder: s, ...c }) => /* @__PURE__ */ p(B.Root, {
+}, Z = ({ 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);
@@ -924,7 +847,7 @@ var ze = class e {
 			})
 		})
 	}) })]
-}), Ke = e("arc-tag inline-flex w-fit items-center rounded-full border border-transparent px-1.5 py-0.5 text-xs font-bold", {
+}), He = e("arc-tag inline-flex w-fit items-center rounded-full border border-transparent px-1.5 py-0.5 text-xs font-bold", {
 	variants: { variant: {
 		primary: "bg-primary text-primary-foreground",
 		secondary: "border-border bg-secondary text-secondary-foreground",
@@ -934,59 +857,59 @@ var ze = class e {
 		outline: "border-border bg-transparent text-foreground"
 	} },
 	defaultVariants: { variant: "primary" }
-}), qe = ({ className: e, variant: n, ...r }) => /* @__PURE__ */ f("div", {
-	className: t(Ke({
+}), Ue = ({ className: e, variant: n, ...r }) => /* @__PURE__ */ f("div", {
+	className: t(He({
 		variant: n,
 		className: e
 	})),
 	...r
-}), Je = (e, t, n, r) => {
-	let i = e.getValue(t), a = ee(i, n);
+}), We = (e, t, n, r) => {
+	let i = e.getValue(t), a = V(i, n);
 	return r({ itemRank: a }), a.passed;
-}, Z = {
-	fuzzy: Je,
-	includesString: le,
+}, Q = {
+	fuzzy: We,
+	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);
 	}
-}, Ye = ye({
+}, Ge = ve({
 	columnMeta: {},
-	columnFilteringFeature: te,
-	columnResizingFeature: ne,
-	columnSizingFeature: re,
-	columnVisibilityFeature: ie,
-	globalFilteringFeature: ue,
-	rowPaginationFeature: de,
-	rowSortingFeature: fe,
-	filteredRowModel: oe(),
-	paginatedRowModel: se(),
-	sortedRowModel: ce(),
+	columnFilteringFeature: ee,
+	columnResizingFeature: te,
+	columnSizingFeature: ne,
+	columnVisibilityFeature: re,
+	globalFilteringFeature: le,
+	rowPaginationFeature: ue,
+	rowSortingFeature: de,
+	filteredRowModel: ae(),
+	paginatedRowModel: oe(),
+	sortedRowModel: se(),
 	sortFns: {
-		alphanumeric: pe,
-		alphanumericCaseSensitive: me,
-		basic: he,
-		datetime: ge,
-		text: _e,
-		textCaseSensitive: ve
+		alphanumeric: fe,
+		alphanumericCaseSensitive: pe,
+		basic: me,
+		datetime: he,
+		text: ge,
+		textCaseSensitive: _e
 	},
-	filterFns: Z
+	filterFns: Q
 });
-function Xe(e) {
-	return Object.prototype.hasOwnProperty.call(Z, e);
+function Ke(e) {
+	return Object.prototype.hasOwnProperty.call(Q, e);
 }
-function Ze(e, t) {
+function qe(e, t) {
 	if (e !== !1) {
 		if (e === void 0) return t ? "select" : void 0;
-		if (typeof e == "function" || e === "auto" || Xe(e)) return e;
-		throw Error(`Unsupported table filterFn "${e}". Use "auto" or one of: ${Object.keys(Z).join(", ")}.`);
+		if (typeof e == "function" || e === "auto" || Ke(e)) return e;
+		throw Error(`Unsupported table filterFn "${e}". Use "auto" or one of: ${Object.keys(Q).join(", ")}.`);
 	}
 }
-var Qe = ae(), $e = ({ data: e, columnDef: n, pageSize: r = 10, className: i, showHeader: a = !0, showFilters: o = !0, showSorting: l = !0 }) => {
+var Je = ie(), Ye = ({ 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) => Qe.accessor(e.accessorKey, {
+	}), [x, w] = u([]), [T, D] = u(""), [O, k] = u([]), [A, j] = u({}), M = x.length > 0 || T !== "", N = c(() => n?.map((e) => Je.accessor(e.accessorKey, {
 		id: e.id,
 		enableResizing: e.enableResizing,
 		enableColumnFilter: e.filterFn !== !1 && e.enableColumnFilter,
@@ -995,7 +918,7 @@ var Qe = ae(), $e = ({ data: e, columnDef: n, pageSize: r = 10, className: i, sh
 		size: e.size,
 		minSize: e.minSize ?? 50,
 		maxSize: e.maxSize ?? 1e3,
-		filterFn: Ze(e.filterFn, e.filterSelectOptions),
+		filterFn: qe(e.filterFn, e.filterSelectOptions),
 		meta: {
 			headerLabel: e.header,
 			filterSelectOptions: e.filterSelectOptions,
@@ -1023,7 +946,7 @@ var Qe = ae(), $e = ({ data: e, columnDef: n, pageSize: r = 10, className: i, sh
 			});
 		},
 		cell: e.cell ?? ((e) => e.getValue())
-	})), [n]), P = be({
+	})), [n]), P = ye({
 		data: e,
 		columns: N,
 		state: {
@@ -1039,8 +962,8 @@ var Qe = ae(), $e = ({ data: e, columnDef: n, pageSize: r = 10, className: i, sh
 		onSortingChange: k,
 		onColumnFiltersChange: w,
 		onGlobalFilterChange: D,
-		globalFilterFn: Je,
-		features: Ye,
+		globalFilterFn: We,
+		features: Ge,
 		defaultColumn: {
 			size: 200,
 			minSize: 50,
@@ -1055,7 +978,7 @@ var Qe = ae(), $e = ({ data: e, columnDef: n, pageSize: r = 10, className: i, sh
 				children: [
 					/* @__PURE__ */ p("div", {
 						className: "flex items-center gap-2",
-						children: [/* @__PURE__ */ p(V, {
+						children: [/* @__PURE__ */ p(H, {
 							variant: "outline-secondary",
 							size: "sm",
 							disabled: !M && O.length === 0,
@@ -1065,7 +988,7 @@ var Qe = ae(), $e = ({ data: e, columnDef: n, pageSize: r = 10, className: i, sh
 							title: "Clear filters and sorting",
 							type: "button",
 							children: [/* @__PURE__ */ f(E, { className: "mr-1.5 h-3 w-3" }), "Clear filters and sorting"]
-						}), /* @__PURE__ */ f(nt, { table: P })]
+						}), /* @__PURE__ */ f(Qe, { table: P })]
 					}),
 					/* @__PURE__ */ p("nav", {
 						"aria-label": "Table pagination",
@@ -1073,7 +996,7 @@ var Qe = ae(), $e = ({ data: e, columnDef: n, pageSize: r = 10, className: i, sh
 						children: [
 							/* @__PURE__ */ p("div", {
 								className: "flex items-center gap-1",
-								children: [/* @__PURE__ */ f(V, {
+								children: [/* @__PURE__ */ f(H, {
 									variant: "outline-secondary",
 									size: "icon-md",
 									className: "h-10 w-10 sm:h-8 sm:w-8",
@@ -1089,7 +1012,7 @@ var Qe = ae(), $e = ({ data: e, columnDef: n, pageSize: r = 10, className: i, sh
 										"aria-hidden": "true",
 										className: "h-3.5 w-3.5"
 									})
-								}), /* @__PURE__ */ f(V, {
+								}), /* @__PURE__ */ f(H, {
 									variant: "outline-secondary",
 									size: "icon-md",
 									className: "h-10 w-10 sm:h-8 sm:w-8",
@@ -1135,7 +1058,7 @@ var Qe = ae(), $e = ({ data: e, columnDef: n, pageSize: r = 10, className: i, sh
 							}),
 							/* @__PURE__ */ p("div", {
 								className: "flex items-center gap-1",
-								children: [/* @__PURE__ */ f(V, {
+								children: [/* @__PURE__ */ f(H, {
 									variant: "outline-secondary",
 									size: "icon-md",
 									className: "h-10 w-10 sm:h-8 sm:w-8",
@@ -1151,7 +1074,7 @@ var Qe = ae(), $e = ({ data: e, columnDef: n, pageSize: r = 10, className: i, sh
 										"aria-hidden": "true",
 										className: "h-3.5 w-3.5"
 									})
-								}), /* @__PURE__ */ f(V, {
+								}), /* @__PURE__ */ f(H, {
 									variant: "outline-secondary",
 									size: "icon-md",
 									className: "h-10 w-10 sm:h-8 sm:w-8",
@@ -1174,7 +1097,7 @@ var Qe = ae(), $e = ({ 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(X, {
+						children: ["Rows per page", /* @__PURE__ */ f(Z, {
 							id: `${d}-page-size`,
 							value: P.state.pagination.pageSize.toString(),
 							onChange: (e) => {
@@ -1213,7 +1136,7 @@ var Qe = ae(), $e = ({ 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(X, {
+							}), /* @__PURE__ */ f(Z, {
 								id: `${d}-sort`,
 								value: O[0]?.id ?? "__none__",
 								onChange: (e) => {
@@ -1230,7 +1153,7 @@ var Qe = ae(), $e = ({ data: e, columnDef: n, pageSize: r = 10, className: i, sh
 									label: e.columnDef.meta?.headerLabel ?? e.id
 								}))]
 							})]
-						}), /* @__PURE__ */ f(V, {
+						}), /* @__PURE__ */ f(H, {
 							variant: "outline-secondary",
 							size: "icon-sm",
 							disabled: O.length === 0,
@@ -1257,7 +1180,7 @@ var Qe = ae(), $e = ({ data: e, columnDef: n, pageSize: r = 10, className: i, sh
 								htmlFor: n,
 								className: "text-muted-foreground mb-1 block text-xs font-medium",
 								children: t
-							}), /* @__PURE__ */ f(tt, {
+							}), /* @__PURE__ */ f(Ze, {
 								column: e,
 								idPrefix: `${d}-`
 							})]
@@ -1327,7 +1250,7 @@ var Qe = ae(), $e = ({ data: e, columnDef: n, pageSize: r = 10, className: i, sh
 		]
 	});
 };
-function et({ value: e, onChange: t, debounce: n = 500, ...r }) {
+function Xe({ value: e, onChange: t, debounce: n = 500, ...r }) {
 	let [i, a] = u(e);
 	return o(() => {
 		a(e);
@@ -1340,14 +1263,14 @@ function et({ value: e, onChange: t, debounce: n = 500, ...r }) {
 		i,
 		n,
 		t
-	]), /* @__PURE__ */ f(K, {
+	]), /* @__PURE__ */ f(q, {
 		...r,
 		value: i,
 		onChange: (e) => a(e.target.value),
 		autoComplete: "off"
 	});
 }
-function tt({ column: e, idPrefix: t = "" }) {
+function Ze({ column: e, idPrefix: t = "" }) {
 	let n = `${t}${e.id}-filter`, r = {
 		includesString: "Includes string",
 		equalsString: "Equals string",
@@ -1355,7 +1278,7 @@ function tt({ column: e, idPrefix: t = "" }) {
 		equals: "Equals",
 		fuzzy: "Fuzzy"
 	}, i = e.getFilterValue(), a = e.columnDef.meta?.filterSelectOptions;
-	return a ? /* @__PURE__ */ f(X, {
+	return a ? /* @__PURE__ */ f(Z, {
 		id: n,
 		value: i ?? "__all__",
 		onChange: (t) => e.setFilterValue(t === "__all__" ? void 0 : t),
@@ -1367,7 +1290,7 @@ function tt({ column: e, idPrefix: t = "" }) {
 			key: e.value,
 			label: e.label
 		}))]
-	}) : /* @__PURE__ */ f(et, {
+	}) : /* @__PURE__ */ f(Xe, {
 		id: n,
 		type: "text",
 		name: e.id,
@@ -1378,10 +1301,10 @@ function tt({ column: e, idPrefix: t = "" }) {
 		className: "border-border text-foreground placeholder:text-muted-foreground focus:ring-ring w-full rounded border bg-transparent px-2 py-1 text-xs shadow-sm focus:border-transparent focus:ring-1 focus:outline-hidden"
 	});
 }
-function nt({ table: e }) {
-	return /* @__PURE__ */ p(G, {
+function Qe({ table: e }) {
+	return /* @__PURE__ */ p(K, {
 		trigger: "click",
-		triggerRender: /* @__PURE__ */ f(V, {
+		triggerRender: /* @__PURE__ */ f(H, {
 			variant: "outline-secondary",
 			size: "sm",
 			title: "Toggle columns",
@@ -1394,7 +1317,7 @@ function nt({ 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(V, {
+				return /* @__PURE__ */ p(H, {
 					variant: "ghost",
 					size: "sm",
 					disabled: !r,
@@ -1410,31 +1333,31 @@ function nt({ table: e }) {
 }
 //#endregion
 //#region components/text-link.tsx
-var rt = ({ className: e, href: n, text: r, target: i = "_blank", rel: a, ...o }) => /* @__PURE__ */ f("a", {
+var $e = ({ className: e, href: n, text: r, target: i = "_blank", rel: a, ...o }) => /* @__PURE__ */ f("a", {
 	className: t("arc-text-link rounded-md text-primary underline transition hover:text-primary/80 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-opacity-75", e),
 	href: n,
 	target: i,
 	rel: a ?? (i === "_blank" ? "noopener noreferrer" : void 0),
 	...o,
 	children: r
-}), it = ({ checked: e = !1, onChange: n, disabled: r = !1, variant: i = "primary", children: a, ...o }) => /* @__PURE__ */ f(xe.Root, {
+}), et = ({ checked: e = !1, onChange: n, disabled: r = !1, variant: i = "primary", children: a, ...o }) => /* @__PURE__ */ f(be.Root, {
 	checked: e,
 	disabled: r,
 	onCheckedChange: n,
-	className: t("arc-switch", at({
+	className: t("arc-switch", tt({
 		variant: i,
 		disabled: r
 	})),
 	...o,
-	children: a ? a(e) : /* @__PURE__ */ f(xe.Thumb, {
+	children: a ? a(e) : /* @__PURE__ */ f(be.Thumb, {
 		"aria-hidden": "true",
-		className: ot({
+		className: nt({
 			variant: i,
 			checked: e,
 			disabled: r
 		})
 	})
-}), at = e("relative inline-flex h-7 w-12 items-center rounded-full border border-border bg-muted transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:not-data-disabled:ring-2 hover:not-data-disabled:ring-ring/60 data-disabled:cursor-not-allowed data-disabled:opacity-60", { variants: {
+}), tt = e("relative inline-flex h-7 w-12 items-center rounded-full border border-border bg-muted transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:not-data-disabled:ring-2 hover:not-data-disabled:ring-ring/60 data-disabled:cursor-not-allowed data-disabled:opacity-60", { variants: {
 	variant: {
 		danger: "data-checked:bg-destructive",
 		success: "data-checked:bg-success",
@@ -1445,7 +1368,7 @@ var rt = ({ className: e, href: n, text: r, target: i = "_blank", rel: a, ...o }
 		true: "ring-2 ring-border",
 		false: ""
 	}
-} }), ot = e("absolute top-1/2 inline-block h-5 w-5 -translate-y-1/2 transform rounded-full border shadow-sm transition-[left,background-color,border-color] duration-300 ease-out", {
+} }), nt = e("absolute top-1/2 inline-block h-5 w-5 -translate-y-1/2 transform rounded-full border shadow-sm transition-[left,background-color,border-color] duration-300 ease-out", {
 	variants: {
 		variant: {
 			primary: "",
@@ -1538,7 +1461,7 @@ var rt = ({ className: e, href: n, text: r, target: i = "_blank", rel: a, ...o }
 			className: "border-success bg-success/70"
 		}
 	]
-}), Q = {
+}), rt = {
 	light: L,
 	dark: I,
 	system: F
@@ -1546,25 +1469,25 @@ var rt = ({ className: e, href: n, text: r, target: i = "_blank", rel: a, ...o }
 	light: "Light",
 	dark: "Dark",
 	system: "System"
-}, st = "theme", ct = (e) => e === "dark" || e === "system" && typeof window < "u" && window.matchMedia("(prefers-color-scheme: dark)").matches, lt = () => {
+}, 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(st);
+	let e = window.localStorage.getItem(it);
 	return e === "light" || e === "dark" || e === "system" ? e : "system";
-}, ut = (e) => e === "system" ? "light" : e === "light" ? "dark" : "system";
-function dt({ variant: e = "dropdown", showLabel: n = !1 }) {
-	let [r, i] = u(lt);
+}, 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", ct(r)), window.localStorage.setItem(st, r));
+		typeof window < "u" && (document.documentElement.classList.toggle("dark", at(r)), window.localStorage.setItem(it, r));
 	}, [r]);
 	let a = () => {
-		i(ut(r));
+		i(st(r));
 	};
 	if (e === "toggle") {
-		let e = Q[r], t = ut(r);
+		let e = rt[r], t = st(r);
 		return /* @__PURE__ */ f("div", {
 			className: "arc-theme-switcher",
-			children: /* @__PURE__ */ p(J, {
-				active: ct(r),
+			children: /* @__PURE__ */ p(Y, {
+				active: at(r),
 				"aria-label": `Switch to ${t} theme`,
 				title: `Switch to ${t} theme`,
 				onClick: a,
@@ -1573,18 +1496,18 @@ function dt({ variant: e = "dropdown", showLabel: n = !1 }) {
 			})
 		});
 	}
-	let s = Q[r];
+	let s = rt[r];
 	return /* @__PURE__ */ f("div", {
 		className: "arc-theme-switcher",
-		children: /* @__PURE__ */ p(Y, {
+		children: /* @__PURE__ */ p(X, {
 			className: "gap-3",
 			contentClassName: "min-w-(--anchor-width)",
 			buttonText: /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f(s, { "aria-hidden": "true" }), n && $[r]] }),
 			children: [
-				/* @__PURE__ */ f(Y.Item, {
+				/* @__PURE__ */ f(X.Item, {
 					asChild: !0,
 					className: t("border-0! focus-visible:outline-none", n ? "px-3!" : "justify-center! p-0!"),
-					children: /* @__PURE__ */ p(J, {
+					children: /* @__PURE__ */ p(Y, {
 						active: r === "system",
 						title: "System Theme",
 						onClick: () => {
@@ -1597,10 +1520,10 @@ function dt({ variant: e = "dropdown", showLabel: n = !1 }) {
 						}), n && $.system]
 					})
 				}),
-				/* @__PURE__ */ f(Y.Item, {
+				/* @__PURE__ */ f(X.Item, {
 					asChild: !0,
 					className: t("border-0! focus-visible:outline-none", n ? "px-3!" : "justify-center! p-0!"),
-					children: /* @__PURE__ */ p(J, {
+					children: /* @__PURE__ */ p(Y, {
 						active: r === "light",
 						title: "Light Theme",
 						onClick: () => {
@@ -1613,10 +1536,10 @@ function dt({ variant: e = "dropdown", showLabel: n = !1 }) {
 						}), n && $.light]
 					})
 				}),
-				/* @__PURE__ */ f(Y.Item, {
+				/* @__PURE__ */ f(X.Item, {
 					asChild: !0,
 					className: t("border-0! focus-visible:outline-none", n ? "px-3!" : "justify-center! p-0!"),
-					children: /* @__PURE__ */ p(J, {
+					children: /* @__PURE__ */ p(Y, {
 						active: r === "dark",
 						title: "Dark Theme",
 						onClick: () => {
@@ -1635,16 +1558,16 @@ function dt({ variant: e = "dropdown", showLabel: n = !1 }) {
 }
 //#endregion
 //#region components/typing-animation.tsx
-function ft(e) {
+function lt(e) {
 	return e === "newline" ? "\n" : e === "comma" ? ", " : "";
 }
-function pt(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 mt({ strings: e, placeholder: t, perTick: n = {
+function dt({ strings: e, placeholder: t, perTick: n = {
 	amount: 1,
 	unit: "character"
 }, msDelay: r = {
@@ -1689,9 +1612,9 @@ function mt({ strings: e, placeholder: t, perTick: n = {
 				T([]), C(""), N.current += 1, P.current = 0, t = setTimeout(r, _);
 				return;
 			}
-			if (L.current) P.current = pt(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 = pt(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;
 				}
@@ -1724,13 +1647,13 @@ function mt({ strings: e, placeholder: t, perTick: n = {
 		O,
 		v
 	]);
-	let R = A ? "." : "", z = d !== "clear", B = ft(d), ee = w.reduce((e, t) => e + t.split("\n").length, 0);
+	let R = A ? "." : "", z = d !== "clear", B = lt(d), V = 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": ee },
+		style: { "--typing-roll-offset": V },
 		children: /* @__PURE__ */ p("div", {
 			className: "whitespace-pre-line",
 			children: [
@@ -1755,4 +1678,39 @@ function mt({ strings: e, placeholder: t, perTick: n = {
 	});
 }
 //#endregion
-export { Ae as Avatar, V as Button, Se as ButtonGroup, q as Card, ze as DateHandler, je as Divider, we as DoubleClickButton, Me as Dropdown, H as ErrorText, Fe as GridLoader, K as Input, Be as InputTimestamp, Ie as LabelField, Te as LongPressButton, Y as Menu, We as Modal, Ge as MultiDropdown, J as Pill, He as PillLink, G as PreviewCard, X as Select, it as Switch, $e as Table, qe as Tag, rt as TextLink, dt as ThemeSwitcher, mt as TypingAnimation, Ee as navigateToHashOnLoad, Oe as updateHashOnScroll, De as useHashNavigationOnLoad };
+//#region utilities/hash-navigation.ts
+function ft({ intervalMs: e = 500, maxAttempts: t = 20, behavior: n = "smooth", block: r } = {}) {
+	if (typeof window > "u") return () => {};
+	let i = 0, a = setInterval(() => {
+		i += 1;
+		let { hash: e } = window.location;
+		if (!e || i > t) clearInterval(a);
+		else try {
+			let t = document.querySelector(e);
+			t && (t.scrollIntoView({
+				behavior: n,
+				block: r
+			}), clearInterval(a));
+		} catch (t) {
+			console.error(`Invalid hash in URL: ${e}`, t), clearInterval(a);
+		}
+	}, e);
+	return () => clearInterval(a);
+}
+function pt(e) {
+	o(() => ft(e), []);
+}
+function mt({ 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();
+			return t.top <= o && t.bottom > o;
+		}), c = s ? i.indexOf(s) : -1;
+		if (r?.(c, i), !s || (a === s.id.toLowerCase() && (a = null), c === 0 && a)) return;
+		let l = c === 0 && !n ? "" : `#${s.id}`;
+		window.location.hash !== l && (window.history.replaceState(window.history.state, "", `${window.location.pathname}${window.location.search}${l}`), window.dispatchEvent(new HashChangeEvent("hashchange")));
+	};
+	return o(), e.addEventListener("scroll", o, { passive: !0 }), () => e.removeEventListener("scroll", o);
+}
+//#endregion
+export { Ee as Avatar, H as Button, xe as ButtonGroup, J as Card, Fe as DateHandler, De as Divider, Ce as DoubleClickButton, Oe as Dropdown, U as ErrorText, je as GridLoader, q as Input, Ie as InputTimestamp, Me as LabelField, we as LongPressButton, X as Menu, Be as Modal, Ve as MultiDropdown, Y as Pill, Re as PillLink, K as PreviewCard, Z as Select, et as Switch, Ye as Table, Ue as Tag, $e as TextLink, ct as ThemeSwitcher, dt as TypingAnimation, ft as navigateToHashOnLoad, mt as updateHashOnScroll, pt as useHashNavigationOnLoad };

package/dist/{grid-loader.d.ts → components/grid-loader.d.ts}

@@ -1,14 +1,16 @@
 declare const gridLoaderShapes: readonly ["circle", "square", "diamond", "star", "heart", "hexagon"];
 export type GridLoaderShape = (typeof gridLoaderShapes)[number] | "mixed";
+export type GridLoaderCellShape = Exclude<GridLoaderShape, "mixed">;
 export interface GridLoaderProps extends React.ComponentPropsWithoutRef<"span"> {
     rows?: number;
     columns?: number;
     size?: number;
     maxSize?: number;
     shape?: GridLoaderShape;
+    shapes?: readonly GridLoaderCellShape[];
     colors?: string[];
     label?: string;
     symbols?: string[];
 }
-declare const GridLoader: ({ className, rows, columns, size, maxSize, shape, colors, label, symbols, style, ...props }: GridLoaderProps) => import('react').JSX.Element;
+declare const GridLoader: ({ className, rows, columns, size, maxSize, shape, shapes, colors, label, symbols, title, style, ...props }: GridLoaderProps) => import('react').JSX.Element;
 export default GridLoader;

package/dist/components/index.d.ts

@@ -0,0 +1,44 @@
+export { default as Button } from './button';
+export { default as ButtonGroup } from './button-group';
+export { default as DoubleClickButton } from './button-double-click';
+export type { DoubleClickButtonFeedbackContent, DoubleClickButtonFeedbackContext, DoubleClickButtonProps, } from './button-double-click';
+export { default as LongPressButton } from './button-long-press';
+export type { LongPressButtonFeedbackContent, LongPressButtonFeedbackContext, LongPressButtonProps, } from './button-long-press';
+export { default as Avatar } from './avatar';
+export type { AvatarProps, AvatarSize } from './avatar';
+export { default as Divider } from './divider';
+export { default as Dropdown } from './dropdown';
+export type { DropdownItem, DropdownProps } from './dropdown';
+export { default as ErrorText } from './error-text';
+export type { ErrorTextProps } from './error-text';
+export { default as GridLoader } from './grid-loader';
+export type { GridLoaderCellShape, GridLoaderProps, GridLoaderShape } from './grid-loader';
+export { default as LabelField } from './label-field';
+export type { LabelFieldProps } from './label-field';
+export { default as Input } from './input';
+export { default as Card } from './card';
+export { default as InputTimestamp } from './input-timestamp';
+export type { InputTimestampProps } from './input-timestamp';
+export { default as PillLink } from './pill-link';
+export type { PillLinkProps } from './pill-link';
+export { default as Menu } from './menu';
+export { default as Modal } from './modal';
+export type { ModalProps } from './modal';
+export { default as MultiDropdown } from './dropdown-multi';
+export type { MultiDropdownProps } from './dropdown-multi';
+export { default as Pill } from './pill';
+export { default as PreviewCard } from './preview-card';
+export type { PreviewCardProps } from './preview-card';
+export { default as Select } from './select';
+export type { SelectItem, SelectProps } from './select';
+export { default as Tag } from './tag';
+export type { TagProps, TagVariant } from './tag';
+export { default as Table } from './table';
+export type { TableColumnDef, TableProps } from './table';
+export { default as TextLink } from './text-link';
+export type { TextLinkProps } from './text-link';
+export { default as Switch } from './switch';
+export { default as ThemeSwitcher } from './theme-switcher';
+export type { ThemeSwitcherProps } from './theme-switcher';
+export { default as TypingAnimation } from './typing-animation';
+export type { TypingAnimationPerTickUnit, TypingAnimationAfterString, TypingAnimationProps } from './typing-animation';

package/dist/index.d.ts

@@ -1,47 +1,2 @@
-export { default as Button } from './button';
-export { default as ButtonGroup } from './button-group';
-export { default as DoubleClickButton } from './button-double-click';
-export type { DoubleClickButtonFeedbackContent, DoubleClickButtonFeedbackContext, DoubleClickButtonProps, } from './button-double-click';
-export { default as LongPressButton } from './button-long-press';
-export type { LongPressButtonFeedbackContent, LongPressButtonFeedbackContext, LongPressButtonProps, } from './button-long-press';
-export { navigateToHashOnLoad, updateHashOnScroll, useHashNavigationOnLoad } from './hash-navigation';
-export type { HashNavigationOptions, UpdateHashOnScrollOptions } from './hash-navigation';
-export { default as Avatar } from './avatar';
-export type { AvatarProps, AvatarSize } from './avatar';
-export { default as Divider } from './divider';
-export { default as Dropdown } from './dropdown';
-export type { DropdownItem, DropdownProps } from './dropdown';
-export { default as ErrorText } from './error-text';
-export type { ErrorTextProps } from './error-text';
-export { default as GridLoader } from './grid-loader';
-export type { GridLoaderProps, GridLoaderShape } from './grid-loader';
-export { default as LabelField } from './label-field';
-export type { LabelFieldProps } from './label-field';
-export { default as Input } from './input';
-export { default as Card } from './card';
-export { DateHandler } from './date-handler';
-export { default as InputTimestamp } from './input-timestamp';
-export type { InputTimestampProps } from './input-timestamp';
-export { default as PillLink } from './pill-link';
-export type { PillLinkProps } from './pill-link';
-export { default as Menu } from './menu';
-export { default as Modal } from './modal';
-export type { ModalProps } from './modal';
-export { default as MultiDropdown } from './dropdown-multi';
-export type { MultiDropdownProps } from './dropdown-multi';
-export { default as Pill } from './pill';
-export { default as PreviewCard } from './preview-card';
-export type { PreviewCardProps } from './preview-card';
-export { default as Select } from './select';
-export type { SelectItem, SelectProps } from './select';
-export { default as Tag } from './tag';
-export type { TagProps, TagVariant } from './tag';
-export { default as Table } from './table';
-export type { TableColumnDef, TableProps } from './table';
-export { default as TextLink } from './text-link';
-export type { TextLinkProps } from './text-link';
-export { default as Switch } from './switch';
-export { default as ThemeSwitcher } from './theme-switcher';
-export type { ThemeSwitcherProps } from './theme-switcher';
-export { default as TypingAnimation } from './typing-animation';
-export type { TypingAnimationPerTickUnit, TypingAnimationAfterString, TypingAnimationProps } from './typing-animation';
+export * from './components';
+export * from './utilities';

package/dist/utilities/index.d.ts

@@ -0,0 +1,3 @@
+export { DateHandler } 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.7.0",
+	"version": "0.8.1",
 	"type": "module",
 	"main": "./dist/arc.js",
 	"types": "./dist/index.d.ts",