@shohojdhara/atomix 0.1.16 → 0.1.18

package/src/components/Accordion/Accordion.stories.tsx

@@ -27,24 +27,24 @@ const meta = {
     iconPosition: {
       control: { type: 'radio' },
       options: ['right', 'left'],
-      description: 'Position of the icon'
+      description: 'Position of the icon',
     },
     defaultOpen: {
       control: 'boolean',
-      description: 'Whether the accordion is initially open'
+      description: 'Whether the accordion is initially open',
     },
     disabled: {
       control: 'boolean',
-      description: 'Whether the accordion is disabled'
+      description: 'Whether the accordion is disabled',
     },
     title: {
       control: 'text',
-      description: 'Title of the accordion'
+      description: 'Title of the accordion',
     },
     children: {
       control: 'text',
-      description: 'Content inside the accordion'
-    }
+      description: 'Content inside the accordion',
+    },
   },
 } satisfies Meta<typeof Accordion>;
 
@@ -56,7 +56,7 @@ export const Default: Story = {
   args: {
     title: 'Accordion Title',
     children: <p>This is the content of the accordion that appears when expanded.</p>,
-  }
+  },
 };
 
 // Open Accordion
@@ -65,7 +65,7 @@ export const Open: Story = {
     title: 'Open Accordion',
     children: <p>This accordion is open, showing its content.</p>,
     defaultOpen: true,
-  }
+  },
 };
 
 // Disabled Accordion
@@ -74,7 +74,7 @@ export const Disabled: Story = {
     title: 'Disabled Accordion',
     children: <p>This accordion is disabled.</p>,
     disabled: true,
-  }
+  },
 };
 
 // Icon on Left
@@ -83,7 +83,7 @@ export const IconLeft: Story = {
     title: 'Icon on Left',
     children: <p>This accordion has the icon on the left side.</p>,
     iconPosition: 'left',
-  }
+  },
 };
 
 // Custom Icon
@@ -93,15 +93,24 @@ export const CustomIcon: Story = {
     children: <p>This accordion uses a custom plus icon.</p>,
     icon: (
       <i className="c-accordion__icon">
-        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
-          stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
           <circle cx="12" cy="12" r="10" />
           <line x1="12" y1="8" x2="12" y2="16" />
           <line x1="8" y1="12" x2="16" y2="12" />
         </svg>
       </i>
     ),
-  }
+  },
 };
 
 // Accordion Group
@@ -113,23 +122,16 @@ export const AccordionGroup: Story = {
   render: () => (
     <div>
       <h2>Accordion Group</h2>
-      <div className="u-d-flex u-flex-column u-gap-3" style={{ width: "500px" }}>
-        <Accordion 
-          title="First Accordion" 
-          defaultOpen={true}
-        >
+      <div className="u-d-flex u-flex-column u-gap-3" style={{ width: '500px' }}>
+        <Accordion title="First Accordion" defaultOpen={true}>
           <p>Content of the first accordion.</p>
         </Accordion>
 
-        <Accordion 
-          title="Second Accordion"
-        >
+        <Accordion title="Second Accordion">
           <p>Content of the second accordion.</p>
         </Accordion>
 
-        <Accordion 
-          title="Third Accordion"
-        >
+        <Accordion title="Third Accordion">
           <p>Content of the third accordion with more content.</p>
           <p>Additional paragraph to demonstrate scrolling.</p>
           <ul>
@@ -140,7 +142,7 @@ export const AccordionGroup: Story = {
         </Accordion>
       </div>
     </div>
-  )
+  ),
 };
 
 // All Variants
