@revealui/presentation 0.3.2 → 0.3.4

package/dist/{tooltip-DZGP3hO_.js → use-theme-QxeZadnD.js}

@@ -1,11 +1,11 @@
-import { b as clsx, i as Box, v as cn } from "./skeleton-Bb51IWbG.js";
-import React, { Children, createContext, isValidElement, use, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useReducer, useRef, useState } from "react";
+import { i as Box, v as cn } from "./skeleton-CHPpiyJj.js";
+import React, { Children, createContext, isValidElement, use, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useReducer, useRef, useState, useSyncExternalStore } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
 //#region src/components/accordion.tsx
 function Accordion({ className, children }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: clsx("divide-y divide-zinc-200 dark:divide-zinc-700", className),
+		className: cn("divide-y divide-zinc-200 dark:divide-zinc-700", className),
 		children
 	});
 }
@@ -25,7 +25,7 @@ function AccordionItem({ title, defaultOpen = false, className, children }) {
 				"aria-hidden": "true",
 				viewBox: "0 0 16 16",
 				fill: "none",
-				className: clsx("size-4 shrink-0 text-zinc-400 transition-transform duration-200", open && "rotate-180"),
+				className: cn("size-4 shrink-0 text-zinc-400 transition-transform duration-200", open && "rotate-180"),
 				children: /* @__PURE__ */ jsx("path", {
 					d: "M4 6l4 4 4-4",
 					stroke: "currentColor",
@@ -278,7 +278,25 @@ function Text({ className, ...props }) {
 	return /* @__PURE__ */ jsx("p", {
 		"data-slot": "text",
 		...props,
-		className: clsx(className, "text-base/6 text-zinc-500 sm:text-sm/6 dark:text-zinc-400")
+		className: cn(className, "text-base/6 text-zinc-500 sm:text-sm/6 dark:text-zinc-400")
+	});
+}
+function TextLink({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Link, {
+		...props,
+		className: cn(className, "text-zinc-950 underline decoration-zinc-950/50 data-hover:decoration-zinc-950 dark:text-white dark:decoration-white/50 dark:data-hover:decoration-white")
+	});
+}
+function Strong({ className, ...props }) {
+	return /* @__PURE__ */ jsx("strong", {
+		...props,
+		className: cn(className, "font-medium text-zinc-950 dark:text-white")
+	});
+}
+function Code({ className, ...props }) {
+	return /* @__PURE__ */ jsx("code", {
+		...props,
+		className: cn(className, "rounded-sm border border-zinc-950/10 bg-zinc-950/2.5 px-0.5 text-sm font-medium text-zinc-950 sm:text-[0.8125rem] dark:border-white/20 dark:bg-white/5 dark:text-white")
 	});
 }
 //#endregion
@@ -324,7 +342,7 @@ function Alert({ size = "md", className, children, open, onClose }) {
 						panel.nodeRef.current = node;
 					},
 					...panel.transitionProps,
-					className: clsx(className, sizes$1[size], "row-start-2 w-full rounded-2xl bg-white p-8 shadow-lg ring-1 ring-zinc-950/10 sm:rounded-2xl sm:p-6 dark:bg-zinc-900 dark:ring-white/10 forced-colors:outline", "transition duration-100 will-change-transform data-closed:opacity-0 data-enter:ease-out data-closed:data-enter:scale-95 data-leave:ease-in"),
+					className: cn(className, sizes$1[size], "row-start-2 w-full rounded-2xl bg-white p-8 shadow-lg ring-1 ring-zinc-950/10 sm:rounded-2xl sm:p-6 dark:bg-zinc-900 dark:ring-white/10 forced-colors:outline", "transition duration-100 will-change-transform data-closed:opacity-0 data-enter:ease-out data-closed:data-enter:scale-95 data-leave:ease-in"),
 					children
 				})
 			})
@@ -334,25 +352,25 @@ function Alert({ size = "md", className, children, open, onClose }) {
 function AlertTitle({ className, ...props }) {
 	return /* @__PURE__ */ jsx("h2", {
 		...props,
-		className: clsx(className, "text-center text-base/6 font-semibold text-balance text-zinc-950 sm:text-left sm:text-sm/6 sm:text-wrap dark:text-white")
+		className: cn(className, "text-center text-base/6 font-semibold text-balance text-zinc-950 sm:text-left sm:text-sm/6 sm:text-wrap dark:text-white")
 	});
 }
 function AlertDescription({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Text, {
 		...props,
-		className: clsx(className, "mt-2 text-center text-pretty sm:text-left")
+		className: cn(className, "mt-2 text-center text-pretty sm:text-left")
 	});
 }
 function AlertBody({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		...props,
-		className: clsx(className, "mt-4")
+		className: cn(className, "mt-4")
 	});
 }
 function AlertActions({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		...props,
-		className: clsx(className, "mt-6 flex flex-col-reverse items-center justify-end gap-3 *:w-full sm:mt-4 sm:flex-row sm:*:w-auto")
+		className: cn(className, "mt-6 flex flex-col-reverse items-center justify-end gap-3 *:w-full sm:mt-4 sm:flex-row sm:*:w-auto")
 	});
 }
 //#endregion
