@febkosq8/arc 0.8.2 → 0.8.3

package/components/index.css

@@ -122,6 +122,10 @@
 	border-color: var(--color-primary) !important;
 }
 
+.arc-avatar--ring-accent {
+	--tw-ring-color: color-mix(in srgb, var(--color-primary) 65%, var(--color-accent-foreground));
+}
+
 @layer base {
 	:root {
 		--background: 220 14% 94%;

package/dist/arc.js

@@ -110,7 +110,7 @@ var xe = ({ className: e, orientation: r = "horizontal", selectedVariant: o, chi
 	});
 	return /* @__PURE__ */ p("span", {
 		"aria-label": g ? "Waiting for second click" : void 0,
-		className: "arc-double-click-button relative inline-flex",
+		className: "arc-double-click-button relative inline-flex w-fit",
 		"data-double-click-state": g ? "waiting" : void 0,
 		children: [E, /* @__PURE__ */ f("span", {
 			"aria-hidden": "true",
@@ -153,7 +153,7 @@ var xe = ({ className: e, orientation: r = "horizontal", selectedVariant: o, chi
 		})]
 	});
 	return /* @__PURE__ */ p("span", {
-		className: "arc-long-press-button relative inline-flex",
+		className: "arc-long-press-button relative inline-flex w-fit",
 		"data-long-press-state": y ? "pressing" : void 0,
 		children: [/* @__PURE__ */ f(H, {
 			...m,
@@ -190,42 +190,67 @@ var xe = ({ className: e, orientation: r = "horizontal", selectedVariant: o, chi
 			}
 		})]
 	});
-}, 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",
-		md: "size-8 text-base",
-		lg: "size-10 text-lg",
-		xl: "size-12 text-xl"
-	} },
-	defaultVariants: { size: "md" }
-}), 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]);
+}, Te = e("arc-avatar inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-muted transition-all", {
+	variants: {
+		size: {
+			xs: "size-6 text-xs",
+			sm: "size-7 text-sm",
+			md: "size-8 text-base",
+			lg: "size-10 text-lg",
+			xl: "size-12 text-xl",
+			"2xl": "size-14 text-2xl",
+			"3xl": "size-16 text-3xl",
+			"4xl": "size-20 text-4xl",
+			"5xl": "size-24 text-5xl",
+			"6xl": "size-28 text-6xl",
+			"7xl": "size-32 text-7xl",
+			"8xl": "size-36 text-8xl"
+		},
+		variant: {
+			default: "ring-1 ring-border",
+			ring: "ring-2"
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		variant: "default"
+	}
+}), Ee = {
+	primary: "ring-primary",
+	secondary: "ring-secondary-foreground",
+	accent: "arc-avatar--ring-accent",
+	muted: "ring-muted-foreground",
+	destructive: "ring-destructive",
+	success: "ring-success",
+	warning: "ring-warning"
+}, De = ({ name: e, image: n, size: r, variant: i, ringColor: a = "primary", className: s, ...l }) => {
+	let [d, p] = u(!1), m = n?.trim(), h = !!m && !d, g = 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", {
+		p(!1);
+	}, [m]), /* @__PURE__ */ f("span", {
 		className: t(Te({
 			size: r,
-			className: i
-		})),
-		...a,
-		children: p ? /* @__PURE__ */ f("img", {
-			src: d,
+			variant: i,
+			className: s
+		}), i === "ring" && Ee[a]),
+		...l,
+		children: h ? /* @__PURE__ */ f("img", {
+			src: m,
 			alt: e ?? "User avatar",
 			title: e ?? "User",
 			className: "h-full w-full object-cover",
-			onError: () => l(!0)
+			onError: () => p(!0)
 		}) : /* @__PURE__ */ f("span", {
 			className: "font-medium leading-none text-foreground",
 			title: e ?? "User",
-			children: m
+			children: g
 		})
 	});
