@shohojdhara/atomix 0.5.1 → 0.5.2

package/atomix.config.ts

@@ -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
      * 

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);