@kubit-ui-web/react-charts 0.1.0

package/dist/cjs/components/zoomArea/hooks/useKeyboardNavigation.js

@@ -0,0 +1,126 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useKeyboardNavigation = void 0;
+const react_1 = require("react");
+const rangeAndPositions_1 = require("../utils/rangeAndPositions");
+const zoomArea_type_1 = require("../zoomArea.type");
+/**
+ * Handle left arrow and down arrow key movement (decrease values)
+ */
+const handleArrowLeft = (target, currentRange, step, interactionConfig) => {
+    const newRange = { ...currentRange };
+    if (target === zoomArea_type_1.ZoomAreaElements.START_HANDLER) {
+        newRange.start = Math.max(0, currentRange.start - step);
+    }
+    else if (target === zoomArea_type_1.ZoomAreaElements.END_HANDLER) {
+        newRange.end = Math.max(currentRange.start + interactionConfig.minHandlerDistance, currentRange.end - step);
+    }
+    else if (target === zoomArea_type_1.ZoomAreaElements.SELECTION_AREA) {
+        // Move entire selection left
+        const selectionWidth = currentRange.end - currentRange.start;
+        const newStart = Math.max(0, currentRange.start - step);
+        newRange.start = newStart;
+        newRange.end = newStart + selectionWidth;
+    }
+    return newRange;
+};
+/**
+ * Handle right arrow and up arrow key movement (increase values)
+ */
+const handleArrowRight = (target, currentRange, step, dataLength, interactionConfig) => {
+    const newRange = { ...currentRange };
+    if (target === zoomArea_type_1.ZoomAreaElements.START_HANDLER) {
+        newRange.start = Math.min(currentRange.end - interactionConfig.minHandlerDistance, currentRange.start + step);
+    }
+    else if (target === zoomArea_type_1.ZoomAreaElements.END_HANDLER) {
+        newRange.end = Math.min(dataLength - 1, currentRange.end + step);
+    }
+    else if (target === zoomArea_type_1.ZoomAreaElements.SELECTION_AREA) {
+        // Move entire selection right
+        const selectionWidth = currentRange.end - currentRange.start;
+        const newStart = Math.min(dataLength - 1 - selectionWidth, currentRange.start + step);
+        newRange.start = newStart;
+        newRange.end = newStart + selectionWidth;
+    }
+    return newRange;
+};
+/**
+ * Handle Home key - move to beginning
+ */
+const handleHome = (target, currentRange, dataLength) => {
+    const newRange = { ...currentRange };
+    if (target === zoomArea_type_1.ZoomAreaElements.START_HANDLER) {
+        newRange.start = 0;
+    }
+    else if (target === zoomArea_type_1.ZoomAreaElements.END_HANDLER) {
+        newRange.end = dataLength - 1;
+    }
+    else if (target === zoomArea_type_1.ZoomAreaElements.SELECTION_AREA) {
+        const selectionWidth = currentRange.end - currentRange.start;
+        newRange.start = 0;
+        newRange.end = selectionWidth;
+    }
+    return newRange;
+};
+/**
+ * Handle End key - move to end
+ */
+const handleEnd = (target, currentRange, dataLength, interactionConfig) => {
+    const newRange = { ...currentRange };
+    if (target === zoomArea_type_1.ZoomAreaElements.START_HANDLER) {
+        newRange.start = currentRange.end - interactionConfig.minHandlerDistance;
+    }
+    else if (target === zoomArea_type_1.ZoomAreaElements.END_HANDLER) {
+        newRange.end = dataLength - 1;
+    }
+    else if (target === zoomArea_type_1.ZoomAreaElements.SELECTION_AREA) {
+        const selectionWidth = currentRange.end - currentRange.start;
+        newRange.start = dataLength - 1 - selectionWidth;
+        newRange.end = dataLength - 1;
+    }
+    return newRange;
+};
+/**
+ * Custom hook for handling keyboard navigation in ZoomArea
+ *
+ * @param params - Configuration parameters for keyboard navigation
+ * @returns Object with keyboard event handlers
+ */
+const useKeyboardNavigation = (params) => {
+    const { currentRange, dataLength, interactionConfig, onRangeChange } = params;
+    const handleKeyDown = (0, react_1.useCallback)((target) => {
+        return (event) => {
+            // Shift key = fast navigation, normal keys = precise control
+            const step = event.shiftKey
+                ? interactionConfig.keyboardFastStep
+                : interactionConfig.keyboardStep;
+            let newRange = { ...currentRange };
+            switch (event.key) {
+                case 'ArrowLeft':
+                case 'ArrowDown':
+                    event.preventDefault();
+                    newRange = handleArrowLeft(target, currentRange, step, interactionConfig);
+                    break;
+                case 'ArrowRight':
+                case 'ArrowUp':
+                    event.preventDefault();
+                    newRange = handleArrowRight(target, currentRange, step, dataLength, interactionConfig);
+                    break;
+                case 'Home':
+                    event.preventDefault();
+                    newRange = handleHome(target, currentRange, dataLength);
+                    break;
+                case 'End':
+                    event.preventDefault();
+                    newRange = handleEnd(target, currentRange, dataLength, interactionConfig);
+                    break;
+                default:
+                    return; // Don't handle other keys
+            }
+            const clampedRange = (0, rangeAndPositions_1.clampRange)(newRange, dataLength, interactionConfig.minHandlerDistance);
+            onRangeChange(clampedRange);
+        };
+    }, [currentRange, dataLength, onRangeChange, interactionConfig]);
+    return { handleKeyDown };
+};
+exports.useKeyboardNavigation = useKeyboardNavigation;

