flikkui 0.1.0-beta.9 → 0.2.0-beta.2

package/dist/components/charts/StackedBarChart/StackedBarChart.js

@@ -0,0 +1,318 @@
+import React__default, { useState, useEffect, useRef, useMemo } from 'react';
+import { useReducedMotion, motion } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+import { useTooltipPosition } from '../hooks/useTooltipPosition.js';
+import { useChartAccessibility } from '../hooks/useChartAccessibility.js';
+import { useChartValidation } from '../hooks/useChartValidation.js';
+import { ChartErrorBoundary } from '../shared/ChartErrorBoundary/ChartErrorBoundary.js';
+import { XAxis } from '../shared/ChartAxis/XAxis.js';
+import { YAxis } from '../shared/ChartAxis/YAxis.js';
+import { HorizontalGrid } from '../shared/ChartGrid/HorizontalGrid.js';
+import { ChartTooltip } from '../shared/ChartTooltip/ChartTooltip.js';
+import { STACKED_BAR_CHART_DEFAULTS } from './StackedBarChart.types.js';
+import { ExclamationTriangleIcon } from '@heroicons/react/20/solid';
+
+const StackedBarChart = ({ data, config, 
+// Standardized display props with defaults
+showGrid = STACKED_BAR_CHART_DEFAULTS.showGrid, showXAxis = STACKED_BAR_CHART_DEFAULTS.showXAxis, showYAxis = STACKED_BAR_CHART_DEFAULTS.showYAxis, minValue: propMinValue, maxValue: propMaxValue, variant = STACKED_BAR_CHART_DEFAULTS.variant, theme, 
+// Bar visual props
+barRadius = STACKED_BAR_CHART_DEFAULTS.barRadius, categoryGap = STACKED_BAR_CHART_DEFAULTS.categoryGap, 
+// Stacking behavior
+stackOffset = STACKED_BAR_CHART_DEFAULTS.stackOffset, 
+// Animation props
+showAnimation = STACKED_BAR_CHART_DEFAULTS.showAnimation, 
+// Base props
+className, title, description, enableKeyboardNavigation = STACKED_BAR_CHART_DEFAULTS.enableKeyboardNavigation, showValidationWarnings = process.env.NODE_ENV === "development", children, ...props }) => {
+    var _a;
+    // Animation state
+    const shouldReduceMotion = useReducedMotion();
+    const [hasAnimated, setHasAnimated] = useState(false);
+    useEffect(() => {
+        if (!shouldReduceMotion && showAnimation) {
+            setHasAnimated(true);
+        }
+        else {
+            setHasAnimated(true);
+        }
+    }, [shouldReduceMotion, showAnimation]);
+    // Validate data and config with error handling
+    const { validation, sanitizedData, isValid, hasWarnings, safeScale, safeMath, } = useChartValidation(data, config, {
+        autoSanitize: true,
+        logWarnings: true,
+    });
+    // Early return for invalid data
+    if (!isValid) {
+        return (React__default.createElement("div", { className: cn("chart-container flex flex-col items-center justify-center p-6 border border-border rounded-lg text-xl", className), role: "alert", "aria-live": "polite", ...props },
+            React__default.createElement("div", { className: "flex flex-col items-center gap-4 mb-1" },
+                React__default.createElement(ExclamationTriangleIcon, { className: "size-6 text-[var(--color-danger)]" }),
+                React__default.createElement("div", { className: "text-sm font-semibold text-[var(--color-text-secondary)]" }, "Invalid Chart Data")),
+            React__default.createElement("p", { className: "text-sm text-[var(--color-text-secondary)]/70 mb-2" }, ((_a = validation.errors[0]) === null || _a === void 0 ? void 0 : _a.message) ||
+                "Unable to render chart due to data validation errors")));
+    }
+    // Early return for empty data
+    if (!sanitizedData || sanitizedData.length === 0) {
+        return (React__default.createElement("div", { className: cn("chart-container flex items-center justify-center text-[var(--color-text-muted)]", className), role: "img", "aria-label": "Empty stacked bar chart", ...props },
+            React__default.createElement("span", null, "No data available")));
+    }
+    // Color palette using CSS variables
+    const getSeriesFillColor = (index) => {
+        const colorVars = [
+            "var(--color-primary)",
+            "var(--color-primary-400)",
+            "var(--color-primary-300)",
+            "var(--color-primary-200)",
+            "var(--color-warning)",
+            "var(--color-success)",
+        ];
+        return colorVars[index % colorVars.length];
+    };
+    const containerRef = useRef(null);
+    const [dimensions, setDimensions] = useState({ width: 600, height: 400 });
+    const [hoveredCategory, setHoveredCategory] = useState(null);
+    const isMobile = typeof window !== "undefined" &&
+        ("ontouchstart" in window || navigator.maxTouchPoints > 0);
+    const { tooltipData, tooltipRef, handleMouseEnter, handleMouseMove, handleMouseLeave, } = useTooltipPosition({
+        containerRef,
+        isMobile,
+    });
+    const { chartAccessibilityProps, descriptionProps, focusedElementIndex, isKeyboardMode, handleMouseInteraction, } = useChartAccessibility({
+        chartType: "bar",
+        data: sanitizedData,
+        config,
+        title,
+        description,
+        enableKeyboardNavigation,
+    });
+    // Measure container dimensions
+    useEffect(() => {
+        const updateDimensions = () => {
+            if (containerRef.current) {
+                const { width, height } = containerRef.current.getBoundingClientRect();
+                setDimensions({
+                    width: width || 600,
+                    height: height || 400,
+                });
+            }
+        };
+        updateDimensions();
+        const resizeObserver = new ResizeObserver(updateDimensions);
+        if (containerRef.current) {
+            resizeObserver.observe(containerRef.current);
+        }
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, []);
+    // Calculate dimensions
+    const margin = {
+        top: 15,
+        right: showYAxis ? 20 : 0,
+        bottom: showXAxis ? 20 : 0,
+        left: showYAxis ? 60 : 0,
+    };
+    const innerWidth = Math.max(0, dimensions.width - margin.left - margin.right);
+    const innerHeight = Math.max(0, dimensions.height - margin.top - margin.bottom);
+    // Get all data keys from config
+    const dataKeys = Object.keys(config || {});
+    // Animation timing
+    const BAR_STAGGER = 0.08;
+    // Calculate stacked values for each data point
+    const getStackedValues = useMemo(() => {
+        const stackedData = {};
+        sanitizedData.forEach((item, dataIndex) => {
+            let cumulativeValue = 0;
+            dataKeys.forEach((key) => {
+                if (!stackedData[key]) {
+                    stackedData[key] = [];
+                }
+                const rawValue = item[key];
+                const value = typeof rawValue === "number" && isFinite(rawValue) ? rawValue : 0;
+                stackedData[key][dataIndex] = {
+                    base: cumulativeValue,
+                    top: cumulativeValue + value,
+                };
+                cumulativeValue += value;
+            });
+        });
+        return stackedData;
+    }, [sanitizedData, dataKeys]);
+    // Calculate max stacked value for scale
+    const maxStackedValue = useMemo(() => {
+        let max = 0;
+        sanitizedData.forEach((item) => {
+            let sum = 0;
+            dataKeys.forEach((key) => {
+                const rawValue = item[key];
+                const value = typeof rawValue === "number" && isFinite(rawValue) ? rawValue : 0;
+                sum += value;
+            });
+            if (sum > max)
+                max = sum;
+        });
+        return max;
+    }, [sanitizedData, dataKeys]);
+    // Apply stackOffset if needed
+    const getScaledMaxValue = () => {
+        if (stackOffset === "expand") {
+            return 100; // Normalize to 100%
+        }
+        return propMaxValue !== null && propMaxValue !== void 0 ? propMaxValue : maxStackedValue;
+    };
+    const minValue = propMinValue !== null && propMinValue !== void 0 ? propMinValue : 0;
+    const maxValue = getScaledMaxValue();
+    // Safe bar width calculations
+    const totalCategoryGap = Math.max(0, (sanitizedData.length - 1) * categoryGap);
+    const availableWidth = Math.max(0, innerWidth - totalCategoryGap);
+    const barWidth = safeMath.divide(availableWidth, sanitizedData.length, 0);
+    // Helper function to create a path for bars with only top corners rounded
+    const createRoundedTopBarPath = (x, y, width, height, radius) => {
+        const r = Math.min(radius, width / 2, height / 2);
+        return `
+      M ${x},${y + height}
+      L ${x},${y + r}
+      Q ${x},${y} ${x + r},${y}
+      L ${x + width - r},${y}
+      Q ${x + width},${y} ${x + width},${y + r}
+      L ${x + width},${y + height}
+      Z
+    `.trim();
+    };
+    // Helper function to create a rectangular path (no rounded corners)
+    const createRectPath = (x, y, width, height) => {
+        return `
+      M ${x},${y + height}
+      L ${x},${y}
+      L ${x + width},${y}
+      L ${x + width},${y + height}
+      Z
+    `.trim();
+    };
+    // Render stacked bars
+    const renderStackedBar = (item, categoryIndex, x) => {
+        const isHovered = hoveredCategory === categoryIndex;
+        const isAnyBarHovered = hoveredCategory !== null;
+        const shouldReduceOpacity = isAnyBarHovered && !isHovered;
+        const isFocused = isKeyboardMode && focusedElementIndex === categoryIndex;
+        const range = maxValue - minValue;
+        return (React__default.createElement("g", { key: categoryIndex }, dataKeys.map((key, keyIndex) => {
+            var _a, _b;
+            const stackData = (_a = getStackedValues[key]) === null || _a === void 0 ? void 0 : _a[categoryIndex];
+            if (!stackData)
+                return null;
+            let baseValue = stackData.base;
+            let topValue = stackData.top;
+            // Apply expand offset (normalize to percentage)
+            if (stackOffset === "expand") {
+                const totalForCategory = dataKeys.reduce((sum, k) => {
+                    const rawVal = item[k];
+                    return (sum +
+                        (typeof rawVal === "number" && isFinite(rawVal) ? rawVal : 0));
+                }, 0);
+                if (totalForCategory > 0) {
+                    baseValue = (stackData.base / totalForCategory) * 100;
+                    topValue = (stackData.top / totalForCategory) * 100;
+                }
+            }
+            const barHeight = range > 0
+                ? safeMath.scale(topValue - baseValue, 0, range, 0, innerHeight)
+                : 0;
+            const barY = margin.top +
+                innerHeight -
+                safeMath.scale(topValue, minValue, maxValue, 0, innerHeight);
+            const isTopSegment = keyIndex === dataKeys.length - 1;
+            const pathD = isTopSegment
+                ? createRoundedTopBarPath(x, barY, barWidth, barHeight, barRadius)
+                : createRectPath(x, barY, barWidth, barHeight);
+            const fillColor = ((_b = config[key]) === null || _b === void 0 ? void 0 : _b.color) || getSeriesFillColor(keyIndex);
+            const delay = categoryIndex * BAR_STAGGER;
+            return (React__default.createElement(motion.path, { key: key, d: pathD, initial: showAnimation && !shouldReduceMotion
+                    ? { scaleY: 0, opacity: 0 }
+                    : { scaleY: 1, opacity: 1 }, animate: {
+                    scaleY: 1,
+                    opacity: 1,
+                }, transition: {
+                    type: "spring",
+                    stiffness: 100,
+                    damping: 20,
+                    delay,
+                }, className: cn("transition-colors duration-200 cursor-pointer", isFocused && "stroke-2"), style: {
+                    originY: 1,
+                    transformOrigin: "bottom",
+                    fill: shouldReduceOpacity
+                        ? "var(--color-background-tertiary)"
+                        : fillColor,
+                    opacity: shouldReduceOpacity ? 0.9 : 1,
+                    stroke: isFocused ? "var(--color-primary)" : "none",
+                }, onMouseEnter: (e) => {
+                    setHoveredCategory(categoryIndex);
+                    // Create tooltip content with all series
+                    const series = dataKeys.map((dataKey, idx) => {
+                        var _a, _b;
+                        const rawValue = item[dataKey];
+                        const value = typeof rawValue === "number" && isFinite(rawValue)
+                            ? rawValue
+                            : 0;
+                        return {
+                            key: dataKey,
+                            label: ((_a = config[dataKey]) === null || _a === void 0 ? void 0 : _a.label) || dataKey,
+                            value,
+                            color: ((_b = config[dataKey]) === null || _b === void 0 ? void 0 : _b.color) || getSeriesFillColor(idx),
+                        };
+                    });
+                    // Calculate total
+                    const total = series.reduce((sum, s) => sum + s.value, 0);
+                    const content = {
+                        category: item.name || `Category ${categoryIndex + 1}`,
+                        series,
+                        total,
+                    };
+                    const svgCoordinates = {
+                        x: x + barWidth / 2,
+                        y: barY,
+                        dimensions,
+                    };
+                    handleMouseEnter(e, content, svgCoordinates);
+                }, onMouseMove: (e) => {
+                    if (hoveredCategory === categoryIndex) {
+                        const svgCoordinates = {
+                            x: x + barWidth / 2,
+                            y: barY,
+                            dimensions,
+                        };
+                        handleMouseMove(e, svgCoordinates);
+                    }
+                }, onMouseLeave: () => {
+                    setHoveredCategory(null);
+                    handleMouseLeave();
+                } }));
+        })));
+    };
+    return (React__default.createElement(ChartErrorBoundary, { className: className, showErrorDetails: process.env.NODE_ENV === "development" },
+        React__default.createElement("div", { ref: containerRef, className: cn("chart-container w-full h-full", className), ...chartAccessibilityProps, onMouseEnter: handleMouseInteraction, onMouseMove: handleMouseInteraction, ...props },
+            descriptionProps && React__default.createElement("div", { ...descriptionProps }),
+            showValidationWarnings && hasWarnings && (React__default.createElement("div", { className: "absolute top-2 left-2 right-2 z-10 p-2 bg-[var(--color-warning-50)] border border-[var(--color-warning-200)] rounded text-xs text-[var(--color-warning)] shadow-sm" },
+                React__default.createElement("strong", null, "Chart Warnings:"),
+                React__default.createElement("ul", { className: "mt-1" }, validation.warnings.map((warning, index) => (React__default.createElement("li", { key: index },
+                    "\u2022 ",
+                    warning.message)))))),
+            React__default.createElement("svg", { width: "100%", height: "100%", viewBox: `0 0 ${dimensions.width} ${dimensions.height}` },
+                React__default.createElement(HorizontalGrid, { show: showGrid, x: margin.left, y: margin.top, width: innerWidth, height: innerHeight, lineCount: 5 }),
+                React__default.createElement(YAxis, { show: showYAxis, min: minValue, max: maxValue, x: margin.left, y: margin.top, height: innerHeight, showGrid: false, gridWidth: innerWidth, tickFormatter: (value) => {
+                        if (stackOffset === "expand")
+                            return `${value}%`;
+                        if (value >= 1000)
+                            return `${(value / 1000).toFixed(0)}k`;
+                        return value.toString();
+                    } }),
+                React__default.createElement("g", { className: "chart-bars" }, sanitizedData.map((item, index) => {
+                    const x = margin.left + index * (barWidth + categoryGap);
+                    return renderStackedBar(item, index, x);
+                })),
+                React__default.createElement(XAxis, { show: showXAxis, data: sanitizedData, x: margin.left, y: margin.top + innerHeight, width: innerWidth, categoryWidth: barWidth, categoryGap: categoryGap })),
+            React__default.createElement(ChartTooltip, { tooltipRef: tooltipRef, content: tooltipData === null || tooltipData === void 0 ? void 0 : tooltipData.content, active: !!tooltipData, position: tooltipData
+                    ? { x: tooltipData.x, y: tooltipData.y }
+                    : { x: 0, y: 0 } }),
+            children)));
+};
+
+export { StackedBarChart };

package/dist/components/charts/StackedBarChart/StackedBarChart.types.d.ts

@@ -0,0 +1,34 @@
+import { BaseChartProps, StandardChartDisplayProps, StandardVisualProps, BarChartSpecificProps } from "../types/chart.types";
+export type StackOffset = "none" | "expand" | "wiggle" | "silhouette";
+export interface StackedBarChartProps extends BaseChartProps, StandardChartDisplayProps, StandardVisualProps, BarChartSpecificProps {
+    barRadius?: number;
+    gap?: number;
+    categoryGap?: number;
+    stackOffset?: StackOffset;
+    showAnimation?: boolean;
+    showValidationWarnings?: boolean;
+}
+export declare const STACKED_BAR_CHART_DEFAULTS: {
+    readonly barRadius: 32;
+    readonly gap: 4;
+    readonly categoryGap: 16;
+    readonly orientation: "horizontal" | "vertical";
+    readonly stackOffset: StackOffset;
+    readonly showAnimation: true;
+    readonly showGrid: true;
+    readonly showXAxis: true;
+    readonly showYAxis: true;
+    readonly dotRadius: 4;
+    readonly cellRadius: 4;
+    readonly radius: 20;
+    readonly strokeWidth: 2;
+    readonly curved: true;
+    readonly curveType: import("../types/chart.types").CurveType;
+    readonly fillOpacity: 0.3;
+    readonly showStroke: true;
+    readonly showDots: true;
+    readonly stacked: false;
+    readonly variant: import("../types/chart.types").ChartVariant;
+    readonly enableKeyboardNavigation: true;
+};
+export type StackedBarChartData = BaseChartProps["data"][0];

package/dist/components/charts/StackedBarChart/StackedBarChart.types.js

@@ -0,0 +1,14 @@
+import { CHART_DEFAULTS } from '../types/chart.types.js';
+
+// Default values using centralized defaults
+const STACKED_BAR_CHART_DEFAULTS = {
+    ...CHART_DEFAULTS,
+    barRadius: CHART_DEFAULTS.barRadius,
+    gap: CHART_DEFAULTS.gap,
+    categoryGap: CHART_DEFAULTS.categoryGap,
+    orientation: CHART_DEFAULTS.orientation,
+    stackOffset: "none",
+    showAnimation: true,
+};
+
+export { STACKED_BAR_CHART_DEFAULTS };

package/dist/components/charts/StackedBarChart/index.d.ts

@@ -0,0 +1,3 @@
+export { StackedBarChart } from "./StackedBarChart";
+export type { StackedBarChartProps, StackedBarChartData, StackOffset, } from "./StackedBarChart.types";
+export { STACKED_BAR_CHART_DEFAULTS } from "./StackedBarChart.types";

package/dist/components/charts/hooks/index.d.ts

@@ -2,3 +2,5 @@ export { useChartTheme } from './useChartTheme';
 export { useChartAccessibility } from './useChartAccessibility';
 export { useTooltipPosition } from './useTooltipPosition';
 export { useChartValidation, useChartDataValidation, useChartValidationProduction } from './useChartValidation';
+export { useChartScales } from './useChartScales';
+export type { UseChartScalesOptions, UseChartScalesReturn, ChartScales } from './useChartScales';

package/dist/components/charts/hooks/useChartAccessibility.d.ts

@@ -1,7 +1,7 @@
 import { ChartDataPoint, ChartConfig } from '../types/chart.types';
 export interface UseChartAccessibilityOptions {
     /** Chart type for ARIA descriptions */
-    chartType: 'bar' | 'line' | 'area' | 'heatmap';
+    chartType: 'bar' | 'line' | 'area' | 'heatmap' | 'combo' | 'scatter';
     /** Chart data for generating descriptions */
     data: ChartDataPoint[];
     /** Chart configuration */

package/dist/components/charts/hooks/useChartAccessibility.js

@@ -1,82 +1,75 @@
 import { useState, useRef, useCallback } from 'react';
 
-function useChartAccessibility(_a) {
-    var chartType = _a.chartType, data = _a.data, config = _a.config, title = _a.title, description = _a.description, _b = _a.enableKeyboardNavigation, enableKeyboardNavigation = _b === void 0 ? true : _b;
-    var _c = useState(-1), focusedElementIndex = _c[0], setFocusedElementIndex = _c[1];
-    var _d = useState(false), isKeyboardMode = _d[0], setIsKeyboardMode = _d[1];
-    var descriptionId = useRef("chart-description-".concat(Math.random().toString(36).substr(2, 9)));
+function useChartAccessibility({ chartType, data, config, title, description, enableKeyboardNavigation = true, }) {
+    const [focusedElementIndex, setFocusedElementIndex] = useState(-1);
+    const [isKeyboardMode, setIsKeyboardMode] = useState(false);
+    const descriptionId = useRef(`chart-description-${Math.random().toString(36).substr(2, 9)}`);
     // Generate chart summary for screen readers
-    var generateChartSummary = useCallback(function () {
+    const generateChartSummary = useCallback(() => {
         var _a;
-        var dataKeys = Object.keys(config);
-        var dataCount = data.length;
-        var summary = '';
+        const dataKeys = Object.keys(config);
+        const dataCount = data.length;
+        let summary = '';
         // Chart type and basic info
         switch (chartType) {
             case 'bar':
-                summary = "Bar chart with ".concat(dataCount, " categories");
+                summary = `Bar chart with ${dataCount} categories`;
                 break;
             case 'line':
-                summary = "Line chart with ".concat(dataCount, " data points");
+                summary = `Line chart with ${dataCount} data points`;
                 break;
             case 'area':
-                summary = "Area chart with ".concat(dataCount, " data points");
+                summary = `Area chart with ${dataCount} data points`;
                 break;
             case 'heatmap':
-                summary = "Heatmap with ".concat(dataCount, " data cells");
+                summary = `Heatmap with ${dataCount} data cells`;
                 break;
         }
         // Add series information
         if (dataKeys.length > 1) {
-            summary += " showing ".concat(dataKeys.length, " data series: ").concat(dataKeys.map(function (key) { var _a; return ((_a = config[key]) === null || _a === void 0 ? void 0 : _a.label) || key; }).join(', '));
+            summary += ` showing ${dataKeys.length} data series: ${dataKeys.map(key => { var _a; return ((_a = config[key]) === null || _a === void 0 ? void 0 : _a.label) || key; }).join(', ')}`;
         }
         else if (dataKeys.length === 1) {
-            var seriesLabel = ((_a = config[dataKeys[0]]) === null || _a === void 0 ? void 0 : _a.label) || dataKeys[0];
-            summary += " showing ".concat(seriesLabel);
+            const seriesLabel = ((_a = config[dataKeys[0]]) === null || _a === void 0 ? void 0 : _a.label) || dataKeys[0];
+            summary += ` showing ${seriesLabel}`;
         }
         // Add data range information for numeric charts
         if (chartType !== 'heatmap' && data.length > 0) {
-            var values = data.flatMap(function (item) {
-                return dataKeys.map(function (key) { return typeof item[key] === 'number' ? item[key] : 0; });
-            }).filter(function (val) { return val !== 0; });
+            const values = data.flatMap(item => dataKeys.map(key => typeof item[key] === 'number' ? item[key] : 0)).filter(val => val !== 0);
             if (values.length > 0) {
-                var min = Math.min.apply(Math, values);
-                var max = Math.max.apply(Math, values);
-                summary += ". Values range from ".concat(min, " to ").concat(max);
+                const min = Math.min(...values);
+                const max = Math.max(...values);
+                summary += `. Values range from ${min} to ${max}`;
             }
         }
         return summary;
     }, [chartType, data, config]);
     // Generate ARIA label
-    var generateAriaLabel = useCallback(function () {
+    const generateAriaLabel = useCallback(() => {
         if (title) {
-            return "".concat(title, ". ").concat(generateChartSummary());
+            return `${title}. ${generateChartSummary()}`;
         }
         return generateChartSummary();
     }, [title, generateChartSummary]);
     // Handle keyboard navigation
-    var handleKeyDown = useCallback(function (event) {
+    const handleKeyDown = useCallback((event) => {
         if (!enableKeyboardNavigation)
             return;
         // Enable keyboard mode on first keyboard interaction
         if (!isKeyboardMode) {
             setIsKeyboardMode(true);
         }
-        var maxIndex = data.length - 1;
+        const maxIndex = data.length - 1;
         switch (event.key) {
             case 'ArrowRight':
             case 'ArrowDown':
                 event.preventDefault();
-                setFocusedElementIndex(function (prev) {
-                    return prev >= maxIndex ? 0 : prev + 1;
-                });
+                setFocusedElementIndex(prev => prev >= maxIndex ? 0 : prev + 1);
                 break;
             case 'ArrowLeft':
             case 'ArrowUp':
                 event.preventDefault();
-                setFocusedElementIndex(function (prev) {
-                    return prev <= 0 ? maxIndex : prev - 1;
-                });
+                setFocusedElementIndex(prev => prev <= 0 ? maxIndex : prev - 1);
                 break;
             case 'Home':
                 event.preventDefault();
@@ -94,14 +87,14 @@ function useChartAccessibility(_a) {
         }
     }, [enableKeyboardNavigation, isKeyboardMode, data.length]);
     // Reset keyboard mode on mouse interaction
-    var handleMouseInteraction = useCallback(function () {
+    const handleMouseInteraction = useCallback(() => {
         if (isKeyboardMode) {
             setIsKeyboardMode(false);
             setFocusedElementIndex(-1);
         }
     }, [isKeyboardMode]);
     // Chart container accessibility props
-    var chartAccessibilityProps = {
+    const chartAccessibilityProps = {
         role: 'img',
         'aria-label': generateAriaLabel(),
         'aria-describedby': description ? descriptionId.current : undefined,
@@ -109,18 +102,18 @@ function useChartAccessibility(_a) {
         onKeyDown: handleKeyDown,
     };
     // Description element props
-    var descriptionProps = description ? {
+    const descriptionProps = description ? {
         id: descriptionId.current,
         className: 'sr-only',
         children: description,
     } : null;
     return {
-        chartAccessibilityProps: chartAccessibilityProps,
-        descriptionProps: descriptionProps,
-        focusedElementIndex: focusedElementIndex,
-        isKeyboardMode: isKeyboardMode,
-        handleMouseInteraction: handleMouseInteraction,
-        generateChartSummary: generateChartSummary,
+        chartAccessibilityProps,
+        descriptionProps,
+        focusedElementIndex,
+        isKeyboardMode,
+        handleMouseInteraction,
+        generateChartSummary,
     };
 }
 

package/dist/components/charts/hooks/useChartScales.d.ts

@@ -0,0 +1,87 @@
+import { useChartValidation } from './useChartValidation';
+import type { ChartDataPoint, ChartConfig } from '../types/chart.types';
+export interface UseChartScalesOptions {
+    data: ChartDataPoint[];
+    config: ChartConfig;
+    /**
+     * Chart type - affects how scales are calculated
+     */
+    chartType?: 'bar' | 'line' | 'combo';
+    /**
+     * Whether bars are stacked (affects Y-axis max calculation)
+     */
+    stacked?: boolean;
+    /**
+     * User-provided minimum Y value
+     */
+    minValue?: number;
+    /**
+     * User-provided maximum Y value
+     */
+    maxValue?: number;
+    /**
+     * Whether to include zero in the Y-axis range
+     */
+    includeZero?: boolean;
+    /**
+     * Inner width for X-axis calculations
+     */
+    innerWidth?: number;
+    /**
+     * Gap between categories
+     */
+    categoryGap?: number;
+    /**
+     * Whether to use smart rounding for line charts
+     */
+    useSmartRounding?: boolean;
+}
+export interface ChartScales {
+    /**
+     * Y-axis scale
+     */
+    y: {
+        min: number;
+        max: number;
+        hasValidData: boolean;
+    };
+    /**
+     * X-axis scale info
+     */
+    x: {
+        categoryWidth: number;
+        totalWidth: number;
+        pointPosition: (index: number) => number;
+    };
+}
+export interface UseChartScalesReturn {
+    /**
+     * Calculated scales for X and Y axes
+     */
+    scales: ChartScales;
+    /**
+     * Sanitized data from validation
+     */
+    sanitizedData: ChartDataPoint[];
+    /**
+     * Whether the chart has valid data to render
+     */
+    isValid: boolean;
+    /**
+     * Validation warnings
+     */
+    hasWarnings: boolean;
+    /**
+     * Safe math utilities
+     */
+    safeMath: ReturnType<typeof useChartValidation>['safeMath'];
+    /**
+     * Safe scale utilities
+     */
+    safeScale: ReturnType<typeof useChartValidation>['safeScale'];
+}
+/**
+ * Unified hook for chart scale calculations
+ * Handles both bar and line charts with consistent logic
+ */
+export declare function useChartScales(options: UseChartScalesOptions): UseChartScalesReturn;