@@ -183,12 +185,21 @@ export const AllVariants: Story = {
 
         <div>
           <h3>Custom Icon</h3>
-          <Accordion 
-            title="Custom Icon" 
+          <Accordion
+            title="Custom Icon"
             icon={
               <i className="c-accordion__icon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
-                  stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
                   <circle cx="12" cy="12" r="10" />
                   <line x1="12" y1="8" x2="12" y2="16" />
                   <line x1="8" y1="12" x2="16" y2="12" />
@@ -205,11 +216,19 @@ export const AllVariants: Story = {
           <Accordion title="Rich Content">
             <div>
               <h4>Section Title</h4>
-              <p>This accordion contains rich HTML content including headings, paragraphs, and lists.</p>
+              <p>
+                This accordion contains rich HTML content including headings, paragraphs, and lists.
+              </p>
               <ul>
-                <li>List item with <a href="#">link</a></li>
-                <li>List item with <strong>bold text</strong></li>
-                <li>List item with <em>italic text</em></li>
+                <li>
+                  List item with <a href="#">link</a>
+                </li>
+                <li>
+                  List item with <strong>bold text</strong>
+                </li>
+                <li>
+                  List item with <em>italic text</em>
+                </li>
               </ul>
               <div className="u-p-3 u-mt-3 u-bg-light u-border-radius-1">
                 <code>This is a code block inside the accordion</code>
@@ -219,7 +238,7 @@ export const AllVariants: Story = {
         </div>
       </div>
     </div>
-  )
+  ),
 };
 
 // Controlled Accordion
@@ -232,17 +251,10 @@ export const Controlled: Story = {
     const [open, setOpen] = React.useState(false);
     return (
       <div>
-        <button
-          className="c-btn c-btn--primary u-mb-3"
-          onClick={() => setOpen((prev) => !prev)}
-        >
+        <button className="c-btn c-btn--primary u-mb-3" onClick={() => setOpen(prev => !prev)}>
           Toggle Accordion (Controlled)
         </button>
-        <Accordion
-          title="Controlled Accordion"
-          isOpen={open}
-          onOpenChange={setOpen}
-        >
+        <Accordion title="Controlled Accordion" isOpen={open} onOpenChange={setOpen}>
           <p>This accordion is controlled by external state.</p>
         </Accordion>
       </div>
@@ -251,8 +263,9 @@ export const Controlled: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'This story demonstrates a controlled Accordion using the `isOpen` and `onOpenChange` props.',
+        story:
+          'This story demonstrates a controlled Accordion using the `isOpen` and `onOpenChange` props.',
       },
     },
   },
-}; 
+};

package/src/components/Accordion/Accordion.tsx