-}, De = ({ className: e, ...n }) => /* @__PURE__ */ f("div", {
+}, Oe = ({ className: e, ...n }) => /* @__PURE__ */ f("div", {
 	role: "separator",
 	className: t("arc-divider w-full border-b border-border", e),
 	...n
-}), 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 }) => {
+}), ke = ({ 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,
@@ -295,7 +320,7 @@ var xe = ({ className: e, orientation: r = "horizontal", selectedVariant: o, chi
 		...r,
 		children: i
 	});
-}, ke = /* @__PURE__ */ "*.+.×.÷.=.~.!.?.@.#.%.&.§.¶.※.◇.◆.○.●.△.▽.□.■.♠.♣.♦.♤.♧.♢.♪.♫.∴.∵".split(".");
+}, Ae = /* @__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);
@@ -307,7 +332,7 @@ var G = [
 	"star",
 	"heart",
 	"hexagon"
-], Ae = e("arc-grid-loader__cell grid aspect-square w-full place-items-center overflow-hidden text-center leading-none break-all", {
+], je = 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",
@@ -317,7 +342,7 @@ var G = [
 		hexagon: "arc-grid-loader__cell--hexagon"
 	} },
 	defaultVariants: { shape: "circle" }
-}), 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 }) => {
+}), 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);
 	if (o(() => {
 		s === "mixed" && b(Array.from({ length: n * r }, () => C[Math.floor(Math.random() * C.length)]));
@@ -361,7 +386,7 @@ var G = [
 				gridTemplateRows: `repeat(${n}, minmax(0, 1fr))`
 			},
 			children: Array.from({ length: n * r }, (e, o) => /* @__PURE__ */ f("span", {
-				className: t(Ae({ shape: s === "mixed" ? y[o] ?? C[Math.floor(W(o, n, r) * C.length)] : s })),
+				className: t(je({ shape: s === "mixed" ? y[o] ?? C[Math.floor(W(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);
@@ -407,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]
 		})
 	}) })]
-}), Me = ({ id: e, label: n, help: r, errors: i, className: a, ...o }) => {
+}), Ne = ({ 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,
@@ -438,7 +463,7 @@ var G = [
 			s && (Array.isArray(s) ? s.length > 0 && /* @__PURE__ */ f(U, { data: s }) : /* @__PURE__ */ f(U, { data: s }))
 		]
 	});
-}, 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", {
+}, 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", {
 	variants: {
 		variant: {
 			default: "border-border bg-background",
@@ -454,7 +479,7 @@ var G = [
 		as: "input"
 	}
 }), q = ({ as: e = "input", className: n, variant: r, ...i }) => {
-	let a = t(Ne({
+	let a = t(Pe({
 		as: e,
 		variant: r
 	}), n);
@@ -463,7 +488,7 @@ var G = [
 		autoComplete: "off",
 		className: a
 	});
-}, Pe = e("arc-card group relative rounded-lg border border-foreground/40 bg-card/90 p-3 shadow-xs", {
+}, Fe = 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",
@@ -478,7 +503,7 @@ var G = [
 }), 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(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),
+		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),
 		onPointerMove: h ? (e) => {
 			if (u?.(e), !h) return;
 			let t = e.currentTarget.getBoundingClientRect();
@@ -507,7 +532,7 @@ J.Header = (e) => {
 	});
 };
 // utilities/date-handler.ts
