@kubit-ui-web/react-charts 0.1.0

package/dist/esm/components/plot/plot.types.js

@@ -0,0 +1,51 @@
+/**
+ * Enum for plot types.
+ *
+ * This enumeration defines the possible types of plot points that can be represented in a chart.
+ * It includes basic geometric shapes such as circles, squares, and triangles.
+ *
+ * @enum {string}
+ */
+export const PlotType = {
+    /** Represents a circle plot point */
+    CIRCLE: 'CIRCLE',
+    /** Represents a square plot point */
+    SQUARE: 'SQUARE',
+    /** Represents a triangle plot point */
+    TRIANGLE: 'TRIANGLE',
+};
+/**
+ * Enum for plot sizes.
+ *
+ * This enumeration defines the different size options available for plot points.
+ * Sizes range from extra small to extra large, with specific pixel dimensions.
+ *
+ * @enum {string}
+ */
+export const PlotSize = {
+    /** Extra large plot point (40x40 pixels) */
+    EXTRA_LARGE: 'EXTRA_LARGE',
+    /** Extra small plot point (8x8 pixels) */
+    EXTRA_SMALL: 'EXTRA_SMALL',
+    /** Large plot point (32x32 pixels) */
+    LARGE: 'LARGE',
+    /** Medium plot point (24x24 pixels) */
+    MEDIUM: 'MEDIUM',
+    /** Small plot point (16x16 pixels) */
+    SMALL: 'SMALL',
+};
+/**
+ * Mapping of PlotSize enum values to their actual pixel dimensions.
+ *
+ * This constant provides a direct mapping between the enum values and
+ * their corresponding numeric size values in pixels.
+ *
+ * @type {Record<PlotSize, number>}
+ */
+export const PLOT_SIZE_MAP = {
+    [PlotSize.EXTRA_LARGE]: 40,
+    [PlotSize.EXTRA_SMALL]: 8,
+    [PlotSize.LARGE]: 32,
+    [PlotSize.MEDIUM]: 24,
+    [PlotSize.SMALL]: 16,
+};

package/dist/esm/components/svgContainer/index.d.ts

@@ -0,0 +1,2 @@
+export * from './svgContainer';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/svgContainer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/svgContainer/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}

package/dist/esm/components/svgContainer/index.js

@@ -0,0 +1 @@
+export * from './svgContainer';

package/dist/esm/components/svgContainer/svgContainer.d.ts

@@ -0,0 +1,6 @@
+import { type ForwardedRef } from 'react';
+import type { SvgContainerProps } from './svgContainer.types';
+export declare const SvgContainer: (props: SvgContainerProps & {
+    ref?: ForwardedRef<SVGSVGElement>;
+}) => JSX.Element;
+//# sourceMappingURL=svgContainer.d.ts.map

package/dist/esm/components/svgContainer/svgContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"svgContainer.d.ts","sourceRoot":"","sources":["../../../../src/components/svgContainer/svgContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiC,KAAK,YAAY,EAAc,MAAM,OAAO,CAAC;AAErF,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AA0E9D,eAAO,MAAM,YAAY,EAAwC,CAC/D,KAAK,EAAE,iBAAiB,GAAG;IACzB,GAAG,CAAC,EAAE,YAAY,CAAC,aAAa,CAAC,CAAC;CACnC,KACE,GAAG,CAAC,OAAO,CAAC"}

