@shohojdhara/atomix 0.1.16 → 0.1.17

package/src/components/Accordion/scripts/accordionInteractions.ts

@@ -1,70 +0,0 @@
-import Accordion, { initializeAccordions } from './index';
-import { ACCORDION } from '../../../lib/constants/components';
-import { addClass, removeClass } from '../../../lib/utils/dom';
-
-/**
- * Apply custom enter animation to accordion
- * @param accordion - Accordion element
- */
-export function applyEnterAnimation(accordion: HTMLElement): void {
-  const header = accordion.querySelector(ACCORDION.SELECTORS.HEADER) as HTMLElement;
-  
-  if (!header) return;
-  
-  header.addEventListener('click', () => {
-    const isOpen = accordion.classList.contains(ACCORDION.CLASSES.IS_OPEN);
-    
-    if (isOpen) {
-      addClass(accordion, ACCORDION.CLASSES.IS_ANIMATING);
-      setTimeout(() => {
-        removeClass(accordion, ACCORDION.CLASSES.IS_ANIMATING);
-      }, 300); // Match your CSS transition duration
-    }
-  });
-}
-
-/**
- * Initialize accordions with custom behavior
- * @returns Array of accordion instances
- */
-export function initializeAccordionsWithCustomBehavior(): Accordion[] {
-  const instances = initializeAccordions() as Accordion[];
-  
-  // Get all accordion elements
-  const accordions = document.querySelectorAll<HTMLElement>(ACCORDION.SELECTORS.ACCORDION);
-  
-  // Apply custom animations to each accordion
-  accordions.forEach(accordion => {
-    applyEnterAnimation(accordion);
-  });
-  
-  return instances;
-}
-
-/**
- * Opens all accordions on the page
- */
-export function openAllAccordions(): void {
-  const accordions = document.querySelectorAll<HTMLElement>(ACCORDION.SELECTORS.ACCORDION);
-  
-  accordions.forEach(accordion => {
-    const header = accordion.querySelector(ACCORDION.SELECTORS.HEADER) as HTMLButtonElement;
-    if (header && !accordion.classList.contains(ACCORDION.CLASSES.IS_OPEN)) {
-      header.click();
-    }
-  });
-}
-
-/**
- * Closes all accordions on the page
- */
-export function closeAllAccordions(): void {
-  const accordions = document.querySelectorAll<HTMLElement>(ACCORDION.SELECTORS.ACCORDION);
-  
-  accordions.forEach(accordion => {
-    const header = accordion.querySelector(ACCORDION.SELECTORS.HEADER) as HTMLButtonElement;
-    if (header && accordion.classList.contains(ACCORDION.CLASSES.IS_OPEN)) {
-      header.click();
-    }
-  });
-} 

package/src/components/Accordion/scripts/bundle.ts

@@ -1,24 +0,0 @@
-import Accordion, { initializeAccordions, openAllAccordions, closeAllAccordions } from './index';
-
-if (typeof window !== 'undefined') {
-  (window as any).Atomix = (window as any).Atomix || {};
-
-  (window as any).Atomix.Accordion = {
-    create: Accordion,
-    init: initializeAccordions,
-    openAll: openAllAccordions,
-    closeAll: closeAllAccordions,
-  };
-
-  // Auto-initialize on DOMContentLoaded
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', () => {
-      initializeAccordions();
-    });
-  } else {
-    initializeAccordions();
-  }
-}
-
-// Export for module bundling
-export { Accordion as default, initializeAccordions, openAllAccordions, closeAllAccordions }; 

package/src/components/Accordion/scripts/constants.ts

@@ -1,11 +0,0 @@
-/**
- * @deprecated Import from lib/constants instead
- * This file is kept for backward compatibility and will be removed in future versions
- */
-
-import { ACCORDION } from '../../../lib/constants/components';
-
-export const SELECTORS = ACCORDION.SELECTORS;
-export const CLASSES = ACCORDION.CLASSES;
-export const ATTRIBUTES = ACCORDION.ATTRIBUTES;
-export const CSS_VARS = ACCORDION.CSS_VARS;

package/src/components/Accordion/scripts/index.ts

