@kubit-ui-web/react-charts 0.1.0

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

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HandlerIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Default color for handler icons
+ */
+const DEFAULT_ICON_COLOR = '#8f8f8f';
+/**
+ * Icon offset for perfect centering (5px = ICON_SIZE / 2)
+ */
+const ICON_OFFSET = 5;
+/**
+ * Renders a handler icon with 3 vertical bars (grip pattern).
+ *
+ * Icon specifications:
+ * - Size: 10x10 pixels (ICON_SIZE)
+ * - Centering: offset by 5 pixels (ICON_OFFSET = ICON_SIZE / 2)
+ *
+ * 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" })] }));
+};
+exports.HandlerIcon = HandlerIcon;

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

@@ -0,0 +1,29 @@
+import type { FC } from 'react';
+/**
+ * Line data for rendering
+ */
+interface LineData {
+    linePath: string;
+    fillPath: string;
+    config: {
+        yKey: string;
+        dataKey?: string;
+        stroke?: string;
+        strokeWidth?: string | number;
+        fill?: string;
+        fillOpacity?: number;
+    };
+}
+/**
+ * Props for the LineRenderer component
+ */
+interface LineRendererProps {
+    /** Array of line data to render */
+    linesData: LineData[];
+}
+/**
+ * Renders all lines and fill areas for the zoom area chart
+ */
+export declare const LineRenderer: FC<LineRendererProps>;
+export {};
+//# sourceMappingURL=LineRenderer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LineRenderer.d.ts","sourceRoot":"","sources":["../../../../../src/components/zoomArea/components/LineRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAOhC;;GAEG;AACH,UAAU,QAAQ;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE;QACN,IAAI,EAAE,MAAM,CAAC;QACb,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;QAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,WAAW,CAAC,EAAE,MAAM,CAAC;KACtB,CAAC;CACH;AAED;;GAEG;AACH,UAAU,iBAAiB;IACzB,mCAAmC;IACnC,SAAS,EAAE,QAAQ,EAAE,CAAC;CACvB;AAED;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAyB9C,CAAC"}

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

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LineRenderer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Default color for lines when no stroke is provided
+ */
+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))) }));
+};
+exports.LineRenderer = LineRenderer;

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

@@ -0,0 +1,57 @@
+import type { FC, KeyboardEvent, MouseEvent, TouchEvent } from 'react';
+import type { FocusConfig } from '../../../types/focusConfig.type';
+import type { ZoomAreaSelectionConfig, ZoomRange } from '../zoomArea.type';
+/**
+
+/**
+ * Props for the SelectionArea component
+ */
+interface SelectionAreaProps {
+    /** Start X position */
+    startX: number;
+    /** End X position */
+    endX: number;
+    /** Chart height */
+    height: number;
+    /** Current zoom range */
+    currentRange: ZoomRange;
+    /** Data length for ARIA values */
+    dataLength: number;
+    /** Data test ID */
+    dataTestId: string;
+    /** Custom selection area configuration */
+    selectionConfig: Required<ZoomAreaSelectionConfig>;
+    /** Text announced by screen readers */
+    screenReaderText?: string;
+    /** Event handlers */
+    onMouseDown: (event: MouseEvent) => void;
+    onTouchStart: (event: TouchEvent) => void;
+    onKeyDown: (event: KeyboardEvent) => void;
+    onFocus: () => void;
+    onBlur: () => void;
+}
+/**
+ * Props for the SelectionAreaFocusRing component
+ */
+interface SelectionAreaFocusRingProps {
+    /** Start X position */
+    startX: number;
+    /** End X position */
+    endX: number;
+    /** Chart height */
+    height: number;
+    /** Whether the selection area is focused */
+    isFocused: boolean;
+    /** Custom focus configuration (already resolved) */
+    focusConfig: Required<FocusConfig>;
+}
+/**
+ * Focus ring for the selection area - rendered separately to control z-order
+ */
+export declare const SelectionAreaFocusRing: FC<SelectionAreaFocusRingProps>;
+/**
+ * Selection area overlay
+ */
+export declare const SelectionArea: FC<SelectionAreaProps>;
+export {};
+//# sourceMappingURL=SelectionArea.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionArea.d.ts","sourceRoot":"","sources":["../../../../../src/components/zoomArea/components/SelectionArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEvE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAI5D,OAAO,KAAK,EAAE,uBAAuB,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAE3E;;;;GAIG;AACH,UAAU,kBAAkB;IAC1B,uBAAuB;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,mBAAmB;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,yBAAyB;IACzB,YAAY,EAAE,SAAS,CAAC;IACxB,kCAAkC;IAClC,UAAU,EAAE,MAAM,CAAC;IACnB,mBAAmB;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,0CAA0C;IAC1C,eAAe,EAAE,QAAQ,CAAC,uBAAuB,CAAC,CAAC;IACnD,uCAAuC;IACvC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,qBAAqB;IACrB,WAAW,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACzC,YAAY,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IAC1C,SAAS,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC1C,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED;;GAEG;AACH,UAAU,2BAA2B;IACnC,uBAAuB;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,mBAAmB;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,4CAA4C;IAC5C,SAAS,EAAE,OAAO,CAAC;IACnB,oDAAoD;IACpD,WAAW,EAAE,QAAQ,CAAC,WAAW,CAAC,CAAC;CACpC;AAED;;GAEG;AACH,eAAO,MAAM,sBAAsB,EAAE,EAAE,CAAC,2BAA2B,CA+DlE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAqDhD,CAAC"}

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

