@shohojdhara/atomix 0.3.15 → 0.4.0

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

@@ -1,6 +1,6 @@
 /**
  * Theme Utilities
- * 
+ *
  * Utility functions for theme operations
  */
 
@@ -9,4 +9,3 @@ export * from './themeUtils';
 export * from './themeValidation';
 export * from './domUtils';
 export * from './injectCSS';
-

package/src/lib/theme/utils/injectCSS.ts

@@ -1,6 +1,6 @@
 /**
  * CSS Injection Utilities
- * 
+ *
  * Inject CSS into HTML head via <style> element.
  */
 
@@ -13,26 +13,23 @@ function isBrowser(): boolean {
 
 /**
  * Inject CSS into HTML head via <style> element
- * 
+ *
  * Creates or updates a style element in the document head.
  * If an element with the same ID exists, it will be updated.
- * 
+ *
  * @param css - CSS string to inject
  * @param id - Style element ID (default: 'atomix-theme')
- * 
+ *
  * @example
  * ```typescript
  * const css = ':root { --atomix-color-primary: #7AFFD7; }';
  * injectCSS(css);
- * 
+ *
  * // With custom ID
  * injectCSS(css, 'my-custom-theme');
  * ```
  */
-export function injectCSS(
-  css: string,
-  id: string = 'atomix-theme'
-): void {
+export function injectCSS(css: string, id: string = 'atomix-theme'): void {
   if (!isBrowser()) {
     return;
   }
@@ -51,11 +48,11 @@ export function injectCSS(
 
 /**
  * Remove injected CSS from DOM
- * 
+ *
  * Removes the style element with the given ID from the document head.
- * 
+ *
  * @param id - Style element ID to remove (default: 'atomix-theme')
- * 
+ *
  * @example
  * ```typescript
  * removeCSS(); // Removes default 'atomix-theme'
@@ -75,7 +72,7 @@ export function removeCSS(id: string = 'atomix-theme'): void {
 
 /**
  * Check if CSS is already injected
- * 
+ *
  * @param id - Style element ID to check (default: 'atomix-theme')
  * @returns True if style element exists
  */
@@ -86,4 +83,3 @@ export function isCSSInjected(id: string = 'atomix-theme'): boolean {
 
   return document.getElementById(id) !== null;
 }
-

package/src/lib/theme/utils/naming.ts

@@ -1,6 +1,6 @@
 /**
  * Naming Utilities
- * 
+ *
  * Provides consistent naming conventions across the theme system
  */
 
@@ -14,13 +14,17 @@ export interface NamingOptions {
 /**
  * Generate consistent CSS class names following BEM methodology
  */
-export function generateClassName(block: string, element?: string, modifiers?: Record<string, boolean | string>): string {
+export function generateClassName(
+  block: string,
+  element?: string,
+  modifiers?: Record<string, boolean | string>
+): string {
   let className = block;
-  
+
   if (element) {
     className += `__${element}`;
   }
-  
+
   if (modifiers) {
     Object.entries(modifiers).forEach(([key, value]) => {
       if (value) {
@@ -31,7 +35,7 @@ export function generateClassName(block: string, element?: string, modifiers?: R
       }
     });
   }
-  
+
   return className;
 }
 
@@ -40,23 +44,23 @@ export function generateClassName(block: string, element?: string, modifiers?: R
  */
 export function generateCSSVariableName(property: string, options: NamingOptions = {}): string {
   const { prefix = 'atomix', component, variant, state } = options;
-  
+
   const parts = [prefix];
-  
+
   if (component) {
     parts.push(component);
   }
-  
+
   if (variant) {
     parts.push(variant);
   }
-  
+
   if (state) {
     parts.push(state);
   }
-  
+
   parts.push(property);
-  
+
   return `--${parts.join('-')}`;
 }
 
@@ -65,7 +69,7 @@ export function generateCSSVariableName(property: string, options: NamingOptions
  */
 export function normalizeThemeTokens(tokens: Record<string, any>): Record<string, any> {
   const normalized: Record<string, any> = {};
-  
+
   for (const [key, value] of Object.entries(tokens)) {
     if (typeof value === 'object' && value !== null) {
       // Recursively normalize nested objects
@@ -75,7 +79,7 @@ export function normalizeThemeTokens(tokens: Record<string, any>): Record<string
       normalized[key] = value;
     }
   }
-  
+
   return normalized;
 }
 
@@ -83,7 +87,7 @@ export function normalizeThemeTokens(tokens: Record<string, any>): Record<string
  * Convert camelCase to kebab-case for CSS custom properties
  */
 export function camelToKebab(str: string): string {
-  return str.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
+  return str.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`);
 }
 
 /**
@@ -95,6 +99,6 @@ export function themePropertyToCSSVar(propertyPath: string, prefix: string = 'at
     .split('.')
     .map(part => camelToKebab(part))
     .join('-');
-  
+
   return `--${prefix}-${path}`;
-}
+}

package/src/lib/theme/utils/themeHelpers.ts

@@ -1,6 +1,6 @@
 /**
  * Theme Helper Functions
- * 
+ *
  * Utility functions for working with DesignTokens
  */
 
@@ -8,33 +8,31 @@ import type { DesignTokens } from '../tokens/tokens';
 
 /**
  * Check if a value is DesignTokens
- * 
+ *
  * Type guard to check if an object is DesignTokens format.
- * 
+ *
  * @param value - Value to check
  * @returns True if value is DesignTokens
  */
 export function isDesignTokens(value: unknown): value is DesignTokens {
   if (!value || typeof value !== 'object') return false;
-  
+
   // DesignTokens is a flat object with string keys, no nested structures
   const obj = value as Record<string, unknown>;
-  
+
   // Check for absence of Theme-specific properties
   if ('palette' in obj || 'typography' in obj || '__isJSTheme' in obj) {
     return false;
   }
-  
+
   // Check if it has DesignTokens-like structure (flat string keys)
   const keys = Object.keys(obj);
   if (keys.length === 0) return false;
-  
+
   // Check if keys look like DesignTokens (kebab-case, no nesting)
-  const hasDesignTokenKeys = keys.some(key => 
-    /^[a-z]+(-[a-z0-9]+)*$/.test(key) && 
-    typeof obj[key] === 'string'
+  const hasDesignTokenKeys = keys.some(
+    key => /^[a-z]+(-[a-z0-9]+)*$/.test(key) && typeof obj[key] === 'string'
   );
-  
+
   return hasDesignTokenKeys;
 }
-

package/src/lib/theme/utils/themeUtils.ts

@@ -1,6 +1,6 @@
 /**
  * Theme Utilities
- * 
+ *
  * Helper utilities for working with themes, including color manipulation,
  * spacing helpers, and theme value accessors.
  */
@@ -15,27 +15,27 @@ import type { SpacingFunction, SpacingOptions } from '../types';
  * Convert hex color to RGB object
  */
 export function hexToRgb(hex: string): { r: number; g: number; b: number } | null {
-    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-    return result
-        ? {
-            r: parseInt(result[1]!, 16),
-            g: parseInt(result[2]!, 16),
-            b: parseInt(result[3]!, 16),
-        }
-        : null;
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result
+    ? {
+        r: parseInt(result[1]!, 16),
+        g: parseInt(result[2]!, 16),
+        b: parseInt(result[3]!, 16),
+      }
+    : null;
 }
 
 /**
  * Convert RGB to hex color
  */
 export function rgbToHex(r: number, g: number, b: number): string {
-    const toHex = (val: number) => {
-        const hex = Math.round(Math.max(0, Math.min(255, val)))
-            .toString(16)
-            .padStart(2, '0');
-        return hex;
-    };
-    return `#${toHex(r ?? 0)}${toHex(g ?? 0)}${toHex(b ?? 0)}`;
+  const toHex = (val: number) => {
+    const hex = Math.round(Math.max(0, Math.min(255, val)))
+      .toString(16)
+      .padStart(2, '0');
+    return hex;
+  };
+  return `#${toHex(r ?? 0)}${toHex(g ?? 0)}${toHex(b ?? 0)}`;
 }
 
 /**
@@ -43,106 +43,106 @@ export function rgbToHex(r: number, g: number, b: number): string {
  * Used for determining contrast ratios
  */
 export function getLuminance(color: string): number {
-    const rgb = hexToRgb(color);
-    if (!rgb) return 0;
+  const rgb = hexToRgb(color);
+  if (!rgb) return 0;
 
-    const { r, g, b } = rgb;
-    const [rs, gs, bs] = [r ?? 0, g ?? 0, b ?? 0].map((c) => {
-        const val = c / 255;
-        return val <= 0.03928 ? val / 12.92 : Math.pow((val + 0.055) / 1.055, 2.4);
-    });
+  const { r, g, b } = rgb;
+  const [rs, gs, bs] = [r ?? 0, g ?? 0, b ?? 0].map(c => {
+    const val = c / 255;
+    return val <= 0.03928 ? val / 12.92 : Math.pow((val + 0.055) / 1.055, 2.4);
+  });
 
-    return 0.2126 * (rs ?? 0) + 0.7152 * (gs ?? 0) + 0.0722 * (bs ?? 0);
+  return 0.2126 * (rs ?? 0) + 0.7152 * (gs ?? 0) + 0.0722 * (bs ?? 0);
 }
 
 /**
  * Calculate contrast ratio between two colors
  */
 export function getContrastRatio(foreground: string, background: string): number {
-    const lumA = getLuminance(foreground);
-    const lumB = getLuminance(background);
-    return (Math.max(lumA, lumB) + 0.05) / (Math.min(lumA, lumB) + 0.05);
+  const lumA = getLuminance(foreground);
+  const lumB = getLuminance(background);
+  return (Math.max(lumA, lumB) + 0.05) / (Math.min(lumA, lumB) + 0.05);
 }
 
 /**
  * Get appropriate contrast text color (black or white) for a background color
  */
 export function getContrastText(background: string, threshold: number = 3): string {
-    const contrastWithWhite = getContrastRatio('#FFFFFF', background);
-    const contrastWithBlack = getContrastRatio('#000000', background);
-
-    if (contrastWithWhite >= threshold) {
-        return '#FFFFFF';
-    }
-    if (contrastWithBlack >= threshold) {
-        return '#000000';
-    }
-
-    // Default to white if neither meets threshold
-    return contrastWithWhite > contrastWithBlack ? '#FFFFFF' : '#000000';
+  const contrastWithWhite = getContrastRatio('#FFFFFF', background);
+  const contrastWithBlack = getContrastRatio('#000000', background);
+
+  if (contrastWithWhite >= threshold) {
+    return '#FFFFFF';
+  }
+  if (contrastWithBlack >= threshold) {
+    return '#000000';
+  }
+
+  // Default to white if neither meets threshold
+  return contrastWithWhite > contrastWithBlack ? '#FFFFFF' : '#000000';
 }
 
 /**
  * Lighten a color by a given amount
- * 
+ *
  * @param color - Hex color string
  * @param amount - Amount to lighten (0-1), default 0.2
  * @returns Lightened hex color
  */
 export function lighten(color: string, amount: number = 0.2): string {
-    const rgb = hexToRgb(color);
-    if (!rgb) return color;
+  const rgb = hexToRgb(color);
+  if (!rgb) return color;
 
-    const { r, g, b } = rgb;
-    const lightenValue = (val: number) => Math.min(255, Math.round(val + (255 - val) * amount));
+  const { r, g, b } = rgb;
+  const lightenValue = (val: number) => Math.min(255, Math.round(val + (255 - val) * amount));
 
-    return rgbToHex(lightenValue(r), lightenValue(g), lightenValue(b));
+  return rgbToHex(lightenValue(r), lightenValue(g), lightenValue(b));
 }
 
 /**
  * Darken a color by a given amount
- * 
+ *
  * @param color - Hex color string
  * @param amount - Amount to darken (0-1), default 0.2
  * @returns Darkened hex color
  */
 export function darken(color: string, amount: number = 0.2): string {
-    const rgb = hexToRgb(color);
-    if (!rgb) return color;
+  const rgb = hexToRgb(color);
+  if (!rgb) return color;
 
-    const { r, g, b } = rgb;
-    const darkenValue = (val: number) => Math.max(0, Math.round(val * (1 - amount)));
+  const { r, g, b } = rgb;
+  const darkenValue = (val: number) => Math.max(0, Math.round(val * (1 - amount)));
 
-    return rgbToHex(darkenValue(r), darkenValue(g), darkenValue(b));
+  return rgbToHex(darkenValue(r), darkenValue(g), darkenValue(b));
 }
 
 /**
  * Add alpha (opacity) to a color
- * 
+ *
  * @param color - Hex color string
  * @param opacity - Opacity value (0-1)
  * @returns RGBA color string
  */
 export function alpha(color: string, opacity: number): string {
-    const rgb = hexToRgb(color);
-    if (!rgb) return color;
+  const rgb = hexToRgb(color);
+  if (!rgb) return color;
 
-    const { r, g, b } = rgb;
-    const clampedOpacity = Math.max(0, Math.min(1, opacity));
+  const { r, g, b } = rgb;
+  const clampedOpacity = Math.max(0, Math.min(1, opacity));
 
-    return `rgba(${r}, ${g}, ${b}, ${clampedOpacity})`;
+  return `rgba(${r}, ${g}, ${b}, ${clampedOpacity})`;
 }
 
 /**
  * Emphasize a color (lighten if dark, darken if light)
- * 
+ *
  * @param color - Hex color string
  * @param coefficient - Amount to emphasize (0-1), default 0.15
  * @returns Emphasized hex color
  */
 export function emphasize(color: string, coefficient: number = 0.15): string {
-    const luminance = getLuminance(color);
-    return luminance > 0.5 ? darken(color, coefficient) : lighten(color, coefficient);
+  const luminance = getLuminance(color);
+  return luminance > 0.5 ? darken(color, coefficient) : lighten(color, coefficient);
 }
 
 // ============================================================================
@@ -151,36 +151,35 @@ export function emphasize(color: string, coefficient: number = 0.15): string {
 
 /**
  * Create a spacing function from various input types
- * 
+ *
  * @param spacingInput - Spacing configuration (number, array, or function), default 4
  * @returns Spacing function
  */
 export function createSpacing(spacingInput: SpacingOptions = 4): SpacingFunction {
-    // If it's already a function, return it
-    if (typeof spacingInput === 'function') {
-        return spacingInput;
-    }
-
-    // If it's a number, create a function that multiplies by that number
-    if (typeof spacingInput === 'number') {
-        return (...values: number[]) => {
-            if (values.length === 0) return '0px';
-            return values.map((value) => `${value * spacingInput}px`).join(' ');
-        };
-    }
-
-    // If it's an array, use it as a scale
-    if (Array.isArray(spacingInput)) {
-        return (...values: number[]) => {
-            if (values.length === 0) return '0px';
-            return values.map((value) => `${spacingInput[value] || value}px`).join(' ');
-        };
-    }
-
-    // Default to 4px base
+  // If it's already a function, return it
+  if (typeof spacingInput === 'function') {
+    return spacingInput;
+  }
+
+  // If it's a number, create a function that multiplies by that number
+  if (typeof spacingInput === 'number') {
     return (...values: number[]) => {
-        if (values.length === 0) return '0px';
-        return values.map((value) => `${value * 4}px`).join(' ');
+      if (values.length === 0) return '0px';
+      return values.map(value => `${value * spacingInput}px`).join(' ');
     };
-}
+  }
 
+  // If it's an array, use it as a scale
+  if (Array.isArray(spacingInput)) {
+    return (...values: number[]) => {
+      if (values.length === 0) return '0px';
+      return values.map(value => `${spacingInput[value] || value}px`).join(' ');
+    };
+  }
+
+  // Default to 4px base
+  return (...values: number[]) => {
+    if (values.length === 0) return '0px';
+    return values.map(value => `${value * 4}px`).join(' ');
+  };
+}

package/src/lib/theme/utils/themeValidation.ts

@@ -154,9 +154,9 @@ function hslToRgb(hsl: string): { r: number; g: number; b: number } | null {
   const hue2rgb = (p: number, q: number, t: number): number => {
     if (t < 0) t += 1;
     if (t > 1) t -= 1;
-    if (t < 1/6) return p + (q - p) * 6 * t;
-    if (t < 1/2) return q;
-    if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
+    if (t < 1 / 6) return p + (q - p) * 6 * t;
+    if (t < 1 / 2) return q;
+    if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
     return p;
   };
 
@@ -167,15 +167,15 @@ function hslToRgb(hsl: string): { r: number; g: number; b: number } | null {
   } else {
     const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
     const p = 2 * l - q;
-    r = hue2rgb(p, q, h + 1/3);
+    r = hue2rgb(p, q, h + 1 / 3);
     g = hue2rgb(p, q, h);
-    b = hue2rgb(p, q, h - 1/3);
+    b = hue2rgb(p, q, h - 1 / 3);
   }
 
   return {
     r: Math.round(r * 255),
     g: Math.round(g * 255),
-    b: Math.round(b * 255)
+    b: Math.round(b * 255),
   };
 }
 
@@ -298,42 +298,87 @@ export function validateColorFormats(tokens: Partial<DesignTokens>): {
   // Only validate tokens that are intended to be actual colors, not gradients, font weights, etc.
   const colorTokenKeys = new Set([
     // Base colors
-    'primary', 'secondary', 'success', 'info', 'warning', 'error', 'light', 'dark',
+    'primary',
+    'secondary',
+    'success',
+    'info',
+    'warning',
+    'error',
+    'light',
+    'dark',
     // Text emphasis
-    'primary-text-emphasis', 'secondary-text-emphasis', 'tertiary-text-emphasis',
-    'disabled-text-emphasis', 'invert-text-emphasis', 'brand-text-emphasis',
-    'error-text-emphasis', 'success-text-emphasis', 'warning-text-emphasis',
-    'info-text-emphasis', 'light-text-emphasis', 'dark-text-emphasis',
+    'primary-text-emphasis',
+    'secondary-text-emphasis',
+    'tertiary-text-emphasis',
+    'disabled-text-emphasis',
+    'invert-text-emphasis',
+    'brand-text-emphasis',
+    'error-text-emphasis',
+    'success-text-emphasis',
+    'warning-text-emphasis',
+    'info-text-emphasis',
+    'light-text-emphasis',
+    'dark-text-emphasis',
     // Background subtle
-    'primary-bg-subtle', 'secondary-bg-subtle', 'tertiary-bg-subtle', 'invert-bg-subtle',
-    'brand-bg-subtle', 'error-bg-subtle', 'success-bg-subtle', 'warning-bg-subtle',
-    'info-bg-subtle', 'light-bg-subtle', 'dark-bg-subtle',
+    'primary-bg-subtle',
+    'secondary-bg-subtle',
+    'tertiary-bg-subtle',
+    'invert-bg-subtle',
+    'brand-bg-subtle',
+    'error-bg-subtle',
+    'success-bg-subtle',
+    'warning-bg-subtle',
+    'info-bg-subtle',
+    'light-bg-subtle',
+    'dark-bg-subtle',
     // Border subtle
-    'primary-border-subtle', 'secondary-border-subtle', 'success-border-subtle',
-    'error-border-subtle', 'warning-border-subtle', 'info-border-subtle',
-    'brand-border-subtle', 'light-border-subtle', 'dark-border-subtle',
+    'primary-border-subtle',
+    'secondary-border-subtle',
+    'success-border-subtle',
+    'error-border-subtle',
+    'warning-border-subtle',
+    'info-border-subtle',
+    'brand-border-subtle',
+    'light-border-subtle',
+    'dark-border-subtle',
     // Hover states
-    'primary-hover', 'secondary-hover', 'light-hover', 'dark-hover',
-    'error-hover', 'success-hover', 'warning-hover', 'info-hover',
+    'primary-hover',
+    'secondary-hover',
+    'light-hover',
+    'dark-hover',
+    'error-hover',
+    'success-hover',
+    'warning-hover',
+    'info-hover',
     // Colors from scales (primary, red, green, blue, yellow)
     ...Array.from({ length: 10 }, (_, i) => [
-      `primary-${i + 1}`, `red-${i + 1}`, `green-${i + 1}`, `blue-${i + 1}`, `yellow-${i + 1}`
+      `primary-${i + 1}`,
+      `red-${i + 1}`,
+      `green-${i + 1}`,
+      `blue-${i + 1}`,
+      `yellow-${i + 1}`,
     ]).flat(),
     // Gray scale
     ...Array.from({ length: 10 }, (_, i) => `gray-${i + 1}`),
     // Body colors
-    'body-color', 'heading-color',
+    'body-color',
+    'heading-color',
     // Link colors
-    'link-color', 'link-hover-color',
+    'link-color',
+    'link-hover-color',
     // Highlight & code
-    'highlight-bg', 'code-color',
+    'highlight-bg',
+    'code-color',
     // Border colors
-    'border-color', 'border-color-translucent',
+    'border-color',
+    'border-color-translucent',
     // Focus ring
     'focus-border-color',
     // Form validation
-    'form-valid-color', 'form-valid-border-color',
-    'form-invalid-color', 'form-invalid-border-color',
+    'form-valid-color',
+    'form-valid-border-color',
+    'form-invalid-color',
+    'form-invalid-border-color',
   ]);
 
   for (const key of colorTokenKeys) {
@@ -437,7 +482,10 @@ export interface ValidationOptions {
 /**
  * Comprehensive validation of DesignTokens
  */
-export function validateDesignTokens(tokens: Partial<DesignTokens>, options: ValidationOptions = {}): ThemeValidationResult {
+export function validateDesignTokens(
+  tokens: Partial<DesignTokens>,
+  options: ValidationOptions = {}
+): ThemeValidationResult {
   const results = [];
 
   if (!options.skipRequiredTokens) {
@@ -461,7 +509,9 @@ export function validateDesignTokens(tokens: Partial<DesignTokens>, options: Val
   if (!valid) {
     logger.error(
       'DesignTokens validation failed',
-      new Error(`Validation failed with ${allErrors.length} errors and ${allWarnings.length} warnings`),
+      new Error(
+        `Validation failed with ${allErrors.length} errors and ${allWarnings.length} warnings`
+      ),
       {
         errors: allErrors,
         warnings: allWarnings,
@@ -469,10 +519,9 @@ export function validateDesignTokens(tokens: Partial<DesignTokens>, options: Val
       }
     );
   } else if (allWarnings.length > 0) {
-    logger.warn(
-      `DesignTokens validation passed with ${allWarnings.length} warnings`,
-      { warnings: allWarnings }
-    );
+    logger.warn(`DesignTokens validation passed with ${allWarnings.length} warnings`, {
+      warnings: allWarnings,
+    });
   } else {
     logger.debug('DesignTokens validation passed');
   }
@@ -498,4 +547,4 @@ export function validateAndMergeTokens(partialTokens?: Partial<DesignTokens>): {
     tokens: merged,
     validation,
   };
-}
+}