@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.10 → 0.2.16

package/dist/components/ui/theme-switcher.js

@@ -1,264 +1,85 @@
-import React, { useState, useEffect } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
 import { Button } from './button';
 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');
+export const ThemeSwitcher = ({ showPreview = true, showSystemTheme = true, className = '', variant = 'default' }) => {
+    const { currentTheme, availableThemes, setTheme, getTheme } = useTheme();
+    const [systemTheme, setSystemTheme] = useState('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) => {
+            setSystemTheme(e.matches ? 'dark' : 'light');
+        };
+        updateSystemTheme(mediaQuery);
+        mediaQuery.addEventListener('change', updateSystemTheme);
+        return () => mediaQuery.removeEventListener('change', updateSystemTheme);
+    }, [showSystemTheme]);
+    const getThemeDisplayName = (theme) => {
+        const themeNames = {
+            'stan-design': 'Stan Design',
+            'enterprise': 'Enterprise',
+            'harvey': 'Harvey Creative'
+        };
+        return themeNames[theme] || theme;
     };
-
-    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'
+    const getThemeEmoji = (theme) => {
+        const themeEmojis = {
+            'stan-design': '⚡',
+            'enterprise': '🏢',
+            'harvey': '🎨'
+        };
+        return themeEmojis[theme] || '🎯';
     };
-    return themeNames[theme] || theme;
-  };
-
-  const getThemeEmoji = (theme: string) => {
-    const themeEmojis: Record<string, string> = {
-      'stan-design': '⚡',
-      'enterprise': '🏢',
-      'harvey': '🎨'
+    const getThemeDescription = (theme) => {
+        const themeConfig = getTheme(theme);
+        return themeConfig?.meta?.description || 'Custom theme';
     };
-    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>
-  );
+    const getThemeCategory = (theme) => {
+        const themeConfig = getTheme(theme);
+        return themeConfig?.meta?.category || 'custom';
+    };
+    const handleThemeSwitch = (themeName) => {
+        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 = () => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-sm text-gray-600 dark:text-gray-400", children: "Theme:" }), _jsx("div", { className: "flex gap-1", children: availableThemes.map((theme) => (_jsxs(Button, { variant: currentTheme === theme ? "default" : "outline", size: "sm", onClick: () => handleThemeSwitch(theme), className: "text-xs", children: [getThemeEmoji(theme), " ", getThemeDisplayName(theme)] }, theme))) })] }));
+    const renderDetailedSwitcher = () => (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("h3", { className: "text-lg font-semibold", children: "Theme Selection" }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setShowThemePreview(!showThemePreview), children: [showThemePreview ? 'Hide' : 'Show', " Preview"] })] }), _jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", children: availableThemes.map((theme) => {
+                    const isActive = currentTheme === theme;
+                    return (_jsxs("div", { 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), children: [_jsxs("div", { className: "flex items-center gap-3 mb-3", children: [_jsx("span", { className: "text-2xl", children: getThemeEmoji(theme) }), _jsxs("div", { children: [_jsx("h4", { className: "font-semibold text-gray-900 dark:text-gray-100", children: getThemeDisplayName(theme) }), _jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: getThemeCategory(theme) })] })] }), _jsx("p", { className: "text-sm text-gray-600 dark:text-gray-300 mb-3", children: getThemeDescription(theme) }), isActive && (_jsxs("div", { className: "flex items-center gap-2 text-blue-600 dark:text-blue-400", children: [_jsx("div", { className: "w-2 h-2 bg-blue-600 dark:bg-blue-400 rounded-full" }), _jsx("span", { className: "text-sm font-medium", children: "Active" })] }))] }, theme));
+                }) }), showSystemTheme && (_jsx("div", { className: "mt-6 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("h4", { className: "font-medium text-gray-900 dark:text-gray-100", children: "System Theme Detection" }), _jsxs("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: ["Current system preference: ", systemTheme] })] }), _jsx(Button, { variant: "outline", size: "sm", onClick: handleSystemThemeToggle, children: "Follow System" })] }) }))] }));
+    const renderDefaultSwitcher = () => (_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: "Theme:" }), _jsx("div", { className: "flex gap-2", children: availableThemes.map((theme) => (_jsxs(Button, { variant: currentTheme === theme ? "default" : "outline", size: "sm", onClick: () => handleThemeSwitch(theme), className: "text-sm", children: [getThemeEmoji(theme), " ", getThemeDisplayName(theme)] }, theme))) })] }), showPreview && (_jsx("div", { className: "flex items-center gap-2", children: _jsxs(Button, { variant: "ghost", size: "sm", onClick: () => setShowThemePreview(!showThemePreview), className: "text-xs", children: [showThemePreview ? 'Hide' : 'Show', " Theme Details"] }) })), showThemePreview && (_jsx("div", { className: "mt-3 p-3 bg-gray-50 dark:bg-gray-800 rounded-lg", children: _jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: availableThemes.map((theme) => {
+                        const isActive = currentTheme === theme;
+                        return (_jsxs("div", { 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'}`, children: [_jsxs("div", { className: "flex items-center gap-2 mb-1", children: [_jsx("span", { children: getThemeEmoji(theme) }), _jsx("span", { className: "font-medium", children: getThemeDisplayName(theme) }), isActive && (_jsx("span", { className: "text-blue-600 dark:text-blue-400 text-xs", children: "\u25CF" }))] }), _jsx("p", { className: "text-gray-600 dark:text-gray-400", children: getThemeDescription(theme) })] }, theme));
+                    }) }) }))] }));
+    const renderContent = () => {
+        switch (variant) {
+            case 'compact':
+                return renderCompactSwitcher();
+            case 'detailed':
+                return renderDetailedSwitcher();
+            default:
+                return renderDefaultSwitcher();
+        }
+    };
+    return (_jsx("div", { className: `theme-switcher ${className}`, children: renderContent() }));
 };

