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

package/dist/components/ui/theme-customizer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-customizer.d.ts","sourceRoot":"","sources":["../../../src/components/ui/theme-customizer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAEjE,MAAM,WAAW,oBAAoB;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,IAAI,CAAC;IACrD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE;QACN,OAAO,EAAE,MAAM,CAAC;QAChB,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC;IACF,KAAK,EAAE;QACL,OAAO,EAAE,MAAM,CAAC;QAChB,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC;IACF,OAAO,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;IACF,OAAO,EAAE;QACP,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC;CACH;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAgW1D,CAAC"}

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

@@ -0,0 +1,140 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useCallback, useEffect } from 'react';
+;
+import { useTheme } from '../../themes';
+import { Card, CardContent, CardHeader, CardTitle } from './card.js';
+import { Button } from './button.js';
+import { Input } from './input.js';
+import { ThemePreview } from './theme-preview.js';
+export const ThemeCustomizer = ({ initialTheme = 'stan-design', onThemeChange, showPreview = true, allowCustomization = true, className = '' }) => {
+    const { getTheme } = useTheme();
+    const [customizationState, setCustomizationState] = useState({
+        colors: {
+            primary: '#3b82f6',
+            secondary: '#10b981'
+        },
+        fonts: {
+            primary: 'Inter',
+            secondary: 'Roboto'
+        },
+        spacing: {
+            scale: 1.25
+        },
+        shadows: {
+            intensity: 0.1
+        }
+    });
+    const [activeTab, setActiveTab] = useState('colors');
+    const [customTheme, setCustomTheme] = useState(null);
+    // Initialize with the initial theme
+    useEffect(() => {
+        const theme = getTheme(initialTheme);
+        if (theme) {
+            setCustomTheme(theme);
+        }
+    }, [initialTheme]); // Removed getTheme from dependencies as it's stable
+    const handleCustomizationChange = useCallback((key, subKey, value) => {
+        setCustomizationState(prev => ({
+            ...prev,
+            [key]: {
+                ...prev[key],
+                [subKey]: value
+            }
+        }));
+    }, []);
+    const generateCustomTheme = useCallback(() => {
+        if (!customTheme)
+            return;
+        // Create a deep copy of the current theme
+        const newTheme = JSON.parse(JSON.stringify(customTheme));
+        // Apply customizations
+        // Generate color scales based on the selected primary color
+        const primaryColor = customizationState.colors.primary;
+        const secondaryColor = customizationState.colors.secondary;
+        // Simple color scale generation (in a real app, you'd use a color library)
+        const generateColorScale = (baseColor) => {
+            return {
+                50: `${baseColor}0a`,
+                100: `${baseColor}1a`,
+                200: `${baseColor}33`,
+                300: `${baseColor}4d`,
+                400: `${baseColor}66`,
+                500: baseColor,
+                600: `${baseColor}99`,
+                700: `${baseColor}b3`,
+                800: `${baseColor}cc`,
+                900: `${baseColor}e6`
+            };
+        };
+        // Update primary colors
+        newTheme.colors.primary = generateColorScale(primaryColor);
+        // Update secondary colors if they exist
+        if (newTheme.colors.secondary) {
+            newTheme.colors.secondary = generateColorScale(secondaryColor);
+        }
+        // Update fonts
+        if (newTheme.fonts.primary) {
+            newTheme.fonts.primary.family = customizationState.fonts.primary;
+        }
+        if (newTheme.fonts.secondary) {
+            newTheme.fonts.secondary.family = customizationState.fonts.secondary;
+        }
+        // Update spacing scale (we'll adjust the existing scale)
+        if (newTheme.spacing && newTheme.spacing.scale) {
+            // This is a simplified approach - in reality you'd want to recalculate all spacing values
+            // For now, we'll just note that the scale factor has changed
+            console.log('Spacing scale factor updated to:', customizationState.spacing.scale);
+        }
+        // Update shadow intensity (we'll adjust the existing shadows)
+        if (newTheme.shadows) {
+            // This is a simplified approach - in reality you'd want to recalculate all shadow values
+            // For now, we'll just note that the intensity has changed
+            console.log('Shadow intensity updated to:', customizationState.shadows.intensity);
+        }
+        setCustomTheme(newTheme);
+        if (onThemeChange) {
+            onThemeChange(newTheme);
+        }
+    }, [customTheme, customizationState, onThemeChange]);
+    const exportTheme = useCallback(() => {
+        if (!customTheme)
+            return;
+        const themeData = JSON.stringify(customTheme, null, 2);
+        const blob = new Blob([themeData], { type: 'application/json' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `${customTheme.meta.name.toLowerCase().replace(/\s+/g, '-')}-theme.json`;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+    }, [customTheme]);
+    const resetTheme = useCallback(() => {
+        const originalTheme = getTheme(initialTheme);
+        if (originalTheme) {
+            setCustomTheme(originalTheme);
+            setCustomizationState({
+                colors: {
+                    primary: '#3b82f6',
+                    secondary: '#10b981'
+                },
+                fonts: {
+                    primary: 'Inter',
+                    secondary: 'Roboto'
+                },
+                spacing: {
+                    scale: 1.25
+                },
+                shadows: {
+                    intensity: 0.1
+                }
+            });
+        }
+    }, [initialTheme, getTheme]);
+    if (!customTheme) {
+        return (_jsx("div", { className: `p-4 text-center text-gray-500 ${className}`, children: "Loading theme..." }));
+    }
+    return (_jsx("div", { className: `theme-customizer ${className}`, children: _jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { className: "flex items-center gap-2", children: "\uD83C\uDFA8 Theme Customizer" }), _jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: "Customize and preview themes in real-time" })] }), _jsxs(CardContent, { children: [_jsxs("div", { className: "flex space-x-1 mb-6 border-b", children: [allowCustomization && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: activeTab === 'colors' ? 'default' : 'ghost', size: "sm", onClick: () => setActiveTab('colors'), children: "Colors" }), _jsx(Button, { variant: activeTab === 'fonts' ? 'default' : 'ghost', size: "sm", onClick: () => setActiveTab('fonts'), children: "Fonts" }), _jsx(Button, { variant: activeTab === 'spacing' ? 'default' : 'ghost', size: "sm", onClick: () => setActiveTab('spacing'), children: "Spacing" }), _jsx(Button, { variant: activeTab === 'shadows' ? 'default' : 'ghost', size: "sm", onClick: () => setActiveTab('shadows'), children: "Shadows" })] })), showPreview && (_jsx(Button, { variant: activeTab === 'preview' ? 'default' : 'ghost', size: "sm", onClick: () => setActiveTab('preview'), children: "Preview" }))] }), _jsxs("div", { className: "min-h-[400px]", children: [activeTab === 'colors' && allowCustomization && (_jsxs("div", { className: "space-y-4", children: [_jsx("h3", { className: "text-lg font-semibold", children: "Color Customization" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [_jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium mb-2", children: "Primary Color" }), _jsx(Input, { type: "color", value: customizationState.colors.primary, onChange: (e) => handleCustomizationChange('colors', 'primary', e.target.value), className: "w-full h-12" }), _jsx(Input, { type: "text", value: customizationState.colors.primary, onChange: (e) => handleCustomizationChange('colors', 'primary', e.target.value), placeholder: "#3b82f6", className: "mt-2" })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium mb-2", children: "Secondary Color" }), _jsx(Input, { type: "color", value: customizationState.colors.secondary, onChange: (e) => handleCustomizationChange('colors', 'secondary', e.target.value), className: "w-full h-12" }), _jsx(Input, { type: "text", value: customizationState.colors.secondary, onChange: (e) => handleCustomizationChange('colors', 'secondary', e.target.value), placeholder: "#10b981", className: "mt-2" })] })] })] })), activeTab === 'fonts' && allowCustomization && (_jsxs("div", { className: "space-y-4", children: [_jsx("h3", { className: "text-lg font-semibold", children: "Font Customization" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium mb-2", children: "Primary Font" }), _jsx(Input, { value: customizationState.fonts.primary, onChange: (e) => handleCustomizationChange('fonts', 'primary', e.target.value), placeholder: "Inter" })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium mb-2", children: "Secondary Font" }), _jsx(Input, { value: customizationState.fonts.secondary, onChange: (e) => handleCustomizationChange('fonts', 'secondary', e.target.value), placeholder: "Roboto" })] })] })] })), activeTab === 'spacing' && allowCustomization && (_jsxs("div", { className: "space-y-4", children: [_jsx("h3", { className: "text-lg font-semibold", children: "Spacing Customization" }), _jsx("div", { className: "grid grid-cols-1 gap-4", children: _jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium mb-2", children: "Scale Factor" }), _jsx(Input, { type: "number", value: customizationState.spacing.scale, onChange: (e) => handleCustomizationChange('spacing', 'scale', Number(e.target.value)), min: "1.1", max: "2.0", step: "0.05" })] }) })] })), activeTab === 'shadows' && allowCustomization && (_jsxs("div", { className: "space-y-4", children: [_jsx("h3", { className: "text-lg font-semibold", children: "Shadow Customization" }), _jsx("div", { className: "grid grid-cols-1 gap-4", children: _jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium mb-2", children: "Shadow Intensity" }), _jsx(Input, { type: "range", min: "0", max: "0.5", step: "0.01", value: customizationState.shadows.intensity, onChange: (e) => handleCustomizationChange('shadows', 'intensity', Number(e.target.value)), className: "w-full" }), _jsx("span", { className: "text-sm text-gray-600 dark:text-gray-400", children: customizationState.shadows.intensity })] }) })] })), activeTab === 'preview' && showPreview && (_jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", children: "Theme Preview" }), _jsx(ThemePreview, { themeName: customTheme.meta.name })] }))] }), allowCustomization && (_jsxs("div", { className: "flex justify-between items-center pt-6 border-t", children: [_jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { variant: "outline", onClick: resetTheme, children: "Reset" }), _jsx(Button, { onClick: generateCustomTheme, children: "Apply Changes" })] }), _jsx("div", { className: "flex gap-2", children: _jsx(Button, { variant: "secondary", onClick: exportTheme, children: "Export Theme" }) })] }))] })] }) }));
+};

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

@@ -0,0 +1,140 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useCallback, useEffect } from 'react';
+;
+import { useTheme } from '../../themes';
+import { Card, CardContent, CardHeader, CardTitle } from './card.js';
+import { Button } from './button.js';
+import { Input } from './input.js';
+import { ThemePreview } from './theme-preview.js';
+export const ThemeCustomizer = ({ initialTheme = 'stan-design', onThemeChange, showPreview = true, allowCustomization = true, className = '' }) => {
+    const { getTheme } = useTheme();
+    const [customizationState, setCustomizationState] = useState({
+        colors: {
+            primary: '#3b82f6',
+            secondary: '#10b981'
+        },
+        fonts: {
+            primary: 'Inter',
+            secondary: 'Roboto'
+        },
+        spacing: {
+            scale: 1.25
+        },
+        shadows: {
+            intensity: 0.1
+        }
+    });
+    const [activeTab, setActiveTab] = useState('colors');
+    const [customTheme, setCustomTheme] = useState(null);
+    // Initialize with the initial theme
+    useEffect(() => {
+        const theme = getTheme(initialTheme);
+        if (theme) {
+            setCustomTheme(theme);
+        }
+    }, [initialTheme]); // Removed getTheme from dependencies as it's stable
+    const handleCustomizationChange = useCallback((key, subKey, value) => {
+        setCustomizationState(prev => ({
+            ...prev,
+            [key]: {
+                ...prev[key],
+                [subKey]: value
+            }
+        }));
+    }, []);
+    const generateCustomTheme = useCallback(() => {
+        if (!customTheme)
+            return;
+        // Create a deep copy of the current theme
+        const newTheme = JSON.parse(JSON.stringify(customTheme));
+        // Apply customizations
+        // Generate color scales based on the selected primary color
+        const primaryColor = customizationState.colors.primary;
+        const secondaryColor = customizationState.colors.secondary;
+        // Simple color scale generation (in a real app, you'd use a color library)
+        const generateColorScale = (baseColor) => {
+            return {
+                50: `${baseColor}0a`,
+                100: `${baseColor}1a`,
+                200: `${baseColor}33`,
+                300: `${baseColor}4d`,
+                400: `${baseColor}66`,
+                500: baseColor,
+                600: `${baseColor}99`,
+                700: `${baseColor}b3`,
+                800: `${baseColor}cc`,
+                900: `${baseColor}e6`
+            };
+        };
+        // Update primary colors
+        newTheme.colors.primary = generateColorScale(primaryColor);
+        // Update secondary colors if they exist
+        if (newTheme.colors.secondary) {
+            newTheme.colors.secondary = generateColorScale(secondaryColor);
+        }
+        // Update fonts
+        if (newTheme.fonts.primary) {
+            newTheme.fonts.primary.family = customizationState.fonts.primary;
+        }
+        if (newTheme.fonts.secondary) {
+            newTheme.fonts.secondary.family = customizationState.fonts.secondary;
+        }
+        // Update spacing scale (we'll adjust the existing scale)
+        if (newTheme.spacing && newTheme.spacing.scale) {
+            // This is a simplified approach - in reality you'd want to recalculate all spacing values
+            // For now, we'll just note that the scale factor has changed
+            console.log('Spacing scale factor updated to:', customizationState.spacing.scale);
+        }
+        // Update shadow intensity (we'll adjust the existing shadows)
+        if (newTheme.shadows) {
+            // This is a simplified approach - in reality you'd want to recalculate all shadow values
+            // For now, we'll just note that the intensity has changed
+            console.log('Shadow intensity updated to:', customizationState.shadows.intensity);
+        }
+        setCustomTheme(newTheme);
+        if (onThemeChange) {
+            onThemeChange(newTheme);
+        }
+    }, [customTheme, customizationState, onThemeChange]);
+    const exportTheme = useCallback(() => {
+        if (!customTheme)
+            return;
+        const themeData = JSON.stringify(customTheme, null, 2);
+        const blob = new Blob([themeData], { type: 'application/json' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `${customTheme.meta.name.toLowerCase().replace(/\s+/g, '-')}-theme.json`;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+    }, [customTheme]);
+    const resetTheme = useCallback(() => {
+        const originalTheme = getTheme(initialTheme);
+        if (originalTheme) {
+            setCustomTheme(originalTheme);
+            setCustomizationState({
+                colors: {
+                    primary: '#3b82f6',
+                    secondary: '#10b981'
+                },
+                fonts: {
+                    primary: 'Inter',
+                    secondary: 'Roboto'
+                },
+                spacing: {
+                    scale: 1.25
+                },
+                shadows: {
+                    intensity: 0.1
+                }
+            });
+        }
+    }, [initialTheme, getTheme]);
+    if (!customTheme) {
+        return (_jsx("div", { className: `p-4 text-center text-gray-500 ${className}`, children: "Loading theme..." }));
+    }
+    return (_jsx("div", { className: `theme-customizer ${className}`, children: _jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { className: "flex items-center gap-2", children: "\uD83C\uDFA8 Theme Customizer" }), _jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: "Customize and preview themes in real-time" })] }), _jsxs(CardContent, { children: [_jsxs("div", { className: "flex space-x-1 mb-6 border-b", children: [allowCustomization && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: activeTab === 'colors' ? 'default' : 'ghost', size: "sm", onClick: () => setActiveTab('colors'), children: "Colors" }), _jsx(Button, { variant: activeTab === 'fonts' ? 'default' : 'ghost', size: "sm", onClick: () => setActiveTab('fonts'), children: "Fonts" }), _jsx(Button, { variant: activeTab === 'spacing' ? 'default' : 'ghost', size: "sm", onClick: () => setActiveTab('spacing'), children: "Spacing" }), _jsx(Button, { variant: activeTab === 'shadows' ? 'default' : 'ghost', size: "sm", onClick: () => setActiveTab('shadows'), children: "Shadows" })] })), showPreview && (_jsx(Button, { variant: activeTab === 'preview' ? 'default' : 'ghost', size: "sm", onClick: () => setActiveTab('preview'), children: "Preview" }))] }), _jsxs("div", { className: "min-h-[400px]", children: [activeTab === 'colors' && allowCustomization && (_jsxs("div", { className: "space-y-4", children: [_jsx("h3", { className: "text-lg font-semibold", children: "Color Customization" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [_jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium mb-2", children: "Primary Color" }), _jsx(Input, { type: "color", value: customizationState.colors.primary, onChange: (e) => handleCustomizationChange('colors', 'primary', e.target.value), className: "w-full h-12" }), _jsx(Input, { type: "text", value: customizationState.colors.primary, onChange: (e) => handleCustomizationChange('colors', 'primary', e.target.value), placeholder: "#3b82f6", className: "mt-2" })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium mb-2", children: "Secondary Color" }), _jsx(Input, { type: "color", value: customizationState.colors.secondary, onChange: (e) => handleCustomizationChange('colors', 'secondary', e.target.value), className: "w-full h-12" }), _jsx(Input, { type: "text", value: customizationState.colors.secondary, onChange: (e) => handleCustomizationChange('colors', 'secondary', e.target.value), placeholder: "#10b981", className: "mt-2" })] })] })] })), activeTab === 'fonts' && allowCustomization && (_jsxs("div", { className: "space-y-4", children: [_jsx("h3", { className: "text-lg font-semibold", children: "Font Customization" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium mb-2", children: "Primary Font" }), _jsx(Input, { value: customizationState.fonts.primary, onChange: (e) => handleCustomizationChange('fonts', 'primary', e.target.value), placeholder: "Inter" })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium mb-2", children: "Secondary Font" }), _jsx(Input, { value: customizationState.fonts.secondary, onChange: (e) => handleCustomizationChange('fonts', 'secondary', e.target.value), placeholder: "Roboto" })] })] })] })), activeTab === 'spacing' && allowCustomization && (_jsxs("div", { className: "space-y-4", children: [_jsx("h3", { className: "text-lg font-semibold", children: "Spacing Customization" }), _jsx("div", { className: "grid grid-cols-1 gap-4", children: _jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium mb-2", children: "Scale Factor" }), _jsx(Input, { type: "number", value: customizationState.spacing.scale, onChange: (e) => handleCustomizationChange('spacing', 'scale', Number(e.target.value)), min: "1.1", max: "2.0", step: "0.05" })] }) })] })), activeTab === 'shadows' && allowCustomization && (_jsxs("div", { className: "space-y-4", children: [_jsx("h3", { className: "text-lg font-semibold", children: "Shadow Customization" }), _jsx("div", { className: "grid grid-cols-1 gap-4", children: _jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium mb-2", children: "Shadow Intensity" }), _jsx(Input, { type: "range", min: "0", max: "0.5", step: "0.01", value: customizationState.shadows.intensity, onChange: (e) => handleCustomizationChange('shadows', 'intensity', Number(e.target.value)), className: "w-full" }), _jsx("span", { className: "text-sm text-gray-600 dark:text-gray-400", children: customizationState.shadows.intensity })] }) })] })), activeTab === 'preview' && showPreview && (_jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", children: "Theme Preview" }), _jsx(ThemePreview, { themeName: customTheme.meta.name })] }))] }), allowCustomization && (_jsxs("div", { className: "flex justify-between items-center pt-6 border-t", children: [_jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { variant: "outline", onClick: resetTheme, children: "Reset" }), _jsx(Button, { onClick: generateCustomTheme, children: "Apply Changes" })] }), _jsx("div", { className: "flex gap-2", children: _jsx(Button, { variant: "secondary", onClick: exportTheme, children: "Export Theme" }) })] }))] })] }) }));
+};

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

@@ -0,0 +1,11 @@
+import * as React from 'react';
+export interface ThemePreviewProps {
+    themeName?: string;
+    showColors?: boolean;
+    showFonts?: boolean;
+    showNavigation?: boolean;
+    showSpacing?: boolean;
+    className?: string;
+}
+export declare const ThemePreview: React.FC<ThemePreviewProps>;
+//# sourceMappingURL=theme-preview.d.ts.map

package/dist/components/ui/theme-preview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-preview.d.ts","sourceRoot":"","sources":["../../../src/components/ui/theme-preview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,WAAW,iBAAiB;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAuSpD,CAAC"}

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

@@ -0,0 +1,49 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+;
+import { useTheme } from '../../themes';
+import { Card, CardContent, CardHeader, CardTitle } from './card.js';
+import { Badge } from './badge.js';
+export const ThemePreview = ({ themeName, showColors = true, showFonts = true, showNavigation = true, showSpacing = true, className = '' }) => {
+    const { getTheme, currentTheme } = useTheme();
+    const targetTheme = themeName || currentTheme;
+    const themeConfig = getTheme(targetTheme);
+    if (!themeConfig) {
+        return (_jsxs("div", { className: `p-4 text-center text-gray-500 ${className}`, children: ["Theme \"", targetTheme, "\" not found"] }));
+    }
+    const renderColorPreview = () => {
+        if (!showColors)
+            return null;
+        const { colors } = themeConfig;
+        return (_jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold", children: "Colors" }), _jsxs("div", { children: [_jsx("h5", { className: "text-sm font-medium text-gray-700 dark:text-gray-300 mb-2", children: "Primary Colors" }), _jsx("div", { className: "grid grid-cols-5 gap-2", children: Object.entries(colors.primary).map(([shade, color]) => (_jsxs("div", { className: "text-center", children: [_jsx("div", { className: "w-12 h-12 rounded-lg border border-gray-200 dark:border-gray-700 mb-1", style: { backgroundColor: color } }), _jsx("span", { className: "text-xs text-gray-600 dark:text-gray-400", children: shade })] }, shade))) })] }), _jsxs("div", { children: [_jsx("h5", { className: "text-sm font-medium text-gray-700 dark:text-gray-300 mb-2", children: "Semantic Colors" }), _jsx("div", { className: "grid grid-cols-2 gap-2", children: Object.entries(colors.semantic).map(([name, color]) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "w-6 h-6 rounded border border-gray-200 dark:border-gray-700", style: { backgroundColor: color } }), _jsx("span", { className: "text-sm text-gray-600 dark:text-gray-400 capitalize", children: name.replace(/([A-Z])/g, ' $1').trim() })] }, name))) })] }), _jsxs("div", { children: [_jsx("h5", { className: "text-sm font-medium text-gray-700 dark:text-gray-300 mb-2", children: "Neutral Colors" }), _jsx("div", { className: "grid grid-cols-5 gap-2", children: Object.entries(colors.neutral).map(([shade, color]) => (_jsxs("div", { className: "text-center", children: [_jsx("div", { className: "w-12 h-12 rounded-lg border border-gray-200 dark:border-gray-700 mb-1", style: { backgroundColor: color } }), _jsx("span", { className: "text-xs text-gray-600 dark:text-gray-400", children: shade })] }, shade))) })] })] }));
+    };
+    const renderFontPreview = () => {
+        if (!showFonts)
+            return null;
+        const { fonts } = themeConfig;
+        return (_jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold", children: "Typography" }), _jsxs("div", { children: [_jsxs("h5", { className: "text-sm font-medium text-gray-700 dark:text-gray-300 mb-2", children: ["Primary Font: ", fonts.primary.family] }), _jsx("div", { className: "space-y-2", children: Object.entries(fonts.primary.sizes).map(([size, value]) => (_jsxs("div", { className: "flex items-center gap-4", children: [_jsxs("span", { className: "text-xs text-gray-500 w-12", children: [size, ":"] }), _jsx("span", { className: "font-primary", style: {
+                                            fontSize: value,
+                                            fontWeight: fonts.primary.weights[0] || 400
+                                        }, children: "The quick brown fox jumps over the lazy dog" })] }, size))) })] }), _jsxs("div", { children: [_jsx("h5", { className: "text-sm font-medium text-gray-700 dark:text-gray-300 mb-2", children: "Font Weights" }), _jsx("div", { className: "space-y-2", children: fonts.primary.weights.map((weight) => (_jsxs("div", { className: "flex items-center gap-4", children: [_jsxs("span", { className: "text-xs text-gray-500 w-12", children: [weight, ":"] }), _jsx("span", { className: "font-primary", style: {
+                                            fontSize: '1rem',
+                                            fontWeight: weight
+                                        }, children: "The quick brown fox jumps over the lazy dog" })] }, weight))) })] })] }));
+    };
+    const renderNavigationPreview = () => {
+        if (!showNavigation)
+            return null;
+        const { navigation } = themeConfig;
+        return (_jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold", children: "Navigation" }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { children: [_jsx("h5", { className: "text-sm font-medium text-gray-700 dark:text-gray-300 mb-2", children: "Configuration" }), _jsxs("div", { className: "space-y-2 text-sm", children: [_jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-gray-600 dark:text-gray-400", children: "Layout:" }), _jsx(Badge, { variant: "outline", children: navigation.layout })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-gray-600 dark:text-gray-400", children: "Style:" }), _jsx(Badge, { variant: "outline", children: navigation.style })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-gray-600 dark:text-gray-400", children: "Behavior:" }), _jsx(Badge, { variant: "outline", children: navigation.behavior })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-gray-600 dark:text-gray-400", children: "Responsive:" }), _jsx(Badge, { variant: "outline", children: navigation.responsive })] })] })] }), _jsxs("div", { children: [_jsx("h5", { className: "text-sm font-medium text-gray-700 dark:text-gray-300 mb-2", children: "Animations" }), _jsxs("div", { className: "space-y-2 text-sm", children: [_jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-gray-600 dark:text-gray-400", children: "Duration:" }), _jsx("span", { className: "text-gray-900 dark:text-gray-100", children: navigation.animations.duration.normal })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-gray-600 dark:text-gray-400", children: "Easing:" }), _jsx("span", { className: "text-gray-900 dark:text-gray-100", children: navigation.animations.easing.ease })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-gray-600 dark:text-gray-400", children: "Stagger:" }), _jsx("span", { className: "text-gray-900 dark:text-gray-100", children: navigation.animations.stagger.enabled ? 'Enabled' : 'Disabled' })] })] })] })] })] }));
+    };
+    const renderSpacingPreview = () => {
+        if (!showSpacing)
+            return null;
+        const { spacing } = themeConfig;
+        return (_jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold", children: "Spacing" }), _jsxs("div", { children: [_jsx("h5", { className: "text-sm font-medium text-gray-700 dark:text-gray-300 mb-2", children: "Scale" }), _jsx("div", { className: "space-y-2", children: Object.entries(spacing.scale).map(([size, value]) => (_jsxs("div", { className: "flex items-center gap-4", children: [_jsxs("span", { className: "text-xs text-gray-500 w-12", children: [size, ":"] }), _jsx("div", { className: "bg-blue-500 rounded", style: {
+                                            width: value,
+                                            height: '1rem'
+                                        } }), _jsx("span", { className: "text-sm text-gray-600 dark:text-gray-400", children: value })] }, size))) })] }), _jsxs("div", { children: [_jsx("h5", { className: "text-sm font-medium text-gray-700 dark:text-gray-300 mb-2", children: "Component Spacing" }), _jsx("div", { className: "space-y-2", children: Object.entries(spacing.component).map(([component, spacingConfig]) => (_jsxs("div", { className: "border border-gray-200 dark:border-gray-700 rounded p-2", children: [_jsx("h6", { className: "text-xs font-medium text-gray-700 dark:text-gray-300 mb-1 capitalize", children: component }), _jsx("div", { className: "grid grid-cols-3 gap-2 text-xs", children: Object.entries(spacingConfig).map(([prop, value]) => (_jsxs("div", { className: "text-center", children: [_jsx("div", { className: "text-gray-500 capitalize", children: prop }), _jsx("div", { className: "text-gray-900 dark:text-gray-100", children: String(value) })] }, prop))) })] }, component))) })] })] }));
+    };
+    return (_jsx("div", { className: `theme-preview ${className}`, children: _jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-2xl", children: targetTheme === 'stan-design' ? '⚡' :
+                                        targetTheme === 'enterprise' ? '🏢' :
+                                            targetTheme === 'harvey' ? '🎨' : '🎯' }), themeConfig.meta.name, " Theme Preview"] }), _jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: themeConfig.meta.description }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Badge, { variant: "outline", children: themeConfig.meta.category }), _jsxs(Badge, { variant: "secondary", children: ["v", themeConfig.meta.version] })] })] }), _jsxs(CardContent, { className: "space-y-6", children: [renderColorPreview(), renderFontPreview(), renderNavigationPreview(), renderSpacingPreview()] })] }) }));
+};

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

