@shohojdhara/atomix 0.3.5 → 0.3.7

package/src/lib/theme/core/createTheme.ts

@@ -0,0 +1,108 @@
+/**
+ * Core Theme Functions
+ *
+ * Simplified theme system that handles both DesignTokens and Theme objects.
+ * Config-first approach: loads from atomix.config.ts when no input is provided.
+ * Config file is required for automatic loading.
+ */
+
+import type { DesignTokens } from '../tokens/tokens';
+import type { Theme } from '../types';
+import type { GenerateCSSVariablesOptions } from '../generators/generateCSS';
+import { createTokens } from '../tokens/tokens';
+import { generateCSSVariables } from '../generators/generateCSS';
+import { themeToDesignTokens } from '../adapters/themeAdapter';
+
+/**
+ * Create theme CSS from tokens or Theme object
+ *
+ * **Config-First Approach**: If no input is provided, loads from `atomix.config.ts`.
+ * Config file is required for automatic loading.
+ *
+ * @param input - DesignTokens (partial), Theme object, or undefined (loads from config)
+ * @param options - CSS generation options (prefix is automatically read from config if not provided)
+ * @returns CSS string with custom properties
+ * @throws Error if config loading fails when no input is provided
+ *
+ * @example
+ * ```typescript
+ * // Loads from atomix.config.ts (config file required)
+ * const css = createTheme();
+ *
+ * // Using DesignTokens
+ * const css = createTheme({
+ *   'primary': '#7c3aed',
+ *   'spacing-4': '1rem',
+ * });
+ *
+ * // Using Theme object
+ * const theme = createThemeObject({ palette: { primary: { main: '#7c3aed' } } });
+ * const css = createTheme(theme);
+ *
+ * // With custom options
+ * const css = createTheme(undefined, { prefix: 'myapp', selector: ':root' });
+ * ```
+ */
+export function createTheme(
+  input?: Partial<DesignTokens> | Theme,
+  options?: GenerateCSSVariablesOptions
+): string {
+  // Determine tokens based on input
+  let tokens: Partial<DesignTokens>;
+  
+  if (!input) {
+    // Check if we're in a browser environment
+    if (typeof window !== 'undefined') {
+      throw new Error('createTheme: No input provided and config loading is not available in browser environment. Please provide tokens explicitly or use Node.js/SSR environment.');
+    }
+    
+    // Load from config when no input provided
+    // Using dynamic import in a way that's more compatible with bundlers
+    let loadThemeFromConfigSync: any;
+    let loadAtomixConfig: any;
+    
+    try {
+      // Use dynamic require but only in Node.js environments
+      // This approach allows bundlers to properly handle external dependencies
+      const configLoaderModule = require('../config/configLoader');
+      const loaderModule = require('../../config/loader');
+      
+      loadThemeFromConfigSync = configLoaderModule.loadThemeFromConfigSync;
+      loadAtomixConfig = loaderModule.loadAtomixConfig;
+      
+      tokens = loadThemeFromConfigSync();
+      
+      // Get prefix from config if needed
+      if (!options?.prefix) {
+        try {
+          const config = loadAtomixConfig({ configPath: 'atomix.config.ts', required: false });
+          options = { ...options, prefix: config?.prefix || 'atomix' };
+        } catch (error) {
+          // If config loading fails, use default prefix
+          options = { ...options, prefix: 'atomix' };
+        }
+      }
+    } catch (error) {
+      throw new Error('createTheme: No input provided and config loading is not available in this environment. Please provide tokens explicitly.');
+    }
+  } else if (isThemeObject(input)) {
+    // Convert Theme object to DesignTokens
+    tokens = themeToDesignTokens(input);
+  } else {
+    // Use DesignTokens directly
+    tokens = input;
+  }
+
+  // Merge with defaults and generate CSS
+  const allTokens = createTokens(tokens);
+
+  // Get prefix from options or use default
+  const prefix = options?.prefix ?? 'atomix';
+
+  return generateCSSVariables(allTokens, { ...options, prefix });
+}
+
+// Helper functions to simplify main function
+function isThemeObject(input: any): input is Theme {
+  return input?.__isJSTheme === true || (input?.palette && input?.typography);
+}

package/src/lib/theme/{createTheme.ts → core/createThemeObject.ts}

@@ -1,12 +1,16 @@
 /**
- * createTheme - Create a theme object with computed values
+ * createThemeObject - Create a theme object with computed values
  * 
  * Similar to Material-UI's createTheme, this function accepts theme configuration
  * options and returns a complete theme object with computed values.
  * 
+ * NOTE: For most use cases, use the simple theme system's `createTheme` instead,
+ * which generates CSS from DesignTokens. This function is for advanced use cases
+ * that need the full Theme object structure.
+ * 
  * @example
  * ```typescript
- * const theme = createTheme({
+ * const theme = createThemeObject({
  *   palette: {
  *     primary: { main: '#7AFFD7' },
  *     secondary: { main: '#FF5733' },
@@ -31,8 +35,8 @@ import type {
     TransitionOptions,
     ZIndexOptions,
     BorderRadiusOptions,
-} from './types';
-import { hexToRgb, getLuminance, getContrastText, lighten, darken, createSpacing } from './themeUtils';
+} from '../types';
+import { hexToRgb, getLuminance, getContrastText, lighten, darken, createSpacing } from '../utils/themeUtils';
 import { deepMerge } from './composeTheme';
 
 // ============================================================================
@@ -291,7 +295,7 @@ function createBreakpoints(breakpointsInput?: BreakpointsOptions): Theme['breakp
  * @param options - Theme configuration options
  * @returns Complete theme object
  */
-export function createTheme(...options: ThemeOptions[]): Theme {
+export function createThemeObject(...options: ThemeOptions[]): Theme {
     // Merge all options
     const mergedOptions = options.reduce((acc, option) => deepMerge(acc, option), {} as ThemeOptions);
 
@@ -323,8 +327,8 @@ export function createTheme(...options: ThemeOptions[]): Theme {
 
     // Create typography
     const typography: Theme['typography'] = deepMerge(
-        { ...DEFAULT_TYPOGRAPHY } as any,
-        (mergedOptions.typography || {}) as any
+        { ...DEFAULT_TYPOGRAPHY } as Partial<Theme['typography']>,
+        (mergedOptions.typography || {}) as Partial<Theme['typography']>
     ) as Theme['typography'];
 
     // Create spacing
@@ -385,4 +389,4 @@ export function createTheme(...options: ThemeOptions[]): Theme {
     return theme;
 }
 
-export default createTheme;
+export default createThemeObject;

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

@@ -1,24 +1,24 @@
 /**
- * Theme Core Module
+ * Core Theme Engine
  * 
- * Core engine components for theme management
+ * Core theme creation, composition, and registry functionality
  */
 
-export { ThemeEngine } from './ThemeEngine';
-export { ThemeRegistry } from './ThemeRegistry';
-export { ThemeCache } from './ThemeCache';
-export { ThemeValidator } from './ThemeValidator';
+export { createTheme } from './createTheme';
+export { createThemeObject } from './createThemeObject';
+export { deepMerge, mergeTheme, extendTheme } from './composeTheme';
 
-export type {
-  ThemeChangeEvent,
-  ThemeLoadOptions,
-  ThemeChangeListener,
-  ThemeLoadListener,
-  ThemeErrorListener,
-  ThemeEngineConfig,
-} from './ThemeEngine';
-
-export type {
-  ValidationResult,
-  A11yIssue,
-} from './ThemeValidator';
+// Simplified Theme Registry API
+export { 
+  createThemeRegistry,
+  registerTheme,
+  unregisterTheme,
+  hasTheme,
+  getTheme,
+  getAllThemes,
+  getThemeIds,
+  clearThemes,
+  getThemeCount,
+  type ThemeRegistry,
+  type ThemeMetadata
+} from './ThemeRegistry';