@shohojdhara/atomix 0.3.4 → 0.3.6

package/src/lib/utils/index.ts

@@ -19,3 +19,14 @@ export {
 export type {
   MergePropsOptions,
 } from './componentUtils';
+
+export {
+  createFontPreloadLink,
+  preloadFonts,
+  generateFontPreloadTags,
+  DEFAULT_ATOMIX_FONTS,
+} from './fontPreloader';
+
+export type {
+  FontPreloadConfig,
+} from './fontPreloader';

package/src/lib/utils/memoryMonitor.ts

@@ -0,0 +1,189 @@
+/**
+ * Memory Monitoring Utilities
+ * 
+ * Detects memory leaks and tracks component lifecycle memory usage
+ * Only available in development mode
+ */
+
+/**
+ * Memory snapshot for comparison
+ */
+export interface MemorySnapshot {
+  /**
+   * Used JavaScript heap size in bytes
+   */
+  usedJSHeapSize: number;
+  /**
+   * Total JavaScript heap size in bytes
+   */
+  totalJSHeapSize: number;
+  /**
+   * JavaScript heap size limit in bytes
+   */
+  jsHeapSizeLimit: number;
+  /**
+   * Timestamp of the snapshot
+   */
+  timestamp: number;
+}
+
+/**
+ * Check if memory monitoring is available
+ */
+export function isMemoryMonitoringAvailable(): boolean {
+  return (
+    typeof performance !== 'undefined' &&
+    'memory' in performance &&
+    process.env.NODE_ENV === 'development'
+  );
+}
+
+/**
+ * Get current memory usage snapshot
+ * 
+ * @returns Memory snapshot or null if not available
+ */
+export function getMemorySnapshot(): MemorySnapshot | null {
+  if (!isMemoryMonitoringAvailable()) {
+    return null;
+  }
+
+  const memory = (performance as any).memory;
+
+  return {
+    usedJSHeapSize: memory.usedJSHeapSize,
+    totalJSHeapSize: memory.totalJSHeapSize,
+    jsHeapSizeLimit: memory.jsHeapSizeLimit,
+    timestamp: performance.now(),
+  };
+}
+
+/**
+ * Format bytes to human-readable string
+ * 
+ * @param bytes - Number of bytes
+ * @returns Formatted string (e.g., "1.5 MB")
+ */
+export function formatBytes(bytes: number): string {
+  if (bytes === 0) return '0 Bytes';
+
+  const k = 1024;
+  const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+  return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i];
+}
+
+/**
+ * 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)
+ * @returns Object with leak detection results
+ */
+export function detectMemoryLeak(
+  before: MemorySnapshot | null,
+  after: MemorySnapshot | null,
+  threshold: number = 5 * 1024 * 1024 // 5MB
+): {
+  hasLeak: boolean;
+  memoryIncrease: number;
+  formattedIncrease: string;
+  percentageIncrease: number;
+} {
+  if (!before || !after) {
+    return {
+      hasLeak: false,
+      memoryIncrease: 0,
+      formattedIncrease: '0 Bytes',
+      percentageIncrease: 0,
+    };
+  }
+
+  const memoryIncrease = after.usedJSHeapSize - before.usedJSHeapSize;
+  const percentageIncrease = (memoryIncrease / before.usedJSHeapSize) * 100;
+
+  return {
+    hasLeak: memoryIncrease > threshold,
+    memoryIncrease,
+    formattedIncrease: formatBytes(memoryIncrease),
+    percentageIncrease,
+  };
+}
+
+/**
+ * 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
+ */
+export function monitorMemoryUsage(
+  interval: number = 5000,
+  callback?: (snapshot: MemorySnapshot) => void
+): () => void {
+  if (!isMemoryMonitoringAvailable()) {
+    console.warn('[Memory Monitor] Memory monitoring is not available');
+    return () => {};
+  }
+
+  const checkMemory = () => {
+    const snapshot = getMemorySnapshot();
+    if (snapshot) {
+      if (callback) {
+        callback(snapshot);
+      } else if (process.env.NODE_ENV === 'development') {
+        console.log('[Memory Monitor]', {
+          used: formatBytes(snapshot.usedJSHeapSize),
+          total: formatBytes(snapshot.totalJSHeapSize),
+          limit: formatBytes(snapshot.jsHeapSizeLimit),
+        });
+      }
+    }
+  };
+
+  const intervalId = setInterval(checkMemory, interval);
+
+  // Initial check
+  checkMemory();
+
+  // Return cleanup function
+  return () => {
+    clearInterval(intervalId);
+  };
+}
+
+/**
+ * Track component lifecycle memory usage
+ * 
+ * @param componentName - Name of the component
+ * @returns Object with start and end tracking functions
+ */
+export function trackComponentMemory(componentName: string) {
+  const before = getMemorySnapshot();
+
+  return {
+    /**
+     * Get memory snapshot at component mount
+     */
+    getBeforeSnapshot: () => before,
+    /**
+     * Get memory snapshot at component unmount and detect leaks
+     */
+    getAfterSnapshot: () => {
+      const after = getMemorySnapshot();
+      if (before && after) {
+        const leakInfo = detectMemoryLeak(before, after);
+        if (leakInfo.hasLeak && process.env.NODE_ENV === 'development') {
+          console.warn(
+            `[Memory Monitor] Potential memory leak detected in ${componentName}:`,
+            leakInfo
+          );
+        }
+      }
+      return after;
+    },
+  };
+}
+

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

