@febkosq8/arc 0.8.8 → 0.8.10

package/components/index.css

@@ -321,4 +321,6 @@
 
 * {
 	@apply scroll-smooth;
+	scrollbar-color: var(--color-primary) var(--color-background);
+	scrollbar-width: thin;
 }

package/dist/arc.js

@@ -251,17 +251,24 @@ var xe = ({ className: e, orientation: r = "horizontal", selectedVariant: o, chi
 	role: "separator",
 	className: t("arc-divider w-full border-b border-border", e),
 	...n
-}), 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;
+}), U = (e) => e == null || typeof e == "boolean" ? "" : typeof e == "string" || typeof e == "number" || typeof e == "bigint" ? String(e) : Array.isArray(e) ? e.map(U).join("") : a(e) ? U(e.props.children) : "", W = (e) => {
+	let t = e.labelTextValue;
+	return t === void 0 ? typeof e.label == "string" || typeof e.label == "number" ? String(e.label) : U(e.label) || String(e.key) : t;
+}, ke = ({ items: e, value: n, onChange: r, className: i, placeholder: a = "Select an option", disabled: o, name: s, preventEmpty: c = !1, id: u, inputValue: d, onInputValueChange: h, onKeyDown: g, open: _, onOpenChange: v, renderItem: y, renderValue: S, selectedValueFillsSpace: C = !1, loading: w = !1, loadingLabel: T = "Loading options…", "aria-label": E, "data-name": D, "data-required": O }) => {
+	let k = e.find((e) => String(e.key) === String(n)) ?? null, A = k !== null && typeof k.label != "string" && typeof k.label != "number" && k.label !== null && typeof k.label != "boolean", j = k ? S ? S(k) : A ? k.label : null : null, M = j != null && j !== !1, N = C || A && !S, P = l(null);
 	return /* @__PURE__ */ f(m.Root, {
 		items: e,
-		value: d,
+		value: k,
 		onValueChange: (e) => {
 			if (c && e === null) return;
-			let t = e !== null && d !== null && String(e.key) === String(d.key);
+			let t = e !== null && k !== null && String(e.key) === String(k.key);
 			r?.(!c && t ? null : e);
 		},
-		itemToStringLabel: (e) => e?.label ?? "",
+		open: _,
+		onOpenChange: (e) => v?.(e),
+		inputValue: d,
+		onInputValueChange: (e) => h?.(e),
+		itemToStringLabel: (e) => e ? W(e) : "",
 		itemToStringValue: (e) => String(e?.key ?? ""),
 		isItemEqualToValue: (e, t) => String(e.key) === String(t.key),
 		name: s,
@@ -269,50 +276,72 @@ var xe = ({ className: e, orientation: r = "horizontal", selectedVariant: o, chi
 		children: /* @__PURE__ */ p("div", {
 			className: t("arc-dropdown relative", i),
 			children: [/* @__PURE__ */ p(m.InputGroup, {
-				className: t("relative flex h-8 w-full items-center justify-between gap-5 rounded border border-border bg-background pr-2 text-foreground shadow-xs pointer-coarse:h-9", "focus-within:border-transparent focus-within:outline-hidden focus-within:ring-2 focus-within:ring-ring", "data-disabled:cursor-not-allowed data-disabled:bg-muted data-disabled:text-muted-foreground"),
-				children: [/* @__PURE__ */ f(m.Input, {
-					className: "h-full grow border-none bg-transparent py-2 pl-3 outline-hidden placeholder:text-muted-foreground focus:ring-0 focus:outline-hidden disabled:cursor-not-allowed",
-					placeholder: a,
-					"data-name": l,
-					"data-required": u,
-					"data-disabled": o
-				}), /* @__PURE__ */ f(m.Trigger, {
-					className: "shrink-0 self-center rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-					"aria-label": "Toggle options",
-					children: /* @__PURE__ */ f(x, {
-						className: "h-5 w-5 text-foreground",
-						"aria-hidden": "true"
+				className: t("relative flex h-8 w-full items-center justify-between gap-5 overflow-hidden rounded border border-border bg-background pr-2 text-foreground shadow-xs pointer-coarse:h-9", M && (N ? "gap-0" : "gap-2"), "focus-within:border-transparent focus-within:outline-hidden focus-within:ring-2 focus-within:ring-ring", "data-disabled:cursor-not-allowed data-disabled:bg-muted data-disabled:text-muted-foreground"),
+				children: [
+					M && /* @__PURE__ */ f("span", {
+						className: t("ml-3", N ? "mr-2 min-w-0 flex-1 truncate" : "flex shrink-0 items-center"),
+						onMouseDown: N ? (e) => {
+							e.preventDefault(), P.current?.focus();
+						} : void 0,
+						children: j
+					}),
+					/* @__PURE__ */ f(m.Input, {
+						ref: P,
+						id: u,
+						className: t("h-full min-w-0 border-none bg-transparent outline-hidden placeholder:text-muted-foreground focus:ring-0 focus:outline-hidden disabled:cursor-not-allowed", M ? N ? "w-0 flex-none p-0" : "grow py-2 pl-0" : "grow py-2 pl-3"),
+						placeholder: a,
+						onKeyDown: g,
+						"aria-label": E,
+						"data-name": D,
+						"data-required": O,
+						"data-disabled": o
+					}),
+					/* @__PURE__ */ f(m.Trigger, {
+						className: "shrink-0 self-center rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+						"aria-label": "Toggle options",
+						children: /* @__PURE__ */ f(x, {
+							className: "h-5 w-5 text-foreground",
+							"aria-hidden": "true"
+						})
 					})
-				})]
+				]
 			}), /* @__PURE__ */ f(m.Portal, { children: /* @__PURE__ */ f(m.Positioner, {
 				className: "z-50",
 				sideOffset: 8,
 				children: /* @__PURE__ */ p(m.Popup, {
 					className: "max-h-60 min-w-(--anchor-width) overflow-auto rounded-md border border-border bg-popover text-foreground shadow-lg outline-0",
-					children: [/* @__PURE__ */ f(m.Empty, {
-						className: "relative cursor-default select-none px-4 py-2 text-muted-foreground empty:hidden",
-						children: "No values to show."
-					}), /* @__PURE__ */ f(m.List, { children: (e) => /* @__PURE__ */ p(m.Item, {
-						value: e,
-						disabled: e.disabled,
-						className: t("relative flex h-8 w-full cursor-default select-none items-center gap-2 border-b border-border px-4 py-1 last:border-b-0", "data-selected:font-medium data-selected:text-primary", "data-highlighted:bg-accent data-highlighted:text-primary", "data-disabled:cursor-not-allowed data-disabled:opacity-50"),
-						children: [/* @__PURE__ */ f(m.ItemIndicator, {
-							className: "flex items-center",
-							children: /* @__PURE__ */ f(b, {
-								className: "h-3 w-3",
-								"aria-hidden": "true"
-							})
-						}), /* @__PURE__ */ f("span", {
-							title: e.label,
-							className: "block truncate",
-							children: e.label
-						})]
-					}, e.key) })]
+					children: [
+						w && /* @__PURE__ */ f("div", {
+							role: "status",
+							className: "px-4 py-2 text-sm text-muted-foreground",
+							children: T
+						}),
+						/* @__PURE__ */ f(m.Empty, {
+							className: t("relative cursor-default select-none px-4 py-2 text-muted-foreground empty:hidden", w && "hidden"),
+							children: "No values to show."
+						}),
+						/* @__PURE__ */ f(m.List, { children: (e) => /* @__PURE__ */ p(m.Item, {
+							value: e,
+							disabled: e.disabled,
+							className: t("relative flex h-8 w-full cursor-default select-none items-center gap-2 border-b border-border px-4 py-1 last:border-b-0", "data-selected:font-medium data-selected:text-primary", "data-highlighted:bg-accent data-highlighted:text-primary", "data-disabled:cursor-not-allowed data-disabled:opacity-50"),
+							children: [/* @__PURE__ */ f(m.ItemIndicator, {
+								className: "flex items-center",
+								children: /* @__PURE__ */ f(b, {
+									className: "h-3 w-3",
+									"aria-hidden": "true"
+								})
+							}), y ? y(e) : /* @__PURE__ */ f("div", {
+								title: W(e),
+								className: "min-w-0 flex-1 truncate",
+								children: e.label
+							})]
+						}, e.key) })
+					]
 				})
 			}) })]
 		})
 	});
-}, U = ({ data: e, className: n, ...r }) => {
+}, G = ({ data: e, className: n, ...r }) => {
 	let i = Array.isArray(e) ? e.join(", ") : typeof e == "string" ? e : null;
 	return /* @__PURE__ */ f("em", {
 		role: "alert",
@@ -322,7 +351,7 @@ var xe = ({ className: e, orientation: r = "horizontal", selectedVariant: o, chi
 		children: i
 	});
 }, Ae = /* @__PURE__ */ "*.+.×.÷.=.~.!.?.@.#.%.&.§.¶.※.◇.◆.○.●.△.▽.□.■.♠.♣.♦.♤.♧.♢.♪.♫.∴.∵".split(".");
-function W(e, t, n) {
+function K(e, t, n) {
 	let r = Math.sin((e + 1) * 12.9898 + t * 78.233 + n * 37.719) * 43758.5453;
 	return r - Math.floor(r);
 }
@@ -387,10 +416,10 @@ var je = [
 				gridTemplateRows: `repeat(${n}, minmax(0, 1fr))`
 			},
 			children: Array.from({ length: n * r }, (e, o) => /* @__PURE__ */ f("span", {
-				className: t(Me({ shape: s === "mixed" ? y[o] ?? C[Math.floor(W(o, n, r) * C.length)] : s })),
+				className: t(Me({ shape: s === "mixed" ? y[o] ?? C[Math.floor(K(o, n, r) * C.length)] : s })),
 				onAnimationIteration: () => {
 					s === "mixed" && b((e) => {
-						let t = [...e], i = t[o] ?? C[Math.floor(W(o, n, r) * C.length)], a = C.filter((e) => e !== i);
+						let t = [...e], i = t[o] ?? C[Math.floor(K(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];
@@ -401,8 +430,8 @@ var je = [
 					});
 				},
 				style: {
-					animationDelay: l.length > 1 ? `${o / (n * r) * 1200}ms` : `${-W(o, n, r) * 1200}ms`,
-					animationDuration: l.length > 1 ? "1200ms" : `${900 + W(o, n, r) * 600}ms`,
+					animationDelay: l.length > 1 ? `${o / (n * r) * 1200}ms` : `${-K(o, n, r) * 1200}ms`,
+					animationDuration: l.length > 1 ? "1200ms" : `${900 + K(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,
@@ -415,7 +444,7 @@ var je = [
 			}, 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, {
+}, q = ({ 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, {
@@ -445,7 +474,7 @@ var je = [
 				htmlFor: e,
 				children: n
 			}),
-			r != null && r !== !1 && /* @__PURE__ */ f(G, {
+			r != null && r !== !1 && /* @__PURE__ */ f(q, {
 				trigger: "hover",
 				triggerRender: /* @__PURE__ */ f("button", {
 					type: "button",
@@ -461,10 +490,10 @@ var je = [
 					"aria-hidden": "true"
 				})
 			}),
-			s && (Array.isArray(s) ? s.length > 0 && /* @__PURE__ */ f(U, { data: s }) : /* @__PURE__ */ f(U, { data: s }))
+			s && (Array.isArray(s) ? s.length > 0 && /* @__PURE__ */ f(G, { data: s }) : /* @__PURE__ */ f(G, { data: s }))
 		]
 	});
-}, Fe = e("arc-input rounded border text-foreground placeholder:text-muted-foreground focus:border-transparent focus:outline-hidden focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:border-muted disabled:bg-muted", {
+}, Fe = e("arc-input overflow-hidden 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",
@@ -472,14 +501,14 @@ var je = [
 		},
 		as: {
 			input: "h-8 pointer-coarse:h-9 p-1 pl-2",
-			textarea: "min-h-50 max-h-250 resize-y overflow-auto! p-2 whitespace-pre-wrap"
+			textarea: "min-h-50 max-h-250 resize-y p-2 whitespace-pre-wrap"
 		}
 	},
 	defaultVariants: {
 		variant: "default",
 		as: "input"
 	}
-}), K = ({ as: e = "input", className: n, variant: r, ...i }) => {
+}), J = ({ as: e = "input", className: n, variant: r, ...i }) => {
 	let a = t(Fe({
 		as: e,
 		variant: r
@@ -501,7 +530,7 @@ var je = [
 		"outline-warning": "border-warning bg-background text-warning"
 	} },
 	defaultVariants: { variant: "outline-secondary" }
-}), q = (e) => {
+}), Y = (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(Ie({ variant: r }), h && "arc-card-cursor-border", c && "[&_.arc-card-header]:border-b", !c && "[&_.arc-card-header]:border-b-0", l && "[&_.arc-card-footer]:border-t", !l && "[&_.arc-card-footer]:border-t-0", (p || m) && "transition-[border-color,transform] duration-300 ease-out", p && "hover:-translate-y-1", m && "hover:border-primary", n),
@@ -513,19 +542,19 @@ var je = [
 		...d
 	});
 };
-q.Header = (e) => {
+Y.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) => {
+}, Y.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) => {
+}, Y.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),
@@ -640,7 +669,7 @@ var Le = class e {
 	}
 }, Re = ({ value: e, format: t = "$ISO$ ($RELATIVE$)", ...n }) => {
 	let r = c(() => e ? Le.getFormattedTime(e, t) : "", [e, t]);
-	return /* @__PURE__ */ f(K, {
+	return /* @__PURE__ */ f(J, {
 		type: "text",
 		disabled: !0,
 		readOnly: !0,
@@ -749,7 +778,7 @@ var Le = class e {
 	"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"
-}, J = ({ active: e = !1, className: n, size: r = "md", variant: i = "pill", ...a }) => /* @__PURE__ */ f("button", {
+}, X = ({ active: e = !1, className: n, size: r = "md", variant: i = "pill", ...a }) => /* @__PURE__ */ f("button", {
 	type: "button",
 	className: t(Ve({
 		variant: i,
@@ -757,10 +786,10 @@ var Le = class e {
 	}), e && He[i], n),
 	"aria-pressed": e,
 	...a
-}), 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, {
+}), 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)), Z = 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(X, {
 			active: r,
 			className: t("w-fit", r && i, e)
 		}),
@@ -868,7 +897,7 @@ var Le = class e {
 		onValueChange: (e) => {
 			l && e.length === 0 || i?.(e);
 		},
-		itemToStringLabel: (e) => e?.label ?? "",
+		itemToStringLabel: (e) => e ? W(e) : "",
 		itemToStringValue: (e) => String(e?.key ?? ""),
 		isItemEqualToValue: (e, t) => String(e.key) === String(t.key),
 		name: c,
@@ -876,7 +905,7 @@ var Le = class e {
 		children: /* @__PURE__ */ p("div", {
 			className: t("arc-dropdown-multi relative", a),
 			children: [/* @__PURE__ */ p(m.InputGroup, {
-				className: t("relative flex min-h-8 w-full items-center justify-between gap-1.5 rounded border border-border bg-background py-1 pr-2 pl-2 text-foreground shadow-xs pointer-coarse:min-h-9", "focus-within:border-transparent focus-within:outline-hidden focus-within:ring-2 focus-within:ring-ring", "data-disabled:cursor-not-allowed data-disabled:bg-muted data-disabled:text-muted-foreground"),
+				className: t("relative flex min-h-8 w-full items-center justify-between gap-1.5 overflow-hidden rounded border border-border bg-background py-1 pr-2 pl-2 text-foreground shadow-xs pointer-coarse:min-h-9", "focus-within:border-transparent focus-within:outline-hidden focus-within:ring-2 focus-within:ring-ring", "data-disabled:cursor-not-allowed data-disabled:bg-muted data-disabled:text-muted-foreground"),
 				children: [/* @__PURE__ */ f(m.Value, { children: (n) => /* @__PURE__ */ p("div", {
 					className: "flex min-w-0 grow flex-wrap items-center gap-1.5",
 					children: [/* @__PURE__ */ f(m.Chips, {
@@ -884,11 +913,12 @@ var Le = class e {
 						children: n.map((e) => /* @__PURE__ */ p(m.Chip, {
 							className: "inline-flex items-center gap-1 rounded-md border border-border bg-muted px-2 py-0.5 text-sm text-foreground",
 							children: [/* @__PURE__ */ f("span", {
+								title: W(e),
 								className: "max-w-32 truncate",
 								children: e.label
 							}), !s && (!l || n.length > 1) && /* @__PURE__ */ f(m.ChipRemove, {
 								className: "ml-0.5 cursor-pointer rounded-md hover:text-destructive focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-								"aria-label": `Remove ${e.label}`,
+								"aria-label": `Remove ${W(e)}`,
 								children: /* @__PURE__ */ f(z, {
 									className: "h-3 w-3",
 									"aria-hidden": "true"
@@ -929,9 +959,9 @@ var Le = class e {
 								className: "h-3 w-3",
 								"aria-hidden": "true"
 							})
-						}), /* @__PURE__ */ f("span", {
-							title: e.label,
-							className: "block truncate",
+						}), /* @__PURE__ */ f("div", {
+							title: W(e),
+							className: "min-w-0 flex-1 truncate",
 							children: e.label
 						})]
 					}, e.key) })]
@@ -939,23 +969,27 @@ var Le = class e {
 			}) })]
 		})
 	});
-}, X = ({ id: e, value: n, onChange: r, data: i, className: a, disabled: o, placeholder: s, ...c }) => /* @__PURE__ */ p(B.Root, {
+}, Q = ({ 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);
 	},
 	disabled: o,
-	items: i.map((e) => ({
-		value: e.key,
-		label: typeof e.label == "string" ? e.label : e.key
-	})),
+	items: i.map((e) => {
+		let t = e.labelTextValue ?? (typeof e.label == "string" || typeof e.label == "number" ? String(e.label) : U(e.label) || e.key);
+		return {
+			value: e.key,
+			label: t
+		};
+	}),
 	...c,
 	children: [/* @__PURE__ */ p(B.Trigger, {
 		id: e,
 		className: t("arc-select flex h-8 w-full items-center gap-2 overflow-hidden rounded border border-border bg-background px-2 py-1 text-foreground shadow-xs focus:outline-none focus-visible:ring-2 focus-visible:ring-ring pointer-coarse:h-9", "disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground", a),
 		children: [/* @__PURE__ */ f(B.Value, {
 			placeholder: s,
-			className: "min-w-0 flex-1 truncate text-left"
+			className: "min-w-0 flex-1 truncate text-left",
+			children: (e) => i.find((t) => t.key === e)?.label ?? s
 		}), /* @__PURE__ */ f(B.Icon, {
 			className: "shrink-0",
 			children: /* @__PURE__ */ f(x, {
@@ -1002,7 +1036,7 @@ var Le = class e {
 	...n
 }), Ye = ({ className: e, variant: n = "outline", size: r, ...i }) => /* @__PURE__ */ f(V.Tab, {
 	className: e,
-	render: (e, i) => /* @__PURE__ */ f(J, {
+	render: (e, i) => /* @__PURE__ */ f(X, {
 		...e,
 		"aria-pressed": void 0,
 		variant: n,
@@ -1045,14 +1079,14 @@ var Le = class e {
 }), Qe = (e, t, n, r) => {
 	let i = e.getValue(t), a = ee(i, n);
 	return r({ itemRank: a }), a.passed;
-}, Z = {
+}, $e = {
 	fuzzy: Qe,
 	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);
 	}
-}, Q = ve({
+}, et = ve({
 	columnMeta: {},
 	columnFilteringFeature: te,
 	columnResizingFeature: ne,
@@ -1072,23 +1106,23 @@ var Le = class e {
 		text: ge,
 		textCaseSensitive: _e
 	},
-	filterFns: Z
+	filterFns: $e
 });
-function $e(e) {
-	return Object.prototype.hasOwnProperty.call(Z, e);
+function tt(e) {
+	return Object.prototype.hasOwnProperty.call($e, e);
 }
-function et(e, t) {
+function nt(e, t) {
 	if (e !== !1) {
 		if (e === void 0) return t ? "select" : void 0;
-		if (typeof e == "function" || e === "auto" || $e(e)) return e;
-		throw Error(`Unsupported table filterFn "${e}". Use "auto" or one of: ${Object.keys(Z).join(", ")}.`);
+		if (typeof e == "function" || e === "auto" || tt(e)) return e;
+		throw Error(`Unsupported table filterFn "${e}". Use "auto" or one of: ${Object.keys($e).join(", ")}.`);
 	}
 }
-function tt(e) {
-	if (e === void 0 || e === "auto" || typeof e == "function" || Object.prototype.hasOwnProperty.call(Q.sortFns, e)) return e;
-	throw Error(`Unsupported table sortingFn "${e}". Use "auto" or one of: ${Object.keys(Q.sortFns).join(", ")}.`);
+function rt(e) {
+	if (e === void 0 || e === "auto" || typeof e == "function" || Object.prototype.hasOwnProperty.call(et.sortFns, e)) return e;
+	throw Error(`Unsupported table sortingFn "${e}". Use "auto" or one of: ${Object.keys(et.sortFns).join(", ")}.`);
 }
-var nt = ({ data: e, columnDef: n, pageSize: r = 10, className: i, showHeader: a = !0, showFilters: o = !0, showSorting: l = !0 }) => {
+var it = ({ 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
@@ -1098,13 +1132,13 @@ var nt = ({ data: e, columnDef: n, pageSize: r = 10, className: i, showHeader: a
 			enableResizing: e.enableResizing,
 			enableColumnFilter: e.filterFn !== !1 && e.enableColumnFilter,
 			enableSorting: e.enableSorting,
-			sortFn: tt(e.sortingFn),
+			sortFn: rt(e.sortingFn),
 			...e.sortUndefined === void 0 ? {} : { sortUndefined: e.sortUndefined },
 			enableHiding: e.enableHiding ?? !0,
 			size: e.size,
 			minSize: e.minSize ?? 50,
 			maxSize: e.maxSize ?? 1e3,
-			filterFn: et(e.filterFn, e.filterSelectOptions),
+			filterFn: nt(e.filterFn, e.filterSelectOptions),
 			meta: {
 				headerLabel: e.header,
 				filterSelectOptions: e.filterSelectOptions,
@@ -1159,7 +1193,7 @@ var nt = ({ data: e, columnDef: n, pageSize: r = 10, className: i, showHeader: a
 		onColumnFiltersChange: w,
 		onGlobalFilterChange: D,
 		globalFilterFn: Qe,
-		features: Q,
+		features: et,
 		defaultColumn: {
 			size: 200,
 			minSize: 50,
@@ -1184,7 +1218,7 @@ var nt = ({ data: e, columnDef: n, pageSize: r = 10, className: i, showHeader: a
 							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(at, { table: P })]
+						}), /* @__PURE__ */ f(st, { table: P })]
 					}),
 					/* @__PURE__ */ p("nav", {
 						"aria-label": "Table pagination",
@@ -1293,7 +1327,7 @@ var nt = ({ data: e, columnDef: n, pageSize: r = 10, className: i, showHeader: a
 					/* @__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(Q, {
 							id: `${d}-page-size`,
 							value: P.state.pagination.pageSize.toString(),
 							onChange: (e) => {
@@ -1332,7 +1366,7 @@ var nt = ({ data: e, columnDef: n, pageSize: r = 10, className: i, showHeader: a
 								htmlFor: `${d}-sort`,
 								className: "text-muted-foreground mb-1 block text-xs font-medium",
 								children: "Sort by"
-							}), /* @__PURE__ */ f(X, {
+							}), /* @__PURE__ */ f(Q, {
 								id: `${d}-sort`,
 								value: O[0]?.id ?? "__none__",
 								onChange: (e) => {
@@ -1376,7 +1410,7 @@ var nt = ({ data: e, columnDef: n, pageSize: r = 10, className: i, showHeader: a
 								htmlFor: n,
 								className: "text-muted-foreground mb-1 block text-xs font-medium",
 								children: t
-							}), /* @__PURE__ */ f(it, {
+							}), /* @__PURE__ */ f(ot, {
 								column: e,
 								idPrefix: `${d}-`
 							})]
@@ -1446,7 +1480,7 @@ var nt = ({ data: e, columnDef: n, pageSize: r = 10, className: i, showHeader: a
 		]
 	});
 };
-function rt({ value: e, onChange: t, debounce: n = 500, ...r }) {
+function at({ value: e, onChange: t, debounce: n = 500, ...r }) {
 	let [i, a] = u(e);
 	return o(() => {
 		a(e);
@@ -1459,14 +1493,14 @@ function rt({ value: e, onChange: t, debounce: n = 500, ...r }) {
 		i,
 		n,
 		t
-	]), /* @__PURE__ */ f(K, {
+	]), /* @__PURE__ */ f(J, {
 		...r,
 		value: i,
 		onChange: (e) => a(e.target.value),
 		autoComplete: "off"
 	});
 }
-function it({ column: e, idPrefix: t = "" }) {
+function ot({ column: e, idPrefix: t = "" }) {
 	let n = `${t}${e.id}-filter`, r = {
 		includesString: "Includes string",
 		equalsString: "Equals string",
@@ -1474,7 +1508,7 @@ function it({ 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(Q, {
 		id: n,
 		value: i ?? "__all__",
 		onChange: (t) => e.setFilterValue(t === "__all__" ? void 0 : t),
@@ -1486,7 +1520,7 @@ function it({ column: e, idPrefix: t = "" }) {
 			key: e.value,
 			label: e.label
 		}))]
-	}) : /* @__PURE__ */ f(rt, {
+	}) : /* @__PURE__ */ f(at, {
 		id: n,
 		type: "text",
 		name: e.id,
@@ -1497,8 +1531,8 @@ function it({ 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 at({ table: e }) {
-	return /* @__PURE__ */ p(G, {
+function st({ table: e }) {
+	return /* @__PURE__ */ p(q, {
 		trigger: "click",
 		triggerRender: /* @__PURE__ */ f(H, {
 			variant: "outline-secondary",
@@ -1528,31 +1562,31 @@ function at({ table: e }) {
 	});
 }
 // components/text-link.tsx
-var ot = ({ className: e, href: n, text: r, target: i = "_blank", rel: a, ...o }) => /* @__PURE__ */ f("a", {
+var ct = ({ 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
-}), st = ({ checked: e = !1, onChange: n, disabled: r = !1, variant: i = "primary", children: a, ...o }) => /* @__PURE__ */ f(be.Root, {
+}), lt = ({ 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", ct({
+	className: t("arc-switch", ut({
 		variant: i,
 		disabled: r
 	})),
 	...o,
 	children: a ? a(e) : /* @__PURE__ */ f(be.Thumb, {
 		"aria-hidden": "true",
-		className: lt({
+		className: dt({
 			variant: i,
 			checked: e,
 			disabled: r
 		})
 	})
-}), ct = 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: {
+}), ut = 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",
@@ -1563,7 +1597,7 @@ var ot = ({ className: e, href: n, text: r, target: i = "_blank", rel: a, ...o }
 		true: "ring-2 ring-border",
 		false: ""
 	}
-} }), lt = e("absolute top-1/2 inline-block h-5 w-5 -translate-y-1/2 transform rounded-full border shadow-sm transition-[left,translate,background-color,border-color] duration-300 ease-out", {
+} }), dt = e("absolute top-1/2 inline-block h-5 w-5 -translate-y-1/2 transform rounded-full border shadow-sm transition-[left,translate,background-color,border-color] duration-300 ease-out", {
 	variants: {
 		variant: {
 			primary: "",
@@ -1656,7 +1690,7 @@ var ot = ({ className: e, href: n, text: r, target: i = "_blank", rel: a, ...o }
 			className: "border-success bg-success/70"
 		}
 	]
-}), ut = {
+}), ft = {
 	light: L,
 	dark: I,
 	system: F
@@ -1664,25 +1698,25 @@ var ot = ({ className: e, href: n, text: r, target: i = "_blank", rel: a, ...o }
 	light: "Light",
 	dark: "Dark",
 	system: "System"
-}, dt = "theme", ft = (e) => e === "dark" || e === "system" && typeof window < "u" && window.matchMedia("(prefers-color-scheme: dark)").matches, pt = () => {
+}, pt = "theme", mt = (e) => e === "dark" || e === "system" && typeof window < "u" && window.matchMedia("(prefers-color-scheme: dark)").matches, ht = () => {
 	if (typeof window > "u") return "system";
-	let e = window.localStorage.getItem(dt);
+	let e = window.localStorage.getItem(pt);
 	return e === "light" || e === "dark" || e === "system" ? e : "system";
-}, mt = (e) => e === "system" ? "light" : e === "light" ? "dark" : "system";
-function ht({ variant: e = "dropdown", showLabel: n = !1 }) {
-	let [r, i] = u(pt);
+}, gt = (e) => e === "system" ? "light" : e === "light" ? "dark" : "system";
+function _t({ variant: e = "dropdown", showLabel: n = !1 }) {
+	let [r, i] = u(ht);
 	o(() => {
-		typeof window < "u" && (document.documentElement.classList.toggle("dark", ft(r)), window.localStorage.setItem(dt, r));
+		typeof window < "u" && (document.documentElement.classList.toggle("dark", mt(r)), window.localStorage.setItem(pt, r));
 	}, [r]);
 	let a = () => {
-		i(mt(r));
+		i(gt(r));
 	};
 	if (e === "toggle") {
-		let e = ut[r], t = mt(r);
+		let e = ft[r], t = gt(r);
 		return /* @__PURE__ */ f("div", {
 			className: "arc-theme-switcher",
-			children: /* @__PURE__ */ p(J, {
-				active: ft(r),
+			children: /* @__PURE__ */ p(X, {
+				active: mt(r),
 				"aria-label": `Switch to ${t} theme`,
 				title: `Switch to ${t} theme`,
 				onClick: a,
@@ -1691,18 +1725,18 @@ function ht({ variant: e = "dropdown", showLabel: n = !1 }) {
 			})
 		});
 	}
-	let s = ut[r];
+	let s = ft[r];
 	return /* @__PURE__ */ f("div", {
 		className: "arc-theme-switcher",
-		children: /* @__PURE__ */ p(Y, {
+		children: /* @__PURE__ */ p(Z, {
 			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(Z.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(X, {
 						active: r === "system",
 						title: "System Theme",
 						onClick: () => {
@@ -1715,10 +1749,10 @@ function ht({ variant: e = "dropdown", showLabel: n = !1 }) {
 						}), n && $.system]
 					})
 				}),
-				/* @__PURE__ */ f(Y.Item, {
+				/* @__PURE__ */ f(Z.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(X, {
 						active: r === "light",
 						title: "Light Theme",
 						onClick: () => {
@@ -1731,10 +1765,10 @@ function ht({ variant: e = "dropdown", showLabel: n = !1 }) {
 						}), n && $.light]
 					})
 				}),
-				/* @__PURE__ */ f(Y.Item, {
+				/* @__PURE__ */ f(Z.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(X, {
 						active: r === "dark",
 						title: "Dark Theme",
 						onClick: () => {
@@ -1752,16 +1786,16 @@ function ht({ variant: e = "dropdown", showLabel: n = !1 }) {
 	});
 }
 // components/typing-animation.tsx
-function gt(e) {
+function vt(e) {
 	return e === "newline" ? "\n" : e === "comma" ? ", " : "";
 }
-function _t(e, t, n, r, i) {
+function yt(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 vt({ strings: e, placeholder: t, perTick: n = {
+function bt({ strings: e, placeholder: t, perTick: n = {
 	amount: 1,
 	unit: "character"
 }, msDelay: r = {
@@ -1806,9 +1840,9 @@ function vt({ strings: e, placeholder: t, perTick: n = {
 				T([]), C(""), N.current += 1, P.current = 0, t = setTimeout(r, _);
 				return;
 			}
-			if (L.current) P.current = _t(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 = yt(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 = _t(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 = yt(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;
 				}
@@ -1841,7 +1875,7 @@ function vt({ strings: e, placeholder: t, perTick: n = {
 		O,
 		v
 	]);
-	let R = A ? "." : "", z = d !== "clear", B = gt(d), V = w.reduce((e, t) => e + t.split("\n").length, 0);
+	let R = A ? "." : "", z = d !== "clear", B = vt(d), V = w.reduce((e, t) => e + t.split("\n").length, 0);
 	return z ? /* @__PURE__ */ f("div", {
 		ref: (e) => {
 			M.current = e;
@@ -1872,7 +1906,7 @@ function vt({ strings: e, placeholder: t, perTick: n = {
 	});
 }
 // utilities/hash-navigation.ts
-function yt({ intervalMs: e = 500, maxAttempts: t = 20, behavior: n = "smooth", block: r } = {}) {
+function xt({ intervalMs: e = 500, maxAttempts: t = 20, behavior: n = "smooth", block: r } = {}) {
 	if (typeof window > "u") return () => {};
 	let i = 0, a = setInterval(() => {
 		i += 1;
@@ -1890,10 +1924,10 @@ function yt({ intervalMs: e = 500, maxAttempts: t = 20, behavior: n = "smooth",
 	}, e);
 	return () => clearInterval(a);
 }
-function bt(e) {
-	o(() => yt(e), []);
+function St(e) {
+	o(() => xt(e), []);
 }
-function xt({ container: e, sectionIds: t, hashFirstSection: n = !0, onActiveChange: r }) {
+function Ct({ 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();
@@ -1905,4 +1939,4 @@ function xt({ container: e, sectionIds: t, hashFirstSection: n = !0, onActiveCha
 	};
 	return o(), e.addEventListener("scroll", o, { passive: !0 }), () => e.removeEventListener("scroll", o);
 }
-export { De as Avatar, H as Button, xe as ButtonGroup, q as Card, Le as DateHandler, Oe as Divider, Ce as DoubleClickButton, ke as Dropdown, U as ErrorText, Ne as GridLoader, K as Input, Re as InputTimestamp, Pe as LabelField, we as LongPressButton, Y as Menu, We as Modal, Ge as MultiDropdown, J as Pill, Be as PillLink, G as PreviewCard, X as Select, st as Switch, nt as Table, Ke as Tabs, qe as TabsList, Je as TabsPanel, Ye as TabsTab, Ze as Tag, ot as TextLink, ht as ThemeSwitcher, vt as TypingAnimation, yt as navigateToHashOnLoad, xt as updateHashOnScroll, bt as useHashNavigationOnLoad };
+export { De as Avatar, H as Button, xe as ButtonGroup, Y as Card, Le as DateHandler, Oe as Divider, Ce as DoubleClickButton, ke as Dropdown, G as ErrorText, Ne as GridLoader, J as Input, Re as InputTimestamp, Pe as LabelField, we as LongPressButton, Z as Menu, We as Modal, Ge as MultiDropdown, X as Pill, Be as PillLink, q as PreviewCard, Q as Select, lt as Switch, it as Table, Ke as Tabs, qe as TabsList, Je as TabsPanel, Ye as TabsTab, Ze as Tag, ct as TextLink, _t as ThemeSwitcher, bt as TypingAnimation, xt as navigateToHashOnLoad, Ct as updateHashOnScroll, St as useHashNavigationOnLoad };

package/dist/components/dropdown.d.ts

@@ -1,8 +1,12 @@
+import { KeyboardEventHandler, ReactNode } from 'react';
 export type DropdownItem = {
     key: string | number;
-    label: string;
+    label: ReactNode;
+    labelTextValue?: string;
     disabled?: boolean;
 };
+export declare const getReactNodeText: (node: ReactNode) => string;
+export declare const getDropdownItemText: (item: DropdownItem) => string;
 export interface DropdownProps {
     items: DropdownItem[];
     value: number | string;
@@ -12,8 +16,20 @@ export interface DropdownProps {
     disabled?: boolean;
     name?: string;
     preventEmpty?: boolean;
+    id?: string;
+    inputValue?: string;
+    onInputValueChange?: (inputValue: string) => void;
+    onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    renderItem?: (item: DropdownItem) => ReactNode;
+    renderValue?: (item: DropdownItem) => ReactNode;
+    selectedValueFillsSpace?: boolean;
+    loading?: boolean;
+    loadingLabel?: string;
+    "aria-label"?: string;
     "data-name"?: string;
     "data-required"?: boolean;
 }
-declare const Dropdown: ({ items, value, onChange, className, placeholder, disabled, name, preventEmpty, "data-name": dataName, "data-required": dataRequired, }: DropdownProps) => import('react').JSX.Element;
+declare const Dropdown: ({ items, value, onChange, className, placeholder, disabled, name, preventEmpty, id, inputValue, onInputValueChange, onKeyDown, open, onOpenChange, renderItem, renderValue, selectedValueFillsSpace, loading, loadingLabel, "aria-label": ariaLabel, "data-name": dataName, "data-required": dataRequired, }: DropdownProps) => import('react').JSX.Element;
 export default Dropdown;

package/dist/components/select.d.ts

@@ -2,6 +2,7 @@ import { ReactNode } from 'react';
 export type SelectItem = {
     key: string;
     label: ReactNode;
+    labelTextValue?: string;
     disabled?: boolean;
 };
 export interface SelectProps {

package/package.json

@@ -2,7 +2,7 @@
 	"name": "@febkosq8/arc",
 	"description": "A React components library for febkosq8",
 	"private": false,
-	"version": "0.8.8",
+	"version": "0.8.10",
 	"type": "module",
 	"main": "./dist/arc.js",
 	"types": "./dist/index.d.ts",
@@ -63,7 +63,7 @@
 		"@typescript/typescript6": "6.0.2",
 		"@vitejs/plugin-react": "6.3.0",
 		"eslint": "10.14.0",
-		"prettier": "3.9.10",
+		"prettier": "3.10.1",
 		"prettier-plugin-css-order": "2.2.0",
 		"prettier-plugin-organize-attributes": "1.0.0",
 		"prettier-plugin-organize-imports": "4.3.0",
@@ -74,6 +74,6 @@
 		"tailwindcss": "4.3.5",
 		"typescript": "7.0.2",
 		"unplugin-dts": "1.1.2",
-		"vite": "8.3.7"
+		"vite": "8.3.8"
 	}
 }