shadcn-theme-menu 1.1.2 → 1.1.6

package/README.md

@@ -1,12 +1,52 @@
-# shadcn-themes
+<p align="center">
+    <img width="350px" src="https://i.imgur.com/mgErPzk.png" />
+<p align="center">
+    <a href="https://discord.gg/SJdBqBz3tV">
+        <img src="https://img.shields.io/discord/1110227955554209923.svg?label=Chat&logo=Discord&colorB=7289da&style=flat"
+            alt="Join Discord" />
+    </a>
+     <a href="https://github.com/OpenSourceAGI/appdemo-dev-tools/discussions">
+     <img alt="GitHub Stars" src="https://img.shields.io/github/stars/OpenSourceAGI/appdemo-dev-tools" /></a>
+    <a href="https://github.com/OpenSourceAGI/appdemo-dev-tools/discussions">
+    <img alt="GitHub Discussions"
+        src="https://img.shields.io/github/discussions/OpenSourceAGI/appdemo-dev-tools" />
+    </a>
+<br />
+    <a href="https://github.com/OpenSourceAGI/appdemo-dev-tools/pulse" alt="Activity">
+        <img src="https://img.shields.io/github/commit-activity/m/OpenSourceAGI/appdemo-dev-tools" />
+    </a>
+    <img src="https://img.shields.io/github/last-commit/OpenSourceAGI/appdemo-dev-tools.svg" alt="GitHub last commit" />
+<br />
+    <img src="https://img.shields.io/badge/Next.js-16-black" alt="Next.js" />
+    <a href="https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request">
+        <img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg"
+            alt="PRs Welcome" />
+    </a>
+    <a href="https://codespaces.new/OpenSourceAGI/appdemo-dev-tools">
+    <img src="https://github.com/codespaces/badge.svg" width="150" height="20" />
+    </a>
+</p>
+
+# shadcn-theme-menu
 
 Beautiful theme components for shadcn/ui with 24+ color themes, dark/light mode, and animations.
 
+## Features
+
+- **24+ pre-made themes** – from minimal and elegant to cyberpunk and app-inspired designs
+- **OKLCH colors** – modern color space for perceptually uniform colors and better accessibility
+- **Drop-in components** – `ThemeToggle`, `ThemeDropdown`, and `CinematicThemeSwitcher` with particle effects
+- **Fully type-safe** – complete TypeScript support with exported types
+- **Customizable** – pass your own Button/DropdownMenu components or set themes programmatically
+- **Persistent** – automatic `localStorage` support for color theme preferences
+
+---
+
 ## Installation
 
 ```bash
 # The package includes all required dependencies
-pnpm add shadcn-themes
+pnpm add shadcn-theme-menu
 
 # Peer dependencies (usually already in your project)
 pnpm add react react-dom next-themes lucide-react
@@ -16,17 +56,17 @@ pnpm add react react-dom next-themes lucide-react
 
 ```tsx
 // 1. Import CSS
-import 'shadcn-themes/themes.css';
+import 'shadcn-theme-menu/themes.css';
 
 // 2. Wrap app with ThemeProvider
-import { ThemeProvider } from 'shadcn-themes';
+import { ThemeProvider } from 'shadcn-theme-menu';
 
 <ThemeProvider attribute="class" defaultTheme="system">
   {children}
 </ThemeProvider>
 
 // 3. Use components
-import { ThemeToggle, ThemeDropdown, CinematicThemeSwitcher } from 'shadcn-themes';
+import { ThemeToggle, ThemeDropdown, CinematicThemeSwitcher } from 'shadcn-theme-menu';
 
 <ThemeToggle />
 <ThemeDropdown />
@@ -46,6 +86,7 @@ Simple light/dark mode toggle.
 ```
 
 **Props:**
+
 - `mode?` - Include system option (default: `'light-dark-system'`)
 - `Button?` - Custom Button component
 - `DropdownMenu?` - Custom DropdownMenu components
@@ -64,6 +105,7 @@ Full dropdown with 24+ color themes and live preview.
 ```
 
 **Props:**
+
 - `iconSrc?` - Custom icon path (default: Palette icon)
 - `Button?` - Custom Button component
 - `DropdownMenu?` - Custom DropdownMenu components
