@kubit-ui-web/react-charts 0.1.0

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

@@ -0,0 +1,74 @@
+"use strict";
+/**
+ * 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.
+ */
+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.
+ *
+ * @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
+ * ```
+ */
+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.
+ *
+ * @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
+ * ```
+ */
+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.
+ *
+ * @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]
+ * ```
+ */
+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),
+    };
+};
+exports.getRangeIndices = getRangeIndices;

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

@@ -0,0 +1,10 @@
+import type { ZoomAreaInteractionConfig } from '../zoomArea.type';
+/**
+ * Utility function to get resolved interaction configuration.
+ * Merges user-provided config with sensible defaults.
+ *
+ * @param config - Optional user configuration
+ * @returns Complete interaction configuration with defaults applied
+ */
+export declare const getInteractionConfig: (config?: ZoomAreaInteractionConfig) => Required<ZoomAreaInteractionConfig>;
+//# sourceMappingURL=interactionConfig.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"interactionConfig.d.ts","sourceRoot":"","sources":["../../../../../src/components/zoomArea/utils/interactionConfig.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,kBAAkB,CAAC;AAclE;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,GAC/B,SAAS,yBAAyB,KACjC,QAAQ,CAAC,yBAAyB,CAInC,CAAC"}

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

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getInteractionConfig = void 0;
+/**
+ * Default configuration for ZoomArea interactions
+ */
+const DEFAULT_INTERACTION_CONFIG = {
+    /** Fast keyboard movement step (Shift + arrows) */
+    KEYBOARD_FAST_STEP: 2,
+    /** Default keyboard movement step (arrows without modifiers) */
+    KEYBOARD_STEP: 1,
+    /** Minimum distance between start and end handlers */
+    MIN_HANDLER_DISTANCE: 1,
+};
+/**
+ * Utility function to get resolved interaction configuration.
+ * Merges user-provided config with sensible defaults.
+ *
+ * @param config - Optional user configuration
+ * @returns Complete interaction configuration with defaults applied
+ */
+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.d.ts

@@ -0,0 +1,57 @@
+import type { IZoomAreaDataPoint, ZoomAreaLineConfig } from '../zoomArea.type';
+/**
+ * Path generation utilities for ZoomArea SVG rendering
+ */
+/**
+ * Generates smooth curved path using simplified Bézier curves.
+ *
+ * This implementation is based on LineChart's curve algorithm but optimized for performance
+ * in the ZoomArea context. Uses cubic Bézier curves with control points positioned at 30%
+ * of the horizontal distance between consecutive points.
+ *
+ * @param points - Array of [x, y] coordinates representing the line points
+ * @returns SVG path string with curved segments (e.g., "M 0 10 C 3 10, 7 20, 10 20")
+ *
+ * @example
+ * ```typescript
+ * const points: Array<[number, number]> = [[0, 10], [10, 20], [20, 15]];
+ * const curvedPath = generateCurvedPath(points);
+ * // Returns: "M 0 10 C 3 10, 7 20, 10 20 C 13 20, 17 15, 20 15"
+ * ```
+ */
+export declare const generateCurvedPath: (points: Array<[number, number]>) => string;
+/**
+ * Calculates path data for all lines with unified Y-scale, supporting both curved and straight lines.
+ *
+ * This function processes multiple line configurations and generates SVG path strings for each line.
+ * All lines share the same Y-scale to maintain visual consistency when comparing different datasets.
+ *
+ * **Y-scaling behavior:** Uses padding to prevent lines from touching chart bounds, similar to LineChart.
+ * The effective chart area is reduced by 10% (5% top + 5% bottom) to provide visual breathing room.
+ *
+ * @param data - Array of data points containing values for all lines
+ * @param lines - Configuration for each line including styling and curve settings
+ * @param width - Canvas width for scaling X coordinates
+ * @param height - Canvas height for scaling Y coordinates
+ * @returns Array of objects containing line and fill paths with their configurations
+ *
+ * @example
+ * ```typescript
+ * const result = calculateLinesPathData(
+ *   [{ month: 'Jan', sales: 100, profit: 20 }, { month: 'Feb', sales: 150, profit: 30 }],
+ *   [
+ *     { yKey: 'sales', stroke: '#blue', curved: true },
+ *     { yKey: 'profit', stroke: '#red', curved: false }
+ *   ],
+ *   400, // width
+ *   100  // height
+ * );
+ * // Returns: [{ linePath: "M 0 80 C...", fillPath: "", config: {...} }, ...]
+ * ```
+ */
+export declare const calculateLinesPathData: (data: IZoomAreaDataPoint[], lines: ZoomAreaLineConfig[], width: number, height: number) => Array<{
+    linePath: string;
+    fillPath: string;
+    config: ZoomAreaLineConfig;
+}>;
+//# sourceMappingURL=pathGeneration.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pathGeneration.d.ts","sourceRoot":"","sources":["../../../../../src/components/zoomArea/utils/pathGeneration.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAE/E;;GAEG;AAEH;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,kBAAkB,GAAI,QAAQ,KAAK,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,KAAG,MAqBpE,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,sBAAsB,GACjC,MAAM,kBAAkB,EAAE,EAC1B,OAAO,kBAAkB,EAAE,EAC3B,OAAO,MAAM,EACb,QAAQ,MAAM,KACb,KAAK,CAAC;IACP,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,kBAAkB,CAAC;CAC5B,CA8CA,CAAC"}

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

@@ -0,0 +1,117 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.calculateLinesPathData = exports.generateCurvedPath = void 0;
+/**
+ * Path generation utilities for ZoomArea SVG rendering
+ */
+/**
+ * Generates smooth curved path using simplified Bézier curves.
+ *
+ * This implementation is based on LineChart's curve algorithm but optimized for performance
+ * in the ZoomArea context. Uses cubic Bézier curves with control points positioned at 30%
+ * of the horizontal distance between consecutive points.
+ *
+ * @param points - Array of [x, y] coordinates representing the line points
+ * @returns SVG path string with curved segments (e.g., "M 0 10 C 3 10, 7 20, 10 20")
+ *
+ * @example
+ * ```typescript
+ * const points: Array<[number, number]> = [[0, 10], [10, 20], [20, 15]];
+ * const curvedPath = generateCurvedPath(points);
+ * // Returns: "M 0 10 C 3 10, 7 20, 10 20 C 13 20, 17 15, 20 15"
+ * ```
+ */
+const generateCurvedPath = (points) => {
+    if (points.length === 0) {
+        return '';
+    }
+    if (points.length === 1) {
+        return `M ${points[0][0]} ${points[0][1]}`;
+    }
+    const [firstPoint, ...remainingPoints] = points;
+    let path = `M ${firstPoint[0]} ${firstPoint[1]}`;
+    remainingPoints.forEach((point, i) => {
+        const start = i === 0 ? firstPoint : remainingPoints[i - 1];
+        const [x1, y1] = start;
+        const [x2, y2] = point;
+        // Control points calculation (same as LineChart but simplified factor)
+        const dx = (x2 - x1) * 0.3;
+        const controlPoint1 = [x1 + dx, y1];
+        const controlPoint2 = [x2 - dx, y2];
+        path += ` C ${controlPoint1[0]} ${controlPoint1[1]}, ${controlPoint2[0]} ${controlPoint2[1]}, ${x2} ${y2}`;
+    });
+    return path;
+};
+exports.generateCurvedPath = generateCurvedPath;
+/**
+ * Calculates path data for all lines with unified Y-scale, supporting both curved and straight lines.
+ *
+ * This function processes multiple line configurations and generates SVG path strings for each line.
+ * All lines share the same Y-scale to maintain visual consistency when comparing different datasets.
+ *
+ * **Y-scaling behavior:** Uses padding to prevent lines from touching chart bounds, similar to LineChart.
+ * The effective chart area is reduced by 10% (5% top + 5% bottom) to provide visual breathing room.
+ *
+ * @param data - Array of data points containing values for all lines
+ * @param lines - Configuration for each line including styling and curve settings
+ * @param width - Canvas width for scaling X coordinates
+ * @param height - Canvas height for scaling Y coordinates
+ * @returns Array of objects containing line and fill paths with their configurations
+ *
+ * @example
+ * ```typescript
+ * const result = calculateLinesPathData(
+ *   [{ month: 'Jan', sales: 100, profit: 20 }, { month: 'Feb', sales: 150, profit: 30 }],
+ *   [
+ *     { yKey: 'sales', stroke: '#blue', curved: true },
+ *     { yKey: 'profit', stroke: '#red', curved: false }
+ *   ],
+ *   400, // width
+ *   100  // height
+ * );
+ * // Returns: [{ linePath: "M 0 80 C...", fillPath: "", config: {...} }, ...]
+ * ```
+ */
+const calculateLinesPathData = (data, lines, width, height) => {
+    if (data.length === 0 || lines.length === 0) {
+        return [];
+    }
+    // Add padding to prevent lines from touching chart bounds (similar to LineChart behavior)
+    const yPaddingPercent = 0.05; // 5% padding top and bottom
+    const yPadding = height * yPaddingPercent;
+    const effectiveHeight = height - 2 * yPadding;
+    // Get min/max values for scaling across all lines for consistent Y scale
+    const allYValues = lines.flatMap(line => data.map(d => Number(d[line.yKey])));
+    const minY = Math.min(...allYValues);
+    const maxY = Math.max(...allYValues);
+    const yRange = maxY - minY || 1;
+    return lines.map(lineConfig => {
+        // Create path points for this specific line
+        const pathPoints = data.map((d, index) => {
+            const x = (index / Math.max(1, data.length - 1)) * width;
+            // Apply padding and scale within the effective height
+            const y = yPadding +
+                effectiveHeight -
+                ((Number(d[lineConfig.yKey]) - minY) / yRange) * effectiveHeight;
+            return [x, y];
+        });
+        // Generate line path - curved or straight based on config
+        const linePath = lineConfig.curved
+            ? (0, exports.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`
+                : `${linePath} L ${width},${height} L 0,${height} Z`;
+        }
+        return {
+            config: lineConfig,
+            fillPath,
+            linePath,
+        };
+    });
+};
+exports.calculateLinesPathData = calculateLinesPathData;

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

