@shohojdhara/atomix 0.2.5 → 0.2.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shohojdhara/atomix",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "description": "Atomix Design System - A modern component library for web applications",
   "type": "module",
   "sideEffects": false,

package/src/components/AtomixGlass/AtomixGlass.tsx

@@ -561,7 +561,6 @@ export function AtomixGlass({
           width: adjustedSize.width,
           borderRadius: `${effectiveCornerRadius}px`,
           transform: baseStyle.transform,
-          transition: baseStyle.transition,
         }}
       />
       <div
@@ -580,7 +579,6 @@ export function AtomixGlass({
           width: adjustedSize.width,
           borderRadius: `${effectiveCornerRadius}px`,
           transform: baseStyle.transform,
-          transition: baseStyle.transition,
         }}
       />
       {shouldRenderOverLightLayers && (

package/src/components/AtomixGlass/AtomixGlassContainer.tsx

@@ -334,7 +334,6 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
             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}

package/src/components/ColorModeToggle/ColorModeToggle.stories.tsx

@@ -1,5 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { ColorModeToggle } from './ColorModeToggle';
+import { useState } from 'react';
+import { ColorModeToggle, type ColorMode } from './ColorModeToggle';
+import { Moon, Sun } from '@phosphor-icons/react';
 
 const meta = {
   title: 'Components/ColorModeToggle',
@@ -8,9 +10,26 @@ const meta = {
     layout: 'centered',
   },
   argTypes: {
-    className: {
-      control: 'text',
-      description: 'Additional CSS class names',
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Size variant',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disable the toggle',
+    },
+    showTooltip: {
+      control: 'boolean',
+      description: 'Show tooltip on hover',
+    },
+    disableStorage: {
+      control: 'boolean',
+      description: 'Disable localStorage persistence',
+    },
+    disableSystemPreference: {
+      control: 'boolean',
+      description: 'Disable system preference detection',
     },
   },
 } satisfies Meta<typeof ColorModeToggle>;
@@ -23,22 +42,113 @@ export const Default: Story = {
   args: {},
 };
 
-// With Custom Class
-export const WithCustomClass: Story = {
+// Size Variants
+export const Sizes: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
+      <ColorModeToggle size="sm" />
+      <ColorModeToggle size="md" />
+      <ColorModeToggle size="lg" />
+    </div>
+  ),
+};
+
+// Disabled State
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+};
+
+// Controlled Mode
+export const Controlled: Story = {
+  render: () => {
+    const [mode, setMode] = useState<ColorMode>('light');
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', alignItems: 'center' }}>
+        <ColorModeToggle value={mode} onChange={setMode} />
+        <p>Current mode: {mode}</p>
+        <button onClick={() => setMode(mode === 'light' ? 'dark' : 'light')}>
+          Toggle from outside
+        </button>
+      </div>
+    );
+  },
+};
+
+// Custom Icons
+export const CustomIcons: Story = {
+  render: () => (
+    <ColorModeToggle
+      lightIcon={<Moon size={24} weight="fill" />}
+      darkIcon={<Sun size={24} weight="fill" />}
+    />
+  ),
+};
+
+// With Callback
+export const WithCallback: Story = {
+  render: () => {
+    const [lastChanged, setLastChanged] = useState<string>('');
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', alignItems: 'center' }}>
+        <ColorModeToggle
+          onChange={(mode) => setLastChanged(`Changed to ${mode} at ${new Date().toLocaleTimeString()}`)}
+        />
+        {lastChanged && <p style={{ fontSize: '0.875rem' }}>{lastChanged}</p>}
+      </div>
+    );
+  },
+};
+
+// Custom Storage Key
+export const CustomStorageKey: Story = {
+  args: {
+    storageKey: 'my-app-theme',
+    dataAttribute: 'data-theme',
+  },
+};
+
+// Without Storage
+export const WithoutStorage: Story = {
   args: {
-    className: 'custom-class',
+    disableStorage: true,
   },
 };
 
-// Example Usage
-export const ExampleUsage: Story = {
+// Example Usage in Header
+export const InHeader: Story = {
   render: () => (
     <div
       className="u-p-5 u-shadow u-d-flex u-justify-content-between u-align-items-center"
-      style={{ width: '300px', borderRadius: '8px' }}
+      style={{ width: '400px', borderRadius: '8px' }}
     >
-      <span>Toggle Theme</span>
+      <span style={{ fontWeight: 600 }}>Toggle Theme</span>
       <ColorModeToggle />
     </div>
   ),
 };
+
+// Multiple Toggles
+export const MultipleToggles: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: '2rem' }}>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem', alignItems: 'center' }}>
+        <ColorModeToggle size="sm" />
+        <span style={{ fontSize: '0.75rem' }}>Small</span>
+      </div>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem', alignItems: 'center' }}>
+        <ColorModeToggle size="md" />
+        <span style={{ fontSize: '0.75rem' }}>Medium</span>
+      </div>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem', alignItems: 'center' }}>
+        <ColorModeToggle size="lg" />
+        <span style={{ fontSize: '0.75rem' }}>Large</span>
+      </div>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem', alignItems: 'center' }}>
+        <ColorModeToggle disabled />
+        <span style={{ fontSize: '0.75rem' }}>Disabled</span>
+      </div>
+    </div>
+  ),
+};

