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

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

@@ -4,15 +4,15 @@ import { Card, CardContent, CardHeader, CardTitle } from './card';
 import { Badge } from './badge';
 
 export interface ThemePreviewProps {
-  themeName?;
-  showColors?;
-  showFonts?;
-  showNavigation?;
-  showSpacing?;
-  className?;
+  themeName?: string;
+  showColors?: boolean;
+  showFonts?: boolean;
+  showNavigation?: boolean;
+  showSpacing?: boolean;
+  className?: string;
 }
 
-export const ThemePreview= ({
+export const ThemePreview: React.FC<ThemePreviewProps> = ({
   themeName,
   showColors = true,
   showFonts = true,
@@ -43,13 +43,17 @@ export const ThemePreview= ({
         
         {/* Primary Colors */}
         <div>
-          <h5 className="text-sm font-medium text-gray-700 dark="grid grid-cols-5 gap-2">
+          <h5 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+            Primary Colors
+          </h5>
+          <div className="grid grid-cols-5 gap-2">
             {Object.entries(colors.primary).map(([shade, color]) => (
               <div key={shade} className="text-center">
                 <div
-                  className="w-12 h-12 rounded-lg border border-gray-200 dark={{ backgroundColor}}
+                  className="w-12 h-12 rounded-lg border border-gray-200 dark:border-gray-700 mb-1"
+                  style={{ backgroundColor: color }}
                 />
-                <span className="text-xs text-gray-600 dark}</span>
+                <span className="text-xs text-gray-600 dark:text-gray-400">{shade}</span>
               </div>
             ))}
           </div>
@@ -57,13 +61,18 @@ export const ThemePreview= ({
 
         {/* Semantic Colors */}
         <div>
-          <h5 className="text-sm font-medium text-gray-700 dark="grid grid-cols-2 gap-2">
+          <h5 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+            Semantic Colors
+          </h5>
+          <div className="grid grid-cols-2 gap-2">
             {Object.entries(colors.semantic).map(([name, color]) => (
               <div key={name} className="flex items-center gap-2">
                 <div
-                  className="w-6 h-6 rounded border border-gray-200 dark={{ backgroundColor}}
+                  className="w-6 h-6 rounded border border-gray-200 dark:border-gray-700"
+                  style={{ backgroundColor: color }}
                 />
-                <span className="text-sm text-gray-600 dark])/g, ' $1').trim()}
+                <span className="text-sm text-gray-600 dark:text-gray-400 capitalize">
+                  {name.replace(/([A-Z])/g, ' $1').trim()}
                 </span>
               </div>
             ))}
@@ -72,13 +81,17 @@ export const ThemePreview= ({
 
         {/* Neutral Colors */}
         <div>
-          <h5 className="text-sm font-medium text-gray-700 dark="grid grid-cols-5 gap-2">
+          <h5 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+            Neutral Colors
+          </h5>
+          <div className="grid grid-cols-5 gap-2">
             {Object.entries(colors.neutral).map(([shade, color]) => (
               <div key={shade} className="text-center">
                 <div
-                  className="w-12 h-12 rounded-lg border border-gray-200 dark={{ backgroundColor}}
+                  className="w-12 h-12 rounded-lg border border-gray-200 dark:border-gray-700 mb-1"
+                  style={{ backgroundColor: color }}
                 />
-                <span className="text-xs text-gray-600 dark}</span>
+                <span className="text-xs text-gray-600 dark:text-gray-400">{shade}</span>
               </div>
             ))}
           </div>
@@ -98,15 +111,18 @@ export const ThemePreview= ({
         
         {/* Primary Font */}
         <div>
-          <h5 className="text-sm font-medium text-gray-700 dark}
+          <h5 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+            Primary Font: {fonts.primary.family}
           </h5>
           <div className="space-y-2">
             {Object.entries(fonts.primary.sizes).map(([size, value]) => (
               <div key={size} className="flex items-center gap-4">
-                <span className="text-xs text-gray-500 w-12">{size}="font-primary"
+                <span className="text-xs text-gray-500 w-12">{size}:</span>
+                <span 
+                  className="font-primary"
                   style={{ 
-                    fontSize,
-                    fontWeight] || 400
+                    fontSize: value,
+                    fontWeight: fonts.primary.weights[0] || 400
                   }}
                 >
                   The quick brown fox jumps over the lazy dog
@@ -118,13 +134,19 @@ export const ThemePreview= ({
 
         {/* Font Weights */}
         <div>
-          <h5 className="text-sm font-medium text-gray-700 dark="space-y-2">
+          <h5 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+            Font Weights
+          </h5>
+          <div className="space-y-2">
             {fonts.primary.weights.map((weight) => (
               <div key={weight} className="flex items-center gap-4">
-                <span className="text-xs text-gray-500 w-12">{weight}="font-primary"
+                <span className="text-xs text-gray-500 w-12">{weight}:</span>
+                <span 
+                  className="font-primary"
                   style={{ 
-                    fontSize,
-                    fontWeight}}
+                    fontSize: '1rem',
+                    fontWeight: weight
+                  }}
                 >
                   The quick brown fox jumps over the lazy dog
                 </span>
@@ -147,34 +169,50 @@ export const ThemePreview= ({
         
         <div className="grid grid-cols-2 gap-4">
           <div>
-            <h5 className="text-sm font-medium text-gray-700 dark="space-y-2 text-sm">
+            <h5 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+              Configuration
+            </h5>
+            <div className="space-y-2 text-sm">
               <div className="flex justify-between">
-                <span className="text-gray-600 dark="outline">{navigation.layout}</Badge>
+                <span className="text-gray-600 dark:text-gray-400">Layout:</span>
+                <Badge variant="outline">{navigation.layout}</Badge>
               </div>
               <div className="flex justify-between">
-                <span className="text-gray-600 dark="outline">{navigation.style}</Badge>
+                <span className="text-gray-600 dark:text-gray-400">Style:</span>
+                <Badge variant="outline">{navigation.style}</Badge>
               </div>
               <div className="flex justify-between">
-                <span className="text-gray-600 dark="outline">{navigation.behavior}</Badge>
+                <span className="text-gray-600 dark:text-gray-400">Behavior:</span>
+                <Badge variant="outline">{navigation.behavior}</Badge>
               </div>
               <div className="flex justify-between">
-                <span className="text-gray-600 dark="outline">{navigation.responsive}</Badge>
+                <span className="text-gray-600 dark:text-gray-400">Responsive:</span>
+                <Badge variant="outline">{navigation.responsive}</Badge>
               </div>
             </div>
           </div>
 
           <div>
-            <h5 className="text-sm font-medium text-gray-700 dark="space-y-2 text-sm">
+            <h5 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+              Animations
+            </h5>
+            <div className="space-y-2 text-sm">
               <div className="flex justify-between">
-                <span className="text-gray-600 dark="text-gray-900 dark}
+                <span className="text-gray-600 dark:text-gray-400">Duration:</span>
+                <span className="text-gray-900 dark:text-gray-100">
+                  {navigation.animations.duration.normal}
                 </span>
               </div>
               <div className="flex justify-between">
-                <span className="text-gray-600 dark="text-gray-900 dark}
+                <span className="text-gray-600 dark:text-gray-400">Easing:</span>
+                <span className="text-gray-900 dark:text-gray-100">
+                  {navigation.animations.easing.ease}
                 </span>
               </div>
               <div className="flex justify-between">
-                <span className="text-gray-600 dark="text-gray-900 dark}
+                <span className="text-gray-600 dark:text-gray-400">Stagger:</span>
+                <span className="text-gray-900 dark:text-gray-100">
+                  {navigation.animations.stagger.enabled ? 'Enabled' : 'Disabled'}
                 </span>
               </div>
             </div>
@@ -194,30 +232,41 @@ export const ThemePreview= ({
         <h4 className="text-lg font-semibold">Spacing</h4>
         
         <div>
-          <h5 className="text-sm font-medium text-gray-700 dark="space-y-2">
+          <h5 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+            Scale
+          </h5>
+          <div className="space-y-2">
             {Object.entries(spacing.scale).map(([size, value]) => (
               <div key={size} className="flex items-center gap-4">
-                <span className="text-xs text-gray-500 w-12">{size}="bg-blue-500 rounded"
+                <span className="text-xs text-gray-500 w-12">{size}:</span>
+                <div 
+                  className="bg-blue-500 rounded"
                   style={{ 
-                    width,
-                    height}}
+                    width: value,
+                    height: '1rem'
+                  }}
                 />
-                <span className="text-sm text-gray-600 dark}</span>
+                <span className="text-sm text-gray-600 dark:text-gray-400">{value}</span>
               </div>
             ))}
           </div>
         </div>
 
         <div>
-          <h5 className="text-sm font-medium text-gray-700 dark="space-y-2">
+          <h5 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+            Component Spacing
+          </h5>
+          <div className="space-y-2">
             {Object.entries(spacing.component).map(([component, spacingConfig]) => (
-              <div key={component} className="border border-gray-200 dark="text-xs font-medium text-gray-700 dark}
+              <div key={component} className="border border-gray-200 dark:border-gray-700 rounded p-2">
+                <h6 className="text-xs font-medium text-gray-700 dark:text-gray-300 mb-1 capitalize">
+                  {component}
                 </h6>
                 <div className="grid grid-cols-3 gap-2 text-xs">
                   {Object.entries(spacingConfig).map(([prop, value]) => (
                     <div key={prop} className="text-center">
                       <div className="text-gray-500 capitalize">{prop}</div>
-                      <div className="text-gray-900 dark)}</div>
+                      <div className="text-gray-900 dark:text-gray-100">{String(value)}</div>
                     </div>
                   ))}
                 </div>
@@ -235,11 +284,14 @@ export const ThemePreview= ({
         <CardHeader>
           <CardTitle className="flex items-center gap-2">
             <span className="text-2xl">
-              {targetTheme === 'stan-design' ? '⚡' === 'enterprise' ? '🏢' === 'harvey' ? '🎨' }
+              {targetTheme === 'stan-design' ? '⚡' : 
+               targetTheme === 'enterprise' ? '🏢' : 
+               targetTheme === 'harvey' ? '🎨' : '🎯'}
             </span>
             {themeConfig.meta.name} Theme Preview
           </CardTitle>
-          <p className="text-sm text-gray-600 dark}
+          <p className="text-sm text-gray-600 dark:text-gray-400">
+            {themeConfig.meta.description}
           </p>
           <div className="flex gap-2">
             <Badge variant="outline">{themeConfig.meta.category}</Badge>

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

@@ -1,17 +1,17 @@
 import React, { useState, useEffect } from 'react';
 import { Button } from './button';
 import { useTheme } from '../../themes';
-
+import type { MultiThemeConfig } from '../../themes';
 
 export interface ThemeSwitcherProps {
-  themes?, MultiThemeConfig>;
-  showPreview?;
-  showSystemTheme?;
-  className?;
-  variant?;
+  themes?: Record<string, MultiThemeConfig>;
+  showPreview?: boolean;
+  showSystemTheme?: boolean;
+  className?: string;
+  variant?: 'default' | 'compact' | 'detailed';
 }
 
-export const ThemeSwitcher= ({
+export const ThemeSwitcher: React.FC<ThemeSwitcherProps> = ({
   showPreview = true,
   showSystemTheme = true,
   className = '',
@@ -25,9 +25,9 @@ export const ThemeSwitcher= ({
   useEffect(() => {
     if (!showSystemTheme) return;
 
-    const mediaQuery = window.matchMedia('(prefers-color-scheme)');
-    const updateSystemTheme = (e) => {
-      setSystemTheme(e.matches ? 'dark' );
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    const updateSystemTheme = (e: MediaQueryListEvent | MediaQueryList) => {
+      setSystemTheme(e.matches ? 'dark' : 'light');
     };
 
     updateSystemTheme(mediaQuery);
@@ -36,33 +36,35 @@ export const ThemeSwitcher= ({
     return () => mediaQuery.removeEventListener('change', updateSystemTheme);
   }, [showSystemTheme]);
 
-  const getThemeDisplayName = (theme) => {
-    const themeNames, string> = {
-      'stan-design',
-      'enterprise',
-      'harvey'};
+  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) => {
-    const themeEmojis, string> = {
-      'stan-design',
-      'enterprise',
-      'harvey'};
+  const getThemeEmoji = (theme: string) => {
+    const themeEmojis: Record<string, string> = {
+      'stan-design': '⚡',
+      'enterprise': '🏢',
+      'harvey': '🎨'
+    };
     return themeEmojis[theme] || '🎯';
   };
 
-  const getThemeDescription = (theme) => {
+  const getThemeDescription = (theme: string) => {
     const themeConfig = getTheme(theme);
     return themeConfig?.meta?.description || 'Custom theme';
   };
 
-  const getThemeCategory = (theme) => {
+  const getThemeCategory = (theme: string) => {
     const themeConfig = getTheme(theme);
     return themeConfig?.meta?.category || 'custom';
   };
 
-  const handleThemeSwitch = (themeName) => {
+  const handleThemeSwitch = (themeName: string) => {
     setTheme(themeName);
     // Close preview if open
     if (showThemePreview) {
@@ -82,11 +84,12 @@ export const ThemeSwitcher= ({
 
   const renderCompactSwitcher = () => (
     <div className="flex items-center gap-2">
-      <span className="text-sm text-gray-600 dark="flex gap-1">
+      <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" }
+            variant={currentTheme === theme ? "default" : "outline"}
             size="sm"
             onClick={() => handleThemeSwitch(theme)}
             className="text-xs"
@@ -107,11 +110,12 @@ export const ThemeSwitcher= ({
           size="sm"
           onClick={() => setShowThemePreview(!showThemePreview)}
         >
-          {showThemePreview ? 'Hide' } Preview
+          {showThemePreview ? 'Hide' : 'Show'} Preview
         </Button>
       </div>
       
-      <div className="grid grid-cols-1 md) => {
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        {availableThemes.map((theme) => {
           const isActive = currentTheme === theme;
           
           return (
@@ -119,24 +123,31 @@ export const ThemeSwitcher= ({
               key={theme}
               className={`p-4 rounded-lg border-2 transition-all duration-200 cursor-pointer ${
                 isActive
-                  ? 'border-blue-500 bg-blue-50 dark}`}
+                  ? '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)}
+                  <h4 className="font-semibold text-gray-900 dark:text-gray-100">
+                    {getThemeDisplayName(theme)}
                   </h4>
-                  <p className="text-sm text-gray-500 dark)}
+                  <p className="text-sm text-gray-500 dark:text-gray-400">
+                    {getThemeCategory(theme)}
                   </p>
                 </div>
               </div>
               
-              <p className="text-sm text-gray-600 dark)}
+              <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="w-2 h-2 bg-blue-600 dark="text-sm font-medium">Active</span>
+                <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>
@@ -145,9 +156,14 @@ export const ThemeSwitcher= ({
       </div>
 
       {showSystemTheme && (
-        <div className="mt-6 p-4 bg-gray-50 dark="flex items-center justify-between">
+        <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-sm text-gray-600 dark}
+              <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
@@ -166,11 +182,12 @@ export const ThemeSwitcher= ({
   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">
+        <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" }
+              variant={currentTheme === theme ? "default" : "outline"}
               size="sm"
               onClick={() => handleThemeSwitch(theme)}
               className="text-sm"
@@ -189,13 +206,15 @@ export const ThemeSwitcher= ({
             onClick={() => setShowThemePreview(!showThemePreview)}
             className="text-xs"
           >
-            {showThemePreview ? 'Hide' } Theme Details
+            {showThemePreview ? 'Hide' : 'Show'} Theme Details
           </Button>
         </div>
       )}
 
       {showThemePreview && (
-        <div className="mt-3 p-3 bg-gray-50 dark="grid grid-cols-1 sm) => {
+        <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 (
@@ -203,15 +222,19 @@ export const ThemeSwitcher= ({
                   key={theme}
                   className={`p-2 rounded border text-xs ${
                     isActive
-                      ? 'border-blue-300 bg-blue-50 dark}`}
+                      ? '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)}
+                      <span className="text-blue-600 dark:text-blue-400 text-xs">●</span>
+                    )}
                   </div>
-                  <p className="text-gray-600 dark)}
+                  <p className="text-gray-600 dark:text-gray-400">
+                    {getThemeDescription(theme)}
                   </p>
                 </div>
               );
@@ -224,9 +247,12 @@ export const ThemeSwitcher= ({
 
   const renderContent = () => {
     switch (variant) {
-      case 'compact');
-      case 'detailed');
-      default);
+      case 'compact':
+        return renderCompactSwitcher();
+      case 'detailed':
+        return renderDetailedSwitcher();
+      default:
+        return renderDefaultSwitcher();
     }
   };