@codecanon/next-presets 0.0.1

package/dist/index.js

@@ -0,0 +1,936 @@
+import { ThemeProvider as ThemeProvider$1, useTheme as useTheme$1 } from "next-themes";
+import * as React from "react";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp, MonitorCog, Moon, Palette, Sun, XIcon } from "lucide-react";
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+import { cva } from "class-variance-authority";
+import { Dialog, ToggleGroup } from "radix-ui";
+//#region src/hooks/use-local-storage.ts
+function useLocalStorage(key, initialValue) {
+	const [storedValue, setStoredValue] = useState(() => {
+		try {
+			const item = window.localStorage.getItem(key);
+			return item ? JSON.parse(item) : initialValue;
+		} catch {
+			return initialValue;
+		}
+	});
+	const setValue = useCallback((value) => {
+		try {
+			setStoredValue((prev) => {
+				const next = value instanceof Function ? value(prev) : value;
+				window.localStorage.setItem(key, JSON.stringify(next));
+				return next;
+			});
+		} catch (error) {
+			console.error(`useLocalStorage: failed to set "${key}"`, error);
+		}
+	}, [key]);
+	const removeValue = useCallback(() => {
+		try {
+			window.localStorage.removeItem(key);
+			setStoredValue(initialValue);
+		} catch (error) {
+			console.error(`useLocalStorage: failed to remove "${key}"`, error);
+		}
+	}, [key]);
+	useEffect(() => {
+		const handler = (e) => {
+			if (e.key !== key) return;
+			try {
+				setStoredValue(e.newValue ? JSON.parse(e.newValue) : initialValue);
+			} catch {}
+		};
+		window.addEventListener("storage", handler);
+		return () => window.removeEventListener("storage", handler);
+	}, [key]);
+	return [
+		storedValue,
+		setValue,
+		removeValue
+	];
+}
+//#endregion
+//#region src/presets/index.ts
+const PRESETS = [
+	["nuteral", "Nuteral"],
+	["nuteral-accent", "Nuteral (Accent)"],
+	["new", "Anew"],
+	["red", "Red"],
+	["rose", "Rose"],
+	["orange", "Orange"],
+	["green", "Green"],
+	["blue", "Blue"],
+	["yellow", "Yellow"],
+	["violet", "Violet"],
+	["modern-minimal", "Modern Minimal"],
+	["violet-bloom", "Violet Bloom"],
+	["t3-chat", "T3 Chat"],
+	["twitter", "Twitter"],
+	["mocha-mousse", "Mocha Mousse"],
+	["bubblegum", "Bubblegum"],
+	["amethyst-haze", "Amethyst Haze"],
+	["notebook", "Notebook"],
+	["doom-64", "Doom 64"],
+	["catppuccin", "Catppuccin"],
+	["graphite", "Graphite"],
+	["perpetuity", "Perpetuity"],
+	["kodama-grove", "Kodama Grove"],
+	["cosmic-night", "Cosmic Night"],
+	["tangerine", "Tangerine"],
+	["quantum-rose", "Quantum Rose"],
+	["nature", "Nature"],
+	["bold-tech", "Bold Tech"],
+	["elegant-luxury", "Elegant Luxury"],
+	["amber-minimal", "Amber Minimal"],
+	["supabase", "Supabase"],
+	["neo-brutalism", "Neo Brutalism"],
+	["solar-dusk", "Solar Dusk"],
+	["claymorphism", "Claymorphism"],
+	["cyberpunk", "Cyberpunk"],
+	["pastel-dreams", "Pastel Dreams"],
+	["clean-slate", "Clean Slate"],
+	["caffeine", "Caffeine"],
+	["ocean-breeze", "Ocean Breeze"],
+	["retro-arcade", "Retro Arcade"],
+	["midnight-bloom", "Midnight Bloom"],
+	["candyland", "Candyland"],
+	["northern-lights", "Northern Lights"],
+	["vintage-paper", "Vintage Paper"],
+	["sunset-horizon", "Sunset Horizon"],
+	["starry-night", "Starry Night"],
+	["claude", "Claude"],
+	["vercel", "Vercel"],
+	["darkmatter", "Darkmatter"],
+	["mono", "Mono"],
+	["soft-pop", "Soft Pop"],
+	["sage-garden", "Sage Garden"]
+];
+const DEFAULT_PRESET = "nuteral";
+//#endregion
+//#region src/providers.tsx
+const DEFAULT_COLOR_SCHEME = "dark";
+const PresetContext = createContext({
+	setPreset: () => null,
+	resetPreset: () => null
+});
+function PresetProvider({ children, presetKey = "preset" }) {
+	const [preset, setPreset, resetPreset] = useLocalStorage(presetKey, DEFAULT_PRESET);
+	useEffect(() => {
+		const root = document.documentElement;
+		if (!root) return;
+		if (preset) root.setAttribute("data-preset", preset);
+		else root.removeAttribute("data-preset");
+	}, [preset]);
+	const presetContext = {
+		preset,
+		resetPreset,
+		setPreset
+	};
+	return /* @__PURE__ */ jsx(PresetContext.Provider, {
+		value: presetContext,
+		children
+	});
+}
+function usePreset() {
+	const context = useContext(PresetContext);
+	if (context === void 0) throw new Error("usePreset must be used within a PresetProvider");
+	return context;
+}
+function ThemeProvider({ children, defaultTheme = DEFAULT_COLOR_SCHEME, themeKey = "theme", ...nextThemeProps }) {
+	return /* @__PURE__ */ jsx(ThemeProvider$1, {
+		enableSystem: true,
+		enableColorScheme: true,
+		attribute: "class",
+		storageKey: themeKey,
+		defaultTheme,
+		...nextThemeProps,
+		children
+	});
+}
+function useTheme() {
+	const themeContext = useTheme$1();
+	const colorScheme = themeContext.resolvedTheme || DEFAULT_COLOR_SCHEME;
+	const isDarkTheme = colorScheme === "dark";
+	return {
+		...themeContext,
+		colorScheme,
+		isDarkTheme
+	};
+}
+//#endregion
+//#region src/hooks/use-boolean.ts
+function useBoolean(initialValue = false) {
+	const [value, setValue] = useState(initialValue);
+	const setTrue = useCallback(() => setValue(true), []);
+	const setFalse = useCallback(() => setValue(false), []);
+	return [
+		value,
+		useCallback((next) => setValue((v) => next ?? !v), []),
+		setTrue,
+		setFalse
+	];
+}
+//#endregion
+//#region src/lib/utils.ts
+function cn(...inputs) {
+	return twMerge(clsx(inputs));
+}
+//#endregion
+//#region src/components/ui/input.tsx
+function Input({ className, type, ...props }) {
+	return /* @__PURE__ */ jsx("input", {
+		type,
+		"data-slot": "input",
+		className: cn("h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", className),
+		...props
+	});
+}
+//#endregion
+//#region node_modules/@radix-ui/react-compose-refs/dist/index.mjs
+function setRef$1(ref, value) {
+	if (typeof ref === "function") return ref(value);
+	else if (ref !== null && ref !== void 0) ref.current = value;
+}
+function composeRefs$1(...refs) {
+	return (node) => {
+		let hasCleanup = false;
+		const cleanups = refs.map((ref) => {
+			const cleanup = setRef$1(ref, node);
+			if (!hasCleanup && typeof cleanup == "function") hasCleanup = true;
+			return cleanup;
+		});
+		if (hasCleanup) return () => {
+			for (let i = 0; i < cleanups.length; i++) {
+				const cleanup = cleanups[i];
+				if (typeof cleanup == "function") cleanup();
+				else setRef$1(refs[i], null);
+			}
+		};
+	};
+}
+//#endregion
+//#region node_modules/@radix-ui/react-slot/dist/index.mjs
+/* @__NO_SIDE_EFFECTS__ */
+function createSlot(ownerName) {
+	const SlotClone = /* @__PURE__ */ createSlotClone(ownerName);
+	const Slot2 = React.forwardRef((props, forwardedRef) => {
+		const { children, ...slotProps } = props;
+		const childrenArray = React.Children.toArray(children);
+		const slottable = childrenArray.find(isSlottable);
+		if (slottable) {
+			const newElement = slottable.props.children;
+			const newChildren = childrenArray.map((child) => {
+				if (child === slottable) {
+					if (React.Children.count(newElement) > 1) return React.Children.only(null);
+					return React.isValidElement(newElement) ? newElement.props.children : null;
+				} else return child;
+			});
+			return /* @__PURE__ */ jsx(SlotClone, {
+				...slotProps,
+				ref: forwardedRef,
+				children: React.isValidElement(newElement) ? React.cloneElement(newElement, void 0, newChildren) : null
+			});
+		}
+		return /* @__PURE__ */ jsx(SlotClone, {
+			...slotProps,
+			ref: forwardedRef,
+			children
+		});
+	});
+	Slot2.displayName = `${ownerName}.Slot`;
+	return Slot2;
+}
+var Slot = /* @__PURE__ */ createSlot("Slot");
+/* @__NO_SIDE_EFFECTS__ */
+function createSlotClone(ownerName) {
+	const SlotClone = React.forwardRef((props, forwardedRef) => {
+		const { children, ...slotProps } = props;
+		if (React.isValidElement(children)) {
+			const childrenRef = getElementRef(children);
+			const props2 = mergeProps(slotProps, children.props);
+			if (children.type !== React.Fragment) props2.ref = forwardedRef ? composeRefs$1(forwardedRef, childrenRef) : childrenRef;
+			return React.cloneElement(children, props2);
+		}
+		return React.Children.count(children) > 1 ? React.Children.only(null) : null;
+	});
+	SlotClone.displayName = `${ownerName}.SlotClone`;
+	return SlotClone;
+}
+var SLOTTABLE_IDENTIFIER = Symbol("radix.slottable");
+function isSlottable(child) {
+	return React.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
+}
+function mergeProps(slotProps, childProps) {
+	const overrideProps = { ...childProps };
+	for (const propName in childProps) {
+		const slotPropValue = slotProps[propName];
+		const childPropValue = childProps[propName];
+		if (/^on[A-Z]/.test(propName)) {
+			if (slotPropValue && childPropValue) overrideProps[propName] = (...args) => {
+				const result = childPropValue(...args);
+				slotPropValue(...args);
+				return result;
+			};
+			else if (slotPropValue) overrideProps[propName] = slotPropValue;
+		} else if (propName === "style") overrideProps[propName] = {
+			...slotPropValue,
+			...childPropValue
+		};
+		else if (propName === "className") overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" ");
+	}
+	return {
+		...slotProps,
+		...overrideProps
+	};
+}
+function getElementRef(element) {
+	let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
+	let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+	if (mayWarn) return element.ref;
+	getter = Object.getOwnPropertyDescriptor(element, "ref")?.get;
+	mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+	if (mayWarn) return element.props.ref;
+	return element.props.ref || element.ref;
+}
+//#endregion
+//#region src/lib/compose-refs.ts
+/**
+* Set a given ref to a given value
+* This utility takes care of different types of refs: callback refs and RefObject(s)
+*/
+function setRef(ref, value) {
+	if (typeof ref === "function") return ref(value);
+	if (ref !== null && ref !== void 0) ref.current = value;
+}
+/**
+* A utility to compose multiple refs together
+* Accepts callback refs and RefObject(s)
+*/
+function composeRefs(...refs) {
+	return (node) => {
+		let hasCleanup = false;
+		const cleanups = refs.map((ref) => {
+			const cleanup = setRef(ref, node);
+			if (!hasCleanup && typeof cleanup === "function") hasCleanup = true;
+			return cleanup;
+		});
+		if (hasCleanup) return () => {
+			for (let i = 0; i < cleanups.length; i++) {
+				const cleanup = cleanups[i];
+				if (typeof cleanup === "function") cleanup();
+				else setRef(refs[i], null);
+			}
+		};
+	};
+}
+/**
+* A custom hook that composes multiple refs
+* Accepts callback refs and RefObject(s)
+*/
+function useComposedRefs(...refs) {
+	return React.useCallback(composeRefs(...refs), refs);
+}
+//#endregion
+//#region src/components/ui/scroller.tsx
+const DATA_TOP_SCROLL = "data-top-scroll";
+const DATA_BOTTOM_SCROLL = "data-bottom-scroll";
+const DATA_LEFT_SCROLL = "data-left-scroll";
+const DATA_RIGHT_SCROLL = "data-right-scroll";
+const DATA_TOP_BOTTOM_SCROLL = "data-top-bottom-scroll";
+const DATA_LEFT_RIGHT_SCROLL = "data-left-right-scroll";
+const scrollerVariants = cva("", {
+	variants: {
+		orientation: {
+			vertical: [
+				"overflow-y-auto",
+				"data-[top-scroll=true]:[mask-image:linear-gradient(0deg,#000_calc(100%_-_var(--scroll-shadow-size)),transparent)]",
+				"data-[bottom-scroll=true]:[mask-image:linear-gradient(180deg,#000_calc(100%_-_var(--scroll-shadow-size)),transparent)]",
+				"data-[top-bottom-scroll=true]:[mask-image:linear-gradient(#000,#000,transparent_0,#000_var(--scroll-shadow-size),#000_calc(100%_-_var(--scroll-shadow-size)),transparent)]"
+			],
+			horizontal: [
+				"overflow-x-auto",
+				"data-[left-scroll=true]:[mask-image:linear-gradient(270deg,#000_calc(100%_-_var(--scroll-shadow-size)),transparent)]",
+				"data-[right-scroll=true]:[mask-image:linear-gradient(90deg,#000_calc(100%_-_var(--scroll-shadow-size)),transparent)]",
+				"data-[left-right-scroll=true]:[mask-image:linear-gradient(to_right,#000,#000,transparent_0,#000_var(--scroll-shadow-size),#000_calc(100%_-_var(--scroll-shadow-size)),transparent)]"
+			]
+		},
+		hideScrollbar: {
+			true: "[-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+			false: ""
+		}
+	},
+	defaultVariants: {
+		orientation: "vertical",
+		hideScrollbar: false
+	}
+});
+function Scroller(props) {
+	const { orientation = "vertical", hideScrollbar, className, size = 40, offset = 0, scrollStep = 40, style, asChild, withNavigation = false, scrollTriggerMode = "press", ref, ...scrollerProps } = props;
+	const containerRef = React.useRef(null);
+	const composedRef = useComposedRefs(ref, containerRef);
+	const [scrollVisibility, setScrollVisibility] = React.useState({
+		up: false,
+		down: false,
+		left: false,
+		right: false
+	});
+	const onScrollBy = React.useCallback((direction) => {
+		const container = containerRef.current;
+		if (!container) return;
+		({
+			up: () => container.scrollTop -= scrollStep,
+			down: () => container.scrollTop += scrollStep,
+			left: () => container.scrollLeft -= scrollStep,
+			right: () => container.scrollLeft += scrollStep
+		})[direction]();
+	}, [scrollStep]);
+	const scrollHandlers = React.useMemo(() => ({
+		up: () => onScrollBy("up"),
+		down: () => onScrollBy("down"),
+		left: () => onScrollBy("left"),
+		right: () => onScrollBy("right")
+	}), [onScrollBy]);
+	React.useLayoutEffect(() => {
+		const container = containerRef.current;
+		if (!container) return;
+		function onScroll() {
+			if (!container) return;
+			if (orientation === "vertical") {
+				const scrollTop = container.scrollTop;
+				const clientHeight = container.clientHeight;
+				const scrollHeight = container.scrollHeight;
+				if (withNavigation) setScrollVisibility((prev) => {
+					const newUp = scrollTop > offset;
+					const newDown = scrollTop + clientHeight < scrollHeight;
+					if (prev.up !== newUp || prev.down !== newDown) return {
+						...prev,
+						up: newUp,
+						down: newDown
+					};
+					return prev;
+				});
+				const hasTopScroll = scrollTop > offset;
+				const hasBottomScroll = scrollTop + clientHeight + offset < scrollHeight;
+				const isVerticallyScrollable = scrollHeight > clientHeight;
+				if (hasTopScroll && hasBottomScroll && isVerticallyScrollable) {
+					container.setAttribute(DATA_TOP_BOTTOM_SCROLL, "true");
+					container.removeAttribute(DATA_TOP_SCROLL);
+					container.removeAttribute(DATA_BOTTOM_SCROLL);
+				} else {
+					container.removeAttribute(DATA_TOP_BOTTOM_SCROLL);
+					if (hasTopScroll) container.setAttribute(DATA_TOP_SCROLL, "true");
+					else container.removeAttribute(DATA_TOP_SCROLL);
+					if (hasBottomScroll && isVerticallyScrollable) container.setAttribute(DATA_BOTTOM_SCROLL, "true");
+					else container.removeAttribute(DATA_BOTTOM_SCROLL);
+				}
+			}
+			const scrollLeft = container.scrollLeft;
+			const clientWidth = container.clientWidth;
+			const scrollWidth = container.scrollWidth;
+			if (withNavigation) setScrollVisibility((prev) => {
+				const newLeft = scrollLeft > offset;
+				const newRight = scrollLeft + clientWidth < scrollWidth;
+				if (prev.left !== newLeft || prev.right !== newRight) return {
+					...prev,
+					left: newLeft,
+					right: newRight
+				};
+				return prev;
+			});
+			const hasLeftScroll = scrollLeft > offset;
+			const hasRightScroll = scrollLeft + clientWidth + offset < scrollWidth;
+			const isHorizontallyScrollable = scrollWidth > clientWidth;
+			if (hasLeftScroll && hasRightScroll && isHorizontallyScrollable) {
+				container.setAttribute(DATA_LEFT_RIGHT_SCROLL, "true");
+				container.removeAttribute(DATA_LEFT_SCROLL);
+				container.removeAttribute(DATA_RIGHT_SCROLL);
+			} else {
+				container.removeAttribute(DATA_LEFT_RIGHT_SCROLL);
+				if (hasLeftScroll) container.setAttribute(DATA_LEFT_SCROLL, "true");
+				else container.removeAttribute(DATA_LEFT_SCROLL);
+				if (hasRightScroll && isHorizontallyScrollable) container.setAttribute(DATA_RIGHT_SCROLL, "true");
+				else container.removeAttribute(DATA_RIGHT_SCROLL);
+			}
+		}
+		onScroll();
+		container.addEventListener("scroll", onScroll);
+		window.addEventListener("resize", onScroll);
+		return () => {
+			container.removeEventListener("scroll", onScroll);
+			window.removeEventListener("resize", onScroll);
+		};
+	}, [
+		orientation,
+		offset,
+		withNavigation
+	]);
+	const composedStyle = React.useMemo(() => ({
+		"--scroll-shadow-size": `${size}px`,
+		...style
+	}), [size, style]);
+	const activeDirections = React.useMemo(() => {
+		if (!withNavigation) return [];
+		return orientation === "vertical" ? ["up", "down"] : ["left", "right"];
+	}, [orientation, withNavigation]);
+	const ScrollerImpl = /* @__PURE__ */ jsx(asChild ? Slot : "div", {
+		"data-slot": "scroller",
+		...scrollerProps,
+		ref: composedRef,
+		style: composedStyle,
+		className: cn(scrollerVariants({
+			orientation,
+			hideScrollbar,
+			className
+		}))
+	});
+	const navigationButtons = React.useMemo(() => {
+		if (!withNavigation) return null;
+		return activeDirections.filter((direction) => scrollVisibility[direction]).map((direction) => /* @__PURE__ */ jsx(ScrollButton, {
+			"data-slot": "scroll-button",
+			direction,
+			onClick: scrollHandlers[direction],
+			triggerMode: scrollTriggerMode
+		}, direction));
+	}, [
+		activeDirections,
+		scrollVisibility,
+		scrollHandlers,
+		scrollTriggerMode,
+		withNavigation
+	]);
+	if (withNavigation) return /* @__PURE__ */ jsxs("div", {
+		className: "relative w-full",
+		children: [navigationButtons, ScrollerImpl]
+	});
+	return ScrollerImpl;
+}
+const scrollButtonVariants = cva("absolute z-10 transition-opacity [&>svg]:size-4 [&>svg]:opacity-80 hover:[&>svg]:opacity-100", {
+	variants: { direction: {
+		up: "-translate-x-1/2 top-2 left-1/2",
+		down: "-translate-x-1/2 bottom-2 left-1/2",
+		left: "-translate-y-1/2 top-1/2 left-2",
+		right: "-translate-y-1/2 top-1/2 right-2"
+	} },
+	defaultVariants: { direction: "up" }
+});
+const directionToIcon = {
+	up: ChevronUp,
+	down: ChevronDown,
+	left: ChevronLeft,
+	right: ChevronRight
+};
+function ScrollButton(props) {
+	const { direction, className, triggerMode = "press", onClick, ref, ...buttonProps } = props;
+	const [autoScrollTimer, setAutoScrollTimer] = React.useState(null);
+	const onAutoScrollStart = React.useCallback((event) => {
+		if (autoScrollTimer !== null) return;
+		if (triggerMode === "press") setAutoScrollTimer(window.setInterval(onClick ?? (() => {}), 50));
+		else if (triggerMode === "hover") setAutoScrollTimer(window.setInterval(() => {
+			if (event) onClick?.(event);
+		}, 50));
+	}, [
+		autoScrollTimer,
+		onClick,
+		triggerMode
+	]);
+	const onAutoScrollStop = React.useCallback(() => {
+		if (autoScrollTimer === null) return;
+		window.clearInterval(autoScrollTimer);
+		setAutoScrollTimer(null);
+	}, [autoScrollTimer]);
+	const eventHandlers = React.useMemo(() => {
+		return {
+			press: {
+				onPointerDown: onAutoScrollStart,
+				onPointerUp: onAutoScrollStop,
+				onPointerLeave: onAutoScrollStop,
+				onClick: () => {}
+			},
+			hover: {
+				onPointerEnter: onAutoScrollStart,
+				onPointerLeave: onAutoScrollStop,
+				onClick: () => {}
+			},
+			click: { onClick }
+		}[triggerMode] ?? {};
+	}, [
+		triggerMode,
+		onAutoScrollStart,
+		onAutoScrollStop,
+		onClick
+	]);
+	React.useEffect(() => {
+		return () => onAutoScrollStop();
+	}, [onAutoScrollStop]);
+	const Icon = directionToIcon[direction];
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		...buttonProps,
+		...eventHandlers,
+		ref,
+		className: cn(scrollButtonVariants({
+			direction,
+			className
+		})),
+		children: /* @__PURE__ */ jsx(Icon, {})
+	});
+}
+//#endregion
+//#region src/components/ui/sheet.tsx
+function Sheet({ ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Root, {
+		"data-slot": "sheet",
+		...props
+	});
+}
+function SheetPortal({ ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Portal, {
+		"data-slot": "sheet-portal",
+		...props
+	});
+}
+function SheetOverlay({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Overlay, {
+		"data-slot": "sheet-overlay",
+		className: cn("data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0 fixed inset-0 z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs", className),
+		...props
+	});
+}
+function SheetContent({ className, children, side = "right", ...props }) {
+	return /* @__PURE__ */ jsxs(SheetPortal, { children: [/* @__PURE__ */ jsx(SheetOverlay, {}), /* @__PURE__ */ jsx(Dialog.Content, {
+		"data-slot": "sheet-content",
+		"data-side": side,
+		className: cn("bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10 fixed z-50 flex flex-col gap-4 bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm", className),
+		...props,
+		children
+	})] });
+}
+function SheetContentClose() {
+	return /* @__PURE__ */ jsxs(Dialog.Close, {
+		className: "ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none",
+		children: [/* @__PURE__ */ jsx(XIcon, { className: "size-4" }), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "Close"
+		})]
+	});
+}
+function SheetHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sheet-header",
+		className: cn("flex flex-col gap-0.5 p-4", className),
+		...props
+	});
+}
+function SheetTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Title, {
+		"data-slot": "sheet-title",
+		className: cn("text-foreground text-base font-medium", className),
+		...props
+	});
+}
+//#endregion
+//#region src/components/ui/toggle.tsx
+const toggleVariants = cva("group/toggle inline-flex items-center justify-center gap-1 rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted data-[state=on]:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+	variants: {
+		variant: {
+			default: "bg-transparent",
+			outline: "border border-input bg-transparent hover:bg-muted"
+		},
+		size: {
+			default: "h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+			sm: "h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+			lg: "h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+//#endregion
+//#region src/components/ui/toggle-group.tsx
+const ToggleGroupContext = React.createContext({
+	size: "default",
+	variant: "default",
+	spacing: 0,
+	orientation: "horizontal"
+});
+function ToggleGroup$1({ className, variant, size, spacing = 0, orientation = "horizontal", children, ...props }) {
+	return /* @__PURE__ */ jsx(ToggleGroup.Root, {
+		"data-slot": "toggle-group",
+		"data-variant": variant,
+		"data-size": size,
+		"data-spacing": spacing,
+		"data-orientation": orientation,
+		style: { "--gap": spacing },
+		className: cn("group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-vertical:flex-col data-vertical:items-stretch", className),
+		...props,
+		children: /* @__PURE__ */ jsx(ToggleGroupContext.Provider, {
+			value: {
+				variant,
+				size,
+				spacing,
+				orientation
+			},
+			children
+		})
+	});
+}
+function ToggleGroupItem({ className, children, variant = "default", size = "default", ...props }) {
+	const context = React.useContext(ToggleGroupContext);
+	return /* @__PURE__ */ jsx(ToggleGroup.Item, {
+		"data-slot": "toggle-group-item",
+		"data-variant": context.variant || variant,
+		"data-size": context.size || size,
+		"data-spacing": context.spacing,
+		className: cn("shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 focus:z-10 focus-visible:z-10 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-1.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-1.5 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-lg group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t", toggleVariants({
+			variant: context.variant || variant,
+			size: context.size || size
+		}), className),
+		...props,
+		children
+	});
+}
+//#endregion
+//#region src/lib/format.ts
+function titleCase(str) {
+	if (!str) return "";
+	let s = str.replace(/[_-]/g, " ");
+	s = s.replace(/([a-z])([A-Z])/g, "$1 $2");
+	s = s.replace(/\s+/g, " ").trim();
+	return s.split(" ").map((word) => word.length > 0 ? word.charAt(0).toUpperCase() + word.slice(1).toLowerCase() : "").join(" ");
+}
+typeof navigator !== "undefined" && /Mac/i.test(navigator.platform);
+//#endregion
+//#region src/components/default-app-preview-card.tsx
+function DefaultAppPreviewCard({ presetKey, label = titleCase(presetKey || ""), active, showDock, highlighted, className, ref, ...props }) {
+	const { preset: activePresetKey } = usePreset();
+	const { colorScheme = "light" } = useTheme();
+	const themeKey = presetKey || activePresetKey;
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		...props,
+		className: cn("hover:bg-accent hover:text-accent-foreground group/theme-preset-card m-2 cursor-pointer overflow-hidden rounded-md border transition-all hover:shadow-xl", highlighted && "bg-accent text-accent-foreground shadow-xl", active && "ring-primary ring-3", highlighted && !active && "ring-accent-foreground ring-.5 ring-offset-1", "h-49 w-67 max-w-11/12", "flex flex-col", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex justify-center gap-2 border-b p-3 text-center",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-sm font-medium",
+				children: label
+			}), active && /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "text-sm font-bold",
+					children: "—"
+				}),
+				" ",
+				/* @__PURE__ */ jsx("span", {
+					className: "text-sm font-bold",
+					children: "active"
+				})
+			] })]
+		}), /* @__PURE__ */ jsx("div", {
+			"data-preset": themeKey,
+			className: cn("bg-background text-foreground flex-1 p-3", colorScheme === "dark" && "dark"),
+			children: /* @__PURE__ */ jsxs("div", {
+				className: cn("flex h-full gap-2", showDock && "flex-col-reverse"),
+				children: [/* @__PURE__ */ jsx("div", {
+					className: cn("bg-sidebar text-sidebar-foreground border-sidebar-border flex w-16 flex-col gap-1 rounded p-2", showDock && "mx-auto flex-row"),
+					children: [
+						1,
+						2,
+						3,
+						4
+					].map((i) => /* @__PURE__ */ jsx("div", { className: cn("h-2 rounded", showDock ? "w-2" : "h-2", i === 1 ? "bg-primary" : "bg-sidebar-accent opacity-50") }, i))
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-1 flex-col gap-2",
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center justify-between gap-2",
+							children: [/* @__PURE__ */ jsx("div", { className: "bg-muted h-2 flex-1 rounded" }), /* @__PURE__ */ jsx("div", { className: "bg-primary h-2 w-8 rounded" })]
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: "grid flex-1 grid-cols-1 gap-2 md:grid-cols-2",
+							children: [
+								1,
+								2,
+								3,
+								4
+							].map((i) => /* @__PURE__ */ jsxs("div", {
+								className: cn("bg-card border-border rounded border p-2", i > 2 && "hidden md:block"),
+								children: [/* @__PURE__ */ jsx("div", { className: "bg-card-foreground mb-1 h-1.5 w-3/4 rounded opacity-70" }), /* @__PURE__ */ jsx("div", { className: "bg-muted h-1 w-1/2 rounded" })]
+							}, i))
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex gap-2",
+							children: [/* @__PURE__ */ jsx("div", { className: "bg-secondary h-1.5 flex-1 rounded" }), /* @__PURE__ */ jsx("div", { className: "bg-accent h-1.5 w-12 rounded" })]
+						})
+					]
+				})]
+			})
+		})]
+	});
+}
+//#endregion
+//#region src/components/preset-picker.tsx
+const PresetsPickerContext = createContext({
+	open: false,
+	setOpen: () => {},
+	toggleOpen: () => {}
+});
+function PresetPicker({ children }) {
+	const [open, setOpen] = useState(false);
+	const toggleOpen = () => setOpen((open) => !open);
+	const context = useMemo(() => ({
+		open,
+		setOpen,
+		toggleOpen
+	}), [open]);
+	return /* @__PURE__ */ jsx(PresetsPickerContext.Provider, {
+		value: context,
+		children
+	});
+}
+function usePresetPicker(caller = "usePresetPicker") {
+	const context = useContext(PresetsPickerContext);
+	if (!context) throw new Error(`${caller} must be used within a PresetPicker`);
+	return context;
+}
+function PresetPickerThemeToggleGroup({ className, ...props }) {
+	const { theme, setTheme } = useTheme();
+	return /* @__PURE__ */ jsxs(ToggleGroup$1, {
+		...props,
+		className: cn("w-full border", className),
+		type: "single",
+		value: theme ?? "",
+		onValueChange: (value) => value && setTheme(value),
+		children: [
+			/* @__PURE__ */ jsxs(ToggleGroupItem, {
+				className: "flex-1",
+				value: "light",
+				children: [/* @__PURE__ */ jsx(Sun, {}), "Light"]
+			}),
+			/* @__PURE__ */ jsxs(ToggleGroupItem, {
+				className: "flex-1",
+				value: "dark",
+				children: [/* @__PURE__ */ jsx(Moon, {}), "Dark"]
+			}),
+			/* @__PURE__ */ jsxs(ToggleGroupItem, {
+				className: "flex-1",
+				value: "system",
+				children: [/* @__PURE__ */ jsx(MonitorCog, {}), "System"]
+			})
+		]
+	});
+}
+function PresetPickerContent({ showDock, previewCard: AppPreviewCard = DefaultAppPreviewCard, className, ...props }) {
+	const { open } = usePresetPicker("PresetPickerContent");
+	const { preset, setPreset } = usePreset();
+	const [mounted, setMounted] = useBoolean(false);
+	const [highlightedIndex, setHighlightedIndex] = useState(-1);
+	const [query, setQuery] = useState("");
+	const queryLower = query.trim().toLowerCase();
+	const scrollerRef = useRef(null);
+	const itemRefs = useRef(/* @__PURE__ */ new Map());
+	const filteredPresets = useMemo(() => PRESETS.filter(([, t]) => t?.toLowerCase().includes(queryLower)), [queryLower]);
+	useEffect(() => {
+		if (queryLower.trim()) setHighlightedIndex(-1);
+		else setHighlightedIndex(filteredPresets.findIndex(([id]) => id === preset));
+	}, [queryLower]);
+	useEffect(() => {
+		if (!open) setQuery("");
+	}, [open]);
+	useEffect(() => {
+		const highlightedElement = itemRefs.current.get(highlightedIndex);
+		if (highlightedElement && scrollerRef.current) {
+			const parent = scrollerRef.current;
+			const parentRect = parent.getBoundingClientRect();
+			const elementRect = highlightedElement.getBoundingClientRect();
+			if (elementRect.top < parentRect.top + 20) parent.scrollTop -= parentRect.top + 20 - elementRect.top;
+			else if (elementRect.bottom > parentRect.bottom - 20) parent.scrollTop += elementRect.bottom - (parentRect.bottom - 20);
+		}
+	}, [highlightedIndex]);
+	const handleKeyDown = (e) => {
+		if (filteredPresets.length === 0) return;
+		if (e.key === "ArrowDown") {
+			e.preventDefault();
+			setHighlightedIndex((prev) => prev < filteredPresets.length - 1 ? prev + 1 : prev);
+		} else if (e.key === "ArrowUp") {
+			e.preventDefault();
+			setHighlightedIndex((prev) => prev > 0 ? prev - 1 : prev);
+		} else if (e.key === "Enter") {
+			e.preventDefault();
+			const id = filteredPresets[highlightedIndex]?.[0];
+			setPreset(id);
+		}
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Input, {
+		type: "text",
+		placeholder: "Search themes...",
+		value: query,
+		onChange: (e) => setQuery(e.target.value),
+		onKeyDown: handleKeyDown,
+		autoFocus: true
+	}), /* @__PURE__ */ jsx(Scroller, {
+		className: "min-h-0 flex-1",
+		ref: scrollerRef,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("flex flex-col gap-1 overflow-y-auto", className),
+			...props,
+			children: filteredPresets.length > 0 ? filteredPresets.map(([id, label], index) => /* @__PURE__ */ jsx(AppPreviewCard, {
+				showDock: showDock ?? false,
+				ref: (el) => {
+					if (!mounted && preset === id) {
+						setMounted(true);
+						el?.scrollIntoView({
+							block: "center",
+							behavior: "instant"
+						});
+					}
+					if (el) itemRefs.current.set(index, el);
+					else itemRefs.current.delete(index);
+				},
+				active: preset === id,
+				highlighted: index === highlightedIndex,
+				label,
+				presetKey: id,
+				onClick: () => {
+					setPreset(id);
+					setHighlightedIndex(index);
+				}
+			}, id)) : /* @__PURE__ */ jsx("div", {
+				className: "text-muted-foreground py-8 text-center text-sm",
+				children: "No themes found"
+			})
+		})
+	})] });
+}
+function PresetPickerSheet({ children, ...props }) {
+	const { open, setOpen } = usePresetPicker("PresetPickerSheet");
+	return /* @__PURE__ */ jsx(Sheet, {
+		open,
+		onOpenChange: setOpen,
+		modal: false,
+		...props,
+		children: /* @__PURE__ */ jsxs(SheetContent, {
+			side: "left",
+			className: cn("pointer-events-auto max-w-screen data-[side=left]:w-80 data-[side=right]:w-80 sm:max-w-md", "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left"),
+			onPointerDownOutside: (e) => e.preventDefault(),
+			onInteractOutside: (e) => e.preventDefault(),
+			children: [
+				/* @__PURE__ */ jsx(SheetContentClose, {}),
+				/* @__PURE__ */ jsx(SheetHeader, { children: /* @__PURE__ */ jsxs(SheetTitle, {
+					className: "flex gap-2",
+					children: [/* @__PURE__ */ jsx(Palette, {}), "Preset Picker"]
+				}) }),
+				/* @__PURE__ */ jsx("div", {
+					className: "flex min-h-0 flex-1 flex-col gap-4 px-4",
+					children
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { DEFAULT_PRESET, DefaultAppPreviewCard, PRESETS, PresetPicker, PresetPickerContent, PresetPickerSheet, PresetPickerThemeToggleGroup, PresetProvider, ThemeProvider, usePreset, usePresetPicker, useTheme };