@shohojdhara/atomix 0.3.6 → 0.3.7

package/src/components/Button/Button.tsx

@@ -1,10 +1,11 @@
-import React, { ElementType, forwardRef, useCallback, useMemo } from 'react';
+import React, { ElementType, forwardRef, useCallback } from 'react';
 import { useButton } from '../../lib/composables/useButton';
 import { ButtonProps } from '../../lib/types/components';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 import { Spinner } from '../Spinner/Spinner';
 import { Icon, type PhosphorIconsType } from '../Icon/Icon';
-import { BUTTON } from '../../lib/constants/components';
+import { BUTTON, THEME_NAMING } from '../../lib/constants/components';
+import { ThemeNaming } from '../../lib/utils/themeNaming';
 
 export type ButtonAsProp = {
   as?: ElementType;
@@ -62,13 +63,7 @@ export const Button = React.memo(
       const shouldRenderAsLink = Boolean(href && !isDisabled);
 
       // Resolve icon element - support both icon (ReactNode) and iconName (string)
-      const iconElement = useMemo(() => {
-        if (loading) return null;
-        if (iconName) {
-          return <Icon name={iconName as PhosphorIconsType} size={iconSize} />;
-        }
-        return icon;
-      }, [icon, iconName, iconSize, loading]);
+      const iconElement = iconName ? <Icon name={iconName as PhosphorIconsType} size={iconSize} /> : icon;
 
       const { generateButtonClass, handleClick } = useButton({
         variant,
@@ -83,24 +78,23 @@ export const Button = React.memo(
         selected,
       });
 
-      const buttonClass = useMemo(
-        () =>
-          generateButtonClass({
-            variant,
-            size,
-            disabled: isDisabled,
-            rounded,
-            iconOnly,
-            glass,
-            loading,
-            fullWidth,
-            block,
-            active,
-            selected,
-            className,
-          }),
-        [variant, size, isDisabled, rounded, iconOnly, glass, loading, fullWidth, block, active, selected, className, generateButtonClass]
-      );
+      const buttonClass = [
+        BUTTON.BASE_CLASS,
+        ThemeNaming.variantClass(THEME_NAMING.BUTTON_PREFIX, variant),
+        size !== 'md' ? ThemeNaming.sizeClass(THEME_NAMING.BUTTON_PREFIX, size) : '',
+        iconOnly ? ThemeNaming.stateClass(THEME_NAMING.BUTTON_PREFIX, THEME_NAMING.ICON_ELEMENT) : '',
+        rounded ? ThemeNaming.stateClass(THEME_NAMING.BUTTON_PREFIX, 'rounded') : '',
+        isDisabled ? ThemeNaming.stateClass(THEME_NAMING.BUTTON_PREFIX, 'disabled') : '',
+        glass ? ThemeNaming.stateClass(THEME_NAMING.BUTTON_PREFIX, 'glass') : '',
+        loading ? BUTTON.CLASSES.LOADING : '',
+        fullWidth ? BUTTON.CLASSES.FULL_WIDTH : '',
+        block ? BUTTON.CLASSES.BLOCK : '',
+        active ? BUTTON.CLASSES.ACTIVE : '',
+        selected ? BUTTON.CLASSES.SELECTED : '',
+        className,
+      ]
+        .filter(Boolean)
+        .join(' ');
 
       // Handle click with loading check
       const handleClickEvent = useCallback(
@@ -145,117 +139,76 @@ export const Button = React.memo(
       );
 
       // Determine button text
-      const buttonText = useMemo(() => {
-        if (loading && loadingText) return loadingText;
-        if (loading && !loadingText) return label || children;
-        return label || children;
-      }, [loading, loadingText, label, children]);
+      const buttonText = loading && loadingText ? loadingText : label || children;
 
       // Determine spinner size based on button size
-      const spinnerSize = useMemo(() => {
-        if (size === 'sm') return 'sm';
-        if (size === 'lg') return 'md';
-        return 'sm';
-      }, [size]);
+      const spinnerSize = size === 'sm' ? 'sm' : size === 'lg' ? 'md' : 'sm';
 
       // Button content with icon positioning
-      const buttonContent = useMemo(() => {
-        const iconSpan = iconElement && (
-          <span className={BUTTON.ICON_CLASS} aria-hidden="true">
-            {iconElement}
-          </span>
-        );
-
-        const spinnerElement = loading && (
-          <span className={BUTTON.SPINNER_CLASS} aria-hidden="true">
-            <Spinner
-              size={spinnerSize}
-              variant={
-                variant === 'link' || (typeof variant === 'string' && variant.startsWith('outline-'))
-                  ? 'primary'
-                  : (variant === 'danger' ? 'error' : (variant as any))
-              }
-            />
-          </span>
-        );
-
-        const labelElement = !iconOnly && buttonText && (
-          <span className={BUTTON.LABEL_CLASS}>{buttonText}</span>
-        );
-
-        if (iconPosition === 'end') {
-          return (
-            <>
-              {labelElement}
-              {spinnerElement}
-              {iconSpan}
-            </>
-          );
-        }
-
-        return (
-          <>
-            {spinnerElement}
-            {iconSpan}
-            {labelElement}
-          </>
-        );
-      }, [iconElement, iconPosition, iconOnly, buttonText, loading, spinnerSize, variant]);
+      const buttonContent = (
+        <>
+          {loading && (
+            <span className={ThemeNaming.bemClass(THEME_NAMING.BUTTON_PREFIX, THEME_NAMING.SPINNER_ELEMENT)} aria-hidden="true">
+              <Spinner
+                size={spinnerSize}
+                variant={
+                  variant === 'link' || (typeof variant === 'string' && variant.startsWith('outline-'))
+                    ? 'primary'
+                    : (variant === 'danger' ? 'error' : (variant as any))
+                }
+              />
+            </span>
+          )}
+          {iconElement && !loading && (
+            <span className={ThemeNaming.bemClass(THEME_NAMING.BUTTON_PREFIX, THEME_NAMING.ICON_ELEMENT)} aria-hidden="true">
+              {iconElement}
+            </span>
+          )}
+          {!iconOnly && buttonText && (
+            <span className={ThemeNaming.bemClass(THEME_NAMING.BUTTON_PREFIX, THEME_NAMING.LABEL_ELEMENT)}>{buttonText}</span>
+          )}
+        </>
+      );
 
       // Button props
-      const buttonProps = useMemo(
-        () => ({
-          ref,
-          className: buttonClass,
-          type: Component === 'button' && !shouldRenderAsLink ? type : undefined,
-          onClick: handleClickEvent,
-          onMouseEnter: onHover ? handleMouseEnter : undefined,
-          onFocus: onFocus ? handleFocusEvent : undefined,
-          onBlur: onBlur ? handleBlurEvent : undefined,
-          disabled: isDisabled && Component === 'button' && !shouldRenderAsLink,
-          'aria-disabled': isDisabled,
-          'aria-busy': loading,
-          'aria-label': ariaLabel || (iconOnly ? label || children : undefined),
-          'aria-describedby': ariaDescribedBy,
-          'aria-expanded': ariaExpanded,
-          'aria-controls': ariaControls,
-          tabIndex: tabIndex !== undefined ? tabIndex : (isDisabled ? -1 : 0),
-          style,
-          ...props,
-        }),
-        [
-          ref,
-          buttonClass,
-          Component,
-          type,
-          handleClickEvent,
-          handleMouseEnter,
-          handleFocusEvent,
-          handleBlurEvent,
-          isDisabled,
-          loading,
-          ariaLabel,
-          iconOnly,
-          label,
-          children,
-          ariaDescribedBy,
-          ariaExpanded,
-          ariaControls,
-          tabIndex,
-          style,
-          props,
-        ]
-      );
+      const buttonProps = {
+        ref,
+        className: buttonClass,
+        type: Component === 'button' && !shouldRenderAsLink ? type : undefined,
+        onClick: handleClickEvent,
+        onMouseEnter: onHover ? handleMouseEnter : undefined,
+        onFocus: onFocus ? handleFocusEvent : undefined,
+        onBlur: onBlur ? handleBlurEvent : undefined,
+        disabled: isDisabled && Component === 'button' && !shouldRenderAsLink,
+        'aria-disabled': isDisabled,
+        'aria-busy': loading,
+        'aria-label': ariaLabel || (iconOnly ? label || children : undefined),
+        'aria-describedby': ariaDescribedBy,
+        'aria-expanded': ariaExpanded,
+        'aria-controls': ariaControls,
+        tabIndex: tabIndex !== undefined ? tabIndex : (isDisabled ? -1 : 0),
+        style,
+        ...props,
+      };
+
+      // Default glass props
+      const defaultGlassProps = {
+        displacementScale: 20,
+        blurAmount: 0,
+        saturation: 200,
+        elasticity: 0,
+      };
+      const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
 
       // Render as anchor if href is provided
       if (shouldRenderAsLink) {
         const { ref: _, ...buttonPropsWithoutRef } = buttonProps;
         const anchorButtonProps = {
           ...buttonPropsWithoutRef,
-          type: undefined, 
+          type: undefined,
           disabled: undefined,
         };
-        
+
         // Use custom LinkComponent if provided (e.g., Next.js Link)
         if (LinkComponent) {
           const LinkComp = LinkComponent as React.ComponentType<any>;
@@ -266,25 +219,14 @@ export const Button = React.memo(
             target,
             rel: target === '_blank' ? 'noopener noreferrer' : undefined,
           };
-          
+
           const linkElement = (
             <LinkComp {...linkProps}>
               {buttonContent}
             </LinkComp>
           );
 
-          if (glass) {
-            const defaultGlassProps = {
-              displacementScale: 20,
-              blurAmount: 0,
-              saturation: 200,
-              elasticity: 0,
-            };
-            const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
-            return <AtomixGlass {...glassProps}>{linkElement}</AtomixGlass>;
-          }
-
-          return linkElement;
+          return glass ? <AtomixGlass {...glassProps}>{linkElement}</AtomixGlass> : linkElement;
         }
 
         // Fallback to regular anchor tag
@@ -294,39 +236,15 @@ export const Button = React.memo(
           </a>
         );
 
-        if (glass) {
-          const defaultGlassProps = {
-            displacementScale: 20,
-            blurAmount: 0,
-            saturation: 200,
-            elasticity: 0,
-          };
-          const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
-          return <AtomixGlass {...glassProps}>{anchorElement}</AtomixGlass>;
-        }
-
-        return anchorElement;
+        return glass ? <AtomixGlass {...glassProps}>{anchorElement}</AtomixGlass> : anchorElement;
       }
 
       // Default button rendering
-      if (glass) {
-        const defaultGlassProps = {
-          displacementScale: 20,
-          blurAmount: 0,
-          saturation: 200,
-          elasticity: 0,
-        };
-
-        const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
-
-        return (
-          <AtomixGlass {...glassProps}>
-            <Component {...buttonProps}>{buttonContent}</Component>
-          </AtomixGlass>
-        );
-      }
+      const buttonElement = (
+        <Component {...buttonProps}>{buttonContent}</Component>
+      );
 
-      return <Component {...buttonProps}>{buttonContent}</Component>;
+      return glass ? <AtomixGlass {...glassProps}>{buttonElement}</AtomixGlass> : buttonElement;
     }
   )
 );
@@ -335,4 +253,4 @@ Button.displayName = 'Button';
 
 export type { ButtonProps };
 
-export default Button;
+export default Button;

package/src/lib/composables/useAtomixGlass.ts

@@ -309,14 +309,14 @@ export function useAtomixGlass({
           //     timestamp: new Date().toISOString(),
           //   });
           // }
-        } else if (process.env.NODE_ENV !== 'production' && debugCornerRadius) {
+        } else if ((typeof process === 'undefined' || process.env?.NODE_ENV !== 'production') && debugCornerRadius) {
           //   console.log(
           //     '[AtomixGlass] No corner radius found, using default:',
           //     CONSTANTS.DEFAULT_CORNER_RADIUS
           //   );
         }
       } catch (error) {
-        if (process.env.NODE_ENV !== 'production' && debugCornerRadius) {
+        if ((typeof process === 'undefined' || process.env?.NODE_ENV !== 'production') && debugCornerRadius) {
           console.error('[AtomixGlass] Error extracting corner radius:', error);
         }
       }
@@ -412,7 +412,7 @@ export function useAtomixGlass({
               }
             } catch (styleError) {
               // Silently continue if getting computed style fails for this element
-              if (process.env.NODE_ENV === 'development') {
+              if (typeof process === 'undefined' || process.env?.NODE_ENV === 'development') {
                 console.debug('AtomixGlass: Error getting computed style for element:', styleError);
               }
             }
@@ -484,7 +484,7 @@ export function useAtomixGlass({
           }
         } catch (error) {
           // Enhanced error logging with context
-          if (process.env.NODE_ENV === 'development') {
+          if (typeof process === 'undefined' || process.env?.NODE_ENV === 'development') {
             console.warn('AtomixGlass: Error detecting background brightness:', error);
           }
           const result = false;
@@ -607,7 +607,7 @@ export function useAtomixGlass({
       setInternalMouseOffset(newOffset);
       setInternalGlobalMousePosition(globalPos);
 
-      if (process.env.NODE_ENV !== 'production' && enablePerformanceMonitoring) {
+      if ((typeof process === 'undefined' || process.env?.NODE_ENV !== 'production') && enablePerformanceMonitoring) {
         const endTime = performance.now();
         const duration = endTime - startTime;
         // if (duration > 5) {
@@ -964,7 +964,7 @@ export function useAtomixGlass({
       };
 
       // Debug logging
-      if (process.env.NODE_ENV !== 'production' && debugOverLight) {
+      if ((typeof process === 'undefined' || process.env?.NODE_ENV !== 'production') && debugOverLight) {
         console.log('[AtomixGlass] OverLight Config:', {
           isOverLight,
           config: {
@@ -996,7 +996,7 @@ export function useAtomixGlass({
     }
 
     // Debug logging for non-object configs
-    if (process.env.NODE_ENV !== 'production' && debugOverLight) {
+    if ((typeof process === 'undefined' || process.env?.NODE_ENV !== 'production') && debugOverLight) {
       console.log('[AtomixGlass] OverLight Config:', {
         isOverLight,
         configType: typeof overLight === 'boolean' ? (overLight ? 'true' : 'false') : overLight,

package/src/lib/config/loader.ts

@@ -46,7 +46,7 @@ export function loadAtomixConfig(
     // In browser environments, config loading is not supported
     if (typeof window !== 'undefined') {
         if (required) {
-            throw new Error('Config loading not supported in browser environment');
+            throw new Error('loadAtomixConfig: Not available in browser environment. Config loading requires Node.js/SSR environment.');
         }
         return defaultConfig;
     }
@@ -144,5 +144,4 @@ export function resolveConfigPath(): string | null {
     return null;
 }
 
-export default loadAtomixConfig;
-
+export default loadAtomixConfig;

package/src/lib/constants/components.ts

@@ -32,6 +32,13 @@ export const CLASS_PREFIX = {
 /**
  * Button-specific constants
  */
+export const THEME_NAMING = {
+  BUTTON_PREFIX: 'btn',
+  ICON_ELEMENT: 'icon',
+  LABEL_ELEMENT: 'label',
+  SPINNER_ELEMENT: 'spinner',
+};
+
 export const BUTTON = {
   BASE_CLASS: 'c-btn',
   ICON_CLASS: 'c-btn__icon',

package/src/lib/hooks/usePerformanceMonitor.ts

@@ -77,7 +77,7 @@ export interface UsePerformanceMonitorOptions {
 export function usePerformanceMonitor(options: UsePerformanceMonitorOptions) {
   const {
     componentName,
-    logToConsole = process.env.NODE_ENV === 'development',
+    logToConsole = (typeof process === 'undefined' || process.env?.NODE_ENV === 'development'),
     warnThreshold = 16,
     onMetrics,
   } = options;

package/src/lib/hooks/useThemeTokens.ts

@@ -0,0 +1,105 @@
+import { useContext } from 'react';
+import { ThemeContext } from '../theme/runtime/ThemeContext';
+import { useTheme } from '../theme/runtime/useTheme';
+
+/**
+ * Standardized hook for accessing theme tokens in components
+ * 
+ * Provides consistent access to theme values across all components
+ * using either CSS custom properties or theme object values.
+ */
+export function useThemeTokens() {
+  const { theme, activeTheme } = useTheme();
+
+  // Helper function to get CSS variable value
+  const getToken = useCallback((tokenName: string, fallback?: string) => {
+    if (typeof window === 'undefined') return fallback || '';
+
+    const cssVarName = `--atomix-${tokenName}`;
+    const computedStyle = getComputedStyle(document.documentElement);
+    return computedStyle.getPropertyValue(cssVarName).trim() || fallback || '';
+  }, []);
+
+  // Helper function to get theme object value
+  const getThemeValue = useCallback((path: string, fallback?: any) => {
+    if (!activeTheme) return fallback;
+
+    // Navigate through nested theme object using dot notation
+    return path.split('.').reduce((obj, key) => obj?.[key], activeTheme) || fallback;
+  }, [activeTheme]);
+
+  // Return unified API for accessing theme values
+  return {
+    theme,
+    activeTheme,
+    getToken,
+    getThemeValue,
+    // Commonly used tokens with fallbacks
+    colors: {
+      primary: getToken('primary', '#3b82f6'),
+      secondary: getToken('secondary', '#10b981'),
+      error: getToken('error', '#ef4444'),
+      success: getToken('success', '#22c55e'),
+      warning: getToken('warning', '#eab308'),
+      info: getToken('info', '#3b82f6'),
+      light: getToken('light', '#f9fafb'),
+      dark: getToken('dark', '#111827'),
+    },
+    spacing: {
+      1: getToken('spacing-1', '0.25rem'),
+      2: getToken('spacing-2', '0.5rem'),
+      3: getToken('spacing-3', '0.75rem'),
+      4: getToken('spacing-4', '1rem'),
+      5: getToken('spacing-5', '1.25rem'),
+      6: getToken('spacing-6', '1.5rem'),
+      8: getToken('spacing-8', '2rem'),
+      10: getToken('spacing-10', '2.5rem'),
+      12: getToken('spacing-12', '3rem'),
+      16: getToken('spacing-16', '4rem'),
+      20: getToken('spacing-20', '5rem'),
+    },
+    borderRadius: {
+      sm: getToken('border-radius-sm', '0.25rem'),
+      md: getToken('border-radius-md', '0.5rem'),
+      lg: getToken('border-radius-lg', '0.75rem'),
+      xl: getToken('border-radius-xl', '1rem'),
+      full: getToken('border-radius-full', '9999px'),
+    },
+    typography: {
+      fontFamily: {
+        sans: getToken('font-sans-serif', 'Inter, system-ui, sans-serif'),
+        serif: getToken('font-serif', 'Georgia, serif'),
+        mono: getToken('font-monospace', 'Fira Code, monospace'),
+      },
+      fontSize: {
+        xs: getToken('font-size-xs', '0.75rem'),
+        sm: getToken('font-size-sm', '0.875rem'),
+        md: getToken('font-size-md', '1rem'),
+        lg: getToken('font-size-lg', '1.125rem'),
+        xl: getToken('font-size-xl', '1.25rem'),
+        '2xl': getToken('font-size-2xl', '1.5rem'),
+        '3xl': getToken('font-size-3xl', '1.875rem'),
+        '4xl': getToken('font-size-4xl', '2.25rem'),
+      },
+      fontWeight: {
+        light: getToken('font-weight-light', '300'),
+        normal: getToken('font-weight-normal', '400'),
+        medium: getToken('font-weight-medium', '500'),
+        semibold: getToken('font-weight-semibold', '600'),
+        bold: getToken('font-weight-bold', '700'),
+      },
+    },
+    shadows: {
+      sm: getToken('box-shadow-sm', '0 1px 2px 0 rgba(0, 0, 0, 0.05)'),
+      md: getToken('box-shadow-md', '0 4px 6px -1px rgba(0, 0, 0, 0.1)'),
+      lg: getToken('box-shadow-lg', '0 10px 15px -3px rgba(0, 0, 0, 0.1)'),
+      xl: getToken('box-shadow-xl', '0 20px 25px -5px rgba(0, 0, 0, 0.1)'),
+      inset: getToken('box-shadow-inset', 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)'),
+    },
+    transitions: {
+      fast: getToken('transition-fast', '150ms'),
+      base: getToken('transition-base', '200ms'),
+      slow: getToken('transition-slow', '300ms'),
+    },
+  };
+}