@shohojdhara/atomix 0.3.6 → 0.3.7

package/src/lib/theme/runtime/index.ts

@@ -7,6 +7,7 @@
 export { ThemeProvider } from './ThemeProvider';
 export { ThemeErrorBoundary } from './ThemeErrorBoundary';
 export { useTheme } from './useTheme';
+export { useThemeTokens } from './useThemeTokens';
 export { ThemeApplicator, getThemeApplicator, applyTheme } from './ThemeApplicator';
 export type { ThemeErrorBoundaryProps } from './ThemeErrorBoundary';
 

package/src/lib/theme/runtime/useThemeTokens.ts

@@ -0,0 +1,131 @@
+import { useCallback } from 'react';
+import { useTheme } from './useTheme';
+import type { Theme } from '../types';
+
+/**
+ * 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.
+ */
+type ThemeTokens = {
+    theme: string;
+    activeTheme: Theme | null;
+    getToken: (tokenName: string, fallback?: string) => string;
+    getThemeValue: (path: string, fallback?: any) => any;
+    colors: {
+      primary: string;
+      secondary: string;
+      error: string;
+      success: string;
+      warning: string;
+      info: string;
+      light: string;
+      dark: string;
+    };
+    spacing: Record<string, string>;
+    borderRadius: Record<string, string>;
+    typography: {
+      fontFamily: Record<string, string>;
+      fontSize: Record<string, string>;
+      fontWeight: Record<string, string>;
+    };
+    shadows: Record<string, string>;
+    transitions: Record<string, string>;
+  };
+
+export function useThemeTokens(): ThemeTokens {
+  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 <ThemeTokens>{
+    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'),
+    },
+  };
+}

package/src/lib/theme/utils/componentTheming.ts

@@ -0,0 +1,132 @@
+/**
+ * Component Theming Utilities
+ * 
+ * Provides consistent patterns for applying theme values to components
+ */
+
+import type { Theme } from '../types';
+
+export interface ComponentThemeOptions {
+  component: string;
+  variant?: string;
+  size?: string;
+  theme: Theme;
+}
+
+/**
+ * Get a theme value for a specific component using CSS variables
+ * This ensures all components access theme values consistently
+ */
+export function getComponentThemeValue(
+  component: string,
+  property: string,
+  variant?: string,
+  size?: string
+): string {
+  // Build CSS variable name following consistent pattern
+  const parts = ['atomix', component];
+  
+  if (variant) {
+    parts.push(variant);
+  }
+  
+  if (size) {
+    parts.push(size);
+  }
+  
+  parts.push(property);
+  
+  const cssVarName = `--${parts.join('-')}`;
+  const fallbackVarName = `--atomix-${property}`;
+  
+  // Return CSS variable reference with fallback
+  return `var(${cssVarName}, var(${fallbackVarName}, initial))`;
+}
+
+/**
+ * Generate component-specific CSS variables from theme
+ */
+export function generateComponentCSSVars(
+  component: string,
+  theme: Theme,
+  variant?: string,
+  size?: string
+): Record<string, string> {
+  const vars: Record<string, string> = {};
+  
+  // This is a simplified implementation - in a real system you'd have more
+  // sophisticated logic to extract component-specific values from the theme
+  const prefixParts = ['atomix', component];
+  
+  if (variant) {
+    prefixParts.push(variant);
+  }
+  
+  if (size) {
+    prefixParts.push(size);
+  }
+  
+  const prefix = prefixParts.join('-');
+  
+  // Add common component properties
+  if (theme.palette) {
+    vars[`--${prefix}-color`] = theme.palette.primary?.main || '#7c3aed';
+    vars[`--${prefix}-color-hover`] = theme.palette.primary?.dark || '#5b21b6';
+    vars[`--${prefix}-color-active`] = theme.palette.primary?.main || '#7c3aed';
+    vars[`--${prefix}-color-disabled`] = theme.palette.text?.disabled || '#9ca3af';
+  }
+  
+  if (theme.typography) {
+    vars[`--${prefix}-font-family`] = theme.typography.fontFamily || 'Inter, sans-serif';
+    vars[`--${prefix}-font-size`] = theme.typography.fontSize ? `${theme.typography.fontSize}px` : '16px';
+  }
+  
+  if (theme.spacing) {
+    const spacing = typeof theme.spacing === 'function' ? theme.spacing : (val: number) => val * 8;
+    vars[`--${prefix}-spacing-unit`] = `${spacing(1)}px`;
+    vars[`--${prefix}-spacing-sm`] = `${spacing(0.5)}px`;
+    vars[`--${prefix}-spacing-md`] = `${spacing(1)}px`;
+    vars[`--${prefix}-spacing-lg`] = `${spacing(2)}px`;
+  }
+  
+  return vars;
+}
+
+/**
+ * Apply consistent theme to component style object
+ */
+export function applyComponentTheme(
+  component: string,
+  style: React.CSSProperties = {},
+  variant?: string,
+  size?: string,
+  theme?: Theme
+): React.CSSProperties {
+  // If no theme provided, return original style
+  if (!theme) {
+    return style;
+  }
+  
+  // Generate component-specific CSS variables
+  const componentVars = generateComponentCSSVars(component, theme, variant, size);
+  
+  // Merge with existing style
+  return {
+    ...componentVars,
+    ...style,
+  };
+}
+
+/**
+ * Create a hook for consistent component theming
+ */
+export function useComponentTheme(
+  component: string,
+  variant?: string,
+  size?: string,
+  theme?: Theme
+): (property: string) => string {
+  return (property: string) => {
+    return getComponentThemeValue(component, property, variant, size);
+  };
+}

