aura-glass 2.0.39 → 2.1.0

package/dist/esm/components/charts/styles/TooltipStyles.js

@@ -0,0 +1,310 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cn } from '../../../lib/utilsComprehensive.js';
+import styles from './TooltipStyles.module.css.js';
+
+const getSizeMultiplier = size => {
+  switch (size) {
+    case 'small':
+      return 0.8;
+    case 'large':
+      return 1.2;
+    default:
+      return 1;
+  }
+};
+const getThemeBackground = theme => {
+  switch (theme) {
+    case 'glass':
+      return 'color-mix(in srgb, var(--aura-color-glass-overlay) 92%, rgba(6, 12, 24, 0.82))';
+    case 'dark':
+      return '#2a2a2a';
+    default:
+      return 'var(--aura-color-global-surface)';
+  }
+};
+const getThemeBorder = theme => theme === 'glass' ? '1px solid color-mix(in srgb, var(--aura-color-global-border-soft) 70%, transparent)' : '1px solid color-mix(in srgb, var(--aura-color-global-border-strong) 65%, transparent)';
+const getThemeShadow = theme => theme === 'glass' ? '0 20px 48px rgba(15, 23, 42, 0.32)' : '0 12px 32px rgba(15, 23, 42, 0.22)';
+const GlassTooltipContainer = ({
+  $theme = 'glass',
+  $size = 'medium',
+  $position,
+  $animated = true,
+  className,
+  style,
+  children,
+  ...rest
+}) => {
+  const multiplier = getSizeMultiplier($size);
+  const transform = $position ? `translate(${$position.x}px, ${$position.y}px)` : 'translate(-50%, -100%)';
+  return jsxs("div", {
+    className: cn(styles.tooltip, className),
+    style: {
+      fontSize: `${12 * multiplier}px`,
+      padding: `${8 * multiplier}px ${12 * multiplier}px`,
+      borderRadius: `${8 * multiplier}px`,
+      minWidth: `${120 * multiplier}px`,
+      maxWidth: `${280 * multiplier}px`,
+      background: getThemeBackground($theme),
+      border: getThemeBorder($theme),
+      boxShadow: getThemeShadow($theme),
+      transform,
+      transition: $animated ? undefined : 'none',
+      ...style
+    },
+    ...rest,
+    children: [children, jsx("span", {
+      className: styles.tooltipArrow,
+      style: {
+        borderTopColor: getThemeBackground($theme)
+      }
+    })]
+  });
+};
+const TooltipHeader = ({
+  $theme = 'glass',
+  $size = 'medium',
+  className,
+  style,
+  ...props
+}) => {
+  const multiplier = getSizeMultiplier($size);
+  return jsx("div", {
+    className: cn(styles.tooltipHeader, className),
+    style: {
+      fontSize: `${14 * multiplier}px`,
+      color: $theme === 'light' ? '#1a1a1a' : 'var(--aura-color-global-text-inverse)',
+      ...style
+    },
+    ...props
+  });
+};
+const TooltipBody = ({
+  $size = 'medium',
+  className,
+  style,
+  ...props
+}) => {
+  const multiplier = getSizeMultiplier($size);
+  return jsx("div", {
+    className: cn(styles.tooltipBody, className),
+    style: {
+      gap: `${4 * multiplier}px`,
+      ...style
+    },
+    ...props
+  });
+};
+const TooltipItem = ({
+  className,
+  ...props
+}) => jsx("div", {
+  className: cn(styles.tooltipItem, className),
+  ...props
+});
+const TooltipLabel = ({
+  $theme = 'glass',
+  $size = 'medium',
+  className,
+  style,
+  ...props
+}) => {
+  const multiplier = getSizeMultiplier($size);
+  return jsx("span", {
+    className: cn(styles.tooltipLabel, className),
+    style: {
+      fontSize: `${11 * multiplier}px`,
+      color: $theme === 'light' ? '#666666' : '#cccccc',
+      ...style
+    },
+    ...props
+  });
+};
+const TooltipValue = ({
+  $theme = 'glass',
+  $size = 'medium',
+  $color,
+  className,
+  style,
+  ...props
+}) => {
+  const multiplier = getSizeMultiplier($size);
+  return jsx("span", {
+    className: cn(styles.tooltipValue, className),
+    style: {
+      fontSize: `${13 * multiplier}px`,
+      color: $color || ($theme === 'light' ? '#1a1a1a' : 'var(--aura-color-global-text-inverse)'),
+      ...style
+    },
+    ...props
+  });
+};
+const TooltipSeparator = ({
+  $theme = 'glass',
+  $size = 'medium',
+  className,
+  style,
+  ...props
+}) => {
+  const multiplier = getSizeMultiplier($size);
+  const background = $theme === 'glass' ? 'color-mix(in srgb, var(--aura-color-global-border-soft) 65%, transparent)' : $theme === 'dark' ? '#555555' : '#e0e0e0';
+  return jsx("div", {
+    className: cn(styles.tooltipSeparator, className),
+    style: {
+      background,
+      margin: `${6 * multiplier}px 0`,
+      ...style
+    },
+    ...props
+  });
+};
+const TooltipFooter = ({
+  $theme = 'glass',
+  $size = 'medium',
+  className,
+  style,
+  ...props
+}) => {
+  const multiplier = getSizeMultiplier($size);
+  return jsx("div", {
+    className: cn(styles.tooltipFooter, className),
+    style: {
+      fontSize: `${10 * multiplier}px`,
+      color: $theme === 'light' ? '#666666' : '#cccccc',
+      ...style
+    },
+    ...props
+  });
+};
+const createTooltipStyles = (theme = 'glass', size = 'medium') => {
+  const sizeMultipliers = {
+    small: 0.8,
+    medium: 1,
+    large: 1.2
+  };
+  const multiplier = sizeMultipliers[size];
+  const baseStyles = {
+    container: {
+      position: 'absolute',
+      zIndex: 1000,
+      pointerEvents: 'none',
+      fontFamily: 'system-ui, -apple-system, sans-serif',
+      fontSize: `${12 * multiplier}px`,
+      borderRadius: `${8 * multiplier}px`,
+      boxShadow: theme === 'glass' ? '0 8px 32px rgba(var(--glass-color-black) / var(--glass-opacity-30)), 0 0 0 1px rgba(var(--glass-color-white) / var(--glass-opacity-20))' : '0 4px 12px rgba(var(--glass-color-black) / var(--glass-opacity-15))',
+      // Use createGlassStyle() instead,
+      background: theme === 'glass' ? 'rgba(0, 0, 0, 0.85)' : theme === 'dark' ? '#2a2a2a' : 'var(--glass-white)',
+      border: theme === 'glass' ? '1px solid rgba(var(--glass-color-white) / var(--glass-opacity-20))' : '1px solid #e0e0e0',
+      color: theme === 'dark' ? 'var(--glass-white)' : '#1a1a1a',
+      padding: `${8 * multiplier}px ${12 * multiplier}px`,
+      minWidth: `${120 * multiplier}px`,
+      maxWidth: `${280 * multiplier}px`,
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      transform: 'translate(-50%, -100%)',
+      marginTop: `-${8 * multiplier}px`
+    },
+    header: {
+      fontSize: `${14 * multiplier}px`,
+      fontWeight: 600,
+      marginBottom: `${4 * multiplier}px`,
+      color: theme === 'glass' ? 'var(--glass-white)' : theme === 'dark' ? 'var(--glass-white)' : '#1a1a1a',
+      borderBottom: theme === 'glass' ? '1px solid rgba(var(--glass-color-white) / var(--glass-opacity-20))' : '1px solid #e0e0e0',
+      paddingBottom: `${4 * multiplier}px`
+    },
+    body: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: `${4 * multiplier}px`
+    },
+    footer: {
+      marginTop: `${8 * multiplier}px`,
+      paddingTop: `${4 * multiplier}px`,
+      borderTop: theme === 'glass' ? '1px solid rgba(var(--glass-color-white) / var(--glass-opacity-20))' : '1px solid #e0e0e0',
+      fontSize: `${10 * multiplier}px`,
+      color: theme === 'dark' ? '#cccccc' : '#666666',
+      textAlign: 'center'
+    },
+    label: {
+      fontSize: `${11 * multiplier}px`,
+      color: theme === 'dark' ? '#cccccc' : '#666666',
+      marginBottom: `${2 * multiplier}px`,
+      fontWeight: 500
+    },
+    value: {
+      fontSize: `${13 * multiplier}px`,
+      fontWeight: 600,
+      color: theme === 'glass' ? 'var(--glass-white)' : theme === 'dark' ? 'var(--glass-white)' : '#1a1a1a'
+    },
+    separator: {
+      height: '1px',
+      background: theme === 'glass' ? 'rgba(var(--glass-color-white) / var(--glass-opacity-20))' : theme === 'dark' ? '#555555' : '#e0e0e0',
+      margin: `${6 * multiplier}px 0`
+    },
+    arrow: {
+      position: 'absolute',
+      width: 0,
+      height: 0,
+      borderLeft: `${6 * multiplier}px solid transparent`,
+      borderRight: `${6 * multiplier}px solid transparent`,
+      borderTop: `${6 * multiplier}px solid`,
+      borderTopColor: theme === 'glass' ? 'rgba(0, 0, 0, 0.85)' : theme === 'dark' ? '#2a2a2a' : 'var(--glass-white)',
+      bottom: `-${6 * multiplier}px`,
+      left: '50%',
+      transform: 'translateX(-50%)'
+    }
+  };
+  return baseStyles;
+};
+const calculateTooltipPosition = (mouseX, mouseY, tooltipWidth, tooltipHeight, containerRect, offset = 10) => {
+  const centerX = mouseX;
+  const centerY = mouseY;
+  let x = centerX;
+  let y = centerY - tooltipHeight - offset;
+  let placement = 'top';
+  // Check if tooltip fits above
+  if (y < containerRect.top) {
+    y = centerY + offset;
+    placement = 'bottom';
+  }
+  // Check horizontal bounds
+  if (x - tooltipWidth / 2 < containerRect.left) {
+    x = containerRect.left + tooltipWidth / 2;
+  } else if (x + tooltipWidth / 2 > containerRect.right) {
+    x = containerRect.right - tooltipWidth / 2;
+  }
+  return {
+    x,
+    y,
+    placement
+  };
+};
+const formatTooltipValue = (value, format = 'number', options) => {
+  if (typeof value === 'string') return value;
+  switch (format) {
+    case 'currency':
+      return new Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency: 'USD',
+        ...options
+      }).format(value);
+    case 'percentage':
+      return new Intl.NumberFormat('en-US', {
+        style: 'percent',
+        minimumFractionDigits: 1,
+        maximumFractionDigits: 2,
+        ...options
+      }).format(value / 100);
+    case 'number':
+      return new Intl.NumberFormat('en-US', {
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 2,
+        ...options
+      }).format(value);
+    default:
+      return String(value);
+  }
+};
+
+export { GlassTooltipContainer, TooltipBody, TooltipFooter, TooltipHeader, TooltipItem, TooltipLabel, TooltipSeparator, TooltipValue, calculateTooltipPosition, createTooltipStyles, formatTooltipValue };
+//# sourceMappingURL=TooltipStyles.js.map

