@shohojdhara/atomix 0.1.16 → 0.1.18

package/src/design-tokens/Spacing/Spacing.stories.tsx

@@ -11,21 +11,25 @@ interface SpacingExampleProps {
 
 const SpacingExample = ({ name, size, value, isDark = false }: SpacingExampleProps) => {
   const sizeInPx = parseFloat(value) * 16; // Convert rem to px for display
-  
+
   return (
     <div className="spacing-example u-d-flex u-flex-column u-gap-2">
       <div className="spacing-info u-d-flex u-gap-2 u-justify-content-between u-items-center">
         <span className="spacing-name u-fs-sm u-fw-bold">{name}</span>
         <div className="spacing-details u-d-flex u-gap-2 u-items-center">
-          <code className="spacing-value u-fs-xs u-text-error u-bg-error-subtle u-rounded-sm u-px-2 u-py-1">{value}</code>
+          <code className="spacing-value u-fs-xs u-text-error u-bg-error-subtle u-rounded-sm u-px-2 u-py-1">
+            {value}
+          </code>
           <span className="spacing-px u-fs-xs">{sizeInPx}px</span>
         </div>
       </div>
-      <div 
+      <div
         className="spacing-visual"
-        style={{
-          '--spacing-size': value,
-        } as React.CSSProperties}
+        style={
+          {
+            '--spacing-size': value,
+          } as React.CSSProperties
+        }
       >
         <div className="spacing-visual-inner"></div>
       </div>
@@ -70,25 +74,22 @@ const SpacingPreview = () => {
   ];
 
   return (
-    <div className={`spacing-preview o-container o-container-fluid u-py-2 u-my-4 u-rounded-md ${isDark ? 'dark' : ''}`}>
+    <div
+      className={`spacing-preview o-container o-container-fluid u-py-2 u-my-4 u-rounded-md ${isDark ? 'dark' : ''}`}
+    >
       <h1 className="u-fs-xl u-text-primary u-mb-2">Spacing Scale</h1>
-      
+
       <section className="spacing-section u-bg-primary-subtle u-p-4 u-rounded-md">
         <h2>Spacing Units</h2>
         <p className="section-description u-fs-sm u-text-secondary u-mb-4">
-          The spacing scale is based on a 4px unit system. Each step in the scale represents a multiple of 4px.
-          Use these values for margin, padding, and other spacing-related properties.
+          The spacing scale is based on a 4px unit system. Each step in the scale represents a
+          multiple of 4px. Use these values for margin, padding, and other spacing-related
+          properties.
         </p>
-        
+
         <div className="spacing-grid">
           {spacingScale.map(({ name, value }) => (
-            <SpacingExample
-              key={name}
-              name={name}
-              size={name}
-              value={value}
-              isDark={isDark}
-            />
+            <SpacingExample key={name} name={name} size={name} value={value} isDark={isDark} />
           ))}
         </div>
       </section>

package/src/design-tokens/Typography/Typography.scss

@@ -3,10 +3,14 @@
   padding: 2rem;
   color: var(--atomix-primary-text-emphasis);
   background-color: var(--atomix-primary-bg);
-  transition: background-color 0.3s, color 0.3s;
+  transition:
+    background-color 0.3s,
+    color 0.3s;
   min-height: 100vh;
 
-  h1, h2, h3 {
+  h1,
+  h2,
+  h3 {
     margin-top: 0;
     color: var(--atomix-primary-text-emphasis);
   }
@@ -61,11 +65,23 @@
   }
 
   .font-system {
-    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif;
+    font-family:
+      system-ui,
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      Oxygen-Sans,
+      Ubuntu,
+      Cantarell,
+      'Helvetica Neue',
+      Arial,
+      sans-serif;
   }
 
   .font-mono {
-    font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+    font-family:
+      SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
     font-size: 0.9em;
   }
 }
@@ -132,24 +148,63 @@
   }
 
   // Apply text styles
-  &.display-1 { font-size: 4rem; line-height: 1.2; }
-  &.h1 { font-size: 2.5rem; line-height: 1.2; }
-  &.h2 { font-size: 2rem; line-height: 1.25; }
-  &.h3 { font-size: 1.75rem; line-height: 1.3; }
-  &.h4 { font-size: 1.5rem; line-height: 1.35; }
-  &.h5 { font-size: 1.25rem; line-height: 1.4; }
-  &.h6 { font-size: 1rem; line-height: 1.5; }
-  &.text-lg { font-size: 1.125rem; }
-  &.text-base { font-size: 1rem; }
-  &.text-md { font-size: 0.875rem; }
-  &.text-sm { font-size: 0.875rem; }
-  &.text-xs { font-size: 0.75rem; }
+  &.display-1 {
+    font-size: 4rem;
+    line-height: 1.2;
+  }
+  &.h1 {
+    font-size: 2.5rem;
+    line-height: 1.2;
+  }
+  &.h2 {
+    font-size: 2rem;
+    line-height: 1.25;
+  }
+  &.h3 {
+    font-size: 1.75rem;
+    line-height: 1.3;
+  }
+  &.h4 {
+    font-size: 1.5rem;
+    line-height: 1.35;
+  }
+  &.h5 {
+    font-size: 1.25rem;
+    line-height: 1.4;
+  }
+  &.h6 {
+    font-size: 1rem;
+    line-height: 1.5;
+  }
+  &.text-lg {
+    font-size: 1.125rem;
+  }
+  &.text-base {
+    font-size: 1rem;
+  }
+  &.text-md {
+    font-size: 0.875rem;
+  }
+  &.text-sm {
+    font-size: 0.875rem;
+  }
+  &.text-xs {
+    font-size: 0.75rem;
+  }
 
   // Text styles
-  &.italic { font-style: italic; }
-  &.uppercase { text-transform: uppercase; }
-  &.underline { text-decoration: underline; }
-  &.line-through { text-decoration: line-through; }
+  &.italic {
+    font-style: italic;
+  }
+  &.uppercase {
+    text-transform: uppercase;
+  }
+  &.underline {
+    text-decoration: underline;
+  }
+  &.line-through {
+    text-decoration: line-through;
+  }
 }
 
 // Text Styles Preview
@@ -167,11 +222,19 @@
   .text-styles-preview {
     grid-template-columns: 1fr;
   }
-  
+
   .typography-scale {
-    &.display-1 { font-size: 3rem; }
-    &.h1 { font-size: 2rem; }
-    &.h2 { font-size: 1.75rem; }
-    &.h3 { font-size: 1.5rem; }
+    &.display-1 {
+      font-size: 3rem;
+    }
+    &.h1 {
+      font-size: 2rem;
+    }
+    &.h2 {
+      font-size: 1.75rem;
+    }
+    &.h3 {
+      font-size: 1.5rem;
+    }
   }
 }

