@shohojdhara/atomix 0.3.15 → 0.4.1

package/src/lib/utils/csv.ts

@@ -10,7 +10,9 @@
  * to prevent formula injection.
  */
 export function sanitizeCSVCell(cell: any): string {
-  const sanitized = String(cell ?? '').replace(/[\r\n\t]/g, ' ').replace(/"/g, '""');
+  const sanitized = String(cell ?? '')
+    .replace(/[\r\n\t]/g, ' ')
+    .replace(/"/g, '""');
   // Prevent formula injection by prefixing dangerous characters
   const dangerous = /^[=+\-@]/;
   return dangerous.test(sanitized) ? `'${sanitized}` : sanitized;

package/src/lib/utils/dataTableExport.ts

@@ -46,10 +46,7 @@ export function exportToCSV(
 /**
  * Export data as JSON
  */
-export function exportToJSON(
-  data: any[],
-  filename: string = 'data-table.json'
-): void {
+export function exportToJSON(data: any[], filename: string = 'data-table.json'): void {
   if (!data.length) return;
 
   const jsonContent = JSON.stringify(data, null, 2);
@@ -131,4 +128,3 @@ export function exportData(
       console.warn(`Unsupported export format: ${format}`);
   }
 }
-

package/src/lib/utils/fontPreloader.ts

@@ -1,6 +1,6 @@
 /**
  * Font Preloading Utilities
- * 
+ *
  * Provides utilities for preloading fonts to improve performance
  * and prevent Flash of Invisible Text (FOIT).
  */
@@ -34,10 +34,10 @@ export interface FontPreloadConfig {
 
 /**
  * Creates a preload link element for a font
- * 
+ *
  * @param config - Font preload configuration
  * @returns HTML link element for preloading
- * 
+ *
  * @example
  * ```tsx
  * const preloadLink = createFontPreloadLink({
@@ -49,11 +49,7 @@ export interface FontPreloadConfig {
  * ```
  */
 export function createFontPreloadLink(config: FontPreloadConfig): HTMLLinkElement {
-  const {
-    path,
-    format = 'woff2',
-    crossorigin = 'anonymous',
-  } = config;
+  const { path, format = 'woff2', crossorigin = 'anonymous' } = config;
 
   const link = document.createElement('link');
   link.rel = 'preload';
@@ -67,10 +63,10 @@ export function createFontPreloadLink(config: FontPreloadConfig): HTMLLinkElemen
 
 /**
  * Preloads multiple fonts
- * 
+ *
  * @param fonts - Array of font configurations to preload
  * @returns Array of created link elements
- * 
+ *
  * @example
  * ```tsx
  * const links = preloadFonts([
@@ -87,10 +83,10 @@ export function preloadFonts(fonts: FontPreloadConfig[]): HTMLLinkElement[] {
 /**
  * Generates preload link HTML tags as strings
  * Useful for server-side rendering or static HTML generation
- * 
+ *
  * @param fonts - Array of font configurations
  * @returns Array of HTML string representations
- * 
+ *
  * @example
  * ```tsx
  * const htmlTags = generateFontPreloadTags([
@@ -100,12 +96,8 @@ export function preloadFonts(fonts: FontPreloadConfig[]): HTMLLinkElement[] {
  * ```
  */
 export function generateFontPreloadTags(fonts: FontPreloadConfig[]): string[] {
-  return fonts.map((config) => {
-    const {
-      path,
-      format = 'woff2',
-      crossorigin = 'anonymous',
-    } = config;
+  return fonts.map(config => {
+    const { path, format = 'woff2', crossorigin = 'anonymous' } = config;
 
     return `<link rel="preload" as="font" href="${path}" type="font/${format}" crossorigin="${crossorigin}">`;
   });
@@ -145,4 +137,3 @@ export const DEFAULT_ATOMIX_FONTS: FontPreloadConfig[] = [
     format: 'woff2',
   },
 ];
-

package/src/lib/utils/icons.ts

@@ -35,7 +35,10 @@ export function createPhosphorIcon(name: string, size: number = 16): string {
   const path = ICON_PATHS[name] || '';
 
   if (!path) {
-    console.warn('Icon not found in icon library:', typeof name === 'string' ? name.replace(/[^a-zA-Z0-9_-]/g, '_') : 'invalid_name');
+    console.warn(
+      'Icon not found in icon library:',
+      typeof name === 'string' ? name.replace(/[^a-zA-Z0-9_-]/g, '_') : 'invalid_name'
+    );
   }
 
   return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="currentColor" viewBox="0 0 256 256">

package/src/lib/utils/index.ts

@@ -16,9 +16,7 @@ export {
   extractYouTubeId,
 } from './componentUtils';
 
-export type {
-  MergePropsOptions,
-} from './componentUtils';
+export type { MergePropsOptions } from './componentUtils';
 
 export {
   createFontPreloadLink,
@@ -27,6 +25,4 @@ export {
   DEFAULT_ATOMIX_FONTS,
 } from './fontPreloader';
 
-export type {
-  FontPreloadConfig,
-} from './fontPreloader';
+export type { FontPreloadConfig } from './fontPreloader';

package/src/lib/utils/memoryMonitor.ts

@@ -1,6 +1,6 @@
 /**
  * Memory Monitoring Utilities
- * 
+ *
  * Detects memory leaks and tracks component lifecycle memory usage
  * Only available in development mode
  */
@@ -40,7 +40,7 @@ export function isMemoryMonitoringAvailable(): boolean {
 
 /**
  * Get current memory usage snapshot
- * 
+ *
  * @returns Memory snapshot or null if not available
  */
 export function getMemorySnapshot(): MemorySnapshot | null {
@@ -60,7 +60,7 @@ export function getMemorySnapshot(): MemorySnapshot | null {
 
 /**
  * Format bytes to human-readable string
- * 
+ *
  * @param bytes - Number of bytes
  * @returns Formatted string (e.g., "1.5 MB")
  */
@@ -76,7 +76,7 @@ export function formatBytes(bytes: number): string {
 
 /**
  * Compare two memory snapshots and detect potential leaks
- * 
+ *
  * @param before - Snapshot before operation
  * @param after - Snapshot after operation
  * @param threshold - Threshold in bytes to consider a leak (default: 5MB)
@@ -114,7 +114,7 @@ export function detectMemoryLeak(
 
 /**
  * Monitor memory usage over time
- * 
+ *
  * @param interval - Interval in milliseconds to check memory
  * @param callback - Callback function called with each snapshot
  * @returns Function to stop monitoring
@@ -156,7 +156,7 @@ export function monitorMemoryUsage(
 
 /**
  * Track component lifecycle memory usage
- * 
+ *
  * @param componentName - Name of the component
  * @returns Object with start and end tracking functions
  */
@@ -175,7 +175,10 @@ export function trackComponentMemory(componentName: string) {
       const after = getMemorySnapshot();
       if (before && after) {
         const leakInfo = detectMemoryLeak(before, after);
-        if (leakInfo.hasLeak && (typeof process === 'undefined' || process.env?.NODE_ENV === 'development')) {
+        if (
+          leakInfo.hasLeak &&
+          (typeof process === 'undefined' || process.env?.NODE_ENV === 'development')
+        ) {
           console.warn(
             `[Memory Monitor] Potential memory leak detected in ${componentName}:`,
             leakInfo
@@ -186,4 +189,3 @@ export function trackComponentMemory(componentName: string) {
     },
   };
 }
-

package/src/lib/utils/themeNaming.ts

@@ -1,6 +1,6 @@
 /**
  * Theme Naming Utility
- * 
+ *
  * Provides consistent naming conventions for CSS classes, CSS variables,
  * and JavaScript properties throughout the theme system.
  */
@@ -28,7 +28,7 @@ export class ThemeNaming {
    * @param str - String to convert
    */
   static camelToKebab(str: string): string {
-    return str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();
+    return str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
   }
 
   /**
@@ -36,7 +36,7 @@ export class ThemeNaming {
    * @param str - String to convert
    */
   static kebabToCamel(str: string): string {
-    return str.replace(/-([a-z])/g, (g) => g[1]?.toUpperCase() ?? '');
+    return str.replace(/-([a-z])/g, g => g[1]?.toUpperCase() ?? '');
   }
 
   /**

package/src/styles/01-settings/_index.scss

@@ -65,4 +65,3 @@
 @forward './settings.upload';
 @forward './settings.video-player';
 @forward './settings.z-layers';
-

package/src/styles/01-settings/_settings.colors.scss

@@ -13,15 +13,15 @@ $color-contrast-light: #ffffff !default;
 
 // Primitives Primary Colors (Purple Scale)
 $primary-1: #f5f3ff !default;
-$primary-2: #ede9fe !default; 
-$primary-3: #ddd6fe !default; 
-$primary-4: #c4b5fd !default; 
-$primary-5: #a78bfa !default; 
+$primary-2: #ede9fe !default;
+$primary-3: #ddd6fe !default;
+$primary-4: #c4b5fd !default;
+$primary-5: #a78bfa !default;
 $primary-6: #8b5cf6 !default; // Balanced primary - main brand color (WCAG AA compliant)
-$primary-7: #7c3aed !default; 
-$primary-8: #6d28d9 !default; 
-$primary-9: #5b21b6 !default; 
-$primary-10: #4c1d95 !default; 
+$primary-7: #7c3aed !default;
+$primary-8: #6d28d9 !default;
+$primary-9: #5b21b6 !default;
+$primary-10: #4c1d95 !default;
 
 // Primitives Red Colors
 $red-1: #fef2f2 !default;

package/src/styles/01-settings/_settings.design-tokens.scss

@@ -7,7 +7,6 @@
 @use 'settings.breakpoints' as breakpoints;
 @use 'settings.config' as config;
 
-
 // Color maps
 
 $theme-colors-text: (
@@ -23,7 +22,7 @@ $theme-colors-text: (
   'info': $info-text,
   'light': $light-text,
   'dark': $dark-text,
-  ) !default;
+) !default;
 
 $theme-colors-text-dark: (
   'primary': $primary-text-dark,
@@ -38,7 +37,7 @@ $theme-colors-text-dark: (
   'info': $info-text-dark,
   'light': $light-text-dark,
   'dark': $dark-text-dark,
-  ) !default;
+) !default;
 
 $theme-colors-bg-subtle: (
   'primary': $primary-bg,
@@ -52,7 +51,7 @@ $theme-colors-bg-subtle: (
   'info': $info-bg,
   'light': $light-bg,
   'dark': $dark-bg,
-  ) !default;
+) !default;
 
 $theme-colors-bg-subtle-dark: (
   'primary': $primary-bg-dark,
@@ -66,7 +65,7 @@ $theme-colors-bg-subtle-dark: (
   'info': $info-bg-dark,
   'light': $light-bg-dark,
   'dark': $dark-bg-dark,
-  ) !default;
+) !default;
 
 $theme-colors-border-subtle: (
   'primary': $primary-border,
@@ -78,7 +77,7 @@ $theme-colors-border-subtle: (
   'brand': $brand-border,
   'light': $light-border,
   'dark': $dark-border,
-  ) !default;
+) !default;
 
 $theme-colors-border-subtle-dark: (
   'primary': $primary-border-dark,
@@ -90,7 +89,7 @@ $theme-colors-border-subtle-dark: (
   'brand': $brand-border-dark,
   'light': $light-border-dark,
   'dark': $dark-border-dark,
-  ) !default;
+) !default;
 
 // Main theme colors map
 $theme-colors: (
@@ -102,7 +101,7 @@ $theme-colors: (
   'error': $error,
   'light': $light,
   'dark': $dark,
-  ) !default;
+) !default;
 
 $theme-colors-dark: (
   'primary': $primary-dark,
@@ -113,7 +112,7 @@ $theme-colors-dark: (
   'success': $success-dark,
   'warning': $warning-dark,
   'info': $info-dark,
-  ) !default;
+) !default;
 
 $theme-colors-hover: (
   'primary': $primary-hover,
@@ -124,7 +123,7 @@ $theme-colors-hover: (
   'success': $success-hover,
   'warning': $warning-hover,
   'info': $info-hover,
-  ) !default;
+) !default;
 
 $theme-colors-hover-dark: (
   'primary': $primary-hover-dark,
@@ -135,7 +134,7 @@ $theme-colors-hover-dark: (
   'success': $success-hover-dark,
   'warning': $warning-hover-dark,
   'info': $info-hover-dark,
-  ) !default;
+) !default;
 
 $grays: (
   '1': $gray-1,
@@ -148,7 +147,7 @@ $grays: (
   '8': $gray-8,
   '9': $gray-9,
   '10': $gray-10,
-  ) !default;
+) !default;
 
 $primarys: (
   '1': $primary-1,
@@ -161,7 +160,7 @@ $primarys: (
   '8': $primary-8,
   '9': $primary-9,
   '10': $primary-10,
-  ) !default;
+) !default;
 
 // Typography Maps
 
@@ -177,7 +176,7 @@ $theme-font-size: (
   'h4': $h4-font-size,
   'h5': $h5-font-size,
   'h6': $h6-font-size,
-  ) !default;
+) !default;
 
 $theme-font-weight: (
   'light': $font-weight-light,
@@ -187,7 +186,7 @@ $theme-font-weight: (
   'bold': $font-weight-bold,
   'heavy': $font-weight-heavy,
   'black': $font-weight-black,
-  ) !default;
+) !default;
 
 // Utilities maps
 //
@@ -202,11 +201,14 @@ $theme-font-weight: (
 
 $utilities-colors: $theme-colors !default;
 
-$utilities-text-colors: map.merge($utilities-colors,
-    ('black': $black,
-      'white': $white,
-      'body': $body-color,
-    )) !default;
+$utilities-text-colors: map.merge(
+  $utilities-colors,
+  (
+    'black': $black,
+    'white': $white,
+    'body': $body-color,
+  )
+) !default;
 
 $utilities-text-emphasis-colors: (
   'primary-emphasis': var(--#{config.$prefix}primary-text-emphasis),
@@ -221,14 +223,17 @@ $utilities-text-emphasis-colors: (
   'error-emphasis': var(--#{config.$prefix}error-text-emphasis),
   'light-emphasis': var(--#{config.$prefix}light-text-emphasis),
   'dark-emphasis': var(--#{config.$prefix}dark-text-emphasis),
-  ) !default;
+) !default;
 
 // scss-docs-start utilities-bg-colors
-$utilities-bg-colors: map.merge($utilities-colors,
-    ('black': $black,
-      'white': $white,
-      'body': var(--#{config.$prefix}body-bg),
-    )) !default;
+$utilities-bg-colors: map.merge(
+  $utilities-colors,
+  (
+    'black': $black,
+    'white': $white,
+    'body': var(--#{config.$prefix}body-bg),
+  )
+) !default;
 
 $utilities-bg-subtle: (
   'primary-subtle': var(--#{config.$prefix}primary-bg-subtle),
@@ -242,13 +247,16 @@ $utilities-bg-subtle: (
   'error-subtle': var(--#{config.$prefix}error-bg-subtle),
   'light-subtle': var(--#{config.$prefix}light-bg-subtle),
   'dark-subtle': var(--#{config.$prefix}dark-bg-subtle),
-  ) !default;
+) !default;
 
 // scss-docs-start utilities-border-colors
-$utilities-border-colors: map.merge($utilities-colors,
-    ('black': $black,
-      'white': $white,
-    )) !default;
+$utilities-border-colors: map.merge(
+  $utilities-colors,
+  (
+    'black': $black,
+    'white': $white,
+  )
+) !default;
 
 $utilities-border-subtle: (
   'primary-subtle': var(--#{config.$prefix}primary-border-subtle),
@@ -260,13 +268,16 @@ $utilities-border-subtle: (
   'brand-subtle': var(--#{config.$prefix}brand-border-subtle),
   'light-subtle': var(--#{config.$prefix}light-border-subtle),
   'dark-subtle': var(--#{config.$prefix}dark-border-subtle),
-  ) !default;
+) !default;
 
 // scss-docs-start utilities-links-underline
-$utilities-links-underline: map.merge($utilities-colors,
-    ('black': $black,
-      'white': $white,
-    )) !default;
+$utilities-links-underline: map.merge(
+  $utilities-colors,
+  (
+    'black': $black,
+    'white': $white,
+  )
+) !default;
 
 $shadows: (
   'shadow': var(--#{config.$prefix}box-shadow),
@@ -275,7 +286,7 @@ $shadows: (
   'shadow-lg': var(--#{config.$prefix}box-shadow-lg),
   'shadow-xl': var(--#{config.$prefix}box-shadow-xl),
   'shadow-inset': var(--#{config.$prefix}box-shadow-inset),
-  ) !default;
+) !default;
 
 $shadows-dark: (
   'shadow': var(--#{config.$prefix}box-shadow-dark),
@@ -284,7 +295,7 @@ $shadows-dark: (
   'shadow-lg': var(--#{config.$prefix}box-shadow-lg-dark),
   'shadow-xl': var(--#{config.$prefix}box-shadow-xl-dark),
   'shadow-inset': var(--#{config.$prefix}box-shadow-inset-dark),
-  ) !default;
+) !default;
 
 $gradient-colors: (
   'primary': $gradient-primary,
@@ -321,7 +332,7 @@ $reds: (
   '8': $red-8,
   '9': $red-9,
   '10': $red-10,
-  ) !default;
+) !default;
 
 // Green scale (1-10)
 $greens: (
@@ -335,7 +346,7 @@ $greens: (
   '8': $green-8,
   '9': $green-9,
   '10': $green-10,
-  ) !default;
+) !default;
 
 // Blue scale (1-10)
 $blues: (
@@ -349,7 +360,7 @@ $blues: (
   '8': $blue-8,
   '9': $blue-9,
   '10': $blue-10,
-  ) !default;
+) !default;
 
 // Yellow scale (1-10)
 $yellows: (
@@ -363,14 +374,14 @@ $yellows: (
   '8': $yellow-8,
   '9': $yellow-9,
   '10': $yellow-10,
-  ) !default;
+) !default;
 
 // Line Height Maps
 $line-heights: (
   'base': $line-height-base,
   'sm': $line-height-sm,
   'lg': $line-height-lg,
-  ) !default;
+) !default;
 
 // Extended Font Size Map
 $font-sizes-extended: (
@@ -388,7 +399,7 @@ $font-sizes-extended: (
   'h5': $h5-font-size,
   'h6': $h6-font-size,
   'display-1': $display-1,
-  ) !default;
+) !default;
 
 // Letter Spacing Map
 $letter-spacings: (
@@ -398,33 +409,33 @@ $letter-spacings: (
   'h4': $h4-letter-spaceing,
   'h5': $h5-letter-spaceing,
   'h6': $h6-letter-spaceing,
-  ) !default;
+) !default;
 
 // Transition & Animation Maps
 $transitions: (
   'fast': animations.$transition-fast,
   'base': animations.$transition-base,
   'slow': animations.$transition-slow,
-  ) !default;
+) !default;
 
 $transition-durations: (
   'fast': 0.15s,
   'base': 0.3s,
   'slow': 0.5s,
   'slower': 0.7s,
-  ) !default;
+) !default;
 
 $easings: (
   'base': animations.$easing,
   'ease-in-out': cubic-bezier(0.4, 0, 0.2, 1),
-  'ease-out': cubic-bezier(0.0, 0, 0.2, 1),
+  'ease-out': cubic-bezier(0, 0, 0.2, 1),
   'ease-in': cubic-bezier(0.4, 0, 1, 1),
   'ease-linear': linear,
-  ) !default;
+) !default;
 
 // Focus Ring Tokens
 $focus-ring: (
   'width': 3px,
   'offset': 2px,
   'opacity': 0.25,
-  ) !default;
+) !default;

package/src/styles/01-settings/_settings.navbar.scss

@@ -24,7 +24,7 @@ $navbar-brand-font-weight: $font-weight-bold !default;
 $navbar-brand-color: var(--#{$prefix}body-color) !default;
 
 // Mobile toggler
-$navbar-toggler-size: 2rem !default; 
+$navbar-toggler-size: 2rem !default;
 $navbar-toggler-color: var(--#{$prefix}body-color) !default;
 $navbar-toggler-bg: transparent !default;
 $navbar-toggler-border: 0 !default;

package/src/styles/01-settings/_settings.spacing.scss

@@ -71,11 +71,10 @@ $spacing-sizes: (
   //320px
   90: 22.5rem,
   //360px
-  200: 50rem,
-  //800px
-  ) !default;
+  200: 50rem, //800px
+) !default;
 
 $spacing-important: false !default;
 $enable-negative-margins: false !default;
 
-$negative-spacers: if($enable-negative-margins, negativify-map($spacing-sizes), null) !default;
+$negative-spacers: if($enable-negative-margins, negativify-map($spacing-sizes), null) !default;

package/src/styles/01-settings/_settings.tooltip.scss

@@ -18,4 +18,4 @@ $tooltip-border-width: null !default;
 $tooltip-border-color: null !default;
 $tooltip-box-shadow: null !default;
 
-$tooltip-arrow-size: map.get($spacing-sizes, 3) !default; //12px
+$tooltip-arrow-size: map.get($spacing-sizes, 3) !default; //12px

package/src/styles/01-settings/_settings.typography.scss

@@ -92,4 +92,4 @@ $h5-letter-spaceing: -0.5px !default;
 $h6-letter-spaceing: -0.5px !default;
 
 $paragraph-margin-bottom: 0 !default;
-$body-text-align: null !default;
+$body-text-align: null !default;

package/src/styles/02-tools/_tools.breakpoints.scss

@@ -8,7 +8,7 @@
 // Breakpoint viewport sizes and media queries.
 @mixin media-breakpoint-up($name, $breakpoints: breakpoints.$grid-breakpoints) {
   $min: map.get($breakpoints, $name);
-  @if $min {
+  @if $min and $min != 0 {
     @media (min-width: $min) {
       @content;
     }