package/dist/cjs/components/zoomArea/hooks/useResponsiveCanvas.d.ts

@@ -0,0 +1,62 @@
+import type { CanvasConfig } from '../../../types/canvas.type';
+/**
+ * Universal responsive canvas hook for chart components.
+ *
+ * Manages canvas dimensions, responsive behavior, and viewBox calculation.
+ * Designed to eventually replace the legacy canvasConfig pattern across all chart components.
+ *
+ * Features:
+ * - Responsive dimensions with ResizeObserver
+ * - Automatic viewBox calculation
+ * - Backward compatibility with canvasConfig
+ * - Modern width/height prop API
+ *
+ * @param width - Canvas width (string with units or number in px)
+ * @param height - Canvas height (string with units or number in px)
+ * @param dataTestId - Unique identifier for the SVG element
+ * @param canvasConfig - Legacy canvas configuration (optional, for backward compatibility)
+ * @param extraSpace - Additional space around the canvas (default: 0)
+ * @returns Object containing parsed dimensions and viewBox
+ *
+ * **Return Values:**
+ * - `parsedCanvas`: Final calculated dimensions in pixels
+ * - `viewBox`: SVG viewBox string for responsive scaling
+ *
+ * @example
+ * ```tsx
+ * // Modern API
+ * const { parsedCanvas, viewBox } = useResponsiveCanvas({
+ *   width: "70%",
+ *   height: 400,
+ *   dataTestId: "my-chart",
+ *   extraSpace: 10
+ * });
+ *
+ * // Legacy compatibility
+ * const { parsedCanvas, viewBox } = useResponsiveCanvas({
+ *   width: "100%",
+ *   height: 300,
+ *   dataTestId: "legacy-chart",
+ *   canvasConfig: { width: "100%", height: 300, extraSpace: 5 }
+ * });
+ * ```
+ */
+interface UseResponsiveCanvasParams {
+    width: string | number;
+    height: string | number;
+    dataTestId: string;
+    canvasConfig?: CanvasConfig;
+    extraSpace?: number | string;
+}
+interface UseResponsiveCanvasReturn {
+    /** Parsed canvas dimensions in pixels */
+    parsedCanvas: {
+        width: number;
+        height: number;
+    };
+    /** SVG viewBox string */
+    viewBox: string;
+}
+export declare const useResponsiveCanvas: ({ canvasConfig, dataTestId, extraSpace, height, width, }: UseResponsiveCanvasParams) => UseResponsiveCanvasReturn;
+export {};
+//# sourceMappingURL=useResponsiveCanvas.d.ts.map

package/dist/cjs/components/zoomArea/hooks/useResponsiveCanvas.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResponsiveCanvas.d.ts","sourceRoot":"","sources":["../../../../../src/components/zoomArea/hooks/useResponsiveCanvas.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAIxD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AAEH,UAAU,yBAAyB;IACjC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC9B;AAED,UAAU,yBAAyB;IACjC,yCAAyC;IACzC,YAAY,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAChD,yBAAyB;IACzB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,mBAAmB,GAAI,0DAMjC,yBAAyB,KAAG,yBAyF9B,CAAC"}