@@ -0,0 +1,49 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+;
+import { useTheme } from '../../themes';
+import { Card, CardContent, CardHeader, CardTitle } from './card.js';
+import { Badge } from './badge.js';
+export const ThemePreview = ({ themeName, showColors = true, showFonts = true, showNavigation = true, showSpacing = true, className = '' }) => {
+    const { getTheme, currentTheme } = useTheme();
+    const targetTheme = themeName || currentTheme;
+    const themeConfig = getTheme(targetTheme);
+    if (!themeConfig) {
+        return (_jsxs("div", { className: `p-4 text-center text-gray-500 ${className}`, children: ["Theme \"", targetTheme, "\" not found"] }));
+    }
+    const renderColorPreview = () => {
+        if (!showColors)
+            return null;
+        const { colors } = themeConfig;
+        return (_jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold", children: "Colors" }), _jsxs("div", { children: [_jsx("h5", { className: "text-sm font-medium text-gray-700 dark:text-gray-300 mb-2", children: "Primary Colors" }), _jsx("div", { className: "grid grid-cols-5 gap-2", children: Object.entries(colors.primary).map(([shade, color]) => (_jsxs("div", { className: "text-center", children: [_jsx("div", { className: "w-12 h-12 rounded-lg border border-gray-200 dark:border-gray-700 mb-1", style: { backgroundColor: color } }), _jsx("span", { className: "text-xs text-gray-600 dark:text-gray-400", children: shade })] }, shade))) })] }), _jsxs("div", { children: [_jsx("h5", { className: "text-sm font-medium text-gray-700 dark:text-gray-300 mb-2", children: "Semantic Colors" }), _jsx("div", { className: "grid grid-cols-2 gap-2", children: Object.entries(colors.semantic).map(([name, color]) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "w-6 h-6 rounded border border-gray-200 dark:border-gray-700", style: { backgroundColor: color } }), _jsx("span", { className: "text-sm text-gray-600 dark:text-gray-400 capitalize", children: name.replace(/([A-Z])/g, ' $1').trim() })] }, name))) })] }), _jsxs("div", { children: [_jsx("h5", { className: "text-sm font-medium text-gray-700 dark:text-gray-300 mb-2", children: "Neutral Colors" }), _jsx("div", { className: "grid grid-cols-5 gap-2", children: Object.entries(colors.neutral).map(([shade, color]) => (_jsxs("div", { className: "text-center", children: [_jsx("div", { className: "w-12 h-12 rounded-lg border border-gray-200 dark:border-gray-700 mb-1", style: { backgroundColor: color } }), _jsx("span", { className: "text-xs text-gray-600 dark:text-gray-400", children: shade })] }, shade))) })] })] }));
+    };
+    const renderFontPreview = () => {
+        if (!showFonts)
+            return null;
+        const { fonts } = themeConfig;
+        return (_jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold", children: "Typography" }), _jsxs("div", { children: [_jsxs("h5", { className: "text-sm font-medium text-gray-700 dark:text-gray-300 mb-2", children: ["Primary Font: ", fonts.primary.family] }), _jsx("div", { className: "space-y-2", children: Object.entries(fonts.primary.sizes).map(([size, value]) => (_jsxs("div", { className: "flex items-center gap-4", children: [_jsxs("span", { className: "text-xs text-gray-500 w-12", children: [size, ":"] }), _jsx("span", { className: "font-primary", style: {
+                                            fontSize: value,
+                                            fontWeight: fonts.primary.weights[0] || 400
+                                        }, children: "The quick brown fox jumps over the lazy dog" })] }, size))) })] }), _jsxs("div", { children: [_jsx("h5", { className: "text-sm font-medium text-gray-700 dark:text-gray-300 mb-2", children: "Font Weights" }), _jsx("div", { className: "space-y-2", children: fonts.primary.weights.map((weight) => (_jsxs("div", { className: "flex items-center gap-4", children: [_jsxs("span", { className: "text-xs text-gray-500 w-12", children: [weight, ":"] }), _jsx("span", { className: "font-primary", style: {
+                                            fontSize: '1rem',
+                                            fontWeight: weight
+                                        }, children: "The quick brown fox jumps over the lazy dog" })] }, weight))) })] })] }));
+    };
+    const renderNavigationPreview = () => {
+        if (!showNavigation)
+            return null;
+        const { navigation } = themeConfig;
+        return (_jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold", children: "Navigation" }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { children: [_jsx("h5", { className: "text-sm font-medium text-gray-700 dark:text-gray-300 mb-2", children: "Configuration" }), _jsxs("div", { className: "space-y-2 text-sm", children: [_jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-gray-600 dark:text-gray-400", children: "Layout:" }), _jsx(Badge, { variant: "outline", children: navigation.layout })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-gray-600 dark:text-gray-400", children: "Style:" }), _jsx(Badge, { variant: "outline", children: navigation.style })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-gray-600 dark:text-gray-400", children: "Behavior:" }), _jsx(Badge, { variant: "outline", children: navigation.behavior })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-gray-600 dark:text-gray-400", children: "Responsive:" }), _jsx(Badge, { variant: "outline", children: navigation.responsive })] })] })] }), _jsxs("div", { children: [_jsx("h5", { className: "text-sm font-medium text-gray-700 dark:text-gray-300 mb-2", children: "Animations" }), _jsxs("div", { className: "space-y-2 text-sm", children: [_jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-gray-600 dark:text-gray-400", children: "Duration:" }), _jsx("span", { className: "text-gray-900 dark:text-gray-100", children: navigation.animations.duration.normal })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-gray-600 dark:text-gray-400", children: "Easing:" }), _jsx("span", { className: "text-gray-900 dark:text-gray-100", children: navigation.animations.easing.ease })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-gray-600 dark:text-gray-400", children: "Stagger:" }), _jsx("span", { className: "text-gray-900 dark:text-gray-100", children: navigation.animations.stagger.enabled ? 'Enabled' : 'Disabled' })] })] })] })] })] }));
+    };
+    const renderSpacingPreview = () => {
+        if (!showSpacing)
+            return null;
+        const { spacing } = themeConfig;
+        return (_jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold", children: "Spacing" }), _jsxs("div", { children: [_jsx("h5", { className: "text-sm font-medium text-gray-700 dark:text-gray-300 mb-2", children: "Scale" }), _jsx("div", { className: "space-y-2", children: Object.entries(spacing.scale).map(([size, value]) => (_jsxs("div", { className: "flex items-center gap-4", children: [_jsxs("span", { className: "text-xs text-gray-500 w-12", children: [size, ":"] }), _jsx("div", { className: "bg-blue-500 rounded", style: {
+                                            width: value,
+                                            height: '1rem'
+                                        } }), _jsx("span", { className: "text-sm text-gray-600 dark:text-gray-400", children: value })] }, size))) })] }), _jsxs("div", { children: [_jsx("h5", { className: "text-sm font-medium text-gray-700 dark:text-gray-300 mb-2", children: "Component Spacing" }), _jsx("div", { className: "space-y-2", children: Object.entries(spacing.component).map(([component, spacingConfig]) => (_jsxs("div", { className: "border border-gray-200 dark:border-gray-700 rounded p-2", children: [_jsx("h6", { className: "text-xs font-medium text-gray-700 dark:text-gray-300 mb-1 capitalize", children: component }), _jsx("div", { className: "grid grid-cols-3 gap-2 text-xs", children: Object.entries(spacingConfig).map(([prop, value]) => (_jsxs("div", { className: "text-center", children: [_jsx("div", { className: "text-gray-500 capitalize", children: prop }), _jsx("div", { className: "text-gray-900 dark:text-gray-100", children: String(value) })] }, prop))) })] }, component))) })] })] }));
+    };
+    return (_jsx("div", { className: `theme-preview ${className}`, children: _jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-2xl", children: targetTheme === 'stan-design' ? '⚡' :
+                                        targetTheme === 'enterprise' ? '🏢' :
+                                            targetTheme === 'harvey' ? '🎨' : '🎯' }), themeConfig.meta.name, " Theme Preview"] }), _jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: themeConfig.meta.description }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Badge, { variant: "outline", children: themeConfig.meta.category }), _jsxs(Badge, { variant: "secondary", children: ["v", themeConfig.meta.version] })] })] }), _jsxs(CardContent, { className: "space-y-6", children: [renderColorPreview(), renderFontPreview(), renderNavigationPreview(), renderSpacingPreview()] })] }) }));
+};

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

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import type { MultiThemeConfig } from '../../themes';
+export interface ThemeSwitcherProps {
+    themes?: Record<string, MultiThemeConfig>;
+    showPreview?: boolean;
+    showSystemTheme?: boolean;
+    className?: string;
+    variant?: 'default' | 'compact' | 'detailed';
+}
+export declare const ThemeSwitcher: React.FC<ThemeSwitcherProps>;
+//# sourceMappingURL=theme-switcher.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"theme-switcher.d.ts","sourceRoot":"","sources":["../../../src/components/ui/theme-switcher.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAErD,MAAM,WAAW,kBAAkB;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;IAC1C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;CAC9C;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA0PtD,CAAC"}

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

@@ -0,0 +1,87 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+;
+import { Button } from './button.js';
+import { useTheme } from '../../themes';
+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;
+    };
+    const getThemeEmoji = (theme) => {
+        const themeEmojis = {
+            '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 = () => (_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() }));
+};