package/src/components/ColorModeToggle/ColorModeToggle.tsx

@@ -1,84 +1,185 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useCallback } from 'react';
+
+export type ColorMode = 'light' | 'dark';
 
 export interface ColorModeToggleProps {
+  /** Additional CSS class names */
   className?: string;
+  /** Inline styles */
   style?: React.CSSProperties;
+  /** Controlled mode value */
+  value?: ColorMode;
+  /** Default mode (uncontrolled) */
+  defaultValue?: ColorMode;
+  /** Callback when mode changes */
+  onChange?: (mode: ColorMode) => void;
+  /** Custom light mode icon */
+  lightIcon?: React.ReactNode;
+  /** Custom dark mode icon */
+  darkIcon?: React.ReactNode;
+  /** Size variant */
+  size?: 'sm' | 'md' | 'lg';
+  /** Disable the toggle */
+  disabled?: boolean;
+  /** localStorage key for persistence */
+  storageKey?: string;
+  /** data attribute name for body element */
+  dataAttribute?: string;
+  /** Disable localStorage persistence */
+  disableStorage?: boolean;
+  /** Disable system preference detection */
+  disableSystemPreference?: boolean;
+  /** Custom aria-label */
+  'aria-label'?: string;
+  /** Show tooltip */
+  showTooltip?: boolean;
 }
 
-export const ColorModeToggle: React.FC<ColorModeToggleProps> = ({ className = '', style }) => {
-  const [colorMode, setColorMode] = useState<'light' | 'dark'>('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,
+};
+
+export const ColorModeToggle: React.FC<ColorModeToggleProps> = ({
+  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] = useState<ColorMode>(defaultValue);
+  const colorMode = isControlled ? controlledValue : internalMode;
 
   // Initialize color mode from localStorage or system preference
   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 (!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);
+      }
+    }
 
-    if (storedColorMode === 'light' || storedColorMode === 'dark') {
-      setColorMode(storedColorMode);
-    } 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
   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
   useEffect(() => {
+    if (isControlled || disableSystemPreference || typeof window === 'undefined') return;
+
     const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
 
     const handleSystemThemeChange = (event: MediaQueryListEvent) => {
       // Only update if user hasn't explicitly set a preference
-      if (!localStorage.getItem('atomix-color-mode')) {
-        setColorMode(event.matches ? 'dark' : 'light');
+      if (disableStorage) {
+        setInternalMode(event.matches ? 'dark' : 'light');
+      } else {
+        try {
+          const hasStoredPreference = localStorage.getItem(storageKey);
+          if (!hasStoredPreference) {
+            setInternalMode(event.matches ? 'dark' : 'light');
+          }
+        } catch (error) {
+          console.warn('ColorModeToggle: Failed to check localStorage', error);
+        }
       }
     };
 
-    // Add event listener for system theme changes
-    if (darkModeMediaQuery.addEventListener) {
-      darkModeMediaQuery.addEventListener('change', handleSystemThemeChange);
-    } else {
-      // Fallback for older browsers
-      darkModeMediaQuery.addListener(handleSystemThemeChange);
-    }
+    darkModeMediaQuery.addEventListener('change', handleSystemThemeChange);
 
-    // Clean up event listener
     return () => {
-      if (darkModeMediaQuery.removeEventListener) {
-        darkModeMediaQuery.removeEventListener('change', handleSystemThemeChange);
-      } else {
-        // Fallback for older browsers
-        darkModeMediaQuery.removeListener(handleSystemThemeChange);
-      }
+      darkModeMediaQuery.removeEventListener('change', handleSystemThemeChange);
     };
-  }, []);
+  }, [isControlled, disableSystemPreference, disableStorage, storageKey]);
 
