@shohojdhara/atomix 0.5.1 → 0.5.4

package/atomix.config.ts

@@ -39,7 +39,7 @@
 
 // For library development, use local import
 // For external developers, use: import { defineConfig } from '@shohojdhara/atomix/config';
-import { defineConfig } from './src/lib/config/index.ts';
+import { defineConfig } from './src/lib/config';
 
 export default defineConfig({
     /**
@@ -109,6 +109,18 @@ export default defineConfig({
         anonymize: true
     },
 
+    /**
+     * CLI component generator defaults (`atomix generate component`).
+     * CLI flags override these values.
+     */
+    // generator: {
+    //     outputPath: './src/components',
+    //     framework: 'react',
+    //     features: { storybook: true, hook: true, styles: true, tests: false },
+    //     hookOutputDir: 'src/lib/composables',
+    //     storybookCssImport: '@shohojdhara/atomix/scss',
+    // },
+
     /**
      * Theme Customization
      * 
@@ -150,11 +162,11 @@ export default defineConfig({
                     // 3: '#bfdbfe',
                     // 4: '#93c5fd',
                     // 5: '#60a5fa',
-                    // 6: '#3b82f6',  // main (default)
+                    // 6: '#3b82f6',  # main (default)
                     // 7: '#2563eb',
                     // 8: '#1d4ed8',
                     // 9: '#1e40af',
-                    // 10: '#1e3a8a', // darkest
+                    // 10: '#1e3a8a', # darkest
                 },
                 // Customize other semantic colors
                 // secondary: { main: '#10b981' },
@@ -171,17 +183,17 @@ export default defineConfig({
              * These map to tokens like 'spacing-4', 'spacing-8', etc.
              */
             // spacing: {
-            //   '1': '0.25rem',   // 4px
-            //   '2': '0.5rem',    // 8px
-            //   '3': '0.75rem',   // 12px
-            //   '4': '1rem',      // 16px
-            //   '5': '1.25rem',   // 20px
-            //   '6': '1.5rem',    // 24px
-            //   '8': '2rem',      // 32px
-            //   '10': '2.5rem',   // 40px
-            //   '12': '3rem',     // 48px
-            //   '16': '4rem',     // 64px
-            //   '20': '5rem',     // 80px
+            //   '1': '0.25rem',   # 4px
+            //   '2': '0.5rem',    # 8px
+            //   '3': '0.75rem',   # 12px
+            //   '4': '1rem',      # 16px
+            //   '5': '1.25rem',   # 20px
+            //   '6': '1.5rem',    # 24px
+            //   '8': '2rem',      # 32px
+            //   '10': '2.5rem',   # 40px
+            //   '12': '3rem',     # 48px
+            //   '16': '4rem',     # 64px
+            //   '20': '5rem',     # 80px
             // },
 
             /**
@@ -190,24 +202,24 @@ export default defineConfig({
              * Customize fonts, sizes, weights, and line heights.
              */
             // typography: {
-            //   // Font families
+            //   # Font families
             //   fontFamilies: {
             //     sans: ['Inter', 'system-ui', 'sans-serif'],
             //     serif: ['Georgia', 'serif'],
             //     mono: ['Fira Code', 'monospace'],
             //   },
-            //   // Font sizes
+            //   # Font sizes
             //   fontSizes: {
-            //     'xs': '0.75rem',   // 12px
-            //     'sm': '0.875rem',  // 14px
-            //     'base': '1rem',    // 16px
-            //     'lg': '1.125rem',  // 18px
-            //     'xl': '1.25rem',   // 20px
-            //     '2xl': '1.5rem',    // 24px
-            //     '3xl': '1.875rem', // 30px
-            //     '4xl': '2.25rem',  // 36px
+            //     'xs': '0.75rem',   # 12px
+            //     'sm': '0.875rem',  # 14px
+            //     'base': '1rem',    # 16px
+            //     'lg': '1.125rem',  # 18px
+            //     'xl': '1.25rem',   # 20px
+            //     '2xl': '1.5rem',    # 24px
+            //     '3xl': '1.875rem', # 30px
+            //     '4xl': '2.25rem',  # 36px
             //   },
-            //   // Font weights
+            //   # Font weights
             //   fontWeights: {
             //     'light': 300,
             //     'normal': 400,
@@ -215,7 +227,7 @@ export default defineConfig({
             //     'semibold': 600,
             //     'bold': 700,
             //   },
-            //   // Line heights
+            //   # Line heights
             //   lineHeights: {
             //     'tight': 1.2,
             //     'normal': 1.5,
@@ -229,11 +241,11 @@ export default defineConfig({
              * Customize border radius values.
              */
             // borderRadius: {
-            //   'sm': '0.25rem',   // 4px
-            //   'md': '0.5rem',     // 8px (default)
-            //   'lg': '0.75rem',   // 12px
-            //   'xl': '1rem',       // 16px
-            //   'full': '9999px',   // Fully rounded
+            //   'sm': '0.25rem',   # 4px
+            //   'md': '0.5rem',     # 8px (default)
+            //   'lg': '0.75rem',   # 12px
+            //   'xl': '1rem',       # 16px
+            //   'full': '9999px',   # Fully rounded
             // },
 
             /**
@@ -292,7 +304,7 @@ export default defineConfig({
         // tokens: {
         //   colors: { /* your full color system */ },
         //   spacing: { /* your full spacing scale */ },
-        //   // ... other token categories
+        //   # ... other token categories
         // },
     },
-});
+});