package/src/design-tokens/Typography/Typography.stories.tsx

@@ -24,10 +24,7 @@ const TypographyScale = ({
         {weight} • {className || 'base'}
       </span>
     </div>
-    <div 
-      className={`${className}`} 
-      style={{ fontWeight: weight }}
-    >
+    <div className={`${className}`} style={{ fontWeight: weight }}>
       {children}
     </div>
   </div>
@@ -62,36 +59,43 @@ const TypographyPreview = () => {
   ];
 
   const sampleText = 'The quick brown fox jumps over the lazy dog.';
-  const sampleTextLong = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula.';
+  const sampleTextLong =
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula.';
 
   return (
     <div className={`typography-preview`}>
       <h1>Typography</h1>
-      
+
       <section className="typography-section">
         <h2>Font Family</h2>
         <div className="font-family-preview">
           <div className="font-family-item">
             <h3>Helvetica Neue</h3>
             <p className="font-helvetica">
-              ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />
-              abcdefghijklmnopqrstuvwxyz<br />
+              ABCDEFGHIJKLMNOPQRSTUVWXYZ
+              <br />
+              abcdefghijklmnopqrstuvwxyz
+              <br />
               0123456789!@#$%^&*()
             </p>
           </div>
           <div className="font-family-item">
             <h3>System Font Stack</h3>
             <p className="font-system">
-              ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />
-              abcdefghijklmnopqrstuvwxyz<br />
+              ABCDEFGHIJKLMNOPQRSTUVWXYZ
+              <br />
+              abcdefghijklmnopqrstuvwxyz
+              <br />
               0123456789!@#$%^&*()
             </p>
           </div>
           <div className="font-family-item">
             <h3>Monospace</h3>
             <p className="font-mono">
-              ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />
-              abcdefghijklmnopqrstuvwxyz<br />
+              ABCDEFGHIJKLMNOPQRSTUVWXYZ
+              <br />
+              abcdefghijklmnopqrstuvwxyz
+              <br />
               0123456789!@#$%^&*()
             </p>
           </div>
@@ -103,10 +107,10 @@ const TypographyPreview = () => {
         <div className="font-weights-preview">
           {fontWeights.map(({ name, value }) => (
             <div key={value} className="font-weight-item">
-              <span className="font-weight-name">{name} ({value})</span>
-              <p style={{ fontWeight: value }}>
-                {sampleText}
-              </p>
+              <span className="font-weight-name">
+                {name} ({value})
+              </span>
+              <p style={{ fontWeight: value }}>{sampleText}</p>
             </div>
           ))}
         </div>
@@ -116,12 +120,7 @@ const TypographyPreview = () => {
         <h2>Type Scale</h2>
         <div className="type-scale-preview">
           {fontSizes.map(({ name, className }) => (
-            <TypographyScale 
-              key={className} 
-              name={name} 
-              className={className}
-              isDark={isDark}
-            >
+            <TypographyScale key={className} name={name} className={className} isDark={isDark}>
               {sampleText}
             </TypographyScale>
           ))}
@@ -131,9 +130,7 @@ const TypographyPreview = () => {
       <section className="typography-section">
         <h2>Text Styles</h2>
         <div className="text-styles-preview">
-          <TypographyScale name="Normal">
-            {sampleTextLong}
-          </TypographyScale>
+          <TypographyScale name="Normal">{sampleTextLong}</TypographyScale>
           <TypographyScale name="Italic" className="u-fst-italic">
             {sampleTextLong}
           </TypographyScale>

package/src/docs/implementation-guide.mdx

@@ -33,10 +33,10 @@ Atomix is a modern, component-based design system built with scalability and fle
 
 ```bash
 # Using npm
-npm install atomix
+npm install @shohojdhara/atomix
 
 # Using yarn
-yarn add atomix
+yarn add @shohojdhara/atomix
 ```
 
 ### Manual Installation

package/src/htmlComponentsEntry.ts

@@ -27,7 +27,7 @@ import { initFromDataAttributes as initializeDatePickers } from './components/Da
 function initializeButtons(): void {
   // Select all button elements with the c-btn class
   const buttons = document.querySelectorAll<HTMLButtonElement>('.c-btn');
-  
+
   // Initialize each button with default functionality
   buttons.forEach(button => {
     initializeButton(button);
@@ -233,86 +233,86 @@ const Atomix = {
   // Component initializers
   Button: {
     init: initializeButton,
-    initializeAll: initializeButtons
+    initializeAll: initializeButtons,
   },
   Accordion: {
     init: initializeAccordionsWithCustomBehavior,
-    initializeAll: initializeAccordions
+    initializeAll: initializeAccordions,
   },
   Tooltip: {
     init: initializeTooltipsWithCustomBehavior,
-    initializeAll: initializeTooltips
+    initializeAll: initializeTooltips,
   },
   Toggle: {
     init: initializeToggles,
-    initializeAll: initializeToggleComponents
+    initializeAll: initializeToggleComponents,
   },
   Tab: {
     init: initializeTabs,
-    initializeAll: initializeTabComponents
+    initializeAll: initializeTabComponents,
   },
   Steps: {
     init: initializeSteps,
-    initializeAll: initializeStepComponents
+    initializeAll: initializeStepComponents,
   },
   Testimonial: {
     init: initializeTestimonials,
-    initializeAll: initializeTestimonialComponents
+    initializeAll: initializeTestimonialComponents,
   },
   River: {
     init: initializeRivers,
-    initializeAll: initializeRiverComponents
+    initializeAll: initializeRiverComponents,
   },
   Upload: {
     init: initializeUploads,
-    initializeAll: initializeUploadComponents
+    initializeAll: initializeUploadComponents,
   },
   EdgePanel: {
     init: initializeEdgePanelsWithCustomBehavior,
-    initializeAll: initializeEdgePanels
+    initializeAll: initializeEdgePanels,
   },
   Modal: {
     init: initializeModals,
-    initializeAll: initializeModalComponents
+    initializeAll: initializeModalComponents,
   },
   Hero: {
     init: initializeHeroesWithCustomBehavior,
-    initializeAll: initializeHeroComponents
+    initializeAll: initializeHeroComponents,
   },
   Avatar: {
     init: Avatar.initializeAll,
-    initializeAll: Avatar.initializeAll
+    initializeAll: Avatar.initializeAll,
   },
   Breadcrumb: {
     init: Breadcrumb.initializeAll,
-    initializeAll: Breadcrumb.initializeAll
+    initializeAll: Breadcrumb.initializeAll,
   },
   Card: {
     init: Card.initializeAll,
-    initializeAll: Card.initializeAll
+    initializeAll: Card.initializeAll,
   },
   Countdown: {
     init: Countdown.initializeAll,
-    initializeAll: Countdown.initializeAll
+    initializeAll: Countdown.initializeAll,
   },
   Todo: {
     init: Todo.initializeAll,
-    initializeAll: Todo.initializeAll
+    initializeAll: Todo.initializeAll,
   },
   Pagination: {
     init: Pagination.initializeAll,
-    initializeAll: Pagination.initializeAll
+    initializeAll: Pagination.initializeAll,
   },
   DataTable: {
     init: DataTable.initializeAll,
-    initializeAll: DataTable.initializeAll
+    initializeAll: DataTable.initializeAll,
   },
   DatePicker: {
     init: initializeDatePickers,
-    initializeAll: initializeDatePickerComponents
+    initializeAll: initializeDatePickerComponents,
   },
   // Global initialization
-  initializeAll: initializeComponents
+  initializeAll: initializeComponents,
 };
 
-export default Atomix;
+export default Atomix;

package/src/index.ts

@@ -14,7 +14,7 @@ const atomix = {
   composables: require('./lib').composables,
   utils: require('./lib').utils,
   constants: require('./lib').constants,
-  layouts: require('./layouts')
+  layouts: require('./layouts'),
 };
 
 // Default export

package/src/layouts/Grid/Container.tsx

@@ -10,7 +10,7 @@ export interface ContainerProps extends HTMLAttributes<HTMLDivElement> {
    */
   className?: string;
   /**
-   * Container type: 
+   * Container type:
    * - undefined: responsive container with max-width at each breakpoint
    * - 'fluid': full width container
    * - 'sm', 'md', 'lg', 'xl', 'xxl': responsive container with max-width at specified breakpoint
@@ -27,11 +27,11 @@ export interface ContainerProps extends HTMLAttributes<HTMLDivElement> {
  * <Container>
  *   Content with responsive max-width
  * </Container>
- * 
+ *
  * <Container type="fluid">
  *   Full width content
  * </Container>
- * 
+ *
  * <Container type="md">
  *   Content with max-width at md breakpoint
  * </Container>
@@ -40,17 +40,13 @@ export interface ContainerProps extends HTMLAttributes<HTMLDivElement> {
 export const Container = forwardRef<HTMLDivElement, ContainerProps>(
   ({ children, className = '', type, ...props }, ref) => {
     let containerClass = 'o-container';
-    
+
     if (type) {
       containerClass = `o-container-${type}`;
     }
-    
+
     return (
-      <div 
-        ref={ref} 
-        className={`${containerClass} ${className}`.trim()} 
-        {...props}
-      >
+      <div ref={ref} className={`${containerClass} ${className}`.trim()} {...props}>
         {children}
       </div>
     );