-var Fe = class e {
+var Ie = class e {
 	static toDateTime(e) {
 		if (e == null || e === "") return j.invalid("missing date");
 		if (e instanceof Date) return j.fromJSDate(e);
@@ -565,8 +590,8 @@ var Fe = class e {
 		let r = e.getDateTime(t), i = e.getRelativeTime(t);
 		return n.replace("$ISO$", r).replace("$RELATIVE$", i);
 	}
-}, Ie = ({ value: e, format: t = "$ISO$ ($RELATIVE$)", ...n }) => {
-	let r = c(() => e ? Fe.getFormattedTime(e, t) : "", [e, t]);
+}, Le = ({ value: e, format: t = "$ISO$ ($RELATIVE$)", ...n }) => {
+	let r = c(() => e ? Ie.getFormattedTime(e, t) : "", [e, t]);
 	return /* @__PURE__ */ f(q, {
 		type: "text",
 		disabled: !0,
@@ -575,12 +600,23 @@ var Fe = class e {
 		size: Math.max(r.length, 1),
 		...n
 	});
-}, 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", {
+}, 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", {
 	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",
+			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",
 			primary: "bg-primary text-primary-foreground! hover:bg-primary/90",
-			outline: "border border-foreground/40 bg-transparent text-foreground hover:bg-accent hover:text-accent-foreground"
+			secondary: "bg-secondary text-secondary-foreground! hover:bg-secondary/80",
+			success: "bg-success text-success-foreground! hover:bg-success/90",
+			destructive: "bg-destructive text-destructive-foreground! hover:bg-destructive/90",
+			ghost: "text-foreground! hover:bg-accent hover:text-accent-foreground!",
+			warning: "bg-warning text-warning-foreground! hover:bg-warning/90",
+			outline: "border border-foreground/40 bg-transparent text-foreground! hover:bg-accent hover:text-accent-foreground!",
+			"outline-primary": "border border-primary bg-background text-primary! hover:bg-primary hover:text-primary-foreground!",
+			"outline-secondary": "border border-secondary-foreground bg-background text-secondary-foreground! hover:bg-secondary",
+			"outline-success": "border border-success bg-background text-success! hover:bg-success hover:text-success-foreground!",
+			"outline-destructive": "border border-destructive bg-background text-destructive! hover:bg-destructive hover:text-destructive-foreground!",
+			"outline-ghost": "border border-transparent bg-background text-foreground! hover:bg-accent hover:text-accent-foreground!",
+			"outline-warning": "border border-warning bg-background text-warning! hover:bg-warning hover:text-warning-foreground!"
 		},
 		size: {
 			sm: "h-9 px-3",
@@ -596,14 +632,25 @@ var Fe = class e {
 		variant: "pill",
 		size: "md"
 	}
-}), Re = ({ active: e = !1, className: n, size: r = "md", variant: i = "pill", ...a }) => /* @__PURE__ */ f("a", {
-	className: t(Le({
+}), ze = ({ active: e = !1, className: n, size: r = "md", variant: i = "pill", ...a }) => /* @__PURE__ */ f("a", {
+	className: t(Re({
 		variant: i,
 		size: r
 	}), e && {
 		pill: "text-primary!",
-		primary: "bg-primary/80 ring-2 ring-ring ring-offset-2",
-		outline: "border-primary bg-accent text-primary"
+		primary: "bg-primary/80 text-primary-foreground! ring-2 ring-ring ring-offset-2",
+		secondary: "bg-secondary/90 ring-2 ring-ring ring-offset-2",
+		success: "bg-success/80 text-success-foreground! ring-2 ring-success ring-offset-2",
+		destructive: "bg-destructive/80 text-destructive-foreground! ring-2 ring-destructive ring-offset-2",
+		ghost: "bg-accent text-accent-foreground!",
+		warning: "bg-warning/80 text-warning-foreground! ring-2 ring-warning ring-offset-2",
+		outline: "border-primary bg-accent text-primary!",
+		"outline-primary": "bg-primary text-primary-foreground! ring-2 ring-primary ring-offset-2",
+		"outline-secondary": "bg-secondary text-secondary-foreground! ring-2 ring-secondary-foreground ring-offset-2",
+		"outline-success": "bg-success text-success-foreground! ring-2 ring-success ring-offset-2",
+		"outline-destructive": "bg-destructive text-destructive-foreground! ring-2 ring-destructive ring-offset-2",
+		"outline-ghost": "bg-accent text-accent-foreground! ring-2 ring-ring ring-offset-2",
+		"outline-warning": "bg-warning text-warning-foreground! ring-2 ring-warning ring-offset-2"
 	}[i], n),
 	"aria-current": e ? "page" : void 0,
 	...a
@@ -612,7 +659,7 @@ var Fe = class e {
 	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
-}), 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, {
+}), 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, {
 	loopFocus: !0,
 	children: [/* @__PURE__ */ p(M.Trigger, {
 		render: /* @__PURE__ */ f(Y, {
@@ -629,7 +676,7 @@ var Fe = 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(ze, { children: o })
+			children: /* @__PURE__ */ f(Be, { children: o })
 		})
 	}) })]
 }), {
@@ -670,12 +717,12 @@ var Fe = 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(ze, { children: i })
+					children: /* @__PURE__ */ f(Be, { children: i })
 				})
 			}) })]
 		});
 	}