package/build-tools/webpack-loader.js

@@ -110,11 +110,12 @@ export function getAtomixConfig(context) {
 
     return require(configPath);
   } catch {
+    // Return default config matching AtomixConfig interface
     return {
-      theme: 'default',
-      optimize: true,
-      includeAtoms: false,
-      components: [],
+      prefix: 'atomix',
+      theme: {
+        extend: {}
+      }
     };
   }
 }

package/dist/atomix.css

@@ -1409,22 +1409,85 @@ a, a:hover {
     margin-left: 91.6666666667%;
   }
 }
+.o-masonry-grid--css-fallback {
+  display: grid;
+  grid-gap: var(--atomix-spacing-16);
+  gap: var(--atomix-spacing-16);
+  grid-template-columns: repeat(auto-fit, minmax(var(--atomix-masonry-min-column-width, 250px), 1fr));
+}
+@media (min-width: 576px) {
+  .o-masonry-grid--css-fallback {
+    gap: var(--atomix-spacing-8);
+  }
+}
+@media (min-width: 768px) {
+  .o-masonry-grid--css-fallback {
+    gap: var(--atomix-spacing-16);
+  }
+}
+@media (min-width: 992px) {
+  .o-masonry-grid--css-fallback {
+    gap: var(--atomix-spacing-24);
+  }
+}
+.o-masonry-grid--css-fallback .o-masonry-grid__item {
+  position: static;
+  opacity: 1;
+  visibility: visible;
+  width: 100%;
+}
+.o-masonry-grid--css-fallback .o-masonry-grid__item:focus {
+  outline: var(--atomix-focus-ring-width) solid var(--atomix-focus-ring-color);
+  outline-offset: var(--atomix-focus-ring-offset);
+  z-index: var(--atomix-z-index-5);
+}
 .o-masonry-grid {
   position: relative;
   width: 100%;
-  min-height: 100px;
+  min-height: var(--atomix-spacing-200);
+}
+.o-masonry-grid:focus-within .o-masonry-grid__item:focus {
+  outline: var(--atomix-focus-ring-width) solid var(--atomix-focus-ring-color);
+  outline-offset: var(--atomix-focus-ring-offset);
+  z-index: var(--atomix-z-index-5);
 }
 .o-masonry-grid--animate .o-masonry-grid__item {
-  transition: opacity 0.3s ease, top 0.3s ease, left 0.3s ease;
+  transition: opacity var(--atomix-transition-duration-base) var(--atomix-transition-timing-base), top var(--atomix-transition-duration-base) var(--atomix-transition-timing-base), left var(--atomix-transition-duration-base) var(--atomix-transition-timing-base);
+}
+@supports (transition-behavior: allow-discrete) {
+  .o-masonry-grid--animate .o-masonry-grid__item {
+    transition-behavior: allow-discrete;
+  }
 }
 .o-masonry-grid__item {
   box-sizing: border-box;
   width: 100%;
+  background-color: var(--atomix-body-bg);
+}
+.o-masonry-grid__item:focus {
+  outline: var(--atomix-focus-ring-width) solid var(--atomix-focus-ring-color);
+  outline-offset: var(--atomix-focus-ring-offset);
+  z-index: var(--atomix-z-index-5);
+  transform: scale(1.02);
+  transition: transform var(--atomix-transition-duration-fast) var(--atomix-transition-timing-base);
+}
+@media (prefers-contrast: high) {
+  .o-masonry-grid__item:focus {
+    outline-width: calc(var(--atomix-focus-ring-width) * 2);
+  }
 }
 .o-masonry-grid__item:not([style*="position: absolute"]) {
   opacity: 0;
   visibility: hidden;
 }
