@shohojdhara/atomix 0.5.1 → 0.5.2

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

@@ -1,41 +1,116 @@
 @use '../01-settings/settings.config' as config;
 @use '../01-settings/settings.masonry-grid' as masonry;
 @use '../01-settings/settings.breakpoints' as breakpoints;
+@use '../01-settings/settings.design-tokens' as tokens;
 @use '../02-tools/tools.rem' as *;
+@use '../02-tools/tools.media-queries' as mq;
 @use 'sass:math';
 
+// === MODERN CSS GRID FALLBACK IMPLEMENTATION ===
+// Provides graceful degradation when JavaScript is disabled
+.o-masonry-grid--css-fallback {
+  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));
+  
+  // 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;
+      outline-offset: masonry.$masonry-grid-focus-ring-offset;
+      z-index: masonry.$masonry-grid-z-index-focus;
+    }
+  }
+}
+
 .o-masonry-grid {
   $root: &;
 
-  // Base styles
+  // Mobile-first base styles with design system tokens
   position: relative;
   width: 100%;
-  min-height: 100px; // Minimum height to prevent layout shift
+  min-height: masonry.$masonry-grid-min-height-mobile;
 
-  // Animation variant
+  // Enhanced focus management for accessibility
+  &:focus-within {
+    .o-masonry-grid__item: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;
+    }
+  }
+
+  // Animation variant using design system transitions
   &--animate {
     .o-masonry-grid__item {
-      transition:
-        opacity 0.3s ease,
-        top 0.3s ease,
-        left 0.3s ease;
+      transition: masonry.$masonry-grid-item-transition;
+      // Modern CSS custom property for fine-grained animation control
+      @supports (transition-behavior: allow-discrete) {
+        transition-behavior: allow-discrete;
+      }
     }
   }
 
-  // Item styles
+  // Item styles with enhanced accessibility and design system integration
   &__item {
     box-sizing: border-box;
     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);
+    }
+
+    // High contrast mode support
+    @media (prefers-contrast: high) {
+      &:focus {
+        outline-width: calc(#{masonry.$masonry-grid-focus-ring-width} * 2);
+      }
+    }
 
     // Prevent FOUC (Flash of Unstyled Content)
     &: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 for items
+  // Loading states with modern design system colors
   &__item-loading {
+    position: relative;
+    
     &::before {
       content: '';
       position: absolute;
@@ -43,54 +118,117 @@
       left: 0;
       width: 100%;
       height: 100%;
-      background-color: var(--#{config.$prefix}gray-10);
-      z-index: 1;
-      border-radius: 4px;
+      // Design system loading state background
+      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;
     }
 
     img {
       opacity: 0;
+      // CSS @property for smoother opacity transitions
+      @supports (property: opacity) and (animation-timeline: view()) {
+        @property --masonry-img-opacity {
+          syntax: '<number>';
+          inherits: false;
+          initial-value: 0;
+        }
+        opacity: var(--masonry-img-opacity);
+      }
     }
   }
 
-  // Loaded state with fade-in animation
-  &__item-loaded img {
-    animation: masonry-item-fade-in 0.3s ease forwards;
+  // Enhanced loaded state with modern CSS features
+  &__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()) {
+        @property --masonry-img-opacity {
+          syntax: '<number>';
+          inherits: false;
+          initial-value: 0;
+        }
+        opacity: var(--masonry-img-opacity);
+        animation: masonry-item-fade-in-advanced masonry.$masonry-grid-item-animation-duration masonry.$masonry-grid-item-animation-timing forwards;
+      }
+    }
   }
 
-  // Progressive loading indicator
+  // Modern progressive loading indicator
   &--loading-images {
     position: relative;
 
     &::after {
       content: '';
       position: absolute;
-      bottom: 16px;
-      right: 16px;
-      width: 24px;
-      height: 24px;
-      border: 2px solid rgba(0, 0, 0, 0.1);
+      bottom: var(--#{config.$prefix}spacing-16);
+      right: var(--#{config.$prefix}spacing-16);
+      width: masonry.$masonry-grid-loading-indicator-size;
+      height: masonry.$masonry-grid-loading-indicator-size;
+      border: masonry.$masonry-grid-loading-indicator-border-width solid rgba(0, 0, 0, 0.1);
       border-radius: 50%;
-      border-top-color: var(--#{config.$prefix}brand-border-subtle);
+      border-top-color: masonry.$masonry-grid-loading-indicator-color;
       animation: masonry-spinner 0.8s linear infinite;
-      z-index: 1000;
+      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);
+        border-top-color: var(--#{config.$prefix}brand-border-subtle-dark);
+      }
     }
   }
 
-  // Animations
+  // Responsive adjustments for desktop
+  @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);
     }
   }
 }

