@revealui/presentation 0.3.0 → 0.3.3

package/dist/use-theme-QxeZadnD.js

@@ -0,0 +1,4024 @@
+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: cn("divide-y divide-zinc-200 dark:divide-zinc-700", className),
+		children
+	});
+}
+function AccordionItem({ title, defaultOpen = false, className, children }) {
+	const [open, setOpen] = useState(defaultOpen);
+	const id = useId();
+	return /* @__PURE__ */ jsxs("div", {
+		className,
+		children: [/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			id: `${id}-trigger`,
+			"aria-expanded": open,
+			"aria-controls": `${id}-content`,
+			onClick: () => setOpen((prev) => !prev),
+			className: "flex w-full items-center justify-between gap-4 py-4 text-left text-sm font-medium text-zinc-950 transition-colors hover:text-zinc-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 dark:text-white dark:hover:text-zinc-300",
+			children: [/* @__PURE__ */ jsx("span", { children: title }), /* @__PURE__ */ jsx("svg", {
+				"aria-hidden": "true",
+				viewBox: "0 0 16 16",
+				fill: "none",
+				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",
+					strokeWidth: "1.5",
+					strokeLinecap: "round",
+					strokeLinejoin: "round"
+				})
+			})]
+		}), open && /* @__PURE__ */ jsx("section", {
+			id: `${id}-content`,
+			"aria-labelledby": `${id}-trigger`,
+			className: "pb-4 text-sm text-zinc-600 dark:text-zinc-400",
+			children
+		})]
+	});
+}
+//#endregion
+//#region src/hooks/use-escape-key.ts
+function useEscapeKey(onEscape, enabled = true) {
+	const callbackRef = useRef(onEscape);
+	callbackRef.current = onEscape;
+	useEffect(() => {
+		if (!enabled) return;
+		function handleKeyDown(e) {
+			if (e.key === "Escape") {
+				e.stopPropagation();
+				callbackRef.current();
+			}
+		}
+		document.addEventListener("keydown", handleKeyDown);
+		return () => document.removeEventListener("keydown", handleKeyDown);
+	}, [enabled]);
+}
+//#endregion
+//#region src/hooks/use-focus-trap.ts
+var FOCUSABLE_SELECTOR = [
+	"a[href]",
+	"button:not([disabled])",
+	"input:not([disabled]):not([type=\"hidden\"])",
+	"textarea:not([disabled])",
+	"select:not([disabled])",
+	"[tabindex]:not([tabindex=\"-1\"])"
+].join(", ");
+function getFocusableElements(container) {
+	return Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR));
+}
+function useFocusTrap(containerRef, enabled = true) {
+	useEffect(() => {
+		if (!enabled) return;
+		const container = containerRef.current;
+		if (!container) return;
+		const previouslyFocused = document.activeElement;
+		const focusableElements = getFocusableElements(container);
+		if (focusableElements.length > 0) focusableElements[0]?.focus();
+		else {
+			container.setAttribute("tabindex", "-1");
+			container.focus();
+		}
+		function handleKeyDown(e) {
+			if (e.key !== "Tab" || !container) return;
+			const focusable = getFocusableElements(container);
+			if (focusable.length === 0) {
+				e.preventDefault();
+				return;
+			}
+			const first = focusable[0];
+			const last = focusable[focusable.length - 1];
+			if (e.shiftKey && document.activeElement === first) {
+				e.preventDefault();
+				last?.focus();
+			} else if (!e.shiftKey && document.activeElement === last) {
+				e.preventDefault();
+				first?.focus();
+			}
+		}
+		document.addEventListener("keydown", handleKeyDown, true);
+		return () => {
+			document.removeEventListener("keydown", handleKeyDown, true);
+			previouslyFocused?.focus();
+		};
+	}, [containerRef, enabled]);
+}
+//#endregion
+//#region src/hooks/use-scroll-lock.ts
+function useScrollLock(enabled = true) {
+	useEffect(() => {
+		if (!enabled) return;
+		const originalOverflow = document.body.style.overflow;
+		const originalPaddingRight = document.body.style.paddingRight;
+		const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+		document.body.style.overflow = "hidden";
+		if (scrollbarWidth > 0) document.body.style.paddingRight = `${scrollbarWidth}px`;
+		return () => {
+			document.body.style.overflow = originalOverflow;
+			document.body.style.paddingRight = originalPaddingRight;
+		};
+	}, [enabled]);
+}
+//#endregion
+//#region src/hooks/use-transition.ts
+/**
+* Manages CSS transition lifecycle using data attributes.
+*
+* Enter sequence:
+*  1. Mount with `data-closed` + `data-enter` (element in hidden state)
+*  2. Next frame: remove `data-closed` (CSS transition triggers)
+*  3. On transitionend: remove `data-enter`
+*
+* Leave sequence:
+*  1. Add `data-closed` + `data-leave` (CSS transition to hidden state)
+*  2. On transitionend: unmount
+*/
+function useTransition(show) {
+	const nodeRef = useRef(null);
+	const [, setTick] = useState(0);
+	const rerender = useCallback(() => setTick((t) => t + 1), []);
+	const phase = useRef(show ? "visible" : "hidden");
+	const prevShow = useRef(show);
+	const cleanupRef = useRef(null);
+	useEffect(() => {
+		cleanupRef.current?.();
+		cleanupRef.current = null;
+		if (show && !prevShow.current) {
+			phase.current = "enter-from";
+			rerender();
+			const frame1 = requestAnimationFrame(() => {
+				const frame2 = requestAnimationFrame(() => {
+					if (phase.current !== "enter-from") return;
+					phase.current = "enter-to";
+					rerender();
+					const node = nodeRef.current;
+					if (!node) {
+						phase.current = "visible";
+						rerender();
+						return;
+					}
+					let cleaned = false;
+					const done = () => {
+						if (cleaned) return;
+						cleaned = true;
+						phase.current = "visible";
+						rerender();
+					};
+					node.addEventListener("transitionend", done, { once: true });
+					const fallback = setTimeout(done, 500);
+					cleanupRef.current = () => {
+						cleaned = true;
+						node.removeEventListener("transitionend", done);
+						clearTimeout(fallback);
+					};
+				});
+				cleanupRef.current = () => cancelAnimationFrame(frame2);
+			});
+			cleanupRef.current = () => cancelAnimationFrame(frame1);
+		} else if (!show && prevShow.current) {
+			phase.current = "leave";
+			rerender();
+			const node = nodeRef.current;
+			if (!node) {
+				phase.current = "hidden";
+				rerender();
+				prevShow.current = show;
+				return;
+			}
+			let cleaned = false;
+			const done = () => {
+				if (cleaned) return;
+				cleaned = true;
+				phase.current = "hidden";
+				rerender();
+			};
+			node.addEventListener("transitionend", done, { once: true });
+			const fallback = setTimeout(done, 500);
+			cleanupRef.current = () => {
+				cleaned = true;
+				node.removeEventListener("transitionend", done);
+				clearTimeout(fallback);
+			};
+		}
+		prevShow.current = show;
+	}, [show, rerender]);
+	useEffect(() => {
+		return () => {
+			cleanupRef.current?.();
+		};
+	}, []);
+	const p = phase.current;
+	return {
+		mounted: p !== "hidden",
+		nodeRef,
+		transitionProps: {
+			"data-closed": p === "enter-from" || p === "leave" || p === "hidden" ? "" : void 0,
+			"data-enter": p === "enter-from" || p === "enter-to" ? "" : void 0,
+			"data-leave": p === "leave" ? "" : void 0,
+			"data-transition": p === "enter-from" || p === "enter-to" || p === "leave" ? "" : void 0
+		}
+	};
+}
+//#endregion
+//#region src/hooks/use-data-interactive.ts
+function useDataInteractive({ disabled = false } = {}) {
+	const [hover, setHover] = useState(false);
+	const [focus, setFocus] = useState(false);
+	const [active, setActive] = useState(false);
+	const onPointerEnter = useCallback(() => {
+		if (!disabled) setHover(true);
+	}, [disabled]);
+	const onPointerLeave = useCallback(() => {
+		setHover(false);
+		setActive(false);
+	}, []);
+	const onPointerDown = useCallback(() => {
+		if (!disabled) setActive(true);
+	}, [disabled]);
+	const onPointerUp = useCallback(() => {
+		setActive(false);
+	}, []);
+	const onFocus = useCallback((e) => {
+		if (!disabled && e.currentTarget.matches(":focus-visible")) setFocus(true);
+	}, [disabled]);
+	const onBlur = useCallback(() => {
+		setFocus(false);
+	}, []);
+	return {
+		"data-hover": hover ? "" : void 0,
+		"data-focus": focus ? "" : void 0,
+		"data-active": active ? "" : void 0,
+		"data-disabled": disabled ? "" : void 0,
+		onPointerEnter,
+		onPointerLeave,
+		onPointerDown,
+		onPointerUp,
+		onFocus,
+		onBlur
+	};
+}
+//#endregion
+//#region src/components/link.tsx
+function Link({ ref, ...props }) {
+	const interactiveProps = useDataInteractive();
+	return /* @__PURE__ */ jsx("a", {
+		...props,
+		...interactiveProps,
+		ref
+	});
+}
+//#endregion
+//#region src/components/text.tsx
+function Text({ className, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "text",
+		...props,
+		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
+//#region src/components/alert.tsx
+var sizes$1 = {
+	xs: "sm:max-w-xs",
+	sm: "sm:max-w-sm",
+	md: "sm:max-w-md",
+	lg: "sm:max-w-lg",
+	xl: "sm:max-w-xl",
+	"2xl": "sm:max-w-2xl",
+	"3xl": "sm:max-w-3xl",
+	"4xl": "sm:max-w-4xl",
+	"5xl": "sm:max-w-5xl"
+};
+function Alert({ size = "md", className, children, open, onClose }) {
+	const panelRef = useRef(null);
+	const titleId = useId();
+	const backdrop = useTransition(open);
+	const panel = useTransition(open);
+	useScrollLock(open);
+	useFocusTrap(panelRef, open);
+	useEscapeKey(onClose, open);
+	if (!(backdrop.mounted || panel.mounted)) return null;
+	return createPortal(/* @__PURE__ */ jsxs("div", {
+		role: "alertdialog",
+		"aria-modal": "true",
+		"aria-labelledby": titleId,
+		children: [backdrop.mounted && /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"aria-label": "Close alert",
+			ref: backdrop.nodeRef,
+			...backdrop.transitionProps,
+			onClick: onClose,
+			className: "fixed inset-0 flex w-screen justify-center overflow-y-auto bg-zinc-950/15 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"
+		}), panel.mounted && /* @__PURE__ */ jsx("div", {
+			className: "fixed inset-0 w-screen overflow-y-auto pt-6 sm:pt-0",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "grid min-h-full grid-rows-[1fr_auto_1fr] justify-items-center p-8 sm:grid-rows-[1fr_auto_3fr] sm:p-4",
+				children: /* @__PURE__ */ jsx("div", {
+					ref: (node) => {
+						panelRef.current = node;
+						panel.nodeRef.current = node;
+					},
+					...panel.transitionProps,
+					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
+				})
+			})
+		})]
+	}), document.body);
+}
+function AlertTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("h2", {
+		...props,
+		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: cn(className, "mt-2 text-center text-pretty sm:text-left")
+	});
+}
+function AlertBody({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: cn(className, "mt-4")
+	});
+}
+function AlertActions({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		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
+//#region src/components/button-headless.tsx
+var styles = {
+	base: [
+		"relative isolate inline-flex items-baseline justify-center gap-x-2 rounded-lg border text-base/6 font-semibold",
+		"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)] sm:text-sm/6",
+		"focus:not-data-focus:outline-hidden data-focus:outline-2 data-focus:outline-offset-2 data-focus:outline-blue-500",
+		"data-disabled:opacity-50",
+		"*:data-[slot=icon]:-mx-0.5 *:data-[slot=icon]:my-0.5 *:data-[slot=icon]:size-5 *:data-[slot=icon]:shrink-0 *:data-[slot=icon]:self-center *:data-[slot=icon]:text-(--btn-icon) sm:*:data-[slot=icon]:my-1 sm:*:data-[slot=icon]:size-4 forced-colors:[--btn-icon:ButtonText] forced-colors:data-hover:[--btn-icon:ButtonText]"
+	],
+	solid: [
+		"border-transparent bg-(--btn-border)",
+		"dark:bg-(--btn-bg)",
+		"before:absolute before:inset-0 before:-z-10 before:rounded-[calc(var(--radius-lg)-1px)] before:bg-(--btn-bg)",
+		"before:shadow-sm",
+		"dark:before:hidden",
+		"dark:border-white/5",
+		"after:absolute after:inset-0 after:-z-10 after:rounded-[calc(var(--radius-lg)-1px)]",
+		"after:shadow-[inset_0_1px_--theme(--color-white/15%)]",
+		"data-active:after:bg-(--btn-hover-overlay) data-hover:after:bg-(--btn-hover-overlay)",
+		"dark:after:-inset-px dark:after:rounded-lg",
+		"data-disabled:before:shadow-none data-disabled:after:shadow-none"
+	],
+	outline: [
+		"border-zinc-950/10 text-zinc-950 data-active:bg-zinc-950/2.5 data-hover:bg-zinc-950/2.5",
+		"dark:border-white/15 dark:text-white dark:[--btn-bg:transparent] dark:data-active:bg-white/5 dark:data-hover:bg-white/5",
+		"[--btn-icon:var(--color-zinc-500)] data-active:[--btn-icon:var(--color-zinc-700)] data-hover:[--btn-icon:var(--color-zinc-700)] dark:data-active:[--btn-icon:var(--color-zinc-400)] dark:data-hover:[--btn-icon:var(--color-zinc-400)]"
+	],
+	plain: [
+		"border-transparent text-zinc-950 data-active:bg-zinc-950/5 data-hover:bg-zinc-950/5",
+		"dark:text-white dark:data-active:bg-white/10 dark:data-hover:bg-white/10",
+		"[--btn-icon:var(--color-zinc-500)] data-active:[--btn-icon:var(--color-zinc-700)] data-hover:[--btn-icon:var(--color-zinc-700)] dark:[--btn-icon:var(--color-zinc-500)] dark:data-active:[--btn-icon:var(--color-zinc-400)] dark:data-hover:[--btn-icon:var(--color-zinc-400)]"
+	],
+	colors: {
+		"dark/zinc": [
+			"text-white [--btn-bg:var(--color-zinc-900)] [--btn-border:var(--color-zinc-950)]/90 [--btn-hover-overlay:var(--color-white)]/10",
+			"dark:text-white dark:[--btn-bg:var(--color-zinc-600)] dark:[--btn-hover-overlay:var(--color-white)]/5",
+			"[--btn-icon:var(--color-zinc-400)] data-active:[--btn-icon:var(--color-zinc-300)] data-hover:[--btn-icon:var(--color-zinc-300)]"
+		],
+		light: [
+			"text-zinc-950 [--btn-bg:white] [--btn-border:var(--color-zinc-950)]/10 [--btn-hover-overlay:var(--color-zinc-950)]/2.5 data-active:[--btn-border:var(--color-zinc-950)]/15 data-hover:[--btn-border:var(--color-zinc-950)]/15",
+			"dark:text-white dark:[--btn-hover-overlay:var(--color-white)]/5 dark:[--btn-bg:var(--color-zinc-800)]",
+			"[--btn-icon:var(--color-zinc-500)] data-active:[--btn-icon:var(--color-zinc-700)] data-hover:[--btn-icon:var(--color-zinc-700)] dark:[--btn-icon:var(--color-zinc-500)] dark:data-active:[--btn-icon:var(--color-zinc-400)] dark:data-hover:[--btn-icon:var(--color-zinc-400)]"
+		],
+		"dark/white": [
+			"text-white [--btn-bg:var(--color-zinc-900)] [--btn-border:var(--color-zinc-950)]/90 [--btn-hover-overlay:var(--color-white)]/10",
+			"dark:text-zinc-950 dark:[--btn-bg:white] dark:[--btn-hover-overlay:var(--color-zinc-950)]/5",
+			"[--btn-icon:var(--color-zinc-400)] data-active:[--btn-icon:var(--color-zinc-300)] data-hover:[--btn-icon:var(--color-zinc-300)] dark:[--btn-icon:var(--color-zinc-500)] dark:data-active:[--btn-icon:var(--color-zinc-400)] dark:data-hover:[--btn-icon:var(--color-zinc-400)]"
+		],
+		dark: [
+			"text-white [--btn-bg:var(--color-zinc-900)] [--btn-border:var(--color-zinc-950)]/90 [--btn-hover-overlay:var(--color-white)]/10",
+			"dark:[--btn-hover-overlay:var(--color-white)]/5 dark:[--btn-bg:var(--color-zinc-800)]",
+			"[--btn-icon:var(--color-zinc-400)] data-active:[--btn-icon:var(--color-zinc-300)] data-hover:[--btn-icon:var(--color-zinc-300)]"
+		],
+		white: [
+			"text-zinc-950 [--btn-bg:white] [--btn-border:var(--color-zinc-950)]/10 [--btn-hover-overlay:var(--color-zinc-950)]/2.5 data-active:[--btn-border:var(--color-zinc-950)]/15 data-hover:[--btn-border:var(--color-zinc-950)]/15",
+			"dark:[--btn-hover-overlay:var(--color-zinc-950)]/5",
+			"[--btn-icon:var(--color-zinc-400)] data-active:[--btn-icon:var(--color-zinc-500)] data-hover:[--btn-icon:var(--color-zinc-500)]"
+		],
+		zinc: [
+			"text-white [--btn-hover-overlay:var(--color-white)]/10 [--btn-bg:var(--color-zinc-600)] [--btn-border:var(--color-zinc-700)]/90",
+			"dark:[--btn-hover-overlay:var(--color-white)]/5",
+			"[--btn-icon:var(--color-zinc-400)] data-active:[--btn-icon:var(--color-zinc-300)] data-hover:[--btn-icon:var(--color-zinc-300)]"
+		],
+		indigo: ["text-white [--btn-hover-overlay:var(--color-white)]/10 [--btn-bg:var(--color-indigo-500)] [--btn-border:var(--color-indigo-600)]/90", "[--btn-icon:var(--color-indigo-300)] data-active:[--btn-icon:var(--color-indigo-200)] data-hover:[--btn-icon:var(--color-indigo-200)]"],
+		cyan: ["text-cyan-950 [--btn-bg:var(--color-cyan-300)] [--btn-border:var(--color-cyan-400)]/80 [--btn-hover-overlay:var(--color-white)]/25", "[--btn-icon:var(--color-cyan-500)]"],
+		red: ["text-white [--btn-hover-overlay:var(--color-white)]/10 [--btn-bg:var(--color-red-600)] [--btn-border:var(--color-red-700)]/90", "[--btn-icon:var(--color-red-300)] data-active:[--btn-icon:var(--color-red-200)] data-hover:[--btn-icon:var(--color-red-200)]"],
+		orange: ["text-white [--btn-hover-overlay:var(--color-white)]/10 [--btn-bg:var(--color-orange-500)] [--btn-border:var(--color-orange-600)]/90", "[--btn-icon:var(--color-orange-300)] data-active:[--btn-icon:var(--color-orange-200)] data-hover:[--btn-icon:var(--color-orange-200)]"],
+		amber: ["text-amber-950 [--btn-hover-overlay:var(--color-white)]/25 [--btn-bg:var(--color-amber-400)] [--btn-border:var(--color-amber-500)]/80", "[--btn-icon:var(--color-amber-600)]"],
+		yellow: ["text-yellow-950 [--btn-hover-overlay:var(--color-white)]/25 [--btn-bg:var(--color-yellow-300)] [--btn-border:var(--color-yellow-400)]/80", "[--btn-icon:var(--color-yellow-600)] data-active:[--btn-icon:var(--color-yellow-700)] data-hover:[--btn-icon:var(--color-yellow-700)]"],
+		lime: ["text-lime-950 [--btn-hover-overlay:var(--color-white)]/25 [--btn-bg:var(--color-lime-300)] [--btn-border:var(--color-lime-400)]/80", "[--btn-icon:var(--color-lime-600)] data-active:[--btn-icon:var(--color-lime-700)] data-hover:[--btn-icon:var(--color-lime-700)]"],
+		green: ["text-white [--btn-hover-overlay:var(--color-white)]/10 [--btn-bg:var(--color-green-600)] [--btn-border:var(--color-green-700)]/90", "[--btn-icon:var(--color-white)]/60 data-active:[--btn-icon:var(--color-white)]/80 data-hover:[--btn-icon:var(--color-white)]/80"],
+		emerald: ["text-white [--btn-hover-overlay:var(--color-white)]/10 [--btn-bg:var(--color-emerald-600)] [--btn-border:var(--color-emerald-700)]/90", "[--btn-icon:var(--color-white)]/60 data-active:[--btn-icon:var(--color-white)]/80 data-hover:[--btn-icon:var(--color-white)]/80"],
+		teal: ["text-white [--btn-hover-overlay:var(--color-white)]/10 [--btn-bg:var(--color-teal-600)] [--btn-border:var(--color-teal-700)]/90", "[--btn-icon:var(--color-white)]/60 data-active:[--btn-icon:var(--color-white)]/80 data-hover:[--btn-icon:var(--color-white)]/80"],
+		sky: ["text-white [--btn-hover-overlay:var(--color-white)]/10 [--btn-bg:var(--color-sky-500)] [--btn-border:var(--color-sky-600)]/80", "[--btn-icon:var(--color-white)]/60 data-active:[--btn-icon:var(--color-white)]/80 data-hover:[--btn-icon:var(--color-white)]/80"],
+		blue: ["text-white [--btn-hover-overlay:var(--color-white)]/10 [--btn-bg:var(--color-blue-600)] [--btn-border:var(--color-blue-700)]/90", "[--btn-icon:var(--color-blue-400)] data-active:[--btn-icon:var(--color-blue-300)] data-hover:[--btn-icon:var(--color-blue-300)]"],
+		violet: ["text-white [--btn-hover-overlay:var(--color-white)]/10 [--btn-bg:var(--color-violet-500)] [--btn-border:var(--color-violet-600)]/90", "[--btn-icon:var(--color-violet-300)] data-active:[--btn-icon:var(--color-violet-200)] data-hover:[--btn-icon:var(--color-violet-200)]"],
+		purple: ["text-white [--btn-hover-overlay:var(--color-white)]/10 [--btn-bg:var(--color-purple-500)] [--btn-border:var(--color-purple-600)]/90", "[--btn-icon:var(--color-purple-300)] data-active:[--btn-icon:var(--color-purple-200)] data-hover:[--btn-icon:var(--color-purple-200)]"],
+		fuchsia: ["text-white [--btn-hover-overlay:var(--color-white)]/10 [--btn-bg:var(--color-fuchsia-500)] [--btn-border:var(--color-fuchsia-600)]/90", "[--btn-icon:var(--color-fuchsia-300)] data-active:[--btn-icon:var(--color-fuchsia-200)] data-hover:[--btn-icon:var(--color-fuchsia-200)]"],
+		pink: ["text-white [--btn-hover-overlay:var(--color-white)]/10 [--btn-bg:var(--color-pink-500)] [--btn-border:var(--color-pink-600)]/90", "[--btn-icon:var(--color-pink-300)] data-active:[--btn-icon:var(--color-pink-200)] data-hover:[--btn-icon:var(--color-pink-200)]"],
+		rose: ["text-white [--btn-hover-overlay:var(--color-white)]/10 [--btn-bg:var(--color-rose-500)] [--btn-border:var(--color-rose-600)]/90", "[--btn-icon:var(--color-rose-300)] data-active:[--btn-icon:var(--color-rose-200)] data-hover:[--btn-icon:var(--color-rose-200)]"]
+	}
+};
+function Button({ color, outline, plain, className, children, ref, ...props }) {
+	const interactiveProps = useDataInteractive({ disabled: ("disabled" in props ? props.disabled : false) ?? false });
+	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,
+		ref,
+		children: /* @__PURE__ */ jsx(TouchTarget, { children })
+	}) : /* @__PURE__ */ jsx("button", {
+		type: "button",
+		...props,
+		...interactiveProps,
+		className: cn(classes, "cursor-default"),
+		ref,
+		children: /* @__PURE__ */ jsx(TouchTarget, { children })
+	});
+}
+/**
+* Expand the hit area to at least 44x44px on touch devices
+*/
+function TouchTarget({ children }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+		className: "absolute top-1/2 left-1/2 size-[max(100%,2.75rem)] -translate-x-1/2 -translate-y-1/2 pointer-fine:hidden",
+		"aria-hidden": "true"
+	}), children] });
+}
+//#endregion
+//#region src/components/avatar.tsx
+function Avatar({ src = null, square = false, initials, alt = "", className, ...props }) {
+	const title = alt && alt.trim().length > 0 ? alt.trim() : "Avatar";
+	return /* @__PURE__ */ jsxs("span", {
+		"data-slot": "avatar",
+		...props,
+		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",
+			"aria-hidden": alt && alt.trim().length > 0 ? void 0 : "true",
+			children: [/* @__PURE__ */ jsx("title", { children: title }), /* @__PURE__ */ jsx("text", {
+				x: "50%",
+				y: "50%",
+				alignmentBaseline: "middle",
+				dominantBaseline: "middle",
+				textAnchor: "middle",
+				dy: ".125em",
+				children: initials
+			})]
+		}), src && /* @__PURE__ */ jsx("img", {
+			className: "size-full",
+			src,
+			alt
+		})]
+	});
+}
+function AvatarButton({ src, square = false, initials, alt, className, ref, ...props }) {
+	const interactiveProps = useDataInteractive({ disabled: ("disabled" in props ? props.disabled : false) ?? false });
+	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,
+		ref,
+		children: /* @__PURE__ */ jsx(TouchTarget, { children: /* @__PURE__ */ jsx(Avatar, {
+			src,
+			square,
+			initials,
+			alt
+		}) })
+	}) : /* @__PURE__ */ jsx("button", {
+		type: "button",
+		...props,
+		...interactiveProps,
+		className: classes,
+		ref,
+		children: /* @__PURE__ */ jsx(TouchTarget, { children: /* @__PURE__ */ jsx(Avatar, {
+			src,
+			square,
+			initials,
+			alt
+		}) })
+	});
+}
+//#endregion
+//#region src/components/avatar-group.tsx
+function AvatarGroup({ items, max = 5, size = "md", className }) {
+	const sizeClasses = {
+		xs: "size-6",
+		sm: "size-8",
+		md: "size-10",
+		lg: "size-12"
+	};
+	const overlapClass = {
+		xs: "-ml-1.5",
+		sm: "-ml-2",
+		md: "-ml-3",
+		lg: "-ml-4"
+	};
+	const visible = items.slice(0, max);
+	const overflow = items.length - max;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex items-center", className),
+		children: [visible.map((item, i) => {
+			return /* @__PURE__ */ jsx("div", {
+				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,
+					alt: item.alt ?? "",
+					className: "size-full"
+				})
+			}, i);
+		}), overflow > 0 && /* @__PURE__ */ jsxs("div", {
+			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]
+		})]
+	});
+}
+//#endregion
+//#region src/components/badge.tsx
+var colors$2 = {
+	red: "bg-red-500/15 text-red-700 group-data-hover:bg-red-500/25 dark:bg-red-500/10 dark:text-red-400 dark:group-data-hover:bg-red-500/20",
+	orange: "bg-orange-500/15 text-orange-700 group-data-hover:bg-orange-500/25 dark:bg-orange-500/10 dark:text-orange-400 dark:group-data-hover:bg-orange-500/20",
+	amber: "bg-amber-400/20 text-amber-700 group-data-hover:bg-amber-400/30 dark:bg-amber-400/10 dark:text-amber-400 dark:group-data-hover:bg-amber-400/15",
+	yellow: "bg-yellow-400/20 text-yellow-700 group-data-hover:bg-yellow-400/30 dark:bg-yellow-400/10 dark:text-yellow-300 dark:group-data-hover:bg-yellow-400/15",
+	lime: "bg-lime-400/20 text-lime-700 group-data-hover:bg-lime-400/30 dark:bg-lime-400/10 dark:text-lime-300 dark:group-data-hover:bg-lime-400/15",
+	green: "bg-green-500/15 text-green-700 group-data-hover:bg-green-500/25 dark:bg-green-500/10 dark:text-green-400 dark:group-data-hover:bg-green-500/20",
+	emerald: "bg-emerald-500/15 text-emerald-700 group-data-hover:bg-emerald-500/25 dark:bg-emerald-500/10 dark:text-emerald-400 dark:group-data-hover:bg-emerald-500/20",
+	teal: "bg-teal-500/15 text-teal-700 group-data-hover:bg-teal-500/25 dark:bg-teal-500/10 dark:text-teal-300 dark:group-data-hover:bg-teal-500/20",
+	cyan: "bg-cyan-400/20 text-cyan-700 group-data-hover:bg-cyan-400/30 dark:bg-cyan-400/10 dark:text-cyan-300 dark:group-data-hover:bg-cyan-400/15",
+	sky: "bg-sky-500/15 text-sky-700 group-data-hover:bg-sky-500/25 dark:bg-sky-500/10 dark:text-sky-300 dark:group-data-hover:bg-sky-500/20",
+	blue: "bg-blue-500/15 text-blue-700 group-data-hover:bg-blue-500/25 dark:text-blue-400 dark:group-data-hover:bg-blue-500/25",
+	indigo: "bg-indigo-500/15 text-indigo-700 group-data-hover:bg-indigo-500/25 dark:text-indigo-400 dark:group-data-hover:bg-indigo-500/20",
+	violet: "bg-violet-500/15 text-violet-700 group-data-hover:bg-violet-500/25 dark:text-violet-400 dark:group-data-hover:bg-violet-500/20",
+	purple: "bg-purple-500/15 text-purple-700 group-data-hover:bg-purple-500/25 dark:text-purple-400 dark:group-data-hover:bg-purple-500/20",
+	fuchsia: "bg-fuchsia-400/15 text-fuchsia-700 group-data-hover:bg-fuchsia-400/25 dark:bg-fuchsia-400/10 dark:text-fuchsia-400 dark:group-data-hover:bg-fuchsia-400/20",
+	pink: "bg-pink-400/15 text-pink-700 group-data-hover:bg-pink-400/25 dark:bg-pink-400/10 dark:text-pink-400 dark:group-data-hover:bg-pink-400/20",
+	rose: "bg-rose-400/15 text-rose-700 group-data-hover:bg-rose-400/25 dark:bg-rose-400/10 dark:text-rose-400 dark:group-data-hover:bg-rose-400/20",
+	zinc: "bg-zinc-600/10 text-zinc-700 group-data-hover:bg-zinc-600/20 dark:bg-white/5 dark:text-zinc-400 dark:group-data-hover:bg-white/10"
+};
+function Badge({ color = "zinc", className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		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 = 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,
+		ref,
+		children: /* @__PURE__ */ jsx(TouchTarget, { children: /* @__PURE__ */ jsx(Badge, {
+			color,
+			children
+		}) })
+	}) : /* @__PURE__ */ jsx("button", {
+		type: "button",
+		...props,
+		...interactiveProps,
+		className: classes,
+		ref,
+		children: /* @__PURE__ */ jsx(TouchTarget, { children: /* @__PURE__ */ jsx(Badge, {
+			color,
+			children
+		}) })
+	});
+}
+//#endregion
+//#region src/components/Checkbox.tsx
+var CheckboxContext = React.createContext(null);
+function Checkbox$1({ checked, defaultChecked, disabled, onCheckedChange, className, ref, ...props }) {
+	const [internalChecked, setInternalChecked] = React.useState(defaultChecked ?? false);
+	const handleChange = (e) => {
+		if (disabled) return;
+		const newChecked = e.target.checked;
+		setInternalChecked(newChecked);
+		onCheckedChange?.(newChecked);
+	};
+	React.useEffect(() => {
+		if (checked !== void 0) setInternalChecked(checked);
+	}, [checked]);
+	return /* @__PURE__ */ jsx(CheckboxContext.Provider, {
+		value: {
+			state: internalChecked,
+			disabled,
+			onCheckedChange
+		},
+		children: /* @__PURE__ */ jsx("input", {
+			type: "checkbox",
+			disabled,
+			checked: checked !== void 0 ? checked : internalChecked === "indeterminate" ? false : internalChecked,
+			ref: (el) => {
+				if (el) el.indeterminate = internalChecked === "indeterminate";
+				if (ref) if (typeof ref === "function") ref(el);
+				else ref.current = el;
+			},
+			onChange: handleChange,
+			className: cn("peer h-4 w-4 shrink-0 rounded border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground", className),
+			"data-state": internalChecked === "indeterminate" ? "indeterminate" : internalChecked ? "checked" : "unchecked",
+			...props
+		})
+	});
+}
+function CheckboxIndicator({ className, ref, ...props }) {
+	const context = React.use(CheckboxContext);
+	if (!context) throw new Error("CheckboxIndicator must be used within a Checkbox");
+	return /* @__PURE__ */ jsxs("span", {
+		"data-state": context.state === "indeterminate" ? "indeterminate" : context.state ? "checked" : "unchecked",
+		ref,
+		className: cn("flex items-center justify-center text-current", className),
+		...props,
+		children: [context.state === true && "✔", context.state === "indeterminate" && "−"]
+	});
+}
+//#endregion
+//#region src/components/callout.tsx
+var variantStyles = {
+	info: {
+		wrapper: "bg-blue-50 ring-blue-200 dark:bg-blue-950/30 dark:ring-blue-800",
+		icon: "text-blue-600 dark:text-blue-400",
+		iconChar: "i"
+	},
+	warning: {
+		wrapper: "bg-amber-50 ring-amber-200 dark:bg-amber-950/30 dark:ring-amber-800",
+		icon: "text-amber-600 dark:text-amber-400",
+		iconChar: "!"
+	},
+	error: {
+		wrapper: "bg-red-50 ring-red-200 dark:bg-red-950/30 dark:ring-red-800",
+		icon: "text-red-600 dark:text-red-400",
+		iconChar: "✕"
+	},
+	success: {
+		wrapper: "bg-green-50 ring-green-200 dark:bg-green-950/30 dark:ring-green-800",
+		icon: "text-green-600 dark:text-green-400",
+		iconChar: "✓"
+	},
+	tip: {
+		wrapper: "bg-violet-50 ring-violet-200 dark:bg-violet-950/30 dark:ring-violet-800",
+		icon: "text-violet-600 dark:text-violet-400",
+		iconChar: "★"
+	}
+};
+function Callout({ variant = "info", title, icon, className, children }) {
+	const styles = variantStyles[variant];
+	return /* @__PURE__ */ jsx("div", {
+		role: "note",
+		className: cn("rounded-xl p-4 ring-1", styles.wrapper, className),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex gap-3",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: cn("mt-0.5 shrink-0 text-sm font-bold", styles.icon),
+				"aria-hidden": "true",
+				children: icon ?? styles.iconChar
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "min-w-0 flex-1",
+				children: [title && /* @__PURE__ */ jsx("p", {
+					className: "text-sm font-semibold text-zinc-950 dark:text-white",
+					children: title
+				}), /* @__PURE__ */ jsx("div", {
+					className: cn("text-sm text-zinc-700 dark:text-zinc-300", title && "mt-1"),
+					children
+				})]
+			})]
+		})
+	});
+}
+//#endregion
+//#region src/hooks/use-field-context.tsx
+var FieldContext = createContext(null);
+function useFieldContext() {
+	return use(FieldContext);
+}
+function FieldProvider({ children, disabled = false }) {
+	const id = useId();
+	return /* @__PURE__ */ jsx(FieldContext, {
+		value: useMemo(() => ({
+			controlId: `${id}-control`,
+			labelId: `${id}-label`,
+			descriptionId: `${id}-description`,
+			errorId: `${id}-error`,
+			disabled
+		}), [id, disabled]),
+		children
+	});
+}
+/**
+* Returns ARIA props for a form control that participates in a Field.
+* Safe to call outside a Field — returns empty object if no context.
+*/
+function useFieldControlProps() {
+	const ctx = useFieldContext();
+	if (!ctx) return {};
+	return {
+		id: ctx.controlId,
+		"aria-labelledby": ctx.labelId,
+		"aria-describedby": ctx.descriptionId,
+		"data-disabled": ctx.disabled ? "" : void 0
+	};
+}
+/**
+* Returns props for a label element within a Field.
+*/
+function useFieldLabelProps() {
+	const ctx = useFieldContext();
+	if (!ctx) return {};
+	return {
+		id: ctx.labelId,
+		htmlFor: ctx.controlId,
+		"data-disabled": ctx.disabled ? "" : void 0
+	};
+}
+/**
+* Returns props for a description element within a Field.
+*/
+function useFieldDescriptionProps() {
+	const ctx = useFieldContext();
+	if (!ctx) return {};
+	return {
+		id: ctx.descriptionId,
+		"data-disabled": ctx.disabled ? "" : void 0
+	};
+}
+/**
+* Returns props for an error message element within a Field.
+*/
+function useFieldErrorProps() {
+	const ctx = useFieldContext();
+	if (!ctx) return {};
+	return {
+		id: ctx.errorId,
+		"data-disabled": ctx.disabled ? "" : void 0
+	};
+}
+//#endregion
+//#region src/hooks/use-controllable-state.ts
+function useControllableState({ value: controlledValue, defaultValue, onChange }) {
+	const isControlled = controlledValue !== void 0;
+	const [internalValue, setInternalValue] = useState(defaultValue);
+	const value = isControlled ? controlledValue : internalValue;
+	const onChangeRef = useRef(onChange);
+	onChangeRef.current = onChange;
+	return [value, useCallback((next) => {
+		const resolvedValue = typeof next === "function" ? next(value) : next;
+		if (!isControlled) setInternalValue(resolvedValue);
+		onChangeRef.current?.(resolvedValue);
+	}, [isControlled, value])];
+}
+//#endregion
+//#region src/hooks/use-toggle.ts
+function useToggle({ checked: controlledChecked, defaultChecked = false, onChange, disabled = false } = {}) {
+	const [checked, setChecked] = useControllableState({
+		value: controlledChecked,
+		defaultValue: defaultChecked,
+		onChange
+	});
+	const toggle = useCallback(() => {
+		if (!disabled) setChecked((prev) => !prev);
+	}, [disabled, setChecked]);
+	const onClick = useCallback(() => {
+		toggle();
+	}, [toggle]);
+	const onKeyDown = useCallback((e) => {
+		if (e.key === " ") {
+			e.preventDefault();
+			toggle();
+		}
+	}, [toggle]);
+	return {
+		checked,
+		toggle,
+		toggleProps: {
+			"aria-checked": checked,
+			"data-checked": checked ? "" : void 0,
+			tabIndex: 0,
+			onClick,
+			onKeyDown
+		}
+	};
+}
+//#endregion
+//#region src/components/checkbox-headless.tsx
+function CheckboxGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "control",
+		...props,
+		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 }) {
+	return /* @__PURE__ */ jsx(FieldProvider, {
+		disabled,
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "field",
+			"data-disabled": disabled ? "" : void 0,
+			...props,
+			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")
+		})
+	});
+}
+var base$1 = [
+	"relative isolate flex size-4.5 items-center justify-center rounded-[0.3125rem] sm:size-4",
+	"before:absolute before:inset-0 before:-z-10 before:rounded-[calc(0.3125rem-1px)] before:bg-white before:shadow-sm",
+	"group-data-checked:before:bg-(--checkbox-checked-bg)",
+	"dark:before:hidden",
+	"dark:bg-white/5 dark:group-data-checked:bg-(--checkbox-checked-bg)",
+	"border border-zinc-950/15 group-data-checked:border-transparent group-data-hover:group-data-checked:border-transparent group-data-hover:border-zinc-950/30 group-data-checked:bg-(--checkbox-checked-border)",
+	"dark:border-white/15 dark:group-data-checked:border-white/5 dark:group-data-hover:group-data-checked:border-white/5 dark:group-data-hover:border-white/30",
+	"after:absolute after:inset-0 after:rounded-[calc(0.3125rem-1px)] after:shadow-[inset_0_1px_--theme(--color-white/15%)]",
+	"dark:after:-inset-px dark:after:hidden dark:after:rounded-[0.3125rem] dark:group-data-checked:after:block",
+	"group-data-focus:outline-2 group-data-focus:outline-offset-2 group-data-focus:outline-blue-500",
+	"group-data-disabled:opacity-50",
+	"group-data-disabled:border-zinc-950/25 group-data-disabled:bg-zinc-950/5 group-data-disabled:[--checkbox-check:var(--color-zinc-950)]/50 group-data-disabled:before:bg-transparent",
+	"dark:group-data-disabled:border-white/20 dark:group-data-disabled:bg-white/2.5 dark:group-data-disabled:[--checkbox-check:var(--color-white)]/50 dark:group-data-checked:group-data-disabled:after:hidden",
+	"forced-colors:[--checkbox-check:HighlightText] forced-colors:[--checkbox-checked-bg:Highlight] forced-colors:group-data-disabled:[--checkbox-check:Highlight]",
+	"dark:forced-colors:[--checkbox-check:HighlightText] dark:forced-colors:[--checkbox-checked-bg:Highlight] dark:forced-colors:group-data-disabled:[--checkbox-check:Highlight]"
+];
+var colors$1 = {
+	"dark/zinc": ["[--checkbox-check:var(--color-white)] [--checkbox-checked-bg:var(--color-zinc-900)] [--checkbox-checked-border:var(--color-zinc-950)]/90", "dark:[--checkbox-checked-bg:var(--color-zinc-600)]"],
+	"dark/white": ["[--checkbox-check:var(--color-white)] [--checkbox-checked-bg:var(--color-zinc-900)] [--checkbox-checked-border:var(--color-zinc-950)]/90", "dark:[--checkbox-check:var(--color-zinc-900)] dark:[--checkbox-checked-bg:var(--color-white)] dark:[--checkbox-checked-border:var(--color-zinc-950)]/15"],
+	white: "[--checkbox-check:var(--color-zinc-900)] [--checkbox-checked-bg:var(--color-white)] [--checkbox-checked-border:var(--color-zinc-950)]/15",
+	dark: "[--checkbox-check:var(--color-white)] [--checkbox-checked-bg:var(--color-zinc-900)] [--checkbox-checked-border:var(--color-zinc-950)]/90",
+	zinc: "[--checkbox-check:var(--color-white)] [--checkbox-checked-bg:var(--color-zinc-600)] [--checkbox-checked-border:var(--color-zinc-700)]/90",
+	red: "[--checkbox-check:var(--color-white)] [--checkbox-checked-bg:var(--color-red-600)] [--checkbox-checked-border:var(--color-red-700)]/90",
+	orange: "[--checkbox-check:var(--color-white)] [--checkbox-checked-bg:var(--color-orange-500)] [--checkbox-checked-border:var(--color-orange-600)]/90",
+	amber: "[--checkbox-check:var(--color-amber-950)] [--checkbox-checked-bg:var(--color-amber-400)] [--checkbox-checked-border:var(--color-amber-500)]/80",
+	yellow: "[--checkbox-check:var(--color-yellow-950)] [--checkbox-checked-bg:var(--color-yellow-300)] [--checkbox-checked-border:var(--color-yellow-400)]/80",
+	lime: "[--checkbox-check:var(--color-lime-950)] [--checkbox-checked-bg:var(--color-lime-300)] [--checkbox-checked-border:var(--color-lime-400)]/80",
+	green: "[--checkbox-check:var(--color-white)] [--checkbox-checked-bg:var(--color-green-600)] [--checkbox-checked-border:var(--color-green-700)]/90",
+	emerald: "[--checkbox-check:var(--color-white)] [--checkbox-checked-bg:var(--color-emerald-600)] [--checkbox-checked-border:var(--color-emerald-700)]/90",
+	teal: "[--checkbox-check:var(--color-white)] [--checkbox-checked-bg:var(--color-teal-600)] [--checkbox-checked-border:var(--color-teal-700)]/90",
+	cyan: "[--checkbox-check:var(--color-cyan-950)] [--checkbox-checked-bg:var(--color-cyan-300)] [--checkbox-checked-border:var(--color-cyan-400)]/80",
+	sky: "[--checkbox-check:var(--color-white)] [--checkbox-checked-bg:var(--color-sky-500)] [--checkbox-checked-border:var(--color-sky-600)]/80",
+	blue: "[--checkbox-check:var(--color-white)] [--checkbox-checked-bg:var(--color-blue-600)] [--checkbox-checked-border:var(--color-blue-700)]/90",
+	indigo: "[--checkbox-check:var(--color-white)] [--checkbox-checked-bg:var(--color-indigo-500)] [--checkbox-checked-border:var(--color-indigo-600)]/90",
+	violet: "[--checkbox-check:var(--color-white)] [--checkbox-checked-bg:var(--color-violet-500)] [--checkbox-checked-border:var(--color-violet-600)]/90",
+	purple: "[--checkbox-check:var(--color-white)] [--checkbox-checked-bg:var(--color-purple-500)] [--checkbox-checked-border:var(--color-purple-600)]/90",
+	fuchsia: "[--checkbox-check:var(--color-white)] [--checkbox-checked-bg:var(--color-fuchsia-500)] [--checkbox-checked-border:var(--color-fuchsia-600)]/90",
+	pink: "[--checkbox-check:var(--color-white)] [--checkbox-checked-bg:var(--color-pink-500)] [--checkbox-checked-border:var(--color-pink-600)]/90",
+	rose: "[--checkbox-check:var(--color-white)] [--checkbox-checked-bg:var(--color-rose-500)] [--checkbox-checked-border:var(--color-rose-600)]/90"
+};
+function Checkbox({ color = "dark/zinc", className, checked: controlledChecked, defaultChecked, onChange, disabled, indeterminate, name, value, ...props }) {
+	const { checked, toggleProps } = useToggle({
+		checked: controlledChecked,
+		defaultChecked,
+		onChange,
+		disabled
+	});
+	const interactiveProps = useDataInteractive({ disabled });
+	const handleKeyDown = useCallback((e) => {
+		if (e.key === " ") {
+			e.preventDefault();
+			toggleProps.onKeyDown(e);
+		}
+	}, [toggleProps]);
+	return /* @__PURE__ */ jsxs("span", {
+		"data-slot": "control",
+		role: "checkbox",
+		"aria-checked": indeterminate ? "mixed" : checked,
+		"data-checked": checked ? "" : void 0,
+		"data-indeterminate": indeterminate ? "" : void 0,
+		"data-disabled": disabled ? "" : void 0,
+		tabIndex: disabled ? void 0 : 0,
+		onClick: disabled ? void 0 : toggleProps.onClick,
+		onKeyDown: disabled ? void 0 : handleKeyDown,
+		...interactiveProps,
+		...props,
+		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: 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",
+				fill: "none",
+				children: [
+					/* @__PURE__ */ jsx("title", { children: "Checkmark" }),
+					/* @__PURE__ */ jsx("path", {
+						className: "opacity-100 group-data-indeterminate:opacity-0",
+						d: "M3 8L6 11L11 3.5",
+						strokeWidth: 2,
+						strokeLinecap: "round",
+						strokeLinejoin: "round"
+					}),
+					/* @__PURE__ */ jsx("path", {
+						className: "opacity-0 group-data-indeterminate:opacity-100",
+						d: "M3 7H11",
+						strokeWidth: 2,
+						strokeLinecap: "round",
+						strokeLinejoin: "round"
+					})
+				]
+			})
+		})]
+	});
+}
+//#endregion
+//#region src/components/code-block.tsx
+function CodeBlock({ code, language, filename, showCopy = true, className }) {
+	const [copied, setCopied] = useState(false);
+	const handleCopy = useCallback(async () => {
+		await navigator.clipboard.writeText(code);
+		setCopied(true);
+		setTimeout(() => setCopied(false), 2e3);
+	}, [code]);
+	return /* @__PURE__ */ jsxs("div", {
+		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", {
+				className: "flex items-center gap-2",
+				children: [filename && /* @__PURE__ */ jsx("span", {
+					className: "text-xs text-zinc-400",
+					children: filename
+				}), language && !filename && /* @__PURE__ */ jsx("span", {
+					className: "rounded bg-zinc-800 px-1.5 py-0.5 text-xs text-zinc-400",
+					children: language
+				})]
+			}), showCopy && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: () => void handleCopy(),
+				"aria-label": copied ? "Copied" : "Copy code",
+				className: "rounded px-2 py-1 text-xs text-zinc-400 transition-colors hover:bg-zinc-800 hover:text-zinc-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500",
+				children: copied ? "Copied!" : "Copy"
+			})]
+		}), /* @__PURE__ */ jsx("pre", {
+			className: "overflow-x-auto p-4 text-sm leading-relaxed text-zinc-300",
+			children: /* @__PURE__ */ jsx("code", { children: code })
+		})]
+	});
+}
+//#endregion
+//#region src/hooks/use-click-outside.ts
+function useClickOutside(refs, onClickOutside, enabled = true) {
+	const callbackRef = useRef(onClickOutside);
+	callbackRef.current = onClickOutside;
+	useEffect(() => {
+		if (!enabled) return;
+		function handlePointerDown(e) {
+			const target = e.target;
+			if ((Array.isArray(refs) ? refs : [refs]).every((ref) => !ref.current?.contains(target))) callbackRef.current();
+		}
+		document.addEventListener("pointerdown", handlePointerDown, true);
+		return () => document.removeEventListener("pointerdown", handlePointerDown, true);
+	}, [refs, enabled]);
+}
+//#endregion
+//#region src/hooks/use-popover.ts
+function computePosition(trigger, popover, anchor, gap, padding) {
+	const triggerRect = trigger.getBoundingClientRect();
+	const popoverRect = popover.getBoundingClientRect();
+	const viewportHeight = window.innerHeight;
+	const viewportWidth = window.innerWidth;
+	let top;
+	let left;
+	let maxHeight;
+	const isTop = anchor.startsWith("top");
+	const spaceBelow = viewportHeight - triggerRect.bottom - gap - padding;
+	const spaceAbove = triggerRect.top - gap - padding;
+	if (anchor === "selection start") {
+		top = triggerRect.top;
+		maxHeight = viewportHeight - top - padding;
+	} else if (isTop) {
+		top = triggerRect.top - popoverRect.height - gap;
+		maxHeight = spaceAbove;
+		if (top < padding && spaceBelow > spaceAbove) {
+			top = triggerRect.bottom + gap;
+			maxHeight = spaceBelow;
+		}
+	} else {
+		top = triggerRect.bottom + gap;
+		maxHeight = spaceBelow;
+		if (top + popoverRect.height > viewportHeight - padding && spaceAbove > spaceBelow) {
+			top = triggerRect.top - popoverRect.height - gap;
+			maxHeight = spaceAbove;
+		}
+	}
+	const isEnd = anchor.endsWith("end");
+	const isStart = anchor.endsWith("start");
+	if (isEnd) left = triggerRect.right - popoverRect.width;
+	else if (isStart || anchor === "selection start") left = triggerRect.left;
+	else left = triggerRect.left + (triggerRect.width - popoverRect.width) / 2;
+	left = Math.max(padding, Math.min(left, viewportWidth - popoverRect.width - padding));
+	top = Math.max(padding, top);
+	return {
+		top,
+		left,
+		maxHeight: Math.max(100, maxHeight)
+	};
+}
+function usePopover({ open, anchor = "bottom", gap = 8, padding = 4 }) {
+	const triggerRef = useRef(null);
+	const popoverRef = useRef(null);
+	const [position, setPosition] = useState({
+		top: 0,
+		left: 0,
+		maxHeight: 300
+	});
+	const updatePosition = useCallback(() => {
+		if (!(triggerRef.current && popoverRef.current && open)) return;
+		setPosition(computePosition(triggerRef.current, popoverRef.current, anchor, gap, padding));
+	}, [
+		open,
+		anchor,
+		gap,
+		padding
+	]);
+	useEffect(() => {
+		if (!open) return;
+		requestAnimationFrame(updatePosition);
+		window.addEventListener("scroll", updatePosition, true);
+		window.addEventListener("resize", updatePosition);
+		return () => {
+			window.removeEventListener("scroll", updatePosition, true);
+			window.removeEventListener("resize", updatePosition);
+		};
+	}, [open, updatePosition]);
+	return {
+		triggerRef,
+		popoverRef,
+		position,
+		popoverProps: { style: {
+			position: "fixed",
+			top: position.top,
+			left: position.left,
+			maxHeight: position.maxHeight,
+			zIndex: 50
+		} }
+	};
+}
+//#endregion
+//#region src/components/combobox.tsx
+var ComboboxContext = createContext(null);
+function useComboboxContext() {
+	const ctx = use(ComboboxContext);
+	if (!ctx) throw new Error("Combobox compound components must be used within <Combobox>");
+	return ctx;
+}
+function Combobox({ options, displayValue, filter, anchor = "bottom", className, placeholder, autoFocus = false, "aria-label": ariaLabel, children, value: controlledValue, defaultValue, onChange, disabled = false, name }) {
+	const [selectedValue, setSelectedValue] = useControllableState({
+		value: controlledValue,
+		defaultValue: defaultValue ?? null,
+		onChange
+	});
+	const [query, setQuery] = useState("");
+	const [isOpen, setIsOpen] = useState(false);
+	const [activeIndex, setActiveIndex] = useState(-1);
+	const inputRef = useRef(null);
+	const controlRef = useRef(null);
+	const listboxId = useId();
+	const filteredOptions = query === "" ? options : options.filter((option) => filter ? filter(option, query) : displayValue(option)?.toLowerCase().includes(query.toLowerCase()));
+	const { triggerRef, popoverRef, popoverProps } = usePopover({
+		open: isOpen,
+		anchor,
+		gap: 8,
+		padding: 16
+	});
+	useEffect(() => {
+		if (controlRef.current) triggerRef.current = controlRef.current;
+	}, [triggerRef]);
+	useEffect(() => {
+		if (autoFocus && !disabled) inputRef.current?.focus();
+	}, [autoFocus, disabled]);
+	const { mounted, nodeRef: transitionRef, transitionProps } = useTransition(isOpen);
+	useClickOutside([controlRef, popoverRef], () => {
+		if (isOpen) close();
+	}, isOpen);
+	useEscapeKey(() => {
+		if (isOpen) close();
+	}, isOpen);
+	const open = useCallback(() => {
+		if (disabled) return;
+		setIsOpen(true);
+		setActiveIndex(-1);
+	}, [disabled]);
+	const close = useCallback(() => {
+		setIsOpen(false);
+		setQuery("");
+		setActiveIndex(-1);
+	}, []);
+	const select = useCallback((value) => {
+		setSelectedValue(value);
+		close();
+		requestAnimationFrame(() => {
+			inputRef.current?.focus();
+		});
+	}, [setSelectedValue, close]);
+	const handleInputKeyDown = useCallback((e) => {
+		switch (e.key) {
+			case "ArrowDown":
+				e.preventDefault();
+				if (!isOpen) open();
+				else setActiveIndex((prev) => prev < filteredOptions.length - 1 ? prev + 1 : 0);
+				break;
+			case "ArrowUp":
+				e.preventDefault();
+				if (!isOpen) open();
+				else setActiveIndex((prev) => prev > 0 ? prev - 1 : filteredOptions.length - 1);
+				break;
+			case "Home":
+				if (isOpen) {
+					e.preventDefault();
+					setActiveIndex(0);
+				}
+				break;
+			case "End":
+				if (isOpen) {
+					e.preventDefault();
+					setActiveIndex(filteredOptions.length - 1);
+				}
+				break;
+			case "Enter":
+				e.preventDefault();
+				if (isOpen && activeIndex >= 0 && activeIndex < filteredOptions.length) select(filteredOptions[activeIndex]);
+				break;
+			case "Tab":
+				if (isOpen) close();
+				break;
+		}
+	}, [
+		isOpen,
+		open,
+		close,
+		select,
+		activeIndex,
+		filteredOptions
+	]);
+	useEffect(() => {
+		if (!isOpen || activeIndex < 0) return;
+		const listbox = popoverRef.current;
+		if (!listbox) return;
+		const activeOption = listbox.querySelector(`[data-combobox-option-index="${activeIndex}"]`);
+		if (activeOption) activeOption.scrollIntoView({ block: "nearest" });
+	}, [
+		activeIndex,
+		isOpen,
+		popoverRef
+	]);
+	const contextValue = {
+		selectedValue,
+		activeIndex,
+		filteredOptions,
+		select,
+		setActiveIndex
+	};
+	return /* @__PURE__ */ jsxs(ComboboxContext.Provider, {
+		value: contextValue,
+		children: [/* @__PURE__ */ jsxs("span", {
+			ref: controlRef,
+			"data-slot": "control",
+			...disabled ? { "data-disabled": "" } : {},
+			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",
+				"dark:before:hidden",
+				"after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:ring-transparent after:ring-inset sm:focus-within:after:ring-2 sm:focus-within:after:ring-blue-500",
+				"has-data-disabled:opacity-50 has-data-disabled:before:bg-zinc-950/5 has-data-disabled:before:shadow-none",
+				"has-data-invalid:before:shadow-red-500/10"
+			]),
+			children: [/* @__PURE__ */ jsx("input", {
+				ref: inputRef,
+				"data-slot": "control",
+				role: "combobox",
+				"aria-label": ariaLabel,
+				"aria-expanded": isOpen,
+				"aria-controls": listboxId,
+				"aria-activedescendant": isOpen && activeIndex >= 0 ? `${listboxId}-option-${activeIndex}` : void 0,
+				"aria-autocomplete": "list",
+				"aria-haspopup": "listbox",
+				disabled,
+				name,
+				value: isOpen ? query : displayValue(selectedValue) ?? "",
+				onChange: (e) => {
+					setQuery(e.target.value);
+					if (!isOpen) open();
+					setActiveIndex(-1);
+				},
+				onFocus: () => {
+					if (!isOpen) open();
+				},
+				onKeyDown: handleInputKeyDown,
+				placeholder,
+				...disabled ? { "data-disabled": "" } : {},
+				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)]",
+					"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",
+					"bg-transparent dark:bg-white/5",
+					"focus:outline-hidden",
+					"data-invalid:border-red-500 data-invalid:data-hover:border-red-500 dark:data-invalid:border-red-500 dark:data-invalid:data-hover:border-red-500",
+					"data-disabled:border-zinc-950/20 dark:data-disabled:border-white/15 dark:data-disabled:bg-white/2.5 dark:data-hover:data-disabled:border-white/15",
+					"dark:scheme-dark"
+				])
+			}), /* @__PURE__ */ jsx("button", {
+				type: "button",
+				tabIndex: -1,
+				"aria-label": "Toggle options",
+				disabled,
+				onClick: () => {
+					if (isOpen) close();
+					else {
+						open();
+						inputRef.current?.focus();
+					}
+				},
+				className: "group absolute inset-y-0 right-0 flex items-center px-2",
+				...disabled ? { "data-disabled": "" } : {},
+				children: /* @__PURE__ */ jsxs("svg", {
+					className: "size-5 stroke-zinc-500 group-data-disabled:stroke-zinc-600 group-data-hover:stroke-zinc-700 sm:size-4 dark:stroke-zinc-400 dark:group-data-hover:stroke-zinc-300 forced-colors:stroke-[CanvasText]",
+					viewBox: "0 0 16 16",
+					"aria-hidden": "true",
+					fill: "none",
+					children: [/* @__PURE__ */ jsx("path", {
+						d: "M5.75 10.75L8 13L10.25 10.75",
+						strokeWidth: 1.5,
+						strokeLinecap: "round",
+						strokeLinejoin: "round"
+					}), /* @__PURE__ */ jsx("path", {
+						d: "M10.25 5.25L8 3L5.75 5.25",
+						strokeWidth: 1.5,
+						strokeLinecap: "round",
+						strokeLinejoin: "round"
+					})]
+				})
+			})]
+		}), mounted && createPortal(/* @__PURE__ */ jsx("div", {
+			ref: (node) => {
+				popoverRef.current = node;
+				transitionRef.current = node;
+			},
+			role: "listbox",
+			id: listboxId,
+			...popoverProps,
+			...transitionProps,
+			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
+			},
+			children: filteredOptions.map((option, index) => option == null ? null : /* @__PURE__ */ jsx(ComboboxOptionIndexProvider, {
+				index,
+				children: children(option)
+			}, index))
+		}), document.body)]
+	});
+}
+var ComboboxOptionIndexContext = createContext(-1);
+function ComboboxOptionIndexProvider({ index, children }) {
+	return /* @__PURE__ */ jsx(ComboboxOptionIndexContext.Provider, {
+		value: index,
+		children
+	});
+}
+function ComboboxOption({ children, className, value, disabled = false }) {
+	const { selectedValue, activeIndex, select, setActiveIndex } = useComboboxContext();
+	const index = use(ComboboxOptionIndexContext);
+	const isSelected = selectedValue === value;
+	const isActive = activeIndex === index;
+	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,
+		"aria-disabled": disabled,
+		"data-combobox-option-index": index,
+		...isActive ? { "data-focus": "" } : {},
+		...isSelected ? { "data-selected": "" } : {},
+		...disabled ? { "data-disabled": "" } : {},
+		onPointerEnter: () => {
+			if (!disabled) setActiveIndex(index);
+		},
+		onPointerLeave: () => {
+			setActiveIndex(-1);
+		},
+		onClick: () => {
+			if (!disabled) select(value);
+		},
+		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: 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",
+			viewBox: "0 0 16 16",
+			fill: "none",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx("path", {
+				d: "M4 8.5l3 3L12 4",
+				strokeWidth: 1.5,
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			})
+		})]
+	});
+}
+function ComboboxLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		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: 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
+		})
+	});
+}
+//#endregion
+//#region src/components/description-list.tsx
+function DescriptionList({ className, ...props }) {
+	return /* @__PURE__ */ jsx("dl", {
+		...props,
+		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: 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: 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
+//#region src/components/dialog.tsx
+var DialogContext = createContext(void 0);
+var sizes = {
+	xs: "sm:max-w-xs",
+	sm: "sm:max-w-sm",
+	md: "sm:max-w-md",
+	lg: "sm:max-w-lg",
+	xl: "sm:max-w-xl",
+	"2xl": "sm:max-w-2xl",
+	"3xl": "sm:max-w-3xl",
+	"4xl": "sm:max-w-4xl",
+	"5xl": "sm:max-w-5xl"
+};
+function Dialog({ size = "lg", className, children, open, onClose }) {
+	const panelRef = useRef(null);
+	const titleId = useId();
+	const backdrop = useTransition(open);
+	const panel = useTransition(open);
+	useScrollLock(open);
+	useFocusTrap(panelRef, open);
+	useEscapeKey(onClose, open);
+	if (!(backdrop.mounted || panel.mounted)) return null;
+	return createPortal(/* @__PURE__ */ jsx(DialogContext.Provider, {
+		value: titleId,
+		children: /* @__PURE__ */ jsxs("div", {
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-labelledby": titleId,
+			children: [backdrop.mounted && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": "Close dialog",
+				ref: backdrop.nodeRef,
+				...backdrop.transitionProps,
+				onClick: onClose,
+				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", {
+					className: "grid min-h-full grid-rows-[1fr_auto] justify-items-center sm:grid-rows-[1fr_auto_3fr] sm:p-4",
+					children: /* @__PURE__ */ jsx("div", {
+						ref: (node) => {
+							panelRef.current = node;
+							panel.nodeRef.current = node;
+						},
+						...panel.transitionProps,
+						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
+					})
+				})
+			})]
+		})
+	}), document.body);
+}
+function DialogTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("h2", {
+		id: use(DialogContext),
+		...props,
+		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: cn(className, "mt-2 text-pretty")
+	});
+}
+function DialogBody({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: cn(className, "mt-6")
+	});
+}
+function DialogActions({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: cn(className, "mt-8 flex flex-col-reverse items-center justify-end gap-3 *:w-full sm:flex-row sm:*:w-auto")
+	});
+}
+//#endregion
+//#region src/components/divider.tsx
+function Divider({ soft = false, className, ...props }) {
+	return /* @__PURE__ */ jsx("hr", {
+		...props,
+		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
+//#region src/components/drawer.tsx
+var DrawerContext = createContext(void 0);
+var sideClasses$1 = {
+	left: "inset-y-0 left-0 h-full w-full max-w-sm data-closed:-translate-x-full",
+	right: "inset-y-0 right-0 h-full w-full max-w-sm data-closed:translate-x-full",
+	top: "inset-x-0 top-0 w-full max-h-[50vh] data-closed:-translate-y-full",
+	bottom: "inset-x-0 bottom-0 w-full max-h-[50vh] data-closed:translate-y-full"
+};
+function Drawer({ open, onClose, side = "right", className, children }) {
+	const panelRef = useRef(null);
+	const titleId = useId();
+	const backdrop = useTransition(open);
+	const panel = useTransition(open);
+	useScrollLock(open);
+	useFocusTrap(panelRef, open);
+	useEscapeKey(onClose, open);
+	const handleBackdropClick = (e) => {
+		if (e.target === e.currentTarget) onClose();
+	};
+	if (!(backdrop.mounted || panel.mounted)) return null;
+	return createPortal(/* @__PURE__ */ jsx(DrawerContext.Provider, {
+		value: titleId,
+		children: /* @__PURE__ */ jsxs("div", {
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-labelledby": titleId,
+			children: [backdrop.mounted && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": "Close drawer",
+				ref: backdrop.nodeRef,
+				...backdrop.transitionProps,
+				onClick: handleBackdropClick,
+				className: "fixed inset-0 z-40 bg-zinc-950/25 transition duration-200 data-closed:opacity-0 data-enter:ease-out data-leave:ease-in dark:bg-zinc-950/50"
+			}), panel.mounted && /* @__PURE__ */ jsx("div", {
+				ref: (node) => {
+					panelRef.current = node;
+					panel.nodeRef.current = node;
+				},
+				...panel.transitionProps,
+				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
+			})]
+		})
+	}), document.body);
+}
+function DrawerHeader({ onClose, className, children }) {
+	const titleId = use(DrawerContext);
+	return /* @__PURE__ */ jsxs("div", {
+		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",
+			children
+		}), onClose && /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"aria-label": "Close drawer",
+			onClick: onClose,
+			className: "rounded-md p-1 text-zinc-400 hover:text-zinc-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 dark:hover:text-zinc-200",
+			children: /* @__PURE__ */ jsx("svg", {
+				viewBox: "0 0 16 16",
+				fill: "none",
+				className: "size-4",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ jsx("path", {
+					d: "M4 4l8 8M12 4l-8 8",
+					stroke: "currentColor",
+					strokeWidth: "1.5",
+					strokeLinecap: "round"
+				})
+			})
+		})]
+	});
+}
+function DrawerBody({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: cn("px-6 py-4", className)
+	});
+}
+function DrawerFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: cn("flex items-center justify-end gap-3 border-t border-zinc-200 px-6 py-4 dark:border-zinc-700", className)
+	});
+}
+//#endregion
+//#region src/hooks/use-roving-tabindex.ts
+function useRovingTabindex({ itemCount, initialIndex = -1, orientation = "vertical", loop = true, onActiveChange }) {
+	const [activeIndex, setActiveIndexState] = useState(initialIndex);
+	const itemRefs = useRef(/* @__PURE__ */ new Map());
+	const onActiveChangeRef = useRef(onActiveChange);
+	onActiveChangeRef.current = onActiveChange;
+	const setActiveIndex = useCallback((index) => {
+		setActiveIndexState(index);
+		onActiveChangeRef.current?.(index);
+		itemRefs.current.get(index)?.focus();
+	}, []);
+	const moveFocus = useCallback((direction) => {
+		if (itemCount === 0) return;
+		let next = activeIndex + direction;
+		if (loop) {
+			if (next < 0) next = itemCount - 1;
+			else if (next >= itemCount) next = 0;
+		} else next = Math.max(0, Math.min(itemCount - 1, next));
+		if (itemRefs.current.get(next)?.hasAttribute("data-disabled")) {
+			const nextNext = next + direction;
+			if (nextNext >= 0 && nextNext < itemCount) {
+				setActiveIndex(nextNext);
+				return;
+			}
+		}
+		setActiveIndex(next);
+	}, [
+		activeIndex,
+		itemCount,
+		loop,
+		setActiveIndex
+	]);
+	const onKeyDown = useCallback((e) => {
+		const prevKey = orientation === "vertical" ? "ArrowUp" : "ArrowLeft";
+		const nextKey = orientation === "vertical" ? "ArrowDown" : "ArrowRight";
+		switch (e.key) {
+			case prevKey:
+				e.preventDefault();
+				moveFocus(-1);
+				break;
+			case nextKey:
+				e.preventDefault();
+				moveFocus(1);
+				break;
+			case "Home":
+				e.preventDefault();
+				setActiveIndex(0);
+				break;
+			case "End":
+				e.preventDefault();
+				setActiveIndex(itemCount - 1);
+				break;
+		}
+	}, [
+		moveFocus,
+		setActiveIndex,
+		itemCount,
+		orientation
+	]);
+	const getItemProps = useCallback((index) => ({
+		tabIndex: index === activeIndex ? 0 : -1,
+		"data-focus": index === activeIndex ? "" : void 0,
+		ref: (el) => {
+			if (el) itemRefs.current.set(index, el);
+			else itemRefs.current.delete(index);
+		},
+		onPointerEnter: () => setActiveIndex(index),
+		onClick: () => setActiveIndex(index)
+	}), [activeIndex, setActiveIndex]);
+	return {
+		activeIndex,
+		setActiveIndex,
+		containerProps: {
+			role: orientation === "vertical" ? "listbox" : "group",
+			onKeyDown
+		},
+		getItemProps
+	};
+}
+//#endregion
+//#region src/hooks/use-type-ahead.ts
+function useTypeAhead({ getItemText, itemCount, onMatch, timeout = 350 }) {
+	const searchBuffer = useRef("");
+	const timeoutRef = useRef(void 0);
+	return { onKeyDown: useCallback((e) => {
+		if (e.key.length !== 1 || e.ctrlKey || e.metaKey || e.altKey) return;
+		if (timeoutRef.current) clearTimeout(timeoutRef.current);
+		searchBuffer.current += e.key.toLowerCase();
+		timeoutRef.current = setTimeout(() => {
+			searchBuffer.current = "";
+		}, timeout);
+		const query = searchBuffer.current;
+		for (let i = 0; i < itemCount; i++) if (getItemText(i).toLowerCase().startsWith(query)) {
+			onMatch(i);
+			return;
+		}
+	}, [
+		getItemText,
+		itemCount,
+		onMatch,
+		timeout
+	]) };
+}
+//#endregion
+//#region src/components/dropdown.tsx
+var DropdownContext = createContext(null);
+function useDropdownContext() {
+	const ctx = use(DropdownContext);
+	if (!ctx) throw new Error("Dropdown compound components must be used within <Dropdown>");
+	return ctx;
+}
+var DropdownItemContext = createContext(null);
+function Dropdown({ children, ...props }) {
+	const [open, setOpen] = useState(false);
+	const triggerRef = useRef(null);
+	const close = useCallback(() => {
+		setOpen(false);
+		triggerRef.current?.focus();
+	}, []);
+	const value = useMemo(() => ({
+		open,
+		setOpen,
+		close,
+		triggerRef
+	}), [open, close]);
+	return /* @__PURE__ */ jsx(DropdownContext.Provider, {
+		value,
+		children: /* @__PURE__ */ jsx("div", {
+			...props,
+			children
+		})
+	});
+}
+function DropdownButton({ as, className, ...props }) {
+	const { open, setOpen, triggerRef } = useDropdownContext();
+	const interactiveProps = useDataInteractive();
+	const Component = as ?? Button;
+	const handleClick = useCallback(() => {
+		setOpen(!open);
+	}, [open, setOpen]);
+	const handleKeyDown = useCallback((e) => {
+		if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
+			e.preventDefault();
+			setOpen(true);
+		}
+	}, [setOpen]);
+	return /* @__PURE__ */ jsx(Component, {
+		ref: triggerRef,
+		...interactiveProps,
+		...props,
+		className,
+		"aria-haspopup": "menu",
+		"aria-expanded": open,
+		onClick: handleClick,
+		onKeyDown: handleKeyDown
+	});
+}
+function DropdownMenu({ anchor = "bottom", className, children, ...props }) {
+	const { open, close, triggerRef } = useDropdownContext();
+	const { mounted, nodeRef, transitionProps } = useTransition(open);
+	const popover = usePopover({
+		open,
+		anchor,
+		gap: 8,
+		padding: 4
+	});
+	const menuRef = useRef(null);
+	const combinedRef = useCallback((el) => {
+		menuRef.current = el;
+		popover.popoverRef.current = el;
+		nodeRef.current = el;
+	}, [popover.popoverRef, nodeRef]);
+	popover.triggerRef.current = triggerRef.current;
+	useClickOutside([triggerRef, menuRef], close, open);
+	useEscapeKey(close, open);
+	const itemElements = useRef([]);
+	const [itemCount, setItemCount] = useState(0);
+	const register = useCallback((el) => {
+		if (!itemElements.current.includes(el)) {
+			itemElements.current.push(el);
+			setItemCount(itemElements.current.length);
+		}
+		return itemElements.current.indexOf(el);
+	}, []);
+	const unregister = useCallback((el) => {
+		const idx = itemElements.current.indexOf(el);
+		if (idx !== -1) {
+			itemElements.current.splice(idx, 1);
+			setItemCount(itemElements.current.length);
+		}
+	}, []);
+	const roving = useRovingTabindex({
+		itemCount,
+		initialIndex: -1,
+		orientation: "vertical",
+		loop: true
+	});
+	const typeAhead = useTypeAhead({
+		getItemText: (index) => itemElements.current[index]?.textContent ?? "",
+		itemCount,
+		onMatch: (index) => roving.setActiveIndex(index)
+	});
+	const handleKeyDown = useCallback((e) => {
+		roving.containerProps.onKeyDown(e);
+		typeAhead.onKeyDown(e);
+		if (e.key === "Enter" || e.key === " ") {
+			e.preventDefault();
+			const activeEl = itemElements.current[roving.activeIndex];
+			if (activeEl) activeEl.click();
+		}
+	}, [roving, typeAhead]);
+	const itemContextValue = useMemo(() => ({
+		register,
+		unregister,
+		getItemProps: roving.getItemProps
+	}), [
+		register,
+		unregister,
+		roving.getItemProps
+	]);
+	if (!mounted) return null;
+	return createPortal(/* @__PURE__ */ jsx(DropdownItemContext.Provider, {
+		value: itemContextValue,
+		children: /* @__PURE__ */ jsx("div", {
+			ref: combinedRef,
+			...transitionProps,
+			...props,
+			role: "menu",
+			"aria-orientation": "vertical",
+			style: popover.popoverProps.style,
+			onKeyDown: handleKeyDown,
+			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);
+}
+function DropdownItem({ className, ...props }) {
+	const { close } = useDropdownContext();
+	const itemCtx = use(DropdownItemContext);
+	const interactiveProps = useDataInteractive({ disabled: "disabled" in props ? props.disabled ?? false : false });
+	const elRef = useRef(null);
+	const indexRef = useRef(-1);
+	const setRef = useCallback((el) => {
+		if (el && itemCtx) {
+			elRef.current = el;
+			indexRef.current = itemCtx.register(el);
+		} else if (!el && elRef.current && itemCtx) {
+			itemCtx.unregister(elRef.current);
+			elRef.current = null;
+			indexRef.current = -1;
+		}
+	}, [itemCtx]);
+	const rovingProps = itemCtx && indexRef.current >= 0 ? itemCtx.getItemProps(indexRef.current) : {
+		tabIndex: -1,
+		"data-focus": void 0,
+		ref: () => {},
+		onPointerEnter: () => {},
+		onClick: () => {}
+	};
+	const propsDisabled = "disabled" in props ? props.disabled : false;
+	const propsOnClick = "onClick" in props && typeof props.onClick === "function" ? props.onClick : void 0;
+	const handleClick = useCallback((e) => {
+		if (propsDisabled) return;
+		rovingProps.onClick();
+		propsOnClick?.(e);
+		close();
+	}, [
+		close,
+		propsDisabled,
+		propsOnClick,
+		rovingProps
+	]);
+	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, {
+			ref: setRef,
+			role: "menuitem",
+			href,
+			...linkProps,
+			...interactiveProps,
+			tabIndex: rovingProps.tabIndex,
+			"data-focus": rovingProps["data-focus"],
+			onPointerEnter: rovingProps.onPointerEnter,
+			onClick: handleClick,
+			className: classes,
+			children
+		});
+	}
+	const { disabled, children, onClick: _onClick, ...buttonProps } = props;
+	return /* @__PURE__ */ jsx("button", {
+		ref: setRef,
+		role: "menuitem",
+		type: "button",
+		disabled,
+		...buttonProps,
+		...interactiveProps,
+		tabIndex: rovingProps.tabIndex,
+		"data-focus": rovingProps["data-focus"],
+		onPointerEnter: rovingProps.onPointerEnter,
+		onClick: handleClick,
+		className: classes,
+		children
+	});
+}
+function DropdownHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		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: 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: 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: 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: cn(className, "col-start-2 row-start-1")
+	});
+}
+function DropdownDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "description",
+		...props,
+		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: 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: 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}`);
+		})
+	});
+}
+//#endregion
+//#region src/components/fieldset.tsx
+function Fieldset({ className, disabled, ...props }) {
+	return /* @__PURE__ */ jsx("fieldset", {
+		disabled,
+		...props,
+		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: 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: cn(className, "space-y-8")
+	});
+}
+function Field({ className, disabled, ...props }) {
+	return /* @__PURE__ */ jsx(FieldProvider, {
+		disabled,
+		children: /* @__PURE__ */ jsx("div", {
+			...props,
+			"data-disabled": disabled ? "" : void 0,
+			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")
+		})
+	});
+}
+function Label({ className, ...props }) {
+	const fieldLabelProps = useFieldLabelProps();
+	return /* @__PURE__ */ jsx("label", {
+		"data-slot": "label",
+		...fieldLabelProps,
+		...props,
+		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 }) {
+	const fieldDescriptionProps = useFieldDescriptionProps();
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "description",
+		...fieldDescriptionProps,
+		...props,
+		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 }) {
+	const fieldErrorProps = useFieldErrorProps();
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "error",
+		...fieldErrorProps,
+		...props,
+		className: cn(className, "text-base/6 text-red-600 data-disabled:opacity-50 sm:text-sm/6 dark:text-red-500")
+	});
+}
+//#endregion
+//#region src/components/input-headless.tsx
+function InputGroup({ children }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "control",
+		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
+	});
+}
+var dateTypes = [
+	"date",
+	"datetime-local",
+	"month",
+	"time",
+	"week"
+];
+function Input({ className, disabled, invalid, ref, ...props }) {
+	const interactiveProps = useDataInteractive({ disabled });
+	const fieldProps = useFieldControlProps();
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "control",
+		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",
+			"dark:before:hidden",
+			"after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:ring-transparent after:ring-inset sm:focus-within:after:ring-2 sm:focus-within:after:ring-blue-500",
+			"has-data-disabled:opacity-50 has-data-disabled:before:bg-zinc-950/5 has-data-disabled:before:shadow-none"
+		]),
+		children: /* @__PURE__ */ jsx("input", {
+			ref,
+			disabled,
+			...props,
+			...interactiveProps,
+			...fieldProps,
+			"data-invalid": invalid ? "" : void 0,
+			"data-disabled": disabled ? "" : void 0,
+			className: cn([
+				props.type && dateTypes.includes(props.type) && [
+					"[&::-webkit-datetime-edit-fields-wrapper]:p-0",
+					"[&::-webkit-date-and-time-value]:min-h-[1.5em]",
+					"[&::-webkit-datetime-edit]:inline-flex",
+					"[&::-webkit-datetime-edit]:p-0",
+					"[&::-webkit-datetime-edit-year-field]:p-0",
+					"[&::-webkit-datetime-edit-month-field]:p-0",
+					"[&::-webkit-datetime-edit-day-field]:p-0",
+					"[&::-webkit-datetime-edit-hour-field]:p-0",
+					"[&::-webkit-datetime-edit-minute-field]:p-0",
+					"[&::-webkit-datetime-edit-second-field]:p-0",
+					"[&::-webkit-datetime-edit-millisecond-field]:p-0",
+					"[&::-webkit-datetime-edit-meridiem-field]:p-0"
+				],
+				"relative block 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",
+				"bg-transparent dark:bg-white/5",
+				"focus:outline-hidden",
+				"data-invalid:border-red-500 data-invalid:data-hover:border-red-500 dark:data-invalid:border-red-600 dark:data-invalid:data-hover:border-red-600",
+				"data-disabled:border-zinc-950/20 dark:data-disabled:border-white/15 dark:data-disabled:bg-white/2.5 dark:data-hover:data-disabled:border-white/15",
+				"dark:scheme-dark"
+			])
+		})
+	});
+}
+//#endregion
+//#region src/components/kbd.tsx
+function Kbd({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx("kbd", {
+		...props,
+		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: 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", {
+				className: "text-xs text-zinc-400",
+				children: separator
+			})]
+		}, i))
+	});
+}
+//#endregion
+//#region src/components/listbox.tsx
+var ListboxContext = createContext(null);
+function useListboxContext() {
+	const ctx = use(ListboxContext);
+	if (!ctx) throw new Error("Listbox compound components must be used within <Listbox>");
+	return ctx;
+}
+function countOptions(children) {
+	let count = 0;
+	Children.forEach(children, (child) => {
+		if (!isValidElement(child)) return;
+		if (child.type === ListboxOption) count++;
+	});
+	return count;
+}
+var OptionIndexContext = createContext(-1);
+function OptionIndexProvider({ children }) {
+	let index = 0;
+	return /* @__PURE__ */ jsx(Fragment, { children: Children.map(children, (child) => {
+		if (!isValidElement(child)) return child;
+		if (child.type === ListboxOption) {
+			const currentIndex = index++;
+			return /* @__PURE__ */ jsx(OptionIndexContext.Provider, {
+				value: currentIndex,
+				children: child
+			});
+		}
+		return child;
+	}) });
+}
+function Listbox({ className, placeholder, autoFocus = false, "aria-label": ariaLabel, children: options, value: controlledValue, defaultValue, onChange, disabled = false, name }) {
+	const [value, setValue] = useControllableState({
+		value: controlledValue,
+		defaultValue,
+		onChange
+	});
+	const [open, setOpen] = useState(false);
+	const [activeIndex, setActiveIndex] = useState(-1);
+	const [optionCount, setOptionCount] = useState(0);
+	const buttonId = useId();
+	const listId = useId();
+	const optionMapRef = useRef(/* @__PURE__ */ new Map());
+	const registerOption = useCallback((index, optValue, element) => {
+		optionMapRef.current.set(index, {
+			value: optValue,
+			element
+		});
+	}, []);
+	const { triggerRef, popoverRef, popoverProps } = usePopover({
+		open,
+		anchor: "selection start",
+		gap: 0,
+		padding: 16
+	});
+	const { mounted, nodeRef, transitionProps } = useTransition(open);
+	const focusTrigger = useCallback(() => {
+		triggerRef.current?.focus();
+	}, [triggerRef]);
+	useEffect(() => {
+		setOptionCount(countOptions(options));
+	}, [options]);
+	useEffect(() => {
+		if (autoFocus && !disabled) focusTrigger();
+	}, [
+		autoFocus,
+		disabled,
+		focusTrigger
+	]);
+	useClickOutside([triggerRef, popoverRef], () => setOpen(false), open);
+	useEscapeKey(() => {
+		setOpen(false);
+		focusTrigger();
+	}, open);
+	const selectActiveOption = useCallback(() => {
+		const entry = optionMapRef.current.get(activeIndex);
+		if (entry) {
+			setValue(entry.value);
+			setOpen(false);
+			focusTrigger();
+		}
+	}, [
+		activeIndex,
+		focusTrigger,
+		setValue
+	]);
+	const handleOptionsKeyDown = useCallback((e) => {
+		switch (e.key) {
+			case "ArrowDown":
+				e.preventDefault();
+				setActiveIndex((prev) => {
+					const next = prev + 1;
+					return next >= optionCount ? 0 : next;
+				});
+				break;
+			case "ArrowUp":
+				e.preventDefault();
+				setActiveIndex((prev) => {
+					const next = prev - 1;
+					return next < 0 ? optionCount - 1 : next;
+				});
+				break;
+			case "Home":
+				e.preventDefault();
+				setActiveIndex(0);
+				break;
+			case "End":
+				e.preventDefault();
+				setActiveIndex(optionCount - 1);
+				break;
+			case "Enter":
+			case " ":
+				e.preventDefault();
+				selectActiveOption();
+				break;
+		}
+	}, [optionCount, selectActiveOption]);
+	useEffect(() => {
+		if (!open || activeIndex < 0) return;
+		optionMapRef.current.get(activeIndex)?.element?.scrollIntoView({ block: "nearest" });
+	}, [activeIndex, open]);
+	useEffect(() => {
+		if (open) {
+			let selectedIdx = -1;
+			for (const [idx, entry] of optionMapRef.current.entries()) if (entry.value === value) {
+				selectedIdx = idx;
+				break;
+			}
+			setActiveIndex(selectedIdx >= 0 ? selectedIdx : 0);
+		}
+	}, [open, value]);
+	useEffect(() => {
+		if (mounted && popoverRef.current) popoverRef.current.focus({ preventScroll: true });
+	}, [mounted, popoverRef]);
+	const selectedContent = useMemo(() => {
+		let matched = null;
+		Children.forEach(options, (child) => {
+			if (!isValidElement(child)) return;
+			if (child.type === ListboxOption && child.props.value === value) matched = child.props.children;
+		});
+		return matched;
+	}, [options, value]);
+	const ctx = useMemo(() => ({
+		value,
+		setValue,
+		open,
+		setOpen,
+		disabled,
+		activeIndex,
+		setActiveIndex,
+		registerOption,
+		optionCount,
+		buttonId,
+		listId
+	}), [
+		value,
+		setValue,
+		open,
+		disabled,
+		activeIndex,
+		registerOption,
+		optionCount,
+		buttonId,
+		listId
+	]);
+	const handleButtonClick = useCallback(() => {
+		if (!disabled) setOpen((prev) => !prev);
+	}, [disabled]);
+	const handleButtonKeyDown = useCallback((e) => {
+		if (disabled) return;
+		if (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Enter" || e.key === " ") {
+			e.preventDefault();
+			setOpen(true);
+		}
+	}, [disabled]);
+	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
+	}) : placeholder ? /* @__PURE__ */ jsx("span", {
+		className: "block truncate text-zinc-500",
+		children: placeholder
+	}) : null;
+	return /* @__PURE__ */ jsxs(ListboxContext.Provider, {
+		value: ctx,
+		children: [
+			name && /* @__PURE__ */ jsx("input", {
+				type: "hidden",
+				name,
+				value: String(value ?? "")
+			}),
+			/* @__PURE__ */ jsxs("button", {
+				ref: triggerRef,
+				id: buttonId,
+				type: "button",
+				role: "combobox",
+				"aria-expanded": open,
+				"aria-haspopup": "listbox",
+				"aria-controls": open ? listId : void 0,
+				"aria-label": ariaLabel,
+				"aria-disabled": disabled || void 0,
+				"data-slot": "control",
+				"data-disabled": disabled ? "" : void 0,
+				"data-active": open ? "" : void 0,
+				disabled,
+				onClick: handleButtonClick,
+				onKeyDown: handleButtonKeyDown,
+				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",
+					"dark:before:hidden",
+					"focus:outline-hidden",
+					"after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:ring-transparent after:ring-inset data-focus:after:ring-2 data-focus:after:ring-blue-500",
+					"data-disabled:opacity-50 data-disabled:before:bg-zinc-950/5 data-disabled:before:shadow-none"
+				]),
+				children: [/* @__PURE__ */ jsx("span", {
+					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)]",
+						"text-left text-base/6 text-zinc-950 placeholder:text-zinc-500 sm:text-sm/6 dark:text-white forced-colors:text-[CanvasText]",
+						"border border-zinc-950/10 group-data-active:border-zinc-950/20 group-data-hover:border-zinc-950/20 dark:border-white/10 dark:group-data-active:border-white/20 dark:group-data-hover:border-white/20",
+						"bg-transparent dark:bg-white/5",
+						"group-data-invalid:border-red-500 group-data-hover:group-data-invalid:border-red-500 dark:group-data-invalid:border-red-600 dark:data-hover:group-data-invalid:border-red-600",
+						"group-data-disabled:border-zinc-950/20 group-data-disabled:opacity-100 dark:group-data-disabled:border-white/15 dark:group-data-disabled:bg-white/2.5 dark:group-data-disabled:data-hover:border-white/15"
+					]),
+					children: displayContent
+				}), /* @__PURE__ */ jsx("span", {
+					className: "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2",
+					children: /* @__PURE__ */ jsxs("svg", {
+						className: "size-5 stroke-zinc-500 group-data-disabled:stroke-zinc-600 sm:size-4 dark:stroke-zinc-400 forced-colors:stroke-[CanvasText]",
+						viewBox: "0 0 16 16",
+						"aria-hidden": "true",
+						fill: "none",
+						children: [/* @__PURE__ */ jsx("path", {
+							d: "M5.75 10.75L8 13L10.25 10.75",
+							strokeWidth: 1.5,
+							strokeLinecap: "round",
+							strokeLinejoin: "round"
+						}), /* @__PURE__ */ jsx("path", {
+							d: "M10.25 5.25L8 3L5.75 5.25",
+							strokeWidth: 1.5,
+							strokeLinecap: "round",
+							strokeLinejoin: "round"
+						})]
+					})
+				})]
+			}),
+			mounted && createPortal(/* @__PURE__ */ jsx("div", {
+				ref: (node) => {
+					popoverRef.current = node;
+					nodeRef.current = node;
+				},
+				...popoverProps,
+				...transitionProps,
+				id: listId,
+				role: "listbox",
+				"aria-labelledby": buttonId,
+				tabIndex: -1,
+				onKeyDown: handleOptionsKeyDown,
+				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
+				},
+				children: /* @__PURE__ */ jsx(OptionIndexProvider, { children: options })
+			}), document.body)
+		]
+	});
+}
+function ListboxOption({ children, className, value: optionValue, disabled: optionDisabled = false }) {
+	const ctx = useListboxContext();
+	const index = use(OptionIndexContext);
+	const optionRef = useRef(null);
+	const isSelected = ctx.value === optionValue;
+	const isFocused = ctx.activeIndex === index;
+	useEffect(() => {
+		ctx.registerOption(index, optionValue, optionRef.current);
+	}, [
+		index,
+		optionValue,
+		ctx.registerOption,
+		ctx
+	]);
+	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);
+		ctx.setOpen(false);
+	}, [
+		optionDisabled,
+		ctx.setValue,
+		ctx.setOpen,
+		optionValue,
+		ctx
+	]);
+	const handlePointerEnter = useCallback(() => {
+		if (!optionDisabled) ctx.setActiveIndex(index);
+	}, [
+		optionDisabled,
+		ctx.setActiveIndex,
+		index,
+		ctx
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: optionRef,
+		role: "option",
+		"aria-selected": isSelected,
+		"aria-disabled": optionDisabled || void 0,
+		"data-selected": isSelected ? "" : void 0,
+		"data-focus": isFocused ? "" : void 0,
+		"data-disabled": optionDisabled ? "" : void 0,
+		onClick: handleClick,
+		onPointerEnter: handlePointerEnter,
+		tabIndex: -1,
+		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",
+			fill: "none",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx("path", {
+				d: "M4 8.5l3 3L12 4",
+				strokeWidth: 1.5,
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			})
+		}), /* @__PURE__ */ jsx("span", {
+			className: cn(className, sharedClasses, "col-start-2"),
+			children
+		})]
+	});
+}
+function ListboxLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		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: 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
+		})
+	});
+}
+//#endregion
+//#region src/hooks/use-layout-animation.tsx
+/**
+* Layout Animation Hook (FLIP Technique)
+*
+* Replaces motion/react's LayoutGroup + motion.span + layoutId pattern
+* with a native implementation using Web Animations API.
+*
+* The FLIP (First, Last, Invert, Play) technique:
+* 1. Record the element's position before it unmounts (First)
+* 2. Mount the new element and record its position (Last)
+* 3. Calculate the delta between positions (Invert)
+* 4. Animate from old position to new position (Play)
+*
+* @example
+* ```tsx
+* function NavSection({ children }) {
+*   return <LayoutGroup>{children}</LayoutGroup>
+* }
+*
+* function NavItem({ current }) {
+*   return (
+*     <span>
+*       {current && <LayoutIndicator layoutId="indicator" className="..." />}
+*       ...
+*     </span>
+*   )
+* }
+* ```
+*/
+var LayoutGroupContext = createContext(null);
+/**
+* Scopes layout animations to a group.
+* Elements with the same `layoutId` within a group share position data.
+*/
+function LayoutGroup({ children }) {
+	return /* @__PURE__ */ jsx(LayoutGroupContext, {
+		value: useRef(/* @__PURE__ */ new Map()),
+		children
+	});
+}
+/** Spring-like easing approximation (matches motion's default layout spring) */
+var LAYOUT_EASING = "cubic-bezier(0.25, 0.8, 0.25, 1)";
+var LAYOUT_DURATION = 350;
+/**
+* Hook that implements FLIP layout animation for an element.
+*
+* When an element with the same `layoutId` unmounts from one position
+* and mounts in another, this hook animates the transition smoothly.
+*
+* @param layoutId - Shared identifier linking old and new positions
+* @returns Ref to attach to the animated element
+*/
+function useLayoutAnimation(layoutId) {
+	const ref = useRef(null);
+	const rectsCtx = use(LayoutGroupContext);
+	useLayoutEffect(() => {
+		const el = ref.current;
+		const rects = rectsCtx?.current;
+		if (!(el && rects)) return;
+		const prevRect = rects.get(layoutId);
+		const currentRect = el.getBoundingClientRect();
+		rects.set(layoutId, currentRect);
+		if (prevRect) {
+			const deltaX = prevRect.left - currentRect.left;
+			const deltaY = prevRect.top - currentRect.top;
+			if (Math.abs(deltaX) > .5 || Math.abs(deltaY) > .5) el.animate([{ transform: `translate(${deltaX}px, ${deltaY}px)` }, { transform: "translate(0, 0)" }], {
+				duration: LAYOUT_DURATION,
+				easing: LAYOUT_EASING,
+				fill: "none"
+			});
+		}
+		return () => {
+			if (el) rects.set(layoutId, el.getBoundingClientRect());
+		};
+	});
+	return ref;
+}
+/**
+* Animated indicator span that smoothly transitions between positions.
+* Drop-in replacement for `<motion.span layoutId="...">`.
+*/
+function LayoutIndicator({ layoutId, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		ref: useLayoutAnimation(layoutId),
+		...props
+	});
+}
+//#endregion
+//#region src/components/navbar.tsx
+function Navbar({ className, ...props }) {
+	return /* @__PURE__ */ jsx("nav", {
+		...props,
+		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: cn(className, "h-6 w-px bg-zinc-950/10 dark:bg-white/10")
+	});
+}
+function NavbarSection({ className, ...props }) {
+	return /* @__PURE__ */ jsx(LayoutGroup, {
+		id: useId(),
+		children: /* @__PURE__ */ jsx("div", {
+			...props,
+			className: cn(className, "flex items-center gap-3")
+		})
+	});
+}
+function NavbarSpacer({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"aria-hidden": "true",
+		...props,
+		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 = 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: 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"
+		}), typeof props.href === "string" ? /* @__PURE__ */ jsx(Link, {
+			...props,
+			className: classes,
+			"data-current": current ? "true" : void 0,
+			ref,
+			children: /* @__PURE__ */ jsx(TouchTarget, { children })
+		}) : /* @__PURE__ */ jsx("button", {
+			type: "button",
+			...props,
+			...interactiveProps,
+			className: cn("cursor-default", classes),
+			"data-current": current ? "true" : void 0,
+			ref,
+			children: /* @__PURE__ */ jsx(TouchTarget, { children })
+		})]
+	});
+}
+function NavbarLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		className: cn(className, "truncate")
+	});
+}
+//#endregion
+//#region src/components/progress.tsx
+var trackClasses = {
+	blue: "bg-blue-600 dark:bg-blue-500",
+	green: "bg-green-600 dark:bg-green-500",
+	red: "bg-red-600 dark:bg-red-500",
+	amber: "bg-amber-500 dark:bg-amber-400",
+	violet: "bg-violet-600 dark:bg-violet-500",
+	zinc: "bg-zinc-600 dark:bg-zinc-400"
+};
+function Progress({ value, max = 100, color = "blue", size = "md", label, showValue = false, className }) {
+	const percentage = Math.min(100, Math.max(0, value / max * 100));
+	const heightClass = {
+		xs: "h-1",
+		sm: "h-1.5",
+		md: "h-2.5",
+		lg: "h-4"
+	}[size];
+	return /* @__PURE__ */ jsxs("div", {
+		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", {
+				className: "text-sm font-medium text-zinc-700 dark:text-zinc-300",
+				children: label
+			}), showValue && /* @__PURE__ */ jsxs("span", {
+				className: "text-sm text-zinc-500 dark:text-zinc-400",
+				children: [Math.round(percentage), "%"]
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			role: "progressbar",
+			"aria-valuenow": value,
+			"aria-valuemin": 0,
+			"aria-valuemax": max,
+			"aria-label": label ?? "Progress",
+			className: cn("w-full overflow-hidden rounded-full bg-zinc-200 dark:bg-zinc-700", heightClass),
+			children: /* @__PURE__ */ jsx("div", {
+				className: cn("h-full rounded-full transition-all duration-300 ease-in-out", trackClasses[color]),
+				style: { width: `${percentage}%` }
+			})
+		})]
+	});
+}
+//#endregion
+//#region src/components/radio.tsx
+var RadioGroupContext = createContext(null);
+function useRadioGroupContext() {
+	const ctx = use(RadioGroupContext);
+	if (!ctx) throw new Error("Radio must be used within a RadioGroup");
+	return ctx;
+}
+function RadioGroup({ className, value: controlledValue, defaultValue, onChange, disabled = false, name, children, ...props }) {
+	const [value, setValue] = useControllableState({
+		value: controlledValue,
+		defaultValue: defaultValue ?? "",
+		onChange
+	});
+	const handleKeyDown = useCallback((e) => {
+		const radios = Array.from(e.currentTarget.querySelectorAll("[role=\"radio\"]:not([data-disabled])"));
+		if (radios.length === 0) return;
+		const currentIndex = radios.indexOf(document.activeElement);
+		let nextIndex = currentIndex;
+		switch (e.key) {
+			case "ArrowDown":
+			case "ArrowRight":
+				e.preventDefault();
+				nextIndex = currentIndex + 1 >= radios.length ? 0 : currentIndex + 1;
+				break;
+			case "ArrowUp":
+			case "ArrowLeft":
+				e.preventDefault();
+				nextIndex = currentIndex - 1 < 0 ? radios.length - 1 : currentIndex - 1;
+				break;
+			case "Home":
+				e.preventDefault();
+				nextIndex = 0;
+				break;
+			case "End":
+				e.preventDefault();
+				nextIndex = radios.length - 1;
+				break;
+			default: return;
+		}
+		const nextRadio = radios[nextIndex];
+		if (!nextRadio) return;
+		nextRadio.focus();
+		const radioValue = nextRadio.getAttribute("data-value");
+		if (radioValue != null) setValue(radioValue);
+	}, [setValue]);
+	return /* @__PURE__ */ jsx(RadioGroupContext, {
+		value: {
+			value,
+			onChange: setValue,
+			disabled,
+			name
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			role: "radiogroup",
+			"data-slot": "control",
+			onKeyDown: handleKeyDown,
+			...props,
+			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
+		})
+	});
+}
+function RadioField({ className, disabled, ...props }) {
+	return /* @__PURE__ */ jsx(FieldProvider, {
+		disabled,
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "field",
+			"data-disabled": disabled ? "" : void 0,
+			...props,
+			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")
+		})
+	});
+}
+var base = [
+	"relative isolate flex size-4.75 shrink-0 rounded-full sm:size-4.25",
+	"before:absolute before:inset-0 before:-z-10 before:rounded-full before:bg-white before:shadow-sm",
+	"group-data-checked:before:bg-(--radio-checked-bg)",
+	"dark:before:hidden",
+	"dark:bg-white/5 dark:group-data-checked:bg-(--radio-checked-bg)",
+	"border border-zinc-950/15 group-data-checked:border-transparent group-data-hover:group-data-checked:border-transparent group-data-hover:border-zinc-950/30 group-data-checked:bg-(--radio-checked-border)",
+	"dark:border-white/15 dark:group-data-checked:border-white/5 dark:group-data-hover:group-data-checked:border-white/5 dark:group-data-hover:border-white/30",
+	"after:absolute after:inset-0 after:rounded-full after:shadow-[inset_0_1px_--theme(--color-white/15%)]",
+	"dark:after:-inset-px dark:after:hidden dark:after:rounded-full dark:group-data-checked:after:block",
+	"[--radio-indicator:transparent] group-data-checked:[--radio-indicator:var(--radio-checked-indicator)] group-data-hover:group-data-checked:[--radio-indicator:var(--radio-checked-indicator)] group-data-hover:[--radio-indicator:var(--color-zinc-900)]/10",
+	"dark:group-data-hover:group-data-checked:[--radio-indicator:var(--radio-checked-indicator)] dark:group-data-hover:[--radio-indicator:var(--color-zinc-700)]",
+	"group-data-focus:outline group-data-focus:outline-2 group-data-focus:outline-offset-2 group-data-focus:outline-blue-500",
+	"group-data-disabled:opacity-50",
+	"group-data-disabled:border-zinc-950/25 group-data-disabled:bg-zinc-950/5 group-data-disabled:[--radio-checked-indicator:var(--color-zinc-950)]/50 group-data-disabled:before:bg-transparent",
+	"dark:group-data-disabled:border-white/20 dark:group-data-disabled:bg-white/2.5 dark:group-data-disabled:[--radio-checked-indicator:var(--color-white)]/50 dark:group-data-checked:group-data-disabled:after:hidden"
+];
+var radioColors = {
+	"dark/zinc": ["[--radio-checked-bg:var(--color-zinc-900)] [--radio-checked-border:var(--color-zinc-950)]/90 [--radio-checked-indicator:var(--color-white)]", "dark:[--radio-checked-bg:var(--color-zinc-600)]"],
+	"dark/white": ["[--radio-checked-bg:var(--color-zinc-900)] [--radio-checked-border:var(--color-zinc-950)]/90 [--radio-checked-indicator:var(--color-white)]", "dark:[--radio-checked-bg:var(--color-white)] dark:[--radio-checked-border:var(--color-zinc-950)]/15 dark:[--radio-checked-indicator:var(--color-zinc-900)]"],
+	white: "[--radio-checked-bg:var(--color-white)] [--radio-checked-border:var(--color-zinc-950)]/15 [--radio-checked-indicator:var(--color-zinc-900)]",
+	dark: "[--radio-checked-bg:var(--color-zinc-900)] [--radio-checked-border:var(--color-zinc-950)]/90 [--radio-checked-indicator:var(--color-white)]",
+	zinc: "[--radio-checked-indicator:var(--color-white)] [--radio-checked-bg:var(--color-zinc-600)] [--radio-checked-border:var(--color-zinc-700)]/90",
+	red: "[--radio-checked-indicator:var(--color-white)] [--radio-checked-bg:var(--color-red-600)] [--radio-checked-border:var(--color-red-700)]/90",
+	orange: "[--radio-checked-indicator:var(--color-white)] [--radio-checked-bg:var(--color-orange-500)] [--radio-checked-border:var(--color-orange-600)]/90",
+	amber: "[--radio-checked-bg:var(--color-amber-400)] [--radio-checked-border:var(--color-amber-500)]/80 [--radio-checked-indicator:var(--color-amber-950)]",
+	yellow: "[--radio-checked-bg:var(--color-yellow-300)] [--radio-checked-border:var(--color-yellow-400)]/80 [--radio-checked-indicator:var(--color-yellow-950)]",
+	lime: "[--radio-checked-bg:var(--color-lime-300)] [--radio-checked-border:var(--color-lime-400)]/80 [--radio-checked-indicator:var(--color-lime-950)]",
+	green: "[--radio-checked-indicator:var(--color-white)] [--radio-checked-bg:var(--color-green-600)] [--radio-checked-border:var(--color-green-700)]/90",
+	emerald: "[--radio-checked-indicator:var(--color-white)] [--radio-checked-bg:var(--color-emerald-600)] [--radio-checked-border:var(--color-emerald-700)]/90",
+	teal: "[--radio-checked-indicator:var(--color-white)] [--radio-checked-bg:var(--color-teal-600)] [--radio-checked-border:var(--color-teal-700)]/90",
+	cyan: "[--radio-checked-bg:var(--color-cyan-300)] [--radio-checked-border:var(--color-cyan-400)]/80 [--radio-checked-indicator:var(--color-cyan-950)]",
+	sky: "[--radio-checked-indicator:var(--color-white)] [--radio-checked-bg:var(--color-sky-500)] [--radio-checked-border:var(--color-sky-600)]/80",
+	blue: "[--radio-checked-indicator:var(--color-white)] [--radio-checked-bg:var(--color-blue-600)] [--radio-checked-border:var(--color-blue-700)]/90",
+	indigo: "[--radio-checked-indicator:var(--color-white)] [--radio-checked-bg:var(--color-indigo-500)] [--radio-checked-border:var(--color-indigo-600)]/90",
+	violet: "[--radio-checked-indicator:var(--color-white)] [--radio-checked-bg:var(--color-violet-500)] [--radio-checked-border:var(--color-violet-600)]/90",
+	purple: "[--radio-checked-indicator:var(--color-white)] [--radio-checked-bg:var(--color-purple-500)] [--radio-checked-border:var(--color-purple-600)]/90",
+	fuchsia: "[--radio-checked-indicator:var(--color-white)] [--radio-checked-bg:var(--color-fuchsia-500)] [--radio-checked-border:var(--color-fuchsia-600)]/90",
+	pink: "[--radio-checked-indicator:var(--color-white)] [--radio-checked-bg:var(--color-pink-500)] [--radio-checked-border:var(--color-pink-600)]/90",
+	rose: "[--radio-checked-indicator:var(--color-white)] [--radio-checked-bg:var(--color-rose-500)] [--radio-checked-border:var(--color-rose-600)]/90"
+};
+function Radio({ color = "dark/zinc", className, value, disabled: localDisabled, ...props }) {
+	const group = useRadioGroupContext();
+	const disabled = localDisabled || group.disabled;
+	const checked = group.value === value;
+	const interactiveProps = useDataInteractive({ disabled });
+	const handleClick = useCallback(() => {
+		if (!disabled) group.onChange(value);
+	}, [
+		disabled,
+		group,
+		value
+	]);
+	const handleKeyDown = useCallback((e) => {
+		if ((e.key === " " || e.key === "Enter") && !disabled) {
+			e.preventDefault();
+			group.onChange(value);
+		}
+	}, [
+		disabled,
+		group,
+		value
+	]);
+	return /* @__PURE__ */ jsxs("span", {
+		role: "radio",
+		"data-slot": "control",
+		"aria-checked": checked,
+		"data-checked": checked ? "" : void 0,
+		"data-disabled": disabled ? "" : void 0,
+		"data-value": value,
+		tabIndex: checked ? 0 : -1,
+		onClick: handleClick,
+		onKeyDown: handleKeyDown,
+		...interactiveProps,
+		...props,
+		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: 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]") })
+		})]
+	});
+}
+//#endregion
+//#region src/components/rating.tsx
+function Rating({ value: controlledValue, defaultValue = 0, max = 5, onChange, readOnly = false, size = "md", label, className }) {
+	const [internalValue, setInternalValue] = useState(defaultValue);
+	const [hovered, setHovered] = useState(0);
+	const id = useId();
+	const value = controlledValue ?? internalValue;
+	const sizeClass = {
+		sm: "size-4",
+		md: "size-6",
+		lg: "size-8"
+	}[size];
+	const handleClick = useCallback((star) => {
+		if (readOnly) return;
+		setInternalValue(star);
+		onChange?.(star);
+	}, [readOnly, onChange]);
+	const display = hovered > 0 ? hovered : value;
+	return /* @__PURE__ */ jsxs("div", {
+		className,
+		children: [label && /* @__PURE__ */ jsx("span", {
+			id,
+			className: "sr-only",
+			children: label
+		}), /* @__PURE__ */ jsx("div", {
+			role: readOnly ? "img" : "radiogroup",
+			"aria-label": label ?? `Rating: ${value} out of ${max}`,
+			"aria-labelledby": label ? id : void 0,
+			className: "flex items-center gap-0.5",
+			children: Array.from({ length: max }).map((_, i) => {
+				const star = i + 1;
+				const filled = star <= display;
+				return /* @__PURE__ */ jsx("button", {
+					type: "button",
+					role: readOnly ? void 0 : "radio",
+					"aria-checked": readOnly ? void 0 : value === star,
+					"aria-label": readOnly ? void 0 : `${star} star${star !== 1 ? "s" : ""}`,
+					disabled: readOnly,
+					onClick: () => handleClick(star),
+					onMouseEnter: () => !readOnly && setHovered(star),
+					onMouseLeave: () => !readOnly && setHovered(0),
+					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: 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);
+			})
+		})]
+	});
+}
+//#endregion
+//#region src/components/Select.tsx
+var Check = ({ className }) => {
+	return /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		fill: "none",
+		viewBox: "0 0 24 24",
+		strokeWidth: 1.5,
+		stroke: "currentColor",
+		className: cn("size-6", className),
+		children: [/* @__PURE__ */ jsx("title", { children: "Selected" }), /* @__PURE__ */ jsx("path", {
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			d: "M6 12l4 4L18 8"
+		})]
+	});
+};
+var ChevronUp = ({ className }) => {
+	return /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		fill: "none",
+		viewBox: "0 0 24 24",
+		strokeWidth: 1.5,
+		stroke: "currentColor",
+		className: cn("size-6", className),
+		children: [/* @__PURE__ */ jsx("title", { children: "Scroll up" }), /* @__PURE__ */ jsx("path", {
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			d: "M19.5 15.75l-7.5-7.5-7.5 7.5"
+		})]
+	});
+};
+var ChevronDown = ({ className }) => {
+	return /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		fill: "none",
+		viewBox: "0 0 24 24",
+		strokeWidth: 1.5,
+		stroke: "currentColor",
+		className: cn("size-6", className),
+		children: [/* @__PURE__ */ jsx("title", { children: "Scroll down" }), /* @__PURE__ */ jsx("path", {
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			d: "M4.5 8.25l7.5 7.5 7.5-7.5"
+		})]
+	});
+};
+function Select$1({ children, className, ref, ...props }) {
+	return /* @__PURE__ */ jsx(Box, {
+		ref,
+		className: cn(className),
+		...props,
+		children
+	});
+}
+Select$1.displayName = "Select";
+function SelectGroup({ children, className, ref, ...props }) {
+	return /* @__PURE__ */ jsx(Box, {
+		ref,
+		className: cn(className),
+		...props,
+		children
+	});
+}
+function SelectValue({ placeholder, children, value, ref, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		...props,
+		children: children || placeholder || value
+	});
+}
+function SelectTrigger({ children, className, ref, ...props }) {
+	return /* @__PURE__ */ jsxs(Box, {
+		className: cn("flex h-10 w-full items-center justify-between rounded border border-input bg-background px-3 py-2 text-inherit ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1", className),
+		ref,
+		...props,
+		children: [children, /* @__PURE__ */ jsx(ChevronDown, { className: "size-4 opacity-50" })]
+	});
+}
+SelectTrigger.displayName = "SelectTrigger";
+function SelectScrollUpButton({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("button", {
+		className: cn("flex cursor-default items-center justify-center py-1", className),
+		ref,
+		...props,
+		children: /* @__PURE__ */ jsx(ChevronUp, { className: "size-4" })
+	});
+}
+function SelectScrollDownButton({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("button", {
+		className: cn("flex cursor-default items-center justify-center py-1", className),
+		ref,
+		...props,
+		children: /* @__PURE__ */ jsx(ChevronDown, { className: "size-4" })
+	});
+}
+function SelectContent({ children, className, ref, ...props }) {
+	return /* @__PURE__ */ jsxs(Box, {
+		className: cn("relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded border bg-card text-popover-foreground shadow-md", className),
+		ref,
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(SelectScrollUpButton, {}),
+			/* @__PURE__ */ jsx("div", {
+				className: "p-1",
+				children
+			}),
+			/* @__PURE__ */ jsx(SelectScrollDownButton, {})
+		]
+	});
+}
+SelectContent.displayName = "SelectContent";
+function SelectLabel({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className),
+		ref,
+		...props
+	});
+}
+function SelectItem({ children, className, value, ref, ...props }) {
+	return /* @__PURE__ */ jsxs(Box, {
+		className: cn("relative flex w-full cursor-default select-none items-center rounded py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className),
+		"data-value": value,
+		ref,
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "absolute left-2 flex size-3.5 items-center justify-center",
+			children: /* @__PURE__ */ jsx(Check, { className: "size-4" })
+		}), /* @__PURE__ */ jsx("span", { children })]
+	});
+}
+SelectItem.displayName = "SelectItem";
+function SelectSeparator({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx(Box, {
+		className: cn("-mx-1 my-1 h-px bg-muted", className),
+		ref,
+		...props
+	});
+}
+SelectSeparator.displayName = "SelectSeparator";
+//#endregion
+//#region src/components/select-headless.tsx
+function Select({ className, multiple, disabled, invalid, ref, ...props }) {
+	const interactiveProps = useDataInteractive({ disabled });
+	const fieldProps = useFieldControlProps();
+	return /* @__PURE__ */ jsxs("span", {
+		"data-slot": "control",
+		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",
+			"dark:before:hidden",
+			"after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:ring-transparent after:ring-inset has-data-focus:after:ring-2 has-data-focus:after:ring-blue-500",
+			"has-data-disabled:opacity-50 has-data-disabled:before:bg-zinc-950/5 has-data-disabled:before:shadow-none"
+		]),
+		children: [/* @__PURE__ */ jsx("select", {
+			ref,
+			multiple,
+			disabled,
+			...props,
+			...interactiveProps,
+			...fieldProps,
+			"data-invalid": invalid ? "" : void 0,
+			"data-disabled": disabled ? "" : void 0,
+			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",
+				"text-base/6 text-zinc-950 placeholder:text-zinc-500 sm:text-sm/6 dark:text-white dark:*:text-white",
+				"border border-zinc-950/10 data-hover:border-zinc-950/20 dark:border-white/10 dark:data-hover:border-white/20",
+				"bg-transparent dark:bg-white/5 dark:*:bg-zinc-800",
+				"focus:outline-hidden",
+				"data-invalid:border-red-500 data-invalid:data-hover:border-red-500 dark:data-invalid:border-red-600 dark:data-invalid:data-hover:border-red-600",
+				"data-disabled:border-zinc-950/20 data-disabled:opacity-100 dark:data-disabled:border-white/15 dark:data-disabled:bg-white/2.5 dark:data-hover:data-disabled:border-white/15"
+			])
+		}), !multiple && /* @__PURE__ */ jsx("span", {
+			className: "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2",
+			children: /* @__PURE__ */ jsxs("svg", {
+				className: "size-5 stroke-zinc-500 group-has-data-disabled:stroke-zinc-600 sm:size-4 dark:stroke-zinc-400 forced-colors:stroke-[CanvasText]",
+				viewBox: "0 0 16 16",
+				"aria-hidden": "true",
+				fill: "none",
+				children: [/* @__PURE__ */ jsx("path", {
+					d: "M5.75 10.75L8 13L10.25 10.75",
+					strokeWidth: 1.5,
+					strokeLinecap: "round",
+					strokeLinejoin: "round"
+				}), /* @__PURE__ */ jsx("path", {
+					d: "M10.25 5.25L8 3L5.75 5.25",
+					strokeWidth: 1.5,
+					strokeLinecap: "round",
+					strokeLinejoin: "round"
+				})]
+			})
+		})]
+	});
+}
+//#endregion
+//#region src/hooks/use-close-context.ts
+var CloseContext = createContext(null);
+function useCloseContext() {
+	return useContext(CloseContext);
+}
+//#endregion
+//#region src/components/sidebar.tsx
+function Sidebar({ className, ...props }) {
+	return /* @__PURE__ */ jsx("nav", {
+		...props,
+		className: cn(className, "flex h-full min-h-0 flex-col")
+	});
+}
+function SidebarHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		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: 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: 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 }) {
+	return /* @__PURE__ */ jsx(LayoutGroup, {
+		id: useId(),
+		children: /* @__PURE__ */ jsx("div", {
+			...props,
+			"data-slot": "section",
+			className: cn(className, "flex flex-col gap-0.5")
+		})
+	});
+}
+function SidebarDivider({ className, ...props }) {
+	return /* @__PURE__ */ jsx("hr", {
+		...props,
+		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: cn(className, "mt-8 flex-1")
+	});
+}
+function SidebarHeading({ className, ...props }) {
+	return /* @__PURE__ */ jsx("h3", {
+		...props,
+		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 }) {
+	const interactiveProps = useDataInteractive({ disabled: ("disabled" in props ? props.disabled : false) ?? false });
+	const closeFn = useCloseContext();
+	const propsOnClick = "onClick" in props ? props.onClick : void 0;
+	const handleLinkClick = useCallback((e) => {
+		propsOnClick?.(e);
+		closeFn?.();
+	}, [propsOnClick, closeFn]);
+	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: 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"
+		}), typeof props.href === "string" ? /* @__PURE__ */ jsx(Link, {
+			...props,
+			className: classes,
+			"data-current": current ? "true" : void 0,
+			ref,
+			onClick: handleLinkClick,
+			children: /* @__PURE__ */ jsx(TouchTarget, { children })
+		}) : /* @__PURE__ */ jsx("button", {
+			type: "button",
+			...props,
+			...interactiveProps,
+			className: cn("cursor-default", classes),
+			"data-current": current ? "true" : void 0,
+			ref,
+			children: /* @__PURE__ */ jsx(TouchTarget, { children })
+		})]
+	});
+}
+function SidebarLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		className: cn(className, "truncate")
+	});
+}
+//#endregion
+//#region src/components/sidebar-layout.tsx
+function OpenMenuIcon$1() {
+	return /* @__PURE__ */ jsx("svg", {
+		"data-slot": "icon",
+		viewBox: "0 0 20 20",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", { d: "M2 6.75C2 6.33579 2.33579 6 2.75 6H17.25C17.6642 6 18 6.33579 18 6.75C18 7.16421 17.6642 7.5 17.25 7.5H2.75C2.33579 7.5 2 7.16421 2 6.75ZM2 13.25C2 12.8358 2.33579 12.5 2.75 12.5H17.25C17.6642 12.5 18 12.8358 18 13.25C18 13.6642 17.6642 14 17.25 14H2.75C2.33579 14 2 13.6642 2 13.25Z" })
+	});
+}
+function CloseMenuIcon$1() {
+	return /* @__PURE__ */ jsx("svg", {
+		"data-slot": "icon",
+		viewBox: "0 0 20 20",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", { d: "M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" })
+	});
+}
+function MobileSidebar$1({ open, close, children }) {
+	const panelRef = useRef(null);
+	const backdrop = useTransition(open);
+	const panel = useTransition(open);
+	useScrollLock(open);
+	useFocusTrap(panelRef, open);
+	useEscapeKey(close, open);
+	if (!(backdrop.mounted || panel.mounted)) return null;
+	return createPortal(/* @__PURE__ */ jsx(CloseContext.Provider, {
+		value: close,
+		children: /* @__PURE__ */ jsxs("div", {
+			role: "dialog",
+			"aria-modal": "true",
+			className: "lg:hidden",
+			children: [backdrop.mounted && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": "Close navigation",
+				ref: backdrop.nodeRef,
+				...backdrop.transitionProps,
+				onClick: close,
+				className: "fixed inset-0 bg-black/30 transition data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"
+			}), panel.mounted && /* @__PURE__ */ jsx("div", {
+				ref: (node) => {
+					panelRef.current = node;
+					panel.nodeRef.current = node;
+				},
+				...panel.transitionProps,
+				className: "fixed inset-y-0 w-full max-w-80 p-2 transition duration-300 ease-in-out data-closed:-translate-x-full",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "flex h-full flex-col rounded-lg bg-white shadow-xs ring-1 ring-zinc-950/5 dark:bg-zinc-900 dark:ring-white/10",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "-mb-3 px-4 pt-3",
+						children: /* @__PURE__ */ jsx(NavbarItem, {
+							onClick: close,
+							"aria-label": "Close navigation",
+							children: /* @__PURE__ */ jsx(CloseMenuIcon$1, {})
+						})
+					}), children]
+				})
+			})]
+		})
+	}), document.body);
+}
+function SidebarLayout({ navbar, sidebar, children }) {
+	const [showSidebar, setShowSidebar] = useState(false);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative isolate flex min-h-svh w-full bg-white max-lg:flex-col lg:bg-zinc-100 dark:bg-zinc-900 dark:lg:bg-zinc-950",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "fixed inset-y-0 left-0 w-64 max-lg:hidden",
+				children: sidebar
+			}),
+			/* @__PURE__ */ jsx(MobileSidebar$1, {
+				open: showSidebar,
+				close: () => setShowSidebar(false),
+				children: sidebar
+			}),
+			/* @__PURE__ */ jsxs("header", {
+				className: "flex items-center px-4 lg:hidden",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "py-2.5",
+					children: /* @__PURE__ */ jsx(NavbarItem, {
+						onClick: () => setShowSidebar(true),
+						"aria-label": "Open navigation",
+						children: /* @__PURE__ */ jsx(OpenMenuIcon$1, {})
+					})
+				}), /* @__PURE__ */ jsx("div", {
+					className: "min-w-0 flex-1",
+					children: navbar
+				})]
+			}),
+			/* @__PURE__ */ jsx("main", {
+				className: "flex flex-1 flex-col pb-2 lg:min-w-0 lg:pt-2 lg:pr-2 lg:pl-64",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "grow p-6 lg:rounded-lg lg:bg-white lg:p-10 lg:shadow-xs lg:ring-1 lg:ring-zinc-950/5 dark:lg:bg-zinc-900 dark:lg:ring-white/10",
+					children: /* @__PURE__ */ jsx("div", {
+						className: "mx-auto max-w-6xl",
+						children
+					})
+				})
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/slider.tsx
+function Slider({ value: controlledValue, defaultValue = 0, min = 0, max = 100, step = 1, onChange, disabled = false, label, showValue = false, className }) {
+	const [internalValue, setInternalValue] = useState(defaultValue);
+	const value = controlledValue ?? internalValue;
+	const id = useId();
+	const handleChange = useCallback((e) => {
+		const next = Number(e.target.value);
+		setInternalValue(next);
+		onChange?.(next);
+	}, [onChange]);
+	const percentage = (value - min) / (max - min) * 100;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("w-full", className),
+		children: [(label || showValue) && /* @__PURE__ */ jsxs("div", {
+			className: "mb-2 flex items-center justify-between",
+			children: [label && /* @__PURE__ */ jsx("label", {
+				htmlFor: id,
+				className: "text-sm font-medium text-zinc-700 dark:text-zinc-300",
+				children: label
+			}), showValue && /* @__PURE__ */ jsx("span", {
+				className: "text-sm text-zinc-500 dark:text-zinc-400",
+				children: value
+			})]
+		}), /* @__PURE__ */ jsx("input", {
+			id,
+			type: "range",
+			min,
+			max,
+			step,
+			value,
+			disabled,
+			onChange: handleChange,
+			style: { "--slider-pct": `${percentage}%` },
+			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")
+		})]
+	});
+}
+//#endregion
+//#region src/components/stacked-layout.tsx
+function OpenMenuIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		"data-slot": "icon",
+		viewBox: "0 0 20 20",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", { d: "M2 6.75C2 6.33579 2.33579 6 2.75 6H17.25C17.6642 6 18 6.33579 18 6.75C18 7.16421 17.6642 7.5 17.25 7.5H2.75C2.33579 7.5 2 7.16421 2 6.75ZM2 13.25C2 12.8358 2.33579 12.5 2.75 12.5H17.25C17.6642 12.5 18 12.8358 18 13.25C18 13.6642 17.6642 14 17.25 14H2.75C2.33579 14 2 13.6642 2 13.25Z" })
+	});
+}
+function CloseMenuIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		"data-slot": "icon",
+		viewBox: "0 0 20 20",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", { d: "M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" })
+	});
+}
+function MobileSidebar({ open, close, children }) {
+	const panelRef = useRef(null);
+	const backdrop = useTransition(open);
+	const panel = useTransition(open);
+	useScrollLock(open);
+	useFocusTrap(panelRef, open);
+	useEscapeKey(close, open);
+	if (!(backdrop.mounted || panel.mounted)) return null;
+	return createPortal(/* @__PURE__ */ jsx(CloseContext.Provider, {
+		value: close,
+		children: /* @__PURE__ */ jsxs("div", {
+			role: "dialog",
+			"aria-modal": "true",
+			className: "lg:hidden",
+			children: [backdrop.mounted && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": "Close navigation",
+				ref: backdrop.nodeRef,
+				...backdrop.transitionProps,
+				onClick: close,
+				className: "fixed inset-0 bg-black/30 transition data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"
+			}), panel.mounted && /* @__PURE__ */ jsx("div", {
+				ref: (node) => {
+					panelRef.current = node;
+					panel.nodeRef.current = node;
+				},
+				...panel.transitionProps,
+				className: "fixed inset-y-0 w-full max-w-80 p-2 transition duration-300 ease-in-out data-closed:-translate-x-full",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "flex h-full flex-col rounded-lg bg-white shadow-xs ring-1 ring-zinc-950/5 dark:bg-zinc-900 dark:ring-white/10",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "-mb-3 px-4 pt-3",
+						children: /* @__PURE__ */ jsx(NavbarItem, {
+							onClick: close,
+							"aria-label": "Close navigation",
+							children: /* @__PURE__ */ jsx(CloseMenuIcon, {})
+						})
+					}), children]
+				})
+			})]
+		})
+	}), document.body);
+}
+function StackedLayout({ navbar, sidebar, children }) {
+	const [showSidebar, setShowSidebar] = useState(false);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative isolate flex min-h-svh w-full flex-col bg-white lg:bg-zinc-100 dark:bg-zinc-900 dark:lg:bg-zinc-950",
+		children: [
+			/* @__PURE__ */ jsx(MobileSidebar, {
+				open: showSidebar,
+				close: () => setShowSidebar(false),
+				children: sidebar
+			}),
+			/* @__PURE__ */ jsxs("header", {
+				className: "flex items-center px-4",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "py-2.5 lg:hidden",
+					children: /* @__PURE__ */ jsx(NavbarItem, {
+						onClick: () => setShowSidebar(true),
+						"aria-label": "Open navigation",
+						children: /* @__PURE__ */ jsx(OpenMenuIcon, {})
+					})
+				}), /* @__PURE__ */ jsx("div", {
+					className: "min-w-0 flex-1",
+					children: navbar
+				})]
+			}),
+			/* @__PURE__ */ jsx("main", {
+				className: "flex flex-1 flex-col pb-2 lg:px-2",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "grow p-6 lg:rounded-lg lg:bg-white lg:p-10 lg:shadow-xs lg:ring-1 lg:ring-zinc-950/5 dark:lg:bg-zinc-900 dark:lg:ring-white/10",
+					children: /* @__PURE__ */ jsx("div", {
+						className: "mx-auto max-w-6xl",
+						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: 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",
+					style: { color: "var(--rvui-text-2, oklch(0.55 0.012 218))" },
+					children: label
+				}), icon && /* @__PURE__ */ jsx("div", {
+					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",
+				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: "text-sm font-medium",
+					style: trendStyles[trend],
+					children: [
+						trendArrow[trend],
+						" ",
+						change
+					]
+				}), description && /* @__PURE__ */ jsx("span", {
+					className: "text-sm",
+					style: { color: "var(--rvui-text-2, oklch(0.55 0.012 218))" },
+					children: description
+				})]
+			})
+		]
+	});
+}
+function StatGroup({ className, children }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4", className),
+		children
+	});
+}
+//#endregion
+//#region src/components/stepper.tsx
+function Stepper({ steps, orientation = "horizontal", className }) {
+	return orientation === "vertical" ? /* @__PURE__ */ jsx(StepperVertical, {
+		steps,
+		className
+	}) : /* @__PURE__ */ jsx(StepperHorizontal, {
+		steps,
+		className
+	});
+}
+function StepIcon({ status }) {
+	if (status === "complete") return /* @__PURE__ */ jsx("span", {
+		className: "flex size-8 items-center justify-center rounded-full bg-blue-600",
+		children: /* @__PURE__ */ jsx("svg", {
+			viewBox: "0 0 16 16",
+			fill: "none",
+			className: "size-4 text-white",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx("path", {
+				d: "M3 8l3.5 3.5L13 4",
+				stroke: "currentColor",
+				strokeWidth: "2",
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			})
+		})
+	});
+	if (status === "current") return /* @__PURE__ */ jsx("span", {
+		className: "flex size-8 items-center justify-center rounded-full border-2 border-blue-600 bg-white dark:bg-zinc-900",
+		children: /* @__PURE__ */ jsx("span", { className: "size-2.5 rounded-full bg-blue-600" })
+	});
+	return /* @__PURE__ */ jsx("span", {
+		className: "flex size-8 items-center justify-center rounded-full border-2 border-zinc-300 bg-white dark:border-zinc-600 dark:bg-zinc-900",
+		children: /* @__PURE__ */ jsx("span", { className: "size-2.5 rounded-full bg-transparent" })
+	});
+}
+function StepperHorizontal({ steps, className }) {
+	return /* @__PURE__ */ jsx("nav", {
+		"aria-label": "Progress",
+		children: /* @__PURE__ */ jsx("ol", {
+			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: 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: 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: cn("mx-3 h-px flex-1", step.status === "complete" ? "bg-blue-600" : "bg-zinc-200 dark:bg-zinc-700")
+					})]
+				}, index);
+			})
+		})
+	});
+}
+function StepperVertical({ steps, className }) {
+	return /* @__PURE__ */ jsx("nav", {
+		"aria-label": "Progress",
+		children: /* @__PURE__ */ jsx("ol", {
+			className: cn("space-y-0", 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: "relative flex gap-4",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex flex-col items-center",
+						children: [/* @__PURE__ */ jsx(StepIcon, { status: step.status }), !isLast && /* @__PURE__ */ jsx("div", {
+							"aria-hidden": "true",
+							className: cn("w-px flex-1", step.status === "complete" ? "bg-blue-600" : "bg-zinc-200 dark:bg-zinc-700")
+						})]
+					}), /* @__PURE__ */ jsxs("div", {
+						className: cn("pb-6 pt-1", isLast && "pb-0"),
+						children: [/* @__PURE__ */ jsx("p", {
+							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",
+							children: step.description
+						})]
+					})]
+				}, index);
+			})
+		})
+	});
+}
+//#endregion
+//#region src/components/switch.tsx
+function SwitchGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "control",
+		...props,
+		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 }) {
+	return /* @__PURE__ */ jsx(FieldProvider, {
+		disabled,
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "field",
+			"data-disabled": disabled ? "" : void 0,
+			...props,
+			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")
+		})
+	});
+}
+var colors = {
+	"dark/zinc": ["[--switch-bg-ring:var(--color-zinc-950)]/90 [--switch-bg:var(--color-zinc-900)] dark:[--switch-bg-ring:transparent] dark:[--switch-bg:var(--color-white)]/25", "[--switch-ring:var(--color-zinc-950)]/90 [--switch-shadow:var(--color-black)]/10 [--switch:white] dark:[--switch-ring:var(--color-zinc-700)]/90"],
+	"dark/white": ["[--switch-bg-ring:var(--color-zinc-950)]/90 [--switch-bg:var(--color-zinc-900)] dark:[--switch-bg-ring:transparent] dark:[--switch-bg:var(--color-white)]", "[--switch-ring:var(--color-zinc-950)]/90 [--switch-shadow:var(--color-black)]/10 [--switch:white] dark:[--switch-ring:transparent] dark:[--switch:var(--color-zinc-900)]"],
+	dark: ["[--switch-bg-ring:var(--color-zinc-950)]/90 [--switch-bg:var(--color-zinc-900)] dark:[--switch-bg-ring:var(--color-white)]/15", "[--switch-ring:var(--color-zinc-950)]/90 [--switch-shadow:var(--color-black)]/10 [--switch:white]"],
+	zinc: ["[--switch-bg-ring:var(--color-zinc-700)]/90 [--switch-bg:var(--color-zinc-600)] dark:[--switch-bg-ring:transparent]", "[--switch-shadow:var(--color-black)]/10 [--switch:white] [--switch-ring:var(--color-zinc-700)]/90"],
+	white: ["[--switch-bg-ring:var(--color-black)]/15 [--switch-bg:white] dark:[--switch-bg-ring:transparent]", "[--switch-shadow:var(--color-black)]/10 [--switch-ring:transparent] [--switch:var(--color-zinc-950)]"],
+	red: ["[--switch-bg-ring:var(--color-red-700)]/90 [--switch-bg:var(--color-red-600)] dark:[--switch-bg-ring:transparent]", "[--switch:white] [--switch-ring:var(--color-red-700)]/90 [--switch-shadow:var(--color-red-900)]/20"],
+	orange: ["[--switch-bg-ring:var(--color-orange-600)]/90 [--switch-bg:var(--color-orange-500)] dark:[--switch-bg-ring:transparent]", "[--switch:white] [--switch-ring:var(--color-orange-600)]/90 [--switch-shadow:var(--color-orange-900)]/20"],
+	amber: ["[--switch-bg-ring:var(--color-amber-500)]/80 [--switch-bg:var(--color-amber-400)] dark:[--switch-bg-ring:transparent]", "[--switch-ring:transparent] [--switch-shadow:transparent] [--switch:var(--color-amber-950)]"],
+	yellow: ["[--switch-bg-ring:var(--color-yellow-400)]/80 [--switch-bg:var(--color-yellow-300)] dark:[--switch-bg-ring:transparent]", "[--switch-ring:transparent] [--switch-shadow:transparent] [--switch:var(--color-yellow-950)]"],
+	lime: ["[--switch-bg-ring:var(--color-lime-400)]/80 [--switch-bg:var(--color-lime-300)] dark:[--switch-bg-ring:transparent]", "[--switch-ring:transparent] [--switch-shadow:transparent] [--switch:var(--color-lime-950)]"],
+	green: ["[--switch-bg-ring:var(--color-green-700)]/90 [--switch-bg:var(--color-green-600)] dark:[--switch-bg-ring:transparent]", "[--switch:white] [--switch-ring:var(--color-green-700)]/90 [--switch-shadow:var(--color-green-900)]/20"],
+	emerald: ["[--switch-bg-ring:var(--color-emerald-600)]/90 [--switch-bg:var(--color-emerald-500)] dark:[--switch-bg-ring:transparent]", "[--switch:white] [--switch-ring:var(--color-emerald-600)]/90 [--switch-shadow:var(--color-emerald-900)]/20"],
+	teal: ["[--switch-bg-ring:var(--color-teal-700)]/90 [--switch-bg:var(--color-teal-600)] dark:[--switch-bg-ring:transparent]", "[--switch:white] [--switch-ring:var(--color-teal-700)]/90 [--switch-shadow:var(--color-teal-900)]/20"],
+	cyan: ["[--switch-bg-ring:var(--color-cyan-400)]/80 [--switch-bg:var(--color-cyan-300)] dark:[--switch-bg-ring:transparent]", "[--switch-ring:transparent] [--switch-shadow:transparent] [--switch:var(--color-cyan-950)]"],
+	sky: ["[--switch-bg-ring:var(--color-sky-600)]/80 [--switch-bg:var(--color-sky-500)] dark:[--switch-bg-ring:transparent]", "[--switch:white] [--switch-ring:var(--color-sky-600)]/80 [--switch-shadow:var(--color-sky-900)]/20"],
+	blue: ["[--switch-bg-ring:var(--color-blue-700)]/90 [--switch-bg:var(--color-blue-600)] dark:[--switch-bg-ring:transparent]", "[--switch:white] [--switch-ring:var(--color-blue-700)]/90 [--switch-shadow:var(--color-blue-900)]/20"],
+	indigo: ["[--switch-bg-ring:var(--color-indigo-600)]/90 [--switch-bg:var(--color-indigo-500)] dark:[--switch-bg-ring:transparent]", "[--switch:white] [--switch-ring:var(--color-indigo-600)]/90 [--switch-shadow:var(--color-indigo-900)]/20"],
+	violet: ["[--switch-bg-ring:var(--color-violet-600)]/90 [--switch-bg:var(--color-violet-500)] dark:[--switch-bg-ring:transparent]", "[--switch:white] [--switch-ring:var(--color-violet-600)]/90 [--switch-shadow:var(--color-violet-900)]/20"],
+	purple: ["[--switch-bg-ring:var(--color-purple-600)]/90 [--switch-bg:var(--color-purple-500)] dark:[--switch-bg-ring:transparent]", "[--switch:white] [--switch-ring:var(--color-purple-600)]/90 [--switch-shadow:var(--color-purple-900)]/20"],
+	fuchsia: ["[--switch-bg-ring:var(--color-fuchsia-600)]/90 [--switch-bg:var(--color-fuchsia-500)] dark:[--switch-bg-ring:transparent]", "[--switch:white] [--switch-ring:var(--color-fuchsia-600)]/90 [--switch-shadow:var(--color-fuchsia-900)]/20"],
+	pink: ["[--switch-bg-ring:var(--color-pink-600)]/90 [--switch-bg:var(--color-pink-500)] dark:[--switch-bg-ring:transparent]", "[--switch:white] [--switch-ring:var(--color-pink-600)]/90 [--switch-shadow:var(--color-pink-900)]/20"],
+	rose: ["[--switch-bg-ring:var(--color-rose-600)]/90 [--switch-bg:var(--color-rose-500)] dark:[--switch-bg-ring:transparent]", "[--switch:white] [--switch-ring:var(--color-rose-600)]/90 [--switch-shadow:var(--color-rose-900)]/20"]
+};
+function Switch({ color = "dark/zinc", className, checked: controlledChecked, defaultChecked, onChange, disabled, name, value, ...props }) {
+	const { checked, toggleProps } = useToggle({
+		checked: controlledChecked,
+		defaultChecked,
+		onChange,
+		disabled
+	});
+	const interactiveProps = useDataInteractive({ disabled });
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		role: "switch",
+		"data-slot": "control",
+		"aria-checked": checked,
+		"data-checked": checked ? "" : void 0,
+		"data-disabled": disabled ? "" : void 0,
+		disabled,
+		onClick: toggleProps.onClick,
+		onKeyDown: toggleProps.onKeyDown,
+		...interactiveProps,
+		...props,
+		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: 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")
+		})]
+	});
+}
+//#endregion
+//#region src/components/tabs.tsx
+var TabsContext = createContext(null);
+function useTabsContext() {
+	const ctx = use(TabsContext);
+	if (!ctx) throw new Error("Tabs subcomponents must be used inside <Tabs>");
+	return ctx;
+}
+function Tabs({ defaultTab, value, onChange, className, children }) {
+	const baseId = useId();
+	const [internalTab, setInternalTab] = useState(defaultTab ?? "");
+	const activeTab = value ?? internalTab;
+	const setActiveTab = (id) => {
+		setInternalTab(id);
+		onChange?.(id);
+	};
+	return /* @__PURE__ */ jsx(TabsContext, {
+		value: {
+			activeTab,
+			setActiveTab,
+			baseId
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			className,
+			children
+		})
+	});
+}
+function TabList({ className, children }) {
+	const listRef = useRef(null);
+	const handleKeyDown = (e) => {
+		if (!listRef.current) return;
+		const tabs = Array.from(listRef.current.querySelectorAll("[role=\"tab\"]"));
+		const current = tabs.indexOf(document.activeElement);
+		if (current === -1) return;
+		let next;
+		if (e.key === "ArrowRight") next = (current + 1) % tabs.length;
+		else if (e.key === "ArrowLeft") next = (current - 1 + tabs.length) % tabs.length;
+		else if (e.key === "Home") next = 0;
+		else if (e.key === "End") next = tabs.length - 1;
+		if (next !== void 0) {
+			e.preventDefault();
+			tabs[next]?.focus();
+			tabs[next]?.click();
+		}
+	};
+	return /* @__PURE__ */ jsx("div", {
+		ref: listRef,
+		role: "tablist",
+		onKeyDown: handleKeyDown,
+		className: cn("flex border-b border-zinc-200 dark:border-zinc-700", className),
+		children
+	});
+}
+function Tab({ id, className, children }) {
+	const { activeTab, setActiveTab, baseId } = useTabsContext();
+	const isActive = activeTab === id;
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		role: "tab",
+		id: `${baseId}-tab-${id}`,
+		"aria-controls": `${baseId}-panel-${id}`,
+		"aria-selected": isActive,
+		tabIndex: isActive ? 0 : -1,
+		onClick: () => setActiveTab(id),
+		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
+	});
+}
+function TabPanel({ id, className, children }) {
+	const { activeTab, baseId } = useTabsContext();
+	if (activeTab !== id) return null;
+	return /* @__PURE__ */ jsx("div", {
+		role: "tabpanel",
+		id: `${baseId}-panel-${id}`,
+		"aria-labelledby": `${baseId}-tab-${id}`,
+		tabIndex: 0,
+		className: cn("focus-visible:outline-none", className),
+		children
+	});
+}
+//#endregion
+//#region src/components/textarea-headless.tsx
+function Textarea({ className, resizable = true, disabled, invalid, ref, ...props }) {
+	const interactiveProps = useDataInteractive({ disabled });
+	const fieldProps = useFieldControlProps();
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "control",
+		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",
+			"dark:before:hidden",
+			"after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:ring-transparent after:ring-inset sm:focus-within:after:ring-2 sm:focus-within:after:ring-blue-500",
+			"has-data-disabled:opacity-50 has-data-disabled:before:bg-zinc-950/5 has-data-disabled:before:shadow-none"
+		]),
+		children: /* @__PURE__ */ jsx("textarea", {
+			ref,
+			disabled,
+			...props,
+			...interactiveProps,
+			...fieldProps,
+			"data-invalid": invalid ? "" : void 0,
+			"data-disabled": disabled ? "" : void 0,
+			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",
+				"bg-transparent dark:bg-white/5",
+				"focus:outline-hidden",
+				"data-invalid:border-red-500 data-invalid:data-hover:border-red-500 dark:data-invalid:border-red-600 dark:data-invalid:data-hover:border-red-600",
+				"disabled:border-zinc-950/20 dark:disabled:border-white/15 dark:disabled:bg-white/2.5 dark:data-hover:disabled:border-white/15",
+				resizable ? "resize-y" : "resize-none"
+			])
+		})
+	});
+}
+//#endregion
+//#region src/components/timeline.tsx
+function Timeline({ className, children }) {
+	return /* @__PURE__ */ jsx("ol", {
+		className: cn("relative", className),
+		children
+	});
+}
+function TimelineItem({ icon, date, title, description, isLast = false, className }) {
+	return /* @__PURE__ */ jsxs("li", {
+		className: cn("relative flex gap-4", !isLast && "pb-8", className),
+		children: [
+			!isLast && /* @__PURE__ */ jsx("div", {
+				"aria-hidden": "true",
+				className: "absolute left-4 top-8 -bottom-0 w-px bg-zinc-200 dark:bg-zinc-700"
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "relative z-10 flex size-8 shrink-0 items-center justify-center rounded-full bg-white ring-1 ring-zinc-200 dark:bg-zinc-900 dark:ring-zinc-700",
+				children: icon ?? /* @__PURE__ */ jsx("div", { className: "size-2 rounded-full bg-zinc-400 dark:bg-zinc-500" })
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex-1 pt-0.5",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-wrap items-baseline justify-between gap-x-4",
+					children: [/* @__PURE__ */ jsx("p", {
+						className: "text-sm font-semibold text-zinc-950 dark:text-white",
+						children: title
+					}), date && /* @__PURE__ */ jsx("time", {
+						className: "shrink-0 text-xs text-zinc-400 dark:text-zinc-500",
+						children: date
+					})]
+				}), description && /* @__PURE__ */ jsx("p", {
+					className: "mt-1 text-sm text-zinc-600 dark:text-zinc-400",
+					children: description
+				})]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/toast.tsx
+function toastReducer(state, action) {
+	switch (action.type) {
+		case "ADD": return [...state, action.toast];
+		case "REMOVE": return state.filter((t) => t.id !== action.id);
+	}
+}
+var ToastContext = createContext(null);
+function ToastProvider({ children }) {
+	const [toasts, dispatch] = useReducer(toastReducer, []);
+	const addToast = useCallback((toast) => {
+		const id = crypto.randomUUID();
+		dispatch({
+			type: "ADD",
+			toast: {
+				...toast,
+				id
+			}
+		});
+		return id;
+	}, []);
+	const removeToast = useCallback((id) => {
+		dispatch({
+			type: "REMOVE",
+			id
+		});
+	}, []);
+	return /* @__PURE__ */ jsxs(ToastContext, {
+		value: {
+			toasts,
+			addToast,
+			removeToast
+		},
+		children: [children, typeof document !== "undefined" && createPortal(/* @__PURE__ */ jsx(ToastList, {
+			toasts,
+			onRemove: removeToast
+		}), document.body)]
+	});
+}
+function useToast() {
+	const ctx = use(ToastContext);
+	if (!ctx) throw new Error("useToast must be used within a ToastProvider");
+	return ctx;
+}
+var variantClasses = {
+	default: "bg-white dark:bg-zinc-800 ring-zinc-950/10 dark:ring-white/10",
+	success: "bg-white dark:bg-zinc-800 ring-green-500/30",
+	error: "bg-white dark:bg-zinc-800 ring-red-500/30",
+	warning: "bg-white dark:bg-zinc-800 ring-amber-500/30",
+	info: "bg-white dark:bg-zinc-800 ring-blue-500/30"
+};
+var variantIconClasses = {
+	default: "hidden",
+	success: "text-green-500",
+	error: "text-red-500",
+	warning: "text-amber-500",
+	info: "text-blue-500"
+};
+var variantIcons = {
+	default: "",
+	success: "✓",
+	error: "✕",
+	warning: "!",
+	info: "i"
+};
+function ToastList({ toasts, onRemove }) {
+	if (toasts.length === 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		"aria-live": "assertive",
+		className: "pointer-events-none fixed inset-0 z-50 flex flex-col items-end justify-end gap-2 p-4 sm:p-6",
+		children: toasts.map((toast) => /* @__PURE__ */ jsx(ToastItem, {
+			toast,
+			onRemove
+		}, toast.id))
+	});
+}
+var EXIT_DURATION_MS = 150;
+function ToastItem({ toast, onRemove }) {
+	const variant = toast.variant ?? "default";
+	const [isExiting, setIsExiting] = useState(false);
+	const handleRemove = useCallback(() => {
+		setIsExiting(true);
+		setTimeout(() => onRemove(toast.id), EXIT_DURATION_MS);
+	}, [onRemove, toast.id]);
+	useEffect(() => {
+		const duration = toast.duration ?? 5e3;
+		if (duration <= 0) return;
+		const timer = setTimeout(handleRemove, duration);
+		return () => clearTimeout(timer);
+	}, [toast.duration, handleRemove]);
+	return /* @__PURE__ */ jsxs("div", {
+		role: "alert",
+		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: cn("mt-0.5 text-sm font-bold", variantIconClasses[variant]),
+				children: variantIcons[variant]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex-1",
+				children: [/* @__PURE__ */ jsx("p", {
+					className: "text-sm font-semibold text-zinc-950 dark:text-white",
+					children: toast.title
+				}), toast.description && /* @__PURE__ */ jsx("p", {
+					className: "mt-1 text-sm text-zinc-500 dark:text-zinc-400",
+					children: toast.description
+				})]
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": "Dismiss",
+				onClick: handleRemove,
+				className: "shrink-0 rounded-md text-zinc-400 hover:text-zinc-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 dark:text-zinc-500 dark:hover:text-zinc-300",
+				children: /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					children: "✕"
+				})
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/tooltip.tsx
+var sideClasses = {
+	top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
+	bottom: "top-full left-1/2 -translate-x-1/2 mt-2",
+	left: "right-full top-1/2 -translate-y-1/2 mr-2",
+	right: "left-full top-1/2 -translate-y-1/2 ml-2"
+};
+function Tooltip({ content, side = "top", className, delay = 200, children }) {
+	const id = useId();
+	const [visible, setVisible] = useState(false);
+	const timeoutRef = useRef(null);
+	const clear = useCallback(() => {
+		if (timeoutRef.current) {
+			window.clearTimeout(timeoutRef.current);
+			timeoutRef.current = null;
+		}
+	}, []);
+	const show = useCallback(() => {
+		clear();
+		timeoutRef.current = window.setTimeout(() => {
+			setVisible(true);
+		}, delay);
+	}, [delay, clear]);
+	const hide = useCallback(() => {
+		clear();
+		setVisible(false);
+	}, [clear]);
+	useEffect(() => {
+		return clear;
+	}, [clear]);
+	return /* @__PURE__ */ jsxs("span", {
+		className: "relative inline-flex",
+		onPointerEnter: show,
+		onPointerLeave: hide,
+		onMouseEnter: show,
+		onMouseLeave: hide,
+		onFocus: show,
+		onBlur: hide,
+		"aria-describedby": visible ? id : void 0,
+		children: [children, visible && /* @__PURE__ */ jsx("span", {
+			id,
+			role: "tooltip",
+			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
+//#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=use-theme-QxeZadnD.js.map