@@ -0,0 +1,53 @@
+"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");
+/**
+ * Focus ring for the selection area - rendered separately to control z-order
+ */
+const SelectionAreaFocusRing = ({ endX, focusConfig, height, isFocused, startX, }) => {
+    if (!isFocused) {
+        return null;
+    }
+    // Calculate selection area dimensions
+    const selectionWidth = endX - startX;
+    const selectionHeight = height;
+    const centerX = startX + selectionWidth / 2;
+    const centerY = height / 2;
+    // Calculate focus ring dimensions using the new util
+    const focusOutline = (0, calculateFocusOutline_1.calculateFocusOutline)({
+        elementHeight: selectionHeight,
+        elementPosition: { x: centerX, y: centerY },
+        elementStrokeWidth: 0, // Selection area typically has no border
+        elementType: 'rectangle',
+        elementWidth: selectionWidth,
+        gap: focusConfig.gap,
+        innerStrokeWidth: focusConfig.innerStrokeWidth,
+        outlineStrokeWidth: focusConfig.outlineStrokeWidth,
+    });
+    // Use resolved configuration values directly
+    const outlineColor = focusConfig.outlineColor;
+    const innerColor = focusConfig.innerColor;
+    const outlineStrokeWidth = focusConfig.outlineStrokeWidth;
+    const innerStrokeWidth = focusConfig.innerStrokeWidth;
+    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 })] }));
+};
+exports.SelectionAreaFocusRing = SelectionAreaFocusRing;
+/**
+ * Selection area overlay
+ */
+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: {
+                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.d.ts

@@ -0,0 +1,42 @@
+import type { KeyboardEvent, MouseEvent, TouchEvent } from 'react';
+import type { FocusConfig } from '../../../types/focusConfig.type';
+import type { ZoomAreaElements, ZoomAreaHandlerConfig } from '../zoomArea.type';
+/**
+ * Props for a single zoom handler
+ */
+interface ZoomHandlerProps {
+    /** Handler type using ZoomAreaElements enum */
+    type: keyof typeof ZoomAreaElements;
+    /** X position */
+    x: number;
+    /** Chart height */
+    height: number;
+    /** Current value */
+    value: number;
+    /** Minimum allowed value */
+    min: number;
+    /** Maximum allowed value */
+    max: number;
+    /** Whether this handler is focused */
+    isFocused: boolean;
+    /** Custom handler configuration */
+    handlerConfig?: ZoomAreaHandlerConfig;
+    /** Custom focus configuration (already resolved) */
+    focusConfig: Required<FocusConfig>;
+    /** Text announced by screen readers */
+    screenReaderText?: string;
+    /** Data test ID */
+    dataTestId: string;
+    /** Event handlers */
+    onMouseDown: (event: MouseEvent) => void;
+    onTouchStart: (event: TouchEvent) => void;
+    onKeyDown: (event: KeyboardEvent) => void;
+    onFocus: () => void;
+    onBlur: () => void;
+}
+/**
+ * Individual zoom handler with line, circle, and icon
+ */
+export declare const ZoomHandler: React.FC<ZoomHandlerProps>;
+export {};
+//# sourceMappingURL=ZoomHandler.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ZoomHandler.d.ts","sourceRoot":"","sources":["../../../../../src/components/zoomArea/components/ZoomHandler.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAG5D,OAAO,KAAK,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAyBhF;;GAEG;AACH,UAAU,gBAAgB;IACxB,+CAA+C;IAC/C,IAAI,EAAE,MAAM,OAAO,gBAAgB,CAAC;IACpC,iBAAiB;IACjB,CAAC,EAAE,MAAM,CAAC;IACV,mBAAmB;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,4BAA4B;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,4BAA4B;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,sCAAsC;IACtC,SAAS,EAAE,OAAO,CAAC;IACnB,mCAAmC;IACnC,aAAa,CAAC,EAAE,qBAAqB,CAAC;IACtC,oDAAoD;IACpD,WAAW,EAAE,QAAQ,CAAC,WAAW,CAAC,CAAC;IACnC,uCAAuC;IACvC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,mBAAmB;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,qBAAqB;IACrB,WAAW,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACzC,YAAY,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IAC1C,SAAS,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC1C,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAmBD;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAoGlD,CAAC"}

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

@@ -0,0 +1,63 @@
+"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");
+/**
+ * Default colors for zoom handlers
+ */
+const HANDLER_COLORS = {
+    /** Handler background */
+    FILL: '#ffffff',
+    /** Handler border and icons */
+    STROKE: '#8f8f8f',
+};
+/**
+ * Default dimensions and styling for zoom handlers
+ */
+const HANDLER_DIMENSIONS = {
+    /** Radius of the circular handler */
+    RADIUS: 17,
+    /** Stroke width for handler border */
+    STROKE_WIDTH: 1,
+    /** Width for vertical guide line */
+    VERTICAL_LINE_WIDTH: 2,
+};
+/**
+ * Helper function to merge handler configuration with defaults
+ */
+const getHandlerStyles = (handlerConfig) => ({
+    fill: handlerConfig?.fill || HANDLER_COLORS.FILL,
+    // Icon properties
+    iconColor: handlerConfig?.iconColor || HANDLER_COLORS.STROKE,
+    radius: handlerConfig?.radius || HANDLER_DIMENSIONS.RADIUS,
+    // Circle properties
+    stroke: handlerConfig?.stroke || HANDLER_COLORS.STROKE,
+    strokeWidth: handlerConfig?.strokeWidth || HANDLER_DIMENSIONS.STROKE_WIDTH,
+    // Vertical line properties
+    verticalLineStroke: handlerConfig?.verticalLineStroke || HANDLER_COLORS.STROKE,
+    verticalLineStrokeWidth: handlerConfig?.verticalLineStrokeWidth || HANDLER_DIMENSIONS.VERTICAL_LINE_WIDTH,
+});
+/**
+ * Individual zoom handler with line, circle, and icon
+ */
+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)({
+        elementHeight: styles.radius * 2,
+        elementPosition: { x, y: centerY },
+        elementStrokeWidth: typeof styles.strokeWidth === 'number'
+            ? styles.strokeWidth
+            : parseFloat(styles.strokeWidth.toString()),
+        elementType: 'circle',
+        elementWidth: styles.radius * 2,
+        gap: focusConfig.gap,
+        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 })] }))] }));
+};
+exports.ZoomHandler = ZoomHandler;

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