@@ -195,7 +195,10 @@ $theme-font-weight: (
 
 // scss-docs-start utilities-colors
 
-// @TODO: Replace $theme-colors with css var
+// Note: Future enhancement - Consider using CSS custom properties (--atomix-*)
+// generated from $theme-colors instead of SCSS maps for utilities generation.
+// This would enable runtime theme switching for utility classes.
+// Current implementation uses SCSS maps which is correct for build-time generation.
 
 $utilities-colors: $theme-colors !default;
 

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

@@ -3,15 +3,12 @@ $assets-fonts-path: '../assets/fonts/' !default;
 @mixin font-face($name, $foldername, $filename, $weight: normal, $style: normal) {
   @font-face {
     font-family: $name;
-    src: url('#{$assets-fonts-path}/#{$foldername}/#{$filename}.eot');
     src:
-      url('#{$assets-fonts-path}/#{$foldername}/#{$filename}.eot?#iefix')
-        format('embedded-opentype'),
       url('#{$assets-fonts-path}/#{$foldername}/#{$filename}.woff2') format('woff2'),
-      url('#{$assets-fonts-path}/#{$foldername}/#{$filename}.woff') format('woff'),
-      url('#{$assets-fonts-path}/#{$foldername}/#{$filename}.ttf') format('truetype');
+      url('#{$assets-fonts-path}/#{$foldername}/#{$filename}.woff') format('woff');
     font-weight: $weight;
     font-style: $style;
+    font-display: swap;
     text-rendering: optimizeLegibility;
   }
 }

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

@@ -1,7 +1,9 @@
 @use 'sass:color';
+@use 'sass:map';
 @use '../01-settings/settings.config' as config;
 @use '../01-settings/settings.button' as button;
 @use '../01-settings/settings.colors' as colors;
+@use '../01-settings/settings.design-tokens' as tokens;
 @use '../01-settings/settings.border-radius' as *;
 @use 'tools.to-rgb' as *;
 @use 'tools.border-radius' as *;
@@ -16,99 +18,84 @@
   $active-background: null,
   $active-border: null
 ) {
-  $btn-text-color: colors.$white;
-  $btn-text-hover-color: colors.$white;
+  $btn-text-color: var(--#{config.$prefix}white, #{colors.$white});
+  $btn-text-hover-color: var(--#{config.$prefix}white, #{colors.$white});
 
   @if ($color == 'light') {
-    $btn-text-color: var(--#{config.$prefix}dark-text-emphasis);
-    $btn-text-hover-color: var(--#{config.$prefix}dark-text-emphasis);
-  }
-
-  @if ($color == 'secondary') {
-    $btn-text-color: var(--#{config.$prefix}dark-text-emphasis);
-    $btn-text-hover-color: var(--#{config.$prefix}dark-text-emphasis);
+    $btn-text-color: var(--#{config.$prefix}dark-text-emphasis, #{colors.$dark-text});
+    $btn-text-hover-color: var(--#{config.$prefix}dark-text-emphasis, #{colors.$dark-text});
+  } @else if ($color == 'secondary') {
+    $btn-text-color: var(--#{config.$prefix}dark-text-emphasis, #{colors.$dark-text});
+    $btn-text-hover-color: var(--#{config.$prefix}dark-text-emphasis, #{colors.$dark-text});
   }
 
   --#{config.$prefix}btn-color: #{$btn-text-color};
-  --#{config.$prefix}btn-bg: #{$background};
-  --#{config.$prefix}btn-border-color: #{$border};
+  --#{config.$prefix}btn-bg: var(--#{config.$prefix}#{$color}, #{$background});
+  --#{config.$prefix}btn-border-color: var(--#{config.$prefix}#{$color}, #{$border});
   --#{config.$prefix}btn-hover-color: #{$btn-text-hover-color};
-  --#{config.$prefix}btn-hover-bg: #{if(
-      $hover-background,
-      $hover-background,
-      color.scale($background, $lightness: -15%)
-    )};
-  --#{config.$prefix}btn-hover-border-color: #{if(
-      $hover-border,
-      $hover-border,
-      color.scale($border, $lightness: -10%)
-    )};
-  --#{config.$prefix}btn-active-color: #{colors.$white};
-  --#{config.$prefix}btn-active-bg: #{if(
-      $active-background,
-      $active-background,
-      color.scale($background, $lightness: -20%)
-    )};
-  --#{config.$prefix}btn-active-border-color: #{if(
-      $active-border,
-      $active-border,
-      color.scale($border, $lightness: -25%)
-    )};
-  --#{config.$prefix}btn-disabled-color: #{colors.$white};
-  --#{config.$prefix}btn-disabled-bg: #{$background};
-  --#{config.$prefix}btn-disabled-border-color: #{$background};
+  --#{config.$prefix}btn-hover-bg: var(--#{config.$prefix}#{$color}-hover, #{color.scale($background, $lightness: -15%)});
+  --#{config.$prefix}btn-hover-border-color: var(--#{config.$prefix}#{$color}-hover, #{color.scale($border, $lightness: -10%)});
+  --#{config.$prefix}btn-active-color: var(--#{config.$prefix}white, #{colors.$white});
+  --#{config.$prefix}btn-active-bg: var(--#{config.$prefix}#{$color}-hover, #{color.scale($background, $lightness: -20%)});
+  --#{config.$prefix}btn-active-border-color: var(--#{config.$prefix}#{$color}-hover, #{color.scale($border, $lightness: -25%)});
+  --#{config.$prefix}btn-disabled-color: var(--#{config.$prefix}white, #{colors.$white});
+  --#{config.$prefix}btn-disabled-bg: var(--#{config.$prefix}#{$color}, #{$background});
+  --#{config.$prefix}btn-disabled-border-color: var(--#{config.$prefix}#{$color}, #{$border});
 }
 
 // Button outline variant mixin
 @mixin btn-outline-variant(
   $color,
-  $color-hover: 'light',
-  $hover-background: $color,
-  $hover-border: $color,
-  $active-background: $color,
-  $active-border: $color
+  $color-hover: null,
+  $hover-background: null,
+  $hover-border: null,
+  $active-background: null,
+  $active-border: null
 ) {
-  @if ($hover-background == 'primary') {
-    $hover-background: 'primary';
-  }
-
-  @if ($hover-background == 'light') {
-    $hover-background: 'secondary';
-  }
-
-  @if ($hover-background == 'dark') {
-    $hover-background: 'secondary';
-  }
-
-  $btn-color: $color;
-
-  @if ($color == 'secondary') {
-    $btn-color: 'invert';
-    $color-hover: 'invert';
-  }
-
-  @if ($color == 'dark') {
-    $btn-color: 'invert';
-    $color-hover: 'invert';
-  }
+  $btn-color: var(--#{config.$prefix}#{$color}, #{map.get(tokens.$theme-colors, $color)});
+  $btn-hover-color: if(
+    $color-hover, 
+    var(--#{config.$prefix}#{$color-hover}, #{map.get(tokens.$theme-colors, $color-hover)}), 
+    var(--#{config.$prefix}white, #{colors.$white})
+  );
+  $btn-hover-bg: if(
+    $hover-background, 
+    var(--#{config.$prefix}#{$hover-background}, #{map.get(tokens.$theme-colors, $hover-background)}), 
+    var(--#{config.$prefix}#{$color}-hover, #{color.scale(map.get(tokens.$theme-colors, $color), $lightness: -15%)})
+  );
+  $btn-hover-border: if(
+    $hover-border, 
+    var(--#{config.$prefix}#{$hover-border}, #{map.get(tokens.$theme-colors, $hover-border)}), 
+    var(--#{config.$prefix}#{$color}-hover, #{color.scale(map.get(tokens.$theme-colors, $color), $lightness: -10%)})
+  );
+  $btn-active-color: if(
+    $color-hover, 
+    var(--#{config.$prefix}#{$color-hover}, #{map.get(tokens.$theme-colors, $color-hover)}), 
+    var(--#{config.$prefix}white, #{colors.$white})
+  );
+  $btn-active-bg: if(
+    $active-background, 
+    var(--#{config.$prefix}#{$active-background}, #{map.get(tokens.$theme-colors, $active-background)}), 
+    var(--#{config.$prefix}#{$color}-hover, #{color.scale(map.get(tokens.$theme-colors, $color), $lightness: -20%)})
+  );
+  $btn-active-border: if(
+    $active-border, 
+    var(--#{config.$prefix}#{$active-border}, #{map.get(tokens.$theme-colors, $active-border)}), 
+    var(--#{config.$prefix}#{$color}-hover, #{color.scale(map.get(tokens.$theme-colors, $color), $lightness: -25%)})
+  );
 
-  @if ($color == 'light') {
-    $btn-color: 'invert';
-    $color-hover: 'invert';
-  }
-
-  --#{config.$prefix}btn-color: var(--#{config.$prefix}#{$btn-color});
+  --#{config.$prefix}btn-color: #{$btn-color};
   --#{config.$prefix}btn-bg: transparent;
-  --#{config.$prefix}btn-border-color: var(--#{config.$prefix}#{$color});
-  --#{config.$prefix}btn-hover-color: var(--#{config.$prefix}#{$color-hover});
-  --#{config.$prefix}btn-hover-bg: var(--#{config.$prefix}#{$hover-background});
-  --#{config.$prefix}btn-hover-border-color: var(--#{config.$prefix}#{$hover-border});
-  --#{config.$prefix}btn-active-color: var(--#{config.$prefix}#{$color-hover});
-  --#{config.$prefix}btn-active-bg: var(--#{config.$prefix}#{$active-background});
-  --#{config.$prefix}btn-active-border-color: var(--#{config.$prefix}#{$active-border});
-  --#{config.$prefix}btn-disabled-color: var(--#{config.$prefix}#{$color});
+  --#{config.$prefix}btn-border-color: #{$btn-color};
+  --#{config.$prefix}btn-hover-color: #{$btn-hover-color};
+  --#{config.$prefix}btn-hover-bg: #{$btn-hover-bg};
+  --#{config.$prefix}btn-hover-border-color: #{$btn-hover-border};
+  --#{config.$prefix}btn-active-color: #{$btn-active-color};
+  --#{config.$prefix}btn-active-bg: #{$btn-active-bg};
+  --#{config.$prefix}btn-active-border-color: #{$btn-active-border};
+  --#{config.$prefix}btn-disabled-color: #{$btn-color};
   --#{config.$prefix}btn-disabled-bg: transparent;
-  --#{config.$prefix}btn-disabled-border-color: var(--#{config.$prefix}#{$color});
+  --#{config.$prefix}btn-disabled-border-color: #{$btn-color};
 }
 
 // Button size mixin
@@ -117,4 +104,4 @@
   --#{config.$prefix}btn-padding-x: #{$padding-x};
   --#{config.$prefix}btn-font-size: #{$font-size};
   --#{config.$prefix}btn-border-radius: #{$border-radius};
-}
+}

package/src/styles/06-components/_components.atomix-glass.scss

@@ -1,6 +1,8 @@
 // Component: AtomixGlass
 // =============================================================================
 
+@use '../02-tools/tools.component' as *;
+
 .c-atomix-glass {
   position: relative;
 
@@ -38,19 +40,19 @@
   }
 
   &__hover-1 {
-    transition: opacity 0.2s ease-out;
+    transition: opacity var(--atomix-transition-duration-fast, 0.15s) ease-out;
     opacity: var(--atomix-glass-hover-1-opacity, 0);
     background: var(--atomix-glass-hover-1-gradient, none);
   }
 
   &__hover-2 {
-    transition: opacity 0.4s ease-out;
+    transition: opacity var(--atomix-transition-duration-base, 0.3s) ease-out;
     opacity: var(--atomix-glass-hover-2-opacity, 0);
     background: var(--atomix-glass-hover-2-gradient, none);
   }
 
   &__hover-3 {
-    transition: opacity 0.6s ease-out;
+    transition: opacity var(--atomix-transition-duration-slow, 0.5s) ease-out;
     opacity: var(--atomix-glass-hover-3-opacity, 0);
     background: var(--atomix-glass-hover-3-gradient, none);
   }
@@ -91,6 +93,7 @@
     box-sizing: border-box;
     overflow: hidden;
     pointer-events: none;
+    /* postcss-ignore-start */
     -webkit-mask:
       linear-gradient(var(--atomix-black, #000000) 0 0) content-box,
       linear-gradient(var(--atomix-black, #000000) 0 0);
@@ -99,6 +102,7 @@
       linear-gradient(var(--atomix-black, #000000) 0 0) content-box,
       linear-gradient(var(--atomix-black, #000000) 0 0);
     mask-composite: exclude;
+    /* postcss-ignore-end */
 
     position: var(--atomix-glass-position);
     top: var(--atomix-glass-top);
@@ -233,6 +237,12 @@
     --atomix-glass-transition: none;
   }
 
+  // Focus ring for interactive elements (when onClick is provided)
+  &[role='button'],
+  &[tabindex]:not([tabindex='-1']) {
+    @include focus-ring;
+  }
+
   // Responsive and accessibility
   @media (prefers-reduced-motion: reduce) {
     --atomix-glass-transition: none;

package/src/styles/06-components/_components.navbar.scss

@@ -48,12 +48,6 @@
     max-width: var(--#{$prefix}navbar-container-max-width);
     padding: 0 var(--#{$prefix}navbar-padding-x);
     margin: 0 auto;
-    gap: var(--#{$prefix}navbar-padding-x);
-
-    @include media.media-down('md') {
-      flex-wrap: nowrap;
-      gap: 0.5rem;
-    }
   }
 
   // 3. Element Styles (BEM Elements)

package/src/styles/06-components/_components.pagination.scss

@@ -153,4 +153,92 @@
   &__icon-skip-forward::before {
     content: '⏭';
   }
+
+  // Search functionality
+  &__search {
+    margin-top: 1rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  &__search-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  &__search-label {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  &__search-label-text {
+    font-size: var(--#{config.$prefix}pagination-font-size);
+    color: var(--#{config.$prefix}pagination-color);
+    white-space: nowrap;
+  }
+
+  &__search-input {
+    width: 80px;
+    padding: var(--#{config.$prefix}pagination-padding-y)
+      var(--#{config.$prefix}pagination-padding-x);
+    font-size: var(--#{config.$prefix}pagination-font-size);
+    text-align: center;
+    border: 1px solid var(--#{config.$prefix}pagination-color);
+    border-radius: var(--#{config.$prefix}pagination-border-radius);
+    @include dynamic-background(var(--#{config.$prefix}pagination-bg));
+    color: var(--#{config.$prefix}pagination-color);
+    transition: all 0.2s ease-in-out;
+
+    &:focus {
+      outline: none;
+      border-color: var(--#{config.$prefix}pagination-focus-border-color);
+      border-width: var(--#{config.$prefix}pagination-focus-border-width);
+    }
+
+    &.is-error {
+      border-color: var(--#{config.$prefix}error-color, #dc3545);
+      background-color: var(--#{config.$prefix}error-bg-subtle, rgba(220, 53, 69, 0.1));
+    }
+  }
+
+  &__search-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    @include size.square(var(--#{config.$prefix}pagination-size));
+    padding: var(--#{config.$prefix}pagination-padding-y)
+      var(--#{config.$prefix}pagination-padding-x);
+    @include dynamic-background(var(--#{config.$prefix}pagination-bg));
+    border: 1px solid var(--#{config.$prefix}pagination-color);
+    border-radius: var(--#{config.$prefix}pagination-border-radius);
+    color: var(--#{config.$prefix}pagination-color);
+    cursor: pointer;
+    transition: all 0.2s ease-in-out;
+
+    &:hover {
+      --#{config.$prefix}pagination-color: var(--#{config.$prefix}pagination-hover-color);
+      --#{config.$prefix}pagination-bg: var(--#{config.$prefix}pagination-hover-bg);
+    }
+
+    &:focus-visible {
+      outline: none;
+      border-color: var(--#{config.$prefix}pagination-focus-border-color);
+      border-width: var(--#{config.$prefix}pagination-focus-border-width);
+    }
+
+    .c-icon {
+      color: inherit;
+    }
+  }
+
+  &__search-error {
+    font-size: 0.75rem;
+    color: var(--#{config.$prefix}error-color, #dc3545);
+    text-align: center;
+    margin-top: 0.25rem;
+  }
 }