@@ -87,8 +129,8 @@ Animated toggle with particle effects.
 Pass your own Button or DropdownMenu components:
 
 ```tsx
-import { Button } from '@/components/ui/button';
-import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import { Button } from "@/components/ui/button";
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 
 <ThemeDropdown
   Button={Button}
@@ -98,27 +140,29 @@ import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
     Content: DropdownMenu.Content,
     Item: DropdownMenu.Item,
     Label: DropdownMenu.Label,
-    Separator: DropdownMenu.Separator
+    Separator: DropdownMenu.Separator,
   }}
-/>
+/>;
 ```
 
 ## Programmatic Usage
 
 ```tsx
-import { themeNames, themeColors, formatThemeName } from 'shadcn-themes';
+import { themeNames, themeColors, formatThemeName } from "shadcn-theme-menu";
 
 // Set theme programmatically
 const setTheme = (themeName: string) => {
-  localStorage.setItem('color-theme', themeName);
-  themeNames.forEach(t => document.documentElement.classList.remove(`theme-${t}`));
+  localStorage.setItem("color-theme", themeName);
+  themeNames.forEach((t) =>
+    document.documentElement.classList.remove(`theme-${t}`),
+  );
   document.documentElement.classList.add(`theme-${themeName}`);
 };
 
 // Get theme info
 console.log(themeNames); // Array of all theme names
-console.log(themeColors['cyberpunk']); // { primary: '#ff00c8', secondary: '#f0f0ff' }
-console.log(formatThemeName('modern-minimal')); // 'Modern Minimal'
+console.log(themeColors["cyberpunk"]); // { primary: '#ff00c8', secondary: '#f0f0ff' }
+console.log(formatThemeName("modern-minimal")); // 'Modern Minimal'
 ```
 
 ## TypeScript
@@ -126,7 +170,7 @@ console.log(formatThemeName('modern-minimal')); // 'Modern Minimal'
 Full TypeScript support with exported types:
 
 ```tsx
-import type { ThemeProviderProps } from 'shadcn-themes';
+import type { ThemeProviderProps } from "shadcn-theme-menu";
 ```
 
 ## Demo
@@ -138,14 +182,9 @@ pnpm demo
 ```
 
 Or manually:
+
 ```bash
 cd demo
 pnpm install
 pnpm dev
 ```
-
-Opens at `http://localhost:3001`
-
-## License
-
-MIT

package/dist/cinematic-theme-switcher.js

