aura-glass 2.0.39 → 2.1.0

package/dist/esm/components/charts/components/ChartLegend.js

@@ -0,0 +1,71 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+const ChartLegend = ({
+  // TODO: Integrate ContrastGuard in chart labels, tooltips, and legends for WCAG AA compliance
+  datasets = [],
+  position = 'top',
+  style = 'default',
+  glassEffect = false,
+  interactive = false,
+  onItemClick,
+  children
+}) => {
+  const containerStyle = {
+    display: 'flex',
+    flexWrap: 'wrap',
+    gap: style === 'compact' ? '8px' : '12px',
+    padding: '8px',
+    background: glassEffect ? '${glassStyles.surface?.base || "rgba(255, 255, 255, 0.05)"}' : 'transparent',
+    // Use createGlassStyle() instead,
+    borderRadius: glassEffect ? '8px' : '0',
+    border: glassEffect ? '1px solid ${glassStyles.surface?.base || "var(--glass-bg-default)"}' : 'none',
+    marginBottom: position === 'top' ? '16px' : '0',
+    marginTop: position === 'bottom' ? '16px' : '0',
+    marginRight: position === 'left' ? '16px' : '0',
+    marginLeft: position === 'right' ? '16px' : '0',
+    flexDirection: position === 'left' || position === 'right' ? 'column' : 'row',
+    alignItems: 'center',
+    justifyContent: position === 'left' || position === 'right' ? 'flex-start' : 'center'
+  };
+  if (children) {
+    return jsx("div", {
+      style: containerStyle,
+      children: children
+    });
+  }
+  return jsx("div", {
+    "data-glass-component": true,
+    style: containerStyle,
+    children: datasets.map((dataset, index) => jsxs("div", {
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '6px',
+        opacity: dataset.hidden ? 0.5 : 1,
+        cursor: interactive ? 'pointer' : 'default'
+      },
+      onClick: e => interactive && onItemClick && onItemClick(index),
+      children: [jsx("div", {
+        style: {
+          width: style === 'compact' ? '8px' : '12px',
+          height: style === 'compact' ? '8px' : '12px',
+          borderRadius: '2px',
+          background: dataset.backgroundColor || dataset.borderColor || 'var(--glass-color-primary)',
+          border: '1px solid ${glassStyles.borderColor || "rgba(var(--glass-color-white) / var(--glass-opacity-20))"}'
+        }
+      }), jsx("span", {
+        style: {
+          fontSize: style === 'compact' ? '11px' : '12px',
+          color: glassEffect ? 'rgba(var(--glass-color-white) / var(--glass-opacity-80))' : 'inherit',
+          fontWeight: 'var(--typography-subheading-weight)',
+          whiteSpace: 'nowrap'
+        },
+        children: dataset.label || `Dataset ${index + 1}`
+      })]
+    }, dataset.id || index))
+  });
+};
+
+export { ChartLegend, ChartLegend as default };
+//# sourceMappingURL=ChartLegend.js.map

package/dist/esm/components/charts/components/ChartLegend.js.map

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

package/dist/esm/components/charts/components/ChartRenderer.js

