@shohojdhara/atomix 0.1.16 → 0.1.18

package/src/components/Button/index.ts

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

package/src/components/Button/scripts/buttonInteractions.ts

@@ -7,13 +7,13 @@ import { addClass, removeClass } from '../../../lib/utils/dom';
  */
 export function applyHoverEffect(button: HTMLButtonElement): void {
   const hoverClass = 'is-hovered';
-  
+
   button.addEventListener('mouseenter', () => {
     if (!button.disabled) {
       addClass(button, hoverClass);
     }
   });
-  
+
   button.addEventListener('mouseleave', () => {
     removeClass(button, hoverClass);
   });
@@ -25,17 +25,17 @@ export function applyHoverEffect(button: HTMLButtonElement): void {
  */
 export function applyActiveEffect(button: HTMLButtonElement): void {
   const activeClass = 'is-active';
-  
+
   button.addEventListener('mousedown', () => {
     if (!button.disabled) {
       addClass(button, activeClass);
     }
   });
-  
+
   button.addEventListener('mouseup', () => {
     removeClass(button, activeClass);
   });
-  
+
   button.addEventListener('mouseleave', () => {
     removeClass(button, activeClass);
   });
@@ -56,18 +56,18 @@ export function initializeButton(
 ): void {
   const { onClick, enableHoverEffect = true, enableActiveEffect = true } = options || {};
   const { handleClick } = useButton();
-  
+
   // Set up click handler with disabled state check
   if (onClick) {
     button.addEventListener('click', handleClick(onClick));
   }
-  
+
   // Apply interaction effects
   if (enableHoverEffect) {
     applyHoverEffect(button);
   }
-  
+
   if (enableActiveEffect) {
     applyActiveEffect(button);
   }
-} 
+}

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

@@ -1 +1 @@
-export * from './buttonInteractions'; 
+export * from './buttonInteractions';

package/src/components/Callout/Callout.stories.tsx

@@ -11,9 +11,10 @@ const meta: Meta<typeof Callout> = {
     layout: 'padded',
     docs: {
       description: {
-        component: 'Callout components are used to display important messages, notifications, or alerts to users. They can be used to provide feedback, warnings, errors, or general information.'
-      }
-    }
+        component:
+          'Callout components are used to display important messages, notifications, or alerts to users. They can be used to provide feedback, warnings, errors, or general information.',
+      },
+    },
   },
   argTypes: {
     variant: {
@@ -92,25 +93,49 @@ type Story = StoryObj<typeof Callout>;
 // Icon components for different callout types
 const InfoIcon = () => (
   <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    <path
+      d="M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
   </svg>
 );
 
 const SuccessIcon = () => (
   <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M9 12L11 14L15 10M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    <path
+      d="M9 12L11 14L15 10M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
   </svg>
 );
 
 const WarningIcon = () => (
   <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M12 9V13M12 17H12.01M3.98069 8.00001C3.32275 9.15122 3 10.5502 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C10.5502 3 9.15122 3.32275 8.00001 3.98069" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    <path
+      d="M12 9V13M12 17H12.01M3.98069 8.00001C3.32275 9.15122 3 10.5502 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C10.5502 3 9.15122 3.32275 8.00001 3.98069"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
   </svg>
 );
 
 const ErrorIcon = () => (
   <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M12 9V13M12 17H12.01M11.2926 3.05737C11.5093 3.01652 11.7321 3 11.9565 3C16.3908 3 20 6.60914 20 11.0435C20 11.2679 19.9835 11.4907 19.9426 11.7074C19.4862 15.0952 16.5609 17.7241 13 17.9711C12.6712 17.9903 12.3375 18 12 18C7.58172 18 4 14.4183 4 10C4 6.43913 6.62884 3.51375 10.0166 3.05736C10.2333 3.01652 10.4561 3 10.6805 3C10.9049 3 11.1277 3.01652 11.3444 3.05736L11.2926 3.05737Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    <path
+      d="M12 9V13M12 17H12.01M11.2926 3.05737C11.5093 3.01652 11.7321 3 11.9565 3C16.3908 3 20 6.60914 20 11.0435C20 11.2679 19.9835 11.4907 19.9426 11.7074C19.4862 15.0952 16.5609 17.7241 13 17.9711C12.6712 17.9903 12.3375 18 12 18C7.58172 18 4 14.4183 4 10C4 6.43913 6.62884 3.51375 10.0166 3.05736C10.2333 3.01652 10.4561 3 10.6805 3C10.9049 3 11.1277 3.01652 11.3444 3.05736L11.2926 3.05737Z"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
   </svg>
 );
 
@@ -125,10 +150,10 @@ export const Default: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'The default callout with a title, content, and an icon.'
-      }
-    }
-  }
+        story: 'The default callout with a title, content, and an icon.',
+      },
+    },
+  },
 };
 
 export const Success: Story = {
@@ -141,10 +166,10 @@ export const Success: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'Use success callouts to confirm that an action was completed successfully.'
-      }
-    }
-  }
+        story: 'Use success callouts to confirm that an action was completed successfully.',
+      },
+    },
+  },
 };
 
 export const Warning: Story = {
@@ -157,10 +182,11 @@ export const Warning: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'Warning callouts alert users to potential issues or important information they should be aware of.'
-      }
-    }
-  }
+        story:
+          'Warning callouts alert users to potential issues or important information they should be aware of.',
+      },
+    },
+  },
 };
 
 export const Error: Story = {
@@ -173,10 +199,10 @@ export const Error: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'Error callouts indicate that something went wrong and requires attention.'
-      }
-    }
-  }
+        story: 'Error callouts indicate that something went wrong and requires attention.',
+      },
+    },
+  },
 };
 
 // Layout variants