+@supports (view-transition-name: masonry-item) {
+  .o-masonry-grid__item:not([style*="position: absolute"]) {
+    view-transition-name: masonry-item;
+  }
+}
+.o-masonry-grid__item-loading {
+  position: relative;
+}
 .o-masonry-grid__item-loading::before {
   content: "";
   position: absolute;
@@ -1432,15 +1495,41 @@ a, a:hover {
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: var(--atomix-gray-10);
-  z-index: 1;
-  border-radius: 4px;
+  background: var(--atomix-gray-10);
+  z-index: var(--atomix-z-index-10);
+  border-radius: var(--atomix-border-radius-sm);
+  animation: masonry-loading-fade-in 0.5s ease-out forwards;
 }
 .o-masonry-grid__item-loading img {
   opacity: 0;
 }
+@supports (property: opacity) and (animation-timeline: view()) {
+  .o-masonry-grid__item-loading img {
+    opacity: var(--masonry-img-opacity);
+  }
+  @property --masonry-img-opacity {
+    .o-masonry-grid__item-loading img {
+      syntax: "<number>";
+      inherits: false;
+      initial-value: 0;
+    }
+  }
+}
 .o-masonry-grid__item-loaded img {
-  animation: masonry-item-fade-in 0.3s ease forwards;
+  animation: masonry-item-fade-in var(--atomix-transition-duration-base) var(--atomix-transition-timing-base) forwards;
+}
+@supports (property: opacity) and (animation-timeline: view()) {
+  .o-masonry-grid__item-loaded img {
+    opacity: var(--masonry-img-opacity);
+    animation: masonry-item-fade-in-advanced var(--atomix-transition-duration-base) var(--atomix-transition-timing-base) forwards;
+  }
+  @property --masonry-img-opacity {
+    .o-masonry-grid__item-loaded img {
+      syntax: "<number>";
+      inherits: false;
+      initial-value: 0;
+    }
+  }
 }
 .o-masonry-grid--loading-images {
   position: relative;
@@ -1448,28 +1537,61 @@ a, a:hover {
 .o-masonry-grid--loading-images::after {
   content: "";
   position: absolute;
-  bottom: 16px;
-  right: 16px;
-  width: 24px;
-  height: 24px;
-  border: 2px solid rgba(0, 0, 0, 0.1);
+  bottom: var(--atomix-spacing-16);
+  right: var(--atomix-spacing-16);
+  width: var(--atomix-spacing-24);
+  height: var(--atomix-spacing-24);
+  border: var(--atomix-border-width-2) solid rgba(0, 0, 0, 0.1);
   border-radius: 50%;
   border-top-color: var(--atomix-brand-border-subtle);
   animation: masonry-spinner 0.8s linear infinite;
-  z-index: 1000;
+  z-index: var(--atomix-z-index-10);
   pointer-events: none;
 }
+@media (prefers-color-scheme: dark) {
+  .o-masonry-grid--loading-images::after {
+    border-color: rgba(255, 255, 255, 0.1);
+    border-top-color: var(--atomix-brand-border-subtle-dark);
+  }
+}
+@media (min-width: 768px) {
+  .o-masonry-grid {
+    min-height: var(--atomix-spacing-100);
+  }
+}
 @keyframes masonry-spinner {
   to {
     transform: rotate(360deg);
   }
 }
+@keyframes masonry-loading-fade-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
 @keyframes masonry-item-fade-in {
   from {
     opacity: 0;
+    transform: translateY(20px);
   }
   to {
     opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes masonry-item-fade-in-advanced {
+  from {
+    --masonry-img-opacity: 0;
+    transform: translateY(20px) scale(0.95);
+  }
+  to {
+    --masonry-img-opacity: 1;
+    transform: translateY(0) scale(1);
   }
 }
 .o-block {
@@ -1898,7 +2020,6 @@ a, a:hover {
   position: relative;
   --_glass-radius: var(--atomix-glass-radius, var(--atomix-radius-md, 0.75rem));
   --_glass-transform: var(--atomix-glass-transform, translateZ(0));
-  --_glass-backdrop: var(--atomix-glass-border-backdrop, blur(14px) saturate(140%));
   --atomix-glass-position: absolute;
   --atomix-glass-border-width: var(--atomix-spacing-0-5, 0.125rem);
   --atomix-glass-top: 0;
@@ -2012,8 +2133,8 @@ a, a:hover {
 .c-atomix-glass__border-backdrop {
   mix-blend-mode: overlay;
   z-index: var(--_glass-z-border-1);
-  -webkit-backdrop-filter: var(--_glass-backdrop);
-          backdrop-filter: var(--_glass-backdrop);
+  -webkit-backdrop-filter: blur(30px) saturate(140%) brightness(110%);
+          backdrop-filter: blur(30px) saturate(140%) brightness(110%);
   box-shadow: var(--atomix-glass-border-shadow);
 }
 .c-atomix-glass__border-1 {
@@ -2075,8 +2196,8 @@ a, a:hover {
 }
 .c-atomix-glass__content {
   position: relative;
-  width: var(--atomix-glass-container-width);
-  height: var(--atomix-glass-container-height);
+  width: var(--atomix-glass-width);
+  height: var(--atomix-glass-height);
   border-radius: var(--_glass-radius);
   z-index: var(--_glass-z-content);
   text-shadow: var(--atomix-glass-container-text-shadow);