@@ -0,0 +1,234 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useRef, useState, useMemo, useCallback, useEffect } from 'react';
+import { cn } from '../../../lib/utilsComprehensive.js';
+import { Line, Scatter, Pie, Bar } from 'react-chartjs-2';
+
+const ChartRenderer = ({
+  // TODO: Integrate ContrastGuard in chart labels, tooltips, and legends for WCAG AA compliance
+  chartType,
+  datasets = [],
+  palette = ['var(--glass-color-primary)', 'var(--glass-color-danger)', 'var(--glass-color-success)', 'var(--glass-color-warning)', '#8b5cf6'],
+  qualityTier = 'medium',
+  animation,
+  interaction,
+  axis,
+  isReducedMotion = false,
+  springValue = 0,
+  enablePhysicsAnimation = false,
+  onDataPointClick,
+  onChartHover,
+  onChartLeave,
+  chartRefCallback,
+  glassVariant = 'frosted',
+  className,
+  ...rest
+}) => {
+  useRef(null);
+  useRef();
+  const [isLoaded, setIsLoaded] = useState(false);
+  const series = useMemo(() => {
+    if (!Array.isArray(datasets)) {
+      return [];
+    }
+    return datasets.filter(Boolean);
+  }, [datasets]);
+  const hasData = useMemo(() => series.some(dataset => Array.isArray(dataset?.data) && dataset.data.length > 0), [series]);
+  const resolvedPalette = useMemo(() => {
+    return palette?.length ? palette : ['var(--glass-color-primary)'];
+  }, [palette]);
+  // Chart configuration based on quality tier
+  const chartConfig = useMemo(() => {
+    const baseConfig = {
+      responsive: true,
+      maintainAspectRatio: false,
+      animation: !isReducedMotion && animation ? {
+        duration: qualityTier === 'low' ? 200 : qualityTier === 'medium' ? 400 : 600,
+        easing: 'easeOutQuart'
+      } : false,
+      interaction: {
+        intersect: false,
+        mode: 'index'
+      },
+      plugins: {
+        legend: {
+          display: false
+        },
+        tooltip: {
+          enabled: false // We'll use custom tooltip
+        }
+      },
+      scales: {
+        x: {
+          display: axis?.x?.show !== false,
+          grid: {
+            display: axis?.x?.grid !== false,
+            color: '${glassStyles.surface?.base || "var(--glass-bg-default)"}'
+          },
+          ticks: {
+            color: '${glassStyles.text?.secondary || "rgba(var(--glass-color-white) / var(--glass-opacity-70))"}'
+          }
+        },
+        y: {
+          display: axis?.y?.show !== false,
+          grid: {
+            display: axis?.y?.grid !== false,
+            color: '${glassStyles.surface?.base || "var(--glass-bg-default)"}'
+          },
+          ticks: {
+            color: '${glassStyles.text?.secondary || "rgba(var(--glass-color-white) / var(--glass-opacity-70))"}'
+          }
+        }
+      }
+    };
+    return baseConfig;
+  }, [qualityTier, isReducedMotion, animation, axis]);
+  // Prepare chart data
+  const chartData = useMemo(() => {
+    if (!hasData) {
+      return {
+        labels: [],
+        datasets: []
+      };
+    }
+    return {
+      labels: series[0]?.data?.map(point => point?.x ?? point?.label ?? '') || [],
+      datasets: series.map((dataset, index) => {
+        const dataPoints = Array.isArray(dataset?.data) ? dataset.data.map(point => point?.y ?? point) : [];
+        return {
+          label: dataset?.name ?? `Series ${index + 1}`,
+          data: dataPoints,
+          backgroundColor: dataset?.color || resolvedPalette[index % Math.max(resolvedPalette.length, 1)],
+          borderColor: dataset?.color || resolvedPalette[index % Math.max(resolvedPalette.length, 1)],
+          borderWidth: 2,
+          fill: chartType === 'area',
+          tension: 0.4,
+          pointRadius: qualityTier === 'low' ? 2 : 4,
+          pointHoverRadius: qualityTier === 'low' ? 4 : 6
+        };
+      })
+    };
+  }, [series, resolvedPalette, chartType, qualityTier, hasData]);
+  // Handle chart interactions
+  const handleChartClick = useCallback((event, elements) => {
+    if ((elements?.length || 0) > 0 && onDataPointClick) {
+      const element = elements[0];
+      const datasetIndex = element.datasetIndex;
+      const dataIndex = element.index;
+      const dataset = series?.[datasetIndex];
+      const dataPoint = Array.isArray(dataset?.data) ? dataset.data[dataIndex] : undefined;
+      if (dataPoint !== undefined) {
+        onDataPointClick(datasetIndex, dataIndex);
+      }
+    }
+  }, [series, onDataPointClick]);
+  const handleChartHoverEvent = useCallback((event, elements) => {
+    if ((elements?.length || 0) > 0 && onChartHover) {
+      const element = elements[0];
+      const datasetIndex = element.datasetIndex;
+      const dataIndex = element.index;
+      const dataset = series?.[datasetIndex];
+      const dataPoint = Array.isArray(dataset?.data) ? dataset.data[dataIndex] : undefined;
+      if (dataPoint !== undefined) {
+        onChartHover(dataPoint);
+      }
+    } else if (onChartLeave) {
+      onChartLeave();
+    }
+  }, [series, onChartHover, onChartLeave]);
+  // Chart component based on type
+  const ChartComponent = useMemo(() => {
+    switch (chartType) {
+      case 'line':
+        return Line;
+      case 'bar':
+        return Bar;
+      case 'area':
+        return Line;
+      // Area chart is a Line chart with fill
+      case 'pie':
+        return Pie;
+      case 'scatter':
+        return Scatter;
+      default:
+        return Line;
+    }
+  }, [chartType]);
+  useEffect(() => {
+    setIsLoaded(true);
+  }, []);
+  const containerStyle = {
+    width: '100%',
+    height: '100%',
+    position: 'relative',
+    background: 'transparent',
+    borderRadius: glassVariant === 'clear' ? 0 : '8px',
+    overflow: 'hidden'
+  };
+  if (!isLoaded) {
+    return jsx("div", {
+      "data-glass-component": true,
+      style: containerStyle,
+      ref: chartRefCallback,
+      className: cn('glass-chart-renderer', className),
+      ...rest,
+      children: jsx("div", {
+        style: {
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: '100%',
+          color: 'var(--glass-border-hover)'
+        },
+        children: "Loading chart..."
+      })
+    });
+  }
+  if (!hasData) {
+    return jsx("div", {
+      "data-glass-component": true,
+      style: containerStyle,
+      ref: chartRefCallback,
+      className: cn('glass-chart-renderer', className),
+      ...rest,
+      children: jsx("div", {
+        style: {
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: '100%',
+          color: 'var(--glass-border-hover)'
+        },
+        children: "No chart data available"
+      })
+    });
+  }
+  return jsxs("div", {
+    style: containerStyle,
+    ref: chartRefCallback,
+    className: cn('glass-chart-renderer', className),
+    ...rest,
+    children: [jsx(ChartComponent, {
+      data: chartData,
+      options: {
+        ...chartConfig,
+        onClick: handleChartClick,
+        onHover: handleChartHoverEvent
+      }
+    }), enablePhysicsAnimation && jsx("div", {
+      style: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        pointerEvents: 'none',
+        transform: `scale(${1 + springValue * 0.02})`,
+        transition: 'transform 0.3s ease'
+      }
+    })]
+  });
+};
+
+export { ChartRenderer, ChartRenderer as default };
+//# sourceMappingURL=ChartRenderer.js.map