package/src/lib/theme/utils/naming.ts

@@ -0,0 +1,100 @@
+/**
+ * Naming Utilities
+ * 
+ * Provides consistent naming conventions across the theme system
+ */
+
+export interface NamingOptions {
+  prefix?: string;
+  component?: string;
+  variant?: string;
+  state?: string;
+}
+
+/**
+ * Generate consistent CSS class names following BEM methodology
+ */
+export function generateClassName(block: string, element?: string, modifiers?: Record<string, boolean | string>): string {
+  let className = block;
+  
+  if (element) {
+    className += `__${element}`;
+  }
+  
+  if (modifiers) {
+    Object.entries(modifiers).forEach(([key, value]) => {
+      if (value) {
+        className += `--${key}`;
+        if (typeof value === 'string' && value !== key) {
+          className += `-${value}`;
+        }
+      }
+    });
+  }
+  
+  return className;
+}
+
+/**
+ * Generate consistent CSS variable names
+ */
+export function generateCSSVariableName(property: string, options: NamingOptions = {}): string {
+  const { prefix = 'atomix', component, variant, state } = options;
+  
+  const parts = [prefix];
+  
+  if (component) {
+    parts.push(component);
+  }
+  
+  if (variant) {
+    parts.push(variant);
+  }
+  
+  if (state) {
+    parts.push(state);
+  }
+  
+  parts.push(property);
+  
+  return `--${parts.join('-')}`;
+}
+
+/**
+ * Normalize theme tokens to consistent naming convention
+ */
+export function normalizeThemeTokens(tokens: Record<string, any>): Record<string, any> {
+  const normalized: Record<string, any> = {};
+  
+  for (const [key, value] of Object.entries(tokens)) {
+    if (typeof value === 'object' && value !== null) {
+      // Recursively normalize nested objects
+      normalized[key] = normalizeThemeTokens(value);
+    } else {
+      // Apply consistent naming transformation
+      normalized[key] = value;
+    }
+  }
+  
+  return normalized;
+}
+
+/**
+ * Convert camelCase to kebab-case for CSS custom properties
+ */
+export function camelToKebab(str: string): string {
+  return str.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
+}
+
+/**
+ * Convert theme property to CSS variable name
+ */
+export function themePropertyToCSSVar(propertyPath: string, prefix: string = 'atomix'): string {
+  // Convert nested property paths to kebab-case
+  const path = propertyPath
+    .split('.')
+    .map(part => camelToKebab(part))
+    .join('-');
+  
+  return `--${prefix}-${path}`;
+}

package/src/lib/theme/utils/themeUtils.ts