@@ -0,0 +1,5 @@
+export { HandlerIcon } from './HandlerIcon';
+export { LineRenderer } from './LineRenderer';
+export { SelectionArea, SelectionAreaFocusRing } from './SelectionArea';
+export { ZoomHandler } from './ZoomHandler';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/zoomArea/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AACxE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}

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

@@ -0,0 +1,12 @@
+"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; } });

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

@@ -0,0 +1,6 @@
+export { useDragInteraction } from './useDragInteraction';
+export { useKeyboardNavigation } from './useKeyboardNavigation';
+export { useResponsiveCanvas } from './useResponsiveCanvas';
+export { useZoomAreaFocus } from './useZoomAreaFocus';
+export { useZoomData } from './useZoomData';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/zoomArea/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}

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

@@ -0,0 +1,13 @@
+"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; } });

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

@@ -0,0 +1,42 @@
+import { ZoomAreaElements, type ZoomAreaInteractionConfig, type ZoomRange } from '../zoomArea.type';
+/**
+ * Parameters for the useDragInteraction hook
+ */
+interface UseDragInteractionParams {
+    /** Current zoom range */
+    currentRange: ZoomRange;
+    /** Width of the zoom area */
+    width: number;
+    /** Total length of the data array */
+    dataLength: number;
+    /** Callback when range changes */
+    onRangeChange: (range: ZoomRange) => void;
+    /** Interaction configuration with resolved defaults */
+    interactionConfig: Required<ZoomAreaInteractionConfig>;
+}
+/**
+ * Return value for the useDragInteraction hook
+ */
+interface UseDragInteractionReturn {
+    /** Reference to the SVG group element */
+    groupRef: React.RefObject<SVGSVGElement>;
+    /** Handler for mouse down events on different elements */
+    handleMouseDown: (target: (typeof ZoomAreaElements)[keyof typeof ZoomAreaElements]) => (event: React.MouseEvent) => void;
+    /** Handler for touch start events on different elements */
+    handleTouchStart: (target: (typeof ZoomAreaElements)[keyof typeof ZoomAreaElements]) => (event: React.TouchEvent) => void;
+    /** Currently dragging element, if any */
+    isDragging: (typeof ZoomAreaElements)[keyof typeof ZoomAreaElements] | null;
+}
+/**
+ * Custom hook for handling mouse and touch drag interactions in ZoomArea
+ *
+ * Supports both mouse and touch events for cross-platform compatibility.
+ * Simplified implementation that works with overflow:visible SVG containers.
+ * No complex viewBox calculations needed - coordinates are direct and intuitive.
+ *
+ * @param params - Configuration parameters for drag functionality
+ * @returns Object with drag handlers and state
+ */
+export declare const useDragInteraction: (params: UseDragInteractionParams) => UseDragInteractionReturn;
+export {};
+//# sourceMappingURL=useDragInteraction.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useDragInteraction.d.ts","sourceRoot":"","sources":["../../../../../src/components/zoomArea/hooks/useDragInteraction.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,gBAAgB,EAAE,KAAK,yBAAyB,EAAE,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAEpG;;GAEG;AACH,UAAU,wBAAwB;IAChC,yBAAyB;IACzB,YAAY,EAAE,SAAS,CAAC;IACxB,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,qCAAqC;IACrC,UAAU,EAAE,MAAM,CAAC;IACnB,kCAAkC;IAClC,aAAa,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IAC1C,uDAAuD;IACvD,iBAAiB,EAAE,QAAQ,CAAC,yBAAyB,CAAC,CAAC;CACxD;AAED;;GAEG;AACH,UAAU,wBAAwB;IAChC,yCAAyC;IACzC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC;IACzC,0DAA0D;IAC1D,eAAe,EAAE,CACf,MAAM,EAAE,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,OAAO,gBAAgB,CAAC,KAC7D,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACvC,2DAA2D;IAC3D,gBAAgB,EAAE,CAChB,MAAM,EAAE,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,OAAO,gBAAgB,CAAC,KAC7D,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACvC,yCAAyC;IACzC,UAAU,EAAE,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,OAAO,gBAAgB,CAAC,GAAG,IAAI,CAAC;CAC7E;AAsCD;;;;;;;;;GASG;AACH,eAAO,MAAM,kBAAkB,GAAI,QAAQ,wBAAwB,KAAG,wBAsHrE,CAAC"}

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