package/dist/esm/components/charts/styles/TooltipStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipStyles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/components/charts/styles/TooltipStyles.module.css.js

@@ -0,0 +1,4 @@
+var styles = {"tooltip":"TooltipStyles-module_tooltip__78NYw","tooltipArrow":"TooltipStyles-module_tooltipArrow__b-Bbh","tooltipHeader":"TooltipStyles-module_tooltipHeader__SP-SR","tooltipBody":"TooltipStyles-module_tooltipBody__PS77G","tooltipItem":"TooltipStyles-module_tooltipItem__MGW9u","tooltipLabel":"TooltipStyles-module_tooltipLabel__p089t","tooltipValue":"TooltipStyles-module_tooltipValue__N9nww","tooltipSeparator":"TooltipStyles-module_tooltipSeparator__9hPzo","tooltipFooter":"TooltipStyles-module_tooltipFooter__DnHqC"};
+
+export { styles as default };
+//# sourceMappingURL=TooltipStyles.module.css.js.map

package/dist/esm/components/charts/styles/TooltipStyles.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipStyles.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/esm/components/charts/utils/ChartAnimationUtils.js

@@ -0,0 +1,326 @@
+// Easing functions
+const easingFunctions = {
+  linear: t => t,
+  easeInQuad: t => t * t,
+  easeOutQuad: t => t * (2 - t),
+  easeInOutQuad: t => t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t,
+  easeInCubic: t => t * t * t,
+  easeOutCubic: t => --t * t * t + 1,
+  easeInOutCubic: t => t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1,
+  easeInQuart: t => t * t * t * t,
+  easeOutQuart: t => 1 - --t * t * t * t,
+  easeInOutQuart: t => t < 0.5 ? 8 * t * t * t * t : 1 - 8 * --t * t * t * t,
+  easeInSine: t => 1 - Math.cos(t * Math.PI / 2),
+  easeOutSine: t => Math.sin(t * Math.PI / 2),
+  easeInOutSine: t => -(Math.cos(Math.PI * t) - 1) / 2,
+  easeInExpo: t => t === 0 ? 0 : Math.pow(2, 10 * t - 10),
+  easeOutExpo: t => t === 1 ? 1 : 1 - Math.pow(2, -10 * t),
+  easeInOutExpo: t => {
+    if (t === 0) return 0;
+    if (t === 1) return 1;
+    return t < 0.5 ? Math.pow(2, 20 * t - 10) / 2 : (2 - Math.pow(2, -20 * t + 10)) / 2;
+  },
+  easeInCirc: t => 1 - Math.sqrt(1 - Math.pow(t, 2)),
+  easeOutCirc: t => Math.sqrt(1 - Math.pow(t - 1, 2)),
+  easeInOutCirc: t => {
+    return t < 0.5 ? (1 - Math.sqrt(1 - Math.pow(2 * t, 2))) / 2 : (Math.sqrt(1 - Math.pow(-2 * t + 2, 2)) + 1) / 2;
+  },
+  easeInBack: t => {
+    const c1 = 1.70158;
+    const c3 = c1 + 1;
+    return c3 * t * t * t - c1 * t * t;
+  },
+  easeOutBack: t => {
+    const c1 = 1.70158;
+    const c3 = c1 + 1;
+    return 1 + c3 * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2);
+  },
+  easeInOutBack: t => {
+    const c1 = 1.70158;
+    const c2 = c1 * 1.525;
+    return t < 0.5 ? Math.pow(2 * t, 2) * ((c2 + 1) * 2 * t - c2) / 2 : (Math.pow(2 * t - 2, 2) * ((c2 + 1) * (t * 2 - 2) + c2) + 2) / 2;
+  },
+  easeOutBounce: t => {
+    const n1 = 7.5625;
+    const d1 = 2.75;
+    if (t < 1 / d1) {
+      return n1 * t * t;
+    } else if (t < 2 / d1) {
+      return n1 * (t -= 1.5 / d1) * t + 0.75;
+    } else if (t < 2.5 / d1) {
+      return n1 * (t -= 2.25 / d1) * t + 0.9375;
+    } else {
+      return n1 * (t -= 2.625 / d1) * t + 0.984375;
+    }
+  },
+  easeInBounce: t => 1 - easingFunctions.easeOutBounce(1 - t),
+  easeInOutBounce: t => t < 0.5 ? (1 - easingFunctions.easeOutBounce(1 - 2 * t)) / 2 : (1 + easingFunctions.easeOutBounce(2 * t - 1)) / 2
+};
+// Animation utilities
+class ChartAnimationUtils {
+  static createKeyframeSequence(from, to, steps = 10, easing = 'easeOutQuad') {
+    const keyframes = [];
+    const easeFn = easingFunctions[easing];
+    for (let i = 0; i <= steps; i++) {
+      const progress = i / steps;
+      const easedProgress = easeFn(progress);
+      const value = from + (to - from) * easedProgress;
+      keyframes.push({
+        progress,
+        value,
+        easing: easeFn
+      });
+    }
+    return keyframes;
+  }
+  static interpolateValue(from, to, progress, easing = 'linear') {
+    const easeFn = easingFunctions[easing];
+    const easedProgress = easeFn(progress);
+    return from + (to - from) * easedProgress;
+  }
+  static animateDataPoints(dataPoints, targetValues, progress, easing = 'easeOutQuad') {
+    return dataPoints.map((point, index) => {
+      const targetValue = targetValues[index];
+      if (targetValue === undefined || typeof point.y !== 'number') {
+        return point;
+      }
+      const animatedValue = this.interpolateValue(point.y, targetValue, progress, easing);
+      return {
+        ...point,
+        y: animatedValue
+      };
+    });
+  }
+  static animateSeries(series, targetSeries, progress, easing = 'easeOutQuad', staggerDelay = 0) {
+    return series.map((seriesItem, seriesIndex) => {
+      const targetSeriesItem = targetSeries[seriesIndex];
+      if (!targetSeriesItem) return seriesItem;
+      const seriesProgress = Math.max(0, Math.min(1, progress - staggerDelay * seriesIndex / 1000));
+      const animatedData = this.animateDataPoints(seriesItem.data, targetSeriesItem.data.map(p => typeof p.y === 'number' ? p.y : 0), seriesProgress, easing);
+      return {
+        ...seriesItem,
+        data: animatedData
+      };
+    });
+  }
+  static createSequence(keyframes, duration, delay = 0, repeat = false, yoyo = false) {
+    return {
+      keyframes,
+      duration,
+      delay,
+      repeat,
+      yoyo
+    };
+  }
+  static getValueAtProgress(sequence, progress) {
+    if (sequence.keyframes.length === 0) return 0;
+    if (sequence.keyframes.length === 1) return sequence.keyframes[0].value;
+    // Find the appropriate keyframe pair
+    for (let i = 0; i < sequence.keyframes.length - 1; i++) {
+      const current = sequence.keyframes[i];
+      const next = sequence.keyframes[i + 1];
+      if (progress >= current.progress && progress <= next.progress) {
+        const localProgress = (progress - current.progress) / (next.progress - current.progress);
+        const easedProgress = next.easing ? next.easing(localProgress) : localProgress;
+        return current.value + (next.value - current.value) * easedProgress;
+      }
+    }
+    // Return last keyframe value if progress is beyond the sequence
+    return sequence.keyframes[sequence.keyframes.length - 1].value;
+  }
+  static createSpringAnimation(from, to, config = {}) {
+    const {
+      stiffness = 100,
+      damping = 10,
+      mass = 1
+    } = config;
+    // Generate keyframes based on spring physics
+    const keyframes = [];
+    const steps = 60; // 60fps for smooth animation
+    const dt = 1 / steps;
+    let position = from;
+    let velocity = 0;
+    let time = 0;
+    const maxTime = 2; // Maximum animation time in seconds
+    while (time < maxTime) {
+      const displacement = to - position;
+      const springForce = displacement * stiffness;
+      const dampingForce = -velocity * damping;
+      const acceleration = (springForce + dampingForce) / mass;
+      velocity += acceleration * dt;
+      position += velocity * dt;
+      const progress = Math.min(time / maxTime, 1);
+      keyframes.push({
+        progress,
+        value: position,
+        easing: easingFunctions.easeOutQuad
+      });
+      // Stop if we're close enough to target and velocity is low
+      if (Math.abs(displacement) < 0.01 && Math.abs(velocity) < 0.01) {
+        break;
+      }
+      time += dt;
+    }
+    // Ensure we end at the target value
+    keyframes.push({
+      progress: 1,
+      value: to,
+      easing: easingFunctions.easeOutQuad
+    });
+    return {
+      keyframes,
+      duration: time * 1000,
+      delay: 0,
+      repeat: false,
+      yoyo: false
+    };
+  }
+  static createMorphingAnimation(fromShape, toShape, config = {}) {
+    const {
+      steps = 20,
+      easing = 'easeInOutQuad'
+    } = config;
+    const keyframes = [];
+    for (let i = 0; i <= steps; i++) {
+      const progress = i / steps;
+      const easedProgress = easingFunctions[easing](progress);
+      keyframes.push({
+        progress,
+        value: easedProgress,
+        easing: easingFunctions[easing]
+      });
+    }
+    return {
+      keyframes,
+      duration: 1000,
+      delay: 0,
+      repeat: false,
+      yoyo: false
+    };
+  }
+}
+// Utility functions for common animation patterns
+const createFadeInAnimation = (duration = 500, delay = 0) => {
+  return ChartAnimationUtils.createSequence(ChartAnimationUtils.createKeyframeSequence(0, 1, 10, 'easeOutQuad'), duration, delay, false, false);
+};
+const createSlideInAnimation = (direction = 'up', distance = 50, duration = 500, delay = 0) => {
+  return ChartAnimationUtils.createSequence(ChartAnimationUtils.createKeyframeSequence(0, 1, 10, 'easeOutQuad'), duration, delay, false, false);
+};
+const createScaleInAnimation = (from = 0, to = 1, duration = 500, delay = 0) => {
+  return ChartAnimationUtils.createSequence(ChartAnimationUtils.createKeyframeSequence(from, to, 10, 'easeOutBack'), duration, delay, false, false);
+};
+const createBounceAnimation = (amplitude = 20, duration = 1000, delay = 0) => {
+  const keyframes = [{
+    progress: 0,
+    value: 0,
+    easing: easingFunctions.easeOutQuad
+  }, {
+    progress: 0.2,
+    value: -amplitude * 0.6,
+    easing: easingFunctions.easeOutQuad
+  }, {
+    progress: 0.4,
+    value: amplitude * 0.4,
+    easing: easingFunctions.easeOutQuad
+  }, {
+    progress: 0.6,
+    value: -amplitude * 0.2,
+    easing: easingFunctions.easeOutQuad
+  }, {
+    progress: 0.8,
+    value: amplitude * 0.1,
+    easing: easingFunctions.easeOutQuad
+  }, {
+    progress: 1,
+    value: 0,
+    easing: easingFunctions.easeOutQuad
+  }];
+  return ChartAnimationUtils.createSequence(keyframes, duration, delay, false, false);
+};
+// Utility functions for common animation patterns
+const calculateDamping = (dampingRatio, stiffness, mass) => {
+  return 2 * Math.sqrt(mass * stiffness) * dampingRatio;
+};
+const createAnimationOptions = (config = {}) => {
+  const {
+    duration = 1000,
+    easing = 'easeOutQuad',
+    delay = 0
+  } = config;
+  return {
+    duration,
+    easing: easingFunctions[easing] || easingFunctions.easeOutQuad,
+    delay,
+    fill: 'both'
+  };
+};
+const pathAnimationPlugin = {
+  id: 'pathAnimation',
+  beforeInit: chart => {
+    chart.pathAnimation = {
+      progress: 0,
+      duration: 1000,
+      startTime: 0,
+      animating: false
+    };
+  },
+  beforeDraw: (chart, args, options) => {
+    chart.ctx;
+    const pathAnim = chart.pathAnimation;
+    if (!pathAnim.animating) return;
+    const elapsed = Date.now() - pathAnim.startTime;
+    const progress = Math.min(elapsed / pathAnim.duration, 1);
+    // Update progress
+    pathAnim.progress = progress;
+    // Apply path animation to line datasets
+    chart.data.datasets.forEach((dataset, datasetIndex) => {
+      const meta = chart.getDatasetMeta(datasetIndex);
+      if (meta.type === 'line' && meta.data) {
+        meta.data.forEach((element, index) => {
+          if (index / meta.data.length <= progress) {
+            element._view = element._model;
+          } else {
+            // Hide elements that haven't been drawn yet
+            element._view = {
+              ...element._model,
+              skip: true
+            };
+          }
+        });
+      }
+    });
+    // Complete animation when done
+    if (progress >= 1) {
+      pathAnim.animating = false;
+      chart.update('none');
+    }
+  },
+  // Utility method to start path animation
+  startAnimation: (chart, duration = 1000) => {
+    if (chart.pathAnimation) {
+      chart.pathAnimation.startTime = Date.now();
+      chart.pathAnimation.duration = duration;
+      chart.pathAnimation.animating = true;
+      chart.pathAnimation.progress = 0;
+    }
+  }
+};
+// Additional utility functions
+const createEntranceAnimation = (series, type = 'fadeIn', config = {}, onUpdate, onComplete) => {
+  const {
+    duration = 1000,
+    delay = 0,
+    stagger = 100
+  } = config;
+  return {
+    duration,
+    delay,
+    stagger,
+    easing: 'easeOutCubic',
+    onUpdate,
+    onComplete
+  };
+};
+
+export { ChartAnimationUtils, calculateDamping, createAnimationOptions, createBounceAnimation, createEntranceAnimation, createFadeInAnimation, createScaleInAnimation, createSlideInAnimation, easingFunctions, pathAnimationPlugin };
+//# sourceMappingURL=ChartAnimationUtils.js.map

package/dist/esm/components/charts/utils/ChartAnimationUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartAnimationUtils.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}