@kubit-ui-web/react-charts 0.1.0 → 1.1.0

package/dist/cjs/components/tick/tick.js

@@ -1,9 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tick = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const chartText_1 = require("../../components/chartText/chartText");
-const line_1 = require("../../components/line/line");
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChartText } from '../../components/chartText/chartText';
+import { Line } from '../../components/line/line';
 /**
  * Functional component for rendering a tick mark in a chart or graph.
  *
@@ -19,5 +16,4 @@ const line_1 = require("../../components/line/line");
  * @param {number} [props.y] - Optional y-coordinate for the position of the tick mark. Used for vertical placement.
  * @returns A React functional component that renders the tick mark and its associated elements.
  */
-const Tick = ({ showTickLines, tick, tickLine, tickText }) => ((0, jsx_runtime_1.jsxs)("g", { children: [showTickLines && (0, jsx_runtime_1.jsx)(line_1.Line, { ...tickLine }), tickText && (0, jsx_runtime_1.jsx)(chartText_1.ChartText, { ...tickText, children: tick.value })] }));
-exports.Tick = Tick;
+export const Tick = ({ showTickLines, tick, tickLine, tickText }) => (_jsxs("g", { children: [showTickLines && _jsx(Line, { ...tickLine }), tickText && _jsx(ChartText, { ...tickText, children: tick.value })] }));

package/dist/cjs/components/tick/tick.types.js

@@ -1,10 +1,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TickDataUtils = void 0;
 /**
  * Utility functions for working with TickData.
  */