package/src/styles/06-components/_components.atomix-glass.scss

@@ -1,6 +1,7 @@
 // Component: AtomixGlass
 // =============================================================================
 
+@use '../01-settings/settings.atomix-glass' as *;
 @use '../02-tools/tools.component' as *;
 
 .c-atomix-glass {
@@ -9,7 +10,6 @@
   // Local, sane defaults (kept minimal)
   --_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);
@@ -221,7 +221,7 @@
   &__border-backdrop {
     mix-blend-mode: overlay;
     z-index: var(--_glass-z-border-1);
-    backdrop-filter: var(--_glass-backdrop);
+    backdrop-filter: blur(30px) saturate(140%) brightness(110%);
     box-shadow: var(--atomix-glass-border-shadow);
   }
 
@@ -291,8 +291,8 @@
 
   &__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);

package/src/lib/composables/useBreadcrumb.ts

@@ -1,81 +0,0 @@
-import { BreadcrumbItemType } from '../../components/Breadcrumb/Breadcrumb';
-import { BREADCRUMB } from '../constants/components';
-
-interface BreadcrumbOptions {
-  items: BreadcrumbItemType[];
-  divider?: React.ReactNode;
-  className?: string;
-  'aria-label'?: string;
-}
-
-/**
- * Breadcrumb state and functionality
- * @param initialOptions - Initial breadcrumb options
- * @returns Breadcrumb state and methods
- */
-export function useBreadcrumb(initialOptions?: Partial<BreadcrumbOptions>) {
-  // Default breadcrumb options
-  const defaultOptions: BreadcrumbOptions = {
-    items: [],
-    divider: BREADCRUMB.DEFAULTS.DIVIDER,
-    className: '',
-    'aria-label': 'Breadcrumb',
-    ...initialOptions,
-  };
-
-  /**
-   * Generate breadcrumb class based on options
-   * @param options - Breadcrumb options
-   * @returns Class string
-   */
-  const generateBreadcrumbClass = (options: Partial<BreadcrumbOptions>): string => {
-    const { className = '' } = options;
-
-    return [BREADCRUMB.CLASSES.BASE, className].filter(Boolean).join(' ').trim();
-  };
-
-  /**
-   * Generate breadcrumb item class
-   * @param item - Breadcrumb item
-   * @param isLast - Whether this is the last item
-   * @returns Class string
-   */
-  const generateItemClass = (item: BreadcrumbItemType, isLast: boolean): string => {
-    return [BREADCRUMB.CLASSES.ITEM, item.active || isLast ? BREADCRUMB.CLASSES.ACTIVE : '']
-      .filter(Boolean)
-      .join(' ')
-      .trim();
-  };
-
-  /**
-   * Check if an item should be rendered as a link
-   * @param item - Breadcrumb item
-   * @param isLast - Whether this is the last item
-   * @returns Whether item should be a link
-   */
-  const isItemLink = (item: BreadcrumbItemType, isLast: boolean): boolean => {
-    return Boolean(item.href && !item.active && !isLast);
-  };
-
-  /**
-   * Parse items from a JSON string
-   * @param jsonString - JSON string of items
-   * @returns Array of breadcrumb items
-   */
-  const parseItemsFromJson = (jsonString: string): BreadcrumbItemType[] => {
-    try {
-      return JSON.parse(jsonString) as BreadcrumbItemType[];
-    } catch (error) {
-      console.error('Error parsing breadcrumb items:', error);
-      return [];
-    }
-  };
-
-  return {
-    defaultOptions,
-    generateBreadcrumbClass,
-    generateItemClass,
-    isItemLink,
-    parseItemsFromJson,
-  };
-}