package/dist/esm/components/charts/components/ChartRenderer.js.map

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

package/dist/esm/components/charts/components/ChartTooltip.js

@@ -0,0 +1,60 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const ChartTooltip = ({
+  // TODO: Integrate ContrastGuard in chart labels, tooltips, and legends for WCAG AA compliance
+  tooltipData,
+  datasets = [],
+  color = 'var(--glass-color-primary)',
+  qualityTier = 'medium',
+  tooltipStyle = 'frosted',
+  followCursor = false
+}) => {
+  if (!tooltipData) return null;
+  const datasetMeta = Array.isArray(datasets) && datasets.length > tooltipData.datasetIndex ? datasets[tooltipData.datasetIndex] : undefined;
+  const tooltipValue = tooltipData.value || {};
+  const rawPoint = Array.isArray(datasetMeta?.data) ? datasetMeta?.data?.[tooltipData.dataIndex] : undefined;
+  const datasetLabel = tooltipValue.dataset || datasetMeta?.label || datasetMeta?.name || `Dataset ${tooltipData.datasetIndex + 1}`;
+  const pointLabel = tooltipValue.label ?? rawPoint?.label ?? `Value ${tooltipData.dataIndex + 1}`;
+  const pointValue = tooltipValue.value ?? rawPoint?.y ?? "N/A";
+  const markerColor = tooltipValue.color || datasetMeta?.style?.lineColor || color;
+  const style = {
+    position: 'fixed',
+    left: tooltipData.x + 10,
+    top: tooltipData.y - 10,
+    background: tooltipStyle === 'frosted' ? 'var(--glass-text-secondary-dark)' : tooltipStyle === 'minimal' ? 'var(--glass-text-primary)' : '${glassStyles.text?.primary || "rgba(var(--glass-color-white) / var(--glass-opacity-90))"}',
+    // Use createGlassStyle() instead,
+    border: tooltipStyle === 'frosted' ? '1px solid ${glassStyles.borderColor || "rgba(var(--glass-color-white) / var(--glass-opacity-20))"}' : '1px solid rgba(var(--glass-color-black) / var(--glass-opacity-10))',
+    borderRadius: '8px',
+    padding: '8px 12px',
+    fontSize: '0.75rem',
+    // caption
+    color: tooltipStyle === 'frosted' ? 'white' : 'black',
+    pointerEvents: 'none',
+    zIndex: 1000,
+    boxShadow: '0 4px 12px rgba(var(--glass-color-black) / var(--glass-opacity-15))',
+    maxWidth: '200px',
+    whiteSpace: 'nowrap'
+  };
+  return jsxs("div", {
+    "data-glass-component": true,
+    style: style,
+    children: [jsxs("div", {
+      style: {
+        fontWeight: 'var(--typography-heading-weight)',
+        marginBottom: '4px'
+      },
+      children: [" ", datasetLabel]
+    }), jsxs("div", {
+      children: [jsx("span", {
+        style: {
+          color: markerColor
+        },
+        children: "\u25CF"
+      }), " ", pointLabel, ": ", pointValue]
+    })]
+  });
+};
+
+export { ChartTooltip, ChartTooltip as default };
+//# sourceMappingURL=ChartTooltip.js.map

