@shohojdhara/atomix 0.3.10 → 0.3.12

package/src/lib/theme/index.ts

@@ -29,7 +29,7 @@ export { createTheme } from './core';
 export { deepMerge, mergeTheme, extendTheme } from './core';
 
 // Simplified Theme Registry
-export { 
+export {
   createThemeRegistry,
   registerTheme,
   unregisterTheme,
@@ -46,7 +46,7 @@ export {
 // ============================================================================
 
 import { injectCSS, removeCSS, isCSSInjected } from './utils/injectCSS';
-import { saveCSSFile, saveCSSFileSync } from './generators/cssFile';
+// File saving utilities removed to prevent bundling Node.js modules in browser
 
 /**
  * Inject theme CSS into DOM
@@ -62,12 +62,7 @@ export function removeTheme(id: string = 'atomix-theme'): void {
   removeCSS(id);
 }
 
-/**
- * Save theme to CSS file
- */
-export async function saveTheme(css: string, filePath: string): Promise<void> {
-  await saveCSSFile(css, filePath);
-}
+
 
 // ============================================================================
 // Token Utilities
@@ -113,14 +108,7 @@ export {
 export { injectCSS, removeCSS, isCSSInjected } from './utils/injectCSS';
 
 
-// ============================================================================
-// Config Loader
-// ============================================================================
-
-export {
-  loadThemeFromConfig,
-  loadThemeFromConfigSync,
-} from './config/configLoader';
+// Config loader removed to prevent bundling Node.js modules in browser
 
 // ============================================================================
 // React Integration

package/src/lib/theme/runtime/ThemeProvider.tsx

@@ -86,22 +86,7 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({
       return defaultTheme;
     }
 
-    // Try to load from atomix.config.ts as fallback, but only in Node.js/SSR environments
-    if (typeof window === 'undefined') {
-      try {
-        // Dynamically import the config loader to avoid bundling issues in browser
-        // eslint-disable-next-line @typescript-eslint/no-var-requires
-        const { loadThemeFromConfigSync } = require('../config/configLoader');
-
-        const configTokens = loadThemeFromConfigSync();
-        if (configTokens && Object.keys(configTokens).length > 0) {
-          // For simplicity, we'll treat config tokens as a special theme name
-          return 'config-theme';
-        }
-      } catch (error) {
-        // Failed to load theme from config, using default
-      }
-    }
+
 
     // Default fallback
     return 'default';

package/src/lib/types/components.ts

@@ -1418,19 +1418,7 @@ export interface SideMenuProps extends BaseComponentProps {
    * <SideMenu LinkComponent={Link} />
    * ```
    */
-  LinkComponent?: React.ComponentType<{
-    href?: string;
-    to?: string;
-    children: React.ReactNode;
-    className?: string;
-    onClick?: (event: React.MouseEvent) => void;
-    target?: string;
-    rel?: string;
-    'aria-disabled'?: boolean;
-    'aria-current'?: string;
-    tabIndex?: number;
-    ref?: React.Ref<HTMLAnchorElement>;
-  }>;
+  LinkComponent?: React.ElementType;
 
   /**
    * Menu items
@@ -1524,19 +1512,7 @@ export interface SideMenuItemProps extends BaseComponentProps {
    * <SideMenuItem href="/about" LinkComponent={Link}>About</SideMenuItem>
    * ```
    */
-  LinkComponent?: React.ComponentType<{
-    href?: string;
-    to?: string;
-    children: React.ReactNode;
-    className?: string;
-    onClick?: (event: React.MouseEvent) => void;
-    target?: string;
-    rel?: string;
-    'aria-disabled'?: boolean;
-    'aria-current'?: string;
-    tabIndex?: number;
-    ref?: React.Ref<HTMLAnchorElement>;
-  }>;
+  LinkComponent?: React.ElementType;
 }
 
 /**

package/src/styles/06-components/_components.edge-panel.scss

@@ -416,7 +416,7 @@
   }
 
   // Remove borders for glass variant on all positions
-  &.c-edge-panel--start .c-edge-panel__glass-wrapper {
+  &.c-edge-panel--start .c-edge-panel__glass-content {
     animation: slideInStart 0.3s ease forwards;
 
     &.is-animating-out {
@@ -424,7 +424,7 @@
     }
   }
 
-  &.c-edge-panel--end .c-edge-panel__glass-wrapper {
+  &.c-edge-panel--end .c-edge-panel__glass-content {
     animation: slideInEnd 0.3s ease forwards;
 
     &.is-animating-out {
@@ -432,11 +432,11 @@
     }
   }
 
-  &.c-edge-panel--top .c-edge-panel__glass-wrapper {
+  &.c-edge-panel--top .c-edge-panel__glass-content{
     animation: slideInTop 0.3s ease forwards;
   }
 
-  &.c-edge-panel--bottom .c-edge-panel__glass-wrapper {
+  &.c-edge-panel--bottom .c-edge-panel__glass-content {
     animation: slideInBottom 0.3s ease forwards;
   }
 

package/src/styles/06-components/_components.nav.scss

@@ -92,6 +92,9 @@
     visibility: hidden;
     opacity: 0;
     white-space: nowrap;
+    list-style: none;
+    padding: 0;
+    margin: 0;
     @include transition.basic-transition();
 
     &--center {

package/src/lib/config/loader.ts

@@ -1,147 +0,0 @@
-/**
- * Atomix Config Loader
- * 
- * Helper functions to load atomix.config.ts from external projects.
- * Similar to how Tailwind loads tailwind.config.js
- */
-
-import type { AtomixConfig } from './index';
-
-/**
- * Load Atomix configuration from project root
- * 
- * Attempts to load atomix.config.ts from the current working directory.
- * Falls back to default config if file doesn't exist.
- * 
- * @param options - Loader options
- * @returns Loaded configuration or default
- * 
- * @example
- * ```typescript
- * import { loadAtomixConfig } from '@shohojdhara/atomix/config';
- * import { createTheme } from '@shohojdhara/atomix/theme';
- * 
- * const config = loadAtomixConfig();
- * const theme = createTheme(config.theme?.tokens || {});
- * ```
- */
-export function loadAtomixConfig(
-    options: {
-        /** Custom config path (default: 'atomix.config.ts') */
-        configPath?: string;
-        /** Whether to throw error if config not found (default: false) */
-        required?: boolean;
-    } = {}
-): AtomixConfig {
-    const { configPath = 'atomix.config.ts', required = false } = options;
-
-    // Default config
-    const defaultConfig: AtomixConfig = {
-        prefix: 'atomix',
-        theme: {
-            extend: {},
-        },
-    };
-
-    // In browser environments, config loading is not supported
-    if (typeof window !== 'undefined') {
-        if (required) {
-            throw new Error('loadAtomixConfig: Not available in browser environment. Config loading requires Node.js/SSR environment.');
-        }
-        return defaultConfig;
-    }
-
-    // Try to load config file
-    try {
-        // Use dynamic import for ESM compatibility
-        const configModule = require(configPath);
-        const config = configModule.default || configModule;
-        
-        // Validate it's an AtomixConfig
-        if (config && typeof config === 'object') {
-            return config as AtomixConfig;
-        }
-        
-        throw new Error('Invalid config format');
-    } catch (error: any) {
-        if (required) {
-            throw new Error(`Failed to load config from ${configPath}: ${error.message}`);
-        }
-        
-        // Return default config if not required
-        return defaultConfig;
-    }
-}
-
-/**
- * Resolve config path
- * 
- * Finds atomix.config.ts in the project, checking common locations.
- * Returns null in browser environments where file system access is not available.
- * 
- * This function is designed to work in Node.js environments only.
- * In browser builds, it will always return null without attempting to access Node.js modules.
- * 
- * @internal This function uses Node.js modules and should not be called in browser environments.
- */
-export function resolveConfigPath(): string | null {
-    // Early return for browser environments - prevents any Node.js module access
-    // This check happens before any require() calls, preventing bundlers from analyzing them
-    if (typeof window !== 'undefined' || typeof process === 'undefined' || !process.cwd) {
-        return null;
-    }
-
-    // Only attempt to load Node.js modules in Node.js runtime
-    // Use a lazy-loading pattern that prevents static analysis by bundlers
-    try {
-        // Create a function that only executes in Node.js runtime
-        // Use string-based module names to prevent static analysis by bundlers
-        const loadNodeModules = () => {
-            // These requires are only executed at runtime in Node.js environments
-            // They are marked as external in Rollup config and should not be bundled
-            // Using string concatenation and computed property access to prevent static analysis
-            if (typeof require === 'undefined') {
-                return null;
-            }
-            
-            // Use a try-catch wrapper to safely access require
-            try {
-                // Build module names dynamically to prevent static analysis
-                const moduleNames: [string, string] = ['f' + 's', 'p' + 'a' + 't' + 'h'];
-                // eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires
-                const fs = require(moduleNames[0]);
-                // eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires
-                const path = require(moduleNames[1]);
-                return { fs, path };
-            } catch {
-                return null;
-            }
-        };
-
-        const modules = loadNodeModules();
-        if (!modules) {
-            return null;
-        }
-
-        const { fs, path } = modules;
-        const cwd = process.cwd();
-        const possiblePaths = [
-            path.join(cwd, 'atomix.config.ts'),
-            path.join(cwd, 'atomix.config.js'),
-            path.join(cwd, 'atomix.config.mjs'),
-        ];
-
-        for (const configPath of possiblePaths) {
-            if (fs.existsSync(configPath)) {
-                return configPath;
-            }
-        }
-    } catch (error) {
-        // Silently fail in browser environments or when modules are unavailable
-        return null;
-    }
-
-    return null;
-}
-
-export default loadAtomixConfig;

package/src/lib/theme/config/__tests__/configLoader.test.ts

@@ -1,207 +0,0 @@
-/**
- * Config Loader Tests
- * 
- * Tests for automatic config loading from atomix.config.ts
- */
-
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { loadThemeFromConfigSync, loadThemeFromConfig } from '../configLoader';
-import { createTheme } from '../../core/createTheme';
-import type { DesignTokens } from '../../tokens/tokens';
-
-describe('Config Loader', () => {
-  beforeEach(() => {
-    // Clear any cached configs
-    vi.clearAllMocks();
-  });
-
-  afterEach(() => {
-    vi.restoreAllMocks();
-  });
-
-  describe('loadThemeFromConfigSync', () => {
-    it('should return empty object in browser environment', () => {
-      // Mock window object
-      const originalWindow = global.window;
-      // @ts-expect-error - intentionally setting window for test
-      global.window = {};
-
-      const result = loadThemeFromConfigSync();
-      expect(result).toEqual({});
-
-      // Restore
-      global.window = originalWindow;
-    });
-
-    it('should handle missing config file gracefully', () => {
-      // In Node.js environment, if config doesn't exist, should return empty object
-      const result = loadThemeFromConfigSync('non-existent-config.ts');
-      expect(result).toEqual({});
-    });
-  });
-
-  describe('loadThemeFromConfig', () => {
-    it('should return empty object in browser environment', async () => {
-      // Mock window object
-      const originalWindow = global.window;
-      // @ts-expect-error - intentionally setting window for test
-      global.window = {};
-
-      const result = await loadThemeFromConfig();
-      expect(result).toEqual({});
-
-      // Restore
-      global.window = originalWindow;
-    });
-
-    it('should handle missing config file gracefully', async () => {
-      const result = await loadThemeFromConfig('non-existent-config.ts');
-      expect(result).toEqual({});
-    });
-  });
-
-  describe('Token Flattening', () => {
-    it('should correctly map simple color strings', () => {
-      // This tests the internal flattenConfigTokens function indirectly
-      // by checking that createTheme can handle config structure
-      const mockConfig = {
-        theme: {
-          extend: {
-            colors: {
-              primary: '#7AFFD7',
-              secondary: '#FF5733',
-            },
-          },
-        },
-      };
-
-      // Since we can't directly test the private function,
-      // we test through createTheme which uses it
-      // This is an integration test
-      expect(typeof createTheme).toBe('function');
-    });
-
-    it('should correctly map palette color objects', () => {
-      const mockConfig = {
-        theme: {
-          extend: {
-            colors: {
-              primary: {
-                main: '#7AFFD7',
-                light: '#B3FFE9',
-                dark: '#00E6C3',
-              },
-            },
-          },
-        },
-      };
-
-      // Integration test through createTheme
-      expect(typeof createTheme).toBe('function');
-    });
-
-    it('should correctly map color scales', () => {
-      const mockConfig = {
-        theme: {
-          extend: {
-            colors: {
-              primary: {
-                1: '#f0f9ff',
-                6: '#3b82f6',
-                10: '#1e3a8a',
-              },
-            },
-          },
-        },
-      };
-
-      // Integration test
-      expect(typeof createTheme).toBe('function');
-    });
-
-    it('should correctly map spacing tokens', () => {
-      const mockConfig = {
-        theme: {
-          extend: {
-            spacing: {
-              '4': '1rem',
-              '8': '2rem',
-            },
-          },
-        },
-      };
-
-      // Integration test
-      expect(typeof createTheme).toBe('function');
-    });
-
-    it('should correctly map typography tokens', () => {
-      const mockConfig = {
-        theme: {
-          extend: {
-            typography: {
-              fontFamilies: {
-                sans: ['Inter', 'sans-serif'],
-              },
-              fontSizes: {
-                '2xl': '1.5rem',
-              },
-            },
-          },
-        },
-      };
-
-      // Integration test
-      expect(typeof createTheme).toBe('function');
-    });
-  });
-});
-
-describe('createTheme with Config Loading', () => {
-  it('should work without input (will use defaults if config not available)', () => {
-    // createTheme() should work even if config is not available
-    // It will fall back to default tokens
-    const css = createTheme();
-    
-    expect(typeof css).toBe('string');
-    expect(css).toContain(':root');
-    expect(css).toContain('--atomix');
-  });
-
-  it('should accept DesignTokens input', () => {
-    const tokens: Partial<DesignTokens> = {
-      'primary': '#7AFFD7',
-      'spacing-4': '1rem',
-    };
-
-    const css = createTheme(tokens);
-    
-    expect(typeof css).toBe('string');
-    expect(css).toContain('--atomix-primary');
-    expect(css).toContain('#7AFFD7');
-  });
-
-  it('should respect prefix option', () => {
-    const tokens: Partial<DesignTokens> = {
-      'primary': '#7AFFD7',
-    };
-
-    const css = createTheme(tokens, { prefix: 'myapp' });
-    
-    expect(css).toContain('--myapp-primary');
-    expect(css).not.toContain('--atomix-primary');
-  });
-
-  it('should respect selector option', () => {
-    const tokens: Partial<DesignTokens> = {
-      'primary': '#7AFFD7',
-    };
-
-    const css = createTheme(tokens, { selector: '[data-theme="dark"]' });
-    
-    expect(css).toContain('[data-theme="dark"]');
-    expect(css).not.toContain(':root');
-  });
-});
-
-

package/src/lib/theme/config/configLoader.ts

@@ -1,113 +0,0 @@
-
-/**
- * Theme Configuration Loader
- *
- * Provides functions to load theme configurations from atomix.config.ts
- * Includes both sync and async versions, with automatic fallbacks
- */
-
-import type { DesignTokens } from '../tokens/tokens';
-import { createTokens } from '../tokens/tokens';
-import { loadAtomixConfig as loadAtomixConfigStatic } from '../../config/loader';
-
-/**
- * Load theme from config file (synchronous, Node.js only)
- * @param configPath - Path to config file (default: atomix.config.ts)
- * @returns DesignTokens from theme configuration
- * @throws Error if config loading is not available in browser environment
- */
-export function loadThemeFromConfigSync(options?: { configPath?: string; required?: boolean }): DesignTokens {
-  // Check if we're in a browser environment
-  if (typeof window !== 'undefined') {
-    throw new Error('loadThemeFromConfigSync: Not available in browser environment. Config loading requires Node.js/SSR environment.');
-  }
-
-  // Use static import - the function handles browser environment checks internally
-  let config;
-  
-  try {
-    config = loadAtomixConfigStatic({
-      configPath: options?.configPath || 'atomix.config.ts',
-      required: options?.required !== false,
-    });
-  } catch (error) {
-    if (options?.required !== false) {
-      throw new Error('Config loader module not available');
-    }
-    // Return empty tokens if config is not required
-    return createTokens({});
-  }
-
-  if (!config?.theme) {
-    return createTokens({});
-  }
-
-  // Extract tokens from config.theme structure
-  // config.theme can have: { extend?: ThemeTokens, tokens?: ThemeTokens, themes?: ... }
-  // We need to extract the actual DesignTokens (flat structure)
-  const themeConfig = config.theme;
-  
-  // Check if theme is directly a flat object (DesignTokens format)
-  // This handles the case where config.theme might be passed as DesignTokens directly
-  if (themeConfig && typeof themeConfig === 'object' && !('extend' in themeConfig) && !('tokens' in themeConfig) && !('themes' in themeConfig)) {
-    // It's likely already a flat DesignTokens object
-    return createTokens(themeConfig as Partial<DesignTokens>);
-  }
-  
-  // If theme has nested structure (extend/tokens/themes), we can't directly use it
-  // Return empty tokens - the theme system will use defaults
-  // TODO: Add proper conversion from ThemeTokens to DesignTokens if needed
-  return createTokens({});
-}
-
-/**
- * Load theme from config file (asynchronous)
- * @param configPath - Path to config file (default: atomix.config.ts)
- * @returns Promise resolving to DesignTokens from theme configuration
- */
-export async function loadThemeFromConfig(options?: { configPath?: string; required?: boolean }): Promise<DesignTokens> {
-  // Check if we're in a browser environment
-  if (typeof window !== 'undefined') {
-    throw new Error('loadThemeFromConfig: Not available in browser environment. Config loading requires Node.js/SSR environment.');
-  }
-
-  // Use static import with runtime check
-  // The function will handle browser environment checks internally
-  let config;
-  
-  try {
-    // loadAtomixConfig is synchronous, not async
-    config = loadAtomixConfigStatic({
-      configPath: options?.configPath || 'atomix.config.ts',
-      required: options?.required !== false,
-    });
-  } catch (error) {
-    if (options?.required !== false) {
-      throw new Error('Config loader module not available');
-    }
-    // Return empty tokens if config is not required
-    return createTokens({});
-  }
-
-  if (!config?.theme) {
-    return createTokens({});
-  }
-
-  // Extract tokens from config.theme structure
-  // config.theme can have: { extend?: ThemeTokens, tokens?: ThemeTokens, themes?: ... }
-  // We need to extract the actual DesignTokens (flat structure)
-  const themeConfig = config.theme;
-  
-  // Check if theme is directly a flat object (DesignTokens format)
-  // This handles the case where config.theme might be passed as DesignTokens directly
-  if (themeConfig && typeof themeConfig === 'object' && !('extend' in themeConfig) && !('tokens' in themeConfig) && !('themes' in themeConfig)) {
-    // It's likely already a flat DesignTokens object
-    return createTokens(themeConfig as Partial<DesignTokens>);
-  }
-  
-  // If theme has nested structure (extend/tokens/themes), we can't directly use it
-  // Return empty tokens - the theme system will use defaults
-  // TODO: Add proper conversion from ThemeTokens to DesignTokens if needed
-  return createTokens({});
-}
-