shadcn-theme-menu 1.1.2

package/README.md

@@ -0,0 +1,151 @@
+# shadcn-themes
+
+Beautiful theme components for shadcn/ui with 24+ color themes, dark/light mode, and animations.
+
+## Installation
+
+```bash
+# The package includes all required dependencies
+pnpm add shadcn-themes
+
+# Peer dependencies (usually already in your project)
+pnpm add react react-dom next-themes lucide-react
+```
+
+## Quick Start
+
+```tsx
+// 1. Import CSS
+import 'shadcn-themes/themes.css';
+
+// 2. Wrap app with ThemeProvider
+import { ThemeProvider } from 'shadcn-themes';
+
+<ThemeProvider attribute="class" defaultTheme="system">
+  {children}
+</ThemeProvider>
+
+// 3. Use components
+import { ThemeToggle, ThemeDropdown, CinematicThemeSwitcher } from 'shadcn-themes';
+
+<ThemeToggle />
+<ThemeDropdown />
+<CinematicThemeSwitcher />
+```
+
+## Components
+
+### ThemeToggle
+
+Simple light/dark mode toggle.
+
+```tsx
+<ThemeToggle mode="light-dark-system" />
+// or
+<ThemeToggle mode="light-dark" />
+```
+
+**Props:**
+- `mode?` - Include system option (default: `'light-dark-system'`)
+- `Button?` - Custom Button component
+- `DropdownMenu?` - Custom DropdownMenu components
+- `onThemeChange?` - Callback when theme changes
+
+### ThemeDropdown
+
+Full dropdown with 24+ color themes and live preview.
+
+```tsx
+<ThemeDropdown
+  iconSrc="/custom-icon.svg"
+  onColorThemeChange={(theme) => console.log(theme)}
+  onModeChange={(mode) => console.log(mode)}
+/>
+```
+
+**Props:**
+- `iconSrc?` - Custom icon path (default: Palette icon)
+- `Button?` - Custom Button component
+- `DropdownMenu?` - Custom DropdownMenu components
+- `onColorThemeChange?` - Callback when color theme changes
+- `onModeChange?` - Callback when light/dark mode changes
+
+### CinematicThemeSwitcher
+
+Animated toggle with particle effects.
+
+```tsx
+<CinematicThemeSwitcher />
+```
+
+### Available Themes
+
+24 themes: `modern-minimal`, `elegant-luxury`, `cyberpunk`, `twitter`, `mocha-mousse`, `bubblegum`, `amethyst-haze`, `pink-lemonade`, `notebook`, `doom-64`, `catppuccin`, `graphite`, `perpetuity`, `kodama-grove`, `cosmic-night`, `tangerine`, `quantum-rose`, `nature`, `bold-tech`, `amber-minimal`, `supabase`, `neo-brutalism`, `solar-dusk`, `claymorphism`, `pastel-dreams`
+
+## Custom Components
+
+Pass your own Button or DropdownMenu components:
+
+```tsx
+import { Button } from '@/components/ui/button';
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+
+<ThemeDropdown
+  Button={Button}
+  DropdownMenu={{
+    Root: DropdownMenu.Root,
+    Trigger: DropdownMenu.Trigger,
+    Content: DropdownMenu.Content,
+    Item: DropdownMenu.Item,
+    Label: DropdownMenu.Label,
+    Separator: DropdownMenu.Separator
+  }}
+/>
+```
+
+## Programmatic Usage
+
+```tsx
+import { themeNames, themeColors, formatThemeName } from 'shadcn-themes';
+
+// Set theme programmatically
+const setTheme = (themeName: string) => {
+  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'
+```
+
+## TypeScript
+
+Full TypeScript support with exported types:
+
+```tsx
+import type { ThemeProviderProps } from 'shadcn-themes';
+```
+
+## Demo
+
+Run the interactive demo:
+
+```bash
+pnpm demo
+```
+
+Or manually:
+```bash
+cd demo
+pnpm install
+pnpm dev
+```
+
+Opens at `http://localhost:3001`
+
+## License
+
+MIT

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "shadcn-theme-menu",
+  "version": "1.1.2",
+  "description": "A collection of beautiful shadcn/ui theme components with dynamic theme switching and animations",
+  "author": "vtempest",
+  "type": "module",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./themes.css": "./src/themes-shadcn.css"
+  },
+  "files": [
+    "src"
+  ],
+  "scripts": {
+    "ship": "npx standard-version --release-as patch; rm CHANGELOG.md; npm publish",
+    "demo": "cd demo && pnpm dev"
+  },
+  "sideEffects": [
+    "*.css"
+  ],
+  "keywords": [
+    "shadcn",
+    "shadcn-ui",
+    "themes",
+    "theme-switcher",
+    "dark-mode",
+    "light-mode",
+    "react",
+    "nextjs",
+    "tailwind"
+  ],
+  "dependencies": {
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-slot": "^1.2.4",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.5.0"
+  },
+  "peerDependencies": {
+    "framer-motion": ">=11.0.0",
+    "lucide-react": ">=0.400.0",
+    "next-auth": ">=4.0.0",
+    "next-themes": ">=0.3.0",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "peerDependenciesMeta": {
+    "framer-motion": {
+      "optional": true
+    },
+    "next-auth": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@types/react-window": "^2.0.0",
+    "@vitejs/plugin-react": "^6.0.1",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "vite": "^8.0.0"
+  }
+}