package/dist/esm/components/svgContainer/svgContainer.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+/**
+ * Renders an SVG container with customizable properties.
+ *
+ * This component is designed to encapsulate an SVG element, providing a flexible interface for defining its dimensions,
+ * accessibility features, and other attributes. It supports dynamic content through its children, allowing for complex
+ * SVG graphics to be composed within. The component also adheres to accessibility standards by allowing ARIA attributes
+ * and roles to be specified.
+ *
+ * @param {SvgContainerProps} props - The properties for configuring the SVG container.
+ * @param {string | number} props.width - The width of the SVG container. Can be specified as a number (pixels) or a string (percentage, em, etc.).
+ * @param {string | number} props.height - The height of the SVG container. Similar to width, it accepts both numbers and strings.
+ * @param {ReactNode} props.children - The SVG content to be rendered inside the container. This can include shapes, paths, text, and other SVG elements.
+ * @param {string} [props.className='svg-container'] - An optional CSS class name for styling the SVG container.
+ * @param {string} [props.role='img'] - An optional ARIA role to define the semantic meaning of the SVG container. Defaults to 'img'.
+ * @param {string} [props.ariaLabel='Chart Container'] - An optional ARIA label to provide an accessible name for the SVG container.
+ * @param {number} [props.tabIndex=0] - An optional tab index to control the SVG container's focusability and order in the tab navigation sequence.
+ * @param {string} [props.caption='Chart Container'] - An optional caption for the SVG content. This is rendered as a <title> element within the SVG for accessibility purposes.
+ * @param {string} [props.viewBox] - An optional attribute to specify the position and dimension, in user space, of an SVG viewport.
+ * @param {string} [props.dataTestId] - An optional attribute used for identifying the element in tests.
+ * @param {string} [props.overflow] - Controls SVG overflow behavior. Can be set via the overflow prop or CSS className. Common values: 'visible', 'hidden', 'scroll', 'auto'. Use className for styling control.
+ * @param {backgroundColor} [props.backgroundColor] - Sets a background color for the svg.
+ *
+ * @returns {ReactElement} A React element representing the SVG container.
+ */
+const SvgContainerComponent = ({ ariaHidden, ariaLabel, backgroundColor, caption, children, className, dataTestId, height, imageSrc, overflow, radius = '0px', role, tabIndex, viewBox, width, ...callbacks }, ref) => {
+    return (_jsxs("svg", { ref: ref, "aria-hidden": ariaHidden, "aria-label": ariaLabel, className: className, "data-testid": dataTestId, height: height, role: role, style: {
+            backgroundColor: backgroundColor,
+            borderRadius: radius,
+            overflow: overflow,
+        }, tabIndex: tabIndex, viewBox: viewBox, width: width, onMouseDown: e => e.preventDefault(), ...callbacks, children: [caption && _jsx("title", { children: caption }), imageSrc && _jsx("image", { height: height, href: imageSrc, width: width, x: "0", y: "0" }), children] }));
+};
+export const SvgContainer = forwardRef(SvgContainerComponent);

package/dist/esm/components/svgContainer/svgContainer.types.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Type definition for the `height` property of the `SvgContainerProps`.
+ * It restricts the value to either a `string` or `number`, but never 'auto' as a string value.
+ */
+type Height = string extends 'auto' ? never : string | number;
+/**
+ * Defines the properties accepted by the `SvgContainer` component.
+ *
+ * This interface specifies the types and optional properties for rendering an SVG container,
+ * including dimensions, accessibility attributes, and child elements.
+ */
+export interface SvgContainerProps {
+    width: string | number;
+    children: React.ReactNode;
+    className?: string;
+    role?: string;
+    ariaLabel?: string;
+    ariaHidden?: boolean;
+    height: Height;
+    tabIndex?: number;
+    caption?: string;
+    viewBox?: string;
+    dataTestId?: string;
+    radius?: string;
+    overflow?: string;
+    imageSrc?: string;
+    backgroundColor?: string;
+    onClick?: (event: React.MouseEvent<SVGElement, MouseEvent>) => void;
+    onDoubleClick?: (event: React.MouseEvent<SVGElement, MouseEvent>) => void;
+    onMouseEnter?: (event: React.MouseEvent<SVGElement, MouseEvent>) => void;
+    onMouseLeave?: (event: React.MouseEvent<SVGElement, MouseEvent>) => void;
+    onFocus?: (event: React.FocusEvent<SVGElement>) => void;
+    onBlur?: (event: React.FocusEvent<SVGElement>) => void;
+    onKeyDown?: (event: React.KeyboardEvent<SVGSVGElement>) => void;
+    onKeyUp?: (event: React.KeyboardEvent<SVGSVGElement>) => void;
+}
+export {};
+//# sourceMappingURL=svgContainer.types.d.ts.map