package/dist/esm/components/charts/components/ChartTooltip.js.map

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

package/dist/esm/components/charts/components/KpiChart.js

@@ -0,0 +1,58 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { createGlassStyle } from '../../../core/mixins/glassMixins.js';
+
+const KpiChart = ({
+  // TODO: Integrate ContrastGuard in chart labels, tooltips, and legends for WCAG AA compliance
+  kpi,
+  animation,
+  qualityTier = 'medium',
+  color = 'var(--glass-color-primary)',
+  isReducedMotion = false
+}) => {
+  const formatValue = (value, format) => {
+    if (typeof value === 'string') return value;
+    switch (format) {
+      case 'currency':
+        return new Intl.NumberFormat('en-US', {
+          style: 'currency',
+          currency: 'USD'
+        }).format(value);
+      case 'percentage':
+        return `${value}%`;
+      default:
+        return value.toLocaleString();
+    }
+  };
+  const style = createGlassStyle({
+    intent: "neutral",
+    elevation: "level2"
+  });
+  return jsxs("div", {
+    "data-glass-component": true,
+    style: style,
+    children: [jsx("div", {
+      style: {
+        fontSize: '2.25rem',
+        marginBottom: '8px'
+      },
+      children: formatValue(kpi.value, kpi.format)
+    }), jsx("div", {
+      style: {
+        fontSize: 'var(--typography-body-size)',
+        opacity: 0.8
+      },
+      children: kpi.label
+    }), kpi.change !== undefined && jsxs("div", {
+      style: {
+        fontSize: 'var(--typography-caption-size)',
+        color: kpi.change >= 0 ? 'var(--glass-color-success)' : 'var(--glass-color-danger)',
+        marginTop: '4px'
+      },
+      children: [kpi.change >= 0 ? '↑' : '↓', " ", Math.abs(kpi.change), "% ", kpi.changeLabel || '']
+    })]
+  });
+};
+
+export { KpiChart, KpiChart as default };
+//# sourceMappingURL=KpiChart.js.map

package/dist/esm/components/charts/components/KpiChart.js.map

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

package/dist/esm/components/charts/hooks/useChartPhysicsInteraction.js