@@ -1,212 +0,0 @@
-import { ACCORDION } from '../../../lib/constants/components';
-// For backward compatibility, using local constants
-// import { SELECTORS, CLASSES, ATTRIBUTES, CSS_VARS } from './constants';
-
-/**
- * Interface for Accordion instance
- */
-interface AccordionInstance {
-  destroy: () => void;
-}
-
-/**
- * Class representing an Accordion component
- */
-class Accordion implements AccordionInstance {
-  private $accordion: HTMLElement;
-  private $toggler: HTMLButtonElement | null = null;
-  private $panel: HTMLElement | null = null;
-  private $body: HTMLElement | null = null;
-  private _resizeObserver: ResizeObserver | null = null;
-
-  /**
-   * Creates an instance of Accordion
-   * @param element - The accordion container element
-   */
-  constructor(element: HTMLElement) {
-    this.$accordion = element;
-    this._initialize();
-  }
-
-  /**
-   * Initialize the accordion component
-   */
-  private _initialize(): void {
-    this._initializeElements();
-    if (!this._validateElements()) return;
-    this._setupAccessibility();
-    this._bindEvents();
-    this._initializeState();
-    this._observeResizing();
-  }
-
-  /**
-   * Initialize DOM elements
-   */
-  private _initializeElements(): void {
-    let $toggler = this.$accordion.querySelector(ACCORDION.SELECTORS.HEADER) as HTMLElement | null;
-    this.$panel = this.$accordion.querySelector(ACCORDION.SELECTORS.PANEL);
-    this.$body = this.$accordion.querySelector(ACCORDION.SELECTORS.BODY);
-
-    if ($toggler && $toggler.tagName !== 'BUTTON') {
-      const $button = document.createElement('button');
-      $button.className = $toggler.className;
-      $button.innerHTML = $toggler.innerHTML;
-      $toggler.parentNode?.replaceChild($button, $toggler);
-      $toggler = $button;
-    }
-
-    this.$toggler = $toggler as HTMLButtonElement;
-  }
-
-  /**
-   * Validate required elements exist
-   * @returns Whether all required elements exist
-   */
-  private _validateElements(): boolean {
-    if (!this.$toggler || !this.$panel || !this.$body) {
-      console.warn('Accordion: Missing required elements', this.$accordion);
-      return false;
-    }
-    return true;
-  }
-
-  /**
-   * Set up accessibility attributes
-   */
-  private _setupAccessibility(): void {
-    const panelId = `accordion-${Math.random().toString(36).slice(2, 11)}`;
-
-    this.$toggler?.setAttribute(ACCORDION.ATTRIBUTES.ARIA_EXPANDED, 'false');
-    this.$toggler?.setAttribute(ACCORDION.ATTRIBUTES.ARIA_CONTROLS, panelId);
-
-    this.$panel?.setAttribute(ACCORDION.ATTRIBUTES.ROLE, 'region');
-    if (this.$panel) this.$panel.id = panelId;
-    this.$panel?.setAttribute(ACCORDION.ATTRIBUTES.ARIA_HIDDEN, 'true');
-  }
-
-  /**
-   * Bind event listeners
-   */
-  private _bindEvents(): void {
-    this.$toggler?.addEventListener('click', this._handleToggle.bind(this));
-    this.$toggler?.addEventListener('keydown', this._handleKeydown.bind(this));
-  }
-
-  /**
-   * Initialize initial state
-   */
-  private _initializeState(): void {
-    if (this.$accordion.classList.contains(ACCORDION.CLASSES.IS_OPEN)) {
-      this._setExpandedState(true);
-      this._updatePanelHeight();
-    }
-  }
-
-  /**
-   * Observe resizing of accordion content
-   */
-  private _observeResizing(): void {
-    if (!this.$body) return;
-    
-    this._resizeObserver = new ResizeObserver(() => {
-      if (this.$accordion.classList.contains(ACCORDION.CLASSES.IS_OPEN)) {
-        this._updatePanelHeight();
-      }
-    });
-
-    this._resizeObserver.observe(this.$body);
-  }
-
-  /**
-   * Handle toggle click
-   * @param event - Click event
-   */
-  private _handleToggle(event?: Event): void {
-    event?.preventDefault();
-    const isOpen = this.$accordion.classList.contains(ACCORDION.CLASSES.IS_OPEN);
-    this._setExpandedState(!isOpen);
-  }
-
-  /**
-   * Handle keyboard event
-   * @param event - Keyboard event
-   */
-  private _handleKeydown(event: KeyboardEvent): void {
-    if (event.key === 'Enter' || event.key === ' ') {
-      event.preventDefault();
-      this._handleToggle(event);
-    }
-  }
-
-  /**
-   * Set expanded state
-   * @param isExpanded - Whether accordion is expanded
-   */
-  private _setExpandedState(isExpanded: boolean): void {
-    this.$toggler?.setAttribute(ACCORDION.ATTRIBUTES.ARIA_EXPANDED, isExpanded.toString());
-    this.$panel?.setAttribute(ACCORDION.ATTRIBUTES.ARIA_HIDDEN, (!isExpanded).toString());
-
-    if (isExpanded) {
-      this.$accordion.classList.add(ACCORDION.CLASSES.IS_OPEN);
-      this._updatePanelHeight();
-    } else {
-      this.$accordion.classList.remove(ACCORDION.CLASSES.IS_OPEN);
-      this.$panel?.style.setProperty(ACCORDION.CSS_VARS.PANEL_HEIGHT, '0px');
-    }
-  }
-
-  /**
-   * Update panel height based on content
-   */
-  private _updatePanelHeight(): void {
-    if (this.$panel && this.$body) {
-      this.$panel.style.setProperty(
-        ACCORDION.CSS_VARS.PANEL_HEIGHT,
-        `${this.$body.clientHeight}px`
-      );
-    }
-  }
-
-  /**
-   * Clean up event listeners and observers
-   */
-  public destroy(): void {
-    this._resizeObserver?.disconnect();
-    this.$toggler?.removeEventListener('click', this._handleToggle);
-    this.$toggler?.removeEventListener('keydown', this._handleKeydown);
-  }
-}
-
-/**
- * Initialize all accordions in the document
- * @returns Array of accordion instances
- */
-export function initializeAccordions(): AccordionInstance[] {
-  const accordionInstances: AccordionInstance[] = [];
-  const $accordions = document.querySelectorAll<HTMLElement>(ACCORDION.SELECTORS.ACCORDION);
-
-  if (!$accordions.length) return accordionInstances;
-
-  $accordions.forEach(($accordion) => {
-    try {
-      const instance = new Accordion($accordion);
-      accordionInstances.push(instance);
-    } catch (error) {
-      console.error('Error initializing accordion:', error);
-    }
-  });
-
-  return accordionInstances;
-}
-
-// Export constants for backward compatibility
-export const SELECTORS = ACCORDION.SELECTORS;
-export const CLASSES = ACCORDION.CLASSES;
-export const ATTRIBUTES = ACCORDION.ATTRIBUTES;
-export const CSS_VARS = ACCORDION.CSS_VARS;
-
-// Export component interactions
-export * from './accordionInteractions';
-
-export default Accordion; 