@@ -196,10 +222,11 @@ export const WithActions: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'Callouts can include action buttons to allow users to respond directly to the message.'
-      }
-    }
-  }
+        story:
+          'Callouts can include action buttons to allow users to respond directly to the message.',
+      },
+    },
+  },
 };
 
 export const Dismissible: Story = {
@@ -213,10 +240,11 @@ export const Dismissible: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'Dismissible callouts include a close button that allows users to remove the callout from view.'
-      }
-    }
-  }
+        story:
+          'Dismissible callouts include a close button that allows users to remove the callout from view.',
+      },
+    },
+  },
 };
 
 export const OneLine: Story = {
@@ -229,10 +257,11 @@ export const OneLine: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'One-line callouts are more compact and display the title and icon in a single line.'
-      }
-    }
-  }
+        story:
+          'One-line callouts are more compact and display the title and icon in a single line.',
+      },
+    },
+  },
 };
 
 export const Toast: Story = {
@@ -247,10 +276,11 @@ export const Toast: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'Toast notifications are temporary messages that appear and disappear automatically.'
-      }
-    }
-  }
+        story:
+          'Toast notifications are temporary messages that appear and disappear automatically.',
+      },
+    },
+  },
 };
 
 // Theme variants
@@ -264,10 +294,11 @@ export const Dark: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'Dark callouts are useful for dark-themed interfaces or for creating visual contrast.'
-      }
-    }
-  }
+        story:
+          'Dark callouts are useful for dark-themed interfaces or for creating visual contrast.',
+      },
+    },
+  },
 };
 
 export const Light: Story = {
@@ -280,68 +311,120 @@ export const Light: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'Light callouts are useful for light-themed interfaces or for creating visual contrast.'
-      }
-    }
-  }
+        story:
+          'Light callouts are useful for light-themed interfaces or for creating visual contrast.',
+      },
+    },
+  },
 };
 
 // Interactive examples
 const ToastDemoTemplate = () => {
-  const [toasts, setToasts] = useState<{id: string, variant: string}[]>([]);
-  
+  const [toasts, setToasts] = useState<{ id: string; variant: string }[]>([]);
+
   const addToast = (variant: string) => {
     const id = Math.random().toString(36).substring(2, 9);
-    setToasts([...toasts, {id, variant}]);
-    
+    setToasts([...toasts, { id, variant }]);
+
     // Auto-remove after 5 seconds
     setTimeout(() => {
       setToasts(current => current.filter(toast => toast.id !== id));
     }, 5000);
   };
-  
+
   const removeToast = (id: string) => {
     setToasts(current => current.filter(toast => toast.id !== id));
   };
-  
+
   const getIcon = (variant: string) => {
-    switch(variant) {
-      case 'success': return <SuccessIcon />;
-      case 'warning': return <WarningIcon />;
-      case 'error': return <ErrorIcon />;
-      default: return <InfoIcon />;
+    switch (variant) {
+      case 'success':
+        return <SuccessIcon />;
+      case 'warning':
+        return <WarningIcon />;
+      case 'error':
+        return <ErrorIcon />;
+      default:
+        return <InfoIcon />;
     }
   };
-  
+
   const getTitle = (variant: string) => {
-    switch(variant) {
-      case 'success': return 'Success';
-      case 'warning': return 'Warning';
-      case 'error': return 'Error';
-      default: return 'Information';
+    switch (variant) {
+      case 'success':
+        return 'Success';
+      case 'warning':
+        return 'Warning';
+      case 'error':
+        return 'Error';
+      default:
+        return 'Information';
     }
   };
-  
+
   const getMessage = (variant: string) => {
-    switch(variant) {
-      case 'success': return 'Operation completed successfully!';
-      case 'warning': return 'Please review before continuing.';
-      case 'error': return 'An error occurred. Please try again.';
-      default: return 'This is an informational message.';
+    switch (variant) {
+      case 'success':
+        return 'Operation completed successfully!';
+      case 'warning':
+        return 'Please review before continuing.';
+      case 'error':
+        return 'An error occurred. Please try again.';
+      default:
+        return 'This is an informational message.';
     }
   };
-  
+
   return (
     <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
       <div style={{ display: 'flex', gap: '8px' }}>
-        <Button label="Add Info Toast" variant="primary" size="sm" onClick={() => addToast('info')} />
-        <Button label="Add Success Toast" variant="success" size="sm" onClick={() => addToast('success')} />
-        <Button label="Add Warning Toast" variant="warning" size="sm" onClick={() => addToast('warning')} />
-        <Button label="Add Error Toast" variant="error" size="sm" onClick={() => addToast('error')} />
+        <Button
+          label="Add Info Toast"
+          variant="primary"
+          size="sm"
+          onClick={() => addToast('info')}
+        />
+        <Button
+          label="Add Success Toast"
+          variant="success"
+          size="sm"
+          onClick={() => addToast('success')}
+        />
+        <Button
+          label="Add Warning Toast"
+          variant="warning"
+          size="sm"
+          onClick={() => addToast('warning')}
+        />
+        <Button
+          label="Add Error Toast"
+          variant="error"
+          size="sm"
+          onClick={() => addToast('error')}
+        />
       </div>
-      
-      <div style={{ position: 'relative', height: '300px', border: '1px dashed #ccc', borderRadius: '8px', padding: '16px', overflow: 'hidden' }}>
-        <div style={{ position: 'absolute', top: '16px', right: '16px', display: 'flex', flexDirection: 'column', gap: '8px', maxWidth: '350px' }}>
+
+      <div
+        style={{
+          position: 'relative',
+          height: '300px',
+          border: '1px dashed #ccc',
+          borderRadius: '8px',
+          padding: '16px',
+          overflow: 'hidden',
+        }}
+      >
+        <div
+          style={{
+            position: 'absolute',
+            top: '16px',
+            right: '16px',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '8px',
+            maxWidth: '350px',
+          }}
+        >
           {toasts.map(toast => (
             <Callout
               key={toast.id}
@@ -356,7 +439,15 @@ const ToastDemoTemplate = () => {
           ))}
         </div>
         {toasts.length === 0 && (
-          <div style={{ display: 'flex', height: '100%', alignItems: 'center', justifyContent: 'center', color: '#666' }}>
+          <div
+            style={{
+              display: 'flex',
+              height: '100%',
+              alignItems: 'center',
+              justifyContent: 'center',
+              color: '#666',
+            }}
+          >
             Click a button above to show toast notifications here
           </div>
         )}
@@ -370,19 +461,20 @@ export const ToastDemo: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'Interactive demo showing how toast notifications can be triggered and displayed in different variants.'
-      }
-    }
-  }
+        story:
+          'Interactive demo showing how toast notifications can be triggered and displayed in different variants.',
+      },
+    },
+  },
 };
 
 const AutoDismissTemplate = () => {
   const [visible, setVisible] = useState(true);
   const [countdown, setCountdown] = useState(5);
-  
+
   useEffect(() => {
     if (!visible) return;
-    
+
     const timer = setInterval(() => {
       setCountdown(prev => {
         if (prev <= 1) {
@@ -393,15 +485,15 @@ const AutoDismissTemplate = () => {
         return prev - 1;
       });
     }, 1000);
-    
+
     return () => clearInterval(timer);
   }, [visible]);
-  
+
   const resetCallout = () => {
     setVisible(true);
     setCountdown(5);
   };
-  
+
   return (
     <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
       {visible ? (
@@ -411,7 +503,8 @@ const AutoDismissTemplate = () => {
           icon={<WarningIcon />}
           onClose={() => setVisible(false)}
         >
-          This callout will automatically dismiss after the countdown. You can also dismiss it manually.
+          This callout will automatically dismiss after the countdown. You can also dismiss it
+          manually.
         </Callout>
       ) : (
         <Button label="Show Auto-dismiss Callout" variant="primary" onClick={resetCallout} />
@@ -425,24 +518,28 @@ export const AutoDismiss: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'Example of a callout that automatically dismisses after a countdown.'
-      }
-    }
-  }
+        story: 'Example of a callout that automatically dismisses after a countdown.',
+      },
+    },
+  },
 };
 
 const AllVariantsTemplate = () => {
   const variants = ['primary', 'secondary', 'success', 'info', 'warning', 'error', 'light', 'dark'];
-  
+
   const getIcon = (variant: string) => {
-    switch(variant) {
-      case 'success': return <SuccessIcon />;
-      case 'warning': return <WarningIcon />;
-      case 'error': return <ErrorIcon />;
-      default: return <InfoIcon />;
+    switch (variant) {
+      case 'success':
+        return <SuccessIcon />;
+      case 'warning':
+        return <WarningIcon />;
+      case 'error':
+        return <ErrorIcon />;
+      default:
+        return <InfoIcon />;
     }
   };
-  
+
   return (
     <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
       {variants.map(variant => (
@@ -464,18 +561,14 @@ export const AllVariants: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'Overview of all available callout color variants.'
-      }
-    }
-  }
+        story: 'Overview of all available callout color variants.',
+      },
+    },
+  },
 };
 
 const CalloutWithCustomContentTemplate = () => (
-  <Callout
-    title="Custom Content Example"
-    variant="primary"
-    icon={<InfoIcon />}
-  >
+  <Callout title="Custom Content Example" variant="primary" icon={<InfoIcon />}>
     <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
       <p>Callouts can contain rich content including:</p>
       <ul style={{ margin: 0, paddingLeft: '20px' }}>
@@ -495,8 +588,8 @@ export const CustomContent: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'Callouts can contain rich, custom content beyond simple text.'
-      }
-    }
-  }
-};
+        story: 'Callouts can contain rich, custom content beyond simple text.',
+      },
+    },
+  },
+};

