@shohojdhara/atomix 0.3.6 → 0.3.7

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

@@ -0,0 +1,130 @@
+/**
+ * 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
+  return generateCSSVariables(flattened, { 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): DesignTokens {
+  const result: 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/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

@@ -31,8 +31,18 @@ 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 +89,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 +132,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';
 
@@ -132,8 +159,6 @@ export {
 
 // CSS variable utilities
 export {
-  generateCSSVariableName,
-  generateComponentCSSVars,
   mapSCSSTokensToCSSVars,
   applyCSSVariables,
   removeCSSVariables,
@@ -147,10 +172,10 @@ export {
 // RTL Support
 export { RTLManager } from './i18n/rtl';
 
+
 // Types
 export type {
   Theme,
-  ThemeMetadata,
   ThemeChangeEvent,
   ThemeLoadOptions,
   ThemeValidationResult,
@@ -168,4 +193,4 @@ export type {
   CSSVariableNamingOptions,
 } from './adapters/cssVariableMapper';
 
-export type { RTLConfig } from './i18n/rtl';
+export type { RTLConfig } from './i18n/rtl';

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

@@ -198,7 +198,7 @@ export function getThemeApplicator(): ThemeApplicator {
 /**
  * Apply theme using global applicator
  */
-export function applyTheme(theme: Theme): void {
+export function applyTheme(theme: Theme | DesignTokens): void {
   getThemeApplicator().applyTheme(theme);
 }
 

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

@@ -83,7 +83,7 @@ const DefaultFallback: React.FC<{ error: Error; errorInfo: ErrorInfo }> = ({ err
           </pre>
         </details>
       )}
-      {process.env.NODE_ENV === 'development' && errorInfo && (
+      {(typeof process === 'undefined' || process.env?.NODE_ENV === 'development') && errorInfo && (
         <details style={{ marginTop: '1rem' }}>
           <summary style={{ cursor: 'pointer', fontWeight: 'bold' }}>
             Stack Trace (Development Only)
@@ -148,7 +148,7 @@ export class ThemeErrorBoundary extends Component<
     };
   }
 
-  override componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
+  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
     // Log error
     const themeError = error instanceof ThemeError
       ? error
@@ -187,7 +187,7 @@ export class ThemeErrorBoundary extends Component<
     }
   }
 
-  override componentDidUpdate(prevProps: ThemeErrorBoundaryProps): void {
+  componentDidUpdate(prevProps: ThemeErrorBoundaryProps): void {
     // Reset error if resetOnPropsChange is true and children changed
     if (
       this.props.resetOnPropsChange &&
@@ -202,7 +202,7 @@ export class ThemeErrorBoundary extends Component<
     }
   }
 
-  override render(): ReactNode {
+  render(): ReactNode {
     if (this.state.hasError && this.state.error && this.state.errorInfo) {
       // Use custom fallback if provided
       if (this.props.fallback) {