@shohojdhara/atomix 0.3.4 → 0.3.5

package/src/lib/types/components.ts

@@ -631,6 +631,69 @@ export interface BadgeProps extends BaseComponentProps {
   };
 }
 
+/**
+ * Block component properties (legacy - use BlockProps from component instead)
+ * @deprecated Use BlockProps from '@atomix/components/Block' instead
+ */
+export interface LegacyBlockProps extends BaseComponentProps {
+  /**
+   * The content to be rendered within the block
+   */
+  children: ReactNode;
+
+  /**
+   * The HTML element to render as
+   * @default 'section'
+   */
+  as?: 'section' | 'div' | 'article' | 'aside' | 'main';
+
+  /**
+   * Spacing size for vertical padding
+   * @default 'md'
+   */
+  spacing?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'none';
+
+  /**
+   * Container configuration
+   */
+  container?: {
+    /**
+     * Container type for content width
+     */
+    type?: 'sm' | 'md' | 'lg' | 'xl' | 'fluid';
+    /**
+     * Additional container classes
+     */
+    className?: string;
+  };
+
+  /**
+   * Whether to enable full-width content
+   * @default false
+   */
+  fullWidth?: boolean;
+
+  /**
+   * Background color variant
+   */
+  background?:
+    | 'primary'
+    | 'secondary'
+    | 'tertiary'
+    | 'invert'
+    | 'brand'
+    | 'error'
+    | 'success'
+    | 'warning'
+    | 'info'
+    | 'light';
+
+  /**
+   * Custom style for the block
+   */
+  style?: React.CSSProperties;
+}
+
 /**
  * Callout component properties
  */