@@ -0,0 +1,114 @@
+"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");
+/**
+ * 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) {
+        newRange.start = Math.max(0, Math.min(dataIndex, currentRange.end - interactionConfig.minHandlerDistance));
+    }
+    else if (dragType === zoomArea_type_1.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) {
+        // Moving entire selection
+        const selectionWidth = currentRange.end - currentRange.start;
+        const newStart = Math.max(0, Math.min(dataLength - 1 - selectionWidth, dataIndex - selectionWidth / 2));
+        newRange.start = newStart;
+        newRange.end = newStart + selectionWidth;
+    }
+    return newRange;
+};
+/**
+ * Custom hook for handling mouse and touch drag interactions in ZoomArea
+ *
+ * Supports both mouse and touch events for cross-platform compatibility.
+ * Simplified implementation that works with overflow:visible SVG containers.
+ * No complex viewBox calculations needed - coordinates are direct and intuitive.
+ *
+ * @param params - Configuration parameters for drag functionality
+ * @returns Object with drag handlers and state
+ */
+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) => {
+        return () => {
+            setIsDragging(target);
+        };
+    }, []);
+    const handleTouchStart = (0, react_1.useCallback)((target) => {
+        return () => {
+            setIsDragging(target);
+        };
+    }, []);
+    // Common logic for handling pointer movement (mouse or touch)
+    const handlePointerMove = (0, react_1.useCallback)((clientX) => {
+        if (!isDragging || !groupRef.current) {
+            return;
+        }
+        // Get the SVG element's bounding rect for coordinate conversion
+        const svgElement = groupRef.current;
+        if (!svgElement) {
+            return;
+        }
+        // Simple coordinate calculation - no viewBox complexity!
+        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 newRange = calculateNewRange(isDragging, currentRange, dataIndex, dataLength, interactionConfig);
+        const clampedRange = (0, rangeAndPositions_1.clampRange)(newRange, dataLength, interactionConfig.minHandlerDistance);
+        onRangeChange(clampedRange);
+    }, [isDragging, width, dataLength, currentRange, onRangeChange, interactionConfig]);
+    const handleMouseMove = (0, react_1.useCallback)((event) => {
+        handlePointerMove(event.clientX);
+    }, [handlePointerMove]);
+    const handleTouchMove = (0, react_1.useCallback)((event) => {
+        if (event.touches.length === 0) {
+            return;
+        }
+        // Prevent default native scrolling behavior while dragging
+        event.preventDefault();
+        handlePointerMove(event.touches[0].clientX);
+    }, [handlePointerMove]);
+    const handleMouseUp = (0, react_1.useCallback)(() => {
+        setIsDragging(null);
+    }, []);
+    const handleTouchEnd = (0, react_1.useCallback)(() => {
+        setIsDragging(null);
+    }, []);
+    // Set up global mouse and touch events when dragging
+    (0, react_1.useEffect)(() => {
+        if (isDragging) {
+            // Mouse events
+            document.addEventListener('mousemove', handleMouseMove);
+            document.addEventListener('mouseup', handleMouseUp);
+            // Touch events
+            document.addEventListener('touchmove', handleTouchMove, { passive: false });
+            document.addEventListener('touchend', handleTouchEnd);
+            return () => {
+                // Cleanup mouse events
+                document.removeEventListener('mousemove', handleMouseMove);
+                document.removeEventListener('mouseup', handleMouseUp);
+                // Cleanup touch events
+                document.removeEventListener('touchmove', handleTouchMove);
+                document.removeEventListener('touchend', handleTouchEnd);
+            };
+        }
+        return undefined;
+    }, [isDragging, handleMouseMove, handleMouseUp, handleTouchMove, handleTouchEnd]);
+    return {
+        groupRef,
+        handleMouseDown,
+        handleTouchStart,
+        isDragging,
+    };
+};
+exports.useDragInteraction = useDragInteraction;

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