package/dist/esm/components/svgContainer/svgContainer.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"svgContainer.types.d.ts","sourceRoot":"","sources":["../../../../src/components/svgContainer/svgContainer.types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,KAAK,MAAM,GAAG,MAAM,SAAS,MAAM,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;AAE9D;;;;;GAKG;AACH,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,UAAU,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACpE,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,UAAU,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC1E,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,UAAU,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACzE,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,UAAU,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACzE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;IACxD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;IACvD,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,KAAK,IAAI,CAAC;IAChE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,KAAK,IAAI,CAAC;CAC/D"}

package/dist/esm/components/svgContainer/svgContainer.types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/svgContainer/utils/buildViewBox/buildViewBox.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Constructs a viewBox attribute value for an SVG element.
+ *
+ * This function generates a string suitable for the `viewBox` attribute of an SVG element, allowing for control over
+ * the visible area of the SVG. It can optionally include extra space around the edges, which is useful for ensuring
+ * that content near the boundaries is not clipped.
+ *
+ * @param {number | string} width - The width of the viewBox. Can be a number (representing pixels) or a string (any valid CSS length value).
+ * @param {number | string} height - The height of the viewBox. Similar to width, it can be a number or a string.
+ * @param {number} [extraSpace=0] - Optional additional space to include on all sides of the viewBox. This expands the area beyond the specified width and height.
+ *
+ * @returns {string} The `viewBox` attribute value, formatted as "minX minY width height".
+ */
+export declare const buildViewBox: (width: number | string, height: number | string, extraSpace?: number | string) => string;
+//# sourceMappingURL=buildViewBox.d.ts.map

package/dist/esm/components/svgContainer/utils/buildViewBox/buildViewBox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"buildViewBox.d.ts","sourceRoot":"","sources":["../../../../../../src/components/svgContainer/utils/buildViewBox/buildViewBox.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,YAAY,GACvB,OAAO,MAAM,GAAG,MAAM,EACtB,QAAQ,MAAM,GAAG,MAAM,EACvB,aAAY,MAAM,GAAG,MAAU,KAC9B,MAOF,CAAC"}

package/dist/esm/components/svgContainer/utils/buildViewBox/buildViewBox.js

@@ -0,0 +1,20 @@
+/**
+ * Constructs a viewBox attribute value for an SVG element.
+ *
+ * This function generates a string suitable for the `viewBox` attribute of an SVG element, allowing for control over
+ * the visible area of the SVG. It can optionally include extra space around the edges, which is useful for ensuring
+ * that content near the boundaries is not clipped.
+ *
+ * @param {number | string} width - The width of the viewBox. Can be a number (representing pixels) or a string (any valid CSS length value).
+ * @param {number | string} height - The height of the viewBox. Similar to width, it can be a number or a string.
+ * @param {number} [extraSpace=0] - Optional additional space to include on all sides of the viewBox. This expands the area beyond the specified width and height.
+ *
+ * @returns {string} The `viewBox` attribute value, formatted as "minX minY width height".
+ */
+export const buildViewBox = (width, height, extraSpace = 0) => {
+    const minX = -extraSpace;
+    const minY = -extraSpace;
+    const viewBoxWidth = width;
+    const viewBoxHeight = height;
+    return `${minX} ${minY} ${viewBoxWidth} ${viewBoxHeight}`;
+};

package/dist/esm/components/svgContainer/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * from './buildViewBox/buildViewBox';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/svgContainer/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/svgContainer/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAC"}

package/dist/esm/components/svgContainer/utils/index.js

@@ -0,0 +1 @@
+export * from './buildViewBox/buildViewBox';

package/dist/esm/components/tick/index.d.ts

@@ -0,0 +1,3 @@
+export * from './tick';
+export * from './tick.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/tick/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/tick/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC"}

package/dist/esm/components/tick/index.js

@@ -0,0 +1,2 @@
+export * from './tick';
+export * from './tick.types';

package/dist/esm/components/tick/tick.d.ts