@@ -0,0 +1,60 @@
+import type { ZoomRange } from '../zoomArea.type';
+/**
+ * Range operations and position calculation utilities for ZoomArea
+ */
+/**
+ * Calculates handler positions based on current range
+ *
+ * @param currentRange - The current zoom range
+ * @param dataLength - Total length of the dataset
+ * @param width - Canvas width for scaling
+ * @returns Object with startX and endX positions
+ */
+export declare const calculateHandlerPositions: (currentRange: ZoomRange, dataLength: number, width: number) => {
+    startX: number;
+    endX: number;
+};
+/**
+ * Converts mouse position to continuous data index
+ *
+ * @param mouseX - Mouse X coordinate relative to the chart
+ * @param width - Canvas width
+ * @param dataLength - Total length of the dataset
+ * @returns Data index
+ */
+export declare const mouseToDataIndex: (mouseX: number, width: number, dataLength: number) => number;
+/**
+ * Clamps a range to valid bounds
+ *
+ * @param range - The range to clamp
+ * @param dataLength - Total length of the dataset
+ * @param minDistance - Minimum distance between start and end (default: 0.1)
+ * @returns Clamped range within valid bounds
+ */
+export declare const clampRange: (range: ZoomRange, dataLength: number, minDistance?: number) => ZoomRange;
+/**
+ * Creates a default range for the given data length
+ *
+ * @param dataLength - Total length of the dataset
+ * @returns Default range covering the full dataset
+ */
+export declare const createDefaultRange: (dataLength: number) => ZoomRange;
+/**
+ * Determines if the current range covers the full dataset.
+ * According to design specs: overlay is "only visible when a range is defined".
+ * A range is considered "defined" when it doesn't cover the complete dataset.
+ *
+ * @param range - The current zoom range
+ * @param dataLength - Total length of the dataset
+ * @returns true if the range covers the full dataset (no selection defined)
+ *
+ * @example
+ * ```typescript
+ * // Dataset with 10 elements [0-9]
+ * isFullRange({ start: 0, end: 9 }, 10); // true - covers full dataset
+ * isFullRange({ start: 1, end: 8 }, 10); // false - partial selection
+ * isFullRange({ start: 0, end: 7 }, 10); // false - partial selection
+ * ```
+ */
+export declare const isFullRange: (range: ZoomRange, dataLength: number) => boolean;
+//# sourceMappingURL=rangeAndPositions.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rangeAndPositions.d.ts","sourceRoot":"","sources":["../../../../../src/components/zoomArea/utils/rangeAndPositions.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAElD;;GAEG;AAEH;;;;;;;GAOG;AACH,eAAO,MAAM,yBAAyB,GACpC,cAAc,SAAS,EACvB,YAAY,MAAM,EAClB,OAAO,MAAM,KACZ;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAIhC,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,gBAAgB,GAAI,QAAQ,MAAM,EAAE,OAAO,MAAM,EAAE,YAAY,MAAM,KAAG,MAIpF,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,UAAU,GACrB,OAAO,SAAS,EAChB,YAAY,MAAM,EAClB,cAAa,MAAY,KACxB,SAQF,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,GAAI,YAAY,MAAM,KAAG,SAGtD,CAAC;AAEH;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,WAAW,GAAI,OAAO,SAAS,EAAE,YAAY,MAAM,KAAG,OAElE,CAAC"}

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

