@shohojdhara/atomix 0.3.14 → 0.4.0

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

@@ -1,6 +1,6 @@
 /**
  * CSS Variable Mapper
- * 
+ *
  * Utilities for generating and managing CSS custom properties from SCSS tokens
  * and component configurations.
  */
@@ -35,7 +35,7 @@ export interface CSSVariableNamingOptions {
 
 /**
  * Generate CSS variable name from parts
- * 
+ *
  * @example
  * generateCSSVariableName('button', 'bg', { prefix: 'atomix' })
  * // Returns: '--atomix-button-bg'
@@ -45,26 +45,22 @@ export function generateCSSVariableName(
   property: string,
   options: CSSVariableNamingOptions = {}
 ): string {
-  const {
-    prefix = 'atomix',
-    separator = '-',
-    includeComponent = true,
-  } = options;
+  const { prefix = 'atomix', separator = '-', includeComponent = true } = options;
 
   const parts = [prefix];
-  
+
   if (includeComponent) {
     parts.push(component);
   }
-  
+
   parts.push(property);
-  
+
   return `--${parts.join(separator)}`;
 }
 
 /**
  * Generate CSS variables object from configuration
- * 
+ *
  * @example
  * const vars = generateComponentCSSVars({
  *   component: 'button',
@@ -89,11 +85,7 @@ export function generateComponentCSSVars(
   if (parts) {
     Object.entries(parts).forEach(([partName, partProps]) => {
       Object.entries(partProps).forEach(([key, value]) => {
-        const varName = generateCSSVariableName(
-          component,
-          `${partName}-${key}`,
-          options
-        );
+        const varName = generateCSSVariableName(component, `${partName}-${key}`, options);
         vars[varName] = String(value);
       });
     });
@@ -103,11 +95,7 @@ export function generateComponentCSSVars(
   if (states) {
     Object.entries(states).forEach(([stateName, stateProps]) => {
       Object.entries(stateProps).forEach(([key, value]) => {
-        const varName = generateCSSVariableName(
-          component,
-          `${stateName}-${key}`,
-          options
-        );
+        const varName = generateCSSVariableName(component, `${stateName}-${key}`, options);
         vars[varName] = String(value);
       });
     });
@@ -117,11 +105,7 @@ export function generateComponentCSSVars(
   if (variants) {
     Object.entries(variants).forEach(([variantName, variantProps]) => {
       Object.entries(variantProps).forEach(([key, value]) => {
-        const varName = generateCSSVariableName(
-          component,
-          `${variantName}-${key}`,
-          options
-        );
+        const varName = generateCSSVariableName(component, `${variantName}-${key}`, options);
         vars[varName] = String(value);
       });
     });
@@ -132,7 +116,7 @@ export function generateComponentCSSVars(
 
 /**
  * Map SCSS tokens to CSS custom properties
- * 
+ *
  * @example
  * const tokens = { '$primary-color': '#7AFFD7', '$spacing-md': '16px' }
  * const vars = mapSCSSTokensToCSSVars(tokens)
@@ -148,13 +132,13 @@ export function mapSCSSTokensToCSSVars(
   Object.entries(tokens).forEach(([key, value]) => {
     // Remove $ prefix from SCSS variables
     const cleanKey = key.startsWith('$') ? key.slice(1) : key;
-    
+
     // Convert underscores to separators
     const normalizedKey = cleanKey.replace(/_/g, separator);
-    
+
     // Generate variable name
     const varName = `--${prefix}${separator}${normalizedKey}`;
-    
+
     vars[varName] = String(value);
   });
 
@@ -163,74 +147,66 @@ export function mapSCSSTokensToCSSVars(
 
 /**
  * Apply CSS variables to an element
- * 
+ *
  * @param vars - CSS variables to apply
  * @param element - Target element (defaults to document.documentElement)
  */
 export function applyCSSVariables(
-    vars: Record<string, string | number>,
-    element?: HTMLElement
+  vars: Record<string, string | number>,
+  element?: HTMLElement
 ): void {
-    if (typeof window === 'undefined') {
-        return; // SSR safety
-    }
-    
-    const target = element || document.documentElement;
-    Object.entries(vars).forEach(([key, value]) => {
-        target.style.setProperty(key, String(value));
-    });
+  if (typeof window === 'undefined') {
+    return; // SSR safety
+  }
+
+  const target = element || document.documentElement;
+  Object.entries(vars).forEach(([key, value]) => {
+    target.style.setProperty(key, String(value));
+  });
 }
 
 /**
  * Remove CSS variables from an element
- * 
+ *
  * @param varNames - Variable names to remove
  * @param element - Target element (defaults to document.documentElement)
  */
-export function removeCSSVariables(
-    varNames: string[],
-    element?: HTMLElement
-): void {
-    if (typeof window === 'undefined') {
-        return; // SSR safety
-    }
-    
-    const target = element || document.documentElement;
-    varNames.forEach((varName) => {
-        target.style.removeProperty(varName);
-    });
+export function removeCSSVariables(varNames: string[], element?: HTMLElement): void {
+  if (typeof window === 'undefined') {
+    return; // SSR safety
+  }
+
+  const target = element || document.documentElement;
+  varNames.forEach(varName => {
+    target.style.removeProperty(varName);
+  });
 }
 
 /**
  * Get CSS variable value from an element
- * 
+ *
  * @param varName - Variable name to get
  * @param element - Target element (defaults to document.documentElement)
  * @returns Variable value or null if not found
  */
-export function getCSSVariable(
-    varName: string,
-    element?: HTMLElement
-): string | null {
-    if (typeof window === 'undefined') {
-        return null; // SSR safety
-    }
-    
-    const target = element || document.documentElement;
-    return getComputedStyle(target).getPropertyValue(varName).trim() || null;
+export function getCSSVariable(varName: string, element?: HTMLElement): string | null {
+  if (typeof window === 'undefined') {
+    return null; // SSR safety
+  }
+
+  const target = element || document.documentElement;
+  return getComputedStyle(target).getPropertyValue(varName).trim() || null;
 }
 
 /**
  * Convert CSS variable object to inline style object
- * 
+ *
  * @example
  * const vars = { '--atomix-button-bg': '#000' }
  * const style = cssVarsToStyle(vars)
  * // Returns: { '--atomix-button-bg': '#000' } as React.CSSProperties
  */
-export function cssVarsToStyle(
-  vars: Record<string, string | number>
-): React.CSSProperties {
+export function cssVarsToStyle(vars: Record<string, string | number>): React.CSSProperties {
   return Object.entries(vars).reduce((acc, [key, value]) => {
     (acc as any)[key] = typeof value === 'number' ? `${value}px` : value;
     return acc;
@@ -261,15 +237,12 @@ export function isValidCSSVariableName(name: string): boolean {
 
 /**
  * Extract component name from CSS variable name
- * 
+ *
  * @example
  * extractComponentName('--atomix-button-bg')
  * // Returns: 'button'
  */
-export function extractComponentName(
-  varName: string,
-  prefix: string = 'atomix'
-): string | null {
+export function extractComponentName(varName: string, prefix: string = 'atomix'): string | null {
   const regex = new RegExp(`^--${prefix}-([a-z0-9]+)-`);
   const match = varName.match(regex);
   return match ? (match[1] ?? null) : null;

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

@@ -1,12 +1,10 @@
 /**
  * Theme Adapters
- * 
+ *
  * Adapters for working with DesignTokens and CSS variables
  */
 
-export {
-  designTokensToCSSVars,
-} from './themeAdapter';
+export { designTokensToCSSVars } from './themeAdapter';
 
 export {
   generateCSSVariableName,
@@ -21,8 +19,4 @@ export {
   extractComponentName,
 } from './cssVariableMapper';
 
-export type {
-  CSSVariableConfig,
-  CSSVariableNamingOptions,
-} from './cssVariableMapper';
-
+export type { CSSVariableConfig, CSSVariableNamingOptions } from './cssVariableMapper';

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');
     });
   });
 });
-
-