@@ -0,0 +1,19 @@
+import type { FC } from 'react';
+import type { TickProps } from './tick.types';
+/**
+ * Functional component for rendering a tick mark in a chart or graph.
+ *
+ * This component renders a tick mark based on the provided properties. It can optionally render a line and/or text
+ * label associated with the tick mark. The position of the tick mark can be customized using the `x` and `y` properties.
+ *
+ * @param {TickProps} props - The properties for the tick mark, including data, visibility flags, and optional styling props.
+ * @param {TickData} props.tick - The data for the tick mark, including its value and position.
+ * @param {boolean} props.showTickLines - Flag indicating whether the line part of the tick mark should be displayed.
+ * @param {LineProps} [props.tickLine] - Optional properties for the line part of the tick mark.
+ * @param {ChartTextProps} [props.tickText] - Optional properties for the text label part of the tick mark.
+ * @param {number} [props.x] - Optional x-coordinate for the position of the tick mark. Used for horizontal placement.
+ * @param {number} [props.y] - Optional y-coordinate for the position of the tick mark. Used for vertical placement.
+ * @returns A React functional component that renders the tick mark and its associated elements.
+ */
+export declare const Tick: FC<TickProps>;
+//# sourceMappingURL=tick.d.ts.map

package/dist/esm/components/tick/tick.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tick.d.ts","sourceRoot":"","sources":["../../../../src/components/tick/tick.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAKhC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CAK9B,CAAC"}

package/dist/esm/components/tick/tick.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChartText } from '../../components/chartText/chartText';
+import { Line } from '../../components/line/line';
+/**
+ * Functional component for rendering a tick mark in a chart or graph.
+ *
+ * This component renders a tick mark based on the provided properties. It can optionally render a line and/or text
+ * label associated with the tick mark. The position of the tick mark can be customized using the `x` and `y` properties.
+ *
+ * @param {TickProps} props - The properties for the tick mark, including data, visibility flags, and optional styling props.
+ * @param {TickData} props.tick - The data for the tick mark, including its value and position.
+ * @param {boolean} props.showTickLines - Flag indicating whether the line part of the tick mark should be displayed.
+ * @param {LineProps} [props.tickLine] - Optional properties for the line part of the tick mark.
+ * @param {ChartTextProps} [props.tickText] - Optional properties for the text label part of the tick mark.
+ * @param {number} [props.x] - Optional x-coordinate for the position of the tick mark. Used for horizontal placement.
+ * @param {number} [props.y] - Optional y-coordinate for the position of the tick mark. Used for vertical placement.
+ * @returns A React functional component that renders the tick mark and its associated elements.
+ */
+export const Tick = ({ showTickLines, tick, tickLine, tickText }) => (_jsxs("g", { children: [showTickLines && _jsx(Line, { ...tickLine }), tickText && _jsx(ChartText, { ...tickText, children: tick.value })] }));

package/dist/esm/components/tick/tick.types.d.ts

@@ -0,0 +1,51 @@
+import type { ValueFormatter } from '../../types/valueFormatter.type';
+import type { ChartTextProps } from '../chartText/chartText.types';
+import type { LineProps } from '../line/line.types';
+/**
+ * Represents the data structure for a single tick mark in a chart or graph.
+ *
+ * @property {string} value - The label or value associated with the tick mark.
+ * @property {number} position - The numerical position of the tick mark along its axis.
+ */
+export interface TickData {
+    value: string;
+    position: number;
+}
+/**
+ * Utility functions for working with TickData.
+ */
+export declare const TickDataUtils: {
+    /**
+     * Formats the values of an array of TickData using the provided formatter function.
+     *
+     * @param {TickData[]} ticks - Array of tick objects to format.
+     * @param {ValueFormatter} formatter - Function to format each tick's value.
+     * @returns {TickData[]} New array of TickData with formatted values.
+     *
+     * @example
+     * const ticks = [{ value: '100', position: 1 }, { value: '200', position: 2 }];
+     * const formatter = (v) => `${v} €`;
+     * const formatted = TickDataUtils.formatTicksValues(ticks, formatter);
+     * // formatted: [{ value: '100 €', position: 1 }, { value: '200 €', position: 2 }]
+     */
+    formatTicksValues: (ticks: TickData[], formatter: ValueFormatter) => TickData[];
+};
+/**
+ * Defines the properties for rendering a tick mark and its associated elements in a chart or graph.
+ *
+ * @property {TickData} tick - The data for the tick mark, including its value and position.
+ * @property {boolean} showTickLines - Flag indicating whether the line part of the tick mark should be displayed.
+ * @property {LineProps} [tickLine] - Optional properties for the line part of the tick mark. Depends on `showTickLines`.
+ * @property {ChartTextProps} [tickText] - Optional properties for the text label part of the tick mark.
+ * @property {number} [x] - Optional x-coordinate for the position of the tick mark. Used for horizontal placement.
+ * @property {number} [y] - Optional y-coordinate for the position of the tick mark. Used for vertical placement.
+ */
+export interface TickProps {
+    tick: TickData;
+    showTickLines: boolean;
+    tickLine?: LineProps;
+    tickText?: ChartTextProps;
+    x?: number;
+    y?: number;
+}
+//# sourceMappingURL=tick.types.d.ts.map