package/src/components/AtomixLogo/AtomixLogo.tsx

@@ -1,36 +0,0 @@
-import React from 'react';
-
-export interface AtomixLogoProps extends React.SVGProps<SVGSVGElement> {
-  height?: number | string;
-  width?: number | string;
-  color?: string;
-}
-
-export const AtomixLogo: React.FC<AtomixLogoProps> = ({
-  height = 24,
-  width = 24,
-  color = 'currentColor',
-  ...props
-}) => {
-  return (
-    <svg
-      width={width}
-      height={height}
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <path
-        d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
-        fill={color}
-      />
-      <path
-        d="M12 6c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm0 10c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4z"
-        fill={color}
-      />
-    </svg>
-  );
-};
-
-export default AtomixLogo;

package/src/components/AtomixLogo/index.ts

@@ -1,3 +0,0 @@
-export { AtomixLogo } from './AtomixLogo';
-export type { AtomixLogoProps } from './AtomixLogo';
-export { default } from './AtomixLogo';

package/src/components/AtomixLogo.tsx

@@ -1,46 +0,0 @@
-import React from 'react';
-
-export interface AtomixLogoProps {
-  height?: number;
-  width?: number;
-  className?: string;
-}
-
-export const AtomixLogo: React.FC<AtomixLogoProps> = ({ 
-  height = 40, 
-  width = 100, 
-  className = '' 
-}) => {
-  return (
-    <svg 
-      xmlns="http://www.w3.org/2000/svg" 
-      width={width} 
-      height={height} 
-      viewBox="0 0 120 48"
-      className={className}
-    >
-      {/* Atom icon */}
-      <g transform="translate(0, 8) scale(0.06)">
-        <path 
-          fill="currentColor" 
-          d="M256 398.8c-11.8 5.1-23.4 9.7-34.9 13.5c16.7 33.8 31 35.7 34.9 35.7s18.1-1.9 34.9-35.7c-11.4-3.9-23.1-8.4-34.9-13.5zM446 256c33 45.2 44.3 90.9 23.6 128c-20.2 36.3-62.5 49.3-115.2 43.2c-22 52.1-55.6 84.8-98.4 84.8s-76.4-32.7-98.4-84.8c-52.7 6.1-95-6.8-115.2-43.2C21.7 346.9 33 301.2 66 256c-33-45.2-44.3-90.9-23.6-128c20.2-36.3 62.5-49.3 115.2-43.2C179.6 32.7 213.2 0 256 0s76.4 32.7 98.4 84.8c52.7-6.1 95 6.8 115.2 43.2c20.7 37.1 9.4 82.8-23.6 128zm-65.8 67.4c-1.7 14.2-3.9 28-6.7 41.2c31.8 1.4 38.6-8.7 40.2-11.7c2.3-4.2 7-17.9-11.9-48.1c-6.8 6.3-14 12.5-21.6 18.6zm-6.7-175.9c2.8 13.1 5 26.9 6.7 41.2c7.6 6.1 14.8 12.3 21.6 18.6c18.9-30.2 14.2-44 11.9-48.1c-1.6-2.9-8.4-13-40.2-11.7zM290.9 99.7C274.1 65.9 259.9 64 256 64s-18.1 1.9-34.9 35.7c11.4 3.9 23.1 8.4 34.9 13.5c11.8-5.1 23.4-9.7 34.9-13.5zm-159 88.9c1.7-14.3 3.9-28 6.7-41.2c-31.8-1.4-38.6 8.7-40.2 11.7c-2.3 4.2-7 17.9 11.9 48.1c6.8-6.3 14-12.5 21.6-18.6zM110.2 304.8C91.4 335 96 348.7 98.3 352.9c1.6 2.9 8.4 13 40.2 11.7c-2.8-13.1-5-26.9-6.7-41.2c-7.6-6.1-14.8-12.3-21.6-18.6zM336 256a80 80 0 1 0 -160 0 80 80 0 1 0 160 0zm-80-32a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"
-        />
-      </g>
-      
-      {/* Atomix text */}
-      <text 
-        x="32" 
-        y="32" 
-        fontSize="22" 
-        fontWeight="700" 
-        fill="currentColor"
-      >
-        Atomix
-      </text>
-    </svg>
-  );
-};
-
-AtomixLogo.displayName = 'AtomixLogo';
-
-export default AtomixLogo; 