@@ -716,6 +779,27 @@ export interface AccordionProps extends BaseComponentProps {
    */
   icon?: ReactNode;
 
+  /**
+   * Whether the accordion is open
+   */
+  isOpen?: boolean;
+
+  /**
+   * Whether the accordion is disabled
+   */
+  disabled?: boolean;
+
+  onOpenChange?: (open: boolean) => void;
+
+  /**
+   * Optional open handler
+   */
+  onOpen?: () => void;
+
+  /**
+   * Optional close handler
+   */
+  onClose?: () => void;
   /**
    * Glass morphism effect for the accordion
    * Can be a boolean to enable with default settings, or an object with AtomixGlassProps to customize the effect
@@ -996,6 +1080,60 @@ export interface SpinnerProps extends BaseComponentProps {
   glass?: AtomixGlassProps | boolean;
 }
 
+/**
+ * Icon size options
+ */
+export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+/**
+ * Icon weight/style options
+ */
+export type IconWeight = 'thin' | 'light' | 'regular' | 'bold' | 'fill' | 'duotone';
+
+/**
+ * Phosphor icon type - excludes internal Phosphor exports
+ */
+export type PhosphorIconsType = Exclude<
+  keyof typeof import('@phosphor-icons/react'),
+  'IconContext' | 'IconBase' | 'createIcon' | 'default' | 'SSR'
+>;
+
+/**
+ * Icon component properties (legacy - use IconProps from component instead)
+ * @deprecated Use IconProps from '@atomix/components/Icon' instead
+ */
+export interface LegacyIconProps extends BaseComponentProps {
+  /**
+   * Icon name from Phosphor Icons
+   */
+  name: PhosphorIconsType;
+
+  /**
+   * Icon size
+   */
+  size?: IconSize | number;
+
+  /**
+   * Icon weight/style
+   */
+  weight?: IconWeight;
+
+  /**
+   * Icon color
+   */
+  color?: string;
+
+  /**
+   * Alt text for accessibility
+   */
+  alt?: string;
+
+  /**
+   * Custom style
+   */
+  style?: React.CSSProperties;
+}
+
 /**
  * Navbar position options
  */
@@ -2728,18 +2866,59 @@ export interface BreadcrumbItem {
   active?: boolean;
 
   /**
-   * Icon name from Phosphor Icons
+   * Icon name from Phosphor Icons or ReactNode
    */
-  icon?: string;
+  icon?: string | ReactNode;
 
   /**
    * Optional click handler
    */
-  onClick?: (event: MouseEvent) => void;
+  onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
+
+  /**
+   * Custom style for the breadcrumb item
+   */
+  style?: React.CSSProperties;
+
+  /**
+   * Additional className
+   */
+  className?: string;
+}
+
+/**
+ * Breadcrumb component properties (legacy - use BreadcrumbProps from component instead)
+ * @deprecated Use BreadcrumbProps from '@atomix/components/Breadcrumb' instead
+ */
+export interface LegacyBreadcrumbProps extends BaseComponentProps {
+  /**
+   * Array of breadcrumb items
+   */
+  items: BreadcrumbItem[];
+
+  /**
+   * Custom divider character or element
+   */
+  divider?: ReactNode;
+
+  /**
+   * Aria label for the navigation
+   */
+  ariaLabel?: string;
+
+  /**
+   * Optional custom link component
+   */
+  LinkComponent?: React.ElementType;
+
+  /**
+   * Custom style for the breadcrumb
+   */
+  style?: React.CSSProperties;
 }
 
 /**
- * Breadcrumb options interface
+ * Breadcrumb options interface (for vanilla JS)
  */
 export interface BreadcrumbOptions {
   /**
@@ -6227,36 +6406,6 @@ export interface FooterSocialLinkProps extends BaseComponentProps {
  */
 export type GlassMode = 'standard' | 'polar' | 'prominent' | 'shader';
 
-/**
- * Glass container size configuration
- */
-export interface GlassSize {
-  /**
-   * Width of the glass container
-   */
-  width: number;
-
-  /**
-   * Height of the glass container
-   */
-  height: number;
-}
-
-/**
- * Mouse position coordinates
- */
-export interface MousePosition {
-  /**
-   * X coordinate
-   */
-  x: number;
-
-  /**
-   * Y coordinate
-   */
-  y: number;
-}
-
 /**
  * Glass container component properties
  */

package/src/lib/types/partProps.ts

@@ -384,22 +384,6 @@ export function mergePartStyles(
   };
 }
 
-/**
- * Utility function to apply part styles to props
- */
-export function applyPartStyles<T extends Record<string, any>>(
-  props: T,
-  part?: PartStyleProps
-): T {
-  if (!part) return props;
-
-  return {
-    ...props,
-    className: [props.className, part.className].filter(Boolean).join(' '),
-    style: { ...props.style, ...part.style },
-  };
-}
-
 /**
  * Map of component names to their part types
  */

package/src/lib/utils/fontPreloader.ts

@@ -0,0 +1,148 @@
+/**
+ * Font Preloading Utilities
+ * 
+ * Provides utilities for preloading fonts to improve performance
+ * and prevent Flash of Invisible Text (FOIT).
+ */
+
+export interface FontPreloadConfig {
+  /**
+   * Font family name
+   */
+  family: string;
+  /**
+   * Font file path (relative to public/assets/fonts or absolute URL)
+   */
+  path: string;
+  /**
+   * Font weight
+   */
+  weight?: string | number;
+  /**
+   * Font style
+   */
+  style?: 'normal' | 'italic';
+  /**
+   * Font format (woff2 is preferred)
+   */
+  format?: 'woff2' | 'woff';
+  /**
+   * Cross-origin setting
+   */
+  crossorigin?: 'anonymous' | 'use-credentials';
+}
+
+/**
+ * Creates a preload link element for a font
+ * 
+ * @param config - Font preload configuration
+ * @returns HTML link element for preloading
+ * 
+ * @example
+ * ```tsx
+ * const preloadLink = createFontPreloadLink({
+ *   family: 'Nunito Sans',
+ *   path: '/fonts/nunito-sans/nunito-sans-regular.woff2',
+ *   weight: 400
+ * });
+ * document.head.appendChild(preloadLink);
+ * ```
+ */
+export function createFontPreloadLink(config: FontPreloadConfig): HTMLLinkElement {
+  const {
+    path,
+    format = 'woff2',
+    crossorigin = 'anonymous',
+  } = config;
+
+  const link = document.createElement('link');
+  link.rel = 'preload';
+  link.as = 'font';
+  link.href = path;
+  link.type = `font/${format}`;
+  link.crossOrigin = crossorigin;
+
+  return link;
+}
+
+/**
+ * Preloads multiple fonts
+ * 
+ * @param fonts - Array of font configurations to preload
+ * @returns Array of created link elements
+ * 
+ * @example
+ * ```tsx
+ * const links = preloadFonts([
+ *   { family: 'Nunito Sans', path: '/fonts/nunito-sans/nunito-sans-regular.woff2', weight: 400 },
+ *   { family: 'Nunito Sans', path: '/fonts/nunito-sans/nunito-sans-bold.woff2', weight: 700 },
+ * ]);
+ * links.forEach(link => document.head.appendChild(link));
+ * ```
+ */
+export function preloadFonts(fonts: FontPreloadConfig[]): HTMLLinkElement[] {
+  return fonts.map(createFontPreloadLink);
+}
+
+/**
+ * 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([
+ *   { family: 'Nunito Sans', path: '/fonts/nunito-sans/nunito-sans-regular.woff2' },
+ * ]);
+ * // Returns: ['<link rel="preload" as="font" href="/fonts/..." type="font/woff2" crossorigin="anonymous">']
+ * ```
+ */
+export function generateFontPreloadTags(fonts: FontPreloadConfig[]): string[] {
+  return fonts.map((config) => {
+    const {
+      path,
+      format = 'woff2',
+      crossorigin = 'anonymous',
+    } = config;
+
+    return `<link rel="preload" as="font" href="${path}" type="font/${format}" crossorigin="${crossorigin}">`;
+  });
+}
+
+/**
+ * Default font configurations for Atomix Design System
+ * These can be used as a starting point for font preloading
+ */
+export const DEFAULT_ATOMIX_FONTS: FontPreloadConfig[] = [
+  {
+    family: 'Nunito Sans',
+    path: '/fonts/nunito-sans/nunito-sans-regular.woff2',
+    weight: 400,
+    style: 'normal',
+    format: 'woff2',
+  },
+  {
+    family: 'Nunito Sans',
+    path: '/fonts/nunito-sans/nunito-sans-bold.woff2',
+    weight: 700,
+    style: 'normal',
+    format: 'woff2',
+  },
+  {
+    family: 'Nunito Sans',
+    path: '/fonts/nunito-sans/nunito-sans-italic.woff2',
+    weight: 400,
+    style: 'italic',
+    format: 'woff2',
+  },
+  {
+    family: 'Nunito Sans',
+    path: '/fonts/nunito-sans/nunito-sans-bold-italic.woff2',
+    weight: 700,
+    style: 'italic',
+    format: 'woff2',
+  },
+];
+

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.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/03-generic/_generated-root.css

@@ -1,5 +1,26 @@
 /* AUTO-GENERATED - DO NOT EDIT MANUALLY */
+/* Generated on: 2025-12-23T09:44:24.463Z */
+/* This file is generated from atomix.config.ts */
+/* Edit atomix.config.ts and run 'npm run sync:config' to regenerate */
 
 :root {
-  --atomix-colors-primary-main: #3b82f6;
+  --atomix-primary: #3b82f6;
+  --atomix-primary-1: #d8e6fd;
+  --atomix-primary-10: #183462;
+  --atomix-primary-2: #b8d2fc;
+  --atomix-primary-3: #99befa;
+  --atomix-primary-4: #7aaaf9;
+  --atomix-primary-5: #5a96f7;
+  --atomix-primary-6: #3b82f6;
+  --atomix-primary-7: #326fd1;
+  --atomix-primary-8: #295bac;
+  --atomix-primary-9: #204887;
+  --atomix-primary-bg-subtle: rgba(59, 130, 246, 0.1);
+  --atomix-primary-border-subtle: rgba(59, 130, 246, 0.2);
+  --atomix-primary-dark: #204887;
+  --atomix-primary-hover: #326fd1;
+  --atomix-primary-light: #99befa;
+  --atomix-primary-main: #3b82f6;
+  --atomix-primary-rgb: 59, 130, 246;
+  --atomix-primary-text-emphasis: #5895f7;
 }

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)