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

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

@@ -1,14 +1,3 @@
-"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; } });
+export { getInteractionConfig } from './interactionConfig';
+export { generateCurvedPath, calculateLinesPathData } from './pathGeneration';
+export { calculateHandlerPositions, mouseToDataIndex, clampRange, createDefaultRange, isFullRange, } from './rangeAndPositions';

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

@@ -1,4 +1,3 @@
-"use strict";
 /**
  * Index rounding utilities for consistent data filtering and accessibility labels.
  *
@@ -6,8 +5,6 @@
  * (generateAccessibilityLabels) use exactly the same rounding logic, preventing
  * inconsistencies between what users see and what screen readers announce.
  */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getRangeIndices = exports.roundEndIndex = exports.roundStartIndex = void 0;
 /**
  * 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.
@@ -22,11 +19,10 @@ exports.getRangeIndices = exports.roundEndIndex = exports.roundStartIndex = void
  * roundStartIndex(-0.5, 4); // Math.floor(-0.5) = -1, clamped to [0,4] → 0
  * ```
  */
-const roundStartIndex = (index, maxIndex) => {
+export const roundStartIndex = (index, maxIndex) => {
     const rounded = Math.floor(index);
     return Math.max(0, Math.min(maxIndex, rounded));
 };
-exports.roundStartIndex = roundStartIndex;
 /**
  * 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.
@@ -41,11 +37,10 @@ exports.roundStartIndex = roundStartIndex;
  * roundEndIndex(5.2, 4); // Math.ceil(5.2) = 6, clamped to [0,4] → 4
  * ```
  */
-const roundEndIndex = (index, maxIndex) => {
+export const roundEndIndex = (index, maxIndex) => {
     const rounded = Math.ceil(index);
     return Math.max(0, Math.min(maxIndex, rounded));
 };
-exports.roundEndIndex = roundEndIndex;
 /**
  * Converts a fractional range to integer indices using consistent rounding.
  * This is the core function that both data filtering and accessibility use.
@@ -64,11 +59,10 @@ exports.roundEndIndex = roundEndIndex;
  * // 2. Accessibility: data[startIndex][xKey] to data[endIndex][xKey]
  * ```
  */
-const getRangeIndices = (range, dataLength) => {
+export const getRangeIndices = (range, dataLength) => {
     const maxIndex = Math.max(0, dataLength - 1);
     return {
-        endIndex: (0, exports.roundEndIndex)(range.end, maxIndex),
-        startIndex: (0, exports.roundStartIndex)(range.start, maxIndex),
+        endIndex: roundEndIndex(range.end, maxIndex),
+        startIndex: roundStartIndex(range.start, maxIndex),
     };
 };
-exports.getRangeIndices = getRangeIndices;

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

@@ -1,6 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getInteractionConfig = void 0;
 /**
  * Default configuration for ZoomArea interactions
  */
@@ -19,9 +16,8 @@ const DEFAULT_INTERACTION_CONFIG = {
  * @param config - Optional user configuration
  * @returns Complete interaction configuration with defaults applied
  */
-const getInteractionConfig = (config) => ({
+export const getInteractionConfig = (config) => ({
     keyboardFastStep: config?.keyboardFastStep ?? DEFAULT_INTERACTION_CONFIG.KEYBOARD_FAST_STEP,
     keyboardStep: config?.keyboardStep ?? DEFAULT_INTERACTION_CONFIG.KEYBOARD_STEP,
     minHandlerDistance: config?.minHandlerDistance ?? DEFAULT_INTERACTION_CONFIG.MIN_HANDLER_DISTANCE,
 });
-exports.getInteractionConfig = getInteractionConfig;

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

@@ -1,6 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.calculateLinesPathData = exports.generateCurvedPath = void 0;
 /**
  * Path generation utilities for ZoomArea SVG rendering
  */
@@ -21,7 +18,7 @@ exports.calculateLinesPathData = exports.generateCurvedPath = void 0;
  * // Returns: "M 0 10 C 3 10, 7 20, 10 20 C 13 20, 17 15, 20 15"
  * ```
  */
-const generateCurvedPath = (points) => {
+export const generateCurvedPath = (points) => {
     if (points.length === 0) {
         return '';
     }
@@ -42,7 +39,6 @@ const generateCurvedPath = (points) => {
     });
     return path;
 };
-exports.generateCurvedPath = generateCurvedPath;
 /**
  * Calculates path data for all lines with unified Y-scale, supporting both curved and straight lines.
  *
@@ -72,7 +68,7 @@ exports.generateCurvedPath = generateCurvedPath;
  * // Returns: [{ linePath: "M 0 80 C...", fillPath: "", config: {...} }, ...]
  * ```
  */
-const calculateLinesPathData = (data, lines, width, height) => {
+export const calculateLinesPathData = (data, lines, width, height) => {
     if (data.length === 0 || lines.length === 0) {
         return [];
     }
@@ -97,14 +93,14 @@ const calculateLinesPathData = (data, lines, width, height) => {
         });
         // Generate line path - curved or straight based on config
         const linePath = lineConfig.curved
-            ? (0, exports.generateCurvedPath)(pathPoints)
+            ? generateCurvedPath(pathPoints)
             : `M ${pathPoints.map(([x, y]) => `${x},${y}`).join(' L ')}`;
         // Generate fill path if needed
         let fillPath = '';
         if (lineConfig.fill) {
             // For fill, extend to the bottom of the chart (full height)
             fillPath = lineConfig.curved
-                ? `${(0, exports.generateCurvedPath)(pathPoints)} L ${width} ${height} L 0 ${height} Z`
+                ? `${generateCurvedPath(pathPoints)} L ${width} ${height} L 0 ${height} Z`
                 : `${linePath} L ${width},${height} L 0,${height} Z`;
         }
         return {
@@ -114,4 +110,3 @@ const calculateLinesPathData = (data, lines, width, height) => {
         };
     });
 };
-exports.calculateLinesPathData = calculateLinesPathData;

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

@@ -1,6 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.isFullRange = exports.createDefaultRange = exports.clampRange = exports.mouseToDataIndex = exports.calculateHandlerPositions = void 0;
 /**
  * Range operations and position calculation utilities for ZoomArea
  */
@@ -12,12 +9,11 @@ exports.isFullRange = exports.createDefaultRange = exports.clampRange = exports.
  * @param width - Canvas width for scaling
  * @returns Object with startX and endX positions
  */
-const calculateHandlerPositions = (currentRange, dataLength, width) => {
+export const calculateHandlerPositions = (currentRange, dataLength, width) => {
     const startX = (currentRange.start / Math.max(1, dataLength - 1)) * width;
     const endX = (currentRange.end / Math.max(1, dataLength - 1)) * width;
     return { endX, startX };
 };
-exports.calculateHandlerPositions = calculateHandlerPositions;
 /**
  * Converts mouse position to continuous data index
  *
@@ -26,12 +22,11 @@ exports.calculateHandlerPositions = calculateHandlerPositions;
  * @param dataLength - Total length of the dataset
  * @returns Data index
  */
-const mouseToDataIndex = (mouseX, width, dataLength) => {
+export const mouseToDataIndex = (mouseX, width, dataLength) => {
     const relativeX = Math.max(0, Math.min(width, mouseX));
     const normalizedPosition = relativeX / width;
     return Math.round(normalizedPosition * (dataLength - 1));
 };
-exports.mouseToDataIndex = mouseToDataIndex;
 /**
  * Clamps a range to valid bounds
  *
@@ -40,7 +35,7 @@ exports.mouseToDataIndex = mouseToDataIndex;
  * @param minDistance - Minimum distance between start and end (default: 0.1)
  * @returns Clamped range within valid bounds
  */
-const clampRange = (range, dataLength, minDistance = 0.1) => {
+export const clampRange = (range, dataLength, minDistance = 0.1) => {
     const clampedStart = Math.max(0, Math.min(range.start, dataLength - 1 - minDistance));
     const clampedEnd = Math.min(dataLength - 1, Math.max(range.end, clampedStart + minDistance));
     return {
@@ -48,18 +43,16 @@ const clampRange = (range, dataLength, minDistance = 0.1) => {
         start: clampedStart,
     };
 };
-exports.clampRange = clampRange;
 /**
  * Creates a default range for the given data length
  *
  * @param dataLength - Total length of the dataset
  * @returns Default range covering the full dataset
  */
-const createDefaultRange = (dataLength) => ({
+export const createDefaultRange = (dataLength) => ({
     end: Math.max(0, dataLength - 1),
     start: 0,
 });
-exports.createDefaultRange = createDefaultRange;
 /**
  * Determines if the current range covers the full dataset.
  * According to design specs: overlay is "only visible when a range is defined".
@@ -77,7 +70,6 @@ exports.createDefaultRange = createDefaultRange;
  * isFullRange({ start: 0, end: 7 }, 10); // false - partial selection
  * ```
  */
-const isFullRange = (range, dataLength) => {
+export const isFullRange = (range, dataLength) => {
     return range.start === 0 && range.end === dataLength - 1;
 };
-exports.isFullRange = isFullRange;

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

@@ -1,6 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getSelectionConfig = void 0;
 /**
  * Default configuration for ZoomArea selection area
  */
@@ -23,11 +20,10 @@ const DEFAULT_SELECTION_CONFIG = {
  * @param config - Optional user configuration
  * @returns Complete selection configuration with defaults applied
  */
-const getSelectionConfig = (config) => ({
+export const getSelectionConfig = (config) => ({
     fill: config?.fill ?? DEFAULT_SELECTION_CONFIG.FILL,
     fillOpacity: config?.fillOpacity ?? DEFAULT_SELECTION_CONFIG.FILL_OPACITY,
     hideOverlayOnFullRange: config?.hideOverlayOnFullRange ?? DEFAULT_SELECTION_CONFIG.HIDE_OVERLAY_ON_FULL_RANGE,
     stroke: config?.stroke ?? DEFAULT_SELECTION_CONFIG.STROKE,
     strokeWidth: config?.strokeWidth ?? DEFAULT_SELECTION_CONFIG.STROKE_WIDTH,
 });
-exports.getSelectionConfig = getSelectionConfig;

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

@@ -1,25 +1,22 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ZoomArea = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const svgContainer_1 = require("../../components/svgContainer/svgContainer");
-const calculateFocusOutline_1 = require("../../utils/calculateFocusOutline/calculateFocusOutline");
-const getDataFingerprint_1 = require("../../utils/getDataFingerprint/getDataFingerprint");
-const LineRenderer_1 = require("./components/LineRenderer");
-const SelectionArea_1 = require("./components/SelectionArea");
-const ZoomHandler_1 = require("./components/ZoomHandler");
-const useDragInteraction_1 = require("./hooks/useDragInteraction");
-const useKeyboardNavigation_1 = require("./hooks/useKeyboardNavigation");
-const useResponsiveCanvas_1 = require("./hooks/useResponsiveCanvas");
-const useZoomAreaFocus_1 = require("./hooks/useZoomAreaFocus");
-const useZoomData_1 = require("./hooks/useZoomData");
-const accessibilityLabels_1 = require("./utils/accessibilityLabels");
-const interactionConfig_1 = require("./utils/interactionConfig");
-const pathGeneration_1 = require("./utils/pathGeneration");
-const rangeAndPositions_1 = require("./utils/rangeAndPositions");
-const selectionConfig_1 = require("./utils/selectionConfig");
-const zoomArea_type_1 = require("./zoomArea.type");
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { SvgContainer } from '../../components/svgContainer/svgContainer';
+import { getFocusConfig } from '../../utils/calculateFocusOutline/calculateFocusOutline';
+import { getDataFingerprint } from '../../utils/getDataFingerprint/getDataFingerprint';
+import { LineRenderer } from './components/LineRenderer';
+import { SelectionArea, SelectionAreaFocusRing } from './components/SelectionArea';
+import { ZoomHandler } from './components/ZoomHandler';
+import { useDragInteraction } from './hooks/useDragInteraction';
+import { useKeyboardNavigation } from './hooks/useKeyboardNavigation';
+import { useResponsiveCanvas } from './hooks/useResponsiveCanvas';
+import { useZoomAreaFocus } from './hooks/useZoomAreaFocus';
+import { useZoomData } from './hooks/useZoomData';
+import { generateAccessibilityLabels } from './utils/accessibilityLabels';
+import { getInteractionConfig } from './utils/interactionConfig';
+import { calculateLinesPathData } from './utils/pathGeneration';
+import { calculateHandlerPositions } from './utils/rangeAndPositions';
+import { getSelectionConfig } from './utils/selectionConfig';
+import { ZoomAreaElements } from './zoomArea.type';
 /**
  * `ZoomArea` component that renders a scaled chart with draggable zoom handlers for interactive data filtering.
  *
@@ -29,56 +26,55 @@ const zoomArea_type_1 = require("./zoomArea.type");
  *
  * @returns A React functional component that renders an SVG-based zoom area with interactive handlers and accessibility features.
  */
-const ZoomArea = ({ ariaHidden, ariaLabel, backgroundColor, canvasConfig, // Optional - auto-calculated based on width/height if not provided
+export const ZoomArea = ({ ariaHidden, ariaLabel, backgroundColor, canvasConfig, // Optional - auto-calculated based on width/height if not provided
 caption, classNames, data, focusConfig, handlerConfig, height = '40px', // 2.5rem, defined by size_400 token in Figma
 initialRange, interactionConfig, lines, onDataChange, role, screenReaderTextConfig, selectionConfig, width = '100%', xKey, ...eventHandlers }) => {
     const dataTestId = 'zoom-area';
     // Resolve interaction config with defaults
-    const resolvedInteractionConfig = (0, interactionConfig_1.getInteractionConfig)(interactionConfig);
+    const resolvedInteractionConfig = getInteractionConfig(interactionConfig);
     // Resolve selection config with defaults
-    const resolvedSelectionConfig = (0, selectionConfig_1.getSelectionConfig)(selectionConfig);
+    const resolvedSelectionConfig = getSelectionConfig(selectionConfig);
     // Resolve focus config with defaults
-    const resolvedFocusConfig = (0, calculateFocusOutline_1.getFocusConfig)(focusConfig);
+    const resolvedFocusConfig = getFocusConfig(focusConfig);
     // Hook for core data filtering functionality
-    const { currentRange, handleRangeChange } = (0, useZoomData_1.useZoomData)({
+    const { currentRange, handleRangeChange } = useZoomData({
         data,
         initialRange,
         onDataChange,
     });
     // Hook for responsive dimensions of the component when set as percentage
-    const { parsedCanvas, viewBox } = (0, useResponsiveCanvas_1.useResponsiveCanvas)({
+    const { parsedCanvas, viewBox } = useResponsiveCanvas({
         canvasConfig,
         dataTestId,
         height,
         width,
     });
     // Create a fingerprint of the data/lines to avoid unnecessary updates
-    const dataFingerprint = (0, getDataFingerprint_1.getDataFingerprint)(data);
+    const dataFingerprint = getDataFingerprint(data);
     const linesFingerprint = JSON.stringify(lines);
-    const accessibilityLabels = (0, accessibilityLabels_1.generateAccessibilityLabels)(data, xKey, currentRange, screenReaderTextConfig);
+    const accessibilityLabels = generateAccessibilityLabels(data, xKey, currentRange, screenReaderTextConfig);
     // Memoize expensive line calculations
-    const linesData = (0, react_1.useMemo)(() => {
-        return (0, pathGeneration_1.calculateLinesPathData)(data, lines, parsedCanvas.width, parsedCanvas.height);
+    const linesData = useMemo(() => {
+        return calculateLinesPathData(data, lines, parsedCanvas.width, parsedCanvas.height);
     }, [dataFingerprint, linesFingerprint, parsedCanvas.width, parsedCanvas.height]);
     // Memoize handler positions calculation
-    const { endX, startX } = (0, react_1.useMemo)(() => (0, rangeAndPositions_1.calculateHandlerPositions)(currentRange, data.length, parsedCanvas.width), [currentRange, dataFingerprint, parsedCanvas.width]);
+    const { endX, startX } = useMemo(() => calculateHandlerPositions(currentRange, data.length, parsedCanvas.width), [currentRange, dataFingerprint, parsedCanvas.width]);
     // Interaction hooks
-    const { handleBlur, handleFocus, isFocused } = (0, useZoomAreaFocus_1.useZoomAreaFocus)();
-    const { handleKeyDown } = (0, useKeyboardNavigation_1.useKeyboardNavigation)({
+    const { handleBlur, handleFocus, isFocused } = useZoomAreaFocus();
+    const { handleKeyDown } = useKeyboardNavigation({
         currentRange,
         dataLength: data.length,
         interactionConfig: resolvedInteractionConfig,
         onRangeChange: handleRangeChange,
     });
-    const { groupRef, handleMouseDown, handleTouchStart } = (0, useDragInteraction_1.useDragInteraction)({
+    const { groupRef, handleMouseDown, handleTouchStart } = useDragInteraction({
         currentRange,
         dataLength: data.length,
         interactionConfig: resolvedInteractionConfig,
         onRangeChange: handleRangeChange,
         width: parsedCanvas.width,
     });
-    return ((0, jsx_runtime_1.jsxs)(svgContainer_1.SvgContainer, { ref: groupRef, ariaHidden: ariaHidden, ariaLabel: ariaLabel, backgroundColor: backgroundColor, caption: caption, className: classNames, "data-testid": dataTestId, height: height, 
+    return (_jsxs(SvgContainer, { ref: groupRef, ariaHidden: ariaHidden, ariaLabel: ariaLabel, backgroundColor: backgroundColor, caption: caption, className: classNames, "data-testid": dataTestId, height: height, 
         // set overflow visible so handlers and focus rings are visible always
-        overflow: "visible", role: role, viewBox: viewBox, width: width, ...eventHandlers, children: [(0, jsx_runtime_1.jsx)(LineRenderer_1.LineRenderer, { linesData: linesData }), (0, jsx_runtime_1.jsx)(SelectionArea_1.SelectionArea, { currentRange: currentRange, dataLength: data.length, dataTestId: `${dataTestId}-selection-area`, endX: endX, height: parsedCanvas.height, screenReaderText: accessibilityLabels.selectionArea, selectionConfig: resolvedSelectionConfig, startX: startX, onBlur: handleBlur, onFocus: handleFocus(zoomArea_type_1.ZoomAreaElements.SELECTION_AREA), onKeyDown: handleKeyDown(zoomArea_type_1.ZoomAreaElements.SELECTION_AREA), onMouseDown: handleMouseDown(zoomArea_type_1.ZoomAreaElements.SELECTION_AREA), onTouchStart: handleTouchStart(zoomArea_type_1.ZoomAreaElements.SELECTION_AREA) }), (0, jsx_runtime_1.jsx)(ZoomHandler_1.ZoomHandler, { dataTestId: `${dataTestId}-start-handler`, focusConfig: resolvedFocusConfig, handlerConfig: handlerConfig, height: parsedCanvas.height, isFocused: isFocused(zoomArea_type_1.ZoomAreaElements.START_HANDLER), max: currentRange.end - resolvedInteractionConfig.minHandlerDistance, min: 0, screenReaderText: accessibilityLabels.startHandler, type: zoomArea_type_1.ZoomAreaElements.START_HANDLER, value: currentRange.start, x: startX, onBlur: handleBlur, onFocus: handleFocus(zoomArea_type_1.ZoomAreaElements.START_HANDLER), onKeyDown: handleKeyDown(zoomArea_type_1.ZoomAreaElements.START_HANDLER), onMouseDown: handleMouseDown(zoomArea_type_1.ZoomAreaElements.START_HANDLER), onTouchStart: handleTouchStart(zoomArea_type_1.ZoomAreaElements.START_HANDLER) }), (0, jsx_runtime_1.jsx)(ZoomHandler_1.ZoomHandler, { dataTestId: `${dataTestId}-end-handler`, focusConfig: resolvedFocusConfig, handlerConfig: handlerConfig, height: parsedCanvas.height, isFocused: isFocused(zoomArea_type_1.ZoomAreaElements.END_HANDLER), max: data.length - 1, min: currentRange.start + resolvedInteractionConfig.minHandlerDistance, screenReaderText: accessibilityLabels.endHandler, type: zoomArea_type_1.ZoomAreaElements.END_HANDLER, value: currentRange.end, x: endX, onBlur: handleBlur, onFocus: handleFocus(zoomArea_type_1.ZoomAreaElements.END_HANDLER), onKeyDown: handleKeyDown(zoomArea_type_1.ZoomAreaElements.END_HANDLER), onMouseDown: handleMouseDown(zoomArea_type_1.ZoomAreaElements.END_HANDLER), onTouchStart: handleTouchStart(zoomArea_type_1.ZoomAreaElements.END_HANDLER) }), (0, jsx_runtime_1.jsx)(SelectionArea_1.SelectionAreaFocusRing, { endX: endX, focusConfig: resolvedFocusConfig, height: parsedCanvas.height, isFocused: isFocused(zoomArea_type_1.ZoomAreaElements.SELECTION_AREA), startX: startX })] }));
+        overflow: "visible", role: role, viewBox: viewBox, width: width, ...eventHandlers, children: [_jsx(LineRenderer, { linesData: linesData }), _jsx(SelectionArea, { currentRange: currentRange, dataLength: data.length, dataTestId: `${dataTestId}-selection-area`, endX: endX, height: parsedCanvas.height, screenReaderText: accessibilityLabels.selectionArea, selectionConfig: resolvedSelectionConfig, startX: startX, onBlur: handleBlur, onFocus: handleFocus(ZoomAreaElements.SELECTION_AREA), onKeyDown: handleKeyDown(ZoomAreaElements.SELECTION_AREA), onMouseDown: handleMouseDown(ZoomAreaElements.SELECTION_AREA), onTouchStart: handleTouchStart(ZoomAreaElements.SELECTION_AREA) }), _jsx(ZoomHandler, { dataTestId: `${dataTestId}-start-handler`, focusConfig: resolvedFocusConfig, handlerConfig: handlerConfig, height: parsedCanvas.height, isFocused: isFocused(ZoomAreaElements.START_HANDLER), max: currentRange.end - resolvedInteractionConfig.minHandlerDistance, min: 0, screenReaderText: accessibilityLabels.startHandler, type: ZoomAreaElements.START_HANDLER, value: currentRange.start, x: startX, onBlur: handleBlur, onFocus: handleFocus(ZoomAreaElements.START_HANDLER), onKeyDown: handleKeyDown(ZoomAreaElements.START_HANDLER), onMouseDown: handleMouseDown(ZoomAreaElements.START_HANDLER), onTouchStart: handleTouchStart(ZoomAreaElements.START_HANDLER) }), _jsx(ZoomHandler, { dataTestId: `${dataTestId}-end-handler`, focusConfig: resolvedFocusConfig, handlerConfig: handlerConfig, height: parsedCanvas.height, isFocused: isFocused(ZoomAreaElements.END_HANDLER), max: data.length - 1, min: currentRange.start + resolvedInteractionConfig.minHandlerDistance, screenReaderText: accessibilityLabels.endHandler, type: ZoomAreaElements.END_HANDLER, value: currentRange.end, x: endX, onBlur: handleBlur, onFocus: handleFocus(ZoomAreaElements.END_HANDLER), onKeyDown: handleKeyDown(ZoomAreaElements.END_HANDLER), onMouseDown: handleMouseDown(ZoomAreaElements.END_HANDLER), onTouchStart: handleTouchStart(ZoomAreaElements.END_HANDLER) }), _jsx(SelectionAreaFocusRing, { endX: endX, focusConfig: resolvedFocusConfig, height: parsedCanvas.height, isFocused: isFocused(ZoomAreaElements.SELECTION_AREA), startX: startX })] }));
 };
-exports.ZoomArea = ZoomArea;

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

@@ -1,10 +1,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ZoomAreaElements = void 0;
 /**
  * Target enumeration for zoom area elements
  */
-exports.ZoomAreaElements = {
+export const ZoomAreaElements = {
     END_HANDLER: 'END_HANDLER',
     SELECTION_AREA: 'SELECTION_AREA',
     START_HANDLER: 'START_HANDLER',

package/dist/cjs/hooks/index.js

@@ -1,18 +1,2 @@
-"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("./useFocus/useFocus"), exports);
-__exportStar(require("./useHover/useHover"), exports);
+export * from './useFocus/useFocus';
+export * from './useHover/useHover';

package/dist/cjs/hooks/useFocus/useFocus.js

@@ -1,7 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useFocus = void 0;
-const react_1 = require("react");
+import { useCallback, useState } from 'react';
 /**
  * Custom React hook to manage focus state and handle focus/blur events for an element.
  *
@@ -14,16 +11,15 @@ const react_1 = require("react");
  * @param onBlur - An optional custom blur event handler of type `FocusHandler<T>`. It is called when the element loses focus.
  * @returns An object of type `UseFocusReturn<T>` containing the focus state (`isFocused`), and functions to handle focus (`handleFocus`) and blur (`handleBlur`) events.
  */
-const useFocus = (onFocus, onBlur) => {
-    const [isFocused, setIsFocused] = (0, react_1.useState)(false);
-    const handleFocus = (0, react_1.useCallback)((event) => {
+export const useFocus = (onFocus, onBlur) => {
+    const [isFocused, setIsFocused] = useState(false);
+    const handleFocus = useCallback((event) => {
         setIsFocused(true);
         onFocus?.(event);
     }, [onFocus]);
-    const handleBlur = (0, react_1.useCallback)((event) => {
+    const handleBlur = useCallback((event) => {
         setIsFocused(false);
         onBlur?.(event);
     }, [onBlur]);
     return { handleBlur, handleFocus, isFocused };
 };
-exports.useFocus = useFocus;

package/dist/cjs/hooks/useFocus/useFocus.types.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/dist/cjs/hooks/useHover/useHover.js

@@ -1,7 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useHover = void 0;
-const react_1 = require("react");
+import { useCallback, useState } from 'react';
 /**
  * A custom hook that manages hover state and provides event handlers for mouse enter and leave events,
  * with optional custom handlers. It returns the hover state and functions to handle mouse enter and leave events,
@@ -12,13 +9,13 @@ const react_1 = require("react");
  * @param onMouseLeave - An optional custom mouse leave event handler of type `MouseHandler<T>`. It is called when the element is no longer hovered.
  * @returns An object of type `UseHoverReturn<T>` containing the hover state (`isHovered`), and functions to handle mouse enter (`handleMouseEnter`) and leave (`handleMouseLeave`) events.
  */
-const useHover = (onMouseEnter, onMouseLeave) => {
-    const [isHovered, setIsHovered] = (0, react_1.useState)(false);
-    const handleMouseEnter = (0, react_1.useCallback)((event) => {
+export const useHover = (onMouseEnter, onMouseLeave) => {
+    const [isHovered, setIsHovered] = useState(false);
+    const handleMouseEnter = useCallback((event) => {
         setIsHovered(true);
         onMouseEnter?.(event);
     }, [onMouseEnter]);
-    const handleMouseLeave = (0, react_1.useCallback)((event) => {
+    const handleMouseLeave = useCallback((event) => {
         setIsHovered(false);
         onMouseLeave?.(event);
     }, [onMouseLeave]);
@@ -28,4 +25,3 @@ const useHover = (onMouseEnter, onMouseLeave) => {
         isHovered,
     };
 };
-exports.useHover = useHover;

package/dist/cjs/hooks/useHover/useHover.types.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/dist/cjs/index.js

@@ -1,19 +1,3 @@
-"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("./charts"), exports);
-__exportStar(require("./components"), exports);
-__exportStar(require("./types"), exports);
+export * from './charts';
+export * from './components';
+export * from './types';

package/dist/cjs/types/canvas.type.js

@@ -1,13 +1,10 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DefaultCanvasConfig = void 0;
 /**
  * Provides default configuration for a canvas element.
  *
  * This configuration sets the canvas width to 100 pixels, height to 80 pixels,
  * and includes no additional extra space around the canvas by default.
  */
-exports.DefaultCanvasConfig = {
+export const DefaultCanvasConfig = {
     extraSpace: 0,
     height: 80,
     width: 100,

package/dist/cjs/types/errors.type.js

@@ -1,6 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ErrorType = void 0;
-exports.ErrorType = {
+export const ErrorType = {
     GENERIC: 'GENERIC',
 };

package/dist/cjs/types/focusConfig.type.js

@@ -1,7 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FOCUS_DEFAULT = void 0;
-exports.FOCUS_DEFAULT = {
+export const FOCUS_DEFAULT = {
     /** Focus ring color */
     FOCUS_COLOR: '#0078D4',
     /** Focus ring inner border */

package/dist/cjs/types/index.js

@@ -1,20 +1,4 @@
-"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("./canvas.type"), exports);
-__exportStar(require("./errors.type"), exports);
-__exportStar(require("./focusConfig.type"), exports);
-__exportStar(require("./position.enum"), exports);
+export * from './canvas.type';
+export * from './errors.type';
+export * from './focusConfig.type';
+export * from './position.enum';

package/dist/cjs/types/position.enum.js

@@ -1,4 +1,3 @@
-"use strict";
 /**
  * Enum for specifying the position of elements or components.
  *
@@ -8,9 +7,7 @@
  *
  * @enum {string}
  */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Positions = void 0;
-exports.Positions = {
+export const Positions = {
     BOTTOM: 'BOTTOM',
     CENTER: 'CENTER',
     CUSTOM: 'CUSTOM',

package/dist/cjs/types/unit.enum.js

@@ -1,6 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Unit = void 0;
 /**
  * Enumeration representing units of measurement that need some transformation to pixels (px).
  *
@@ -8,7 +5,7 @@ exports.Unit = void 0;
  * @property {string} PERCENTAGE - Represents a percentage unit ('%').
  * @property {string} REM - Represents a rem unit ('rem')
  */
-exports.Unit = {
+export const Unit = {
     PERCENTAGE: '%',
     REM: 'rem',
 };

package/dist/cjs/types/valueFormatter.type.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/dist/cjs/utils/ajustedTextSpace/ajustedTextSpace.js

@@ -1,7 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ajustedTextSpace = void 0;
-const ajustedTextSpace = (textAnchor, value, extra) => {
+export const ajustedTextSpace = (textAnchor, value, extra) => {
     let ajusted = 0;
     switch (textAnchor) {
         case 'middle':
@@ -16,4 +13,3 @@ const ajustedTextSpace = (textAnchor, value, extra) => {
     }
     return ajusted;
 };
-exports.ajustedTextSpace = ajustedTextSpace;

package/dist/cjs/utils/buildErrors/buildErrors.js

@@ -1,12 +1,8 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.buildError = exports.ErrorsRecord = exports.BuildError = void 0;
-exports.BuildError = {
+export const BuildError = {
     INVALID_X_TICK: 'INVALID_X_TICK',
 };
 const INVALID_X_TICK_ERROR = '[getXTicks] Invalid X tick values calculated';
-exports.ErrorsRecord = {
+export const ErrorsRecord = {
     INVALID_X_TICK: new Error(INVALID_X_TICK_ERROR),
 };
-const buildError = (error) => exports.ErrorsRecord[error];
-exports.buildError = buildError;
+export const buildError = (error) => ErrorsRecord[error];