@@ -0,0 +1,206 @@
+"use client";
+import { useTheme as e } from "next-themes";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { Moon as r, Sun as i } from "lucide-react";
+import { useEffect as a, useRef as o, useState as s } from "react";
+import { motion as c } from "framer-motion";
+//#region src/cinematic-theme-switcher.tsx
+function l() {
+	let { theme: l, setTheme: u, resolvedTheme: d } = e(), [f, p] = s(!1), [m, h] = s([]), [g, _] = s(!1), v = o(null), y = f && (l === "dark" || d === "dark");
+	a(() => {
+		p(!0);
+	}, []);
+	let b = () => {
+		let e = [];
+		for (let t = 0; t < 3; t++) e.push({
+			id: t,
+			delay: t * .1,
+			duration: .6 + t * .1
+		});
+		h(e), _(!0), setTimeout(() => {
+			_(!1), h([]);
+		}, 1e3);
+	};
+	return f ? /* @__PURE__ */ n("div", {
+		className: "relative inline-block",
+		children: [/* @__PURE__ */ t("svg", {
+			className: "absolute w-0 h-0",
+			children: /* @__PURE__ */ n("defs", { children: [/* @__PURE__ */ n("filter", {
+				id: "grain-light",
+				children: [
+					/* @__PURE__ */ t("feTurbulence", {
+						type: "fractalNoise",
+						baseFrequency: "0.9",
+						numOctaves: "4",
+						result: "noise"
+					}),
+					/* @__PURE__ */ t("feColorMatrix", {
+						in: "noise",
+						type: "saturate",
+						values: "0",
+						result: "desaturatedNoise"
+					}),
+					/* @__PURE__ */ t("feComponentTransfer", {
+						in: "desaturatedNoise",
+						result: "lightGrain",
+						children: /* @__PURE__ */ t("feFuncA", {
+							type: "linear",
+							slope: "0.3"
+						})
+					}),
+					/* @__PURE__ */ t("feBlend", {
+						in: "SourceGraphic",
+						in2: "lightGrain",
+						mode: "overlay"
+					})
+				]
+			}), /* @__PURE__ */ n("filter", {
+				id: "grain-dark",
+				children: [
+					/* @__PURE__ */ t("feTurbulence", {
+						type: "fractalNoise",
+						baseFrequency: "0.9",
+						numOctaves: "4",
+						result: "noise"
+					}),
+					/* @__PURE__ */ t("feColorMatrix", {
+						in: "noise",
+						type: "saturate",
+						values: "0",
+						result: "desaturatedNoise"
+					}),
+					/* @__PURE__ */ t("feComponentTransfer", {
+						in: "desaturatedNoise",
+						result: "darkGrain",
+						children: /* @__PURE__ */ t("feFuncA", {
+							type: "linear",
+							slope: "0.5"
+						})
+					}),
+					/* @__PURE__ */ t("feBlend", {
+						in: "SourceGraphic",
+						in2: "darkGrain",
+						mode: "overlay"
+					})
+				]
+			})] })
+		}), /* @__PURE__ */ n(c.button, {
+			ref: v,
+			onClick: () => {
+				b(), u(y ? "light" : "dark");
+			},
+			className: "relative flex h-[64px] w-[104px] items-center rounded-full p-[6px] transition-all duration-300 focus:outline-none",
+			style: {
+				background: y ? "radial-gradient(ellipse at top left, #1e293b 0%, #0f172a 40%, #020617 100%)" : "radial-gradient(ellipse at top left, #ffffff 0%, #f1f5f9 40%, #cbd5e1 100%)",
+				boxShadow: y ? "\n              inset 5px 5px 12px rgba(0, 0, 0, 0.9),\n              inset -5px -5px 12px rgba(71, 85, 105, 0.4),\n              inset 8px 8px 16px rgba(0, 0, 0, 0.7),\n              inset -8px -8px 16px rgba(100, 116, 139, 0.2),\n              inset 0 2px 4px rgba(0, 0, 0, 1),\n              inset 0 -2px 4px rgba(71, 85, 105, 0.4),\n              inset 0 0 20px rgba(0, 0, 0, 0.6),\n              0 1px 1px rgba(255, 255, 255, 0.05),\n              0 2px 4px rgba(0, 0, 0, 0.4),\n              0 8px 16px rgba(0, 0, 0, 0.4),\n              0 16px 32px rgba(0, 0, 0, 0.3),\n              0 24px 48px rgba(0, 0, 0, 0.2)\n            " : "\n              inset 5px 5px 12px rgba(148, 163, 184, 0.5),\n              inset -5px -5px 12px rgba(255, 255, 255, 1),\n              inset 8px 8px 16px rgba(100, 116, 139, 0.3),\n              inset -8px -8px 16px rgba(255, 255, 255, 0.9),\n              inset 0 2px 4px rgba(148, 163, 184, 0.4),\n              inset 0 -2px 4px rgba(255, 255, 255, 1),\n              inset 0 0 20px rgba(203, 213, 225, 0.3),\n              0 1px 2px rgba(255, 255, 255, 1),\n              0 2px 4px rgba(0, 0, 0, 0.1),\n              0 8px 16px rgba(0, 0, 0, 0.08),\n              0 16px 32px rgba(0, 0, 0, 0.06),\n              0 24px 48px rgba(0, 0, 0, 0.04)\n            ",
+				border: y ? "2px solid rgba(51, 65, 85, 0.6)" : "2px solid rgba(203, 213, 225, 0.6)",
+				position: "relative"
+			},
+			"aria-label": `Switch to ${y ? "light" : "dark"} mode`,
+			role: "switch",
+			"aria-checked": y,
+			whileTap: { scale: .98 },
+			children: [
+				/* @__PURE__ */ t("div", {
+					className: "absolute inset-[3px] rounded-full pointer-events-none",
+					style: { boxShadow: y ? "inset 0 2px 6px rgba(0, 0, 0, 0.9), inset 0 -1px 3px rgba(71, 85, 105, 0.3)" : "inset 0 2px 6px rgba(100, 116, 139, 0.4), inset 0 -1px 3px rgba(255, 255, 255, 0.8)" }
+				}),
+				/* @__PURE__ */ t("div", {
+					className: "absolute inset-0 rounded-full pointer-events-none",
+					style: {
+						background: y ? "\n                radial-gradient(ellipse at top, rgba(71, 85, 105, 0.15) 0%, transparent 50%),\n                linear-gradient(to bottom, rgba(71, 85, 105, 0.2) 0%, transparent 30%, transparent 70%, rgba(0, 0, 0, 0.3) 100%)\n              " : "\n                radial-gradient(ellipse at top, rgba(255, 255, 255, 0.8) 0%, transparent 50%),\n                linear-gradient(to bottom, rgba(255, 255, 255, 0.7) 0%, transparent 30%, transparent 70%, rgba(148, 163, 184, 0.15) 100%)\n              ",
+						mixBlendMode: "overlay"
+					}
+				}),
+				/* @__PURE__ */ t("div", {
+					className: "absolute inset-0 rounded-full pointer-events-none",
+					style: { boxShadow: y ? "inset 0 0 15px rgba(0, 0, 0, 0.5)" : "inset 0 0 15px rgba(148, 163, 184, 0.2)" }
+				}),
+				/* @__PURE__ */ n("div", {
+					className: "absolute inset-0 flex items-center justify-between px-4",
+					children: [/* @__PURE__ */ t(i, {
+						size: 20,
+						className: y ? "text-yellow-100" : "text-amber-600"
+					}), /* @__PURE__ */ t(r, {
+						size: 20,
+						className: y ? "text-yellow-100" : "text-slate-700"
+					})]
+				}),
+				/* @__PURE__ */ n(c.div, {
+					className: "relative z-10 flex h-[44px] w-[44px] items-center justify-center rounded-full overflow-hidden",
+					style: {
+						background: y ? "linear-gradient(145deg, #64748b 0%, #475569 50%, #334155 100%)" : "linear-gradient(145deg, #ffffff 0%, #fefefe 50%, #f8fafc 100%)",
+						boxShadow: y ? "\n                inset 2px 2px 4px rgba(100, 116, 139, 0.4),\n                inset -2px -2px 4px rgba(0, 0, 0, 0.8),\n                inset 0 1px 1px rgba(255, 255, 255, 0.15),\n                0 1px 2px rgba(255, 255, 255, 0.1),\n                0 8px 32px rgba(0, 0, 0, 0.6),\n                0 4px 12px rgba(0, 0, 0, 0.5),\n                0 2px 4px rgba(0, 0, 0, 0.4)\n              " : "\n                inset 2px 2px 4px rgba(203, 213, 225, 0.3),\n                inset -2px -2px 4px rgba(255, 255, 255, 1),\n                inset 0 1px 2px rgba(255, 255, 255, 1),\n                0 1px 2px rgba(255, 255, 255, 1),\n                0 8px 32px rgba(0, 0, 0, 0.18),\n                0 4px 12px rgba(0, 0, 0, 0.12),\n                0 2px 4px rgba(0, 0, 0, 0.08)\n              ",
+						border: y ? "2px solid rgba(148, 163, 184, 0.3)" : "2px solid rgba(255, 255, 255, 0.9)"
+					},
+					animate: { x: y ? 46 : 0 },
+					transition: {
+						type: "spring",
+						stiffness: 300,
+						damping: 20
+					},
+					children: [
+						/* @__PURE__ */ t("div", {
+							className: "absolute inset-0 rounded-full pointer-events-none",
+							style: {
+								background: "linear-gradient(to bottom, rgba(255, 255, 255, 0.4) 0%, transparent 40%, rgba(0, 0, 0, 0.1) 100%)",
+								mixBlendMode: "overlay"
+							}
+						}),
+						g && m.map((e) => /* @__PURE__ */ t(c.div, {
+							className: "absolute inset-0 flex items-center justify-center pointer-events-none",
+							children: /* @__PURE__ */ t(c.div, {
+								className: "absolute rounded-full",
+								style: {
+									width: "10px",
+									height: "10px",
+									background: y ? "radial-gradient(circle, rgba(147, 197, 253, 0.5) 0%, rgba(147, 197, 253, 0) 70%)" : "radial-gradient(circle, rgba(251, 191, 36, 0.7) 0%, rgba(251, 191, 36, 0) 70%)",
+									mixBlendMode: "normal"
+								},
+								initial: {
+									scale: 0,
+									opacity: 0
+								},
+								animate: {
+									scale: y ? 6 : 8,
+									opacity: [
+										0,
+										1,
+										0
+									]
+								},
+								transition: {
+									duration: y ? .5 : e.duration,
+									delay: e.delay,
+									ease: "easeOut"
+								},
+								children: /* @__PURE__ */ t("div", {
+									className: "absolute inset-0 rounded-full opacity-40",
+									style: {
+										backgroundImage: "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E\")",
+										mixBlendMode: "overlay"
+									}
+								})
+							})
+						}, e.id)),
+						/* @__PURE__ */ t("div", {
+							className: "relative z-10",
+							children: y ? /* @__PURE__ */ t(r, {
+								size: 20,
+								className: "text-yellow-200"
+							}) : /* @__PURE__ */ t(i, {
+								size: 20,
+								className: "text-amber-500"
+							})
+						})
+					]
+				})
+			]
+		})]
+	}) : /* @__PURE__ */ t("div", {
+		className: "relative inline-block",
+		children: /* @__PURE__ */ t("div", { className: "relative flex h-[64px] w-[104px] items-center rounded-full bg-gray-200 p-1" })
+	});
+}
+//#endregion
+export { l as default };