package/dist/esm/components/tick/tick.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tick.types.d.ts","sourceRoot":"","sources":["../../../../src/components/tick/tick.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAElE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AACnE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAEpD;;;;;GAKG;AACH,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,eAAO,MAAM,aAAa;IACxB;;;;;;;;;;;;OAYG;+BACwB,QAAQ,EAAE,aAAa,cAAc,KAAG,QAAQ,EAAE;CAM9E,CAAC;AAEF;;;;;;;;;GASG;AACH,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,QAAQ,CAAC;IACf,aAAa,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,CAAC,CAAC,EAAE,MAAM,CAAC;CACZ"}

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

@@ -0,0 +1,24 @@
+/**
+ * Utility functions for working with TickData.
+ */
+export const TickDataUtils = {
+    /**
+     * Formats the values of an array of TickData using the provided formatter function.
+     *
+     * @param {TickData[]} ticks - Array of tick objects to format.
+     * @param {ValueFormatter} formatter - Function to format each tick's value.
+     * @returns {TickData[]} New array of TickData with formatted values.
+     *
+     * @example
+     * const ticks = [{ value: '100', position: 1 }, { value: '200', position: 2 }];
+     * const formatter = (v) => `${v} €`;
+     * const formatted = TickDataUtils.formatTicksValues(ticks, formatter);
+     * // formatted: [{ value: '100 €', position: 1 }, { value: '200 €', position: 2 }]
+     */
+    formatTicksValues: (ticks, formatter) => {
+        return ticks.map(tick => ({
+            ...tick,
+            value: formatter(tick.value),
+        }));
+    },
+};

package/dist/esm/components/zoomArea/components/HandlerIcon.d.ts

@@ -0,0 +1,25 @@
+import type { FC } from 'react';
+/**
+ * Props for the HandlerIcon component
+ */
+interface HandlerIconProps {
+    /** X position of the handler */
+    x: number;
+    /** Y position of the handler center */
+    y: number;
+    /** Fill color for the dots */
+    fill?: string;
+}
+/**
+ * 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
+ */
+export declare const HandlerIcon: FC<HandlerIconProps>;
+export {};
+//# sourceMappingURL=HandlerIcon.d.ts.map

