@shohojdhara/atomix 0.5.9 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shohojdhara/atomix",
-  "version": "0.5.9",
+  "version": "0.6.0",
   "description": "Atomix Design System - A modern component library for web applications",
   "type": "module",
   "sideEffects": [

package/src/lib/index.ts

@@ -13,14 +13,60 @@ export const constants: typeof constantsImport = constantsImport;
 export const theme: typeof themeImport = themeImport;
 
 // NEW: Export individual modules for direct imports
-export * from './composables';
+// Selectively export to avoid conflicts between modules
+
+// Export non-conflicting items
 export * from './constants';
 export * from './constants/cssVariables';
 export * from './types';
 export * from './types/partProps';
 export * from './utils';
 export * from './utils/componentUtils';
-export * from './theme';
 export * from './patterns';
 export * from './hooks';
-export * from './config';
+
+// Selectively export from composables (avoiding conflicting items)
+export * from './composables/useAccordion';
+export * from './composables/useBadge';
+export * from './composables/useHero';
+export * from './composables/useRiver';
+export * from './composables/useSpinner';
+export * from './composables/useNavbar';
+export * from './composables/useSideMenu';
+export * from './composables/useEdgePanel';
+export * from './composables/useTodo';
+export * from './composables/useForm';
+export * from './composables/useFormGroup';
+export * from './composables/useAtomixGlass';
+export * from './composables/useInput';
+export * from './composables/useRadio';
+export * from './composables/useSelect';
+export * from './composables/useTextarea';
+export * from './composables/useResponsiveGlass';
+export * from './composables/useResponsiveGlass.presets';
+export * from './composables/useChartData';
+export * from './composables/useChartScale';
+export * from './composables/useChartInteraction';
+export * from './composables/useLineChart';
+export * from './composables/useBarChart';
+export * from './composables/usePieChart';
+export * from './composables/useBlock';
+
+// Skip usePerformanceMonitor from composables to avoid conflict with theme version
+
+// Selectively export from theme (including the conflicting items)
+export * from './theme';
+
+// Selectively export from config (excluding ValidationResult to avoid conflict)
+export { validateConfiguration, printConfigReport, loadConfig, validateConfig, loadAtomixConfig, resolveConfigPath } from './config';
+export { defineConfig, type AtomixConfig, type ThemeTokens, type ThemeDefinition, 
+         type CSSThemeDefinition, type JSThemeDefinition, type ColorScale, 
+         type PaletteColorOptions, type InteractiveEffectsConfig, 
+         type OptimizationConfig, type VisualPolishConfig, type BuildConfig, 
+         type RuntimeConfig, type IntegrationConfig, type PluginConfig, 
+         type TokenProviderConfig, type TokenEngineConfig, type GeneratorConfig, 
+         type DesignTokenCategory, type DesignTokenValue } from './config';
+
+// Explicitly re-export ValidationResult from config to avoid conflict with theme
+export type { ValidationResult } from './config/validator';
+// But we keep the theme's PerformanceMetrics and usePerformanceMonitor to resolve conflicts

package/src/styles/05-objects/_objects.masonry-grid.scss

@@ -12,28 +12,31 @@
   display: grid;
   gap: masonry.$masonry-grid-gap;
   // Use auto-fit with minmax for responsive columns
-  grid-template-columns: repeat(auto-fit, minmax(var(--atomix-masonry-min-column-width, 250px), 1fr));
-  
+  grid-template-columns: repeat(
+    auto-fit,
+    minmax(var(--atomix-masonry-min-column-width, 250px), 1fr)
+  );
+
   // Mobile-first responsive adjustments
   @include mq.media-up('sm') {
     gap: masonry.$masonry-grid-gap-sm;
   }
-  
+
   @include mq.media-up('md') {
     gap: masonry.$masonry-grid-gap;
   }
-  
+
   @include mq.media-up('lg') {
     gap: masonry.$masonry-grid-gap-lg;
   }
-  
+
   .o-masonry-grid__item {
     // CSS Grid items don't need position: absolute
     position: static;
     opacity: 1;
     visibility: visible;
     width: 100%;
-    
+
     // Enhanced accessibility for CSS Grid
     &:focus {
       outline: masonry.$masonry-grid-focus-ring-width solid masonry.$masonry-grid-focus-ring-color;
@@ -64,10 +67,6 @@
   &--animate {
     .o-masonry-grid__item {
       transition: masonry.$masonry-grid-item-transition;
-      // Modern CSS custom property for fine-grained animation control
-      @supports (transition-behavior: allow-discrete) {
-        transition-behavior: allow-discrete;
-      }
     }
   }
 
@@ -77,16 +76,17 @@
     width: 100%;
     // Design system color tokens for background
     background-color: var(--#{config.$prefix}body-bg);
-    
+
     // Enhanced focus states with design system tokens
     &:focus {
       outline: masonry.$masonry-grid-focus-ring-width solid masonry.$masonry-grid-focus-ring-color;
       outline-offset: masonry.$masonry-grid-focus-ring-offset;
       z-index: masonry.$masonry-grid-z-index-focus;
-      
+
       // Subtle scale effect for better visual feedback
       transform: scale(1.02);
-      transition: transform var(--#{config.$prefix}transition-duration-fast) var(--#{config.$prefix}transition-timing-base);
+      transition: transform var(--#{config.$prefix}transition-duration-fast)
+        var(--#{config.$prefix}transition-timing-base);
     }
 
     // High contrast mode support
@@ -100,17 +100,13 @@
     &:not([style*='position: absolute']) {
       opacity: 0;
       visibility: hidden;
-      // Use CSS Custom Property for progressive enhancement
-      @supports (view-transition-name: masonry-item) {
-        view-transition-name: masonry-item;
-      }
     }
   }
 
   // Loading states with modern design system colors
   &__item-loading {
     position: relative;
-    
+
     &::before {
       content: '';
       position: absolute;
@@ -122,40 +118,24 @@
       background: var(--#{config.$prefix}gray-10);
       z-index: masonry.$masonry-grid-z-index-loading;
       border-radius: var(--#{config.$prefix}border-radius-sm);
-      
-      // Smooth fade-in animation
-      animation: masonry-loading-fade-in 0.5s ease-out forwards;
+
+      // Simple fade-in
+      opacity: 0;
     }
 
     img {
       opacity: 0;
-      // CSS @property for smoother opacity transitions
-      @supports (property: opacity) and (animation-timeline: view()) {
-        opacity: var(--masonry-img-opacity);
-        @property --masonry-img-opacity {
-          syntax: '<number>';
-          inherits: false;
-          initial-value: 0;
-        }
-      }
     }
   }
 
-  // Enhanced loaded state with modern CSS features
+  // Loaded state
   &__item-loaded {
     img {
-      // Modern CSS animation with design system tokens
-      animation: masonry-item-fade-in masonry.$masonry-grid-item-animation-duration masonry.$masonry-grid-item-animation-timing forwards;
-      
-      // CSS @property for precise opacity control
-      @supports (property: opacity) and (animation-timeline: view()) {
-        opacity: var(--masonry-img-opacity);
-        animation: masonry-item-fade-in-advanced masonry.$masonry-grid-item-animation-duration masonry.$masonry-grid-item-animation-timing forwards;
-      }
+      opacity: 1;
     }
   }
 
-  // Modern progressive loading indicator
+  // Simple loading indicator
   &--loading-images {
     position: relative;
 
@@ -172,7 +152,7 @@
       animation: masonry-spinner 0.8s linear infinite;
       z-index: masonry.$masonry-grid-z-index-loading;
       pointer-events: none;
-      
+
       // Dark mode support
       @media (prefers-color-scheme: dark) {
         border-color: rgba(255, 255, 255, 0.1);
@@ -185,45 +165,11 @@
   @include mq.media-up('md') {
     min-height: masonry.$masonry-grid-min-height-desktop;
   }
+}
 
-  // Modern animations with CSS custom properties
-  @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);
-    }
-  }
-
-  // Advanced animation with CSS @property for smooth transitions
-  @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);
-    }
+// Simple spinner animation
+@keyframes masonry-spinner {
+  to {
+    transform: rotate(360deg);
   }
 }