-  const toggleColorMode = () => {
-    setColorMode(prevMode => (prevMode === 'light' ? 'dark' : 'light'));
-  };
+  const toggleColorMode = useCallback(() => {
+    if (disabled) return;
+
+    const newMode: ColorMode = 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 = (
+    <svg viewBox="0 0 24 24" width={iconSize} height={iconSize} fill="currentColor" aria-hidden="true">
+      <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" />
+    </svg>
+  );
+
+  const defaultDarkIcon = (
+    <svg viewBox="0 0 24 24" width={iconSize} height={iconSize} fill="currentColor" aria-hidden="true">
+      <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" />
+    </svg>
+  );
 
   return (
     <button
-      className={`c-color-mode-toggle ${className}`}
+      type="button"
+      className={`c-color-mode-toggle c-color-mode-toggle--${size} ${disabled ? 'c-color-mode-toggle--disabled' : ''} ${className}`}
       onClick={toggleColorMode}
-      aria-label={`Switch to ${colorMode === 'light' ? 'dark' : 'light'} mode`}
-      title={`Switch to ${colorMode === 'light' ? 'dark' : 'light'} mode`}
+      disabled={disabled}
+      aria-label={label}
+      aria-pressed={colorMode === 'dark'}
+      title={title}
       style={style}
     >
-      {colorMode === 'light' ? (
-        <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor">
-          <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" />
-        </svg>
-      ) : (
-        <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor">
-          <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" />
-        </svg>
-      )}
+      {colorMode === 'light' ? (lightIcon || defaultLightIcon) : (darkIcon || defaultDarkIcon)}
     </button>
   );
 };

package/src/components/ColorModeToggle/index.ts

@@ -1,2 +1,2 @@
 export { default as ColorModeToggle } from './ColorModeToggle';
-export type { ColorModeToggleProps } from './ColorModeToggle';
+export type { ColorModeToggleProps, ColorMode } from './ColorModeToggle';

package/src/lib/constants/components.ts

@@ -1604,7 +1604,7 @@ export const ATOMIX_GLASS = {
     CORNER_RADIUS: 16, // Default border-radius matching design system
     PADDING: '0 0',
     MODE: 'standard' as const,
-    OVER_LIGHT: 'auto' as const,
+    OVER_LIGHT: false as const,
     ENABLE_OVER_LIGHT_LAYERS: true,
   },
   CONSTANTS: {

package/src/styles/06-components/_components.atomix-glass.scss

@@ -7,7 +7,7 @@
   // CSS custom property defaults
   --atomix-glass-radius: var(--atomix-radius-md, 16px);
   --atomix-glass-transform: none;
-  --atomix-glass-transition: opacity var(--atomix-transition-duration, 0.2s) ease-out;
+  --atomix-glass-transition: all var(--atomix-transition-duration, 0s) ease-out;
   --atomix-glass-position: absolute;
   --atomix-glass-container-width: 100%;
   --atomix-glass-container-height: 100%;
@@ -138,14 +138,13 @@
     height: var(--atomix-glass-container-height);
     position: relative;
     border-radius: var(--atomix-glass-radius);
-    transition: border-radius 0.25s ease-out;
+    transition: var(--atomix-glass-transition);
   }
 
   &__inner {
     width: var(--atomix-glass-container-width);
     height: var(--atomix-glass-container-height);
     position: relative;
-    // Padding and border-radius are set dynamically via inline styles
     border-radius: var(--atomix-glass-radius);
   }
 
@@ -202,10 +201,12 @@
     // When both --dark and --over-light modifiers are present
     &--dark#{&}--over-light {
       opacity: var(--atomix-opacity-50, 0.5);
+      z-index: -1;
     }
 
     &--black#{&}--over-light {
       opacity: var(--atomix-opacity-25, 0.25);
+      
     }
 
     // Hidden state modifier

package/src/styles/06-components/_components.color-mode-toggle.scss

@@ -12,26 +12,63 @@
   cursor: pointer;
   padding: rem(8px);
   border-radius: 50%;
-  transition: background-color 0.2s ease;
+  transition: background-color 0.2s ease, opacity 0.2s ease;
   color: var(--#{$prefix}body-color);
 
-  &:hover {
+  &:hover:not(:disabled) {
     @include dynamic-background(rgba(0, 0, 0, 0.05));
   }
 
-  &:focus {
+  &:focus-visible {
     outline: none;
     box-shadow: 0 0 0 2px var(--#{$prefix}primary);
   }
 
+  &:active:not(:disabled) {
+    transform: scale(0.95);
+  }
+
   svg {
-    width: rem(24px);
-    height: rem(24px);
+    display: block;
+    transition: transform 0.2s ease;
+  }
+
+  // Size variants
+  &--sm {
+    padding: rem(6px);
+  }
+
+  &--md {
+    padding: rem(8px);
+  }
+
+  &--lg {
+    padding: rem(10px);
+  }
+
+  // Disabled state
+  &--disabled,
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
   }
 
   [data-#{$prefix}theme='dark'] & {
-    &:hover {
+    &:hover:not(:disabled) {
       @include dynamic-background(rgba(255, 255, 255, 0.1));
     }
   }
+
+  // Reduced motion support
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+
+    svg {
+      transition: none;
+    }
+
+    &:active:not(:disabled) {
+      transform: none;
+    }
+  }
 }