package/dist/esm/components/zoomArea/components/HandlerIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HandlerIcon.d.ts","sourceRoot":"","sources":["../../../../../src/components/zoomArea/components/HandlerIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAYhC;;GAEG;AACH,UAAU,gBAAgB;IACxB,gCAAgC;IAChC,CAAC,EAAE,MAAM,CAAC;IACV,uCAAuC;IACvC,CAAC,EAAE,MAAM,CAAC;IACV,8BAA8B;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CAqB5C,CAAC"}

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

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "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
+ */
+export const HandlerIcon = ({ fill = DEFAULT_ICON_COLOR, x, y }) => {
+    return (_jsxs("g", { fill: fill, pointerEvents: "none", transform: `translate(${x - ICON_OFFSET}, ${y - ICON_OFFSET})`, children: [_jsx("path", { d: "M4.99948 9.99802C4.47168 9.99802 4.04419 9.64335 4.04419 9.20547V0.79255C4.04419 0.354666 4.47168 0 4.99948 0C5.52728 0 5.95477 0.354666 5.95477 0.79255V9.20745C5.95477 9.64533 5.52728 10 4.99948 10V9.99802Z" }), _jsx("path", { d: "M0.955289 8.78839C0.427492 8.78839 0 8.43372 0 7.99584V2.00416C0 1.56628 0.427492 1.21161 0.955289 1.21161C1.48309 1.21161 1.91058 1.56628 1.91058 2.00416V7.99584C1.91058 8.43372 1.48309 8.78839 0.955289 8.78839Z" }), _jsx("path", { d: "M8.08936 7.99584C8.08936 8.43372 8.51685 8.78839 9.04464 8.78839C9.57244 8.78839 9.99993 8.43372 9.99993 7.99584V2.00416C9.99993 1.56628 9.57244 1.21161 9.04464 1.21161C8.51685 1.21161 8.08936 1.56628 8.08936 2.00416V7.99584Z" })] }));
+};

package/dist/esm/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/esm/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/esm/components/zoomArea/components/LineRenderer.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "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
+ */
+export const LineRenderer = ({ linesData }) => {
+    return (_jsx(_Fragment, { children: linesData.map((lineData, index) => (_jsxs("g", { children: [lineData.config.fill && lineData.fillPath && (_jsx("path", { d: lineData.fillPath, fill: lineData.config.fill, fillOpacity: lineData.config.fillOpacity || 0.2, stroke: "none" })), _jsx("path", { d: lineData.linePath, fill: "none", stroke: lineData.config.stroke || DEFAULT_LINE_COLOR, strokeWidth: lineData.config.strokeWidth || 1 })] }, lineData.config.dataKey || lineData.config.yKey || index))) }));
+};

package/dist/esm/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/esm/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/esm/components/zoomArea/components/SelectionArea.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { calculateFocusOutline } from '../../../utils/calculateFocusOutline/calculateFocusOutline';
+import { isFullRange } from '../utils/rangeAndPositions';
+/**
+ * Focus ring for the selection area - rendered separately to control z-order
+ */
+export 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 = 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 (_jsxs("g", { pointerEvents: "none", children: [_jsx("rect", { fill: "none", height: focusOutline.outer.height, stroke: outlineColor, strokeWidth: outlineStrokeWidth, width: focusOutline.outer.width, x: focusOutline.outer.x, y: focusOutline.outer.y }), _jsx("rect", { fill: "none", height: focusOutline.inner.height, stroke: innerColor, strokeWidth: innerStrokeWidth, width: focusOutline.inner.width, x: focusOutline.inner.x, y: focusOutline.inner.y })] }));
+};
+/**
+ * Selection area overlay
+ */
+export const SelectionArea = ({ currentRange, dataLength, dataTestId, endX, height, onBlur, onFocus, onKeyDown, onMouseDown, onTouchStart, screenReaderText, selectionConfig, startX, }) => {
+    // Check if overlay should be hidden based on design specs:
+    // "Only visible when a range is defined"
+    const shouldHideOverlay = selectionConfig.hideOverlayOnFullRange && isFullRange(currentRange, dataLength);
+    return (_jsx(_Fragment, { children: _jsx("rect", { "aria-label": screenReaderText, "aria-valuemax": dataLength - 1, "aria-valuemin": 0, "aria-valuetext": screenReaderText, cursor: "grab", "data-testid": dataTestId, fill: selectionConfig.fill, fillOpacity: selectionConfig.fillOpacity, height: height, role: "slider", stroke: selectionConfig.stroke, strokeWidth: selectionConfig.strokeWidth, style: {
+                outline: 'none',
+                visibility: shouldHideOverlay ? 'hidden' : 'visible',
+            }, tabIndex: 0, width: endX - startX, x: startX, y: 0, onBlur: onBlur, onFocus: onFocus, onKeyDown: onKeyDown, onMouseDown: onMouseDown, onTouchStart: onTouchStart }) }));
+};

package/dist/esm/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/esm/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"}