@shohojdhara/atomix 0.3.15 → 0.4.0

package/src/lib/theme/adapters/themeAdapter.ts

@@ -1,6 +1,6 @@
 /**
  * Theme Adapter
- * 
+ *
  * Converts between Theme objects and DesignTokens.
  */
 
@@ -11,12 +11,12 @@ import { hexToRgb } from '../utils/themeUtils';
 
 /**
  * Convert Theme object to DesignTokens
- * 
+ *
  * Extracts values from a Theme object and converts them to flat DesignTokens format.
- * 
+ *
  * @param theme - Theme object to convert
  * @returns Partial DesignTokens object
- * 
+ *
  * @example
  * ```typescript
  * const theme = createTheme({ palette: { primary: { main: '#7c3aed' } } });
@@ -150,14 +150,14 @@ export function themeToDesignTokens(theme: Theme): Partial<DesignTokens> {
     tokens['font-sans-serif'] = theme.typography.fontFamily;
     tokens['body-font-size'] = `${theme.typography.fontSize}px`;
     tokens['body-font-weight'] = String(theme.typography.fontWeightRegular);
-    
+
     // Font weights
     tokens['font-weight-light'] = String(theme.typography.fontWeightLight);
     tokens['font-weight-normal'] = String(theme.typography.fontWeightRegular);
     tokens['font-weight-medium'] = String(theme.typography.fontWeightMedium);
     tokens['font-weight-semibold'] = String(theme.typography.fontWeightSemiBold);
     tokens['font-weight-bold'] = String(theme.typography.fontWeightBold);
-    
+
     // Line heights
     if (theme.typography.h1?.lineHeight) {
       tokens['line-height-base'] = String(theme.typography.h1.lineHeight);
@@ -165,7 +165,11 @@ export function themeToDesignTokens(theme: Theme): Partial<DesignTokens> {
   }
 
   // Convert spacing (if available as object)
-  if (theme.spacing && typeof theme.spacing === 'object' && !('__isSpacingFunction' in theme.spacing)) {
+  if (
+    theme.spacing &&
+    typeof theme.spacing === 'object' &&
+    !('__isSpacingFunction' in theme.spacing)
+  ) {
     const spacing = theme.spacing as Record<string, string | number>;
     Object.entries(spacing).forEach(([key, value]) => {
       tokens[`spacing-${key}` as keyof DesignTokens] = String(value);
@@ -175,12 +179,18 @@ export function themeToDesignTokens(theme: Theme): Partial<DesignTokens> {
   // Convert border radius
   if (theme.borderRadius) {
     Object.entries(theme.borderRadius).forEach(([key, value]) => {
-      const tokenKey = key === 'sm' ? 'border-radius-sm' :
-                      key === 'md' ? 'border-radius' :
-                      key === 'lg' ? 'border-radius-lg' :
-                      key === 'xl' ? 'border-radius-xl' :
-                      key === 'xxl' ? 'border-radius-xxl' :
-                      `border-radius-${key}`;
+      const tokenKey =
+        key === 'sm'
+          ? 'border-radius-sm'
+          : key === 'md'
+            ? 'border-radius'
+            : key === 'lg'
+              ? 'border-radius-lg'
+              : key === 'xl'
+                ? 'border-radius-xl'
+                : key === 'xxl'
+                  ? 'border-radius-xxl'
+                  : `border-radius-${key}`;
       tokens[tokenKey as keyof DesignTokens] = String(value);
     });
   }
@@ -188,12 +198,18 @@ export function themeToDesignTokens(theme: Theme): Partial<DesignTokens> {
   // Convert shadows
   if (theme.shadows) {
     Object.entries(theme.shadows).forEach(([key, value]) => {
-      const tokenKey = key === 'xs' ? 'box-shadow-xs' :
-                      key === 'sm' ? 'box-shadow-sm' :
-                      key === 'md' ? 'box-shadow' :
-                      key === 'lg' ? 'box-shadow-lg' :
-                      key === 'xl' ? 'box-shadow-xl' :
-                      `box-shadow-${key}`;
+      const tokenKey =
+        key === 'xs'
+          ? 'box-shadow-xs'
+          : key === 'sm'
+            ? 'box-shadow-sm'
+            : key === 'md'
+              ? 'box-shadow'
+              : key === 'lg'
+                ? 'box-shadow-lg'
+                : key === 'xl'
+                  ? 'box-shadow-xl'
+                  : `box-shadow-${key}`;
       tokens[tokenKey as keyof DesignTokens] = String(value);
     });
   }
@@ -240,13 +256,13 @@ export function themeToDesignTokens(theme: Theme): Partial<DesignTokens> {
 
 /**
  * Convert DesignTokens to Theme-compatible CSS variables
- * 
+ *
  * @param tokens - DesignTokens object
  * @returns CSS variables object compatible with Theme.cssVars
  */
 export function designTokensToCSSVars(tokens: Partial<DesignTokens>): Record<string, string> {
   const cssVars: Record<string, string> = {};
-  
+
   Object.entries(tokens).forEach(([key, value]) => {
     if (value !== undefined) {
       cssVars[`--atomix-${key}`] = String(value);
@@ -258,9 +274,9 @@ export function designTokensToCSSVars(tokens: Partial<DesignTokens>): Record<str
 
 /**
  * Create DesignTokens from Theme with defaults
- * 
+ *
  * Converts a Theme to DesignTokens and merges with default tokens.
- * 
+ *
  * @param theme - Theme object to convert
  * @returns Complete DesignTokens object
  */
@@ -271,17 +287,16 @@ export function createDesignTokensFromTheme(theme: Theme): DesignTokens {
 
 /**
  * Create a minimal Theme object from DesignTokens
- * 
+ *
  * @param tokens - DesignTokens to convert
  * @returns Minimal Theme object with cssVars populated
  */
 export function designTokensToTheme(tokens: Partial<DesignTokens>): Partial<Theme> {
   const cssVars = designTokensToCSSVars(tokens);
-  
+
   return {
     name: 'Design Tokens Theme',
     cssVars,
     __isJSTheme: true,
   } as Partial<Theme>;
 }
-

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

@@ -1,6 +1,6 @@
 /**
  * Theme Configuration Module
- * 
+ *
  * Exports for theme configuration loading and validation
  */
 

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

@@ -1,6 +1,6 @@
 /**
  * Theme Configuration Types
- * 
+ *
  * Type definitions for the theme configuration system
  */
 
@@ -109,4 +109,4 @@ export type {
   BuildConfig,
   RuntimeConfig,
   IntegrationConfig,
-};
+};

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

@@ -1,6 +1,6 @@
 /**
  * Theme Configuration Validator
- * 
+ *
  * Validates theme configuration structure and values
  */
 
@@ -8,7 +8,7 @@ import type { ConfigValidationResult } from './types';
 
 /**
  * Validate theme configuration
- * 
+ *
  * @param config - Configuration to validate
  * @returns Validation result with errors and warnings
  */
@@ -117,8 +117,14 @@ function validateThemes(themes: Record<string, any>): ConfigValidationResult {
 
     // Validate accessibility (only critical checks)
     if (theme.a11y?.contrastTarget) {
-      if (typeof theme.a11y.contrastTarget !== 'number' || theme.a11y.contrastTarget < 1 || theme.a11y.contrastTarget > 21) {
-        warnings.push(`Theme "${themeId}" has invalid contrast target: ${theme.a11y.contrastTarget}`);
+      if (
+        typeof theme.a11y.contrastTarget !== 'number' ||
+        theme.a11y.contrastTarget < 1 ||
+        theme.a11y.contrastTarget > 21
+      ) {
+        warnings.push(
+          `Theme "${themeId}" has invalid contrast target: ${theme.a11y.contrastTarget}`
+        );
       }
     }
   }
@@ -247,4 +253,3 @@ function validateDependencies(
 
   return { valid: errors.length === 0, errors, warnings };
 }
-

package/src/lib/theme/constants/constants.ts

@@ -1,6 +1,6 @@
 /**
  * Theme System Constants
- * 
+ *
  * Centralized constants for the theme system to avoid magic numbers and strings.
  */
 
@@ -121,7 +121,7 @@ export const DEFAULT_ANALYTICS_CONFIG = {
  * Logger default configuration
  */
 export const DEFAULT_LOGGER_CONFIG = {
-  level: (typeof process !== 'undefined' && process.env?.NODE_ENV === 'production') ? 1 : 2, // WARN in prod, INFO in dev
+  level: typeof process !== 'undefined' && process.env?.NODE_ENV === 'production' ? 1 : 2, // WARN in prod, INFO in dev
   enableConsole: true,
 } as const;
 

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

@@ -1,8 +1,7 @@
 /**
  * Theme Constants
- * 
+ *
  * System constants and default values
  */
 
 export * from './constants';
-

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

@@ -1,6 +1,6 @@
 /**
  * createTheme Tests
- * 
+ *
  * Tests for createTheme function including automatic config loading
  */
 
@@ -19,7 +19,7 @@ describe('createTheme', () => {
       // 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.length).toBeGreaterThan(0);
       expect(css).toContain(':root');
@@ -27,7 +27,7 @@ describe('createTheme', () => {
 
     it('should generate valid CSS with default tokens', () => {
       const css = createTheme();
-      
+
       // Should contain CSS variable declarations
       expect(css).toMatch(/--atomix-[a-z-]+:\s*[^;]+;/);
     });
@@ -36,13 +36,13 @@ describe('createTheme', () => {
   describe('DesignTokens Input', () => {
     it('should accept DesignTokens and generate CSS', () => {
       const tokens: Partial<DesignTokens> = {
-        'primary': '#7AFFD7',
-        'secondary': '#FF5733',
+        primary: '#7AFFD7',
+        secondary: '#FF5733',
         'spacing-4': '1rem',
       };
 
       const css = createTheme(tokens);
-      
+
       expect(css).toContain('--atomix-primary');
       expect(css).toContain('#7AFFD7');
       expect(css).toContain('--atomix-secondary');
@@ -53,15 +53,15 @@ describe('createTheme', () => {
 
     it('should merge with default tokens', () => {
       const tokens: Partial<DesignTokens> = {
-        'primary': '#CUSTOM',
+        primary: '#CUSTOM',
       };
 
       const css = createTheme(tokens);
-      
+
       // Should contain custom primary
       expect(css).toContain('--atomix-primary');
       expect(css).toContain('#CUSTOM');
-      
+
       // Should also contain default tokens
       expect(css).toContain('--atomix-secondary');
     });
@@ -70,33 +70,33 @@ describe('createTheme', () => {
   describe('Options', () => {
     it('should respect prefix option', () => {
       const tokens: Partial<DesignTokens> = {
-        'primary': '#7AFFD7',
+        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',
+        primary: '#7AFFD7',
       };
 
       const css = createTheme(tokens, { selector: '[data-theme="dark"]' });
-      
+
       expect(css).toContain('[data-theme="dark"]');
       expect(css).not.toContain(':root');
     });
 
     it('should use default prefix when not provided', () => {
       const tokens: Partial<DesignTokens> = {
-        'primary': '#7AFFD7',
+        primary: '#7AFFD7',
       };
 
       const css = createTheme(tokens);
-      
+
       expect(css).toContain('--atomix-primary');
     });
   });
@@ -104,11 +104,11 @@ describe('createTheme', () => {
   describe('CSS Output Format', () => {
     it('should generate valid CSS syntax', () => {
       const tokens: Partial<DesignTokens> = {
-        'primary': '#7AFFD7',
+        primary: '#7AFFD7',
       };
 
       const css = createTheme(tokens);
-      
+
       // Should be valid CSS
       expect(css).toMatch(/^[^{]*\{[^}]*\}/s);
       expect(css).toContain(':');
@@ -117,16 +117,14 @@ describe('createTheme', () => {
 
     it('should format CSS with proper indentation', () => {
       const tokens: Partial<DesignTokens> = {
-        'primary': '#7AFFD7',
-        'secondary': '#FF5733',
+        primary: '#7AFFD7',
+        secondary: '#FF5733',
       };
 
       const css = createTheme(tokens);
-      
+
       // Should have proper formatting
       expect(css).toContain('\n');
     });
   });
 });
-
-

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

@@ -12,7 +12,7 @@
  * Check if value is an object
  */
 function isObject(item: any): item is Record<string, any> {
-    return item && typeof item === 'object' && !Array.isArray(item) && typeof item !== 'function';
+  return item && typeof item === 'object' && !Array.isArray(item) && typeof item !== 'function';
 }
 
 /**
@@ -20,32 +20,35 @@ function isObject(item: any): item is Record<string, any> {
  * Later objects override earlier ones
  */
 export function deepMerge<T extends Record<string, unknown>>(...objects: Partial<T>[]): T {
-    if (objects.length === 0) return {} as T;
-    if (objects.length === 1) return objects[0] as T;
+  if (objects.length === 0) return {} as T;
+  if (objects.length === 1) return objects[0] as T;
 
-    const [target, ...sources] = objects;
-    const result = { ...target } as T;
+  const [target, ...sources] = objects;
+  const result = { ...target } as T;
 
-    for (const source of sources) {
-        if (!source) continue;
+  for (const source of sources) {
+    if (!source) continue;
 
-        for (const key in source) {
-            if (!Object.prototype.hasOwnProperty.call(source, key)) continue;
+    for (const key in source) {
+      if (!Object.prototype.hasOwnProperty.call(source, key)) continue;
 
-            const targetValue = result[key];
-            const sourceValue = source[key];
+      const targetValue = result[key];
+      const sourceValue = source[key];
 
-            if (isObject(targetValue) && isObject(sourceValue)) {
-                // Recursively merge objects
-                result[key] = deepMerge(targetValue as Record<string, unknown>, sourceValue as Record<string, unknown>) as T[Extract<keyof T, string>];
-            } else {
-                // Override with source value
-                result[key] = sourceValue as T[Extract<keyof T, string>];
-            }
-        }
+      if (isObject(targetValue) && isObject(sourceValue)) {
+        // Recursively merge objects
+        result[key] = deepMerge(
+          targetValue as Record<string, unknown>,
+          sourceValue as Record<string, unknown>
+        ) as T[Extract<keyof T, string>];
+      } else {
+        // Override with source value
+        result[key] = sourceValue as T[Extract<keyof T, string>];
+      }
     }
+  }
 
-    return result;
+  return result;
 }
 
 // ============================================================================
@@ -69,7 +72,7 @@ import type { DesignTokens } from '../tokens/tokens';
  * ```
  */
 export function mergeTheme(...tokens: Partial<DesignTokens>[]): Partial<DesignTokens> {
-    return deepMerge({}, ...tokens);
+  return deepMerge({}, ...tokens);
 }
 
 /**
@@ -86,12 +89,15 @@ export function mergeTheme(...tokens: Partial<DesignTokens>[]): Partial<DesignTo
  * // Returns: { 'primary': '#000', 'secondary': '#fff' }
  * ```
  */
-export function extendTheme(baseTokens: Partial<DesignTokens>, extension: Partial<DesignTokens>): Partial<DesignTokens> {
-    return mergeTheme(baseTokens, extension);
+export function extendTheme(
+  baseTokens: Partial<DesignTokens>,
+  extension: Partial<DesignTokens>
+): Partial<DesignTokens> {
+  return mergeTheme(baseTokens, extension);
 }
 
 export default {
-    deepMerge,
-    mergeTheme,
-    extendTheme,
+  deepMerge,
+  mergeTheme,
+  extendTheme,
 };

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

@@ -99,4 +99,4 @@ export function createTheme(
   const prefix = options?.prefix ?? 'atomix';
 
   return generateCSSVariables(allTokens, { ...options, prefix });
-}
+}