package/src/components/Avatar/Avatar.stories.tsx

@@ -1,260 +0,0 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { Avatar } from './Avatar';
-import { AvatarGroup } from './AvatarGroup';
-import { Icon } from '../Icon';
-
-const meta = {
-  title: 'Components/Avatar',
-  component: Avatar,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    src: {
-      control: 'text',
-      description: 'Avatar image source URL',
-    },
-    alt: {
-      control: 'text',
-      description: 'Alt text for the avatar image',
-    },
-    initials: {
-      control: 'text',
-      description: 'Initials to display when no image is available',
-    },
-    icon: {
-      control: { disable: true },
-      description: 'Icon to display when no image or initials are available',
-    },
-    size: {
-      control: { type: 'select' },
-      options: ['xs', 'sm', 'md', 'lg', 'xl'],
-      description: 'Size variant for the avatar',
-    },
-    circle: {
-      control: 'boolean',
-      description: 'Whether to make the avatar circular',
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Whether the avatar is disabled',
-    },
-    onClick: {
-      action: 'clicked',
-      description: 'Optional click handler',
-    },
-  },
-} satisfies Meta<typeof Avatar>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// Basic Avatar
-export const Basic: Story = {
-  args: {
-    src: 'https://i.pravatar.cc/150?img=1',
-    alt: 'User Avatar',
-    size: 'md',
-    circle: false,
-  },
-};
-
-// Avatar Variants Showcase
-export const VariantsShowcase: Story = {
-  render: () => {
-    const sizeOptions = ['xs', 'sm', 'md', 'lg', 'xl'] as const;
-    const variantImages = {
-      square: 'https://i.pravatar.cc/150?img=2',
-      circle: 'https://i.pravatar.cc/150?img=3',
-      initials: null,
-      icon: null,
-      fallback: 'invalid-url.jpg',
-    };
-    
-    return (
-      <div className="u-d-grid u-gap-6" style={{ gridTemplateColumns: 'auto 1fr 1fr 1fr 1fr 1fr' }}>
-        {/* Header Row */}
-        <div className="u-fw-bold">Type</div>
-        {sizeOptions.map(size => (
-          <div key={size} className="u-fw-bold u-text-center">
-            {size.toUpperCase()}
-          </div>
-        ))}
-        
-        {/* Square Avatars */}
-        <div>Square</div>
-        {sizeOptions.map(size => (
-          <div key={size} className="u-d-flex u-justify-content-center">
-            <Avatar src={variantImages.square} size={size} />
-          </div>
-        ))}
-        
-        {/* Circle Avatars */}
-        <div>Circle</div>
-        {sizeOptions.map(size => (
-          <div key={size} className="u-d-flex u-justify-content-center">
-            <Avatar src={variantImages.circle} size={size} circle={true} />
-          </div>
-        ))}
-        
-        {/* Initials Avatars */}
-        <div>Initials</div>
-        {sizeOptions.map(size => (
-          <div key={size} className="u-d-flex u-justify-content-center">
-            <Avatar initials="JD" size={size} />
-          </div>
-        ))}
-        
-        {/* Icon Avatars */}
-        <div>Icon</div>
-        {sizeOptions.map(size => (
-          <div key={size} className="u-d-flex u-justify-content-center">
-            <Avatar icon={<Icon name="User" size={size === 'xs' ? 'xs' : size === 'sm' ? 'sm' : 'md'} />} size={size} />
-          </div>
-        ))}
-        
-        {/* Fallback Avatars */}
-        <div>Fallback</div>
-        {sizeOptions.map(size => (
-          <div key={size} className="u-d-flex u-justify-content-center">
-            <Avatar src={variantImages.fallback} size={size} />
-          </div>
-        ))}
-        
-        {/* Interactive Avatars */}
-        <div>Interactive</div>
-        {sizeOptions.map(size => (
-          <div key={size} className="u-d-flex u-justify-content-center">
-            <Avatar 
-              src={`https://i.pravatar.cc/150?img=${size === 'xs' ? 4 : size === 'sm' ? 5 : size === 'md' ? 6 : size === 'lg' ? 7 : 8}`} 
-              size={size} 
-              circle={true}
-              onClick={() => alert(`${size.toUpperCase()} Avatar clicked!`)}
-            />
-          </div>
-        ))}
-        
-        {/* Disabled Avatars */}
-        <div>Disabled</div>
-        {sizeOptions.map(size => (
-          <div key={size} className="u-d-flex u-justify-content-center">
-            <Avatar 
-              src={`https://i.pravatar.cc/150?img=${size === 'xs' ? 9 : size === 'sm' ? 10 : size === 'md' ? 11 : size === 'lg' ? 12 : 13}`} 
-              size={size} 
-              circle={true}
-              disabled={true}
-              onClick={() => alert('This will not be triggered')}
-            />
-          </div>
-        ))}
-      </div>
-    );
-  },
-};
-
-// Avatar Group Showcase
-export const AvatarGroupShowcase: Story = {
-  render: () => {
-    const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const;
-    
-    return (
-      <div className="u-d-flex u-flex-column u-gap-8">
-        {/* First row: Standard and Stacked side by side */}
-        <div className="u-d-flex u-gap-12">
-          {/* Standard Avatar Groups */}
-          <div className="u-flex-grow-1">
-            <h3 className="u-mb-4 u-fw-normal">Standard Avatar Groups</h3>
-            <div className="u-d-flex u-flex-column u-gap-4">
-              {sizes.map(size => (
-                <div key={size} className="u-d-flex u-align-items-center u-gap-4">
-                  <div className="u-w-12">{size.toUpperCase()}</div>
-                  <AvatarGroup>
-                    <Avatar src={`https://i.pravatar.cc/150?img=${14}`} size={size} circle />
-                    <Avatar src={`https://i.pravatar.cc/150?img=${15}`} size={size} circle />
-                    <Avatar src={`https://i.pravatar.cc/150?img=${16}`} size={size} circle />
-                    <Avatar src={`https://i.pravatar.cc/150?img=${17}`} size={size} circle />
-                    <Avatar src={`https://i.pravatar.cc/150?img=${18}`} size={size} circle />
-                  </AvatarGroup>
-                </div>
-              ))}
-            </div>
-          </div>
-          
-          {/* Stacked Avatar Groups */}
-          <div className="u-flex-grow-1">
-            <h3 className="u-mb-4 u-fw-normal">Stacked Avatar Groups</h3>
-            <div className="u-d-flex u-flex-column u-gap-4">
-              {sizes.map(size => (
-                <div key={size} className="u-d-flex u-align-items-center u-gap-4">
-                  <div className="u-w-12">{size.toUpperCase()}</div>
-                  <AvatarGroup stacked>
-                    <Avatar src={`https://i.pravatar.cc/150?img=${24}`} size={size} circle />
-                    <Avatar src={`https://i.pravatar.cc/150?img=${25}`} size={size} circle />
-                    <Avatar src={`https://i.pravatar.cc/150?img=${26}`} size={size} circle />
-                    <Avatar src={`https://i.pravatar.cc/150?img=${27}`} size={size} circle />
-                    <Avatar src={`https://i.pravatar.cc/150?img=${28}`} size={size} circle />
-                  </AvatarGroup>
-                </div>
-              ))}
-            </div>
-          </div>
-        </div>
-        
-        {/* Second row: Max and Stacked+Max side by side */}
-        <div className="u-d-flex u-gap-12">
-          {/* Avatar Groups with Max Limit */}
-          <div className="u-flex-grow-1">
-            <h3 className="u-mb-4 u-fw-normal">Avatar Groups with Max Limit</h3>
-            <div className="u-d-flex u-flex-column u-gap-4">
-              {sizes.map(size => (
-                <div key={size} className="u-d-flex u-align-items-center u-gap-4">
-                  <div className="u-w-12">{size.toUpperCase()}</div>
-                  <AvatarGroup max={3}>
-                    <Avatar src={`https://i.pravatar.cc/150?img=${19}`} size={size} circle />
-                    <Avatar src={`https://i.pravatar.cc/150?img=${20}`} size={size} circle />
-                    <Avatar src={`https://i.pravatar.cc/150?img=${21}`} size={size} circle />
-                    <Avatar src={`https://i.pravatar.cc/150?img=${22}`} size={size} circle />
-                    <Avatar src={`https://i.pravatar.cc/150?img=${23}`} size={size} circle />
-                  </AvatarGroup>
-                </div>
-              ))}
-            </div>
-          </div>
-          
-          {/* Stacked Avatar Groups with Max Limit */}
-          <div className="u-flex-grow-1">
-            <h3 className="u-mb-4 u-fw-normal">Stacked Groups with Max Limit</h3>
-            <div className="u-d-flex u-flex-column u-gap-4">
-              {sizes.map(size => (
-                <div key={size} className="u-d-flex u-align-items-center u-gap-4">
-                  <div className="u-w-12">{size.toUpperCase()}</div>
-                  <AvatarGroup stacked max={3} moreText={`+more`}>
-                    <Avatar src={`https://i.pravatar.cc/150?img=${29}`} size={size} circle />
-                    <Avatar src={`https://i.pravatar.cc/150?img=${30}`} size={size} circle />
-                    <Avatar src={`https://i.pravatar.cc/150?img=${31}`} size={size} circle />
-                    <Avatar src={`https://i.pravatar.cc/150?img=${32}`} size={size} circle />
-                    <Avatar src={`https://i.pravatar.cc/150?img=${33}`} size={size} circle />
-                  </AvatarGroup>
-                </div>
-              ))}
-            </div>
-          </div>
-        </div>
-        
-        {/* Mixed Content Avatar Groups */}
-        <div>
-          <h3 className="u-mb-4 u-fw-normal">Mixed Content Avatar Groups</h3>
-          <AvatarGroup>
-            <Avatar src={`https://i.pravatar.cc/150?img=${34}`} size="md" circle />
-            <Avatar initials="JD" size="md" circle />
-            <Avatar src={`https://i.pravatar.cc/150?img=${35}`} size="md" circle />
-            <Avatar icon={<Icon name="User" size="md" />} size="md" circle />
-            <Avatar src={`https://i.pravatar.cc/150?img=${36}`} size="md" circle />
-          </AvatarGroup>
-        </div>
-      </div>
-    );
-  },
-};