-exports.TickDataUtils = {
+export const TickDataUtils = {
     /**
      * Formats the values of an array of TickData using the provided formatter function.
      *

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

@@ -1,7 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.HandlerIcon = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Default color for handler icons
  */
@@ -20,7 +17,6 @@ const ICON_OFFSET = 5;
  * The icon is centered on the handler by applying a translation of:
  * x - ICON_OFFSET, y - ICON_OFFSET
  */
-const HandlerIcon = ({ fill = DEFAULT_ICON_COLOR, x, y }) => {
-    return ((0, jsx_runtime_1.jsxs)("g", { fill: fill, pointerEvents: "none", transform: `translate(${x - ICON_OFFSET}, ${y - ICON_OFFSET})`, children: [(0, jsx_runtime_1.jsx)("path", { d: "M4.99948 9.99802C4.47168 9.99802 4.04419 9.64335 4.04419 9.20547V0.79255C4.04419 0.354666 4.47168 0 4.99948 0C5.52728 0 5.95477 0.354666 5.95477 0.79255V9.20745C5.95477 9.64533 5.52728 10 4.99948 10V9.99802Z" }), (0, jsx_runtime_1.jsx)("path", { d: "M0.955289 8.78839C0.427492 8.78839 0 8.43372 0 7.99584V2.00416C0 1.56628 0.427492 1.21161 0.955289 1.21161C1.48309 1.21161 1.91058 1.56628 1.91058 2.00416V7.99584C1.91058 8.43372 1.48309 8.78839 0.955289 8.78839Z" }), (0, jsx_runtime_1.jsx)("path", { d: "M8.08936 7.99584C8.08936 8.43372 8.51685 8.78839 9.04464 8.78839C9.57244 8.78839 9.99993 8.43372 9.99993 7.99584V2.00416C9.99993 1.56628 9.57244 1.21161 9.04464 1.21161C8.51685 1.21161 8.08936 1.56628 8.08936 2.00416V7.99584Z" })] }));
+export const HandlerIcon = ({ fill = DEFAULT_ICON_COLOR, x, y }) => {
+    return (_jsxs("g", { fill: fill, pointerEvents: "none", transform: `translate(${x - ICON_OFFSET}, ${y - ICON_OFFSET})`, children: [_jsx("path", { d: "M4.99948 9.99802C4.47168 9.99802 4.04419 9.64335 4.04419 9.20547V0.79255C4.04419 0.354666 4.47168 0 4.99948 0C5.52728 0 5.95477 0.354666 5.95477 0.79255V9.20745C5.95477 9.64533 5.52728 10 4.99948 10V9.99802Z" }), _jsx("path", { d: "M0.955289 8.78839C0.427492 8.78839 0 8.43372 0 7.99584V2.00416C0 1.56628 0.427492 1.21161 0.955289 1.21161C1.48309 1.21161 1.91058 1.56628 1.91058 2.00416V7.99584C1.91058 8.43372 1.48309 8.78839 0.955289 8.78839Z" }), _jsx("path", { d: "M8.08936 7.99584C8.08936 8.43372 8.51685 8.78839 9.04464 8.78839C9.57244 8.78839 9.99993 8.43372 9.99993 7.99584V2.00416C9.99993 1.56628 9.57244 1.21161 9.04464 1.21161C8.51685 1.21161 8.08936 1.56628 8.08936 2.00416V7.99584Z" })] }));
 };
-exports.HandlerIcon = HandlerIcon;

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

@@ -1,7 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LineRenderer = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
  * Default color for lines when no stroke is provided
  */
@@ -9,7 +6,6 @@ const DEFAULT_LINE_COLOR = '#0078D4';
 /**
  * Renders all lines and fill areas for the zoom area chart
  */
-const LineRenderer = ({ linesData }) => {
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: linesData.map((lineData, index) => ((0, jsx_runtime_1.jsxs)("g", { children: [lineData.config.fill && lineData.fillPath && ((0, jsx_runtime_1.jsx)("path", { d: lineData.fillPath, fill: lineData.config.fill, fillOpacity: lineData.config.fillOpacity || 0.2, stroke: "none" })), (0, jsx_runtime_1.jsx)("path", { d: lineData.linePath, fill: "none", stroke: lineData.config.stroke || DEFAULT_LINE_COLOR, strokeWidth: lineData.config.strokeWidth || 1 })] }, lineData.config.dataKey || lineData.config.yKey || index))) }));
+export const LineRenderer = ({ linesData }) => {
+    return (_jsx(_Fragment, { children: linesData.map((lineData, index) => (_jsxs("g", { children: [lineData.config.fill && lineData.fillPath && (_jsx("path", { d: lineData.fillPath, fill: lineData.config.fill, fillOpacity: lineData.config.fillOpacity || 0.2, stroke: "none" })), _jsx("path", { d: lineData.linePath, fill: "none", stroke: lineData.config.stroke || DEFAULT_LINE_COLOR, strokeWidth: lineData.config.strokeWidth || 1 })] }, lineData.config.dataKey || lineData.config.yKey || index))) }));
 };
-exports.LineRenderer = LineRenderer;

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

@@ -1,13 +1,10 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectionArea = exports.SelectionAreaFocusRing = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const calculateFocusOutline_1 = require("../../../utils/calculateFocusOutline/calculateFocusOutline");
-const rangeAndPositions_1 = require("../utils/rangeAndPositions");
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { calculateFocusOutline } from '../../../utils/calculateFocusOutline/calculateFocusOutline';
+import { isFullRange } from '../utils/rangeAndPositions';
 /**
  * Focus ring for the selection area - rendered separately to control z-order
  */
-const SelectionAreaFocusRing = ({ endX, focusConfig, height, isFocused, startX, }) => {
+export const SelectionAreaFocusRing = ({ endX, focusConfig, height, isFocused, startX, }) => {
     if (!isFocused) {
         return null;
     }
@@ -17,7 +14,7 @@ const SelectionAreaFocusRing = ({ endX, focusConfig, height, isFocused, startX,
     const centerX = startX + selectionWidth / 2;
     const centerY = height / 2;
     // Calculate focus ring dimensions using the new util
-    const focusOutline = (0, calculateFocusOutline_1.calculateFocusOutline)({
+    const focusOutline = calculateFocusOutline({
         elementHeight: selectionHeight,
         elementPosition: { x: centerX, y: centerY },
         elementStrokeWidth: 0, // Selection area typically has no border
@@ -35,19 +32,17 @@ const SelectionAreaFocusRing = ({ endX, focusConfig, height, isFocused, startX,
     if (focusOutline.type !== 'rectangle') {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)("g", { pointerEvents: "none", children: [(0, jsx_runtime_1.jsx)("rect", { fill: "none", height: focusOutline.outer.height, stroke: outlineColor, strokeWidth: outlineStrokeWidth, width: focusOutline.outer.width, x: focusOutline.outer.x, y: focusOutline.outer.y }), (0, jsx_runtime_1.jsx)("rect", { fill: "none", height: focusOutline.inner.height, stroke: innerColor, strokeWidth: innerStrokeWidth, width: focusOutline.inner.width, x: focusOutline.inner.x, y: focusOutline.inner.y })] }));
+    return (_jsxs("g", { pointerEvents: "none", children: [_jsx("rect", { fill: "none", height: focusOutline.outer.height, stroke: outlineColor, strokeWidth: outlineStrokeWidth, width: focusOutline.outer.width, x: focusOutline.outer.x, y: focusOutline.outer.y }), _jsx("rect", { fill: "none", height: focusOutline.inner.height, stroke: innerColor, strokeWidth: innerStrokeWidth, width: focusOutline.inner.width, x: focusOutline.inner.x, y: focusOutline.inner.y })] }));
 };
-exports.SelectionAreaFocusRing = SelectionAreaFocusRing;
 /**
  * Selection area overlay
  */
-const SelectionArea = ({ currentRange, dataLength, dataTestId, endX, height, onBlur, onFocus, onKeyDown, onMouseDown, onTouchStart, screenReaderText, selectionConfig, startX, }) => {
+export const SelectionArea = ({ currentRange, dataLength, dataTestId, endX, height, onBlur, onFocus, onKeyDown, onMouseDown, onTouchStart, screenReaderText, selectionConfig, startX, }) => {
     // Check if overlay should be hidden based on design specs:
     // "Only visible when a range is defined"
-    const shouldHideOverlay = selectionConfig.hideOverlayOnFullRange && (0, rangeAndPositions_1.isFullRange)(currentRange, dataLength);
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("rect", { "aria-label": screenReaderText, "aria-valuemax": dataLength - 1, "aria-valuemin": 0, "aria-valuetext": screenReaderText, cursor: "grab", "data-testid": dataTestId, fill: selectionConfig.fill, fillOpacity: selectionConfig.fillOpacity, height: height, role: "slider", stroke: selectionConfig.stroke, strokeWidth: selectionConfig.strokeWidth, style: {
+    const shouldHideOverlay = selectionConfig.hideOverlayOnFullRange && isFullRange(currentRange, dataLength);
+    return (_jsx(_Fragment, { children: _jsx("rect", { "aria-label": screenReaderText, "aria-valuemax": dataLength - 1, "aria-valuemin": 0, "aria-valuetext": screenReaderText, cursor: "grab", "data-testid": dataTestId, fill: selectionConfig.fill, fillOpacity: selectionConfig.fillOpacity, height: height, role: "slider", stroke: selectionConfig.stroke, strokeWidth: selectionConfig.strokeWidth, style: {
                 outline: 'none',
                 visibility: shouldHideOverlay ? 'hidden' : 'visible',
             }, tabIndex: 0, width: endX - startX, x: startX, y: 0, onBlur: onBlur, onFocus: onFocus, onKeyDown: onKeyDown, onMouseDown: onMouseDown, onTouchStart: onTouchStart }) }));
 };
-exports.SelectionArea = SelectionArea;

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

@@ -1,9 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ZoomHandler = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const calculateFocusOutline_1 = require("../../../utils/calculateFocusOutline/calculateFocusOutline");
-const HandlerIcon_1 = require("./HandlerIcon");
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { calculateFocusOutline } from '../../../utils/calculateFocusOutline/calculateFocusOutline';
+import { HandlerIcon } from './HandlerIcon';
 /**
  * Default colors for zoom handlers
  */
@@ -42,11 +39,11 @@ const getHandlerStyles = (handlerConfig) => ({
 /**
  * Individual zoom handler with line, circle, and icon
  */
-const ZoomHandler = ({ dataTestId, focusConfig, handlerConfig, height, isFocused, max, min, onBlur, onFocus, onKeyDown, onMouseDown, onTouchStart, screenReaderText, x, }) => {
+export const ZoomHandler = ({ dataTestId, focusConfig, handlerConfig, height, isFocused, max, min, onBlur, onFocus, onKeyDown, onMouseDown, onTouchStart, screenReaderText, x, }) => {
     const centerY = height / 2;
     const styles = getHandlerStyles(handlerConfig);
     // Calculate focus ring dimensions using the new util
-    const focusOutline = (0, calculateFocusOutline_1.calculateFocusOutline)({
+    const focusOutline = calculateFocusOutline({
         elementHeight: styles.radius * 2,
         elementPosition: { x, y: centerY },
         elementStrokeWidth: typeof styles.strokeWidth === 'number'
@@ -58,6 +55,5 @@ const ZoomHandler = ({ dataTestId, focusConfig, handlerConfig, height, isFocused
         innerStrokeWidth: focusConfig.innerStrokeWidth,
         outlineStrokeWidth: focusConfig.outlineStrokeWidth,
     });
-    return ((0, jsx_runtime_1.jsxs)("g", { "data-testid": `${dataTestId}-group`, children: [(0, jsx_runtime_1.jsx)("line", { pointerEvents: "none", stroke: styles.verticalLineStroke, strokeWidth: styles.verticalLineStrokeWidth, x1: x, x2: x, y1: 0, y2: height }), (0, jsx_runtime_1.jsx)("circle", { "aria-label": screenReaderText, "aria-valuemax": max, "aria-valuemin": min, "aria-valuetext": screenReaderText, cursor: "ew-resize", cx: x, cy: centerY, "data-testid": dataTestId, fill: styles.fill, r: styles.radius, role: "slider", stroke: styles.stroke, strokeWidth: styles.strokeWidth, style: { outline: 'none' }, tabIndex: 0, onBlur: onBlur, onFocus: onFocus, onKeyDown: onKeyDown, onMouseDown: onMouseDown, onTouchStart: onTouchStart }), (0, jsx_runtime_1.jsx)(HandlerIcon_1.HandlerIcon, { fill: styles.iconColor, x: x, y: centerY }), isFocused && focusOutline.type === 'circle' && ((0, jsx_runtime_1.jsxs)("g", { pointerEvents: "none", children: [(0, jsx_runtime_1.jsx)("circle", { cx: focusOutline.outer.cx, cy: focusOutline.outer.cy, fill: "none", r: focusOutline.outer.r, stroke: focusConfig.outlineColor, strokeWidth: focusConfig.outlineStrokeWidth }), (0, jsx_runtime_1.jsx)("circle", { cx: focusOutline.inner.cx, cy: focusOutline.inner.cy, fill: "none", r: focusOutline.inner.r, stroke: focusConfig.innerColor, strokeWidth: focusConfig.innerStrokeWidth })] }))] }));
+    return (_jsxs("g", { "data-testid": `${dataTestId}-group`, children: [_jsx("line", { pointerEvents: "none", stroke: styles.verticalLineStroke, strokeWidth: styles.verticalLineStrokeWidth, x1: x, x2: x, y1: 0, y2: height }), _jsx("circle", { "aria-label": screenReaderText, "aria-valuemax": max, "aria-valuemin": min, "aria-valuetext": screenReaderText, cursor: "ew-resize", cx: x, cy: centerY, "data-testid": dataTestId, fill: styles.fill, r: styles.radius, role: "slider", stroke: styles.stroke, strokeWidth: styles.strokeWidth, style: { outline: 'none' }, tabIndex: 0, onBlur: onBlur, onFocus: onFocus, onKeyDown: onKeyDown, onMouseDown: onMouseDown, onTouchStart: onTouchStart }), _jsx(HandlerIcon, { fill: styles.iconColor, x: x, y: centerY }), isFocused && focusOutline.type === 'circle' && (_jsxs("g", { pointerEvents: "none", children: [_jsx("circle", { cx: focusOutline.outer.cx, cy: focusOutline.outer.cy, fill: "none", r: focusOutline.outer.r, stroke: focusConfig.outlineColor, strokeWidth: focusConfig.outlineStrokeWidth }), _jsx("circle", { cx: focusOutline.inner.cx, cy: focusOutline.inner.cy, fill: "none", r: focusOutline.inner.r, stroke: focusConfig.innerColor, strokeWidth: focusConfig.innerStrokeWidth })] }))] }));
 };
-exports.ZoomHandler = ZoomHandler;

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

@@ -1,12 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ZoomHandler = exports.SelectionAreaFocusRing = exports.SelectionArea = exports.LineRenderer = exports.HandlerIcon = void 0;
-var HandlerIcon_1 = require("./HandlerIcon");
-Object.defineProperty(exports, "HandlerIcon", { enumerable: true, get: function () { return HandlerIcon_1.HandlerIcon; } });
-var LineRenderer_1 = require("./LineRenderer");
-Object.defineProperty(exports, "LineRenderer", { enumerable: true, get: function () { return LineRenderer_1.LineRenderer; } });
-var SelectionArea_1 = require("./SelectionArea");
-Object.defineProperty(exports, "SelectionArea", { enumerable: true, get: function () { return SelectionArea_1.SelectionArea; } });
-Object.defineProperty(exports, "SelectionAreaFocusRing", { enumerable: true, get: function () { return SelectionArea_1.SelectionAreaFocusRing; } });
-var ZoomHandler_1 = require("./ZoomHandler");
-Object.defineProperty(exports, "ZoomHandler", { enumerable: true, get: function () { return ZoomHandler_1.ZoomHandler; } });
+export { HandlerIcon } from './HandlerIcon';
+export { LineRenderer } from './LineRenderer';
+export { SelectionArea, SelectionAreaFocusRing } from './SelectionArea';
+export { ZoomHandler } from './ZoomHandler';

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

@@ -1,13 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useZoomData = exports.useZoomAreaFocus = exports.useResponsiveCanvas = exports.useKeyboardNavigation = exports.useDragInteraction = void 0;
-var useDragInteraction_1 = require("./useDragInteraction");
-Object.defineProperty(exports, "useDragInteraction", { enumerable: true, get: function () { return useDragInteraction_1.useDragInteraction; } });
-var useKeyboardNavigation_1 = require("./useKeyboardNavigation");
-Object.defineProperty(exports, "useKeyboardNavigation", { enumerable: true, get: function () { return useKeyboardNavigation_1.useKeyboardNavigation; } });
-var useResponsiveCanvas_1 = require("./useResponsiveCanvas");
-Object.defineProperty(exports, "useResponsiveCanvas", { enumerable: true, get: function () { return useResponsiveCanvas_1.useResponsiveCanvas; } });
-var useZoomAreaFocus_1 = require("./useZoomAreaFocus");
-Object.defineProperty(exports, "useZoomAreaFocus", { enumerable: true, get: function () { return useZoomAreaFocus_1.useZoomAreaFocus; } });
-var useZoomData_1 = require("./useZoomData");
-Object.defineProperty(exports, "useZoomData", { enumerable: true, get: function () { return useZoomData_1.useZoomData; } });
+export { useDragInteraction } from './useDragInteraction';
+export { useKeyboardNavigation } from './useKeyboardNavigation';
+export { useResponsiveCanvas } from './useResponsiveCanvas';
+export { useZoomAreaFocus } from './useZoomAreaFocus';
+export { useZoomData } from './useZoomData';

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

@@ -1,21 +1,18 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useDragInteraction = void 0;
-const react_1 = require("react");
-const rangeAndPositions_1 = require("../utils/rangeAndPositions");
-const zoomArea_type_1 = require("../zoomArea.type");
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { clampRange, mouseToDataIndex } from '../utils/rangeAndPositions';
+import { ZoomAreaElements } from '../zoomArea.type';
 /**
  * Calculate new range based on drag type and pointer position
  */
 const calculateNewRange = (dragType, currentRange, dataIndex, dataLength, interactionConfig) => {
     const newRange = { ...currentRange };
-    if (dragType === zoomArea_type_1.ZoomAreaElements.START_HANDLER) {
+    if (dragType === ZoomAreaElements.START_HANDLER) {
         newRange.start = Math.max(0, Math.min(dataIndex, currentRange.end - interactionConfig.minHandlerDistance));
     }
-    else if (dragType === zoomArea_type_1.ZoomAreaElements.END_HANDLER) {
+    else if (dragType === ZoomAreaElements.END_HANDLER) {
         newRange.end = Math.min(dataLength - 1, Math.max(dataIndex, currentRange.start + interactionConfig.minHandlerDistance));
     }
-    else if (dragType === zoomArea_type_1.ZoomAreaElements.SELECTION_AREA) {
+    else if (dragType === ZoomAreaElements.SELECTION_AREA) {
         // Moving entire selection
         const selectionWidth = currentRange.end - currentRange.start;
         const newStart = Math.max(0, Math.min(dataLength - 1 - selectionWidth, dataIndex - selectionWidth / 2));
@@ -34,22 +31,22 @@ const calculateNewRange = (dragType, currentRange, dataIndex, dataLength, intera
  * @param params - Configuration parameters for drag functionality
  * @returns Object with drag handlers and state
  */
-const useDragInteraction = (params) => {
+export const useDragInteraction = (params) => {
     const { currentRange, dataLength, interactionConfig, onRangeChange, width } = params;
-    const groupRef = (0, react_1.useRef)(null);
-    const [isDragging, setIsDragging] = (0, react_1.useState)(null);
-    const handleMouseDown = (0, react_1.useCallback)((target) => {
+    const groupRef = useRef(null);
+    const [isDragging, setIsDragging] = useState(null);
+    const handleMouseDown = useCallback((target) => {
         return () => {
             setIsDragging(target);
         };
     }, []);
-    const handleTouchStart = (0, react_1.useCallback)((target) => {
+    const handleTouchStart = useCallback((target) => {
         return () => {
             setIsDragging(target);
         };
     }, []);
     // Common logic for handling pointer movement (mouse or touch)
-    const handlePointerMove = (0, react_1.useCallback)((clientX) => {
+    const handlePointerMove = useCallback((clientX) => {
         if (!isDragging || !groupRef.current) {
             return;
         }
@@ -62,15 +59,15 @@ const useDragInteraction = (params) => {
         const rect = svgElement.getBoundingClientRect();
         const pointerX = clientX - rect.left;
         // Convert pointer X to data index (0 to dataLength-1)
-        const dataIndex = (0, rangeAndPositions_1.mouseToDataIndex)(pointerX, width, dataLength);
+        const dataIndex = mouseToDataIndex(pointerX, width, dataLength);
         const newRange = calculateNewRange(isDragging, currentRange, dataIndex, dataLength, interactionConfig);
-        const clampedRange = (0, rangeAndPositions_1.clampRange)(newRange, dataLength, interactionConfig.minHandlerDistance);
+        const clampedRange = clampRange(newRange, dataLength, interactionConfig.minHandlerDistance);
         onRangeChange(clampedRange);
     }, [isDragging, width, dataLength, currentRange, onRangeChange, interactionConfig]);
-    const handleMouseMove = (0, react_1.useCallback)((event) => {
+    const handleMouseMove = useCallback((event) => {
         handlePointerMove(event.clientX);
     }, [handlePointerMove]);
-    const handleTouchMove = (0, react_1.useCallback)((event) => {
+    const handleTouchMove = useCallback((event) => {
         if (event.touches.length === 0) {
             return;
         }
@@ -78,14 +75,14 @@ const useDragInteraction = (params) => {
         event.preventDefault();
         handlePointerMove(event.touches[0].clientX);
     }, [handlePointerMove]);
-    const handleMouseUp = (0, react_1.useCallback)(() => {
+    const handleMouseUp = useCallback(() => {
         setIsDragging(null);
     }, []);
-    const handleTouchEnd = (0, react_1.useCallback)(() => {
+    const handleTouchEnd = useCallback(() => {
         setIsDragging(null);
     }, []);
     // Set up global mouse and touch events when dragging
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (isDragging) {
             // Mouse events
             document.addEventListener('mousemove', handleMouseMove);
@@ -111,4 +108,3 @@ const useDragInteraction = (params) => {
         isDragging,
     };
 };
-exports.useDragInteraction = useDragInteraction;

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

@@ -1,21 +1,18 @@
-"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");
+import { useCallback } from 'react';
+import { clampRange } from '../utils/rangeAndPositions';
+import { ZoomAreaElements } from '../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) {
+    if (target === ZoomAreaElements.START_HANDLER) {
         newRange.start = Math.max(0, currentRange.start - step);
     }
-    else if (target === zoomArea_type_1.ZoomAreaElements.END_HANDLER) {
+    else if (target === ZoomAreaElements.END_HANDLER) {
         newRange.end = Math.max(currentRange.start + interactionConfig.minHandlerDistance, currentRange.end - step);
     }
-    else if (target === zoomArea_type_1.ZoomAreaElements.SELECTION_AREA) {
+    else if (target === ZoomAreaElements.SELECTION_AREA) {
         // Move entire selection left
         const selectionWidth = currentRange.end - currentRange.start;
         const newStart = Math.max(0, currentRange.start - step);
@@ -29,13 +26,13 @@ const handleArrowLeft = (target, currentRange, step, interactionConfig) => {
  */
 const handleArrowRight = (target, currentRange, step, dataLength, interactionConfig) => {
     const newRange = { ...currentRange };
-    if (target === zoomArea_type_1.ZoomAreaElements.START_HANDLER) {
+    if (target === ZoomAreaElements.START_HANDLER) {
         newRange.start = Math.min(currentRange.end - interactionConfig.minHandlerDistance, currentRange.start + step);
     }
-    else if (target === zoomArea_type_1.ZoomAreaElements.END_HANDLER) {
+    else if (target === ZoomAreaElements.END_HANDLER) {
         newRange.end = Math.min(dataLength - 1, currentRange.end + step);
     }
-    else if (target === zoomArea_type_1.ZoomAreaElements.SELECTION_AREA) {
+    else if (target === ZoomAreaElements.SELECTION_AREA) {
         // Move entire selection right
         const selectionWidth = currentRange.end - currentRange.start;
         const newStart = Math.min(dataLength - 1 - selectionWidth, currentRange.start + step);
@@ -49,13 +46,13 @@ const handleArrowRight = (target, currentRange, step, dataLength, interactionCon
  */
 const handleHome = (target, currentRange, dataLength) => {
     const newRange = { ...currentRange };
-    if (target === zoomArea_type_1.ZoomAreaElements.START_HANDLER) {
+    if (target === ZoomAreaElements.START_HANDLER) {
         newRange.start = 0;
     }
-    else if (target === zoomArea_type_1.ZoomAreaElements.END_HANDLER) {
+    else if (target === ZoomAreaElements.END_HANDLER) {
         newRange.end = dataLength - 1;
     }
-    else if (target === zoomArea_type_1.ZoomAreaElements.SELECTION_AREA) {
+    else if (target === ZoomAreaElements.SELECTION_AREA) {
         const selectionWidth = currentRange.end - currentRange.start;
         newRange.start = 0;
         newRange.end = selectionWidth;
@@ -67,13 +64,13 @@ const handleHome = (target, currentRange, dataLength) => {
  */
 const handleEnd = (target, currentRange, dataLength, interactionConfig) => {
     const newRange = { ...currentRange };
-    if (target === zoomArea_type_1.ZoomAreaElements.START_HANDLER) {
+    if (target === ZoomAreaElements.START_HANDLER) {
         newRange.start = currentRange.end - interactionConfig.minHandlerDistance;
     }
-    else if (target === zoomArea_type_1.ZoomAreaElements.END_HANDLER) {
+    else if (target === ZoomAreaElements.END_HANDLER) {
         newRange.end = dataLength - 1;
     }
-    else if (target === zoomArea_type_1.ZoomAreaElements.SELECTION_AREA) {
+    else if (target === ZoomAreaElements.SELECTION_AREA) {
         const selectionWidth = currentRange.end - currentRange.start;
         newRange.start = dataLength - 1 - selectionWidth;
         newRange.end = dataLength - 1;
@@ -86,9 +83,9 @@ const handleEnd = (target, currentRange, dataLength, interactionConfig) => {
  * @param params - Configuration parameters for keyboard navigation
  * @returns Object with keyboard event handlers
  */
-const useKeyboardNavigation = (params) => {
+export const useKeyboardNavigation = (params) => {
     const { currentRange, dataLength, interactionConfig, onRangeChange } = params;
-    const handleKeyDown = (0, react_1.useCallback)((target) => {
+    const handleKeyDown = useCallback((target) => {
         return (event) => {
             // Shift key = fast navigation, normal keys = precise control
             const step = event.shiftKey
@@ -117,10 +114,9 @@ const useKeyboardNavigation = (params) => {
                 default:
                     return; // Don't handle other keys
             }
-            const clampedRange = (0, rangeAndPositions_1.clampRange)(newRange, dataLength, interactionConfig.minHandlerDistance);
+            const clampedRange = clampRange(newRange, dataLength, interactionConfig.minHandlerDistance);
             onRangeChange(clampedRange);
         };
     }, [currentRange, dataLength, onRangeChange, interactionConfig]);
     return { handleKeyDown };
 };
-exports.useKeyboardNavigation = useKeyboardNavigation;

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

@@ -1,18 +1,15 @@
-"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, }) => {
+import { useEffect, useMemo, useState } from 'react';
+import { buildViewBox } from '../../../components/svgContainer/utils/buildViewBox/buildViewBox';
+import { getCanvasDimensions } from '../../../utils/getCanvasDimensions/getCanvasDimensions';
+import { parseStringToNumberPx } from '../../../utils/parseStringToNumberPx.ts/parseStringToNumberPx';
+export const useResponsiveCanvas = ({ canvasConfig, dataTestId, extraSpace = 0, height, width, }) => {
     // State for parsed/calculated dimensions
-    const [parsedCanvas, setParsedCanvas] = (0, react_1.useState)({
+    const [parsedCanvas, setParsedCanvas] = useState({
         height: 0,
         width: 0,
     });
     // Determine effective configuration (legacy vs modern API)
-    const effectiveCanvasConfig = (0, react_1.useMemo)(() => {
+    const effectiveCanvasConfig = useMemo(() => {
         if (canvasConfig) {
             // Legacy mode: use provided canvasConfig
             return canvasConfig;
@@ -27,17 +24,17 @@ const useResponsiveCanvas = ({ canvasConfig, dataTestId, extraSpace = 0, height,
     // Extract and parse canvas configuration
     const { extraSpace: canvasExtraSpace, height: canvasHeight, width: canvasWidth, } = effectiveCanvasConfig;
     const parsedCanvasExtraSpace = canvasExtraSpace
-        ? (0, parseStringToNumberPx_1.parseStringToNumberPx)(canvasExtraSpace)
+        ? parseStringToNumberPx(canvasExtraSpace)
         : undefined;
     // Set up responsive dimensions with ResizeObserver
-    (0, react_1.useEffect)(() => {
+    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)({
+            const { parsedCanvasHeight, parsedCanvasWidth } = getCanvasDimensions({
                 canvasHeight,
                 canvasWidth,
                 svgElement,
@@ -62,8 +59,8 @@ const useResponsiveCanvas = ({ canvasConfig, dataTestId, extraSpace = 0, height,
         };
     }, [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);
+    const viewBox = useMemo(() => {
+        const calculatedViewBox = buildViewBox(parsedCanvas.width, parsedCanvas.height, parsedCanvasExtraSpace);
         return calculatedViewBox;
     }, [parsedCanvas.width, parsedCanvas.height, parsedCanvasExtraSpace]);
     return {
@@ -71,4 +68,3 @@ const useResponsiveCanvas = ({ canvasConfig, dataTestId, extraSpace = 0, height,
         viewBox,
     };
 };
-exports.useResponsiveCanvas = useResponsiveCanvas;

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

@@ -1,7 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useZoomAreaFocus = void 0;
-const react_1 = require("react");
+import { useCallback, useState } from 'react';
 /**
  * Custom hook for managing focus state of zoom area elements.
  *
@@ -11,16 +8,16 @@ const react_1 = require("react");
  * @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) => {
+export const useZoomAreaFocus = () => {
+    const [focusedElement, setFocusedElement] = useState(null);
+    const handleFocus = useCallback((target) => {
         return () => setFocusedElement(target);
     }, []);
-    const handleBlur = (0, react_1.useCallback)(() => {
+    const handleBlur = useCallback(() => {
         setFocusedElement(null);
     }, []);
     // Helper function to check focus state
-    const isFocused = (0, react_1.useCallback)((target) => {
+    const isFocused = useCallback((target) => {
         return focusedElement === target;
     }, [focusedElement]);
     return {
@@ -29,4 +26,3 @@ const useZoomAreaFocus = () => {
         isFocused,
     };
 };
-exports.useZoomAreaFocus = useZoomAreaFocus;

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

@@ -1,20 +1,17 @@
-"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, }) => {
+import { useEffect, useState } from 'react';
+import { getRangeIndices } from '../utils/indexRounding';
+import { createDefaultRange } from '../utils/rangeAndPositions';
+export 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);
+    const defaultRange = initialRange || createDefaultRange(data.length);
+    const [currentRange, setCurrentRange] = 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 { endIndex, startIndex } = getRangeIndices(range, data.length);
         const filteredData = data.slice(startIndex, endIndex + 1);
         onDataChange(filteredData);
     };
@@ -24,7 +21,7 @@ const useZoomData = ({ data, initialRange, onDataChange, }) => {
         filterData(newRange);
     };
     // Emit initial filtered data on mount
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         filterData(currentRange);
     }, []);
     return {
@@ -32,4 +29,3 @@ const useZoomData = ({ data, initialRange, onDataChange, }) => {
         handleRangeChange,
     };
 };
-exports.useZoomData = useZoomData;

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

@@ -1,21 +1,5 @@
-"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);
+export * from './components';
+export * from './hooks';
+export * from './utils';
+export * from './zoomArea';
+export * from './zoomArea.type';

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

@@ -1,7 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.generateAccessibilityLabels = exports.getXAxisValue = void 0;
-const indexRounding_1 = require("./indexRounding");
+import { getRangeIndices } from './indexRounding';
 // Template keys for accessibility labels
 const ACCESSIBILITY_START_VALUE_KEY = '{{startValue}}';
 const ACCESSIBILITY_END_VALUE_KEY = '{{endValue}}';
@@ -13,11 +10,10 @@ const ACCESSIBILITY_END_VALUE_KEY = '{{endValue}}';
  * @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) => {
+export 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
  *
@@ -46,11 +42,11 @@ const buildScreenReaderText = (template, startValue, endValue) => {
  * @param config - Optional configuration for custom label templates
  * @returns Object with formatted accessibility labels for UI components
  */
-const generateAccessibilityLabels = (data, xKey, currentRange, config) => {
+export 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);
+    const { endIndex, startIndex } = getRangeIndices(currentRange, data.length);
+    const startValue = getXAxisValue(data, xKey, startIndex);
+    const endValue = 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;
@@ -62,4 +58,3 @@ const generateAccessibilityLabels = (data, xKey, currentRange, config) => {
         startHandler,
     };
 };
-exports.generateAccessibilityLabels = generateAccessibilityLabels;