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

package/dist/components/ui/theme-switcher.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();
     }
   };
 

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

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { Button } from './button';
 import { Moon, Sun } from 'lucide-react';
 
-export const ThemeToggle= () => {
+export const ThemeToggle: React.FC = () => {
   const [isDark, setIsDark] = useState(false);
 
   useEffect(() => {
@@ -30,9 +30,9 @@ export const ThemeToggle= () => {
       size="sm"
       onClick={toggleTheme}
       className="h-8 w-8 px-0"
-      aria-label={`Switch to ${isDark ? 'light' } mode`}
+      aria-label={`Switch to ${isDark ? 'light' : 'dark'} mode`}
     >
-      {isDark ? <Sun className="h-4 w-4" /> ="h-4 w-4" />}
+      {isDark ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
     </Button>
   );
 };

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

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { Button } from './button';
 import { Moon, Sun } from 'lucide-react';
 
-export const ThemeToggle= () => {
+export const ThemeToggle: React.FC = () => {
   const [isDark, setIsDark] = useState(false);
 
   useEffect(() => {
@@ -30,9 +30,9 @@ export const ThemeToggle= () => {
       size="sm"
       onClick={toggleTheme}
       className="h-8 w-8 px-0"
-      aria-label={`Switch to ${isDark ? 'light' } mode`}
+      aria-label={`Switch to ${isDark ? 'light' : 'dark'} mode`}
     >
-      {isDark ? <Sun className="h-4 w-4" /> ="h-4 w-4" />}
+      {isDark ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
     </Button>
   );
 };

package/dist/components/ui/token-demo.esm.js

@@ -5,7 +5,7 @@ import { Button } from './button';
 import { useTheme } from '../../themes';
 import { createTokenManager } from '../../tokens';
 
-export const TokenDemo= () => {
+export const TokenDemo: React.FC = () => {
   const { currentTheme, currentThemeConfig } = useTheme();
   const [tokenManager] = useState(() => createTokenManager());
   const [exportFormat, setExportFormat] = useState<'json' | 'css' | 'scss' | 'js' | 'ts'>('json');
@@ -36,7 +36,7 @@ export const TokenDemo= () => {
       const allFormats = ['json', 'css', 'scss', 'js', 'ts'] as const;
       const results = allFormats.map(format => ({
         format,
-        content, format)
+        content: tokenManager.exportTokens(tokens, format)
       }));
       
       const combined = results.map(r => `=== ${r.format.toUpperCase()} ===\n${r.content}\n\n`).join('');
@@ -79,7 +79,9 @@ export const TokenDemo= () => {
           </div>
 
           <div className="flex items-center gap-4">
-            <label className="text-sm font-medium">Export Format={exportFormat}
+            <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"
             >
@@ -92,26 +94,34 @@ export const TokenDemo= () => {
           </div>
 
           {tokenStats && (
-            <div className="p-4 bg-gray-50 dark="font-semibold mb-3">Token Statistics</h4>
-              <div className="grid grid-cols-2 md="font-medium">Total Themes="text-lg font-bold">{tokenStats.totalThemes}</div>
+            <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="text-lg font-bold">{tokenStats.totalTokens}</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="text-lg font-bold">{currentTheme}</div>
+                  <span className="font-medium">Current Theme:</span>
+                  <div className="text-lg font-bold">{currentTheme}</div>
                 </div>
                 <div>
-                  <span className="font-medium">Theme Version="text-lg font-bold">{currentThemeConfig?.meta.version || 'N/A'}</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="flex flex-wrap gap-2">
+                  <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}}
+                        {category}: {count as number}
                       </Badge>
                     ))}
                   </div>
@@ -156,23 +166,25 @@ export const TokenDemo= () => {
           </CardDescription>
         </CardHeader>
         <CardContent>
-          <div className="grid grid-cols-1 md="font-medium mb-2">Theme Details</h4>
+          <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}</div>
-                <div><span className="font-medium">Description}</div>
-                <div><span className="font-medium">Category}</div>
-                <div><span className="font-medium">Version}</div>
-                <div><span className="font-medium">Author}</div>
+                <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}</div>
-                <div><span className="font-medium">Secondary}</div>
-                <div><span className="font-medium">Display}</div>
-                <div><span className="font-medium">Body}</div>
-                <div><span className="font-medium">Mono}</div>
+                <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>

package/dist/components/ui/token-demo.js

@@ -5,7 +5,7 @@ import { Button } from './button';
 import { useTheme } from '../../themes';
 import { createTokenManager } from '../../tokens';
 
-export const TokenDemo= () => {
+export const TokenDemo: React.FC = () => {
   const { currentTheme, currentThemeConfig } = useTheme();
   const [tokenManager] = useState(() => createTokenManager());
   const [exportFormat, setExportFormat] = useState<'json' | 'css' | 'scss' | 'js' | 'ts'>('json');
@@ -36,7 +36,7 @@ export const TokenDemo= () => {
       const allFormats = ['json', 'css', 'scss', 'js', 'ts'] as const;
       const results = allFormats.map(format => ({
         format,
-        content, format)
+        content: tokenManager.exportTokens(tokens, format)
       }));
       
       const combined = results.map(r => `=== ${r.format.toUpperCase()} ===\n${r.content}\n\n`).join('');
@@ -79,7 +79,9 @@ export const TokenDemo= () => {
           </div>
 
           <div className="flex items-center gap-4">
-            <label className="text-sm font-medium">Export Format={exportFormat}
+            <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"
             >
@@ -92,26 +94,34 @@ export const TokenDemo= () => {
           </div>
 
           {tokenStats && (
-            <div className="p-4 bg-gray-50 dark="font-semibold mb-3">Token Statistics</h4>
-              <div className="grid grid-cols-2 md="font-medium">Total Themes="text-lg font-bold">{tokenStats.totalThemes}</div>
+            <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="text-lg font-bold">{tokenStats.totalTokens}</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="text-lg font-bold">{currentTheme}</div>
+                  <span className="font-medium">Current Theme:</span>
+                  <div className="text-lg font-bold">{currentTheme}</div>
                 </div>
                 <div>
-                  <span className="font-medium">Theme Version="text-lg font-bold">{currentThemeConfig?.meta.version || 'N/A'}</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="flex flex-wrap gap-2">
+                  <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}}
+                        {category}: {count as number}
                       </Badge>
                     ))}
                   </div>
@@ -156,23 +166,25 @@ export const TokenDemo= () => {
           </CardDescription>
         </CardHeader>
         <CardContent>
-          <div className="grid grid-cols-1 md="font-medium mb-2">Theme Details</h4>
+          <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}</div>
-                <div><span className="font-medium">Description}</div>
-                <div><span className="font-medium">Category}</div>
-                <div><span className="font-medium">Version}</div>
-                <div><span className="font-medium">Author}</div>
+                <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}</div>
-                <div><span className="font-medium">Secondary}</div>
-                <div><span className="font-medium">Display}</div>
-                <div><span className="font-medium">Body}</div>
-                <div><span className="font-medium">Mono}</div>
+                <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>