@@ -0,0 +1,83 @@
+"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
+ */
+/**
+ * Calculates handler positions based on current range
+ *
+ * @param currentRange - The current zoom range
+ * @param dataLength - Total length of the dataset
+ * @param width - Canvas width for scaling
+ * @returns Object with startX and endX positions
+ */
+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
+ *
+ * @param mouseX - Mouse X coordinate relative to the chart
+ * @param width - Canvas width
+ * @param dataLength - Total length of the dataset
+ * @returns Data index
+ */
+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
+ *
+ * @param range - The range to clamp
+ * @param dataLength - Total length of the dataset
+ * @param minDistance - Minimum distance between start and end (default: 0.1)
+ * @returns Clamped range within valid bounds
+ */
+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 {
+        end: clampedEnd,
+        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) => ({
+    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".
+ * A range is considered "defined" when it doesn't cover the complete dataset.
+ *
+ * @param range - The current zoom range
+ * @param dataLength - Total length of the dataset
+ * @returns true if the range covers the full dataset (no selection defined)
+ *
+ * @example
+ * ```typescript
+ * // Dataset with 10 elements [0-9]
+ * isFullRange({ start: 0, end: 9 }, 10); // true - covers full dataset
+ * isFullRange({ start: 1, end: 8 }, 10); // false - partial selection
+ * isFullRange({ start: 0, end: 7 }, 10); // false - partial selection
+ * ```
+ */
+const isFullRange = (range, dataLength) => {
+    return range.start === 0 && range.end === dataLength - 1;
+};
+exports.isFullRange = isFullRange;

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

@@ -0,0 +1,10 @@
+import type { ZoomAreaSelectionConfig } from '../zoomArea.type';
+/**
+ * Utility function to get resolved selection configuration.
+ * Merges user-provided config with sensible defaults.
+ *
+ * @param config - Optional user configuration
+ * @returns Complete selection configuration with defaults applied
+ */
+export declare const getSelectionConfig: (config?: ZoomAreaSelectionConfig) => Required<ZoomAreaSelectionConfig>;
+//# sourceMappingURL=selectionConfig.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"selectionConfig.d.ts","sourceRoot":"","sources":["../../../../../src/components/zoomArea/utils/selectionConfig.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAkBhE;;;;;;GAMG;AACH,eAAO,MAAM,kBAAkB,GAC7B,SAAS,uBAAuB,KAC/B,QAAQ,CAAC,uBAAuB,CAOjC,CAAC"}

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

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSelectionConfig = void 0;
+/**
+ * Default configuration for ZoomArea selection area
+ */
+const DEFAULT_SELECTION_CONFIG = {
+    /** Selection area background color */
+    FILL: '#0078d4',
+    /** Selection area fill opacity */
+    FILL_OPACITY: 0.5,
+    /** Hide overlay when full range is selected */
+    HIDE_OVERLAY_ON_FULL_RANGE: true,
+    /** Selection area border color */
+    STROKE: '#0078d4',
+    /** Selection area border width */
+    STROKE_WIDTH: 0,
+};
+/**
+ * Utility function to get resolved selection configuration.
+ * Merges user-provided config with sensible defaults.
+ *
+ * @param config - Optional user configuration
+ * @returns Complete selection configuration with defaults applied
+ */
+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.d.ts

@@ -0,0 +1,12 @@
+import { type ZoomAreaProps } from './zoomArea.type';
+/**
+ * `ZoomArea` component that renders a scaled chart with draggable zoom handlers for interactive data filtering.
+ *
+ * It includes full keyboard navigation support, accessibility features, and customizable appearance.
+ *
+ * @param props - See {@link ZoomAreaProps} for detailed documentation of all available properties.
+ *
+ * @returns A React functional component that renders an SVG-based zoom area with interactive handlers and accessibility features.
+ */
+export declare const ZoomArea: React.FC<ZoomAreaProps>;
+//# sourceMappingURL=zoomArea.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"zoomArea.d.ts","sourceRoot":"","sources":["../../../../src/components/zoomArea/zoomArea.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAoB,KAAK,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEvE;;;;;;;;GAQG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA6K5C,CAAC"}

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

@@ -0,0 +1,84 @@
+"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");
+/**
+ * `ZoomArea` component that renders a scaled chart with draggable zoom handlers for interactive data filtering.
+ *
+ * It includes full keyboard navigation support, accessibility features, and customizable appearance.
+ *
+ * @param props - See {@link ZoomAreaProps} for detailed documentation of all available properties.
+ *
+ * @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
+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);
+    // Resolve selection config with defaults
+    const resolvedSelectionConfig = (0, selectionConfig_1.getSelectionConfig)(selectionConfig);
+    // Resolve focus config with defaults
+    const resolvedFocusConfig = (0, calculateFocusOutline_1.getFocusConfig)(focusConfig);
+    // Hook for core data filtering functionality
+    const { currentRange, handleRangeChange } = (0, useZoomData_1.useZoomData)({
+        data,
+        initialRange,
+        onDataChange,
+    });
+    // Hook for responsive dimensions of the component when set as percentage
+    const { parsedCanvas, viewBox } = (0, useResponsiveCanvas_1.useResponsiveCanvas)({
+        canvasConfig,
+        dataTestId,
+        height,
+        width,
+    });
+    // Create a fingerprint of the data/lines to avoid unnecessary updates
+    const dataFingerprint = (0, getDataFingerprint_1.getDataFingerprint)(data);
+    const linesFingerprint = JSON.stringify(lines);
+    const accessibilityLabels = (0, accessibilityLabels_1.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);
+    }, [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]);
+    // Interaction hooks
+    const { handleBlur, handleFocus, isFocused } = (0, useZoomAreaFocus_1.useZoomAreaFocus)();
+    const { handleKeyDown } = (0, useKeyboardNavigation_1.useKeyboardNavigation)({
+        currentRange,
+        dataLength: data.length,
+        interactionConfig: resolvedInteractionConfig,
+        onRangeChange: handleRangeChange,
+    });
+    const { groupRef, handleMouseDown, handleTouchStart } = (0, useDragInteraction_1.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, 
+        // 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 })] }));
+};
+exports.ZoomArea = ZoomArea;