@rakeyshgidwani/roger-ui-bank-theme-jeremy 0.5.3

package/src/components/ui/theme-switcher.tsx

@@ -0,0 +1,267 @@
+'use client'
+
+import * as React from 'react';
+import { useState, useEffect } from 'react';;
+import { Button } from './button.js';
+import { useTheme } from '../../themes';
+import type { MultiThemeConfig } from '../../themes';
+
+export interface ThemeSwitcherProps {
+  themes?: Record<string, MultiThemeConfig>;
+  showPreview?: boolean;
+  showSystemTheme?: boolean;
+  className?: string;
+  variant?: 'default' | 'compact' | 'detailed';
+}
+
+export const ThemeSwitcher: React.FC<ThemeSwitcherProps> = ({
+  showPreview = true,
+  showSystemTheme = true,
+  className = '',
+  variant = 'default'
+}) => {
+  const { currentTheme, availableThemes, setTheme, getTheme } = useTheme();
+  const [systemTheme, setSystemTheme] = useState<'light' | 'dark'>('light');
+  const [showThemePreview, setShowThemePreview] = useState(false);
+
+  // Detect system theme preference
+  useEffect(() => {
+    if (!showSystemTheme) return;
+
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    const updateSystemTheme = (e: MediaQueryListEvent | MediaQueryList) => {
+      setSystemTheme(e.matches ? 'dark' : 'light');
+    };
+
+    updateSystemTheme(mediaQuery);
+    mediaQuery.addEventListener('change', updateSystemTheme);
+
+    return () => mediaQuery.removeEventListener('change', updateSystemTheme);
+  }, [showSystemTheme]);
+
+  const getThemeDisplayName = (theme: string) => {
+    const themeNames: Record<string, string> = {
+      'stan-design': 'Stan Design',
+      'enterprise': 'Enterprise',
+      'harvey': 'Harvey Creative'
+    };
+    return themeNames[theme] || theme;
+  };
+
+  const getThemeEmoji = (theme: string) => {
+    const themeEmojis: Record<string, string> = {
+      'stan-design': '⚡',
+      'enterprise': '🏢',
+      'harvey': '🎨'
+    };
+    return themeEmojis[theme] || '🎯';
+  };
+
+  const getThemeDescription = (theme: string) => {
+    const themeConfig = getTheme(theme);
+    return themeConfig?.meta?.description || 'Custom theme';
+  };
+
+  const getThemeCategory = (theme: string) => {
+    const themeConfig = getTheme(theme);
+    return themeConfig?.meta?.category || 'custom';
+  };
+
+  const handleThemeSwitch = (themeName: string) => {
+    setTheme(themeName);
+    // Close preview if open
+    if (showThemePreview) {
+      setShowThemePreview(false);
+    }
+  };
+
+  const handleSystemThemeToggle = () => {
+    // For now, we'll just toggle between light/dark variants
+    // In a real implementation, this would switch to a system-aware theme
+    const currentConfig = getTheme(currentTheme);
+    if (currentConfig) {
+      // This is a placeholder - in practice, you'd have system-aware themes
+      console.log('System theme toggle - would switch to system-aware variant');
+    }
+  };
+
+  const renderCompactSwitcher = () => (
+    <div className="flex items-center gap-2">
+      <span className="text-sm text-gray-600 dark:text-gray-400">Theme:</span>
+      <div className="flex gap-1">
+        {availableThemes.map((theme) => (
+          <Button
+            key={theme}
+            variant={currentTheme === theme ? "default" : "outline"}
+            size="sm"
+            onClick={() => handleThemeSwitch(theme)}
+            className="text-xs"
+          >
+            {getThemeEmoji(theme)} {getThemeDisplayName(theme)}
+          </Button>
+        ))}
+      </div>
+    </div>
+  );
+
+  const renderDetailedSwitcher = () => (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <h3 className="text-lg font-semibold">Theme Selection</h3>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => setShowThemePreview(!showThemePreview)}
+        >
+          {showThemePreview ? 'Hide' : 'Show'} Preview
+        </Button>
+      </div>
+      
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        {availableThemes.map((theme) => {
+          const isActive = currentTheme === theme;
+          
+          return (
+            <div
+              key={theme}
+              className={`p-4 rounded-lg border-2 transition-all duration-200 cursor-pointer ${
+                isActive
+                  ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
+                  : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
+              }`}
+              onClick={() => handleThemeSwitch(theme)}
+            >
+              <div className="flex items-center gap-3 mb-3">
+                <span className="text-2xl">{getThemeEmoji(theme)}</span>
+                <div>
+                  <h4 className="font-semibold text-gray-900 dark:text-gray-100">
+                    {getThemeDisplayName(theme)}
+                  </h4>
+                  <p className="text-sm text-gray-500 dark:text-gray-400">
+                    {getThemeCategory(theme)}
+                  </p>
+                </div>
+              </div>
+              
+              <p className="text-sm text-gray-600 dark:text-gray-300 mb-3">
+                {getThemeDescription(theme)}
+              </p>
+              
+              {isActive && (
+                <div className="flex items-center gap-2 text-blue-600 dark:text-blue-400">
+                  <div className="w-2 h-2 bg-blue-600 dark:bg-blue-400 rounded-full"></div>
+                  <span className="text-sm font-medium">Active</span>
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+
+      {showSystemTheme && (
+        <div className="mt-6 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
+          <div className="flex items-center justify-between">
+            <div>
+              <h4 className="font-medium text-gray-900 dark:text-gray-100">
+                System Theme Detection
+              </h4>
+              <p className="text-sm text-gray-600 dark:text-gray-400">
+                Current system preference: {systemTheme}
+              </p>
+            </div>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={handleSystemThemeToggle}
+            >
+              Follow System
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+
+  const renderDefaultSwitcher = () => (
+    <div className="space-y-3">
+      <div className="flex items-center gap-2">
+        <span className="text-sm font-medium text-gray-700 dark:text-gray-300">Theme:</span>
+        <div className="flex gap-2">
+          {availableThemes.map((theme) => (
+            <Button
+              key={theme}
+              variant={currentTheme === theme ? "default" : "outline"}
+              size="sm"
+              onClick={() => handleThemeSwitch(theme)}
+              className="text-sm"
+            >
+              {getThemeEmoji(theme)} {getThemeDisplayName(theme)}
+            </Button>
+          ))}
+        </div>
+      </div>
+
+      {showPreview && (
+        <div className="flex items-center gap-2">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => setShowThemePreview(!showThemePreview)}
+            className="text-xs"
+          >
+            {showThemePreview ? 'Hide' : 'Show'} Theme Details
+          </Button>
+        </div>
+      )}
+
+      {showThemePreview && (
+        <div className="mt-3 p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+            {availableThemes.map((theme) => {
+              const isActive = currentTheme === theme;
+              
+              return (
+                <div
+                  key={theme}
+                  className={`p-2 rounded border text-xs ${
+                    isActive
+                      ? 'border-blue-300 bg-blue-50 dark:bg-blue-900/20'
+                      : 'border-gray-200 dark:border-gray-700'
+                  }`}
+                >
+                  <div className="flex items-center gap-2 mb-1">
+                    <span>{getThemeEmoji(theme)}</span>
+                    <span className="font-medium">{getThemeDisplayName(theme)}</span>
+                    {isActive && (
+                      <span className="text-blue-600 dark:text-blue-400 text-xs">●</span>
+                    )}
+                  </div>
+                  <p className="text-gray-600 dark:text-gray-400">
+                    {getThemeDescription(theme)}
+                  </p>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+
+  const renderContent = () => {
+    switch (variant) {
+      case 'compact':
+        return renderCompactSwitcher();
+      case 'detailed':
+        return renderDetailedSwitcher();
+      default:
+        return renderDefaultSwitcher();
+    }
+  };
+
+  return (
+    <div className={`theme-switcher ${className}`}>
+      {renderContent()}
+    </div>
+  );
+};

package/src/components/ui/theme-toggle.tsx

@@ -0,0 +1,56 @@
+'use client'
+
+import * as React from 'react';
+import { useState, useEffect } from 'react';;
+import { Button } from './button.js';
+import { Moon, Sun } from 'lucide-react';
+
+export const ThemeToggle: React.FC = () => {
+  const [isDark, setIsDark] = useState(false);
+
+  useEffect(() => {
+    // Check initial theme from localStorage and DOM
+    const savedTheme = localStorage.getItem('theme');
+    const isDarkMode = savedTheme === 'dark' ||
+      (savedTheme === null && document.documentElement.classList.contains('dark'));
+
+    setIsDark(isDarkMode);
+
+    // Ensure DOM is in sync
+    if (isDarkMode) {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+  }, []);
+
+  const toggleTheme = () => {
+    const newDarkMode = !isDark;
+    setIsDark(newDarkMode);
+    
+    if (newDarkMode) {
+      document.documentElement.classList.add('dark');
+      localStorage.setItem('theme', 'dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+      localStorage.setItem('theme', 'light');
+    }
+  };
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      onClick={toggleTheme}
+      style={{ borderRadius: 'var(--cs-border-radius-full)' }}
+      aria-label={`Switch to ${isDark ? 'light' : 'dark'} mode`}
+      aria-pressed={isDark}
+    >
+      {isDark ? (
+        <Sun style={{ width: 'var(--button-icon-size)', height: 'var(--button-icon-size)' }} />
+      ) : (
+        <Moon style={{ width: 'var(--button-icon-size)', height: 'var(--button-icon-size)' }} />
+      )}
+    </Button>
+  );
+};

package/src/components/ui/token-demo.tsx

@@ -0,0 +1,198 @@
+'use client'
+
+import * as React from 'react';
+import { useState } from 'react';;
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card.js';
+import { Badge } from './badge.js';
+import { Button } from './button.js';
+import { useTheme } from '../../themes';
+import { createTokenManager } from '../../tokens';
+
+export const TokenDemo: React.FC = () => {
+  const { currentTheme, currentThemeConfig } = useTheme();
+  const [tokenManager] = useState(() => createTokenManager());
+  const [exportFormat, setExportFormat] = useState<'json' | 'css' | 'scss' | 'js' | 'ts'>('json');
+  const [exportedTokens, setExportedTokens] = useState<string>('');
+  const [tokenStats, setTokenStats] = useState<any>(null);
+
+  const generateTokens = () => {
+    if (currentThemeConfig) {
+      const tokens = tokenManager.generateTokens(currentThemeConfig);
+      const stats = tokenManager.getTokenStats();
+      setTokenStats(stats);
+      return tokens;
+    }
+    return null;
+  };
+
+  const exportTokens = () => {
+    if (currentThemeConfig) {
+      const tokens = tokenManager.generateTokens(currentThemeConfig);
+      const exported = tokenManager.exportTokens(tokens, exportFormat);
+      setExportedTokens(exported);
+    }
+  };
+
+  const exportAllFormats = () => {
+    if (currentThemeConfig) {
+      const tokens = tokenManager.generateTokens(currentThemeConfig);
+      const allFormats = ['json', 'css', 'scss', 'js', 'ts'] as const;
+      const results = allFormats.map(format => ({
+        format,
+        content: tokenManager.exportTokens(tokens, format)
+      }));
+      
+      const combined = results.map(r => `=== ${r.format.toUpperCase()} ===\n${r.content}\n\n`).join('');
+      setExportedTokens(combined);
+    }
+  };
+
+  const clearTokens = () => {
+    tokenManager.clearTokens();
+    setTokenStats(null);
+    setExportedTokens('');
+  };
+
+  return (
+    <div className="space-y-6">
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            🎨 Design Token System
+            <Badge variant="outline">Story 8</Badge>
+          </CardTitle>
+          <CardDescription>
+            Generate, validate, and export design tokens from your current theme
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="flex flex-wrap gap-2">
+            <Button onClick={generateTokens} variant="default">
+              Generate Tokens
+            </Button>
+            <Button onClick={exportTokens} variant="outline">
+              Export {exportFormat.toUpperCase()}
+            </Button>
+            <Button onClick={exportAllFormats} variant="outline">
+              Export All Formats
+            </Button>
+            <Button onClick={clearTokens} variant="destructive">
+              Clear Tokens
+            </Button>
+          </div>
+
+          <div className="flex items-center gap-4">
+            <label className="text-sm font-medium">Export Format:</label>
+            <select
+              value={exportFormat}
+              onChange={(e) => setExportFormat(e.target.value as any)}
+              className="px-3 py-1 border rounded text-sm"
+            >
+              <option value="json">JSON</option>
+              <option value="css">CSS</option>
+              <option value="scss">SCSS</option>
+              <option value="js">JavaScript</option>
+              <option value="ts">TypeScript</option>
+            </select>
+          </div>
+
+          {tokenStats && (
+            <div className="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
+              <h4 className="font-semibold mb-3">Token Statistics</h4>
+              <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
+                <div>
+                  <span className="font-medium">Total Themes:</span>
+                  <div className="text-lg font-bold">{tokenStats.totalThemes}</div>
+                </div>
+                <div>
+                  <span className="font-medium">Total Tokens:</span>
+                  <div className="text-lg font-bold">{tokenStats.totalTokens}</div>
+                </div>
+                <div>
+                  <span className="font-medium">Current Theme:</span>
+                  <div className="text-lg font-bold">{currentTheme}</div>
+                </div>
+                <div>
+                  <span className="font-medium">Theme Version:</span>
+                  <div className="text-lg font-bold">{currentThemeConfig?.meta.version || 'N/A'}</div>
+                </div>
+              </div>
+              
+              {tokenStats.tokenBreakdown && (
+                <div className="mt-4">
+                  <h5 className="font-medium mb-2">Token Breakdown:</h5>
+                  <div className="flex flex-wrap gap-2">
+                    {Object.entries(tokenStats.tokenBreakdown).map(([category, count]) => (
+                      <Badge key={category} variant="secondary">
+                        {category}: {count as number}
+                      </Badge>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {exportedTokens && (
+        <Card>
+          <CardHeader>
+            <CardTitle>Exported Tokens</CardTitle>
+            <CardDescription>
+              Tokens exported in {exportFormat.toUpperCase()} format
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="relative">
+              <Button
+                onClick={() => navigator.clipboard.writeText(exportedTokens)}
+                variant="outline"
+                size="sm"
+                className="absolute top-2 right-2"
+              >
+                Copy
+              </Button>
+              <pre className="bg-gray-900 text-green-400 p-4 rounded-lg text-sm overflow-x-auto max-h-96">
+                <code>{exportedTokens}</code>
+              </pre>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Current Theme Info</CardTitle>
+          <CardDescription>
+            Information about the currently active theme
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div>
+              <h4 className="font-medium mb-2">Theme Details</h4>
+              <div className="space-y-2 text-sm">
+                <div><span className="font-medium">Name:</span> {currentThemeConfig?.meta.name}</div>
+                <div><span className="font-medium">Description:</span> {currentThemeConfig?.meta.description}</div>
+                <div><span className="font-medium">Category:</span> {currentThemeConfig?.meta.category}</div>
+                <div><span className="font-medium">Version:</span> {currentThemeConfig?.meta.version}</div>
+                <div><span className="font-medium">Author:</span> {currentThemeConfig?.meta.author}</div>
+              </div>
+            </div>
+            <div>
+              <h4 className="font-medium mb-2">Font Configuration</h4>
+              <div className="space-y-2 text-sm">
+                <div><span className="font-medium">Primary:</span> {currentThemeConfig?.fonts.primary.family}</div>
+                <div><span className="font-medium">Secondary:</span> {currentThemeConfig?.fonts.secondary.family}</div>
+                <div><span className="font-medium">Display:</span> {currentThemeConfig?.fonts.display.family}</div>
+                <div><span className="font-medium">Body:</span> {currentThemeConfig?.fonts.body.family}</div>
+                <div><span className="font-medium">Mono:</span> {currentThemeConfig?.fonts.mono.family}</div>
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};