@shepai/cli 1.74.0 → 1.75.0

package/dist/src/presentation/web/components/common/theme-toggle/theme-toggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme-toggle.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/theme-toggle/theme-toggle.tsx"],"names":[],"mappings":"AAOA,wBAAgB,WAAW,4CAsC1B"}
+{"version":3,"file":"theme-toggle.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/theme-toggle/theme-toggle.tsx"],"names":[],"mappings":"AAOA,wBAAgB,WAAW,4CAuD1B"}

package/dist/src/presentation/web/components/common/theme-toggle/theme-toggle.js

@@ -8,25 +8,36 @@ export function ThemeToggle() {
     const { theme, resolvedTheme, setTheme } = useTheme();
     const toggleOnSound = useSoundAction('toggle-on');
     const toggleOffSound = useSoundAction('toggle-off');
-    const toggleTheme = () => {
-        // Determine target theme before switching
+    const toggleTheme = (e) => {
         const currentResolved = theme === 'system' ? resolvedTheme : theme;
         const goingToDark = currentResolved !== 'dark';
-        // Play sound before setTheme for immediate feedback
+        const newTheme = theme === 'system'
+            ? resolvedTheme === 'dark'
+                ? 'light'
+                : 'dark'
+            : theme === 'dark'
+                ? 'light'
+                : 'dark';
+        // Play sound before transition for immediate feedback
         if (goingToDark) {
             toggleOnSound.play();
         }
         else {
             toggleOffSound.play();
         }
-        // If system theme, switch to explicit light/dark
-        // If explicit, toggle between light and dark
-        if (theme === 'system') {
-            setTheme(resolvedTheme === 'dark' ? 'light' : 'dark');
-        }
-        else {
-            setTheme(theme === 'dark' ? 'light' : 'dark');
+        const prefersReducedMotion = typeof window !== 'undefined' &&
+            window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        if (!document.startViewTransition || prefersReducedMotion) {
+            setTheme(newTheme);
+            return;
         }
+        document.documentElement.style.setProperty('--x', `${e.clientX}px`);
+        document.documentElement.style.setProperty('--y', `${e.clientY}px`);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        document.startViewTransition(() => {
+            setTheme(newTheme);
+        });
     };
     return (_jsxs(Button, { variant: "ghost", size: "icon", onClick: toggleTheme, "aria-label": `Switch to ${resolvedTheme === 'dark' ? 'light' : 'dark'} mode`, children: [_jsx(Sun, { className: "h-5 w-5 scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" }), _jsx(Moon, { className: "absolute h-5 w-5 scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" }), _jsx("span", { className: "sr-only", children: "Toggle theme" })] }));
 }