-}), Be = ({ open: e = !1, setOpen: n, children: r, initialFocus: i, headerContent: a, footerContent: s, width: c, height: l, className: u, customKeyHandler: d }) => (o(() => {
+}), Ve = ({ 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;
@@ -714,7 +761,7 @@ var Fe = class e {
 			]
 		})
 	})] })
-})), 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 }) => {
+})), 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 }) => {
 	let h = n.filter((e) => r?.includes(String(e.key)));
 	return /* @__PURE__ */ f(m.Root, {
 		multiple: !0,
@@ -846,33 +893,48 @@ var Fe = class e {
 			})
 		})
 	}) })]
-}), 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",
-		success: "bg-success text-success-foreground",
-		warning: "bg-warning text-warning-foreground",
-		destructive: "bg-destructive text-destructive-foreground",
-		outline: "border-border bg-transparent text-foreground"
-	} },
-	defaultVariants: { variant: "primary" }
-}), Ue = ({ className: e, variant: n, ...r }) => /* @__PURE__ */ f("div", {
-	className: t(He({
+}), Ue = e("arc-tag inline-flex w-fit items-center rounded-full border border-transparent font-bold", {
+	variants: {
+		variant: {
+			primary: "bg-primary text-primary-foreground",
+			secondary: "border-border bg-secondary text-secondary-foreground",
+			success: "bg-success text-success-foreground",
+			warning: "bg-warning text-warning-foreground",
+			destructive: "bg-destructive text-destructive-foreground",
+			outline: "border-border bg-transparent text-foreground"
+		},
+		size: {
+			xs: "px-1.5 py-0.5 text-xs",
+			sm: "px-2 py-0.5 text-sm",
+			md: "px-2.5 py-1 text-base",
+			lg: "px-3 py-1.5 text-lg",
+			xl: "px-3.5 py-2 text-xl",
+			"2xl": "px-4 py-2.5 text-2xl",
+			"3xl": "px-5 py-3 text-3xl"
+		}
+	},
+	defaultVariants: {
+		variant: "primary",
+		size: "xs"
+	}
+}), We = ({ className: e, variant: n, size: r, ...i }) => /* @__PURE__ */ f("div", {
+	className: t(Ue({
 		variant: n,
+		size: r,
 		className: e
 	})),
-	...r
-}), We = (e, t, n, r) => {
+	...i
+}), Ge = (e, t, n, r) => {
 	let i = e.getValue(t), a = V(i, n);
 	return r({ itemRank: a }), a.passed;
 }, Q = {
-	fuzzy: We,
+	fuzzy: Ge,
 	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);
 	}
-}, Ge = ve({
+}, Ke = ve({
 	columnMeta: {},
 	columnFilteringFeature: ee,
 	columnResizingFeature: te,
@@ -894,21 +956,21 @@ var Fe = class e {
 	},
 	filterFns: Q
 });
-function Ke(e) {
+function qe(e) {
 	return Object.prototype.hasOwnProperty.call(Q, e);
 }
-function qe(e, t) {
+function Je(e, t) {
 	if (e !== !1) {
 		if (e === void 0) return t ? "select" : void 0;
-		if (typeof e == "function" || e === "auto" || Ke(e)) return e;
+		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(", ")}.`);
 	}
 }
-var Je = ie(), Ye = ({ data: e, columnDef: n, pageSize: r = 10, className: i, showHeader: a = !0, showFilters: o = !0, showSorting: l = !0 }) => {
+var Ye = ie(), 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) => Je.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) => Ye.accessor(e.accessorKey, {
 		id: e.id,
 		enableResizing: e.enableResizing,
 		enableColumnFilter: e.filterFn !== !1 && e.enableColumnFilter,
@@ -917,7 +979,7 @@ var Je = ie(), Ye = ({ data: e, columnDef: n, pageSize: r = 10, className: i, sh
 		size: e.size,
 		minSize: e.minSize ?? 50,
 		maxSize: e.maxSize ?? 1e3,
-		filterFn: qe(e.filterFn, e.filterSelectOptions),
+		filterFn: Je(e.filterFn, e.filterSelectOptions),
 		meta: {
 			headerLabel: e.header,
 			filterSelectOptions: e.filterSelectOptions,
@@ -961,8 +1023,8 @@ var Je = ie(), Ye = ({ data: e, columnDef: n, pageSize: r = 10, className: i, sh
 		onSortingChange: k,
 		onColumnFiltersChange: w,
 		onGlobalFilterChange: D,
-		globalFilterFn: We,
-		features: Ge,
+		globalFilterFn: Ge,
+		features: Ke,
 		defaultColumn: {
 			size: 200,
 			minSize: 50,
@@ -987,7 +1049,7 @@ var Je = ie(), Ye = ({ 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(Qe, { table: P })]
+						}), /* @__PURE__ */ f($e, { table: P })]
 					}),
 					/* @__PURE__ */ p("nav", {
 						"aria-label": "Table pagination",
@@ -1179,7 +1241,7 @@ var Je = ie(), Ye = ({ 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(Ze, {
+							}), /* @__PURE__ */ f(Qe, {
 								column: e,
 								idPrefix: `${d}-`
 							})]
@@ -1249,7 +1311,7 @@ var Je = ie(), Ye = ({ data: e, columnDef: n, pageSize: r = 10, className: i, sh
 		]
 	});
 };
-function Xe({ value: e, onChange: t, debounce: n = 500, ...r }) {
+function Ze({ value: e, onChange: t, debounce: n = 500, ...r }) {
 	let [i, a] = u(e);
 	return o(() => {
 		a(e);
@@ -1269,7 +1331,7 @@ function Xe({ value: e, onChange: t, debounce: n = 500, ...r }) {
 		autoComplete: "off"
 	});
 }
-function Ze({ column: e, idPrefix: t = "" }) {
+function Qe({ column: e, idPrefix: t = "" }) {
 	let n = `${t}${e.id}-filter`, r = {
 		includesString: "Includes string",
 		equalsString: "Equals string",
@@ -1289,7 +1351,7 @@ function Ze({ column: e, idPrefix: t = "" }) {
 			key: e.value,
 			label: e.label
 		}))]
-	}) : /* @__PURE__ */ f(Xe, {
+	}) : /* @__PURE__ */ f(Ze, {
 		id: n,
 		type: "text",
 		name: e.id,
@@ -1300,7 +1362,7 @@ function Ze({ 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 Qe({ table: e }) {
+function $e({ table: e }) {
 	return /* @__PURE__ */ p(K, {
 		trigger: "click",
 		triggerRender: /* @__PURE__ */ f(H, {
@@ -1331,31 +1393,31 @@ function Qe({ table: e }) {
 	});
 }
 // components/text-link.tsx
-var $e = ({ className: e, href: n, text: r, target: i = "_blank", rel: a, ...o }) => /* @__PURE__ */ f("a", {
+var et = ({ 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
-}), et = ({ checked: e = !1, onChange: n, disabled: r = !1, variant: i = "primary", children: a, ...o }) => /* @__PURE__ */ f(be.Root, {
+}), tt = ({ 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", tt({
+	className: t("arc-switch", nt({
 		variant: i,
 		disabled: r
 	})),
 	...o,
 	children: a ? a(e) : /* @__PURE__ */ f(be.Thumb, {
 		"aria-hidden": "true",
-		className: nt({
+		className: rt({
 			variant: i,
 			checked: e,
 			disabled: r
 		})
 	})
-}), 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: {
+}), nt = 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",
@@ -1366,7 +1428,7 @@ var $e = ({ className: e, href: n, text: r, target: i = "_blank", rel: a, ...o }
 		true: "ring-2 ring-border",
 		false: ""
 	}
-} }), 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", {
+} }), rt = 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: "",
@@ -1459,7 +1521,7 @@ var $e = ({ className: e, href: n, text: r, target: i = "_blank", rel: a, ...o }
 			className: "border-success bg-success/70"
 		}
 	]
-}), rt = {
+}), it = {
 	light: L,
 	dark: I,
 	system: F
@@ -1467,25 +1529,25 @@ var $e = ({ className: e, href: n, text: r, target: i = "_blank", rel: a, ...o }
 	light: "Light",
 	dark: "Dark",
 	system: "System"
-}, it = "theme", at = (e) => e === "dark" || e === "system" && typeof window < "u" && window.matchMedia("(prefers-color-scheme: dark)").matches, ot = () => {
+}, at = "theme", ot = (e) => e === "dark" || e === "system" && typeof window < "u" && window.matchMedia("(prefers-color-scheme: dark)").matches, st = () => {
 	if (typeof window > "u") return "system";
-	let e = window.localStorage.getItem(it);
+	let e = window.localStorage.getItem(at);
 	return e === "light" || e === "dark" || e === "system" ? e : "system";
-}, st = (e) => e === "system" ? "light" : e === "light" ? "dark" : "system";
-function ct({ variant: e = "dropdown", showLabel: n = !1 }) {
-	let [r, i] = u(ot);
+}, ct = (e) => e === "system" ? "light" : e === "light" ? "dark" : "system";
+function lt({ variant: e = "dropdown", showLabel: n = !1 }) {
+	let [r, i] = u(st);
 	o(() => {
-		typeof window < "u" && (document.documentElement.classList.toggle("dark", at(r)), window.localStorage.setItem(it, r));
+		typeof window < "u" && (document.documentElement.classList.toggle("dark", ot(r)), window.localStorage.setItem(at, r));
 	}, [r]);
 	let a = () => {
-		i(st(r));
+		i(ct(r));
 	};
 	if (e === "toggle") {
-		let e = rt[r], t = st(r);
+		let e = it[r], t = ct(r);
 		return /* @__PURE__ */ f("div", {
 			className: "arc-theme-switcher",
 			children: /* @__PURE__ */ p(Y, {
-				active: at(r),
+				active: ot(r),
 				"aria-label": `Switch to ${t} theme`,
 				title: `Switch to ${t} theme`,
 				onClick: a,
@@ -1494,7 +1556,7 @@ function ct({ variant: e = "dropdown", showLabel: n = !1 }) {
 			})
 		});
 	}
-	let s = rt[r];
+	let s = it[r];
 	return /* @__PURE__ */ f("div", {
 		className: "arc-theme-switcher",
 		children: /* @__PURE__ */ p(X, {
@@ -1555,16 +1617,16 @@ function ct({ variant: e = "dropdown", showLabel: n = !1 }) {
 	});
 }
 // components/typing-animation.tsx
-function lt(e) {
+function ut(e) {
 	return e === "newline" ? "\n" : e === "comma" ? ", " : "";
 }
-function ut(e, t, n, r, i) {
+function dt(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 dt({ strings: e, placeholder: t, perTick: n = {
+function ft({ strings: e, placeholder: t, perTick: n = {
 	amount: 1,
 	unit: "character"
 }, msDelay: r = {
@@ -1609,9 +1671,9 @@ function dt({ strings: e, placeholder: t, perTick: n = {
 				T([]), C(""), N.current += 1, P.current = 0, t = setTimeout(r, _);
 				return;
 			}
-			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);
+			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);
 			else {
-				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) {
+				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) {
 					k(!0);
 					return;
 				}
@@ -1644,7 +1706,7 @@ function dt({ strings: e, placeholder: t, perTick: n = {
 		O,
 		v
 	]);
-	let R = A ? "." : "", z = d !== "clear", B = lt(d), V = w.reduce((e, t) => e + t.split("\n").length, 0);
+	let R = A ? "." : "", z = d !== "clear", B = ut(d), V = w.reduce((e, t) => e + t.split("\n").length, 0);
 	return z ? /* @__PURE__ */ f("div", {
 		ref: (e) => {
 			M.current = e;
@@ -1675,7 +1737,7 @@ function dt({ strings: e, placeholder: t, perTick: n = {
 	});
 }
 // utilities/hash-navigation.ts
-function ft({ intervalMs: e = 500, maxAttempts: t = 20, behavior: n = "smooth", block: r } = {}) {
+function pt({ intervalMs: e = 500, maxAttempts: t = 20, behavior: n = "smooth", block: r } = {}) {
 	if (typeof window > "u") return () => {};
 	let i = 0, a = setInterval(() => {
 		i += 1;
@@ -1693,10 +1755,10 @@ function ft({ intervalMs: e = 500, maxAttempts: t = 20, behavior: n = "smooth",
 	}, e);
 	return () => clearInterval(a);
 }
-function pt(e) {
-	o(() => ft(e), []);
+function mt(e) {
+	o(() => pt(e), []);
 }
-function mt({ container: e, sectionIds: t, hashFirstSection: n = !0, onActiveChange: r }) {
+function ht({ 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();
@@ -1708,4 +1770,4 @@ function mt({ container: e, sectionIds: t, hashFirstSection: n = !0, onActiveCha
 	};
 	return o(), e.addEventListener("scroll", o, { passive: !0 }), () => e.removeEventListener("scroll", o);
 }
-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 };
+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 };

package/dist/components/avatar.d.ts

@@ -6,13 +6,17 @@ type VariantClassProps = {
     className: string | undefined;
 };
 type AvatarVariantOptions = VariantClassProps & {
-    size?: "xs" | "sm" | "md" | "lg" | "xl" | null;
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | null;
+    variant?: "default" | "ring" | null;
 };
 export type AvatarSize = NonNullable<AvatarVariantOptions["size"]>;
+export type AvatarRingColor = "primary" | "secondary" | "accent" | "muted" | "destructive" | "success" | "warning";
 export interface AvatarProps extends React.ComponentPropsWithoutRef<"span"> {
     name?: string | null;
     image?: string | null;
     size?: AvatarSize;
+    variant?: NonNullable<AvatarVariantOptions["variant"]>;
+    ringColor?: AvatarRingColor;
 }
-declare const Avatar: ({ name, image: imageSource, size, className, ...props }: AvatarProps) => import('react').JSX.Element;
+declare const Avatar: ({ name, image: imageSource, size, variant, ringColor, className, ...props }: AvatarProps) => import('react').JSX.Element;
 export default Avatar;

package/dist/components/index.d.ts

@@ -5,7 +5,7 @@ export type { DoubleClickButtonFeedbackContent, DoubleClickButtonFeedbackContext
 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 type { AvatarProps, AvatarRingColor, AvatarSize } from './avatar';
 export { default as Divider } from './divider';
 export { default as Dropdown } from './dropdown';
 export type { DropdownItem, DropdownProps } from './dropdown';
@@ -20,7 +20,7 @@ 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 type { PillLinkProps, PillLinkVariant } from './pill-link';
 export { default as Menu } from './menu';
 export { default as Modal } from './modal';
 export type { ModalProps } from './modal';
@@ -32,7 +32,7 @@ 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 type { TagProps, TagSize, TagVariant } from './tag';
 export { default as Table } from './table';
 export type { TableColumnDef, TableProps } from './table';
 export { default as TextLink } from './text-link';

package/dist/components/pill-link.d.ts

@@ -1,7 +1,8 @@
+export type PillLinkVariant = "pill" | "primary" | "secondary" | "success" | "destructive" | "ghost" | "warning" | "outline" | "outline-primary" | "outline-secondary" | "outline-success" | "outline-destructive" | "outline-ghost" | "outline-warning";
 export interface PillLinkProps extends React.ComponentPropsWithoutRef<"a"> {
     href: string;
     active?: boolean;
-    variant?: "pill" | "primary" | "outline";
+    variant?: PillLinkVariant;
     size?: "sm" | "md";
 }
 declare const PillLink: ({ active, className, size, variant, ...props }: PillLinkProps) => import('react').JSX.Element;

package/dist/components/tag.d.ts

@@ -1,6 +1,8 @@
 export type TagVariant = "primary" | "secondary" | "success" | "warning" | "destructive" | "outline";
+export type TagSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
 export interface TagProps extends React.ComponentPropsWithoutRef<"div"> {
     variant?: TagVariant;
+    size?: TagSize;
 }
-declare const Tag: ({ className, variant, ...props }: TagProps) => import('react').JSX.Element;
+declare const Tag: ({ className, variant, size, ...props }: TagProps) => import('react').JSX.Element;
 export default Tag;

package/package.json

@@ -2,7 +2,7 @@
 	"name": "@febkosq8/arc",
 	"description": "A React components library for febkosq8",
 	"private": false,
-	"version": "0.8.2",
+	"version": "0.8.3",
 	"type": "module",
 	"main": "./dist/arc.js",
 	"types": "./dist/index.d.ts",