package/src/cinematic-theme-switcher.tsx

@@ -0,0 +1,303 @@
+'use client';
+
+import { Sun, Moon } from 'lucide-react';
+import { useState, useEffect, useRef } from 'react';
+import { motion } from 'framer-motion';
+import { useTheme } from 'next-themes';
+
+interface Particle {
+  id: number;
+  delay: number;
+  duration: number;
+}
+
+export default function Component() {
+  const { theme, setTheme, resolvedTheme } = useTheme();
+
+  // State Management
+  const [mounted, setMounted] = useState(false);
+  const [particles, setParticles] = useState<Particle[]>([]);
+  const [isAnimating, setIsAnimating] = useState(false);
+
+  // Ref to track toggle button DOM element
+  const toggleRef = useRef<HTMLButtonElement>(null);
+
+  // Track whether toggle is in checked (dark) or unchecked (light) position
+  const isDark = mounted && (theme === 'dark' || resolvedTheme === 'dark');
+
+  // Handle hydration - prevent mismatch
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  // Generate particles with different timing
+  const generateParticles = () => {
+    const newParticles: Particle[] = [];
+    const particleCount = 3; // Multiple layers
+
+    for (let i = 0; i < particleCount; i++) {
+      newParticles.push({
+        id: i,
+        delay: i * 0.1, // Stagger timing
+        duration: 0.6 + i * 0.1, // Different durations for depth
+      });
+    }
+
+    setParticles(newParticles);
+    setIsAnimating(true);
+
+    // Clear particles after animation
+    setTimeout(() => {
+      setIsAnimating(false);
+      setParticles([]);
+    }, 1000);
+  };
+
+  // Toggle handler - switches theme and triggers particles
+  const handleToggle = () => {
+    generateParticles();
+    setTheme(isDark ? 'light' : 'dark');
+  };
+
+  // Prevent hydration mismatch - show placeholder during SSR
+  if (!mounted) {
+    return (
+      <div className="relative inline-block">
+        <div className="relative flex h-[64px] w-[104px] items-center rounded-full bg-gray-200 p-1" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="relative inline-block">
+        {/* SVG Filter for Film Grain Texture */}
+        <svg className="absolute w-0 h-0">
+        <defs>
+          {/* Light mode grain - subtle */}
+          <filter id="grain-light">
+            <feTurbulence
+              type="fractalNoise"
+              baseFrequency="0.9"
+              numOctaves="4"
+              result="noise"
+            />
+            <feColorMatrix
+              in="noise"
+              type="saturate"
+              values="0"
+              result="desaturatedNoise"
+            />
+            <feComponentTransfer in="desaturatedNoise" result="lightGrain">
+              <feFuncA type="linear" slope="0.3" />
+            </feComponentTransfer>
+            <feBlend in="SourceGraphic" in2="lightGrain" mode="overlay" />
+          </filter>
+
+          {/* Dark mode grain - more visible */}
+          <filter id="grain-dark">
+            <feTurbulence
+              type="fractalNoise"
+              baseFrequency="0.9"
+              numOctaves="4"
+              result="noise"
+            />
+            <feColorMatrix
+              in="noise"
+              type="saturate"
+              values="0"
+              result="desaturatedNoise"
+            />
+            <feComponentTransfer in="desaturatedNoise" result="darkGrain">
+              <feFuncA type="linear" slope="0.5" />
+            </feComponentTransfer>
+            <feBlend in="SourceGraphic" in2="darkGrain" mode="overlay" />
+          </filter>
+        </defs>
+      </svg>
+
+      {/* Pill-shaped track container */}
+      <motion.button
+        ref={toggleRef}
+        onClick={handleToggle}
+        className="relative flex h-[64px] w-[104px] items-center rounded-full p-[6px] transition-all duration-300 focus:outline-none"
+        style={{
+          background: isDark
+            ? '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: isDark
+            ? `
+              inset 5px 5px 12px rgba(0, 0, 0, 0.9),
+              inset -5px -5px 12px rgba(71, 85, 105, 0.4),
+              inset 8px 8px 16px rgba(0, 0, 0, 0.7),
+              inset -8px -8px 16px rgba(100, 116, 139, 0.2),
+              inset 0 2px 4px rgba(0, 0, 0, 1),
+              inset 0 -2px 4px rgba(71, 85, 105, 0.4),
+              inset 0 0 20px rgba(0, 0, 0, 0.6),
+              0 1px 1px rgba(255, 255, 255, 0.05),
+              0 2px 4px rgba(0, 0, 0, 0.4),
+              0 8px 16px rgba(0, 0, 0, 0.4),
+              0 16px 32px rgba(0, 0, 0, 0.3),
+              0 24px 48px rgba(0, 0, 0, 0.2)
+            `
+            : `
+              inset 5px 5px 12px rgba(148, 163, 184, 0.5),
+              inset -5px -5px 12px rgba(255, 255, 255, 1),
+              inset 8px 8px 16px rgba(100, 116, 139, 0.3),
+              inset -8px -8px 16px rgba(255, 255, 255, 0.9),
+              inset 0 2px 4px rgba(148, 163, 184, 0.4),
+              inset 0 -2px 4px rgba(255, 255, 255, 1),
+              inset 0 0 20px rgba(203, 213, 225, 0.3),
+              0 1px 2px rgba(255, 255, 255, 1),
+              0 2px 4px rgba(0, 0, 0, 0.1),
+              0 8px 16px rgba(0, 0, 0, 0.08),
+              0 16px 32px rgba(0, 0, 0, 0.06),
+              0 24px 48px rgba(0, 0, 0, 0.04)
+            `,
+          border: isDark
+            ? '2px solid rgba(51, 65, 85, 0.6)'
+            : '2px solid rgba(203, 213, 225, 0.6)',
+          position: 'relative',
+        }}
+        aria-label={`Switch to ${isDark ? 'light' : 'dark'} mode`}
+        role="switch"
+        aria-checked={isDark}
+        whileTap={{ scale: 0.98 }}
+      >
+        {/* Deep inner groove/rim effect */}
+        <div
+          className="absolute inset-[3px] rounded-full pointer-events-none"
+          style={{
+            boxShadow: isDark
+              ? '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)',
+          }}
+        />
+
+        {/* Multi-layer glossy overlay */}
+        <div
+          className="absolute inset-0 rounded-full pointer-events-none"
+          style={{
+            background: isDark
+              ? `
+                radial-gradient(ellipse at top, rgba(71, 85, 105, 0.15) 0%, transparent 50%),
+                linear-gradient(to bottom, rgba(71, 85, 105, 0.2) 0%, transparent 30%, transparent 70%, rgba(0, 0, 0, 0.3) 100%)
+              `
+              : `
+                radial-gradient(ellipse at top, rgba(255, 255, 255, 0.8) 0%, transparent 50%),
+                linear-gradient(to bottom, rgba(255, 255, 255, 0.7) 0%, transparent 30%, transparent 70%, rgba(148, 163, 184, 0.15) 100%)
+              `,
+            mixBlendMode: 'overlay',
+          }}
+        />
+
+        {/* Ambient occlusion effect */}
+        <div
+          className="absolute inset-0 rounded-full pointer-events-none"
+          style={{
+            boxShadow: isDark
+              ? 'inset 0 0 15px rgba(0, 0, 0, 0.5)'
+              : 'inset 0 0 15px rgba(148, 163, 184, 0.2)',
+          }}
+        />
+        {/* Background Icons */}
+        <div className="absolute inset-0 flex items-center justify-between px-4">
+          <Sun size={20} className={isDark ? 'text-yellow-100' : 'text-amber-600'} />
+          <Moon size={20} className={isDark ? 'text-yellow-100' : 'text-slate-700'} />
+        </div>
+
+        {/* Circular Thumb with Bouncy Spring Physics */}
+        <motion.div
+          className="relative z-10 flex h-[44px] w-[44px] items-center justify-center rounded-full overflow-hidden"
+          style={{
+            background: isDark
+              ? 'linear-gradient(145deg, #64748b 0%, #475569 50%, #334155 100%)'
+              : 'linear-gradient(145deg, #ffffff 0%, #fefefe 50%, #f8fafc 100%)',
+            boxShadow: isDark
+              ? `
+                inset 2px 2px 4px rgba(100, 116, 139, 0.4),
+                inset -2px -2px 4px rgba(0, 0, 0, 0.8),
+                inset 0 1px 1px rgba(255, 255, 255, 0.15),
+                0 1px 2px rgba(255, 255, 255, 0.1),
+                0 8px 32px rgba(0, 0, 0, 0.6),
+                0 4px 12px rgba(0, 0, 0, 0.5),
+                0 2px 4px rgba(0, 0, 0, 0.4)
+              `
+              : `
+                inset 2px 2px 4px rgba(203, 213, 225, 0.3),
+                inset -2px -2px 4px rgba(255, 255, 255, 1),
+                inset 0 1px 2px rgba(255, 255, 255, 1),
+                0 1px 2px rgba(255, 255, 255, 1),
+                0 8px 32px rgba(0, 0, 0, 0.18),
+                0 4px 12px rgba(0, 0, 0, 0.12),
+                0 2px 4px rgba(0, 0, 0, 0.08)
+              `,
+            border: isDark
+              ? '2px solid rgba(148, 163, 184, 0.3)'
+              : '2px solid rgba(255, 255, 255, 0.9)',
+          }}
+          animate={{
+            x: isDark ? 46 : 0,
+          }}
+          transition={{
+            type: 'spring',
+            stiffness: 300, // Fast, responsive movement
+            damping: 20, // Bouncy feel with slight overshoot
+          }}
+        >
+          {/* Glossy shine overlay on thumb */}
+          <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',
+            }}
+          />
+          {/* Particle Layer - expanding circles from center with grainy texture */}
+          {isAnimating && particles.map((particle) => (
+            <motion.div
+              key={particle.id}
+              className="absolute inset-0 flex items-center justify-center pointer-events-none"
+            >
+              <motion.div
+                className="absolute rounded-full"
+                style={{
+                  width: '10px',
+                  height: '10px',
+                  background: isDark
+                    ? '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: isDark ? 6 : 8, opacity: [0, 1, 0] }}
+                transition={{
+                  duration: isDark ? 0.5 : particle.duration,
+                  delay: particle.delay,
+                  ease: 'easeOut',
+                }}
+              >
+                {/* Grainy texture overlay */}
+                <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',
+                  }}
+                />
+              </motion.div>
+            </motion.div>
+          ))}
+
+          {/* Icon */}
+          <div className="relative z-10">
+            {isDark ? (
+              <Moon size={20} className="text-yellow-200" />
+            ) : (
+              <Sun size={20} className="text-amber-500" />
+            )}
+          </div>
+        </motion.div>
+      </motion.button>
+    </div>
+  );
+}

package/src/components/ui/button.tsx

@@ -0,0 +1,56 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "../../lib/utils"
+
+const buttonVariants = cva(
+  "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",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }