@shohojdhara/atomix 0.3.6 → 0.3.8

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

@@ -1,94 +1,131 @@
 /**
  * Core Theme Functions
- * 
- * Unified theme system that handles both DesignTokens and Theme objects.
+ *
+ * Simplified theme system using DesignTokens only.
  * 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';
-import { loadThemeFromConfigSync } from '../config/configLoader';
+import { ThemeError, ThemeErrorCode } from '../errors/errors';
 
 /**
- * Create theme CSS from tokens or Theme object
- * 
+ * Create theme CSS from DesignTokens
+ *
  * **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 input - DesignTokens (partial) 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)
+ * // Loads from atomix.config.ts
  * 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,
+  input?: Partial<DesignTokens>,
   options?: GenerateCSSVariablesOptions
 ): string {
-  let tokens: Partial<DesignTokens>;
-  let configPrefix: string | undefined;
+  // Validate options if provided
+  if (options?.prefix) {
+    const prefixPattern = /^[a-z][a-z0-9-]*$/;
+    if (!prefixPattern.test(options.prefix)) {
+      throw new ThemeError(
+        `Invalid CSS variable prefix: "${options.prefix}". Prefix must start with a lowercase letter and contain only lowercase letters, numbers, and hyphens (e.g., "atomix", "my-app").`,
+        ThemeErrorCode.THEME_VALIDATION_FAILED,
+        { prefix: options.prefix, pattern: prefixPattern.toString() }
+      );
+    }
+  }
+
+  // Validate selector if provided
+  if (options?.selector) {
+    // Basic validation - selector should be a valid CSS selector
+    if (typeof options.selector !== 'string' || options.selector.trim().length === 0) {
+      throw new ThemeError(
+        `Invalid CSS selector: "${options.selector}". Selector must be a non-empty string (e.g., ":root", ".my-theme").`,
+        ThemeErrorCode.THEME_VALIDATION_FAILED,
+        { selector: options.selector }
+      );
+    }
+  }
 
-  // If no input provided, load from config (required)
+  // Determine tokens based on input
+  let tokens: Partial<DesignTokens>;
+  
   if (!input) {
-    const configTokens = loadThemeFromConfigSync();
+    // Check if we're in a browser environment
+    if (typeof window !== 'undefined') {
+      throw new ThemeError(
+        'No input provided and config loading is not available in browser environment. Please provide tokens explicitly or use Node.js/SSR environment.',
+        ThemeErrorCode.CONFIG_LOAD_FAILED,
+        { environment: 'browser' }
+      );
+    }
+    
+    // Load from config when no input provided
+    let loadThemeFromConfigSync: any;
+    let loadAtomixConfig: any;
     
-    // Get prefix from config
     try {
-      // eslint-disable-next-line @typescript-eslint/no-require-imports
-      const { loadAtomixConfig } = require('../../config/loader');
-      const config = loadAtomixConfig({ configPath: 'atomix.config.ts', required: true });
-      configPrefix = config?.prefix;
+      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) {
-      // Prefix loading failed, but tokens were loaded, so continue
+      throw new ThemeError(
+        'No input provided and config loading is not available in this environment. Please provide tokens explicitly.',
+        ThemeErrorCode.CONFIG_LOAD_FAILED,
+        { error: error instanceof Error ? error.message : String(error) }
+      );
     }
-    
-    tokens = configTokens;
   } else {
-    // Check if it's a Theme object
-    const isThemeObject = (input as any).__isJSTheme === true || 
-      ((input as any).palette && (input as any).typography);
-
-    if (isThemeObject) {
-      // Convert Theme to DesignTokens
-      tokens = themeToDesignTokens(input as Theme);
-    } else {
-      // Already DesignTokens
-      tokens = input as Partial<DesignTokens>;
+    // Validate input tokens structure
+    if (typeof input !== 'object' || input === null || Array.isArray(input)) {
+      throw new ThemeError(
+        `Invalid tokens input. Expected an object with DesignTokens, but received: ${typeof input}.`,
+        ThemeErrorCode.THEME_VALIDATION_FAILED,
+        { inputType: typeof input }
+      );
     }
+    
+    // Use DesignTokens directly
+    tokens = input;
   }
 
   // Merge with defaults and generate CSS
   const allTokens = createTokens(tokens);
-  
-  // Use prefix from config if not provided in options
-  const finalOptions: GenerateCSSVariablesOptions = {
-    ...options,
-    prefix: options?.prefix ?? configPrefix ?? 'atomix',
-  };
-  
-  return generateCSSVariables(allTokens, finalOptions);
-}
 
+  // Get prefix from options or use default
+  const prefix = options?.prefix ?? 'atomix';
+
+  return generateCSSVariables(allTokens, { ...options, prefix });
+}

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

@@ -327,8 +327,8 @@ export function createThemeObject(...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

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

@@ -5,6 +5,19 @@
  */
 
 export { createTheme } from './createTheme';
-export { createThemeObject } from './createThemeObject';
 export { deepMerge, mergeTheme, extendTheme } from './composeTheme';
-export { ThemeRegistry } from './ThemeRegistry';
+
+// Simplified Theme Registry API
+export { 
+  createThemeRegistry,
+  registerTheme,
+  unregisterTheme,
+  hasTheme,
+  getTheme,
+  getAllThemes,
+  getThemeIds,
+  clearThemes,
+  getThemeCount,
+  type ThemeRegistry,
+  type ThemeMetadata
+} from './ThemeRegistry';

package/src/lib/theme/errors/errors.ts

@@ -120,7 +120,7 @@ export class ThemeLogger {
 
   constructor(config: LoggerConfig = {}) {
     this.config = {
-      level: config.level ?? (process.env.NODE_ENV === 'production' ? LogLevel.WARN : LogLevel.INFO),
+      level: config.level ?? (typeof process !== 'undefined' && process.env?.NODE_ENV === 'production' ? LogLevel.WARN : LogLevel.INFO),
       enableConsole: config.enableConsole ?? true,
       onError: config.onError,
       onWarn: config.onWarn,

package/src/lib/theme/generators/generateCSSNested.ts

@@ -0,0 +1,131 @@
+/**
+ * CSS Variable Generator for Nested Tokens
+ *
+ * Generates CSS custom properties from nested token structures.
+ */
+
+import type { DesignTokens } from '../tokens/tokens';
+import { generateCSSVariables } from './generateCSS';
+import { ThemeNaming } from '../../utils/themeNaming';
+
+/**
+ * Options for CSS variable generation with nested support
+ */
+export interface GenerateNestedCSSVariablesOptions {
+  /** CSS selector for the variables (default: ':root') */
+  selector?: string;
+  /** Prefix for CSS variables (default: 'atomix') */
+  prefix?: string;
+  /** Separator for nested tokens (default: '-') */
+  separator?: string;
+  /** Whether to flatten nested objects (default: true) */
+  flatten?: boolean;
+}
+
+/**
+ * Generate CSS variables from nested token structure
+ *
+ * Converts nested token object to CSS custom properties.
+ * Supports both nested objects and flat token structures.
+ *
+ * @param tokens - Design tokens object (can be nested)
+ * @param options - Generation options
+ * @returns CSS string with custom properties
+ *
+ * @example
+ * ```typescript
+ * const tokens = {
+ *   color: {
+ *     primary: '#7c3aed',
+ *     secondary: '#10b981',
+ *   },
+ *   spacing: {
+ *     small: '0.5rem',
+ *     medium: '1rem',
+ *   },
+ * };
+ *
+ * const css = generateNestedCSSVariables(tokens);
+ * // Returns: ":root {
+  --atomix-color-primary: #7c3aed;
+  --atomix-color-secondary: #10b981;
+  --atomix-spacing-small: 0.5rem;
+  --atomix-spacing-medium: 1rem;
+}"
+ * ```
+ */
+export function generateNestedCSSVariables(
+  tokens: DesignTokens,
+  options: GenerateNestedCSSVariablesOptions = {}
+): string {
+  const {
+    selector = ':root',
+    prefix = 'atomix',
+    separator = '-',
+    flatten = true,
+  } = options;
+
+  // Flatten nested token structure
+  const flattened = flatten ? flattenTokens(tokens, separator) : tokens;
+
+  // Generate CSS variables using the original function
+  // Cast to DesignTokens since generateCSSVariables filters out undefined values
+  return generateCSSVariables(flattened as DesignTokens, { selector, prefix });
+}
+
+/**
+ * Flatten nested token structure
+ *
+ * @param tokens - Token object (can be nested)
+ * @param separator - Separator for nested keys
+ * @returns Flattened token object
+ */
+function flattenTokens(tokens: DesignTokens, separator: string): Partial<DesignTokens> {
+  const result: Partial<DesignTokens> = {};
+
+  for (const [key, value] of Object.entries(tokens)) {
+    if (value && typeof value === 'object' && !Array.isArray(value)) {
+      // Recursively flatten nested objects
+      const flattened = flattenTokens(value, separator);
+
+      // Combine keys with separator
+      for (const [nestedKey, nestedValue] of Object.entries(flattened)) {
+        const newKey = `${key}${separator}${nestedKey}`;
+        result[newKey] = nestedValue;
+      }
+    } else {
+      // Direct value
+      result[key] = value;
+    }
+  }
+
+  return result;
+}
+
+/**
+ * Generate CSS variables with custom selector for nested tokens
+ *
+ * @param tokens - Design tokens object
+ * @param selector - CSS selector (e.g., '[data-theme="dark"]')
+ * @param prefix - CSS variable prefix
+ * @param separator - Separator for nested keys
+ * @returns CSS string
+ *
+ * @example
+ * ```typescript
+ * const css = generateNestedCSSVariablesForSelector(
+ *   tokens,
+ *   '[data-theme="dark"]',
+ *   'atomix',
+ *   '-'
+ * );
+ * ```
+ */
+export function generateNestedCSSVariablesForSelector(
+  tokens: DesignTokens,
+  selector: string,
+  prefix: string = 'atomix',
+  separator: string = '-'
+): string {
+  return generateNestedCSSVariables(tokens, { selector, prefix, separator });
+}

package/src/lib/theme/generators/generateCSSVariables.ts

@@ -40,28 +40,36 @@ export interface GenerateCSSVariablesOptions {
 
 /**
  * Convert a nested object to flat CSS variable declarations
+ * Uses iterative approach for better performance with large objects
  */
 function flattenObject(
     obj: Record<string, any>,
     prefix: string = '',
     result: Record<string, string> = {}
 ): Record<string, string> {
-    for (const key in obj) {
-        if (!Object.prototype.hasOwnProperty.call(obj, key)) continue;
-
-        const value = obj[key];
-        const newKey = prefix ? `${prefix}-${key}` : key;
-
-        if (value && typeof value === 'object' && !Array.isArray(value)) {
-            // Skip special objects like functions
-            if (typeof value === 'function') continue;
-
-            // Recursively flatten nested objects
-            flattenObject(value, newKey, result);
-        } else if (typeof value === 'string' || typeof value === 'number') {
-            // Convert camelCase to kebab-case
-            const kebabKey = newKey.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
-            result[kebabKey] = String(value);
+    // Use iterative approach with stack to avoid deep recursion
+    const stack: Array<{ obj: Record<string, any>; prefix: string }> = [{ obj, prefix }];
+    
+    while (stack.length > 0) {
+        const { obj: currentObj, prefix: currentPrefix } = stack.pop()!;
+        
+        for (const key in currentObj) {
+            if (!Object.prototype.hasOwnProperty.call(currentObj, key)) continue;
+
+            const value = currentObj[key];
+            const newKey = currentPrefix ? `${currentPrefix}-${key}` : key;
+
+            if (value && typeof value === 'object' && !Array.isArray(value)) {
+                // Skip special objects like functions
+                if (typeof value === 'function') continue;
+
+                // Add to stack for iterative processing
+                stack.push({ obj: value, prefix: newKey });
+            } else if (typeof value === 'string' || typeof value === 'number') {
+                // Convert camelCase to kebab-case
+                const kebabKey = newKey.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+                result[kebabKey] = String(value);
+            }
         }
     }
 

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

@@ -10,6 +10,12 @@ export {
   type GenerateCSSVariablesOptions,
 } from './generateCSS';
 
+export {
+  generateNestedCSSVariables,
+  generateNestedCSSVariablesForSelector,
+  type GenerateNestedCSSVariablesOptions,
+} from './generateCSSNested';
+
 export { generateCSSVariables as generateCSSVariablesFromTheme } from './generateCSSVariables';
 
 export {

package/src/lib/theme/index.ts

@@ -1,13 +1,13 @@
 /**
  * Theme System Exports
  * 
- * Unified theme system - handles both DesignTokens and Theme objects.
+ * Simplified theme system using DesignTokens only.
  * 
  * @example
  * ```typescript
  * import { createTheme, injectTheme } from '@shohojdhara/atomix/theme';
  * 
- * // Using DesignTokens (recommended - flat structure)
+ * // Using DesignTokens
  * const css = createTheme({ 'primary': '#7AFFD7', 'spacing-4': '1rem' });
  * injectTheme(css);
  * 
@@ -22,17 +22,24 @@
 // Core Theme Functions
 // ============================================================================
 
-// Unified createTheme (handles both DesignTokens and Theme objects)
+// Create theme CSS from DesignTokens
 export { createTheme } from './core';
 
-// Theme object creation
-export { createThemeObject } from './core';
-
 // Theme composition
 export { deepMerge, mergeTheme, extendTheme } from './core';
 
-// Theme registry
-export { ThemeRegistry } from './core';
+// Simplified Theme Registry
+export { 
+  createThemeRegistry,
+  registerTheme,
+  unregisterTheme,
+  hasTheme,
+  getTheme,
+  getAllThemes,
+  getThemeIds,
+  clearThemes,
+  getThemeCount,
+} from './core';
 
 // ============================================================================
 // Theme Injection and Management
@@ -79,16 +86,32 @@ export {
 } from './generators';
 
 // ============================================================================
-// Injection Utilities
+// Naming and Component Theming Utilities
 // ============================================================================
 
-export { injectCSS, removeCSS, isCSSInjected } from './utils/injectCSS';
+export {
+  generateClassName,
+  generateCSSVariableName,
+  normalizeThemeTokens,
+  camelToKebab,
+  themePropertyToCSSVar,
+  type NamingOptions,
+} from './utils/naming';
+
+export {
+  getComponentThemeValue,
+  generateComponentCSSVars,
+  applyComponentTheme,
+  useComponentTheme,
+  type ComponentThemeOptions,
+} from './utils/componentTheming';
 
 // ============================================================================
-// File Utilities
+// Injection Utilities
 // ============================================================================
 
-export { saveCSSFile, saveCSSFileSync } from './generators/cssFile';
+export { injectCSS, removeCSS, isCSSInjected } from './utils/injectCSS';
+
 
 // ============================================================================
 // Config Loader
@@ -106,6 +129,7 @@ export {
 // Core React components and hooks
 export { ThemeProvider } from './runtime/ThemeProvider';
 export { useTheme } from './runtime/useTheme';
+export { useThemeTokens } from './runtime/useThemeTokens';
 export { ThemeContext } from './runtime/ThemeContext';
 export { ThemeErrorBoundary } from './runtime/ThemeErrorBoundary';
 
@@ -115,25 +139,16 @@ export { ThemeApplicator, getThemeApplicator, applyTheme } from './runtime/Theme
 // DevTools (for development and debugging)
 export * from './devtools';
 
-// Theme adapter (converts between Theme and DesignTokens)
-export {
-  themeToDesignTokens,
-  designTokensToCSSVars,
-  createDesignTokensFromTheme,
-  designTokensToTheme,
-} from './adapters';
+// CSS variable utilities
+export { designTokensToCSSVars } from './adapters';
 
-// Theme helpers (utilities for working with themes and DesignTokens)
+// Theme helpers (utilities for working with DesignTokens)
 export {
-  getDesignTokensFromTheme,
   isDesignTokens,
-  isThemeObject,
 } from './utils/themeHelpers';
 
 // CSS variable utilities
 export {
-  generateCSSVariableName,
-  generateComponentCSSVars,
   mapSCSSTokensToCSSVars,
   applyCSSVariables,
   removeCSSVariables,
@@ -147,10 +162,9 @@ export {
 // RTL Support
 export { RTLManager } from './i18n/rtl';
 
+
 // Types
 export type {
-  Theme,
-  ThemeMetadata,
   ThemeChangeEvent,
   ThemeLoadOptions,
   ThemeValidationResult,
@@ -161,6 +175,10 @@ export type {
   ThemeComponentOverrides,
 } from './types';
 
+// Note: Theme type is deprecated - use DesignTokens instead
+// Keeping for backward compatibility with devtools and internal use only
+export type { Theme } from './types';
+
 export type { ThemeErrorBoundaryProps } from './runtime/ThemeErrorBoundary';
 
 export type {
@@ -168,4 +186,4 @@ export type {
   CSSVariableNamingOptions,
 } from './adapters/cssVariableMapper';
 
-export type { RTLConfig } from './i18n/rtl';
+export type { RTLConfig } from './i18n/rtl';