@stfrigerio/sito-template 0.1.6 → 0.1.7

package/dist/index.js

@@ -1500,9 +1500,19 @@ const useTheme = () => {
 
 var styles$7 = {"button":"ThemeSwitcher-module_button__VfRjU","iconWrapper":"ThemeSwitcher-module_iconWrapper__FpHo8","label":"ThemeSwitcher-module_label__2Hfkp","toggle":"ThemeSwitcher-module_toggle__ATXx4","toggleTrack":"ThemeSwitcher-module_toggleTrack__x28Rv","toggleThumb":"ThemeSwitcher-module_toggleThumb__V8QeN","dropdown":"ThemeSwitcher-module_dropdown__3qLdt","dropdownTrigger":"ThemeSwitcher-module_dropdownTrigger__UzYV5","dropdownMenu":"ThemeSwitcher-module_dropdownMenu__3L5hT","dropdownItem":"ThemeSwitcher-module_dropdownItem__inw-K","active":"ThemeSwitcher-module_active__OHP19","icon":"ThemeSwitcher-module_icon__iRZiJ","text":"ThemeSwitcher-module_text__OCOoA"};
 
-const ThemeSwitcher = ({ variant = 'button', showLabel = false, className = '', }) => {
-    const { theme, setTheme } = useTheme();
-    const themes = [
+const ThemeSwitcher = ({ variant = 'button', showLabel = false, className = '', currentTheme, onThemeChange, themes: customThemes, }) => {
+    // Try to use internal context if available, otherwise use props
+    const contextTheme = (() => {
+        try {
+            return useTheme();
+        }
+        catch {
+            return null;
+        }
+    })();
+    const theme = currentTheme ?? contextTheme?.theme ?? 'light';
+    const setTheme = onThemeChange ?? contextTheme?.setTheme ?? (() => { });
+    const defaultThemes = [
         { value: 'light', label: 'Light', icon: jsxRuntime.jsx(FiSun, {}) },
         { value: 'dark', label: 'Dark', icon: jsxRuntime.jsx(FiMoon, {}) },
         { value: 'lossito', label: 'Lossito Light', icon: '✨' },
@@ -1510,21 +1520,22 @@ const ThemeSwitcher = ({ variant = 'button', showLabel = false, className = '',
         { value: 'dmood', label: 'Dmood Light', icon: '💙' },
         { value: 'dmood-dark', label: 'Dmood Dark', icon: '🌌' },
     ];
+    const themes = customThemes ?? defaultThemes;
     const currentThemeIndex = themes.findIndex(t => t.value === theme);
-    const currentTheme = themes[currentThemeIndex];
+    const currentThemeData = themes[currentThemeIndex] ?? themes[0];
     if (variant === 'toggle') {
         // Simple toggle between light and dark
         const isDark = theme.includes('dark');
         return (jsxRuntime.jsxs(framerMotion.motion.button, { className: `${styles$7.toggle} ${className}`, onClick: () => setTheme(isDark ? 'light' : 'dark'), whileTap: { scale: 0.95 }, "aria-label": "Toggle theme", children: [jsxRuntime.jsx(framerMotion.motion.div, { className: styles$7.toggleTrack, animate: { backgroundColor: isDark ? 'var(--color-primary)' : 'var(--color-border)' }, children: jsxRuntime.jsx(framerMotion.motion.div, { className: styles$7.toggleThumb, animate: { x: isDark ? 24 : 0 }, transition: { type: 'spring', stiffness: 500, damping: 30 }, children: isDark ? jsxRuntime.jsx(FiMoon, { size: 14 }) : jsxRuntime.jsx(FiSun, { size: 14 }) }) }), showLabel && jsxRuntime.jsx("span", { className: styles$7.label, children: isDark ? 'Dark' : 'Light' })] }));
     }
     if (variant === 'dropdown') {
-        return (jsxRuntime.jsxs("div", { className: `${styles$7.dropdown} ${className}`, children: [jsxRuntime.jsxs(framerMotion.motion.button, { className: styles$7.dropdownTrigger, whileTap: { scale: 0.98 }, children: [currentTheme.icon, showLabel && jsxRuntime.jsx("span", { className: styles$7.label, children: currentTheme.label })] }), jsxRuntime.jsx(framerMotion.motion.div, { className: styles$7.dropdownMenu, initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, children: themes.map((t) => (jsxRuntime.jsxs(framerMotion.motion.button, { className: `${styles$7.dropdownItem} ${theme === t.value ? styles$7.active : ''}`, onClick: () => setTheme(t.value), whileHover: { x: 4 }, whileTap: { scale: 0.98 }, children: [jsxRuntime.jsx("span", { className: styles$7.icon, children: t.icon }), jsxRuntime.jsx("span", { className: styles$7.text, children: t.label })] }, t.value))) })] }));
+        return (jsxRuntime.jsxs("div", { className: `${styles$7.dropdown} ${className}`, children: [jsxRuntime.jsxs(framerMotion.motion.button, { className: styles$7.dropdownTrigger, whileTap: { scale: 0.98 }, children: [currentThemeData.icon, showLabel && jsxRuntime.jsx("span", { className: styles$7.label, children: currentThemeData.label })] }), jsxRuntime.jsx(framerMotion.motion.div, { className: styles$7.dropdownMenu, initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, children: themes.map((t) => (jsxRuntime.jsxs(framerMotion.motion.button, { className: `${styles$7.dropdownItem} ${theme === t.value ? styles$7.active : ''}`, onClick: () => setTheme(t.value), whileHover: { x: 4 }, whileTap: { scale: 0.98 }, children: [jsxRuntime.jsx("span", { className: styles$7.icon, children: t.icon }), jsxRuntime.jsx("span", { className: styles$7.text, children: t.label })] }, t.value))) })] }));
     }
     // Default button variant - cycles through themes
     return (jsxRuntime.jsxs(framerMotion.motion.button, { className: `${styles$7.button} ${className}`, onClick: () => {
             const nextIndex = (currentThemeIndex + 1) % themes.length;
             setTheme(themes[nextIndex].value);
-        }, whileTap: { scale: 0.95 }, whileHover: { scale: 1.05 }, "aria-label": `Current theme: ${currentTheme.label}. Click to change.`, children: [jsxRuntime.jsx(framerMotion.motion.div, { initial: { rotate: -180, opacity: 0 }, animate: { rotate: 0, opacity: 1 }, exit: { rotate: 180, opacity: 0 }, transition: { duration: 0.3 }, className: styles$7.iconWrapper, children: currentTheme.icon }, theme), showLabel && jsxRuntime.jsx("span", { className: styles$7.label, children: currentTheme.label })] }));
+        }, whileTap: { scale: 0.95 }, whileHover: { scale: 1.05 }, "aria-label": `Current theme: ${currentThemeData.label}. Click to change.`, children: [jsxRuntime.jsx(framerMotion.motion.div, { initial: { rotate: -180, opacity: 0 }, animate: { rotate: 0, opacity: 1 }, exit: { rotate: 180, opacity: 0 }, transition: { duration: 0.3 }, className: styles$7.iconWrapper, children: currentThemeData.icon }, theme), showLabel && jsxRuntime.jsx("span", { className: styles$7.label, children: currentThemeData.label })] }));
 };
 
 // THIS FILE IS AUTO GENERATED