package/dist/components/ui/theme-toggle.esm.js

@@ -1,38 +1,25 @@
-import React, { useState, useEffect } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
 import { Button } from './button';
 import { Moon, Sun } from 'lucide-react';
-
-export const ThemeToggle: React.FC = () => {
-  const [isDark, setIsDark] = useState(false);
-
-  useEffect(() => {
-    // Check initial theme
-    const isDarkMode = document.documentElement.classList.contains('dark');
-    setIsDark(isDarkMode);
-  }, []);
-
-  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="sm"
-      onClick={toggleTheme}
-      className="h-8 w-8 px-0"
-      aria-label={`Switch to ${isDark ? 'light' : 'dark'} mode`}
-    >
-      {isDark ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
-    </Button>
-  );
+export const ThemeToggle = () => {
+    const [isDark, setIsDark] = useState(false);
+    useEffect(() => {
+        // Check initial theme
+        const isDarkMode = document.documentElement.classList.contains('dark');
+        setIsDark(isDarkMode);
+    }, []);
+    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 (_jsx(Button, { variant: "ghost", size: "sm", onClick: toggleTheme, className: "h-8 w-8 px-0", "aria-label": `Switch to ${isDark ? 'light' : 'dark'} mode`, children: isDark ? _jsx(Sun, { className: "h-4 w-4" }) : _jsx(Moon, { className: "h-4 w-4" }) }));
 };

package/dist/components/ui/theme-toggle.js

@@ -1,38 +1,25 @@
-import React, { useState, useEffect } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
 import { Button } from './button';
 import { Moon, Sun } from 'lucide-react';
-
-export const ThemeToggle: React.FC = () => {
-  const [isDark, setIsDark] = useState(false);
-
-  useEffect(() => {
-    // Check initial theme
-    const isDarkMode = document.documentElement.classList.contains('dark');
-    setIsDark(isDarkMode);
-  }, []);
-
-  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="sm"
-      onClick={toggleTheme}
-      className="h-8 w-8 px-0"
-      aria-label={`Switch to ${isDark ? 'light' : 'dark'} mode`}
-    >
-      {isDark ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
-    </Button>
-  );
+export const ThemeToggle = () => {
+    const [isDark, setIsDark] = useState(false);
+    useEffect(() => {
+        // Check initial theme
+        const isDarkMode = document.documentElement.classList.contains('dark');
+        setIsDark(isDarkMode);
+    }, []);
+    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 (_jsx(Button, { variant: "ghost", size: "sm", onClick: toggleTheme, className: "h-8 w-8 px-0", "aria-label": `Switch to ${isDark ? 'light' : 'dark'} mode`, children: isDark ? _jsx(Sun, { className: "h-4 w-4" }) : _jsx(Moon, { className: "h-4 w-4" }) }));
 };