@shohojdhara/atomix 0.2.5 → 0.2.6

package/dist/index.js

@@ -1563,7 +1563,7 @@ const ATOMIX_GLASS = {
         CORNER_RADIUS: 16, // Default border-radius matching design system
         PADDING: '0 0',
         MODE: 'standard',
-        OVER_LIGHT: 'auto',
+        OVER_LIGHT: false,
         ENABLE_OVER_LIGHT_LAYERS: true,
     },
     CONSTANTS: {
@@ -2856,7 +2856,6 @@ const AtomixGlassContainer = React.forwardRef(({ children, className = '', style
                 padding: `var(--atomix-glass-container-padding)`,
                 borderRadius: `var(--atomix-glass-container-radius)`,
                 boxShadow: `var(--atomix-glass-container-box-shadow)`,
-                transition: effectiveReducedMotion ? 'none' : 'all 0.2s ease-out',
             }, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onMouseDown: onMouseDown, onMouseUp: onMouseUp, children: [jsxRuntime.jsxs("div", { className: ATOMIX_GLASS.FILTER_CLASS, children: [jsxRuntime.jsx(GlassFilter, { mode: mode, id: filterId, displacementScale: typeof displacementScale === 'number' && !isNaN(displacementScale)
                                 ? displacementScale
                                 : 0, aberrationIntensity: typeof aberrationIntensity === 'number' && !isNaN(aberrationIntensity)
@@ -3926,7 +3925,6 @@ function AtomixGlass({ children, displacementScale = ATOMIX_GLASS.DEFAULTS.DISPL
                     width: adjustedSize.width,
                     borderRadius: `${effectiveCornerRadius}px`,
                     transform: baseStyle.transform,
-                    transition: baseStyle.transition,
                 } }), jsxRuntime.jsx("div", { className: [
                     ATOMIX_GLASS.BACKGROUND_LAYER_CLASS,
                     ATOMIX_GLASS.BACKGROUND_LAYER_BLACK_CLASS,
@@ -3941,7 +3939,6 @@ function AtomixGlass({ children, displacementScale = ATOMIX_GLASS.DEFAULTS.DISPL
                     width: adjustedSize.width,
                     borderRadius: `${effectiveCornerRadius}px`,
                     transform: baseStyle.transform,
-                    transition: baseStyle.transition,
                 } }), shouldRenderOverLightLayers && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: ATOMIX_GLASS.BASE_LAYER_CLASS }), jsxRuntime.jsx("div", { className: ATOMIX_GLASS.OVERLAY_LAYER_CLASS }), jsxRuntime.jsx("div", { className: ATOMIX_GLASS.OVERLAY_HIGHLIGHT_CLASS, style: {
                             opacity: opacityValues.over *
                                 ATOMIX_GLASS.CONSTANTS.OVERLAY_HIGHLIGHT.OPACITY_MULTIPLIER,
@@ -8894,58 +8891,103 @@ const WaterfallChart = React.memo(React.forwardRef(({ waterfallData = [], config
 }));
 WaterfallChart.displayName = 'WaterfallChart';
 
-const ColorModeToggle = ({ className = '', style }) => {
-    const [colorMode, setColorMode] = React.useState('light');
+const DEFAULT_STORAGE_KEY = 'atomix-color-mode';
+const DEFAULT_DATA_ATTRIBUTE = 'data-atomix-color-mode';
+const SIZE_MAP = {
+    sm: 16,
+    md: 24,
+    lg: 32,
+};
+const ColorModeToggle = ({ className = '', style, value: controlledValue, defaultValue = 'light', onChange, lightIcon, darkIcon, size = 'md', disabled = false, storageKey = DEFAULT_STORAGE_KEY, dataAttribute = DEFAULT_DATA_ATTRIBUTE, disableStorage = false, disableSystemPreference = false, 'aria-label': ariaLabel, showTooltip = true, }) => {
+    const isControlled = controlledValue !== undefined;
+    const [internalMode, setInternalMode] = React.useState(defaultValue);
+    const colorMode = isControlled ? controlledValue : internalMode;
     // Initialize color mode from localStorage or system preference
     React.useEffect(() => {
+        if (isControlled)
+            return;
+        // SSR check
+        if (typeof window === 'undefined')
+            return;
         // Check if color mode is already set in localStorage
-        const storedColorMode = localStorage.getItem('atomix-color-mode');
-        if (storedColorMode === 'light' || storedColorMode === 'dark') {
-            setColorMode(storedColorMode);
+        if (!disableStorage) {
+            try {
+                const storedColorMode = localStorage.getItem(storageKey);
+                if (storedColorMode === 'light' || storedColorMode === 'dark') {
+                    setInternalMode(storedColorMode);
+                    return;
+                }
+            }
+            catch (error) {
+                console.warn('ColorModeToggle: Failed to read from localStorage', error);
+            }
         }
-        else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-            // Use system preference if no stored preference
-            setColorMode('dark');
+        // Use system preference if no stored preference
+        if (!disableSystemPreference && window.matchMedia) {
+            const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+            if (prefersDark) {
+                setInternalMode('dark');
+            }
         }
-    }, []);
+    }, [isControlled, disableStorage, disableSystemPreference, storageKey]);
     // Update the document theme attribute when colorMode changes
     React.useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
         const validColorMode = colorMode === 'dark' ? 'dark' : 'light';
-        document.body.setAttribute('data-atomix-color-mode', validColorMode);
-        localStorage.setItem('atomix-color-mode', validColorMode);
-    }, [colorMode]);
+        document.body.setAttribute(dataAttribute, validColorMode);
+        if (!disableStorage) {
+            try {
+                localStorage.setItem(storageKey, validColorMode);
+            }
+            catch (error) {
+                console.warn('ColorModeToggle: Failed to write to localStorage', error);
+            }
+        }
+    }, [colorMode, dataAttribute, disableStorage, storageKey]);
     // Listen for system color scheme changes
     React.useEffect(() => {
+        if (isControlled || disableSystemPreference || typeof window === 'undefined')
+            return;
         const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
         const handleSystemThemeChange = (event) => {
             // Only update if user hasn't explicitly set a preference
-            if (!localStorage.getItem('atomix-color-mode')) {
-                setColorMode(event.matches ? 'dark' : 'light');
-            }
-        };
-        // Add event listener for system theme changes
-        if (darkModeMediaQuery.addEventListener) {
-            darkModeMediaQuery.addEventListener('change', handleSystemThemeChange);
-        }
-        else {
-            // Fallback for older browsers
-            darkModeMediaQuery.addListener(handleSystemThemeChange);
-        }
-        // Clean up event listener
-        return () => {
-            if (darkModeMediaQuery.removeEventListener) {
-                darkModeMediaQuery.removeEventListener('change', handleSystemThemeChange);
+            if (disableStorage) {
+                setInternalMode(event.matches ? 'dark' : 'light');
             }
             else {
-                // Fallback for older browsers
-                darkModeMediaQuery.removeListener(handleSystemThemeChange);
+                try {
+                    const hasStoredPreference = localStorage.getItem(storageKey);
+                    if (!hasStoredPreference) {
+                        setInternalMode(event.matches ? 'dark' : 'light');
+                    }
+                }
+                catch (error) {
+                    console.warn('ColorModeToggle: Failed to check localStorage', error);
+                }
             }
         };
-    }, []);
-    const toggleColorMode = () => {
-        setColorMode(prevMode => (prevMode === 'light' ? 'dark' : 'light'));
-    };
-    return (jsxRuntime.jsx("button", { className: `c-color-mode-toggle ${className}`, onClick: toggleColorMode, "aria-label": `Switch to ${colorMode === 'light' ? 'dark' : 'light'} mode`, title: `Switch to ${colorMode === 'light' ? 'dark' : 'light'} mode`, style: style, children: colorMode === 'light' ? (jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", width: "24", height: "24", fill: "currentColor", children: jsxRuntime.jsx("path", { d: "M9.37 5.51c-.18.64-.27 1.31-.27 1.99 0 4.08 3.32 7.4 7.4 7.4.68 0 1.35-.09 1.99-.27C17.45 17.19 14.93 19 12 19c-3.86 0-7-3.14-7-7 0-2.93 1.81-5.45 4.37-6.49zM12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-2.98 0-5.4-2.42-5.4-5.4 0-1.81.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z" }) })) : (jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", width: "24", height: "24", fill: "currentColor", children: jsxRuntime.jsx("path", { d: "M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0 .39-.39.39-1.03 0-1.41L5.99 4.58zm12.37 12.37c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0 .39-.39.39-1.03 0-1.41l-1.06-1.06zm1.06-10.96c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41.39.39 1.03.39 1.41 0l1.06-1.06zM7.05 18.36c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41.39.39 1.03.39 1.41 0l1.06-1.06z" }) })) }));
+        darkModeMediaQuery.addEventListener('change', handleSystemThemeChange);
+        return () => {
+            darkModeMediaQuery.removeEventListener('change', handleSystemThemeChange);
+        };
+    }, [isControlled, disableSystemPreference, disableStorage, storageKey]);
+    const toggleColorMode = React.useCallback(() => {
+        if (disabled)
+            return;
+        const newMode = colorMode === 'light' ? 'dark' : 'light';
+        if (!isControlled) {
+            setInternalMode(newMode);
+        }
+        onChange?.(newMode);
+    }, [disabled, colorMode, isControlled, onChange]);
+    const iconSize = SIZE_MAP[size];
+    const nextMode = colorMode === 'light' ? 'dark' : 'light';
+    const label = ariaLabel || `Switch to ${nextMode} mode`;
+    const title = showTooltip ? `Switch to ${nextMode} mode` : undefined;
+    const defaultLightIcon = (jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", width: iconSize, height: iconSize, fill: "currentColor", "aria-hidden": "true", children: jsxRuntime.jsx("path", { d: "M9.37 5.51c-.18.64-.27 1.31-.27 1.99 0 4.08 3.32 7.4 7.4 7.4.68 0 1.35-.09 1.99-.27C17.45 17.19 14.93 19 12 19c-3.86 0-7-3.14-7-7 0-2.93 1.81-5.45 4.37-6.49zM12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-2.98 0-5.4-2.42-5.4-5.4 0-1.81.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z" }) }));
+    const defaultDarkIcon = (jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", width: iconSize, height: iconSize, fill: "currentColor", "aria-hidden": "true", children: jsxRuntime.jsx("path", { d: "M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0 .39-.39.39-1.03 0-1.41L5.99 4.58zm12.37 12.37c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0 .39-.39.39-1.03 0-1.41l-1.06-1.06zm1.06-10.96c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41.39.39 1.03.39 1.41 0l1.06-1.06zM7.05 18.36c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41.39.39 1.03.39 1.41 0l1.06-1.06z" }) }));
+    return (jsxRuntime.jsx("button", { type: "button", className: `c-color-mode-toggle c-color-mode-toggle--${size} ${disabled ? 'c-color-mode-toggle--disabled' : ''} ${className}`, onClick: toggleColorMode, disabled: disabled, "aria-label": label, "aria-pressed": colorMode === 'dark', title: title, style: style, children: colorMode === 'light' ? (lightIcon || defaultLightIcon) : (darkIcon || defaultDarkIcon) }));
 };
 ColorModeToggle.displayName = 'ColorModeToggle';