@@ -0,0 +1,30 @@
+import { ZoomAreaElements, type ZoomAreaInteractionConfig, type ZoomRange } from '../zoomArea.type';
+/**
+ * Parameters for the useKeyboardNavigation hook
+ */
+interface UseKeyboardNavigationParams {
+    /** Current zoom range */
+    currentRange: ZoomRange;
+    /** Total length of the data array */
+    dataLength: number;
+    /** Callback when range changes */
+    onRangeChange: (range: ZoomRange) => void;
+    /** Interaction configuration with resolved defaults */
+    interactionConfig: Required<ZoomAreaInteractionConfig>;
+}
+/**
+ * Return value for the useKeyboardNavigation hook
+ */
+interface UseKeyboardNavigationReturn {
+    /** Handler for keyboard events on different elements */
+    handleKeyDown: (target: (typeof ZoomAreaElements)[keyof typeof ZoomAreaElements]) => (event: React.KeyboardEvent) => void;
+}
+/**
+ * Custom hook for handling keyboard navigation in ZoomArea
+ *
+ * @param params - Configuration parameters for keyboard navigation
+ * @returns Object with keyboard event handlers
+ */
+export declare const useKeyboardNavigation: (params: UseKeyboardNavigationParams) => UseKeyboardNavigationReturn;
+export {};
+//# sourceMappingURL=useKeyboardNavigation.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useKeyboardNavigation.d.ts","sourceRoot":"","sources":["../../../../../src/components/zoomArea/hooks/useKeyboardNavigation.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,gBAAgB,EAAE,KAAK,yBAAyB,EAAE,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAEpG;;GAEG;AACH,UAAU,2BAA2B;IACnC,yBAAyB;IACzB,YAAY,EAAE,SAAS,CAAC;IACxB,qCAAqC;IACrC,UAAU,EAAE,MAAM,CAAC;IACnB,kCAAkC;IAClC,aAAa,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IAC1C,uDAAuD;IACvD,iBAAiB,EAAE,QAAQ,CAAC,yBAAyB,CAAC,CAAC;CACxD;AAED;;GAEG;AACH,UAAU,2BAA2B;IACnC,wDAAwD;IACxD,aAAa,EAAE,CACb,MAAM,EAAE,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,OAAO,gBAAgB,CAAC,KAC7D,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;CAC3C;AA4GD;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,GAChC,QAAQ,2BAA2B,KAClC,2BA2CF,CAAC"}