@shohojdhara/atomix 0.5.8 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shohojdhara/atomix",
-  "version": "0.5.8",
+  "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/02-tools/_tools.background.scss

@@ -1,159 +1,61 @@
-@use 'sass:math';
 @use 'sass:color';
-@use 'sass:map';
-@use 'sass:list';
+@use 'sass:math';
 @use '../01-settings/settings.background' as *;
 @use '../01-settings/settings.colors' as *;
-/* Background utility simplification
- * - Consolidates duplicated glass, mesh, shadow, border, and noise patterns into private helpers.
- * - Replaces magic values with local token aliases backed by existing background settings.
- * - Flattens variant and interaction branching, keeps public mixin signatures intact, and removes old backdrop prefixes.
- */
-
-$_bg-highlight: $white !default;
-$_bg-shadow: $black !default;
-$_bg-filters: ('glass': blur(12px) saturate(1.4), 'solid': blur(8px), 'mesh': blur(16px)) !default;
-$_bg-motion: ('base': 0.3s, 'press': 0.2s, 'easing': cubic-bezier(0.4, 0, 0.2, 1), 'scale': 0.98) !default;
-$_bg-glass: ('angle': 110deg, 'edge-angle': 180deg, 'edge-stop': 30%, 'ambient-stop': 60%, 'ambient-size': ellipse 120% 80% at 50% 120%) !default;
-$_bg-states: ('base': ('shimmer': (0.08, 0.12, 0.08), 'edge': (0.15, 0.05), 'mix': (0.13, 0, -0.1, 0.03), 'ambient': 0.4), 'hover': ('shimmer': (0.1, 0.15, 0.1), 'edge': (0.18, 0.08), 'mix': (0.16, 0, -0.12, 0.04), 'ambient': 0.5), 'active': ('edge': (0.12, 0.05), 'mix': (0.18, 0, -0.09))) !default;
-$_bg-shadow-ambient: ('base': 0 2px 4px rgba($_bg-shadow, 0.05), 'hover': 0 2px 4px rgba($_bg-shadow, 0.08)) !default;
-
-// Changelog: Added a shared color-mix helper so all variants use the same tokenized transparency math.
-@function _bg-mix($color, $weight) { @return color-mix(in srgb, #{$color} #{math.percentage($weight)}, transparent); }
 
-// Changelog: Added compact token readers to remove repeated literal lookups from the public mixin.
-@function _bg-state($state, $group) { @return map.get($_bg-states, $state, $group); }
-@function _bg-surface($state, $transparency) { @return if($state == 'hover', $background-transparency-hover, if($state == 'active', $background-transparency-active, $transparency)); }
-@function _bg-noise-image() { @return url("data:image/svg+xml,%3Csvg viewBox='0 0 #{$background-noise-scale} #{$background-noise-scale}' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' /%3E%3C/svg%3E"); }
-
-// Changelog: Extracted glass background generation so base, hover, and active states reuse one recipe.
-@function _bg-glass($color, $transparency, $state: 'base') {
-  $surface: _bg-surface($state, $transparency);
-  $edge: _bg-state($state, 'edge');
-  $mix: _bg-state($state, 'mix');
-  @if $state == 'active' {
-    @return linear-gradient(map.get($_bg-glass, 'edge-angle'), rgba($_bg-highlight, list.nth($edge, 1)) 0%, rgba($_bg-highlight, list.nth($edge, 2)) 20%, transparent 40%), linear-gradient($background-gradient-angle, _bg-mix($color, $surface + list.nth($mix, 1)) 0%, _bg-mix($color, $surface + list.nth($mix, 2)) 50%, _bg-mix($color, $surface + list.nth($mix, 3)) 100%);
-  }
-  $shimmer: _bg-state($state, 'shimmer');
-  @return linear-gradient(map.get($_bg-glass, 'angle'), transparent 0%, rgba($_bg-highlight, list.nth($shimmer, 1)) 45%, rgba($_bg-highlight, list.nth($shimmer, 2)) 50%, rgba($_bg-highlight, list.nth($shimmer, 3)) 55%, transparent 100%), linear-gradient(map.get($_bg-glass, 'edge-angle'), rgba($_bg-highlight, list.nth($edge, 1)) 0%, rgba($_bg-highlight, list.nth($edge, 2)) 15%, transparent map.get($_bg-glass, 'edge-stop')), linear-gradient($background-gradient-angle, _bg-mix($color, $surface + list.nth($mix, 1)) 0%, _bg-mix($color, $surface + list.nth($mix, 2)) 40%, _bg-mix($color, $surface + list.nth($mix, 3)) 70%, _bg-mix($color, $surface + list.nth($mix, 4)) 100%), radial-gradient(map.get($_bg-glass, 'ambient-size'), _bg-mix($color, $surface * map.get($_bg-states, $state, 'ambient')) 0%, transparent map.get($_bg-glass, 'ambient-stop'));
-}
-
-// Changelog: Extracted shadow composition so base and hover shadows share one loop and corrected opacity scaling.
-@function _bg-shadows($color, $hover: false) {
-  $shadows: (inset 0 1px 0 rgba($_bg-highlight, if($hover, 0.15, 0.1)));
-  $multiplier: if($hover, 1.5, 1);
-  @for $i from 1 through $background-shadow-layers {
-    $blur: $background-shadow-blur-base * $i * $multiplier;
-    $opacity: math.div($background-shadow-intensity, $i) * $multiplier;
-    $shadows: list.append($shadows, 0 $blur ($blur * 2) if($i == 1, $background-shadow-spread, 0) _bg-mix($color, $opacity), comma);
-  }
-  @return list.append($shadows, map.get($_bg-shadow-ambient, if($hover, 'hover', 'base')), comma);
-}
-
-// Changelog: Extracted a shared overlay scaffold so border, noise, and shimmer pseudo-elements stay aligned.
-@mixin _bg-overlay($z) { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: $z; }
-
-// Changelog: Moved the glass border effect into a private helper to remove duplicate pseudo-element declarations.
-@mixin _bg-border() {
-  &::before { @include _bg-overlay(1); padding: $background-border-width; background: linear-gradient($background-gradient-angle, rgba($_bg-highlight, $background-border-opacity * 1.2) 0%, rgba($_bg-highlight, $background-border-opacity * 0.6) 50%, rgba($_bg-highlight, $background-border-opacity * 0.3) 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
-}
-
-// Changelog: Moved the noise overlay into a helper so the SVG asset and sizing are defined once.
-@mixin _bg-noise() {
-  &::after { @include _bg-overlay(2); opacity: $background-noise-opacity; background-image: _bg-noise-image(); background-size: #{$background-noise-scale}px; mix-blend-mode: overlay; }
-}
-
-// Changelog: Moved the shimmer overlay into a helper so the variant branch only selects the effect.
-@mixin _bg-shimmer() {
-  overflow: hidden;
-  &::before { @include _bg-overlay(1); background: linear-gradient(map.get($_bg-glass, 'angle'), transparent 0%, rgba($_bg-highlight, $background-shimmer-intensity) 50%, transparent 100%); transform: translateX(-100%); animation: shimmer $background-shimmer-duration infinite; }
-}
-
-// Changelog: Rebuilt the main utility mixin around private helpers to preserve the API while removing nesting and redundancy.
-/// Dynamic background mixin with glass morphism effects
+/// Simplified dynamic background mixin - only basic background color features
 /// @param {Color} $color - Base color for the background
-/// @param {Number} $transparency [0.65] - Transparency level (0-1)
-/// @param {Boolean} $enable-transparency [true] - Enable transparency effects
-/// @param {Boolean} $enable-gradient [true] - Enable gradient overlay
-/// @param {Boolean} $enable-shadow [true] - Enable shadow layers
-/// @param {Boolean} $enable-border [false] - Enable border gradient
-/// @param {Boolean} $enable-noise [false] - Enable noise texture
-/// @param {String} $variant ['glass'] - Variant: 'glass', 'solid', 'mesh', 'shimmer'
+/// @param {Number} $transparency [$background-transparency] - Transparency level (0-1)
+/// @param {Boolean} $enable-transparency [$background-transparency-enable] - Enable transparency effects
+/// @param {Boolean} $enable-gradient [false] - Enable gradient overlay (ignored in simplified version)
+/// @param {Boolean} $enable-shadow [false] - Enable shadow layers (ignored)
+/// @param {Boolean} $enable-border [false] - Enable border gradient (ignored)
+/// @param {Boolean} $enable-noise [false] - Enable noise texture (ignored)
+/// @param {String} $variant ['solid'] - Variant type (ignored, all treated as solid)
 @mixin dynamic-background(
   $color,
   $transparency: $background-transparency,
   $enable-transparency: $background-transparency-enable,
-  $enable-gradient: $background-enable-gradient-overlay,
-  $enable-shadow: $background-enable-with-shadow,
+  $enable-gradient: false,
+  $enable-shadow: false,
   $enable-border: false,
-  $enable-noise: $background-enable-noise-texture,
-  $variant: 'glass'
+  $enable-noise: false,
+  $variant: 'solid'
 ) {
-  position: relative;
-  isolation: isolate;
-  @if $variant == 'glass' {
-    @if $enable-transparency and $enable-gradient {
-      background: _bg-glass($color, $transparency);
-      backdrop-filter: map.get($_bg-filters, 'glass');
-    } @else if $enable-transparency {
-      background-color: _bg-mix($color, $transparency);
-      backdrop-filter: map.get($_bg-filters, 'solid');
-    } @else {
-      background-color: $color;
-    }
-    @if $enable-border { @include _bg-border(); }
-    @if $enable-noise { @include _bg-noise(); }
-  } @else if $variant == 'solid' {
-    background: if($enable-gradient, linear-gradient($background-gradient-angle, color.adjust($color, $lightness: 5%) 0%, $color 50%, color.adjust($color, $lightness: -5%) 100%), $color);
-  } @else if $variant == 'mesh' {
-    background: radial-gradient(circle at 20% 30%, _bg-mix($color, 0.4) 0%, transparent 50%), radial-gradient(circle at 80% 70%, _bg-mix($color, 0.35) 0%, transparent 50%), radial-gradient(circle at 50% 50%, _bg-mix($color, $transparency) 0%, _bg-mix($color, 0.39) 100%);
-    backdrop-filter: map.get($_bg-filters, 'mesh');
-  } @else if $variant == 'shimmer' {
-    background: _bg-mix($color, 0.75);
-    @include _bg-shimmer();
-  }
-  @if $enable-shadow { box-shadow: _bg-shadows($color); }
-  transition: background map.get($_bg-motion, 'base') map.get($_bg-motion, 'easing'), box-shadow map.get($_bg-motion, 'base') map.get($_bg-motion, 'easing');
-  @if $background-enable-hover-effects {
-    @media (hover: hover) {
-      &:hover {
-        @if $variant == 'glass' and $enable-transparency { background: _bg-glass($color, $transparency, 'hover'); }
-        @if $enable-shadow { box-shadow: _bg-shadows($color, true); }
-      }
-    }
+  // Only support basic background color with optional transparency
+  @if $enable-transparency {
+    background-color: color-mix(in srgb, #{$color} #{math.percentage($transparency)}, transparent);
+  } @else {
+    background-color: $color;
   }
-  &:active {
-    @if $variant == 'glass' and $enable-transparency { background: _bg-glass($color, $transparency, 'active'); }
-  }
-}
-
-// Changelog: Kept the public animation name intact while trimming it to the minimal required transform states.
-@keyframes shimmer {
-  from { transform: translateX(-100%); }
-  to { transform: translateX(200%); }
+  
+  // All other features (gradient, shadow, border, noise, variants) are ignored
+  // This keeps the implementation focused purely on background color features
 }
 
-// Changelog: Preserved the public glass wrapper and routed it through the simplified core mixin.
-/// Simplified dynamic background for quick usage
+/// Glass background - simplified to basic transparent background
 /// @param {Color} $color - Base color
-/// @param {Number} $transparency [0.65] - Transparency level
+/// @param {Number} $transparency [$background-transparency] - Transparency level
 @mixin glass-background($color, $transparency: $background-transparency) {
-  @include dynamic-background($color, $transparency, true, true, true, false, $background-enable-noise-texture, 'glass');
+  @include dynamic-background($color, $transparency, true, false, false, false, false, 'solid');
 }
 
-// Changelog: Preserved the solid wrapper while delegating the implementation to the shared utility mixin.
-/// Solid background with subtle gradient
+/// Solid background - simplified to basic solid background
 /// @param {Color} $color - Base color
-@mixin solid-background($color) { @include dynamic-background($color, $background-transparency, false, true, false, false, false, 'solid'); }
+@mixin solid-background($color) {
+  @include dynamic-background($color, 0, false, false, false, false, false, 'solid');
+}
 
-// Changelog: Preserved the mesh wrapper and kept the same defaults through the refactored core mixin.
-/// Mesh gradient background
+/// Mesh background - simplified to basic transparent background
 /// @param {Color} $color - Base color
-/// @param {Number} $transparency [0.65] - Transparency level
-@mixin mesh-background($color, $transparency: $background-transparency) { @include dynamic-background($color, $transparency, true, true, true, false, false, 'mesh'); }
+/// @param {Number} $transparency [$background-transparency] - Transparency level
+@mixin mesh-background($color, $transparency: $background-transparency) {
+  @include dynamic-background($color, $transparency, true, false, false, false, false, 'solid');
+}
 
-// Changelog: Preserved the shimmer wrapper while delegating effect composition to the shared helpers.
-/// Shimmer effect background
+/// Shimmer background - simplified to basic transparent background
 /// @param {Color} $color - Base color
-/// @param {Number} $transparency [0.65] - Transparency level
-@mixin shimmer-background($color, $transparency: $background-transparency) { @include dynamic-background($color, $transparency, true, true, false, false, false, 'shimmer'); }
+/// @param {Number} $transparency [$background-transparency] - Transparency level
+@mixin shimmer-background($color, $transparency: $background-transparency) {
+  @include dynamic-background($color, $transparency, true, false, false, false, false, 'solid');
+}

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,45 +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;
-        @property --masonry-img-opacity {
-          syntax: '<number>';
-          inherits: false;
-          initial-value: 0;
-        }
-      }
+      opacity: 1;
     }
   }
 
-  // Modern progressive loading indicator
+  // Simple loading indicator
   &--loading-images {
     position: relative;
 
@@ -177,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);
@@ -190,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);
   }
 }