@@ -440,7 +458,7 @@ var styles = {
 };
 function Button({ color, outline, plain, className, children, ref, ...props }) {
 	const interactiveProps = useDataInteractive({ disabled: ("disabled" in props ? props.disabled : false) ?? false });
-	const classes = clsx(className, styles.base, outline ? styles.outline : plain ? styles.plain : clsx(styles.solid, styles.colors[color ?? "dark/zinc"]));
+	const classes = cn(className, styles.base, outline ? styles.outline : plain ? styles.plain : cn(styles.solid, styles.colors[color ?? "dark/zinc"]));
 	return typeof props.href === "string" ? /* @__PURE__ */ jsx(Link, {
 		...props,
 		className: classes,
@@ -450,7 +468,7 @@ function Button({ color, outline, plain, className, children, ref, ...props }) {
 		type: "button",
 		...props,
 		...interactiveProps,
-		className: clsx(classes, "cursor-default"),
+		className: cn(classes, "cursor-default"),
 		ref,
 		children: /* @__PURE__ */ jsx(TouchTarget, { children })
 	});
@@ -471,7 +489,7 @@ function Avatar({ src = null, square = false, initials, alt = "", className, ...
 	return /* @__PURE__ */ jsxs("span", {
 		"data-slot": "avatar",
 		...props,
-		className: clsx(className, "inline-grid shrink-0 align-middle [--avatar-radius:20%] *:col-start-1 *:row-start-1", "outline -outline-offset-1 outline-black/10 dark:outline-white/10", square ? "rounded-(--avatar-radius) *:rounded-(--avatar-radius)" : "rounded-full *:rounded-full"),
+		className: cn(className, "inline-grid shrink-0 align-middle [--avatar-radius:20%] *:col-start-1 *:row-start-1", "outline -outline-offset-1 outline-black/10 dark:outline-white/10", square ? "rounded-(--avatar-radius) *:rounded-(--avatar-radius)" : "rounded-full *:rounded-full"),
 		children: [initials && /* @__PURE__ */ jsxs("svg", {
 			className: "size-full fill-current p-[5%] text-[48px] font-medium uppercase select-none",
 			viewBox: "0 0 100 100",
@@ -494,7 +512,7 @@ function Avatar({ src = null, square = false, initials, alt = "", className, ...
 }
 function AvatarButton({ src, square = false, initials, alt, className, ref, ...props }) {
 	const interactiveProps = useDataInteractive({ disabled: ("disabled" in props ? props.disabled : false) ?? false });
-	const classes = clsx(className, square ? "rounded-[20%]" : "rounded-full", "relative inline-grid focus:not-data-focus:outline-hidden data-focus:outline-2 data-focus:outline-offset-2 data-focus:outline-blue-500");
+	const classes = cn(className, square ? "rounded-[20%]" : "rounded-full", "relative inline-grid focus:not-data-focus:outline-hidden data-focus:outline-2 data-focus:outline-offset-2 data-focus:outline-blue-500");
 	return typeof props.href === "string" ? /* @__PURE__ */ jsx(Link, {
 		...props,
 		className: classes,
@@ -537,10 +555,10 @@ function AvatarGroup({ items, max = 5, size = "md", className }) {
 	const visible = items.slice(0, max);
 	const overflow = items.length - max;
 	return /* @__PURE__ */ jsxs("div", {
-		className: clsx("flex items-center", className),
+		className: cn("flex items-center", className),
 		children: [visible.map((item, i) => {
 			return /* @__PURE__ */ jsx("div", {
-				className: clsx("ring-2 ring-white dark:ring-zinc-900", sizeClasses[size], i > 0 && overlapClass[size], "rounded-full"),
+				className: cn("ring-2 ring-white dark:ring-zinc-900", sizeClasses[size], i > 0 && overlapClass[size], "rounded-full"),
 				children: /* @__PURE__ */ jsx(Avatar, {
 					src: item.src,
 					initials: item.initials,
@@ -549,7 +567,7 @@ function AvatarGroup({ items, max = 5, size = "md", className }) {
 				})
 			}, i);
 		}), overflow > 0 && /* @__PURE__ */ jsxs("div", {
-			className: clsx(overlapClass[size], sizeClasses[size], "flex items-center justify-center rounded-full bg-zinc-200 text-xs font-medium text-zinc-600 ring-2 ring-white dark:bg-zinc-700 dark:text-zinc-300 dark:ring-zinc-900"),
+			className: cn(overlapClass[size], sizeClasses[size], "flex items-center justify-center rounded-full bg-zinc-200 text-xs font-medium text-zinc-600 ring-2 ring-white dark:bg-zinc-700 dark:text-zinc-300 dark:ring-zinc-900"),
 			role: "img",
 			"aria-label": `${overflow} more`,
 			children: ["+", overflow]
@@ -581,12 +599,16 @@ var colors$2 = {
 function Badge({ color = "zinc", className, ...props }) {
 	return /* @__PURE__ */ jsx("span", {
 		...props,
-		className: clsx(className, "inline-flex items-center gap-x-1.5 rounded-md px-1.5 py-0.5 text-sm/5 font-medium sm:text-xs/5 forced-colors:outline", colors$2[color])
+		className: cn(className, "inline-flex items-center gap-x-1.5 rounded-md px-1.5 py-0.5 text-sm/5 font-medium sm:text-xs/5 forced-colors:outline", colors$2[color]),
+		style: {
+			borderRadius: "var(--rvui-radius-full, 9999px)",
+			transition: "background-color var(--rvui-duration-fast, 120ms) var(--rvui-ease, cubic-bezier(0.22, 1, 0.36, 1))"
+		}
 	});
 }
 function BadgeButton({ color = "zinc", className, children, ref, ...props }) {
 	const interactiveProps = useDataInteractive({ disabled: ("disabled" in props ? props.disabled : false) ?? false });
-	const classes = clsx(className, "group relative inline-flex rounded-md focus:not-data-focus:outline-hidden data-focus:outline-2 data-focus:outline-offset-2 data-focus:outline-blue-500");
+	const classes = cn(className, "group relative inline-flex rounded-md focus:not-data-focus:outline-hidden data-focus:outline-2 data-focus:outline-offset-2 data-focus:outline-blue-500");
 	return typeof props.href === "string" ? /* @__PURE__ */ jsx(Link, {
 		...props,
 		className: classes,
@@ -687,11 +709,11 @@ function Callout({ variant = "info", title, icon, className, children }) {
 	const styles = variantStyles[variant];
 	return /* @__PURE__ */ jsx("div", {
 		role: "note",
-		className: clsx("rounded-xl p-4 ring-1", styles.wrapper, className),
+		className: cn("rounded-xl p-4 ring-1", styles.wrapper, className),
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "flex gap-3",
 			children: [/* @__PURE__ */ jsx("span", {
-				className: clsx("mt-0.5 shrink-0 text-sm font-bold", styles.icon),
+				className: cn("mt-0.5 shrink-0 text-sm font-bold", styles.icon),
 				"aria-hidden": "true",
 				children: icon ?? styles.iconChar
 			}), /* @__PURE__ */ jsxs("div", {
@@ -700,7 +722,7 @@ function Callout({ variant = "info", title, icon, className, children }) {
 					className: "text-sm font-semibold text-zinc-950 dark:text-white",
 					children: title
 				}), /* @__PURE__ */ jsx("div", {
-					className: clsx("text-sm text-zinc-700 dark:text-zinc-300", title && "mt-1"),
+					className: cn("text-sm text-zinc-700 dark:text-zinc-300", title && "mt-1"),
 					children
 				})]
 			})]
@@ -826,7 +848,7 @@ function CheckboxGroup({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "control",
 		...props,
-		className: clsx(className, "space-y-3", "has-data-[slot=description]:space-y-6 has-data-[slot=description]:**:data-[slot=label]:font-medium")
+		className: cn(className, "space-y-3", "has-data-[slot=description]:space-y-6 has-data-[slot=description]:**:data-[slot=label]:font-medium")
 	});
 }
 function CheckboxField({ className, disabled, ...props }) {
@@ -836,7 +858,7 @@ function CheckboxField({ className, disabled, ...props }) {
 			"data-slot": "field",
 			"data-disabled": disabled ? "" : void 0,
 			...props,
-			className: clsx(className, "grid grid-cols-[1.125rem_1fr] gap-x-4 gap-y-1 sm:grid-cols-[1rem_1fr]", "*:data-[slot=control]:col-start-1 *:data-[slot=control]:row-start-1 *:data-[slot=control]:mt-0.75 sm:*:data-[slot=control]:mt-1", "*:data-[slot=label]:col-start-2 *:data-[slot=label]:row-start-1", "*:data-[slot=description]:col-start-2 *:data-[slot=description]:row-start-2", "has-data-[slot=description]:**:data-[slot=label]:font-medium")
+			className: cn(className, "grid grid-cols-[1.125rem_1fr] gap-x-4 gap-y-1 sm:grid-cols-[1rem_1fr]", "*:data-[slot=control]:col-start-1 *:data-[slot=control]:row-start-1 *:data-[slot=control]:mt-0.75 sm:*:data-[slot=control]:mt-1", "*:data-[slot=label]:col-start-2 *:data-[slot=label]:row-start-1", "*:data-[slot=description]:col-start-2 *:data-[slot=description]:row-start-2", "has-data-[slot=description]:**:data-[slot=label]:font-medium")
 		})
 	});
 }
@@ -907,13 +929,13 @@ function Checkbox({ color = "dark/zinc", className, checked: controlledChecked,
 		onKeyDown: disabled ? void 0 : handleKeyDown,
 		...interactiveProps,
 		...props,
-		className: clsx(className, "group inline-flex focus:outline-hidden"),
+		className: cn(className, "group inline-flex focus:outline-hidden"),
 		children: [name && /* @__PURE__ */ jsx("input", {
 			type: "hidden",
 			name,
 			value: checked ? value ?? "on" : ""
 		}), /* @__PURE__ */ jsx("span", {
-			className: clsx([base$1, colors$1[color]]),
+			className: cn([base$1, colors$1[color]]),
 			children: /* @__PURE__ */ jsxs("svg", {
 				className: "size-4 stroke-(--checkbox-check) opacity-0 group-data-checked:opacity-100 sm:h-3.5 sm:w-3.5",
 				viewBox: "0 0 14 14",
@@ -949,7 +971,7 @@ function CodeBlock({ code, language, filename, showCopy = true, className }) {
 		setTimeout(() => setCopied(false), 2e3);
 	}, [code]);
 	return /* @__PURE__ */ jsxs("div", {
-		className: clsx("overflow-hidden rounded-xl bg-zinc-950 ring-1 ring-zinc-800", className),
+		className: cn("overflow-hidden rounded-xl bg-zinc-950 ring-1 ring-zinc-800", className),
 		children: [(filename || language || showCopy) && /* @__PURE__ */ jsxs("div", {
 			className: "flex items-center justify-between border-b border-zinc-800 px-4 py-2.5",
 			children: [/* @__PURE__ */ jsxs("div", {
@@ -1194,7 +1216,7 @@ function Combobox({ options, displayValue, filter, anchor = "bottom", className,
 			ref: controlRef,
 			"data-slot": "control",
 			...disabled ? { "data-disabled": "" } : {},
-			className: clsx([
+			className: cn([
 				className,
 				"relative block w-full",
 				"before:absolute before:inset-px before:rounded-[calc(var(--radius-lg)-1px)] before:bg-white before:shadow-sm",
@@ -1227,7 +1249,7 @@ function Combobox({ options, displayValue, filter, anchor = "bottom", className,
 				onKeyDown: handleInputKeyDown,
 				placeholder,
 				...disabled ? { "data-disabled": "" } : {},
-				className: clsx([
+				className: cn([
 					className,
 					"relative block w-full appearance-none rounded-lg py-[calc(--spacing(2.5)-1px)] sm:py-[calc(--spacing(1.5)-1px)]",
 					"pr-[calc(--spacing(10)-1px)] pl-[calc(--spacing(3.5)-1px)] sm:pr-[calc(--spacing(9)-1px)] sm:pl-[calc(--spacing(3)-1px)]",
@@ -1280,7 +1302,7 @@ function Combobox({ options, displayValue, filter, anchor = "bottom", className,
 			id: listboxId,
 			...popoverProps,
 			...transitionProps,
-			className: clsx("[--anchor-gap:--spacing(2)] [--anchor-padding:--spacing(4)] sm:data-[anchor~=start]:[--anchor-offset:-4px]", "isolate min-w-[calc(var(--input-width)+8px)] scroll-py-1 rounded-xl p-1 select-none empty:invisible", "outline outline-transparent focus:outline-hidden", "overflow-y-scroll overscroll-contain", "bg-white/75 backdrop-blur-xl dark:bg-zinc-800/75", "shadow-lg ring-1 ring-zinc-950/10 dark:ring-white/10 dark:ring-inset", "transition-opacity duration-100 ease-in data-closed:data-leave:opacity-0 data-transition:pointer-events-none"),
+			className: cn("[--anchor-gap:--spacing(2)] [--anchor-padding:--spacing(4)] sm:data-[anchor~=start]:[--anchor-offset:-4px]", "isolate min-w-[calc(var(--input-width)+8px)] scroll-py-1 rounded-xl p-1 select-none empty:invisible", "outline outline-transparent focus:outline-hidden", "overflow-y-scroll overscroll-contain", "bg-white/75 backdrop-blur-xl dark:bg-zinc-800/75", "shadow-lg ring-1 ring-zinc-950/10 dark:ring-white/10 dark:ring-inset", "transition-opacity duration-100 ease-in data-closed:data-leave:opacity-0 data-transition:pointer-events-none"),
 			style: {
 				...popoverProps.style,
 				minWidth: controlRef.current?.offsetWidth
@@ -1304,7 +1326,7 @@ function ComboboxOption({ children, className, value, disabled = false }) {
 	const index = use(ComboboxOptionIndexContext);
 	const isSelected = selectedValue === value;
 	const isActive = activeIndex === index;
-	const sharedClasses = clsx("flex min-w-0 items-center", "*:data-[slot=icon]:size-5 *:data-[slot=icon]:shrink-0 sm:*:data-[slot=icon]:size-4", "*:data-[slot=icon]:text-zinc-500 group-data-focus/option:*:data-[slot=icon]:text-white dark:*:data-[slot=icon]:text-zinc-400", "forced-colors:*:data-[slot=icon]:text-[CanvasText] forced-colors:group-data-focus/option:*:data-[slot=icon]:text-[Canvas]", "*:data-[slot=avatar]:-mx-0.5 *:data-[slot=avatar]:size-6 sm:*:data-[slot=avatar]:size-5");
+	const sharedClasses = cn("flex min-w-0 items-center", "*:data-[slot=icon]:size-5 *:data-[slot=icon]:shrink-0 sm:*:data-[slot=icon]:size-4", "*:data-[slot=icon]:text-zinc-500 group-data-focus/option:*:data-[slot=icon]:text-white dark:*:data-[slot=icon]:text-zinc-400", "forced-colors:*:data-[slot=icon]:text-[CanvasText] forced-colors:group-data-focus/option:*:data-[slot=icon]:text-[Canvas]", "*:data-[slot=avatar]:-mx-0.5 *:data-[slot=avatar]:size-6 sm:*:data-[slot=avatar]:size-5");
 	return /* @__PURE__ */ jsxs("div", {
 		role: "option",
 		"aria-selected": isSelected,
@@ -1322,9 +1344,9 @@ function ComboboxOption({ children, className, value, disabled = false }) {
 		onClick: () => {
 			if (!disabled) select(value);
 		},
-		className: clsx("group/option grid w-full cursor-default grid-cols-[1fr_--spacing(5)] items-baseline gap-x-2 rounded-lg py-2.5 pr-2 pl-3.5 sm:grid-cols-[1fr_--spacing(4)] sm:py-1.5 sm:pr-2 sm:pl-3", "text-base/6 text-zinc-950 sm:text-sm/6 dark:text-white forced-colors:text-[CanvasText]", "outline-hidden data-focus:bg-blue-500 data-focus:text-white", "forced-color-adjust-none forced-colors:data-focus:bg-[Highlight] forced-colors:data-focus:text-[HighlightText]", "data-disabled:opacity-50"),
+		className: cn("group/option grid w-full cursor-default grid-cols-[1fr_--spacing(5)] items-baseline gap-x-2 rounded-lg py-2.5 pr-2 pl-3.5 sm:grid-cols-[1fr_--spacing(4)] sm:py-1.5 sm:pr-2 sm:pl-3", "text-base/6 text-zinc-950 sm:text-sm/6 dark:text-white forced-colors:text-[CanvasText]", "outline-hidden data-focus:bg-blue-500 data-focus:text-white", "forced-color-adjust-none forced-colors:data-focus:bg-[Highlight] forced-colors:data-focus:text-[HighlightText]", "data-disabled:opacity-50"),
 		children: [/* @__PURE__ */ jsx("span", {
-			className: clsx(className, sharedClasses),
+			className: cn(className, sharedClasses),
 			children
 		}), /* @__PURE__ */ jsx("svg", {
 			className: "relative col-start-2 hidden size-5 self-center stroke-current group-data-selected/option:inline sm:size-4",
@@ -1343,13 +1365,13 @@ function ComboboxOption({ children, className, value, disabled = false }) {
 function ComboboxLabel({ className, ...props }) {
 	return /* @__PURE__ */ jsx("span", {
 		...props,
-		className: clsx(className, "ml-2.5 truncate first:ml-0 sm:ml-2 sm:first:ml-0")
+		className: cn(className, "ml-2.5 truncate first:ml-0 sm:ml-2 sm:first:ml-0")
 	});
 }
 function ComboboxDescription({ className, children, ...props }) {
 	return /* @__PURE__ */ jsx("span", {
 		...props,
-		className: clsx(className, "flex flex-1 overflow-hidden text-zinc-500 group-data-focus/option:text-white before:w-2 before:min-w-0 before:shrink dark:text-zinc-400"),
+		className: cn(className, "flex flex-1 overflow-hidden text-zinc-500 group-data-focus/option:text-white before:w-2 before:min-w-0 before:shrink dark:text-zinc-400"),
 		children: /* @__PURE__ */ jsx("span", {
 			className: "flex-1 truncate",
 			children
@@ -1361,19 +1383,19 @@ function ComboboxDescription({ className, children, ...props }) {
 function DescriptionList({ className, ...props }) {
 	return /* @__PURE__ */ jsx("dl", {
 		...props,
-		className: clsx(className, "grid grid-cols-1 text-base/6 sm:grid-cols-[min(50%,--spacing(80))_auto] sm:text-sm/6")
+		className: cn(className, "grid grid-cols-1 text-base/6 sm:grid-cols-[min(50%,--spacing(80))_auto] sm:text-sm/6")
 	});
 }
 function DescriptionTerm({ className, ...props }) {
 	return /* @__PURE__ */ jsx("dt", {
 		...props,
-		className: clsx(className, "col-start-1 border-t border-zinc-950/5 pt-3 text-zinc-500 first:border-none sm:border-t sm:border-zinc-950/5 sm:py-3 dark:border-white/5 dark:text-zinc-400 sm:dark:border-white/5")
+		className: cn(className, "col-start-1 border-t border-zinc-950/5 pt-3 text-zinc-500 first:border-none sm:border-t sm:border-zinc-950/5 sm:py-3 dark:border-white/5 dark:text-zinc-400 sm:dark:border-white/5")
 	});
 }
 function DescriptionDetails({ className, ...props }) {
 	return /* @__PURE__ */ jsx("dd", {
 		...props,
-		className: clsx(className, "pt-1 pb-3 text-zinc-950 sm:border-t sm:border-zinc-950/5 sm:py-3 sm:nth-2:border-none dark:text-white dark:sm:border-white/5")
+		className: cn(className, "pt-1 pb-3 text-zinc-950 sm:border-t sm:border-zinc-950/5 sm:py-3 sm:nth-2:border-none dark:text-white dark:sm:border-white/5")
 	});
 }
 //#endregion
@@ -1411,7 +1433,11 @@ function Dialog({ size = "lg", className, children, open, onClose }) {
 				ref: backdrop.nodeRef,
 				...backdrop.transitionProps,
 				onClick: onClose,
-				className: "fixed inset-0 flex w-screen justify-center overflow-y-auto bg-zinc-950/25 px-2 py-2 transition duration-100 focus:outline-0 data-closed:opacity-0 data-enter:ease-out data-leave:ease-in sm:px-6 sm:py-8 lg:px-8 lg:py-16 dark:bg-zinc-950/50"
+				className: "fixed inset-0 flex w-screen justify-center overflow-y-auto px-2 py-2 transition duration-100 focus:outline-0 data-closed:opacity-0 data-enter:ease-out data-leave:ease-in sm:px-6 sm:py-8 lg:px-8 lg:py-16",
+				style: {
+					backgroundColor: "oklch(0.13 0.004 228 / 0.6)",
+					backdropFilter: "blur(4px)"
+				}
 			}), panel.mounted && /* @__PURE__ */ jsx("div", {
 				className: "fixed inset-0 w-screen overflow-y-auto pt-6 sm:pt-0",
 				children: /* @__PURE__ */ jsx("div", {
@@ -1422,7 +1448,14 @@ function Dialog({ size = "lg", className, children, open, onClose }) {
 							panel.nodeRef.current = node;
 						},
 						...panel.transitionProps,
-						className: clsx(className, sizes[size], "row-start-2 w-full min-w-0 rounded-t-3xl bg-white p-(--gutter) shadow-lg ring-1 ring-zinc-950/10 [--gutter:--spacing(8)] sm:mb-auto sm:rounded-2xl dark:bg-zinc-900 dark:ring-white/10 forced-colors:outline", "transition duration-100 will-change-transform data-closed:translate-y-12 data-closed:opacity-0 data-enter:ease-out data-leave:ease-in sm:data-closed:translate-y-0 sm:data-closed:data-enter:scale-95"),
+						className: cn(className, sizes[size], "row-start-2 w-full min-w-0 rounded-t-3xl p-(--gutter) shadow-lg ring-1 [--gutter:--spacing(8)] sm:mb-auto sm:rounded-2xl forced-colors:outline", "transition will-change-transform data-closed:translate-y-12 data-closed:opacity-0 data-enter:ease-out data-leave:ease-in sm:data-closed:translate-y-0 sm:data-closed:data-enter:scale-95"),
+						style: {
+							backgroundColor: "var(--rvui-surface-1, oklch(0.18 0.006 225))",
+							boxShadow: "var(--rvui-shadow-lg, 0 12px 40px oklch(0 0 0 / 0.35))",
+							"--tw-ring-color": "var(--rvui-border-subtle, oklch(0.28 0.006 222 / 0.4))",
+							transitionDuration: "var(--rvui-duration-normal, 200ms)",
+							transitionTimingFunction: "var(--rvui-ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1))"
+						},
 						children
 					})
 				})
@@ -1434,25 +1467,26 @@ function DialogTitle({ className, ...props }) {
 	return /* @__PURE__ */ jsx("h2", {
 		id: use(DialogContext),
 		...props,
-		className: clsx(className, "text-lg/6 font-semibold text-balance text-zinc-950 sm:text-base/6 dark:text-white")
+		className: cn(className, "text-lg/6 font-semibold text-balance sm:text-base/6"),
+		style: { color: "var(--rvui-text-0, oklch(0.95 0.002 210))" }
 	});
 }
 function DialogDescription({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Text, {
 		...props,
-		className: clsx(className, "mt-2 text-pretty")
+		className: cn(className, "mt-2 text-pretty")
 	});
 }
 function DialogBody({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		...props,
-		className: clsx(className, "mt-6")
+		className: cn(className, "mt-6")
 	});
 }
 function DialogActions({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		...props,
-		className: clsx(className, "mt-8 flex flex-col-reverse items-center justify-end gap-3 *:w-full sm:flex-row sm:*:w-auto")
+		className: cn(className, "mt-8 flex flex-col-reverse items-center justify-end gap-3 *:w-full sm:flex-row sm:*:w-auto")
 	});
 }
 //#endregion
@@ -1460,7 +1494,7 @@ function DialogActions({ className, ...props }) {
 function Divider({ soft = false, className, ...props }) {
 	return /* @__PURE__ */ jsx("hr", {
 		...props,
-		className: clsx(className, "w-full border-t", soft && "border-zinc-950/5 dark:border-white/5", !soft && "border-zinc-950/10 dark:border-white/10")
+		className: cn(className, "w-full border-t", soft && "border-zinc-950/5 dark:border-white/5", !soft && "border-zinc-950/10 dark:border-white/10")
 	});
 }
 //#endregion
@@ -1503,7 +1537,7 @@ function Drawer({ open, onClose, side = "right", className, children }) {
 					panel.nodeRef.current = node;
 				},
 				...panel.transitionProps,
-				className: clsx("fixed z-50 overflow-y-auto bg-white shadow-xl ring-1 ring-zinc-950/10 transition duration-300 ease-in-out dark:bg-zinc-900 dark:ring-white/10", sideClasses$1[side], className),
+				className: cn("fixed z-50 overflow-y-auto bg-white shadow-xl ring-1 ring-zinc-950/10 transition duration-300 ease-in-out dark:bg-zinc-900 dark:ring-white/10", sideClasses$1[side], className),
 				children
 			})]
 		})
@@ -1512,7 +1546,7 @@ function Drawer({ open, onClose, side = "right", className, children }) {
 function DrawerHeader({ onClose, className, children }) {
 	const titleId = use(DrawerContext);
 	return /* @__PURE__ */ jsxs("div", {
-		className: clsx("flex items-center justify-between border-b border-zinc-200 px-6 py-4 dark:border-zinc-700", className),
+		className: cn("flex items-center justify-between border-b border-zinc-200 px-6 py-4 dark:border-zinc-700", className),
 		children: [/* @__PURE__ */ jsx("h2", {
 			id: titleId,
 			className: "text-base font-semibold text-zinc-950 dark:text-white",
@@ -1540,13 +1574,13 @@ function DrawerHeader({ onClose, className, children }) {
 function DrawerBody({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		...props,
-		className: clsx("px-6 py-4", className)
+		className: cn("px-6 py-4", className)
 	});
 }
 function DrawerFooter({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		...props,
-		className: clsx("flex items-center justify-end gap-3 border-t border-zinc-200 px-6 py-4 dark:border-zinc-700", className)
+		className: cn("flex items-center justify-end gap-3 border-t border-zinc-200 px-6 py-4 dark:border-zinc-700", className)
 	});
 }
 //#endregion
@@ -1781,7 +1815,7 @@ function DropdownMenu({ anchor = "bottom", className, children, ...props }) {
 			"aria-orientation": "vertical",
 			style: popover.popoverProps.style,
 			onKeyDown: handleKeyDown,
-			className: clsx(className, "[--anchor-gap:--spacing(2)] [--anchor-padding:--spacing(1)] data-[anchor~=end]:[--anchor-offset:6px] data-[anchor~=start]:[--anchor-offset:-6px] sm:data-[anchor~=end]:[--anchor-offset:4px] sm:data-[anchor~=start]:[--anchor-offset:-4px]", "isolate w-max rounded-xl p-1", "outline outline-transparent focus:outline-hidden", "overflow-y-auto", "bg-white/75 backdrop-blur-xl dark:bg-zinc-800/75", "shadow-lg ring-1 ring-zinc-950/10 dark:ring-white/10 dark:ring-inset", "supports-[grid-template-columns:subgrid]:grid supports-[grid-template-columns:subgrid]:grid-cols-[auto_1fr_1.5rem_0.5rem_auto]", "transition data-leave:duration-100 data-leave:ease-in data-closed:data-leave:opacity-0"),
+			className: cn(className, "[--anchor-gap:--spacing(2)] [--anchor-padding:--spacing(1)] data-[anchor~=end]:[--anchor-offset:6px] data-[anchor~=start]:[--anchor-offset:-6px] sm:data-[anchor~=end]:[--anchor-offset:4px] sm:data-[anchor~=start]:[--anchor-offset:-4px]", "isolate w-max rounded-xl p-1", "outline outline-transparent focus:outline-hidden", "overflow-y-auto", "bg-white/75 backdrop-blur-xl dark:bg-zinc-800/75", "shadow-lg ring-1 ring-zinc-950/10 dark:ring-white/10 dark:ring-inset", "supports-[grid-template-columns:subgrid]:grid supports-[grid-template-columns:subgrid]:grid-cols-[auto_1fr_1.5rem_0.5rem_auto]", "transition data-leave:duration-100 data-leave:ease-in data-closed:data-leave:opacity-0"),
 			children
 		})
 	}), document.body);
@@ -1822,7 +1856,7 @@ function DropdownItem({ className, ...props }) {
 		propsOnClick,
 		rovingProps
 	]);
-	const classes = clsx(className, "group cursor-default rounded-lg px-3.5 py-2.5 focus:outline-hidden sm:px-3 sm:py-1.5", "text-left text-base/6 text-zinc-950 sm:text-sm/6 dark:text-white forced-colors:text-[CanvasText]", "data-focus:bg-blue-500 data-focus:text-white", "data-disabled:opacity-50", "forced-color-adjust-none forced-colors:data-focus:bg-[Highlight] forced-colors:data-focus:text-[HighlightText] forced-colors:data-focus:*:data-[slot=icon]:text-[HighlightText]", "col-span-full grid grid-cols-[auto_1fr_1.5rem_0.5rem_auto] items-center supports-[grid-template-columns:subgrid]:grid-cols-subgrid", "*:data-[slot=icon]:col-start-1 *:data-[slot=icon]:row-start-1 *:data-[slot=icon]:mr-2.5 *:data-[slot=icon]:-ml-0.5 *:data-[slot=icon]:size-5 sm:*:data-[slot=icon]:mr-2 sm:*:data-[slot=icon]:size-4", "*:data-[slot=icon]:text-zinc-500 data-focus:*:data-[slot=icon]:text-white dark:*:data-[slot=icon]:text-zinc-400 dark:data-focus:*:data-[slot=icon]:text-white", "*:data-[slot=avatar]:mr-2.5 *:data-[slot=avatar]:-ml-1 *:data-[slot=avatar]:size-6 sm:*:data-[slot=avatar]:mr-2 sm:*:data-[slot=avatar]:size-5");
+	const classes = cn(className, "group cursor-default rounded-lg px-3.5 py-2.5 focus:outline-hidden sm:px-3 sm:py-1.5", "text-left text-base/6 text-zinc-950 sm:text-sm/6 dark:text-white forced-colors:text-[CanvasText]", "data-focus:bg-blue-500 data-focus:text-white", "data-disabled:opacity-50", "forced-color-adjust-none forced-colors:data-focus:bg-[Highlight] forced-colors:data-focus:text-[HighlightText] forced-colors:data-focus:*:data-[slot=icon]:text-[HighlightText]", "col-span-full grid grid-cols-[auto_1fr_1.5rem_0.5rem_auto] items-center supports-[grid-template-columns:subgrid]:grid-cols-subgrid", "*:data-[slot=icon]:col-start-1 *:data-[slot=icon]:row-start-1 *:data-[slot=icon]:mr-2.5 *:data-[slot=icon]:-ml-0.5 *:data-[slot=icon]:size-5 sm:*:data-[slot=icon]:mr-2 sm:*:data-[slot=icon]:size-4", "*:data-[slot=icon]:text-zinc-500 data-focus:*:data-[slot=icon]:text-white dark:*:data-[slot=icon]:text-zinc-400 dark:data-focus:*:data-[slot=icon]:text-white", "*:data-[slot=avatar]:mr-2.5 *:data-[slot=avatar]:-ml-1 *:data-[slot=avatar]:size-6 sm:*:data-[slot=avatar]:mr-2 sm:*:data-[slot=avatar]:size-5");
 	if (typeof props.href === "string") {
 		const { href, children, ...linkProps } = props;
 		return /* @__PURE__ */ jsx(Link, {
@@ -1858,50 +1892,50 @@ function DropdownItem({ className, ...props }) {
 function DropdownHeader({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		...props,
-		className: clsx(className, "col-span-5 px-3.5 pt-2.5 pb-1 sm:px-3")
+		className: cn(className, "col-span-5 px-3.5 pt-2.5 pb-1 sm:px-3")
 	});
 }
 function DropdownSection({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		role: "group",
 		...props,
-		className: clsx(className, "col-span-full supports-[grid-template-columns:subgrid]:grid supports-[grid-template-columns:subgrid]:grid-cols-[auto_1fr_1.5rem_0.5rem_auto]")
+		className: cn(className, "col-span-full supports-[grid-template-columns:subgrid]:grid supports-[grid-template-columns:subgrid]:grid-cols-[auto_1fr_1.5rem_0.5rem_auto]")
 	});
 }
 function DropdownHeading({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		role: "presentation",
 		...props,
-		className: clsx(className, "col-span-full grid grid-cols-[1fr_auto] gap-x-12 px-3.5 pt-2 pb-1 text-sm/5 font-medium text-zinc-500 sm:px-3 sm:text-xs/5 dark:text-zinc-400")
+		className: cn(className, "col-span-full grid grid-cols-[1fr_auto] gap-x-12 px-3.5 pt-2 pb-1 text-sm/5 font-medium text-zinc-500 sm:px-3 sm:text-xs/5 dark:text-zinc-400")
 	});
 }
 function DropdownDivider({ className, ...props }) {
 	return /* @__PURE__ */ jsx("hr", {
 		...props,
-		className: clsx(className, "col-span-full mx-3.5 my-1 h-px border-0 bg-zinc-950/5 sm:mx-3 dark:bg-white/10 forced-colors:bg-[CanvasText]")
+		className: cn(className, "col-span-full mx-3.5 my-1 h-px border-0 bg-zinc-950/5 sm:mx-3 dark:bg-white/10 forced-colors:bg-[CanvasText]")
 	});
 }
 function DropdownLabel({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		...props,
 		"data-slot": "label",
-		className: clsx(className, "col-start-2 row-start-1")
+		className: cn(className, "col-start-2 row-start-1")
 	});
 }
 function DropdownDescription({ className, ...props }) {
 	return /* @__PURE__ */ jsx("span", {
 		"data-slot": "description",
 		...props,
-		className: clsx(className, "col-span-2 col-start-2 row-start-2 text-sm/5 text-zinc-500 group-data-focus:text-white sm:text-xs/5 dark:text-zinc-400 forced-colors:group-data-focus:text-[HighlightText]")
+		className: cn(className, "col-span-2 col-start-2 row-start-2 text-sm/5 text-zinc-500 group-data-focus:text-white sm:text-xs/5 dark:text-zinc-400 forced-colors:group-data-focus:text-[HighlightText]")
 	});
 }
 function DropdownShortcut({ keys, className, ...props }) {
 	return /* @__PURE__ */ jsx("kbd", {
 		...props,
-		className: clsx(className, "col-start-5 row-start-1 flex justify-self-end"),
+		className: cn(className, "col-start-5 row-start-1 flex justify-self-end"),
 		children: (Array.isArray(keys) ? keys : keys.split("")).map((char, index) => {
 			return /* @__PURE__ */ jsx("kbd", {
-				className: clsx(["min-w-[2ch] text-center font-sans text-zinc-400 capitalize group-data-focus:text-white forced-colors:group-data-focus:text-[HighlightText]", index > 0 && char.length > 1 && "pl-1"]),
+				className: cn(["min-w-[2ch] text-center font-sans text-zinc-400 capitalize group-data-focus:text-white forced-colors:group-data-focus:text-[HighlightText]", index > 0 && char.length > 1 && "pl-1"]),
 				children: char
 			}, `${char}-${index}`);
 		})
@@ -1913,21 +1947,21 @@ function Fieldset({ className, disabled, ...props }) {
 	return /* @__PURE__ */ jsx("fieldset", {
 		disabled,
 		...props,
-		className: clsx(className, "*:data-[slot=text]:mt-1 [&>*+[data-slot=control]]:mt-6")
+		className: cn(className, "*:data-[slot=text]:mt-1 [&>*+[data-slot=control]]:mt-6")
 	});
 }
 function Legend({ className, ...props }) {
 	return /* @__PURE__ */ jsx("legend", {
 		"data-slot": "legend",
 		...props,
-		className: clsx(className, "text-base/6 font-semibold text-zinc-950 data-disabled:opacity-50 sm:text-sm/6 dark:text-white")
+		className: cn(className, "text-base/6 font-semibold text-zinc-950 data-disabled:opacity-50 sm:text-sm/6 dark:text-white")
 	});
 }
 function FieldGroup({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "control",
 		...props,
-		className: clsx(className, "space-y-8")
+		className: cn(className, "space-y-8")
 	});
 }
 function Field({ className, disabled, ...props }) {
@@ -1936,7 +1970,7 @@ function Field({ className, disabled, ...props }) {
 		children: /* @__PURE__ */ jsx("div", {
 			...props,
 			"data-disabled": disabled ? "" : void 0,
-			className: clsx(className, "[&>[data-slot=label]+[data-slot=control]]:mt-3", "[&>[data-slot=label]+[data-slot=description]]:mt-1", "[&>[data-slot=description]+[data-slot=control]]:mt-3", "[&>[data-slot=control]+[data-slot=description]]:mt-3", "[&>[data-slot=control]+[data-slot=error]]:mt-3", "*:data-[slot=label]:font-medium")
+			className: cn(className, "[&>[data-slot=label]+[data-slot=control]]:mt-3", "[&>[data-slot=label]+[data-slot=description]]:mt-1", "[&>[data-slot=description]+[data-slot=control]]:mt-3", "[&>[data-slot=control]+[data-slot=description]]:mt-3", "[&>[data-slot=control]+[data-slot=error]]:mt-3", "*:data-[slot=label]:font-medium")
 		})
 	});
 }
@@ -1946,7 +1980,7 @@ function Label({ className, ...props }) {
 		"data-slot": "label",
 		...fieldLabelProps,
 		...props,
-		className: clsx(className, "text-base/6 text-zinc-950 select-none data-disabled:opacity-50 sm:text-sm/6 dark:text-white")
+		className: cn(className, "text-base/6 text-zinc-950 select-none data-disabled:opacity-50 sm:text-sm/6 dark:text-white")
 	});
 }
 function Description({ className, ...props }) {
@@ -1955,7 +1989,7 @@ function Description({ className, ...props }) {
 		"data-slot": "description",
 		...fieldDescriptionProps,
 		...props,
-		className: clsx(className, "text-base/6 text-zinc-500 data-disabled:opacity-50 sm:text-sm/6 dark:text-zinc-400")
+		className: cn(className, "text-base/6 text-zinc-500 data-disabled:opacity-50 sm:text-sm/6 dark:text-zinc-400")
 	});
 }
 function ErrorMessage({ className, ...props }) {
@@ -1964,7 +1998,7 @@ function ErrorMessage({ className, ...props }) {
 		"data-slot": "error",
 		...fieldErrorProps,
 		...props,
-		className: clsx(className, "text-base/6 text-red-600 data-disabled:opacity-50 sm:text-sm/6 dark:text-red-500")
+		className: cn(className, "text-base/6 text-red-600 data-disabled:opacity-50 sm:text-sm/6 dark:text-red-500")
 	});
 }
 //#endregion
@@ -1972,7 +2006,7 @@ function ErrorMessage({ className, ...props }) {
 function InputGroup({ children }) {
 	return /* @__PURE__ */ jsx("span", {
 		"data-slot": "control",
-		className: clsx("relative isolate block", "has-[[data-slot=icon]:first-child]:[&_input]:pl-10 has-[[data-slot=icon]:last-child]:[&_input]:pr-10 sm:has-[[data-slot=icon]:first-child]:[&_input]:pl-8 sm:has-[[data-slot=icon]:last-child]:[&_input]:pr-8", "*:data-[slot=icon]:pointer-events-none *:data-[slot=icon]:absolute *:data-[slot=icon]:top-3 *:data-[slot=icon]:z-10 *:data-[slot=icon]:size-5 sm:*:data-[slot=icon]:top-2.5 sm:*:data-[slot=icon]:size-4", "[&>[data-slot=icon]:first-child]:left-3 sm:[&>[data-slot=icon]:first-child]:left-2.5 [&>[data-slot=icon]:last-child]:right-3 sm:[&>[data-slot=icon]:last-child]:right-2.5", "*:data-[slot=icon]:text-zinc-500 dark:*:data-[slot=icon]:text-zinc-400"),
+		className: cn("relative isolate block", "has-[[data-slot=icon]:first-child]:[&_input]:pl-10 has-[[data-slot=icon]:last-child]:[&_input]:pr-10 sm:has-[[data-slot=icon]:first-child]:[&_input]:pl-8 sm:has-[[data-slot=icon]:last-child]:[&_input]:pr-8", "*:data-[slot=icon]:pointer-events-none *:data-[slot=icon]:absolute *:data-[slot=icon]:top-3 *:data-[slot=icon]:z-10 *:data-[slot=icon]:size-5 sm:*:data-[slot=icon]:top-2.5 sm:*:data-[slot=icon]:size-4", "[&>[data-slot=icon]:first-child]:left-3 sm:[&>[data-slot=icon]:first-child]:left-2.5 [&>[data-slot=icon]:last-child]:right-3 sm:[&>[data-slot=icon]:last-child]:right-2.5", "*:data-[slot=icon]:text-zinc-500 dark:*:data-[slot=icon]:text-zinc-400"),
 		children
 	});
 }
@@ -1988,7 +2022,7 @@ function Input({ className, disabled, invalid, ref, ...props }) {
 	const fieldProps = useFieldControlProps();
 	return /* @__PURE__ */ jsx("span", {
 		"data-slot": "control",
-		className: clsx([
+		className: cn([
 			className,
 			"relative block w-full",
 			"before:absolute before:inset-px before:rounded-[calc(var(--radius-lg)-1px)] before:bg-white before:shadow-sm",
@@ -2004,7 +2038,7 @@ function Input({ className, disabled, invalid, ref, ...props }) {
 			...fieldProps,
 			"data-invalid": invalid ? "" : void 0,
 			"data-disabled": disabled ? "" : void 0,
-			className: clsx([
+			className: cn([
 				props.type && dateTypes.includes(props.type) && [
 					"[&::-webkit-datetime-edit-fields-wrapper]:p-0",
 					"[&::-webkit-date-and-time-value]:min-h-[1.5em]",
@@ -2036,13 +2070,13 @@ function Input({ className, disabled, invalid, ref, ...props }) {
 function Kbd({ className, children, ...props }) {
 	return /* @__PURE__ */ jsx("kbd", {
 		...props,
-		className: clsx("inline-flex items-center rounded border border-zinc-300 bg-zinc-100 px-1.5 py-0.5 font-mono text-xs font-medium text-zinc-700 dark:border-zinc-600 dark:bg-zinc-800 dark:text-zinc-300", className),
+		className: cn("inline-flex items-center rounded border border-zinc-300 bg-zinc-100 px-1.5 py-0.5 font-mono text-xs font-medium text-zinc-700 dark:border-zinc-600 dark:bg-zinc-800 dark:text-zinc-300", className),
 		children
 	});
 }
 function KbdShortcut({ keys, separator = "+", className }) {
 	return /* @__PURE__ */ jsx("span", {
-		className: clsx("inline-flex items-center gap-1", className),
+		className: cn("inline-flex items-center gap-1", className),
 		children: keys.map((key, i) => /* @__PURE__ */ jsxs("span", {
 			className: "inline-flex items-center gap-1",
 			children: [/* @__PURE__ */ jsx(Kbd, { children: key }), i < keys.length - 1 && /* @__PURE__ */ jsx("span", {
@@ -2227,7 +2261,7 @@ function Listbox({ className, placeholder, autoFocus = false, "aria-label": aria
 			setOpen(true);
 		}
 	}, [disabled]);
-	const selectedSharedClasses = clsx("flex min-w-0 items-center", "*:data-[slot=icon]:size-5 *:data-[slot=icon]:shrink-0 sm:*:data-[slot=icon]:size-4", "*:data-[slot=icon]:text-zinc-500 group-data-focus/option:*:data-[slot=icon]:text-white dark:*:data-[slot=icon]:text-zinc-400", "forced-colors:*:data-[slot=icon]:text-[CanvasText] forced-colors:group-data-focus/option:*:data-[slot=icon]:text-[Canvas]", "*:data-[slot=avatar]:-mx-0.5 *:data-[slot=avatar]:size-6 sm:*:data-[slot=avatar]:size-5");
+	const selectedSharedClasses = cn("flex min-w-0 items-center", "*:data-[slot=icon]:size-5 *:data-[slot=icon]:shrink-0 sm:*:data-[slot=icon]:size-4", "*:data-[slot=icon]:text-zinc-500 group-data-focus/option:*:data-[slot=icon]:text-white dark:*:data-[slot=icon]:text-zinc-400", "forced-colors:*:data-[slot=icon]:text-[CanvasText] forced-colors:group-data-focus/option:*:data-[slot=icon]:text-[Canvas]", "*:data-[slot=avatar]:-mx-0.5 *:data-[slot=avatar]:size-6 sm:*:data-[slot=avatar]:size-5");
 	const displayContent = selectedContent != null ? /* @__PURE__ */ jsx("span", {
 		className: selectedSharedClasses,
 		children: selectedContent
@@ -2259,7 +2293,7 @@ function Listbox({ className, placeholder, autoFocus = false, "aria-label": aria
 				disabled,
 				onClick: handleButtonClick,
 				onKeyDown: handleButtonKeyDown,
-				className: clsx([
+				className: cn([
 					className,
 					"group relative block w-full",
 					"before:absolute before:inset-px before:rounded-[calc(var(--radius-lg)-1px)] before:bg-white before:shadow-sm",
@@ -2269,7 +2303,7 @@ function Listbox({ className, placeholder, autoFocus = false, "aria-label": aria
 					"data-disabled:opacity-50 data-disabled:before:bg-zinc-950/5 data-disabled:before:shadow-none"
 				]),
 				children: [/* @__PURE__ */ jsx("span", {
-					className: clsx([
+					className: cn([
 						"relative block w-full appearance-none rounded-lg py-[calc(--spacing(2.5)-1px)] sm:py-[calc(--spacing(1.5)-1px)]",
 						"min-h-11 sm:min-h-9",
 						"pr-[calc(--spacing(7)-1px)] pl-[calc(--spacing(3.5)-1px)] sm:pl-[calc(--spacing(3)-1px)]",
@@ -2313,7 +2347,7 @@ function Listbox({ className, placeholder, autoFocus = false, "aria-label": aria
 				"aria-labelledby": buttonId,
 				tabIndex: -1,
 				onKeyDown: handleOptionsKeyDown,
-				className: clsx("[--anchor-offset:-1.625rem] [--anchor-padding:--spacing(4)] sm:[--anchor-offset:-1.375rem]", "isolate w-max min-w-[calc(var(--button-width)+1.75rem)] scroll-py-1 rounded-xl p-1 select-none", "outline outline-transparent focus:outline-hidden", "overflow-y-scroll overscroll-contain", "bg-white/75 backdrop-blur-xl dark:bg-zinc-800/75", "shadow-lg ring-1 ring-zinc-950/10 dark:ring-white/10 dark:ring-inset", "transition-opacity duration-100 ease-in data-closed:data-leave:opacity-0 data-transition:pointer-events-none"),
+				className: cn("[--anchor-offset:-1.625rem] [--anchor-padding:--spacing(4)] sm:[--anchor-offset:-1.375rem]", "isolate w-max min-w-[calc(var(--button-width)+1.75rem)] scroll-py-1 rounded-xl p-1 select-none", "outline outline-transparent focus:outline-hidden", "overflow-y-scroll overscroll-contain", "bg-white/75 backdrop-blur-xl dark:bg-zinc-800/75", "shadow-lg ring-1 ring-zinc-950/10 dark:ring-white/10 dark:ring-inset", "transition-opacity duration-100 ease-in data-closed:data-leave:opacity-0 data-transition:pointer-events-none"),
 				style: {
 					...popoverProps.style,
 					minWidth: triggerRef.current ? `${triggerRef.current.getBoundingClientRect().width + 28}px` : void 0
@@ -2337,7 +2371,7 @@ function ListboxOption({ children, className, value: optionValue, disabled: opti
 		ctx.registerOption,
 		ctx
 	]);
-	const sharedClasses = clsx("flex min-w-0 items-center", "*:data-[slot=icon]:size-5 *:data-[slot=icon]:shrink-0 sm:*:data-[slot=icon]:size-4", "*:data-[slot=icon]:text-zinc-500 group-data-focus/option:*:data-[slot=icon]:text-white dark:*:data-[slot=icon]:text-zinc-400", "forced-colors:*:data-[slot=icon]:text-[CanvasText] forced-colors:group-data-focus/option:*:data-[slot=icon]:text-[Canvas]", "*:data-[slot=avatar]:-mx-0.5 *:data-[slot=avatar]:size-6 sm:*:data-[slot=avatar]:size-5");
+	const sharedClasses = cn("flex min-w-0 items-center", "*:data-[slot=icon]:size-5 *:data-[slot=icon]:shrink-0 sm:*:data-[slot=icon]:size-4", "*:data-[slot=icon]:text-zinc-500 group-data-focus/option:*:data-[slot=icon]:text-white dark:*:data-[slot=icon]:text-zinc-400", "forced-colors:*:data-[slot=icon]:text-[CanvasText] forced-colors:group-data-focus/option:*:data-[slot=icon]:text-[Canvas]", "*:data-[slot=avatar]:-mx-0.5 *:data-[slot=avatar]:size-6 sm:*:data-[slot=avatar]:size-5");
 	const handleClick = useCallback(() => {
 		if (optionDisabled) return;
 		ctx.setValue(optionValue);
@@ -2368,7 +2402,7 @@ function ListboxOption({ children, className, value: optionValue, disabled: opti
 		onClick: handleClick,
 		onPointerEnter: handlePointerEnter,
 		tabIndex: -1,
-		className: clsx("group/option grid cursor-default grid-cols-[--spacing(5)_1fr] items-baseline gap-x-2 rounded-lg py-2.5 pr-3.5 pl-2 sm:grid-cols-[--spacing(4)_1fr] sm:py-1.5 sm:pr-3 sm:pl-1.5", "text-base/6 text-zinc-950 sm:text-sm/6 dark:text-white forced-colors:text-[CanvasText]", "outline-hidden data-focus:bg-blue-500 data-focus:text-white", "forced-color-adjust-none forced-colors:data-focus:bg-[Highlight] forced-colors:data-focus:text-[HighlightText]", "data-disabled:opacity-50"),
+		className: cn("group/option grid cursor-default grid-cols-[--spacing(5)_1fr] items-baseline gap-x-2 rounded-lg py-2.5 pr-3.5 pl-2 sm:grid-cols-[--spacing(4)_1fr] sm:py-1.5 sm:pr-3 sm:pl-1.5", "text-base/6 text-zinc-950 sm:text-sm/6 dark:text-white forced-colors:text-[CanvasText]", "outline-hidden data-focus:bg-blue-500 data-focus:text-white", "forced-color-adjust-none forced-colors:data-focus:bg-[Highlight] forced-colors:data-focus:text-[HighlightText]", "data-disabled:opacity-50"),
 		children: [/* @__PURE__ */ jsx("svg", {
 			className: "relative hidden size-5 self-center stroke-current group-data-selected/option:inline sm:size-4",
 			viewBox: "0 0 16 16",
@@ -2381,7 +2415,7 @@ function ListboxOption({ children, className, value: optionValue, disabled: opti
 				strokeLinejoin: "round"
 			})
 		}), /* @__PURE__ */ jsx("span", {
-			className: clsx(className, sharedClasses, "col-start-2"),
+			className: cn(className, sharedClasses, "col-start-2"),
 			children
 		})]
 	});
@@ -2389,13 +2423,13 @@ function ListboxOption({ children, className, value: optionValue, disabled: opti
 function ListboxLabel({ className, ...props }) {
 	return /* @__PURE__ */ jsx("span", {
 		...props,
-		className: clsx(className, "ml-2.5 truncate first:ml-0 sm:ml-2 sm:first:ml-0")
+		className: cn(className, "ml-2.5 truncate first:ml-0 sm:ml-2 sm:first:ml-0")
 	});
 }
 function ListboxDescription({ className, children, ...props }) {
 	return /* @__PURE__ */ jsx("span", {
 		...props,
-		className: clsx(className, "flex flex-1 overflow-hidden text-zinc-500 group-data-focus/option:text-white before:w-2 before:min-w-0 before:shrink dark:text-zinc-400"),
+		className: cn(className, "flex flex-1 overflow-hidden text-zinc-500 group-data-focus/option:text-white before:w-2 before:min-w-0 before:shrink dark:text-zinc-400"),
 		children: /* @__PURE__ */ jsx("span", {
 			className: "flex-1 truncate",
 			children
@@ -2495,14 +2529,14 @@ function LayoutIndicator({ layoutId, ...props }) {
 function Navbar({ className, ...props }) {
 	return /* @__PURE__ */ jsx("nav", {
 		...props,
-		className: clsx(className, "flex flex-1 items-center gap-4 py-2.5")
+		className: cn(className, "flex flex-1 items-center gap-4 py-2.5")
 	});
 }
 function NavbarDivider({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"aria-hidden": "true",
 		...props,
-		className: clsx(className, "h-6 w-px bg-zinc-950/10 dark:bg-white/10")
+		className: cn(className, "h-6 w-px bg-zinc-950/10 dark:bg-white/10")
 	});
 }
 function NavbarSection({ className, ...props }) {
@@ -2510,7 +2544,7 @@ function NavbarSection({ className, ...props }) {
 		id: useId(),
 		children: /* @__PURE__ */ jsx("div", {
 			...props,
-			className: clsx(className, "flex items-center gap-3")
+			className: cn(className, "flex items-center gap-3")
 		})
 	});
 }
@@ -2518,14 +2552,14 @@ function NavbarSpacer({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"aria-hidden": "true",
 		...props,
-		className: clsx(className, "-ml-4 flex-1")
+		className: cn(className, "-ml-4 flex-1")
 	});
 }
 function NavbarItem({ current, className, children, ref, ...props }) {
 	const interactiveProps = useDataInteractive({ disabled: ("disabled" in props ? props.disabled : false) ?? false });
-	const classes = clsx("relative flex min-w-0 items-center gap-3 rounded-lg p-2 text-left text-base/6 font-medium text-zinc-950 sm:text-sm/5", "*:data-[slot=icon]:size-6 *:data-[slot=icon]:shrink-0 *:data-[slot=icon]:fill-zinc-500 sm:*:data-[slot=icon]:size-5", "*:not-nth-2:last:data-[slot=icon]:ml-auto *:not-nth-2:last:data-[slot=icon]:size-5 sm:*:not-nth-2:last:data-[slot=icon]:size-4", "*:data-[slot=avatar]:-m-0.5 *:data-[slot=avatar]:size-7 *:data-[slot=avatar]:[--avatar-radius:var(--radius-md)] sm:*:data-[slot=avatar]:size-6", "data-hover:bg-zinc-950/5 data-hover:*:data-[slot=icon]:fill-zinc-950", "data-active:bg-zinc-950/5 data-active:*:data-[slot=icon]:fill-zinc-950", "dark:text-white dark:*:data-[slot=icon]:fill-zinc-400", "dark:data-hover:bg-white/5 dark:data-hover:*:data-[slot=icon]:fill-white", "dark:data-active:bg-white/5 dark:data-active:*:data-[slot=icon]:fill-white");
+	const classes = cn("relative flex min-w-0 items-center gap-3 rounded-lg p-2 text-left text-base/6 font-medium text-zinc-950 sm:text-sm/5", "*:data-[slot=icon]:size-6 *:data-[slot=icon]:shrink-0 *:data-[slot=icon]:fill-zinc-500 sm:*:data-[slot=icon]:size-5", "*:not-nth-2:last:data-[slot=icon]:ml-auto *:not-nth-2:last:data-[slot=icon]:size-5 sm:*:not-nth-2:last:data-[slot=icon]:size-4", "*:data-[slot=avatar]:-m-0.5 *:data-[slot=avatar]:size-7 *:data-[slot=avatar]:[--avatar-radius:var(--radius-md)] sm:*:data-[slot=avatar]:size-6", "data-hover:bg-zinc-950/5 data-hover:*:data-[slot=icon]:fill-zinc-950", "data-active:bg-zinc-950/5 data-active:*:data-[slot=icon]:fill-zinc-950", "dark:text-white dark:*:data-[slot=icon]:fill-zinc-400", "dark:data-hover:bg-white/5 dark:data-hover:*:data-[slot=icon]:fill-white", "dark:data-active:bg-white/5 dark:data-active:*:data-[slot=icon]:fill-white");
 	return /* @__PURE__ */ jsxs("span", {
-		className: clsx(className, "relative"),
+		className: cn(className, "relative"),
 		children: [current && /* @__PURE__ */ jsx(LayoutIndicator, {
 			layoutId: "current-indicator",
 			className: "absolute inset-x-2 -bottom-2.5 h-0.5 rounded-full bg-zinc-950 dark:bg-white"
@@ -2539,7 +2573,7 @@ function NavbarItem({ current, className, children, ref, ...props }) {
 			type: "button",
 			...props,
 			...interactiveProps,
-			className: clsx("cursor-default", classes),
+			className: cn("cursor-default", classes),
 			"data-current": current ? "true" : void 0,
 			ref,
 			children: /* @__PURE__ */ jsx(TouchTarget, { children })
@@ -2549,7 +2583,7 @@ function NavbarItem({ current, className, children, ref, ...props }) {
 function NavbarLabel({ className, ...props }) {
 	return /* @__PURE__ */ jsx("span", {
 		...props,
-		className: clsx(className, "truncate")
+		className: cn(className, "truncate")
 	});
 }
 //#endregion
@@ -2571,7 +2605,7 @@ function Progress({ value, max = 100, color = "blue", size = "md", label, showVa
 		lg: "h-4"
 	}[size];
 	return /* @__PURE__ */ jsxs("div", {
-		className: clsx("w-full", className),
+		className: cn("w-full", className),
 		children: [(label || showValue) && /* @__PURE__ */ jsxs("div", {
 			className: "mb-1.5 flex items-center justify-between",
 			children: [label && /* @__PURE__ */ jsx("span", {
@@ -2587,9 +2621,9 @@ function Progress({ value, max = 100, color = "blue", size = "md", label, showVa
 			"aria-valuemin": 0,
 			"aria-valuemax": max,
 			"aria-label": label ?? "Progress",
-			className: clsx("w-full overflow-hidden rounded-full bg-zinc-200 dark:bg-zinc-700", heightClass),
+			className: cn("w-full overflow-hidden rounded-full bg-zinc-200 dark:bg-zinc-700", heightClass),
 			children: /* @__PURE__ */ jsx("div", {
-				className: clsx("h-full rounded-full transition-all duration-300 ease-in-out", trackClasses[color]),
+				className: cn("h-full rounded-full transition-all duration-300 ease-in-out", trackClasses[color]),
 				style: { width: `${percentage}%` }
 			})
 		})]
@@ -2653,7 +2687,7 @@ function RadioGroup({ className, value: controlledValue, defaultValue, onChange,
 			"data-slot": "control",
 			onKeyDown: handleKeyDown,
 			...props,
-			className: clsx(className, "space-y-3 **:data-[slot=label]:font-normal", "has-data-[slot=description]:space-y-6 has-data-[slot=description]:**:data-[slot=label]:font-medium"),
+			className: cn(className, "space-y-3 **:data-[slot=label]:font-normal", "has-data-[slot=description]:space-y-6 has-data-[slot=description]:**:data-[slot=label]:font-medium"),
 			children
 		})
 	});
@@ -2665,7 +2699,7 @@ function RadioField({ className, disabled, ...props }) {
 			"data-slot": "field",
 			"data-disabled": disabled ? "" : void 0,
 			...props,
-			className: clsx(className, "grid grid-cols-[1.125rem_1fr] gap-x-4 gap-y-1 sm:grid-cols-[1rem_1fr]", "*:data-[slot=control]:col-start-1 *:data-[slot=control]:row-start-1 *:data-[slot=control]:mt-0.75 sm:*:data-[slot=control]:mt-1", "*:data-[slot=label]:col-start-2 *:data-[slot=label]:row-start-1", "*:data-[slot=description]:col-start-2 *:data-[slot=description]:row-start-2", "has-data-[slot=description]:**:data-[slot=label]:font-medium")
+			className: cn(className, "grid grid-cols-[1.125rem_1fr] gap-x-4 gap-y-1 sm:grid-cols-[1rem_1fr]", "*:data-[slot=control]:col-start-1 *:data-[slot=control]:row-start-1 *:data-[slot=control]:mt-0.75 sm:*:data-[slot=control]:mt-1", "*:data-[slot=label]:col-start-2 *:data-[slot=label]:row-start-1", "*:data-[slot=description]:col-start-2 *:data-[slot=description]:row-start-2", "has-data-[slot=description]:**:data-[slot=label]:font-medium")
 		})
 	});
 }
@@ -2744,14 +2778,14 @@ function Radio({ color = "dark/zinc", className, value, disabled: localDisabled,
 		onKeyDown: handleKeyDown,
 		...interactiveProps,
 		...props,
-		className: clsx(className, "group inline-flex focus:outline-hidden"),
+		className: cn(className, "group inline-flex focus:outline-hidden"),
 		children: [group.name && checked && /* @__PURE__ */ jsx("input", {
 			type: "hidden",
 			name: group.name,
 			value
 		}), /* @__PURE__ */ jsx("span", {
-			className: clsx([base, radioColors[color]]),
-			children: /* @__PURE__ */ jsx("span", { className: clsx("size-full rounded-full border-[4.5px] border-transparent bg-(--radio-indicator) bg-clip-padding", "forced-colors:border-[Canvas] forced-colors:group-data-checked:border-[Highlight]") })
+			className: cn([base, radioColors[color]]),
+			children: /* @__PURE__ */ jsx("span", { className: cn("size-full rounded-full border-[4.5px] border-transparent bg-(--radio-indicator) bg-clip-padding", "forced-colors:border-[Canvas] forced-colors:group-data-checked:border-[Highlight]") })
 		})]
 	});
 }
@@ -2796,11 +2830,11 @@ function Rating({ value: controlledValue, defaultValue = 0, max = 5, onChange, r
 					onClick: () => handleClick(star),
 					onMouseEnter: () => !readOnly && setHovered(star),
 					onMouseLeave: () => !readOnly && setHovered(0),
-					className: clsx(sizeClass, "transition-colors", readOnly ? "cursor-default" : "cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500"),
+					className: cn(sizeClass, "transition-colors", readOnly ? "cursor-default" : "cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500"),
 					children: /* @__PURE__ */ jsx("svg", {
 						viewBox: "0 0 20 20",
 						"aria-hidden": "true",
-						className: clsx("size-full", filled ? "fill-amber-400 text-amber-400" : "fill-zinc-200 text-zinc-200 dark:fill-zinc-700 dark:text-zinc-700"),
+						className: cn("size-full", filled ? "fill-amber-400 text-amber-400" : "fill-zinc-200 text-zinc-200 dark:fill-zinc-700 dark:text-zinc-700"),
 						children: /* @__PURE__ */ jsx("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" })
 					})
 				}, star);
@@ -2955,7 +2989,7 @@ function Select({ className, multiple, disabled, invalid, ref, ...props }) {
 	const fieldProps = useFieldControlProps();
 	return /* @__PURE__ */ jsxs("span", {
 		"data-slot": "control",
-		className: clsx([
+		className: cn([
 			className,
 			"group relative block w-full",
 			"before:absolute before:inset-px before:rounded-[calc(var(--radius-lg)-1px)] before:bg-white before:shadow-sm",
@@ -2972,7 +3006,7 @@ function Select({ className, multiple, disabled, invalid, ref, ...props }) {
 			...fieldProps,
 			"data-invalid": invalid ? "" : void 0,
 			"data-disabled": disabled ? "" : void 0,
-			className: clsx([
+			className: cn([
 				"relative block w-full appearance-none rounded-lg py-[calc(--spacing(2.5)-1px)] sm:py-[calc(--spacing(1.5)-1px)]",
 				multiple ? "px-[calc(--spacing(3.5)-1px)] sm:px-[calc(--spacing(3)-1px)]" : "pr-[calc(--spacing(10)-1px)] pl-[calc(--spacing(3.5)-1px)] sm:pr-[calc(--spacing(9)-1px)] sm:pl-[calc(--spacing(3)-1px)]",
 				"[&_optgroup]:font-semibold",
@@ -3016,25 +3050,25 @@ function useCloseContext() {
 function Sidebar({ className, ...props }) {
 	return /* @__PURE__ */ jsx("nav", {
 		...props,
-		className: clsx(className, "flex h-full min-h-0 flex-col")
+		className: cn(className, "flex h-full min-h-0 flex-col")
 	});
 }
 function SidebarHeader({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		...props,
-		className: clsx(className, "flex flex-col border-b border-zinc-950/5 p-4 dark:border-white/5 [&>[data-slot=section]+[data-slot=section]]:mt-2.5")
+		className: cn(className, "flex flex-col border-b border-zinc-950/5 p-4 dark:border-white/5 [&>[data-slot=section]+[data-slot=section]]:mt-2.5")
 	});
 }
 function SidebarBody({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		...props,
-		className: clsx(className, "flex flex-1 flex-col overflow-y-auto p-4 [&>[data-slot=section]+[data-slot=section]]:mt-8")
+		className: cn(className, "flex flex-1 flex-col overflow-y-auto p-4 [&>[data-slot=section]+[data-slot=section]]:mt-8")
 	});
 }
 function SidebarFooter({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		...props,
-		className: clsx(className, "flex flex-col border-t border-zinc-950/5 p-4 dark:border-white/5 [&>[data-slot=section]+[data-slot=section]]:mt-2.5")
+		className: cn(className, "flex flex-col border-t border-zinc-950/5 p-4 dark:border-white/5 [&>[data-slot=section]+[data-slot=section]]:mt-2.5")
 	});
 }
 function SidebarSection({ className, ...props }) {
@@ -3043,27 +3077,27 @@ function SidebarSection({ className, ...props }) {
 		children: /* @__PURE__ */ jsx("div", {
 			...props,
 			"data-slot": "section",
-			className: clsx(className, "flex flex-col gap-0.5")
+			className: cn(className, "flex flex-col gap-0.5")
 		})
 	});
 }
 function SidebarDivider({ className, ...props }) {
 	return /* @__PURE__ */ jsx("hr", {
 		...props,
-		className: clsx(className, "my-4 border-t border-zinc-950/5 lg:-mx-4 dark:border-white/5")
+		className: cn(className, "my-4 border-t border-zinc-950/5 lg:-mx-4 dark:border-white/5")
 	});
 }
 function SidebarSpacer({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"aria-hidden": "true",
 		...props,
-		className: clsx(className, "mt-8 flex-1")
+		className: cn(className, "mt-8 flex-1")
 	});
 }
 function SidebarHeading({ className, ...props }) {
 	return /* @__PURE__ */ jsx("h3", {
 		...props,
-		className: clsx(className, "mb-1 px-2 text-xs/6 font-medium text-zinc-500 dark:text-zinc-400")
+		className: cn(className, "mb-1 px-2 text-xs/6 font-medium text-zinc-500 dark:text-zinc-400")
 	});
 }
 function SidebarItem({ current, className, children, ref, ...props }) {
@@ -3074,9 +3108,9 @@ function SidebarItem({ current, className, children, ref, ...props }) {
 		propsOnClick?.(e);
 		closeFn?.();
 	}, [propsOnClick, closeFn]);
-	const classes = clsx("flex w-full items-center gap-3 rounded-lg px-2 py-2.5 text-left text-base/6 font-medium text-zinc-950 sm:py-2 sm:text-sm/5", "*:data-[slot=icon]:size-6 *:data-[slot=icon]:shrink-0 *:data-[slot=icon]:fill-zinc-500 sm:*:data-[slot=icon]:size-5", "*:last:data-[slot=icon]:ml-auto *:last:data-[slot=icon]:size-5 sm:*:last:data-[slot=icon]:size-4", "*:data-[slot=avatar]:-m-0.5 *:data-[slot=avatar]:size-7 sm:*:data-[slot=avatar]:size-6", "data-hover:bg-zinc-950/5 data-hover:*:data-[slot=icon]:fill-zinc-950", "data-active:bg-zinc-950/5 data-active:*:data-[slot=icon]:fill-zinc-950", "data-current:*:data-[slot=icon]:fill-zinc-950", "dark:text-white dark:*:data-[slot=icon]:fill-zinc-400", "dark:data-hover:bg-white/5 dark:data-hover:*:data-[slot=icon]:fill-white", "dark:data-active:bg-white/5 dark:data-active:*:data-[slot=icon]:fill-white", "dark:data-current:*:data-[slot=icon]:fill-white");
+	const classes = cn("flex w-full items-center gap-3 rounded-lg px-2 py-2.5 text-left text-base/6 font-medium text-zinc-950 sm:py-2 sm:text-sm/5", "*:data-[slot=icon]:size-6 *:data-[slot=icon]:shrink-0 *:data-[slot=icon]:fill-zinc-500 sm:*:data-[slot=icon]:size-5", "*:last:data-[slot=icon]:ml-auto *:last:data-[slot=icon]:size-5 sm:*:last:data-[slot=icon]:size-4", "*:data-[slot=avatar]:-m-0.5 *:data-[slot=avatar]:size-7 sm:*:data-[slot=avatar]:size-6", "data-hover:bg-zinc-950/5 data-hover:*:data-[slot=icon]:fill-zinc-950", "data-active:bg-zinc-950/5 data-active:*:data-[slot=icon]:fill-zinc-950", "data-current:*:data-[slot=icon]:fill-zinc-950", "dark:text-white dark:*:data-[slot=icon]:fill-zinc-400", "dark:data-hover:bg-white/5 dark:data-hover:*:data-[slot=icon]:fill-white", "dark:data-active:bg-white/5 dark:data-active:*:data-[slot=icon]:fill-white", "dark:data-current:*:data-[slot=icon]:fill-white");
 	return /* @__PURE__ */ jsxs("span", {
-		className: clsx(className, "relative"),
+		className: cn(className, "relative"),
 		children: [current && /* @__PURE__ */ jsx(LayoutIndicator, {
 			layoutId: "current-indicator",
 			className: "absolute inset-y-2 -left-4 w-0.5 rounded-full bg-zinc-950 dark:bg-white"
@@ -3091,7 +3125,7 @@ function SidebarItem({ current, className, children, ref, ...props }) {
 			type: "button",
 			...props,
 			...interactiveProps,
-			className: clsx("cursor-default", classes),
+			className: cn("cursor-default", classes),
 			"data-current": current ? "true" : void 0,
 			ref,
 			children: /* @__PURE__ */ jsx(TouchTarget, { children })
@@ -3101,7 +3135,7 @@ function SidebarItem({ current, className, children, ref, ...props }) {
 function SidebarLabel({ className, ...props }) {
 	return /* @__PURE__ */ jsx("span", {
 		...props,
-		className: clsx(className, "truncate")
+		className: cn(className, "truncate")
 	});
 }
 //#endregion
@@ -3219,7 +3253,7 @@ function Slider({ value: controlledValue, defaultValue = 0, min = 0, max = 100,
 	}, [onChange]);
 	const percentage = (value - min) / (max - min) * 100;
 	return /* @__PURE__ */ jsxs("div", {
-		className: clsx("w-full", className),
+		className: cn("w-full", className),
 		children: [(label || showValue) && /* @__PURE__ */ jsxs("div", {
 			className: "mb-2 flex items-center justify-between",
 			children: [label && /* @__PURE__ */ jsx("label", {
@@ -3240,7 +3274,7 @@ function Slider({ value: controlledValue, defaultValue = 0, min = 0, max = 100,
 			disabled,
 			onChange: handleChange,
 			style: { "--slider-pct": `${percentage}%` },
-			className: clsx("h-2 w-full cursor-pointer appearance-none rounded-full outline-none", "bg-zinc-200 dark:bg-zinc-700", "[&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:appearance-none", "[&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-blue-600 [&::-webkit-slider-thumb]:shadow-sm", "[&::-webkit-slider-thumb]:ring-2 [&::-webkit-slider-thumb]:ring-white [&::-webkit-slider-thumb]:dark:ring-zinc-900", "[&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:appearance-none", "[&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-none [&::-moz-range-thumb]:bg-blue-600", "focus-visible:[&::-webkit-slider-thumb]:outline-2 focus-visible:[&::-webkit-slider-thumb]:outline-offset-2 focus-visible:[&::-webkit-slider-thumb]:outline-blue-500", disabled && "cursor-not-allowed opacity-50")
+			className: cn("h-2 w-full cursor-pointer appearance-none rounded-full outline-none", "bg-zinc-200 dark:bg-zinc-700", "[&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:appearance-none", "[&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-blue-600 [&::-webkit-slider-thumb]:shadow-sm", "[&::-webkit-slider-thumb]:ring-2 [&::-webkit-slider-thumb]:ring-white [&::-webkit-slider-thumb]:dark:ring-zinc-900", "[&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:appearance-none", "[&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-none [&::-moz-range-thumb]:bg-blue-600", "focus-visible:[&::-webkit-slider-thumb]:outline-2 focus-visible:[&::-webkit-slider-thumb]:outline-offset-2 focus-visible:[&::-webkit-slider-thumb]:outline-blue-500", disabled && "cursor-not-allowed opacity-50")
 		})]
 	});
 }
@@ -3344,43 +3378,56 @@ function StackedLayout({ navbar, sidebar, children }) {
 }
 //#endregion
 //#region src/components/stat.tsx
+var trendStyles = {
+	up: { color: "var(--rvui-success, oklch(0.72 0.17 155))" },
+	down: { color: "var(--rvui-error, oklch(0.65 0.2 25))" },
+	neutral: { color: "var(--rvui-text-2, oklch(0.55 0.012 218))" }
+};
+var trendArrow = {
+	up: "↑",
+	down: "↓",
+	neutral: "→"
+};
 function Stat({ label, value, change, trend, description, icon, className }) {
 	return /* @__PURE__ */ jsxs("div", {
-		className: clsx("rounded-xl bg-white p-6 ring-1 ring-zinc-950/5 dark:bg-zinc-900 dark:ring-white/10", className),
+		className: cn("rounded-xl p-6 ring-1", className),
+		style: {
+			backgroundColor: "var(--rvui-surface-1, oklch(0.18 0.006 225))",
+			"--tw-ring-color": "var(--rvui-border-subtle, oklch(0.28 0.006 222 / 0.4))",
+			borderRadius: "var(--rvui-radius-lg, 16px)",
+			transition: "box-shadow var(--rvui-duration-normal, 200ms) var(--rvui-ease, cubic-bezier(0.22, 1, 0.36, 1))"
+		},
 		children: [
 			/* @__PURE__ */ jsxs("div", {
 				className: "flex items-start justify-between",
 				children: [/* @__PURE__ */ jsx("p", {
-					className: "text-sm font-medium text-zinc-500 dark:text-zinc-400",
+					className: "text-sm font-medium",
+					style: { color: "var(--rvui-text-2, oklch(0.55 0.012 218))" },
 					children: label
 				}), icon && /* @__PURE__ */ jsx("div", {
-					className: "rounded-lg bg-zinc-100 p-2 dark:bg-zinc-800",
+					className: "rounded-lg p-2",
+					style: { backgroundColor: "var(--rvui-surface-2, oklch(0.22 0.008 222))" },
 					children: icon
 				})]
 			}),
 			/* @__PURE__ */ jsx("p", {
-				className: "mt-2 text-3xl font-semibold tracking-tight text-zinc-950 dark:text-white",
+				className: "mt-2 text-3xl font-semibold tracking-tight",
+				style: { color: "var(--rvui-text-0, oklch(0.95 0.002 210))" },
 				children: value
 			}),
 			(change || description) && /* @__PURE__ */ jsxs("div", {
 				className: "mt-2 flex items-center gap-2",
 				children: [change && trend && /* @__PURE__ */ jsxs("span", {
-					className: clsx("text-sm font-medium", {
-						up: "text-green-600 dark:text-green-400",
-						down: "text-red-600 dark:text-red-400",
-						neutral: "text-zinc-500 dark:text-zinc-400"
-					}[trend]),
+					className: "text-sm font-medium",
+					style: trendStyles[trend],
 					children: [
-						{
-							up: "↑",
-							down: "↓",
-							neutral: "→"
-						}[trend],
+						trendArrow[trend],
 						" ",
 						change
 					]
 				}), description && /* @__PURE__ */ jsx("span", {
-					className: "text-sm text-zinc-500 dark:text-zinc-400",
+					className: "text-sm",
+					style: { color: "var(--rvui-text-2, oklch(0.55 0.012 218))" },
 					children: description
 				})]
 			})
@@ -3389,7 +3436,7 @@ function Stat({ label, value, change, trend, description, icon, className }) {
 }
 function StatGroup({ className, children }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: clsx("grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4", className),
+		className: cn("grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4", className),
 		children
 	});
 }
@@ -3434,21 +3481,21 @@ function StepperHorizontal({ steps, className }) {
 	return /* @__PURE__ */ jsx("nav", {
 		"aria-label": "Progress",
 		children: /* @__PURE__ */ jsx("ol", {
-			className: clsx("flex items-center", className),
+			className: cn("flex items-center", className),
 			children: steps.map((step, index) => {
 				const isLast = index === steps.length - 1;
 				return /* @__PURE__ */ jsxs("li", {
 					"aria-current": step.status === "current" ? "step" : void 0,
-					className: clsx("flex items-center", !isLast && "flex-1"),
+					className: cn("flex items-center", !isLast && "flex-1"),
 					children: [/* @__PURE__ */ jsxs("div", {
 						className: "flex flex-col items-center gap-1.5",
 						children: [/* @__PURE__ */ jsx(StepIcon, { status: step.status }), /* @__PURE__ */ jsx("span", {
-							className: clsx("text-xs font-medium", step.status === "current" ? "text-blue-600" : step.status === "complete" ? "text-zinc-950 dark:text-white" : "text-zinc-400 dark:text-zinc-500"),
+							className: cn("text-xs font-medium", step.status === "current" ? "text-blue-600" : step.status === "complete" ? "text-zinc-950 dark:text-white" : "text-zinc-400 dark:text-zinc-500"),
 							children: step.label
 						})]
 					}), !isLast && /* @__PURE__ */ jsx("div", {
 						"aria-hidden": "true",
-						className: clsx("mx-3 h-px flex-1", step.status === "complete" ? "bg-blue-600" : "bg-zinc-200 dark:bg-zinc-700")
+						className: cn("mx-3 h-px flex-1", step.status === "complete" ? "bg-blue-600" : "bg-zinc-200 dark:bg-zinc-700")
 					})]
 				}, index);
 			})
@@ -3459,7 +3506,7 @@ function StepperVertical({ steps, className }) {
 	return /* @__PURE__ */ jsx("nav", {
 		"aria-label": "Progress",
 		children: /* @__PURE__ */ jsx("ol", {
-			className: clsx("space-y-0", className),
+			className: cn("space-y-0", className),
 			children: steps.map((step, index) => {
 				const isLast = index === steps.length - 1;
 				return /* @__PURE__ */ jsxs("li", {
@@ -3469,12 +3516,12 @@ function StepperVertical({ steps, className }) {
 						className: "flex flex-col items-center",
 						children: [/* @__PURE__ */ jsx(StepIcon, { status: step.status }), !isLast && /* @__PURE__ */ jsx("div", {
 							"aria-hidden": "true",
-							className: clsx("w-px flex-1", step.status === "complete" ? "bg-blue-600" : "bg-zinc-200 dark:bg-zinc-700")
+							className: cn("w-px flex-1", step.status === "complete" ? "bg-blue-600" : "bg-zinc-200 dark:bg-zinc-700")
 						})]
 					}), /* @__PURE__ */ jsxs("div", {
-						className: clsx("pb-6 pt-1", isLast && "pb-0"),
+						className: cn("pb-6 pt-1", isLast && "pb-0"),
 						children: [/* @__PURE__ */ jsx("p", {
-							className: clsx("text-sm font-medium", step.status === "current" ? "text-blue-600" : step.status === "complete" ? "text-zinc-950 dark:text-white" : "text-zinc-400 dark:text-zinc-500"),
+							className: cn("text-sm font-medium", step.status === "current" ? "text-blue-600" : step.status === "complete" ? "text-zinc-950 dark:text-white" : "text-zinc-400 dark:text-zinc-500"),
 							children: step.label
 						}), step.description && /* @__PURE__ */ jsx("p", {
 							className: "mt-0.5 text-sm text-zinc-500 dark:text-zinc-400",
@@ -3492,7 +3539,7 @@ function SwitchGroup({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "control",
 		...props,
-		className: clsx(className, "space-y-3 **:data-[slot=label]:font-normal", "has-data-[slot=description]:space-y-6 has-data-[slot=description]:**:data-[slot=label]:font-medium")
+		className: cn(className, "space-y-3 **:data-[slot=label]:font-normal", "has-data-[slot=description]:space-y-6 has-data-[slot=description]:**:data-[slot=label]:font-medium")
 	});
 }
 function SwitchField({ className, disabled, ...props }) {
@@ -3502,7 +3549,7 @@ function SwitchField({ className, disabled, ...props }) {
 			"data-slot": "field",
 			"data-disabled": disabled ? "" : void 0,
 			...props,
-			className: clsx(className, "grid grid-cols-[1fr_auto] gap-x-8 gap-y-1 sm:grid-cols-[1fr_auto]", "*:data-[slot=control]:col-start-2 *:data-[slot=control]:self-start sm:*:data-[slot=control]:mt-0.5", "*:data-[slot=label]:col-start-1 *:data-[slot=label]:row-start-1", "*:data-[slot=description]:col-start-1 *:data-[slot=description]:row-start-2", "has-data-[slot=description]:**:data-[slot=label]:font-medium")
+			className: cn(className, "grid grid-cols-[1fr_auto] gap-x-8 gap-y-1 sm:grid-cols-[1fr_auto]", "*:data-[slot=control]:col-start-2 *:data-[slot=control]:self-start sm:*:data-[slot=control]:mt-0.5", "*:data-[slot=label]:col-start-1 *:data-[slot=label]:row-start-1", "*:data-[slot=description]:col-start-1 *:data-[slot=description]:row-start-2", "has-data-[slot=description]:**:data-[slot=label]:font-medium")
 		})
 	});
 }
@@ -3550,14 +3597,14 @@ function Switch({ color = "dark/zinc", className, checked: controlledChecked, de
 		onKeyDown: toggleProps.onKeyDown,
 		...interactiveProps,
 		...props,
-		className: clsx(className, "group relative isolate inline-flex h-6 w-10 cursor-default rounded-full p-[3px] sm:h-5 sm:w-8", "transition duration-0 ease-in-out data-changing:duration-200", "forced-colors:outline forced-colors:[--switch-bg:Highlight] dark:forced-colors:[--switch-bg:Highlight]", "bg-zinc-200 ring-1 ring-black/5 ring-inset dark:bg-white/5 dark:ring-white/15", "data-checked:bg-(--switch-bg) data-checked:ring-(--switch-bg-ring) dark:data-checked:bg-(--switch-bg) dark:data-checked:ring-(--switch-bg-ring)", "focus:not-data-focus:outline-hidden data-focus:outline-2 data-focus:outline-offset-2 data-focus:outline-blue-500", "data-hover:ring-black/15 data-hover:data-checked:ring-(--switch-bg-ring)", "dark:data-hover:ring-white/25 dark:data-hover:data-checked:ring-(--switch-bg-ring)", "data-disabled:bg-zinc-200 data-disabled:opacity-50 data-disabled:data-checked:bg-zinc-200 data-disabled:data-checked:ring-black/5", "dark:data-disabled:bg-white/15 dark:data-disabled:data-checked:bg-white/15 dark:data-disabled:data-checked:ring-white/15", colors[color]),
+		className: cn(className, "group relative isolate inline-flex h-6 w-10 cursor-default rounded-full p-[3px] sm:h-5 sm:w-8", "transition duration-0 ease-in-out data-changing:duration-200", "forced-colors:outline forced-colors:[--switch-bg:Highlight] dark:forced-colors:[--switch-bg:Highlight]", "bg-zinc-200 ring-1 ring-black/5 ring-inset dark:bg-white/5 dark:ring-white/15", "data-checked:bg-(--switch-bg) data-checked:ring-(--switch-bg-ring) dark:data-checked:bg-(--switch-bg) dark:data-checked:ring-(--switch-bg-ring)", "focus:not-data-focus:outline-hidden data-focus:outline-2 data-focus:outline-offset-2 data-focus:outline-blue-500", "data-hover:ring-black/15 data-hover:data-checked:ring-(--switch-bg-ring)", "dark:data-hover:ring-white/25 dark:data-hover:data-checked:ring-(--switch-bg-ring)", "data-disabled:bg-zinc-200 data-disabled:opacity-50 data-disabled:data-checked:bg-zinc-200 data-disabled:data-checked:ring-black/5", "dark:data-disabled:bg-white/15 dark:data-disabled:data-checked:bg-white/15 dark:data-disabled:data-checked:ring-white/15", colors[color]),
 		children: [name && /* @__PURE__ */ jsx("input", {
 			type: "hidden",
 			name,
 			value: checked ? value ?? "on" : ""
 		}), /* @__PURE__ */ jsx("span", {
 			"aria-hidden": "true",
-			className: clsx("pointer-events-none relative inline-block size-4.5 rounded-full sm:size-3.5", "translate-x-0 transition duration-200 ease-in-out", "border border-transparent", "bg-white shadow-sm ring-1 ring-black/5", "group-data-checked:bg-(--switch) group-data-checked:shadow-(--switch-shadow) group-data-checked:ring-(--switch-ring)", "group-data-checked:translate-x-4 sm:group-data-checked:translate-x-3", "group-data-checked:group-data-disabled:bg-white group-data-checked:group-data-disabled:shadow-sm group-data-checked:group-data-disabled:ring-black/5")
+			className: cn("pointer-events-none relative inline-block size-4.5 rounded-full sm:size-3.5", "translate-x-0 transition duration-200 ease-in-out", "border border-transparent", "bg-white shadow-sm ring-1 ring-black/5", "group-data-checked:bg-(--switch) group-data-checked:shadow-(--switch-shadow) group-data-checked:ring-(--switch-ring)", "group-data-checked:translate-x-4 sm:group-data-checked:translate-x-3", "group-data-checked:group-data-disabled:bg-white group-data-checked:group-data-disabled:shadow-sm group-data-checked:group-data-disabled:ring-black/5")
 		})]
 	});
 }
@@ -3611,7 +3658,7 @@ function TabList({ className, children }) {
 		ref: listRef,
 		role: "tablist",
 		onKeyDown: handleKeyDown,
-		className: clsx("flex border-b border-zinc-200 dark:border-zinc-700", className),
+		className: cn("flex border-b border-zinc-200 dark:border-zinc-700", className),
 		children
 	});
 }
@@ -3626,7 +3673,7 @@ function Tab({ id, className, children }) {
 		"aria-selected": isActive,
 		tabIndex: isActive ? 0 : -1,
 		onClick: () => setActiveTab(id),
-		className: clsx(className, "relative -mb-px border-b-2 px-4 py-2.5 text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500", isActive ? "border-blue-600 text-blue-600 dark:border-blue-400 dark:text-blue-400" : "border-transparent text-zinc-500 hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-zinc-200"),
+		className: cn(className, "relative -mb-px border-b-2 px-4 py-2.5 text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500", isActive ? "border-blue-600 text-blue-600 dark:border-blue-400 dark:text-blue-400" : "border-transparent text-zinc-500 hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-zinc-200"),
 		children
 	});
 }
@@ -3638,7 +3685,7 @@ function TabPanel({ id, className, children }) {
 		id: `${baseId}-panel-${id}`,
 		"aria-labelledby": `${baseId}-tab-${id}`,
 		tabIndex: 0,
-		className: clsx("focus-visible:outline-none", className),
+		className: cn("focus-visible:outline-none", className),
 		children
 	});
 }
@@ -3649,7 +3696,7 @@ function Textarea({ className, resizable = true, disabled, invalid, ref, ...prop
 	const fieldProps = useFieldControlProps();
 	return /* @__PURE__ */ jsx("span", {
 		"data-slot": "control",
-		className: clsx([
+		className: cn([
 			className,
 			"relative block w-full",
 			"before:absolute before:inset-px before:rounded-[calc(var(--radius-lg)-1px)] before:bg-white before:shadow-sm",
@@ -3665,7 +3712,7 @@ function Textarea({ className, resizable = true, disabled, invalid, ref, ...prop
 			...fieldProps,
 			"data-invalid": invalid ? "" : void 0,
 			"data-disabled": disabled ? "" : void 0,
-			className: clsx([
+			className: cn([
 				"relative block h-full w-full appearance-none rounded-lg px-[calc(--spacing(3.5)-1px)] py-[calc(--spacing(2.5)-1px)] sm:px-[calc(--spacing(3)-1px)] sm:py-[calc(--spacing(1.5)-1px)]",
 				"text-base/6 text-zinc-950 placeholder:text-zinc-500 sm:text-sm/6 dark:text-white",
 				"border border-zinc-950/10 data-hover:border-zinc-950/20 dark:border-white/10 dark:data-hover:border-white/20",
@@ -3682,13 +3729,13 @@ function Textarea({ className, resizable = true, disabled, invalid, ref, ...prop
 //#region src/components/timeline.tsx
 function Timeline({ className, children }) {
 	return /* @__PURE__ */ jsx("ol", {
-		className: clsx("relative", className),
+		className: cn("relative", className),
 		children
 	});
 }
 function TimelineItem({ icon, date, title, description, isLast = false, className }) {
 	return /* @__PURE__ */ jsxs("li", {
-		className: clsx("relative flex gap-4", !isLast && "pb-8", className),
+		className: cn("relative flex gap-4", !isLast && "pb-8", className),
 		children: [
 			!isLast && /* @__PURE__ */ jsx("div", {
 				"aria-hidden": "true",
@@ -3810,10 +3857,10 @@ function ToastItem({ toast, onRemove }) {
 	}, [toast.duration, handleRemove]);
 	return /* @__PURE__ */ jsxs("div", {
 		role: "alert",
-		className: clsx("pointer-events-auto flex w-full max-w-sm items-start gap-3 rounded-xl p-4 shadow-lg ring-1 transition-all duration-200", variantClasses[variant], isExiting ? "translate-y-2 opacity-0" : "translate-y-0 opacity-100 animate-[slide-in-from-bottom_200ms_ease-out]"),
+		className: cn("pointer-events-auto flex w-full max-w-sm items-start gap-3 rounded-xl p-4 shadow-lg ring-1 transition-all duration-200", variantClasses[variant], isExiting ? "translate-y-2 opacity-0" : "translate-y-0 opacity-100 animate-[slide-in-from-bottom_200ms_ease-out]"),
 		children: [
 			variant !== "default" && /* @__PURE__ */ jsx("span", {
-				className: clsx("mt-0.5 text-sm font-bold", variantIconClasses[variant]),
+				className: cn("mt-0.5 text-sm font-bold", variantIconClasses[variant]),
 				children: variantIcons[variant]
 			}),
 			/* @__PURE__ */ jsxs("div", {
@@ -3882,12 +3929,96 @@ function Tooltip({ content, side = "top", className, delay = 200, children }) {
 		children: [children, visible && /* @__PURE__ */ jsx("span", {
 			id,
 			role: "tooltip",
-			className: clsx("pointer-events-none absolute z-50 w-max max-w-xs rounded-lg bg-zinc-950 px-2.5 py-1.5 text-xs text-white shadow-lg dark:bg-zinc-700", sideClasses[side], className),
+			className: cn("pointer-events-none absolute z-50 w-max max-w-xs rounded-lg bg-zinc-950 px-2.5 py-1.5 text-xs text-white shadow-lg dark:bg-zinc-700", sideClasses[side], className),
 			children: content
 		})]
 	});
 }
 //#endregion
-export { NavbarSpacer as $, CheckboxGroup as $t, CloseContext as A, Accordion as An, useRovingTabindex as At, SelectSeparator as B, DialogTitle as Bt, SidebarFooter as C, Text as Cn, DropdownHeading as Ct, SidebarLabel as D, useScrollLock as Dn, DropdownSection as Dt, SidebarItem as E, useTransition as En, DropdownMenu as Et, SelectGroup as F, Divider as Ft, RadioField as G, ComboboxDescription as Gt, SelectValue as H, DescriptionList as Ht, SelectItem as I, Dialog as It, Navbar as J, usePopover as Jt, RadioGroup as K, ComboboxLabel as Kt, SelectLabel as L, DialogActions as Lt, Select as M, DrawerBody as Mt, Select$1 as N, DrawerFooter as Nt, SidebarSection as O, useFocusTrap as On, DropdownShortcut as Ot, SelectContent as P, DrawerHeader as Pt, NavbarSection as Q, CheckboxField as Qt, SelectScrollDownButton as R, DialogBody as Rt, SidebarDivider as S, AlertTitle as Sn, DropdownHeader as St, SidebarHeading as T, useDataInteractive as Tn, DropdownLabel as Tt, Rating as U, DescriptionTerm as Ut, SelectTrigger as V, DescriptionDetails as Vt, Radio as W, Combobox as Wt, NavbarItem as X, CodeBlock as Xt, NavbarDivider as Y, useClickOutside as Yt, NavbarLabel as Z, Checkbox as Zt, StackedLayout as _, TouchTarget as _n, Legend as _t, TimelineItem as a, useFieldDescriptionProps as an, ListboxLabel as at, Sidebar as b, AlertBody as bn, DropdownDescription as bt, TabList as c, Callout as cn, KbdShortcut as ct, Switch as d, Badge as dn, Description as dt, useToggle as en, LayoutGroup as et, SwitchField as f, BadgeButton as fn, ErrorMessage as ft, StatGroup as g, Button as gn, Label as gt, Stat as h, AvatarButton as hn, Fieldset as ht, Timeline as i, useFieldControlProps as in, ListboxDescription as it, useCloseContext as j, AccordionItem as jn, Drawer as jt, SidebarSpacer as k, useEscapeKey as kn, useTypeAhead as kt, TabPanel as l, Checkbox$1 as ln, Input as lt, Stepper as m, Avatar as mn, FieldGroup as mt, ToastProvider as n, FieldProvider as nn, useLayoutAnimation as nt, Textarea as o, useFieldErrorProps as on, ListboxOption as ot, SwitchGroup as p, AvatarGroup as pn, Field as pt, Progress as q, ComboboxOption as qt, useToast as r, useFieldContext as rn, Listbox as rt, Tab as s, useFieldLabelProps as sn, Kbd as st, Tooltip as t, useControllableState as tn, LayoutIndicator as tt, Tabs as u, CheckboxIndicator as un, InputGroup as ut, Slider as v, Alert as vn, Dropdown as vt, SidebarHeader as w, Link as wn, DropdownItem as wt, SidebarBody as x, AlertDescription as xn, DropdownDivider as xt, SidebarLayout as y, AlertActions as yn, DropdownButton as yt, SelectScrollUpButton as z, DialogDescription as zt };
+//#region src/hooks/use-theme.ts
+var STORAGE_KEY = "rvui-theme";
+var DATA_ATTR = "data-theme";
+/** Listeners for theme changes across components */
+var listeners = /* @__PURE__ */ new Set();
+function notifyListeners() {
+	for (const listener of listeners) listener();
+}
+/** Resolve 'system' to 'light' or 'dark' based on media query */
+function resolveSystemTheme() {
+	if (typeof window === "undefined") return "dark";
+	return window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";
+}
+/** Read stored preference or default to 'system' */
+function getStoredTheme() {
+	if (typeof window === "undefined") return "system";
+	try {
+		const stored = localStorage.getItem(STORAGE_KEY);
+		if (stored === "light" || stored === "dark" || stored === "system") return stored;
+	} catch {}
+	return "system";
+}
+/** Apply theme to the document element */
+function applyTheme(theme) {
+	if (typeof document === "undefined") return;
+	const resolved = theme === "system" ? resolveSystemTheme() : theme;
+	document.documentElement.setAttribute(DATA_ATTR, resolved);
+}
+/** Store and apply theme, notify all subscribers */
+function setTheme(theme) {
+	try {
+		localStorage.setItem(STORAGE_KEY, theme);
+	} catch {}
+	applyTheme(theme);
+	notifyListeners();
+}
+/** Get the current snapshot for useSyncExternalStore */
+function getSnapshot() {
+	return getStoredTheme();
+}
+function getServerSnapshot() {
+	return "system";
+}
+function subscribe(listener) {
+	listeners.add(listener);
+	return () => listeners.delete(listener);
+}
+/**
+* Hook to read and set the current theme.
+*
+* Persists preference to localStorage under `rvui-theme`.
+* Applies `data-theme` attribute to the document element.
+* Supports 'light', 'dark', and 'system' (auto-detect).
+*
+* @example
+* ```tsx
+* const { theme, resolvedTheme, setTheme } = useTheme();
+* <button onClick={() => setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')}>
+*   Toggle theme
+* </button>
+* ```
+*/
+function useTheme() {
+	const theme = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+	const resolved = theme === "system" ? resolveSystemTheme() : theme;
+	useEffect(() => {
+		applyTheme(theme);
+		const mq = window.matchMedia("(prefers-color-scheme: light)");
+		const handleChange = () => {
+			if (getStoredTheme() === "system") {
+				applyTheme("system");
+				notifyListeners();
+			}
+		};
+		mq.addEventListener("change", handleChange);
+		return () => mq.removeEventListener("change", handleChange);
+	}, [theme]);
+	return {
+		theme,
+		resolvedTheme: resolved,
+		setTheme: useCallback((t) => setTheme(t), [])
+	};
+}
+//#endregion
+export { NavbarSection as $, CheckboxField as $t, SidebarSpacer as A, useTransition as An, useTypeAhead as At, SelectScrollUpButton as B, DialogDescription as Bt, SidebarDivider as C, AlertTitle as Cn, DropdownHeader as Ct, SidebarItem as D, TextLink as Dn, DropdownMenu as Dt, SidebarHeading as E, Text as En, DropdownLabel as Et, SelectContent as F, AccordionItem as Fn, DrawerHeader as Ft, Radio as G, Combobox as Gt, SelectTrigger as H, DescriptionDetails as Ht, SelectGroup as I, Divider as It, Progress as J, ComboboxOption as Jt, RadioField as K, ComboboxDescription as Kt, SelectItem as L, Dialog as Lt, useCloseContext as M, useFocusTrap as Mn, Drawer as Mt, Select as N, useEscapeKey as Nn, DrawerBody as Nt, SidebarLabel as O, Link as On, DropdownSection as Ot, Select$1 as P, Accordion as Pn, DrawerFooter as Pt, NavbarLabel as Q, Checkbox as Qt, SelectLabel as R, DialogActions as Rt, SidebarBody as S, AlertDescription as Sn, DropdownDivider as St, SidebarHeader as T, Strong as Tn, DropdownItem as Tt, SelectValue as U, DescriptionList as Ut, SelectSeparator as V, DialogTitle as Vt, Rating as W, DescriptionTerm as Wt, NavbarDivider as X, useClickOutside as Xt, Navbar as Y, usePopover as Yt, NavbarItem as Z, CodeBlock as Zt, StatGroup as _, Button as _n, Label as _t, Timeline as a, useFieldControlProps as an, ListboxDescription as at, SidebarLayout as b, AlertActions as bn, DropdownButton as bt, Tab as c, useFieldLabelProps as cn, Kbd as ct, Tabs as d, CheckboxIndicator as dn, InputGroup as dt, CheckboxGroup as en, NavbarSpacer as et, Switch as f, Badge as fn, Description as ft, Stat as g, AvatarButton as gn, Fieldset as gt, Stepper as h, Avatar as hn, FieldGroup as ht, useToast as i, useFieldContext as in, Listbox as it, CloseContext as j, useScrollLock as jn, useRovingTabindex as jt, SidebarSection as k, useDataInteractive as kn, DropdownShortcut as kt, TabList as l, Callout as ln, KbdShortcut as lt, SwitchGroup as m, AvatarGroup as mn, Field as mt, Tooltip as n, useControllableState as nn, LayoutIndicator as nt, TimelineItem as o, useFieldDescriptionProps as on, ListboxLabel as ot, SwitchField as p, BadgeButton as pn, ErrorMessage as pt, RadioGroup as q, ComboboxLabel as qt, ToastProvider as r, FieldProvider as rn, useLayoutAnimation as rt, Textarea as s, useFieldErrorProps as sn, ListboxOption as st, useTheme as t, useToggle as tn, LayoutGroup as tt, TabPanel as u, Checkbox$1 as un, Input as ut, StackedLayout as v, TouchTarget as vn, Legend as vt, SidebarFooter as w, Code as wn, DropdownHeading as wt, Sidebar as x, AlertBody as xn, DropdownDescription as xt, Slider as y, Alert as yn, Dropdown as yt, SelectScrollDownButton as z, DialogBody as zt };
 
-//# sourceMappingURL=tooltip-DZGP3hO_.js.map
+//# sourceMappingURL=use-theme-QxeZadnD.js.map