@@ -41,7 +41,7 @@ export interface AccordionProps extends BaseComponentProps {
    * Callback when open state changes (for controlled mode)
    */
   onOpenChange?: (open: boolean) => void;
-};
+}
 
 export const Accordion: React.FC<AccordionProps> = ({
   title,
@@ -67,19 +67,29 @@ export const Accordion: React.FC<AccordionProps> = ({
     panelRef,
     contentRef,
     generateClassNames,
-    generateHeaderClassNames
+    generateHeaderClassNames,
   } = useAccordion({
     defaultOpen,
     disabled,
     iconPosition,
     isOpen: controlledOpen,
-    onOpenChange
+    onOpenChange,
   });
 
   // Default icon
   const defaultIcon = (
     <i className="c-accordion__icon">
-      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
         <polyline points="6 9 12 15 18 9"></polyline>
       </svg>
     </i>

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

@@ -8,12 +8,12 @@ import { addClass, removeClass } from '../../../lib/utils/dom';
  */
 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(() => {
@@ -29,15 +29,15 @@ export function applyEnterAnimation(accordion: HTMLElement): void {
  */
 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;
 }
 
@@ -46,7 +46,7 @@ export function initializeAccordionsWithCustomBehavior(): Accordion[] {
  */
 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)) {
@@ -60,11 +60,11 @@ export function openAllAccordions(): void {
  */
 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

@@ -21,4 +21,4 @@ if (typeof window !== 'undefined') {
 }
 
 // Export for module bundling
-export { Accordion as default, initializeAccordions, openAllAccordions, closeAllAccordions }; 
+export { Accordion as default, initializeAccordions, openAllAccordions, closeAllAccordions };

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

@@ -108,7 +108,7 @@ class Accordion implements AccordionInstance {
    */
   private _observeResizing(): void {
     if (!this.$body) return;
-    
+
     this._resizeObserver = new ResizeObserver(() => {
       if (this.$accordion.classList.contains(ACCORDION.CLASSES.IS_OPEN)) {
         this._updatePanelHeight();
@@ -188,7 +188,7 @@ export function initializeAccordions(): AccordionInstance[] {
 
   if (!$accordions.length) return accordionInstances;
 
-  $accordions.forEach(($accordion) => {
+  $accordions.forEach($accordion => {
     try {
       const instance = new Accordion($accordion);
       accordionInstances.push(instance);
@@ -209,4 +209,4 @@ export const CSS_VARS = ACCORDION.CSS_VARS;
 // Export component interactions
 export * from './accordionInteractions';
 
-export default Accordion; 
+export default Accordion;

package/src/components/AtomixLogo.tsx

@@ -6,35 +6,29 @@ export interface AtomixLogoProps {
   className?: string;
 }
 
-export const AtomixLogo: React.FC<AtomixLogoProps> = ({ 
-  height = 40, 
-  width = 100, 
-  className = '' 
+export const AtomixLogo: React.FC<AtomixLogoProps> = ({
+  height = 40,
+  width = 100,
+  className = '',
 }) => {
   return (
-    <svg 
-      xmlns="http://www.w3.org/2000/svg" 
-      width={width} 
-      height={height} 
+    <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" 
+        <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"
-      >
+      <text x="32" y="32" fontSize="22" fontWeight="700" fill="currentColor">
         Atomix
       </text>
     </svg>
@@ -43,4 +37,4 @@ export const AtomixLogo: React.FC<AtomixLogoProps> = ({
 
 AtomixLogo.displayName = 'AtomixLogo';
 
-export default AtomixLogo; 
+export default AtomixLogo;

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

@@ -72,7 +72,7 @@ export const VariantsShowcase: Story = {
       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 */}
@@ -82,7 +82,7 @@ export const VariantsShowcase: Story = {
             {size.toUpperCase()}
           </div>
         ))}
-        
+
         {/* Square Avatars */}
         <div>Square</div>
         {sizeOptions.map(size => (
@@ -90,7 +90,7 @@ export const VariantsShowcase: Story = {
             <Avatar src={variantImages.square} size={size} />
           </div>
         ))}
-        
+
         {/* Circle Avatars */}
         <div>Circle</div>
         {sizeOptions.map(size => (
@@ -98,7 +98,7 @@ export const VariantsShowcase: Story = {
             <Avatar src={variantImages.circle} size={size} circle={true} />
           </div>
         ))}
-        
+
         {/* Initials Avatars */}
         <div>Initials</div>
         {sizeOptions.map(size => (
@@ -106,15 +106,18 @@ export const VariantsShowcase: Story = {
             <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} />
+            <Avatar
+              icon={<Icon name="User" size={size === 'xs' ? 'xs' : size === 'sm' ? 'sm' : 'md'} />}
+              size={size}
+            />
           </div>
         ))}
-        
+
         {/* Fallback Avatars */}
         <div>Fallback</div>
         {sizeOptions.map(size => (
@@ -122,27 +125,27 @@ export const VariantsShowcase: Story = {
             <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} 
+            <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} 
+            <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')}
@@ -158,7 +161,7 @@ export const VariantsShowcase: Story = {
 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 */}
@@ -181,7 +184,7 @@ export const AvatarGroupShowcase: Story = {
               ))}
             </div>
           </div>
-          
+
           {/* Stacked Avatar Groups */}
           <div className="u-flex-grow-1">
             <h3 className="u-mb-4 u-fw-normal">Stacked Avatar Groups</h3>
@@ -201,7 +204,7 @@ export const AvatarGroupShowcase: Story = {
             </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 */}
@@ -222,7 +225,7 @@ export const AvatarGroupShowcase: Story = {
               ))}
             </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>
@@ -242,7 +245,7 @@ export const AvatarGroupShowcase: Story = {
             </div>
           </div>
         </div>
-        
+
         {/* Mixed Content Avatar Groups */}
         <div>
           <h3 className="u-mb-4 u-fw-normal">Mixed Content Avatar Groups</h3>
@@ -257,4 +260,4 @@ export const AvatarGroupShowcase: Story = {
       </div>
     );
   },
-}; 
+};

package/src/components/Avatar/Avatar.tsx

@@ -27,7 +27,9 @@ export const Avatar: React.FC<AvatarProps> = ({
     circle && AVATAR.CLASSES.CIRCLE,
     disabled && 'is-disabled',
     className,
-  ].filter(Boolean).join(' ');
+  ]
+    .filter(Boolean)
+    .join(' ');
 
   // Handle click event
   const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
@@ -37,7 +39,7 @@ export const Avatar: React.FC<AvatarProps> = ({
   };
 
   return (
-    <div 
+    <div
       className={avatarClasses}
       onClick={onClick ? handleClick : undefined}
       role={onClick ? 'button' : undefined}
@@ -45,12 +47,7 @@ export const Avatar: React.FC<AvatarProps> = ({
       aria-disabled={disabled || undefined}
     >
       {src && !imageError ? (
-        <img 
-          src={src} 
-          alt={alt} 
-          className="c-avatar__image" 
-          onError={handleImageError}
-        />
+        <img src={src} alt={alt} className="c-avatar__image" onError={handleImageError} />
       ) : initials ? (
         <span className="c-avatar__initials">{initials}</span>
       ) : icon ? (

package/src/components/Avatar/AvatarGroup.tsx

@@ -15,7 +15,9 @@ export const AvatarGroup: React.FC<AvatarGroupProps> = ({
     AVATAR_GROUP.CLASSES.BASE,
     stacked && AVATAR_GROUP.CLASSES.STACKED,
     className,
-  ].filter(Boolean).join(' ');
+  ]
+    .filter(Boolean)
+    .join(' ');
 
   // Get valid Avatar children
   const avatarChildren = Children.toArray(children).filter(
@@ -24,14 +26,12 @@ export const AvatarGroup: React.FC<AvatarGroupProps> = ({
 
   // Determine if we need to show the "more" indicator
   const showMoreIndicator = max !== undefined && avatarChildren.length > max;
-  const visibleAvatars = showMoreIndicator 
-    ? avatarChildren.slice(0, max) 
-    : avatarChildren;
+  const visibleAvatars = showMoreIndicator ? avatarChildren.slice(0, max) : avatarChildren;
   const hiddenAvatarCount = avatarChildren.length - (max || 0);
 
   // Extract size and shape from first avatar to ensure consistent styling
-  const firstAvatar = isValidElement<AvatarProps>(avatarChildren[0]) 
-    ? avatarChildren[0].props 
+  const firstAvatar = isValidElement<AvatarProps>(avatarChildren[0])
+    ? avatarChildren[0].props
     : null;
   const avatarSize = firstAvatar?.size || 'md';
   const isCircle = firstAvatar?.circle || false;
@@ -42,7 +42,9 @@ export const AvatarGroup: React.FC<AvatarGroupProps> = ({
     AVATAR_GROUP.CLASSES.MORE,
     avatarSize !== 'md' && `c-avatar--${avatarSize}`,
     isCircle && 'c-avatar--circle',
-  ].filter(Boolean).join(' ');
+  ]
+    .filter(Boolean)
+    .join(' ');
 
   return (
     <div className={avatarGroupClasses}>
@@ -58,15 +60,13 @@ export const AvatarGroup: React.FC<AvatarGroupProps> = ({
       })}
 
       {showMoreIndicator && (
-        <div className={moreClasses}>
-          {moreText || `+${hiddenAvatarCount}`}
-        </div>
+        <div className={moreClasses}>{moreText || `+${hiddenAvatarCount}`}</div>
       )}
     </div>
   );
 };
 
-export type { AvatarGroupProps }
+export type { AvatarGroupProps };
 
 AvatarGroup.displayName = 'AvatarGroup';
 

package/src/components/Avatar/index.ts

@@ -1,3 +1,3 @@
 export { Avatar } from './Avatar';
 export { default } from './Avatar';
-export type { AvatarProps } from './Avatar';
+export type { AvatarProps } from './Avatar';