package/src/lib/composables/useChartInteractions.ts

@@ -1,123 +0,0 @@
-import { useCallback, useRef, useState } from 'react';
-
-interface InteractionState {
-  isDragging: boolean;
-  isZooming: boolean;
-  lastPointerPos: { x: number; y: number } | null;
-  zoomLevel: number;
-  panOffset: { x: number; y: number };
-}
-
-export function useChartInteractions() {
-  const [state, setState] = useState<InteractionState>({
-    isDragging: false,
-    isZooming: false,
-    lastPointerPos: null,
-    zoomLevel: 1,
-    panOffset: { x: 0, y: 0 },
-  });
-
-  const wheelTimeoutRef = useRef<NodeJS.Timeout | null>(null);
-  const lastWheelTime = useRef(0);
-
-  // Improved wheel handling for both mouse and trackpad
-  const handleWheel = useCallback((event: WheelEvent) => {
-    event.preventDefault();
-
-    const now = Date.now();
-    const timeDelta = now - lastWheelTime.current;
-    lastWheelTime.current = now;
-
-    // Detect trackpad vs mouse wheel
-    const isTrackpad = Math.abs(event.deltaY) < 50 && timeDelta < 50;
-    const sensitivity = isTrackpad ? 0.01 : 0.1;
-
-    if (wheelTimeoutRef.current) {
-      clearTimeout(wheelTimeoutRef.current);
-    }
-
-    setState(prev => {
-      const rect = (event.target as Element).getBoundingClientRect();
-      const centerX = event.clientX - rect.left;
-      const centerY = event.clientY - rect.top;
-
-      // Zoom calculation
-      const zoomFactor = 1 - event.deltaY * sensitivity;
-      const newZoomLevel = Math.max(0.1, Math.min(10, prev.zoomLevel * zoomFactor));
-
-      // Pan to zoom center
-      const zoomRatio = newZoomLevel / prev.zoomLevel;
-      const newPanOffset = {
-        x: centerX - (centerX - prev.panOffset.x) * zoomRatio,
-        y: centerY - (centerY - prev.panOffset.y) * zoomRatio,
-      };
-
-      return {
-        ...prev,
-        zoomLevel: newZoomLevel,
-        panOffset: newPanOffset,
-        isZooming: true,
-      };
-    });
-
-    wheelTimeoutRef.current = setTimeout(() => {
-      setState(prev => ({ ...prev, isZooming: false }));
-    }, 150);
-  }, []);
-
-  // Unified pointer events for mouse and touch
-  const handlePointerDown = useCallback((event: PointerEvent) => {
-    setState(prev => ({
-      ...prev,
-      isDragging: true,
-      lastPointerPos: { x: event.clientX, y: event.clientY },
-    }));
-    (event.target as Element).setPointerCapture(event.pointerId);
-  }, []);
-
-  const handlePointerMove = useCallback((event: PointerEvent) => {
-    setState(prev => {
-      if (!prev.isDragging || !prev.lastPointerPos) return prev;
-
-      const deltaX = event.clientX - prev.lastPointerPos.x;
-      const deltaY = event.clientY - prev.lastPointerPos.y;
-
-      return {
-        ...prev,
-        panOffset: {
-          x: prev.panOffset.x + deltaX,
-          y: prev.panOffset.y + deltaY,
-        },
-        lastPointerPos: { x: event.clientX, y: event.clientY },
-      };
-    });
-  }, []);
-
-  const handlePointerUp = useCallback((event: PointerEvent) => {
-    setState(prev => ({
-      ...prev,
-      isDragging: false,
-      lastPointerPos: null,
-    }));
-    (event.target as Element).releasePointerCapture(event.pointerId);
-  }, []);
-
-  const resetView = useCallback(() => {
-    setState(prev => ({
-      ...prev,
-      zoomLevel: 1,
-      panOffset: { x: 0, y: 0 },
-    }));
-  }, []);
-
-  return {
-    state,
-    handlers: {
-      onWheel: handleWheel,
-      onPointerDown: handlePointerDown,
-      onPointerMove: handlePointerMove,
-      onPointerUp: handlePointerUp,
-    },
-    resetView,
-  };
-}