package/dist/cjs/components/zoomArea/hooks/useResponsiveCanvas.js

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useResponsiveCanvas = void 0;
+const react_1 = require("react");
+const buildViewBox_1 = require("../../../components/svgContainer/utils/buildViewBox/buildViewBox");
+const getCanvasDimensions_1 = require("../../../utils/getCanvasDimensions/getCanvasDimensions");
+const parseStringToNumberPx_1 = require("../../../utils/parseStringToNumberPx.ts/parseStringToNumberPx");
+const useResponsiveCanvas = ({ canvasConfig, dataTestId, extraSpace = 0, height, width, }) => {
+    // State for parsed/calculated dimensions
+    const [parsedCanvas, setParsedCanvas] = (0, react_1.useState)({
+        height: 0,
+        width: 0,
+    });
+    // Determine effective configuration (legacy vs modern API)
+    const effectiveCanvasConfig = (0, react_1.useMemo)(() => {
+        if (canvasConfig) {
+            // Legacy mode: use provided canvasConfig
+            return canvasConfig;
+        }
+        // Modern mode: construct from height and width props
+        return {
+            extraSpace,
+            height,
+            width,
+        };
+    }, [canvasConfig, width, height, extraSpace]);
+    // Extract and parse canvas configuration
+    const { extraSpace: canvasExtraSpace, height: canvasHeight, width: canvasWidth, } = effectiveCanvasConfig;
+    const parsedCanvasExtraSpace = canvasExtraSpace
+        ? (0, parseStringToNumberPx_1.parseStringToNumberPx)(canvasExtraSpace)
+        : undefined;
+    // Set up responsive dimensions with ResizeObserver
+    (0, react_1.useEffect)(() => {
+        // Find the SVG element for this specific component instance
+        const svgElement = document.querySelector(`[data-testid="${dataTestId}"]`);
+        if (!svgElement) {
+            return;
+        }
+        const calculateDimensions = () => {
+            const { parsedCanvasHeight, parsedCanvasWidth } = (0, getCanvasDimensions_1.getCanvasDimensions)({
+                canvasHeight,
+                canvasWidth,
+                svgElement,
+            });
+            setParsedCanvas({
+                height: parsedCanvasHeight,
+                width: parsedCanvasWidth,
+            });
+        };
+        // Calculate initial dimensions
+        calculateDimensions();
+        // Set up ResizeObserver for responsive updates
+        const resizeObserver = new ResizeObserver(() => {
+            calculateDimensions();
+        });
+        // Start observing size changes
+        resizeObserver.observe(svgElement);
+        // Cleanup function
+        // eslint-disable-next-line consistent-return
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [canvasWidth, canvasHeight, dataTestId]);
+    // Calculate viewBox based on parsed dimensions
+    const viewBox = (0, react_1.useMemo)(() => {
+        const calculatedViewBox = (0, buildViewBox_1.buildViewBox)(parsedCanvas.width, parsedCanvas.height, parsedCanvasExtraSpace);
+        return calculatedViewBox;
+    }, [parsedCanvas.width, parsedCanvas.height, parsedCanvasExtraSpace]);
+    return {
+        parsedCanvas,
+        viewBox,
+    };
+};
+exports.useResponsiveCanvas = useResponsiveCanvas;

package/dist/cjs/components/zoomArea/hooks/useZoomAreaFocus.d.ts

@@ -0,0 +1,24 @@
+import type { ZoomAreaElements } from '../zoomArea.type';
+/**
+ * Return value for the useZoomAreaFocus hook
+ */
+interface UseZoomAreaFocusReturn {
+    /** Handler for focusing on a specific element */
+    handleFocus: (target: keyof typeof ZoomAreaElements) => () => void;
+    /** Handler for clearing focus */
+    handleBlur: () => void;
+    /** Utility to check if an element is focused */
+    isFocused: (target: keyof typeof ZoomAreaElements) => boolean;
+}
+/**
+ * Custom hook for managing focus state of zoom area elements.
+ *
+ * Provides centralized focus management for all interactive elements
+ * (start handler, end handler, selection area) with proper coordination.
+ *
+ * @param params - Configuration parameters for the hook
+ * @returns Object with focus handlers and utilities
+ */
+export declare const useZoomAreaFocus: () => UseZoomAreaFocusReturn;
+export {};
+//# sourceMappingURL=useZoomAreaFocus.d.ts.map

package/dist/cjs/components/zoomArea/hooks/useZoomAreaFocus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useZoomAreaFocus.d.ts","sourceRoot":"","sources":["../../../../../src/components/zoomArea/hooks/useZoomAreaFocus.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAEzD;;GAEG;AACH,UAAU,sBAAsB;IAC9B,iDAAiD;IACjD,WAAW,EAAE,CAAC,MAAM,EAAE,MAAM,OAAO,gBAAgB,KAAK,MAAM,IAAI,CAAC;IACnE,iCAAiC;IACjC,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,gDAAgD;IAChD,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,OAAO,gBAAgB,KAAK,OAAO,CAAC;CAC/D;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,gBAAgB,QAAO,sBAwBnC,CAAC"}

package/dist/cjs/components/zoomArea/hooks/useZoomAreaFocus.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useZoomAreaFocus = void 0;
+const react_1 = require("react");
+/**
+ * Custom hook for managing focus state of zoom area elements.
+ *
+ * Provides centralized focus management for all interactive elements
+ * (start handler, end handler, selection area) with proper coordination.
+ *
+ * @param params - Configuration parameters for the hook
+ * @returns Object with focus handlers and utilities
+ */
+const useZoomAreaFocus = () => {
+    const [focusedElement, setFocusedElement] = (0, react_1.useState)(null);
+    const handleFocus = (0, react_1.useCallback)((target) => {
+        return () => setFocusedElement(target);
+    }, []);
+    const handleBlur = (0, react_1.useCallback)(() => {
+        setFocusedElement(null);
+    }, []);
+    // Helper function to check focus state
+    const isFocused = (0, react_1.useCallback)((target) => {
+        return focusedElement === target;
+    }, [focusedElement]);
+    return {
+        handleBlur,
+        handleFocus,
+        isFocused,
+    };
+};
+exports.useZoomAreaFocus = useZoomAreaFocus;

package/dist/cjs/components/zoomArea/hooks/useZoomData.d.ts

@@ -0,0 +1,33 @@
+import type { IZoomAreaDataPoint, ZoomRange } from '../zoomArea.type';
+/**
+ * Custom hook for managing zoom data state and filtering logic.
+ *
+ * Handles the core zoom functionality including range state management,
+ * data filtering, and automatic emission of filtered data changes.
+ *
+ * @param data - Array of data points to be filtered
+ * @param initialRange - Optional initial zoom range
+ * @param onDataChange - Callback function to handle filtered data changes
+ * @returns Object containing current range and range change handler
+ *
+ * @example
+ * ```tsx
+ * const { currentRange, handleRangeChange } = useZoomData({
+ *   data: chartData,
+ *   initialRange: { start: 0, end: 10 },
+ *   onDataChange: (filteredData) => setChartData(filteredData)
+ * });
+ * ```
+ */
+interface UseZoomDataParams {
+    data: IZoomAreaDataPoint[];
+    initialRange?: ZoomRange;
+    onDataChange?: (filteredData: IZoomAreaDataPoint[]) => void;
+}
+interface UseZoomDataReturn {
+    currentRange: ZoomRange;
+    handleRangeChange: (newRange: ZoomRange) => void;
+}
+export declare const useZoomData: ({ data, initialRange, onDataChange, }: UseZoomDataParams) => UseZoomDataReturn;
+export {};
+//# sourceMappingURL=useZoomData.d.ts.map

package/dist/cjs/components/zoomArea/hooks/useZoomData.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useZoomData.d.ts","sourceRoot":"","sources":["../../../../../src/components/zoomArea/hooks/useZoomData.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAEtE;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,UAAU,iBAAiB;IACzB,IAAI,EAAE,kBAAkB,EAAE,CAAC;IAC3B,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,YAAY,CAAC,EAAE,CAAC,YAAY,EAAE,kBAAkB,EAAE,KAAK,IAAI,CAAC;CAC7D;AAED,UAAU,iBAAiB;IACzB,YAAY,EAAE,SAAS,CAAC;IACxB,iBAAiB,EAAE,CAAC,QAAQ,EAAE,SAAS,KAAK,IAAI,CAAC;CAClD;AAED,eAAO,MAAM,WAAW,GAAI,uCAIzB,iBAAiB,KAAG,iBA8BtB,CAAC"}

package/dist/cjs/components/zoomArea/hooks/useZoomData.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useZoomData = void 0;
+const react_1 = require("react");
+const indexRounding_1 = require("../utils/indexRounding");
+const rangeAndPositions_1 = require("../utils/rangeAndPositions");
+const useZoomData = ({ data, initialRange, onDataChange, }) => {
+    // Initialize range state
+    const defaultRange = initialRange || (0, rangeAndPositions_1.createDefaultRange)(data.length);
+    const [currentRange, setCurrentRange] = (0, react_1.useState)(defaultRange);
+    // Filter data based on current range and emit changes
+    const filterData = (range) => {
+        if (!onDataChange || data.length === 0) {
+            return;
+        }
+        // Use centralized rounding logic to ensure consistency with accessibility labels
+        const { endIndex, startIndex } = (0, indexRounding_1.getRangeIndices)(range, data.length);
+        const filteredData = data.slice(startIndex, endIndex + 1);
+        onDataChange(filteredData);
+    };
+    // Handle range changes - updates state and filters data
+    const handleRangeChange = (newRange) => {
+        setCurrentRange(newRange);
+        filterData(newRange);
+    };
+    // Emit initial filtered data on mount
+    (0, react_1.useEffect)(() => {
+        filterData(currentRange);
+    }, []);
+    return {
+        currentRange,
+        handleRangeChange,
+    };
+};
+exports.useZoomData = useZoomData;

package/dist/cjs/components/zoomArea/index.d.ts

@@ -0,0 +1,6 @@
+export * from './components';
+export * from './hooks';
+export * from './utils';
+export * from './zoomArea';
+export * from './zoomArea.type';
+//# sourceMappingURL=index.d.ts.map

package/dist/cjs/components/zoomArea/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/zoomArea/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC"}

package/dist/cjs/components/zoomArea/index.js

@@ -0,0 +1,21 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./components"), exports);
+__exportStar(require("./hooks"), exports);
+__exportStar(require("./utils"), exports);
+__exportStar(require("./zoomArea"), exports);
+__exportStar(require("./zoomArea.type"), exports);

package/dist/cjs/components/zoomArea/utils/accessibilityLabels.d.ts

@@ -0,0 +1,28 @@
+import type { IZoomAreaDataPoint, ScreenReaderConfig, ZoomRange } from '../zoomArea.type';
+/**
+ * Extracts the X-axis value from data at a specific index.
+ *
+ * @param data - Array of data points
+ * @param xKey - Property name to extract from data points
+ * @param index - Integer index (should be pre-rounded using indexRounding utils)
+ * @returns String representation of the X-axis value, or fallback to string index
+ */
+export declare const getXAxisValue: (data: IZoomAreaDataPoint[], xKey: string, index: number) => string;
+/**
+ * Generates consistent accessibility labels for ZoomArea handlers and selection area.
+ *
+ * Uses the same floor/ceil logic as data filtering to ensure that screen reader
+ * announcements exactly match the boundaries of the filtered data.
+ *
+ * @param data - Array of data points
+ * @param xKey - Property name to extract X-axis values from
+ * @param currentRange - Current zoom range with start and end indices
+ * @param config - Optional configuration for custom label templates
+ * @returns Object with formatted accessibility labels for UI components
+ */
+export declare const generateAccessibilityLabels: (data: IZoomAreaDataPoint[], xKey: string, currentRange: ZoomRange, config?: ScreenReaderConfig) => {
+    startHandler: string;
+    endHandler: string;
+    selectionArea: string;
+};
+//# sourceMappingURL=accessibilityLabels.d.ts.map

package/dist/cjs/components/zoomArea/utils/accessibilityLabels.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accessibilityLabels.d.ts","sourceRoot":"","sources":["../../../../../src/components/zoomArea/utils/accessibilityLabels.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAO1F;;;;;;;GAOG;AACH,eAAO,MAAM,aAAa,GAAI,MAAM,kBAAkB,EAAE,EAAE,MAAM,MAAM,EAAE,OAAO,MAAM,KAAG,MAGvF,CAAC;AAyBF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,2BAA2B,GACtC,MAAM,kBAAkB,EAAE,EAC1B,MAAM,MAAM,EACZ,cAAc,SAAS,EACvB,SAAS,kBAAkB,KAC1B;IACD,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;CAuBvB,CAAC"}

package/dist/cjs/components/zoomArea/utils/accessibilityLabels.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateAccessibilityLabels = exports.getXAxisValue = void 0;
+const indexRounding_1 = require("./indexRounding");
+// Template keys for accessibility labels
+const ACCESSIBILITY_START_VALUE_KEY = '{{startValue}}';
+const ACCESSIBILITY_END_VALUE_KEY = '{{endValue}}';
+/**
+ * Extracts the X-axis value from data at a specific index.
+ *
+ * @param data - Array of data points
+ * @param xKey - Property name to extract from data points
+ * @param index - Integer index (should be pre-rounded using indexRounding utils)
+ * @returns String representation of the X-axis value, or fallback to string index
+ */
+const getXAxisValue = (data, xKey, index) => {
+    // Index should already be rounded and clamped by getRangeIndices()
+    return data[index]?.[xKey]?.toString() || `${index}`;
+};
+exports.getXAxisValue = getXAxisValue;
+/**
+ * Builds screen reader text by replacing template keys with actual values
+ *
+ * @param template - Template string with {{startValue}} and/or {{endValue}} placeholders
+ * @param startValue - Value to replace {{startValue}} with
+ * @param endValue - Value to replace {{endValue}} with
+ * @returns String with placeholders replaced, or undefined if template is not provided
+ */
+const buildScreenReaderText = (template, startValue, endValue) => {
+    if (!template) {
+        return template;
+    }
+    const startValueRegExp = new RegExp(ACCESSIBILITY_START_VALUE_KEY, 'g');
+    const endValueRegExp = new RegExp(ACCESSIBILITY_END_VALUE_KEY, 'g');
+    return template.replace(startValueRegExp, startValue).replace(endValueRegExp, endValue);
+};
+/**
+ * Generates consistent accessibility labels for ZoomArea handlers and selection area.
+ *
+ * Uses the same floor/ceil logic as data filtering to ensure that screen reader
+ * announcements exactly match the boundaries of the filtered data.
+ *
+ * @param data - Array of data points
+ * @param xKey - Property name to extract X-axis values from
+ * @param currentRange - Current zoom range with start and end indices
+ * @param config - Optional configuration for custom label templates
+ * @returns Object with formatted accessibility labels for UI components
+ */
+const generateAccessibilityLabels = (data, xKey, currentRange, config) => {
+    // Use EXACT same indexing logic as useZoomData.filterData() via shared utilities
+    const { endIndex, startIndex } = (0, indexRounding_1.getRangeIndices)(currentRange, data.length);
+    const startValue = (0, exports.getXAxisValue)(data, xKey, startIndex);
+    const endValue = (0, exports.getXAxisValue)(data, xKey, endIndex);
+    // Use custom templates or fall back to simple defaults (just the values)
+    const startHandler = buildScreenReaderText(config?.startHandler, startValue, endValue) ?? startValue;
+    const endHandler = buildScreenReaderText(config?.endHandler, startValue, endValue) ?? endValue;
+    const selectionArea = buildScreenReaderText(config?.selectionArea, startValue, endValue) ??
+        `${startValue} - ${endValue}`;
+    return {
+        endHandler,
+        selectionArea,
+        startHandler,
+    };
+};
+exports.generateAccessibilityLabels = generateAccessibilityLabels;

package/dist/cjs/components/zoomArea/utils/index.d.ts

@@ -0,0 +1,4 @@
+export { getInteractionConfig } from './interactionConfig';
+export { generateCurvedPath, calculateLinesPathData } from './pathGeneration';
+export { calculateHandlerPositions, mouseToDataIndex, clampRange, createDefaultRange, isFullRange, } from './rangeAndPositions';
+//# sourceMappingURL=index.d.ts.map

package/dist/cjs/components/zoomArea/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/zoomArea/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAC9E,OAAO,EACL,yBAAyB,EACzB,gBAAgB,EAChB,UAAU,EACV,kBAAkB,EAClB,WAAW,GACZ,MAAM,qBAAqB,CAAC"}

package/dist/cjs/components/zoomArea/utils/index.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isFullRange = exports.createDefaultRange = exports.clampRange = exports.mouseToDataIndex = exports.calculateHandlerPositions = exports.calculateLinesPathData = exports.generateCurvedPath = exports.getInteractionConfig = void 0;
+var interactionConfig_1 = require("./interactionConfig");
+Object.defineProperty(exports, "getInteractionConfig", { enumerable: true, get: function () { return interactionConfig_1.getInteractionConfig; } });
+var pathGeneration_1 = require("./pathGeneration");
+Object.defineProperty(exports, "generateCurvedPath", { enumerable: true, get: function () { return pathGeneration_1.generateCurvedPath; } });
+Object.defineProperty(exports, "calculateLinesPathData", { enumerable: true, get: function () { return pathGeneration_1.calculateLinesPathData; } });
+var rangeAndPositions_1 = require("./rangeAndPositions");
+Object.defineProperty(exports, "calculateHandlerPositions", { enumerable: true, get: function () { return rangeAndPositions_1.calculateHandlerPositions; } });
+Object.defineProperty(exports, "mouseToDataIndex", { enumerable: true, get: function () { return rangeAndPositions_1.mouseToDataIndex; } });
+Object.defineProperty(exports, "clampRange", { enumerable: true, get: function () { return rangeAndPositions_1.clampRange; } });
+Object.defineProperty(exports, "createDefaultRange", { enumerable: true, get: function () { return rangeAndPositions_1.createDefaultRange; } });
+Object.defineProperty(exports, "isFullRange", { enumerable: true, get: function () { return rangeAndPositions_1.isFullRange; } });

package/dist/cjs/components/zoomArea/utils/indexRounding.d.ts

@@ -0,0 +1,63 @@
+/**
+ * Index rounding utilities for consistent data filtering and accessibility labels.
+ *
+ * These utilities ensure that both data filtering (useZoomData) and accessibility labels
+ * (generateAccessibilityLabels) use exactly the same rounding logic, preventing
+ * inconsistencies between what users see and what screen readers announce.
+ */
+/**
+ * Rounds a fractional index to be used as a start index (inclusive lower bound).
+ * Uses Math.floor() to include the current data point and everything after it.
+ *
+ * @param index - Continuous index (can be fractional)
+ * @param maxIndex - Maximum valid index (usually data.length - 1)
+ * @returns Rounded index clamped to valid bounds
+ *
+ * @example
+ * ```typescript
+ * roundStartIndex(1.3, 4); // Math.floor(1.3) = 1, clamped to [0,4] → 1
+ * roundStartIndex(-0.5, 4); // Math.floor(-0.5) = -1, clamped to [0,4] → 0
+ * ```
+ */
+export declare const roundStartIndex: (index: number, maxIndex: number) => number;
+/**
+ * Rounds a fractional index to be used as an end index (inclusive upper bound).
+ * Uses Math.ceil() to include the current data point and everything before it.
+ *
+ * @param index - Continuous index (can be fractional)
+ * @param maxIndex - Maximum valid index (usually data.length - 1)
+ * @returns Rounded index clamped to valid bounds
+ *
+ * @example
+ * ```typescript
+ * roundEndIndex(2.7, 4); // Math.ceil(2.7) = 3, clamped to [0,4] → 3
+ * roundEndIndex(5.2, 4); // Math.ceil(5.2) = 6, clamped to [0,4] → 4
+ * ```
+ */
+export declare const roundEndIndex: (index: number, maxIndex: number) => number;
+/**
+ * Converts a fractional range to integer indices using consistent rounding.
+ * This is the core function that both data filtering and accessibility use.
+ *
+ * @param range - Zoom range with potentially fractional start/end values
+ * @param dataLength - Length of the data array
+ * @returns Object with rounded startIndex and endIndex
+ *
+ * @example
+ * ```typescript
+ * const indices = getRangeIndices({ start: 1.3, end: 3.7 }, 10);
+ * // Returns: { startIndex: 1, endIndex: 4 }
+ *
+ * // This can be used for:
+ * // 1. Data filtering: data.slice(startIndex, endIndex + 1)
+ * // 2. Accessibility: data[startIndex][xKey] to data[endIndex][xKey]
+ * ```
+ */
+export declare const getRangeIndices: (range: {
+    start: number;
+    end: number;
+}, dataLength: number) => {
+    startIndex: number;
+    endIndex: number;
+};
+//# sourceMappingURL=indexRounding.d.ts.map

package/dist/cjs/components/zoomArea/utils/indexRounding.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"indexRounding.d.ts","sourceRoot":"","sources":["../../../../../src/components/zoomArea/utils/indexRounding.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,eAAe,GAAI,OAAO,MAAM,EAAE,UAAU,MAAM,KAAG,MAGjE,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,aAAa,GAAI,OAAO,MAAM,EAAE,UAAU,MAAM,KAAG,MAG/D,CAAC;AAEF;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,eAAe,GAC1B,OAAO;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,EACrC,YAAY,MAAM,KACjB;IAAE,UAAU,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAOxC,CAAC"}