@@ -207,13 +207,13 @@ export function spacing(theme: Theme, ...values: number[]): string {
  * @param fallback - Fallback value if path not found
  * @returns Theme value or fallback
  */
-export function getThemeValue<T = any>(theme: Theme, path: string, fallback?: T): T {
+export function getThemeValue<T = unknown>(theme: Theme, path: string, fallback?: T): T {
     const keys = path.split('.');
-    let value: any = theme;
+    let value: unknown = theme;
 
     for (const key of keys) {
         if (value && typeof value === 'object' && key in value) {
-            value = value[key];
+            value = (value as Record<string, unknown>)[key];
         } else {
             return fallback as T;
         }
@@ -225,8 +225,8 @@ export function getThemeValue<T = any>(theme: Theme, path: string, fallback?: T)
 /**
  * Check if a theme is a JS theme (created with createTheme)
  */
-export function isJSTheme(theme: any): theme is Theme {
-    return theme && typeof theme === 'object' && theme.__isJSTheme === true;
+export function isJSTheme(theme: unknown): theme is Theme {
+    return typeof theme === 'object' && theme !== null && '__isJSTheme' in theme && theme.__isJSTheme === true;
 }
 
 // ============================================================================
@@ -265,7 +265,7 @@ export function breakpointBetween(
 /**
  * Get typography variant styles
  */
-export function getTypography(theme: Theme, variant: keyof Theme['typography']): any {
+export function getTypography(theme: Theme, variant: keyof Theme['typography']): Theme['typography'][keyof Theme['typography']] {
     return theme.typography[variant] ?? {};
 }
 

package/src/lib/utils/componentUtils.ts

@@ -114,7 +114,7 @@ export function hasCustomization(props: {
  * Create data attributes for debugging
  */
 export function createDebugAttrs(componentName: string, variant?: string): Record<string, string> {
-  if (process.env.NODE_ENV !== 'development') return {};
+  if (typeof process === 'undefined' || process.env?.NODE_ENV !== 'development') return {};
   
   return {
     'data-component': componentName,

package/src/lib/utils/memoryMonitor.ts

@@ -34,7 +34,7 @@ export function isMemoryMonitoringAvailable(): boolean {
   return (
     typeof performance !== 'undefined' &&
     'memory' in performance &&
-    process.env.NODE_ENV === 'development'
+    (typeof process === 'undefined' || process.env?.NODE_ENV === 'development')
   );
 }
 
@@ -133,7 +133,7 @@ export function monitorMemoryUsage(
     if (snapshot) {
       if (callback) {
         callback(snapshot);
-      } else if (process.env.NODE_ENV === 'development') {
+      } else if (typeof process !== 'undefined' && process.env?.NODE_ENV === 'development') {
         console.log('[Memory Monitor]', {
           used: formatBytes(snapshot.usedJSHeapSize),
           total: formatBytes(snapshot.totalJSHeapSize),
@@ -175,7 +175,7 @@ export function trackComponentMemory(componentName: string) {
       const after = getMemorySnapshot();
       if (before && after) {
         const leakInfo = detectMemoryLeak(before, after);
-        if (leakInfo.hasLeak && process.env.NODE_ENV === 'development') {
+        if (leakInfo.hasLeak && (typeof process === 'undefined' || process.env?.NODE_ENV === 'development')) {
           console.warn(
             `[Memory Monitor] Potential memory leak detected in ${componentName}:`,
             leakInfo

package/src/lib/utils/themeNaming.ts

@@ -0,0 +1,135 @@
+/**
+ * Theme Naming Utility
+ * 
+ * Provides consistent naming conventions for CSS classes, CSS variables,
+ * and JavaScript properties throughout the theme system.
+ */
+
+export class ThemeNaming {
+  private static prefix = 'atomix';
+
+  /**
+   * Set the global prefix for all theme tokens
+   * @param newPrefix - New prefix to use
+   */
+  static setPrefix(newPrefix: string): void {
+    this.prefix = newPrefix;
+  }
+
+  /**
+   * Get the current prefix
+   */
+  static getPrefix(): string {
+    return this.prefix;
+  }
+
+  /**
+   * Convert camelCase to kebab-case for CSS variables
+   * @param str - String to convert
+   */
+  static camelToKebab(str: string): string {
+    return str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();
+  }
+
+  /**
+   * Convert kebab-case to camelCase for JavaScript properties
+   * @param str - String to convert
+   */
+  static kebabToCamel(str: string): string {
+    return str.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+  }
+
+  /**
+   * Create a CSS variable name
+   * @param token - Token name in camelCase
+   */
+  static cssVar(token: string): string {
+    return `--${this.prefix}-${this.camelToKebab(token)}`;
+  }
+
+  /**
+   * Create a BEM CSS class name
+   * @param block - Block name
+   * @param element - Element name (optional)
+   * @param modifier - Modifier name (optional)
+   */
+  static bemClass(block: string, element?: string, modifier?: string): string {
+    let className = `c-${block}`;
+
+    if (element) {
+      className += `__${element}`;
+    }
+
+    if (modifier) {
+      className += `--${modifier}`;
+    }
+
+    return className;
+  }
+
+  /**
+   * Create a variant class name
+   * @param component - Component name
+   * @param variant - Variant name
+   */
+  static variantClass(component: string, variant: string): string {
+    return `c-${component}--${variant}`;
+  }
+
+  /**
+   * Create a size class name
+   * @param component - Component name
+   * @param size - Size name
+   */
+  static sizeClass(component: string, size: string): string {
+    return `c-${component}--${size}`;
+  }
+
+  /**
+   * Create a state class name
+   * @param component - Component name
+   * @param state - State name
+   */
+  static stateClass(component: string, state: string): string {
+    return `c-${component}--${state}`;
+  }
+
+  /**
+   * Create a utility class name
+   * @param utility - Utility name
+   */
+  static utilityClass(utility: string): string {
+    return `u-${utility}`;
+  }
+
+  /**
+   * Create a layout class name
+   * @param layout - Layout name
+   */
+  static layoutClass(layout: string): string {
+    return `l-${layout}`;
+  }
+
+  /**
+   * Create an object class name
+   * @param object - Object name
+   */
+  static objectClass(object: string): string {
+    return `o-${object}`;
+  }
+}
+
+// Export constants for common naming patterns
+export const THEME_NAMING = {
+  PREFIX: 'atomix',
+  CSS_VAR: ThemeNaming.cssVar,
+  BEM_CLASS: ThemeNaming.bemClass,
+  VARIANT_CLASS: ThemeNaming.variantClass,
+  SIZE_CLASS: ThemeNaming.sizeClass,
+  STATE_CLASS: ThemeNaming.stateClass,
+  UTILITY_CLASS: ThemeNaming.utilityClass,
+  LAYOUT_CLASS: ThemeNaming.layoutClass,
+  OBJECT_CLASS: ThemeNaming.objectClass,
+  CAMEL_TO_KEBAB: ThemeNaming.camelToKebab,
+  KEBAB_TO_CAMEL: ThemeNaming.kebabToCamel,
+};