@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.7 → 0.2.9

package/dist/components/ui/theme-switcher.d.ts

@@ -0,0 +1,259 @@
+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
+
+    }
+  };
+
+  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/dist/components/ui/theme-switcher.esm.js

@@ -0,0 +1,238 @@
+import React, { useState, useEffect } from 'react';
+import { Button } from './button';
+import { useTheme } from '../../themes';
+
+
+export interface ThemeSwitcherProps {
+  themes?, MultiThemeConfig>;
+  showPreview?;
+  showSystemTheme?;
+  className?;
+  variant?;
+}
+
+export const ThemeSwitcher= ({
+  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)');
+    const updateSystemTheme = (e) => {
+      setSystemTheme(e.matches ? 'dark' );
+    };
+
+    updateSystemTheme(mediaQuery);
+    mediaQuery.addEventListener('change', updateSystemTheme);
+
+    return () => mediaQuery.removeEventListener('change', updateSystemTheme);
+  }, [showSystemTheme]);
+
+  const getThemeDisplayName = (theme) => {
+    const themeNames, string> = {
+      'stan-design',
+      'enterprise',
+      'harvey'};
+    return themeNames[theme] || theme;
+  };
+
+  const getThemeEmoji = (theme) => {
+    const themeEmojis, string> = {
+      'stan-design',
+      'enterprise',
+      'harvey'};
+    return themeEmojis[theme] || '🎯';
+  };
+
+  const getThemeDescription = (theme) => {
+    const themeConfig = getTheme(theme);
+    return themeConfig?.meta?.description || 'Custom theme';
+  };
+
+  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 = () => (
+    <div className="flex items-center gap-2">
+      <span className="text-sm text-gray-600 dark="flex gap-1">
+        {availableThemes.map((theme) => (
+          <Button
+            key={theme}
+            variant={currentTheme === theme ? "default" }
+            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' } Preview
+        </Button>
+      </div>
+      
+      <div className="grid grid-cols-1 md) => {
+          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}`}
+              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)}
+                  </h4>
+                  <p className="text-sm text-gray-500 dark)}
+                  </p>
+                </div>
+              </div>
+              
+              <p className="text-sm text-gray-600 dark)}
+              </p>
+              
+              {isActive && (
+                <div className="flex items-center gap-2 text-blue-600 dark="w-2 h-2 bg-blue-600 dark="text-sm font-medium">Active</span>
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+
+      {showSystemTheme && (
+        <div className="mt-6 p-4 bg-gray-50 dark="flex items-center justify-between">
+            <div>
+              <h4 className="font-medium text-gray-900 dark="text-sm text-gray-600 dark}
+              </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="flex gap-2">
+          {availableThemes.map((theme) => (
+            <Button
+              key={theme}
+              variant={currentTheme === theme ? "default" }
+              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' } Theme Details
+          </Button>
+        </div>
+      )}
+
+      {showThemePreview && (
+        <div className="mt-3 p-3 bg-gray-50 dark="grid grid-cols-1 sm) => {
+              const isActive = currentTheme === theme;
+              
+              return (
+                <div
+                  key={theme}
+                  className={`p-2 rounded border text-xs ${
+                    isActive
+                      ? 'border-blue-300 bg-blue-50 dark}`}
+                >
+                  <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)}
+                  </div>
+                  <p className="text-gray-600 dark)}
+                  </p>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+
+  const renderContent = () => {
+    switch (variant) {
+      case 'compact');
+      case 'detailed');
+      default);
+    }
+  };
+
+  return (
+    <div className={`theme-switcher ${className}`}>
+      {renderContent()}
+    </div>
+  );
+};