@@ -0,0 +1,250 @@
+import { useState, useRef, useCallback, useEffect } from 'react';
+
+const isRecord = value => typeof value === 'object' && value !== null;
+const getScaleAxis = (scale, scaleId) => {
+  if (isRecord(scale)) {
+    const {
+      axis
+    } = scale;
+    if (axis === 'x' || axis === 'y') {
+      return axis;
+    }
+  }
+  const fallback = scaleId.charAt(0).toLowerCase();
+  return fallback === 'x' || fallback === 'y' ? fallback : null;
+};
+const hasNumericRange = scale => {
+  if (!isRecord(scale)) {
+    return false;
+  }
+  const {
+    min,
+    max
+  } = scale;
+  return typeof min === 'number' && typeof max === 'number' && Number.isFinite(min) && Number.isFinite(max);
+};
+const axisMatchesMode = (axis, mode) => mode === 'xy' || mode === axis;
+/**
+ * Hook for physics-based chart interactions (zoom/pan)
+ *
+ * Provides smooth, physics-based zoom and pan interactions for Chart.js charts
+ * with configurable spring physics and constraints.
+ *
+ * @param chartRef - Reference to the Chart.js instance
+ * @param wrapperRef - Reference to the chart wrapper element
+ * @param options - Configuration options for interactions
+ *
+ * @returns Object containing interaction state and control functions
+ *
+ * @example
+ * ```tsx
+ * function PhysicsChart() {
+ *   const chartRef = useRef<ChartJS>(null);
+ *   const wrapperRef = useRef<HTMLDivElement>(null);
+ *
+ *   const { isPanning, zoomLevel, applyZoom, resetZoom } = useChartPhysicsInteraction(
+ *     chartRef,
+ *     wrapperRef,
+ *     {
+ *       enabled: true,
+ *       mode: 'xy',
+ *       minZoom: 0.5,
+ *       maxZoom: 5,
+ *     }
+ *   );
+ *
+ *   return (
+ *     <div ref={wrapperRef}>
+ *       <Chart ref={chartRef} {...chartProps} />
+ *       <button onClick={resetZoom} className="glass-focus glass-touch-target glass-contrast-guard">Reset</button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+function useChartPhysicsInteraction(chartRef, wrapperRef, options = {}) {
+  const {
+    enabled = false,
+    mode = 'xy',
+    physics = {
+      tension: 300,
+      friction: 30,
+      mass: 1
+    },
+    minZoom = 0.5,
+    maxZoom = 5,
+    wheelSensitivity = 0.1,
+    inertiaDuration = 500,
+    respectReducedMotion = true
+  } = options;
+  const [isPanning, setIsPanning] = useState(false);
+  const [zoomLevel, setZoomLevel] = useState(1);
+  const panStartRef = useRef(null);
+  const velocityRef = useRef({
+    x: 0,
+    y: 0
+  });
+  const lastPosRef = useRef({
+    x: 0,
+    y: 0
+  });
+  const animationFrameRef = useRef(null);
+  /**
+   * Apply zoom with physics constraints
+   */
+  const applyZoom = useCallback(level => {
+    if (!enabled || !chartRef.current) return;
+    // Clamp zoom level
+    const clampedLevel = Math.max(minZoom, Math.min(maxZoom, level));
+    setZoomLevel(clampedLevel);
+    const chart = chartRef.current;
+    // Apply zoom transformations to chart scales
+    if (chart.options.scales) {
+      Object.keys(chart.options.scales).forEach(scaleId => {
+        const scale = chart.options.scales[scaleId];
+        if (!scale) return;
+        const axis = getScaleAxis(scale, scaleId);
+        if (!axis || !axisMatchesMode(axis, mode)) return;
+        // Only apply zoom to enabled axes based on mode
+        if (!hasNumericRange(scale)) return;
+        const range = scale.max - scale.min;
+        const center = (scale.max + scale.min) / 2;
+        const newRange = range / clampedLevel;
+        scale.min = center - newRange / 2;
+        scale.max = center + newRange / 2;
+      });
+    }
+    chart.update('none');
+  }, [enabled, chartRef, minZoom, maxZoom, mode]);
+  /**
+   * Reset zoom to default level
+   */
+  const resetZoom = useCallback(() => {
+    applyZoom(1);
+  }, [applyZoom]);
+  /**
+   * Handle wheel events for zooming
+   */
+  const handleWheel = useCallback(event => {
+    if (!enabled || !chartRef.current) return;
+    event.preventDefault();
+    const delta = -event.deltaY * wheelSensitivity;
+    const newZoom = zoomLevel * (1 + delta);
+    applyZoom(newZoom);
+  }, [enabled, chartRef, wheelSensitivity, zoomLevel, applyZoom]);
+  /**
+   * Handle mouse down for panning
+   */
+  const handleMouseDown = useCallback(event => {
+    if (!enabled || !chartRef.current) return;
+    setIsPanning(true);
+    panStartRef.current = {
+      x: event.clientX,
+      y: event.clientY
+    };
+    lastPosRef.current = {
+      x: event.clientX,
+      y: event.clientY
+    };
+    velocityRef.current = {
+      x: 0,
+      y: 0
+    };
+  }, [enabled, chartRef]);
+  /**
+   * Handle mouse move for panning
+   */
+  const handleMouseMove = useCallback(event => {
+    if (!isPanning || !panStartRef.current || !chartRef.current) return;
+    const deltaX = event.clientX - lastPosRef.current.x;
+    const deltaY = event.clientY - lastPosRef.current.y;
+    // Update velocity for inertia
+    velocityRef.current = {
+      x: deltaX,
+      y: deltaY
+    };
+    const chart = chartRef.current;
+    // Apply pan transformations to chart scales
+    if (chart.options.scales) {
+      Object.keys(chart.options.scales).forEach(scaleId => {
+        const scale = chart.options.scales[scaleId];
+        if (!scale) return;
+        const axis = getScaleAxis(scale, scaleId);
+        if (!axis || !axisMatchesMode(axis, mode)) return;
+        // Only pan enabled axes based on mode
+        if (!hasNumericRange(scale)) return;
+        const range = scale.max - scale.min;
+        const panAmount = axis === 'x' ? -(deltaX / (wrapperRef.current?.offsetWidth || 1)) * range : deltaY / (wrapperRef.current?.offsetHeight || 1) * range;
+        scale.min += panAmount;
+        scale.max += panAmount;
+      });
+      chart.update('none');
+    }
+    lastPosRef.current = {
+      x: event.clientX,
+      y: event.clientY
+    };
+  }, [isPanning, chartRef, mode, wrapperRef]);
+  /**
+   * Handle mouse up to end panning with inertia
+   */
+  const handleMouseUp = useCallback(() => {
+    if (!isPanning) return;
+    setIsPanning(false);
+    panStartRef.current = null;
+    // Apply inertia if enabled
+    if (!respectReducedMotion) {
+      const applyInertia = () => {
+        const {
+          x,
+          y
+        } = velocityRef.current;
+        if (Math.abs(x) < 0.1 && Math.abs(y) < 0.1) {
+          // Inertia complete
+          if (animationFrameRef.current) {
+            cancelAnimationFrame(animationFrameRef.current);
+            animationFrameRef.current = null;
+          }
+          return;
+        }
+        // Apply friction
+        velocityRef.current.x *= 0.95;
+        velocityRef.current.y *= 0.95;
+        // Continue animation
+        animationFrameRef.current = requestAnimationFrame(applyInertia);
+      };
+      applyInertia();
+    }
+  }, [isPanning, respectReducedMotion]);
+  /**
+   * Setup event listeners
+   */
+  useEffect(() => {
+    if (!enabled || !wrapperRef.current) return;
+    const wrapper = wrapperRef.current;
+    wrapper.addEventListener('wheel', handleWheel, {
+      passive: false
+    });
+    wrapper.addEventListener('mousedown', handleMouseDown);
+    window.addEventListener('mousemove', handleMouseMove);
+    window.addEventListener('mouseup', handleMouseUp);
+    return () => {
+      wrapper.removeEventListener('wheel', handleWheel);
+      wrapper.removeEventListener('mousedown', handleMouseDown);
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('mouseup', handleMouseUp);
+      if (animationFrameRef.current) {
+        cancelAnimationFrame(animationFrameRef.current);
+      }
+    };
+  }, [enabled, wrapperRef, handleWheel, handleMouseDown, handleMouseMove, handleMouseUp]);
+  return {
+    isPanning,
+    zoomLevel,
+    applyZoom,
+    resetZoom
+  };
+}
+
+export { useChartPhysicsInteraction };
+//# sourceMappingURL=useChartPhysicsInteraction.js.map

package/dist/esm/components/charts/hooks/useChartPhysicsInteraction.js.map

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