package/dist/components/ui/avatar.js

@@ -0,0 +1,30 @@
+import { cn as e } from "../../lib/utils.js";
+import { jsx as t } from "react/jsx-runtime";
+import * as n from "react";
+//#region src/components/ui/avatar.tsx
+function r({ children: n, className: r, ...i }) {
+	return /* @__PURE__ */ t("div", {
+		className: e("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", r),
+		...i,
+		children: n
+	});
+}
+function i({ src: r, alt: i, className: a, ...o }) {
+	let [s, c] = n.useState(!1);
+	return !r || s ? null : /* @__PURE__ */ t("img", {
+		src: r,
+		alt: i,
+		className: e("aspect-square h-full w-full object-cover", a),
+		onError: () => c(!0),
+		...o
+	});
+}
+function a({ children: n, className: r, ...i }) {
+	return /* @__PURE__ */ t("div", {
+		className: e("flex h-full w-full items-center justify-center rounded-full bg-muted text-xs font-medium", r),
+		...i,
+		children: n
+	});
+}
+//#endregion
+export { r as Avatar, a as AvatarFallback, i as AvatarImage };

package/dist/components/ui/button.js

@@ -0,0 +1,39 @@
+import { cn as e } from "../../lib/utils.js";
+import { jsx as t } from "react/jsx-runtime";
+import * as n from "react";
+import { Slot as r } from "@radix-ui/react-slot";
+import { cva as i } from "class-variance-authority";
+//#region src/components/ui/button.tsx
+var a = i("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", {
+	variants: {
+		variant: {
+			default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+			destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+			outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+			secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+			ghost: "hover:bg-accent hover:text-accent-foreground",
+			link: "text-primary underline-offset-4 hover:underline"
+		},
+		size: {
+			default: "h-9 px-4 py-2",
+			sm: "h-8 rounded-md px-3 text-xs",
+			lg: "h-10 rounded-md px-8",
+			icon: "h-9 w-9"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+}), o = n.forwardRef(({ className: n, variant: i, size: o, asChild: s = !1, ...c }, l) => /* @__PURE__ */ t(s ? r : "button", {
+	className: e(a({
+		variant: i,
+		size: o,
+		className: n
+	})),
+	ref: l,
+	...c
+}));
+o.displayName = "Button";
+//#endregion
+export { o as Button };

package/dist/components/ui/dropdown-menu.js

@@ -0,0 +1,72 @@
+import { cn as e } from "../../lib/utils.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { Check as r, ChevronRight as i, Circle as a } from "lucide-react";
+import * as o from "react";
+import * as s from "@radix-ui/react-dropdown-menu";
+//#region src/components/ui/dropdown-menu.tsx
+var c = s.Root, l = s.Trigger, u = s.Portal, d = s.Sub, f = o.forwardRef(({ className: r, inset: a, children: o, ...c }, l) => /* @__PURE__ */ n(s.SubTrigger, {
+	ref: l,
+	className: e("flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent", a && "pl-8", r),
+	...c,
+	children: [o, /* @__PURE__ */ t(i, { className: "ml-auto h-4 w-4" })]
+}));
+f.displayName = s.SubTrigger.displayName;
+var p = o.forwardRef(({ className: n, ...r }, i) => /* @__PURE__ */ t(s.SubContent, {
+	ref: i,
+	className: e("z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", n),
+	...r
+}));
+p.displayName = s.SubContent.displayName;
+var m = o.forwardRef(({ className: n, sideOffset: r = 4, ...i }, a) => /* @__PURE__ */ t(s.Portal, { children: /* @__PURE__ */ t(s.Content, {
+	ref: a,
+	sideOffset: r,
+	className: e("z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", n),
+	...i
+}) }));
+m.displayName = s.Content.displayName;
+var h = o.forwardRef(({ className: n, inset: r, ...i }, a) => /* @__PURE__ */ t(s.Item, {
+	ref: a,
+	className: e("relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", r && "pl-8", n),
+	...i
+}));
+h.displayName = s.Item.displayName;
+var g = o.forwardRef(({ className: i, children: a, checked: o, ...c }, l) => /* @__PURE__ */ n(s.CheckboxItem, {
+	ref: l,
+	className: e("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", i),
+	checked: o,
+	...c,
+	children: [/* @__PURE__ */ t("span", {
+		className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center",
+		children: /* @__PURE__ */ t(s.ItemIndicator, { children: /* @__PURE__ */ t(r, { className: "h-4 w-4" }) })
+	}), a]
+}));
+g.displayName = s.CheckboxItem.displayName;
+var _ = o.forwardRef(({ className: r, children: i, ...o }, c) => /* @__PURE__ */ n(s.RadioItem, {
+	ref: c,
+	className: e("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", r),
+	...o,
+	children: [/* @__PURE__ */ t("span", {
+		className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center",
+		children: /* @__PURE__ */ t(s.ItemIndicator, { children: /* @__PURE__ */ t(a, { className: "h-2 w-2 fill-current" }) })
+	}), i]
+}));
+_.displayName = s.RadioItem.displayName;
+var v = o.forwardRef(({ className: n, inset: r, ...i }, a) => /* @__PURE__ */ t(s.Label, {
+	ref: a,
+	className: e("px-2 py-1.5 text-sm font-semibold", r && "pl-8", n),
+	...i
+}));
+v.displayName = s.Label.displayName;
+var y = o.forwardRef(({ className: n, ...r }, i) => /* @__PURE__ */ t(s.Separator, {
+	ref: i,
+	className: e("-mx-1 my-1 h-px bg-muted", n),
+	...r
+}));
+y.displayName = s.Separator.displayName;
+var b = ({ className: n, ...r }) => /* @__PURE__ */ t("span", {
+	className: e("ml-auto text-xs tracking-widest opacity-60", n),
+	...r
+});
+b.displayName = "DropdownMenuShortcut";
+//#endregion
+export { c as DropdownMenu, m as DropdownMenuContent, h as DropdownMenuItem, v as DropdownMenuLabel, u as DropdownMenuPortal, y as DropdownMenuSeparator, d as DropdownMenuSub, p as DropdownMenuSubContent, f as DropdownMenuSubTrigger, l as DropdownMenuTrigger };

package/dist/components/ui/sidebar.js

@@ -0,0 +1,31 @@
+import { cn as e } from "../../lib/utils.js";
+import { jsx as t } from "react/jsx-runtime";
+import * as n from "react";
+//#region src/components/ui/sidebar.tsx
+function r({ children: n, className: r, ...i }) {
+	return /* @__PURE__ */ t("ul", {
+		className: e("flex flex-col gap-1", r),
+		...i,
+		children: n
+	});
+}
+function i({ children: n, className: r, ...i }) {
+	return /* @__PURE__ */ t("li", {
+		className: e("", r),
+		...i,
+		children: n
+	});
+}
+function a({ children: r, className: i, size: a = "default", asChild: o, ...s }) {
+	let c = a === "lg" ? "h-12 text-sm" : a === "sm" ? "h-7 text-xs" : "h-8 text-sm";
+	return o && n.isValidElement(r) ? n.cloneElement(r, {
+		className: e("flex w-full items-center gap-2 rounded-md px-2 py-1.5 hover:bg-accent", c, i),
+		...s
+	}) : /* @__PURE__ */ t("button", {
+		className: e("flex w-full items-center gap-2 rounded-md px-2 py-1.5 hover:bg-accent", c, i),
+		...s,
+		children: r
+	});
+}
+//#endregion
+export { r as SidebarMenu, a as SidebarMenuButton, i as SidebarMenuItem };

package/dist/index.js

@@ -0,0 +1,6 @@
+import { ThemeProvider as e } from "./theme-provider.js";
+import { ThemeToggle as t } from "./theme-toggle.js";
+import { ThemeDropdown as n, formatThemeName as r, themeColors as i, themeNames as a } from "./theme-dropdown.js";
+import o from "./cinematic-theme-switcher.js";
+import { SidebarUserMenu as s } from "./sidebar-user-menu.js";
+export { o as CinematicThemeSwitcher, s as SidebarUserMenu, n as ThemeDropdown, e as ThemeProvider, t as ThemeToggle, r as formatThemeName, i as themeColors, a as themeNames };

package/dist/lib/utils.js

@@ -0,0 +1,8 @@
+import { clsx as e } from "clsx";
+import { twMerge as t } from "tailwind-merge";
+//#region src/lib/utils.ts
+function n(...n) {
+	return t(e(n));
+}
+//#endregion
+export { n as cn };