@shohojdhara/atomix 0.2.2 → 0.2.4

package/src/lib/composables/useChartToolbar.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { ChartToolbarAction, ChartToolbarGroup } from '../../components/Chart/ChartToolbar';
 import { ChartType } from '../../components/Chart/types';
 
@@ -107,10 +107,16 @@ export function useChartToolbar(
       case 'line':
       case 'area':
       case 'bar':
+      case 'horizontal-bar':
       case 'scatter':
+      case 'bubble':
+      case 'funnel':
+      case 'waterfall':
+      case 'candlestick':
         return {
           ...baseDefaults,
           zoom: true,
+          pan: true,
           reset: true,
         };
 
@@ -132,31 +138,16 @@ export function useChartToolbar(
           grid: false,
         };
 
-      case 'heatmap':
-      case 'treemap':
-        return {
-          ...baseDefaults,
-          zoom: true,
-          pan: true,
-          grid: false,
-        };
-
-      case 'candlestick':
-        return {
-          ...baseDefaults,
-          zoom: true,
-          pan: true,
-          reset: true,
-          grid: true,
-        };
 
       default:
         return baseDefaults;
     }
   }, [chartType]);
 
-  // Merge configurations
-  const finalDefaults = { ...getChartDefaults(), ...defaults };
+  // Merge configurations with memoization
+  const finalDefaults = useMemo(() => {
+    return { ...getChartDefaults(), ...defaults };
+  }, [getChartDefaults, defaults]);
 
   const enhancedHandlers = {
     onRefresh: useCallback(() => {

package/src/lib/composables/useEdgePanel.ts

@@ -16,6 +16,7 @@ export function useEdgePanel(initialProps?: Partial<EdgePanelProps>) {
     backdrop: true,
     closeOnBackdropClick: true,
     closeOnEscape: true,
+    glass: undefined,
     ...initialProps,
   };
 
@@ -97,7 +98,7 @@ export function useEdgePanel(initialProps?: Partial<EdgePanelProps>) {
   /**
    * Open the panel
    */
-  const openPanel = useCallback(() => {
+  const openPanel = useCallback((useFadeAnimation = false) => {
     setIsOpen(true);
     document.body.classList.add('is-edgepanel-open');
 
@@ -106,23 +107,44 @@ export function useEdgePanel(initialProps?: Partial<EdgePanelProps>) {
 
       // Only add animation if not in 'none' mode
       if (mode !== 'none') {
-        // Add animation class first
-        containerRef.current.classList.add('is-animating');
-
-        // Force a reflow before starting the animation
-        void containerRef.current.offsetHeight;
-
-        // Remove animation class after animation completes
-        const container = containerRef.current;
-        setTimeout(() => {
-          if (container) {
-            container.classList.remove('is-animating');
-          }
-        }, EDGE_PANEL.ANIMATION_DURATION);
+        if (useFadeAnimation) {
+          // Add fade animation class
+          containerRef.current.classList.add('is-fade-animating');
+
+          // Force a reflow before starting the animation
+          void containerRef.current.offsetHeight;
+
+          // Remove animation class after animation completes
+          const container = containerRef.current;
+          setTimeout(() => {
+            if (container) {
+              container.classList.remove('is-fade-animating');
+            }
+          }, EDGE_PANEL.ANIMATION_DURATION);
+        } else {
+          // Add transform animation class
+          containerRef.current.classList.add('is-animating');
+
+          // Force a reflow before starting the animation
+          void containerRef.current.offsetHeight;
+
+          // Remove animation class after animation completes
+          const container = containerRef.current;
+          setTimeout(() => {
+            if (container) {
+              container.classList.remove('is-animating');
+            }
+          }, EDGE_PANEL.ANIMATION_DURATION);
+        }
       }
 
-      // Then set transform
-      containerRef.current.style.transform = 'translate(0)';
+      // Set transform or opacity based on animation type
+      if (useFadeAnimation) {
+        containerRef.current.style.opacity = '1';
+        containerRef.current.style.transform = ''; // Remove transform for fade
+      } else {
+        containerRef.current.style.transform = 'translate(0)';
+      }
 
       // If push mode, adjust body padding
       if (defaultProps.mode === 'push') {
@@ -138,27 +160,47 @@ export function useEdgePanel(initialProps?: Partial<EdgePanelProps>) {
   /**
    * Close the panel
    */
-  const closePanel = useCallback(() => {
+  const closePanel = useCallback((useFadeAnimation = false) => {
     if (containerRef.current) {
       const { position, mode } = defaultProps;
 
       // Only add animation if not in 'none' mode
       if (mode !== 'none') {
-        // Add animation class first
-        containerRef.current.classList.add('is-animating-out');
-
-        // Capture container for setTimeout
-        const container = containerRef.current;
-
-        setTimeout(() => {
-          if (container) {
-            container.classList.remove('is-animating-out');
-          }
-        }, EDGE_PANEL.ANIMATION_DURATION);
+        if (useFadeAnimation) {
+          // Add fade out animation class
+          containerRef.current.classList.add('is-fade-animating-out');
+
+          // Capture container for setTimeout
+          const container = containerRef.current;
+
+          setTimeout(() => {
+            if (container) {
+              container.classList.remove('is-fade-animating-out');
+            }
+          }, EDGE_PANEL.ANIMATION_DURATION);
+        } else {
+          // Add transform animation class
+          containerRef.current.classList.add('is-animating-out');
+
+          // Capture container for setTimeout
+          const container = containerRef.current;
+
+          setTimeout(() => {
+            if (container) {
+              container.classList.remove('is-animating-out');
+            }
+          }, EDGE_PANEL.ANIMATION_DURATION);
+        }
       }
 
-      // Then set transform
-      containerRef.current.style.transform = position ? EDGE_PANEL.TRANSFORM_VALUES[position] : '';
+      // Set transform or opacity based on animation type
+      if (useFadeAnimation) {
+        containerRef.current.style.opacity = '0';
+        containerRef.current.style.transform = ''; // Remove transform for fade
+      } else {
+        // Then set transform
+        containerRef.current.style.transform = position ? EDGE_PANEL.TRANSFORM_VALUES[position] : '';
+      }
 
       // Reset body padding if push mode
       if (defaultProps.mode === 'push') {
@@ -232,9 +274,13 @@ export function useEdgePanel(initialProps?: Partial<EdgePanelProps>) {
 
       if (!isOpen && (mode === 'slide' || mode === 'push') && position) {
         containerRef.current.style.transform = EDGE_PANEL.TRANSFORM_VALUES[position];
+        // Set initial opacity for fade animations
+        if (defaultProps.glass) {
+          containerRef.current.style.opacity = '0';
+        }
       }
     }
-  }, [defaultProps.mode, defaultProps.position, isOpen]);
+  }, [defaultProps.mode, defaultProps.position, defaultProps.glass, isOpen]);
 
   /**
    * Sync with prop changes
@@ -242,12 +288,12 @@ export function useEdgePanel(initialProps?: Partial<EdgePanelProps>) {
   useEffect(() => {
     if (defaultProps.isOpen !== undefined && defaultProps.isOpen !== isOpen) {
       if (defaultProps.isOpen) {
-        openPanel();
+        openPanel(!!defaultProps.glass);
       } else {
-        closePanel();
+        closePanel(!!defaultProps.glass);
       }
     }
-  }, [defaultProps.isOpen, closePanel, isOpen, openPanel]);
+  }, [defaultProps.isOpen, closePanel, isOpen, openPanel, defaultProps.glass]);
 
   return {
     isOpen,
@@ -258,4 +304,4 @@ export function useEdgePanel(initialProps?: Partial<EdgePanelProps>) {
     closePanel,
     handleBackdropClick,
   };
-}
+}

package/src/lib/composables/useGlassContainer.ts

@@ -0,0 +1,168 @@
+import { useCallback, useEffect, useId, useRef, useState } from 'react';
+import { GlassContainerProps, MousePosition } from '../types/components';
+
+/**
+ * Custom hook for managing GlassContainer state and interactions
+ */
+export function useGlassContainer(props: GlassContainerProps) {
+  const {
+    glassSize = { width: 270, height: 69 },
+    elasticity = 0.15,
+    mouseContainer,
+    globalMousePos: externalGlobalMousePos,
+    mouseOffset: externalMouseOffset,
+  } = props;
+
+  const filterId = useId();
+  const glassRef = useRef<HTMLDivElement>(null);
+  const [isHovered, setIsHovered] = useState(false);
+  const [isActive, setIsActive] = useState(false);
+  const [currentGlassSize, setCurrentGlassSize] = useState(glassSize);
+  const [internalGlobalMousePos, setInternalGlobalMousePos] = useState<MousePosition>({ x: 0, y: 0 });
+  const [internalMouseOffset, setInternalMouseOffset] = useState<MousePosition>({ x: 0, y: 0 });
+
+  // Use external mouse position if provided, otherwise use internal
+  const globalMousePos = externalGlobalMousePos || internalGlobalMousePos;
+  const mouseOffset = externalMouseOffset || internalMouseOffset;
+
+  // Internal mouse tracking
+  const handleMouseMove = useCallback(
+    (e: MouseEvent) => {
+      const container = mouseContainer?.current || glassRef.current;
+      if (!container) return;
+
+      const rect = container.getBoundingClientRect();
+      const centerX = rect.left + rect.width / 2;
+      const centerY = rect.top + rect.height / 2;
+
+      setInternalMouseOffset({
+        x: ((e.clientX - centerX) / rect.width) * 100,
+        y: ((e.clientY - centerY) / rect.height) * 100,
+      });
+
+      setInternalGlobalMousePos({
+        x: e.clientX,
+        y: e.clientY,
+      });
+    },
+    [mouseContainer]
+  );
+
+  // Set up mouse tracking if no external mouse position is provided
+  useEffect(() => {
+    if (externalGlobalMousePos && externalMouseOffset) return;
+
+    const container = mouseContainer?.current || glassRef.current;
+    if (!container) return;
+
+    container.addEventListener('mousemove', handleMouseMove);
+    return () => container.removeEventListener('mousemove', handleMouseMove);
+  }, [handleMouseMove, mouseContainer, externalGlobalMousePos, externalMouseOffset]);
+
+  // Calculate directional scaling based on mouse position
+  const calculateDirectionalScale = useCallback(() => {
+    if (!globalMousePos.x || !globalMousePos.y || !glassRef.current) {
+      return 'scale(1)';
+    }
+
+    const rect = glassRef.current.getBoundingClientRect();
+    const pillCenterX = rect.left + rect.width / 2;
+    const pillCenterY = rect.top + rect.height / 2;
+    const pillWidth = currentGlassSize.width;
+    const pillHeight = currentGlassSize.height;
+
+    const deltaX = globalMousePos.x - pillCenterX;
+    const deltaY = globalMousePos.y - pillCenterY;
+
+    const edgeDistanceX = Math.max(0, Math.abs(deltaX) - pillWidth / 2);
+    const edgeDistanceY = Math.max(0, Math.abs(deltaY) - pillHeight / 2);
+    const edgeDistance = Math.sqrt(edgeDistanceX * edgeDistanceX + edgeDistanceY * edgeDistanceY);
+
+    const activationZone = 200;
+    if (edgeDistance > activationZone) return 'scale(1)';
+
+    const fadeInFactor = 1 - edgeDistance / activationZone;
+    const centerDistance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+    if (centerDistance === 0) return 'scale(1)';
+
+    const normalizedX = deltaX / centerDistance;
+    const normalizedY = deltaY / centerDistance;
+    const stretchIntensity = Math.min(centerDistance / 300, 1) * elasticity * fadeInFactor;
+
+    const scaleX = 1 + Math.abs(normalizedX) * stretchIntensity * 0.3 - Math.abs(normalizedY) * stretchIntensity * 0.15;
+    const scaleY = 1 + Math.abs(normalizedY) * stretchIntensity * 0.3 - Math.abs(normalizedX) * stretchIntensity * 0.15;
+
+    return `scaleX(${Math.max(0.8, scaleX)}) scaleY(${Math.max(0.8, scaleY)})`;
+  }, [globalMousePos, elasticity, currentGlassSize]);
+
+  // Calculate elastic translation
+  const calculateElasticTranslation = useCallback(() => {
+    if (!glassRef.current) return { x: 0, y: 0 };
+
+    const rect = glassRef.current.getBoundingClientRect();
+    const pillCenterX = rect.left + rect.width / 2;
+    const pillCenterY = rect.top + rect.height / 2;
+    const pillWidth = currentGlassSize.width;
+    const pillHeight = currentGlassSize.height;
+
+    const edgeDistanceX = Math.max(0, Math.abs(globalMousePos.x - pillCenterX) - pillWidth / 2);
+    const edgeDistanceY = Math.max(0, Math.abs(globalMousePos.y - pillCenterY) - pillHeight / 2);
+    const edgeDistance = Math.sqrt(edgeDistanceX * edgeDistanceX + edgeDistanceY * edgeDistanceY);
+
+    const activationZone = 200;
+    const fadeInFactor = edgeDistance > activationZone ? 0 : 1 - edgeDistance / activationZone;
+
+    return {
+      x: (globalMousePos.x - pillCenterX) * elasticity * 0.1 * fadeInFactor,
+      y: (globalMousePos.y - pillCenterY) * elasticity * 0.1 * fadeInFactor,
+    };
+  }, [globalMousePos, elasticity, currentGlassSize]);
+
+  // Update glass size
+  useEffect(() => {
+    const updateGlassSize = () => {
+      if (glassRef.current) {
+        const rect = glassRef.current.getBoundingClientRect();
+        setCurrentGlassSize({ width: rect.width, height: rect.height });
+      }
+    };
+
+    updateGlassSize();
+    window.addEventListener('resize', updateGlassSize);
+    return () => window.removeEventListener('resize', updateGlassSize);
+  }, []);
+
+  const handleMouseEnter = useCallback(() => {
+    setIsHovered(true);
+  }, []);
+
+  const handleMouseLeave = useCallback(() => {
+    setIsHovered(false);
+  }, []);
+
+  const handleMouseDown = useCallback(() => {
+    setIsActive(true);
+  }, []);
+
+  const handleMouseUp = useCallback(() => {
+    setIsActive(false);
+  }, []);
+
+  return {
+    filterId,
+    glassRef,
+    isHovered,
+    isActive,
+    currentGlassSize,
+    globalMousePos,
+    mouseOffset,
+    calculateDirectionalScale,
+    calculateElasticTranslation,
+    handleMouseEnter,
+    handleMouseLeave,
+    handleMouseDown,
+    handleMouseUp,
+  };
+}
+
+export default useGlassContainer;

package/src/lib/composables/useLineChart.ts

@@ -122,6 +122,8 @@ export function useLineChart(datasets: ChartDataset[], options: LineChartOptions
     pointIndex: number;
     x: number;
     y: number;
+    clientX?: number;
+    clientY?: number;
   } | null>(null);
 
   // Calculate moving averages
@@ -251,8 +253,8 @@ export function useLineChart(datasets: ChartDataset[], options: LineChartOptions
 
   // Point hover handlers
   const handlePointHover = useCallback(
-    (datasetIndex: number, pointIndex: number, x: number, y: number) => {
-      setHoveredPoint({ datasetIndex, pointIndex, x, y });
+    (datasetIndex: number, pointIndex: number, x: number, y: number, clientX: number, clientY: number) => {
+      setHoveredPoint({ datasetIndex, pointIndex, x, y, clientX, clientY });
     },
     []
   );

package/src/lib/composables/usePieChart.ts

@@ -245,20 +245,10 @@ export function usePieChart(data: ChartDataPoint[], options: PieChartOptions = {
     requestAnimationFrame(animate);
   }, [options.enableAnimations, options.animationDuration]);
 
-  // Slice interaction handlers
-  const handleSliceHover = useCallback(
-    (index: number, clientX?: number, clientY?: number) => {
-      if (!options.enableHoverEffects) return;
-      setHoveredSlice(index);
-
-      // Store client coordinates for tooltip positioning
-      if (clientX !== undefined && clientY !== undefined && slices[index]) {
-        slices[index].clientX = clientX;
-        slices[index].clientY = clientY;
-      }
-    },
-    [options.enableHoverEffects, slices]
-  );
+  // Slice hover handlers
+  const handleSliceHover = useCallback((index: number, clientX: number, clientY: number) => {
+    setHoveredSlice(index);
+  }, []);
 
   const handleSliceLeave = useCallback(() => {
     setHoveredSlice(null);

package/src/lib/constants/components.ts

@@ -1081,6 +1081,9 @@ export const VIDEO_PLAYER = {
     SETTINGS_OPTION_ACTIVE: 'c-video-player__settings-option--active',
     AMBIENT: 'c-video-player--ambient',
     AMBIENT_CANVAS: 'c-video-player__ambient-canvas',
+    GLASS: 'c-video-player--glass',
+    GLASS_OVERLAY: 'c-video-player__glass-overlay',
+    GLASS_CONTENT: 'c-video-player__glass-content',
   },
   DEFAULTS: {
     CONTROLS_TIMEOUT: 3000,
@@ -1211,6 +1214,7 @@ export const CHART = {
   EXPORT_GROUP_CLASS: 'c-chart__export-group',
   EXPORT_DROPDOWN_CLASS: 'c-chart__export-dropdown',
   EXPORT_OPTION_CLASS: 'c-chart__export-option',
+  SETTINGS_MENU_CLASS: 'c-chart__settings-menu',
   TOOLBAR_GROUP_CLASS: 'c-chart__toolbar-group',
   TOOLBAR_SEPARATOR_CLASS: 'c-chart__toolbar-separator',
   TOOLBAR_LABEL_CLASS: 'c-chart__toolbar-label',
@@ -1432,6 +1436,37 @@ export const BLOCK = {
   },
 };
 
+/**
+ * GlassContainer-specific constants
+ */
+export const GLASS_CONTAINER = {
+  CLASSES: {
+    BASE: 'c-glass-container',
+    GLASS: 'c-glass-container__glass',
+    WARP: 'c-glass-container__warp',
+    CONTENT: 'c-glass-container__content',
+    OVERLAY: 'c-glass-container__overlay',
+    OVERLAY_VISIBLE: 'c-glass-container__overlay--visible',
+    OVERLAY_HIDDEN: 'c-glass-container__overlay--hidden',
+    OVERLAY_BLEND: 'c-glass-container__overlay-blend',
+    BORDER: 'c-glass-container__border',
+    BORDER_OVERLAY: 'c-glass-container__border-overlay',
+    HOVER_EFFECT: 'c-glass-container__hover-effect',
+    ACTIVE_EFFECT: 'c-glass-container__active-effect',
+    INTERACTION_EFFECT: 'c-glass-container__interaction-effect',
+    ACTIVE: 'c-glass-container--active',
+    CLICKABLE: 'c-glass-container--clickable',
+  },
+  DISPLACEMENT_MAPS: {
+    STANDARD:
+      'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjcwIiBoZWlnaHQ9IjY5IiB2aWV3Qm94PSIwIDAgMjcwIDY5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxyYWRpYWxHcmFkaWVudCBpZD0iZ3JhZGllbnQiIGN4PSI1MCUiIGN5PSI1MCUiIHI9IjUwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzgwODA4MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzgwODA4MCIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZGllbnQpIi8+PC9zdmc+',
+    POLAR:
+      'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjcwIiBoZWlnaHQ9IjY5IiB2aWV3Qm94PSIwIDAgMjcwIDY5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxyYWRpYWxHcmFkaWVudCBpZD0icG9sYXIiIGN4PSI1MCUiIGN5PSI1MCUiIHI9IjUwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQwNDA0MCIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjODA4MDgwIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjNDA0MDQwIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwb2xhcikiLz48L3N2Zz4=',
+    PROMINENT:
+      'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjcwIiBoZWlnaHQ9IjY5IiB2aWV3Qm94PSIwIDAgMjcwIDY5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0icHJvbWluZW50IiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjNDA0MDQwIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNjMGMwYzAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0MDQwNDAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI3Byb21pbmVudCkiLz48L3N2Zz4=',
+  },
+};
+
 /**
  * Footer-specific constants
  */
@@ -1516,3 +1551,57 @@ export const FOOTER = {
     BACK_TO_TOP_TEXT: 'Back to Top',
   },
 };
+
+/**
+ * AtomixGlass-specific constants
+ */
+export const ATOMIX_GLASS = {
+  BASE_CLASS: 'c-atomix-glass',
+  WARP_CLASS: 'c-atomix-glass__warp',
+  CONTENT_CLASS: 'c-atomix-glass__content',
+  BORDER_CLASS: 'c-atomix-glass__border',
+  OVER_LIGHT_CLASS: 'c-atomix-glass__over-light',
+  HOVER_EFFECT_CLASS: 'c-atomix-glass__hover-effect',
+  ACTIVE_EFFECT_CLASS: 'c-atomix-glass__active-effect',
+  GLOW_EFFECT_CLASS: 'c-atomix-glass__glow-effect',
+  VARIANT_PREFIX: 'c-atomix-glass--',
+  MODE_PREFIX: 'c-atomix-glass--',
+  CLASSES: {
+    BASE: 'c-atomix-glass',
+    WARP: 'c-atomix-glass__warp',
+    CONTENT: 'c-atomix-glass__content',
+    BORDER: 'c-atomix-glass__border',
+    BORDER_OVERLAY: 'c-atomix-glass__border--overlay',
+    OVER_LIGHT: 'c-atomix-glass__over-light',
+    OVER_LIGHT_ACTIVE: 'c-atomix-glass__over-light--active',
+    OVER_LIGHT_OVERLAY: 'c-atomix-glass__over-light--overlay',
+    OVER_LIGHT_OVERLAY_ACTIVE: 'c-atomix-glass__over-light--overlay-active',
+    HOVER_EFFECT: 'c-atomix-glass__hover-effect',
+    HOVER_EFFECT_ACTIVE: 'c-atomix-glass__hover-effect--active',
+    ACTIVE_EFFECT: 'c-atomix-glass__active-effect',
+    ACTIVE_EFFECT_ACTIVE: 'c-atomix-glass__active-effect--active',
+    GLOW_EFFECT: 'c-atomix-glass__glow-effect',
+    GLOW_EFFECT_HOVER: 'c-atomix-glass__glow-effect--hover',
+    GLOW_EFFECT_ACTIVE: 'c-atomix-glass__glow-effect--active',
+    // Modifiers
+    CLICKABLE: 'c-atomix-glass--clickable',
+    ACTIVE: 'c-atomix-glass--active',
+    // Mode variants
+    STANDARD: 'c-atomix-glass--standard',
+    POLAR: 'c-atomix-glass--polar',
+    PROMINENT: 'c-atomix-glass--prominent',
+    SHADER: 'c-atomix-glass--shader',
+  },
+  DEFAULTS: {
+    DISPLACEMENT_SCALE: 70,
+    BLUR_AMOUNT: 0.0625,
+    SATURATION: 140,
+    ABERRATION_INTENSITY: 2,
+    ELASTICITY: 0.15,
+    CORNER_RADIUS: 999,
+    PADDING: '24px 32px',
+    MODE: 'standard',
+    OVER_LIGHT: false,
+    SIZE: 'md',
+  },
+};