package/src/components/Callout/Callout.tsx

@@ -22,7 +22,7 @@ export const Callout: React.FC<CalloutProps> = ({
     variant,
     oneLine,
     toast,
-    className
+    className,
   });
 
   // Determine appropriate ARIA attributes based on variant
@@ -30,7 +30,7 @@ export const Callout: React.FC<CalloutProps> = ({
     const baseAttributes: Record<string, string> = {
       role: 'region',
     };
-    
+
     // For toast notifications or alerts, use appropriate role and live region
     if (toast) {
       baseAttributes.role = 'alert';
@@ -42,12 +42,16 @@ export const Callout: React.FC<CalloutProps> = ({
       baseAttributes.role = 'status';
       baseAttributes['aria-live'] = 'polite';
     }
-    
+
     return baseAttributes;
   };
 
   return (
-    <div className={generateCalloutClass({ variant, oneLine, toast, className })} {...getAriaAttributes()} {...props}>
+    <div
+      className={generateCalloutClass({ variant, oneLine, toast, className })}
+      {...getAriaAttributes()}
+      {...props}
+    >
       <div className="c-callout__content">
         {icon && <div className="c-callout__icon">{icon}</div>}
         <div className="c-callout__message">
@@ -55,15 +59,11 @@ export const Callout: React.FC<CalloutProps> = ({
           {children && <div className="c-callout__text">{children}</div>}
         </div>
       </div>
-      
+
       {actions && <div className="c-callout__actions">{actions}</div>}
-      
+
       {onClose && (
-        <button 
-          className="c-callout__close-btn" 
-          onClick={handleClose(onClose)}
-          aria-label="Close"
-        >
+        <button className="c-callout__close-btn" onClick={handleClose(onClose)} aria-label="Close">
           <Icon name="X" size="md" />
         </button>
       )}
@@ -75,4 +75,4 @@ Callout.displayName = 'Callout';
 
 export type { CalloutProps };
 
-export default Callout;
+export default Callout;

package/src/components/Callout/index.ts

@@ -1 +1 @@
-export { Callout } from './Callout';
+export { Callout } from './Callout';