@kubit-ui-web/react-charts 1.10.0 → 1.11.1

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

@@ -1,6 +1,12 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-const SquareComponent = ({ dataTestId, position, size, ...props }, ref) => {
-    return (_jsx("rect", { ...props, ref: ref, "data-testid": `${dataTestId}-square`, height: size, width: size, x: position.x - size / 2, y: position.y - size / 2 }));
-};
-export const Square = forwardRef(SquareComponent);
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+const Square = forwardRef(({ dataTestId: e, position: t, size: n, ...r }, i) => /* @__PURE__ */ jsx("rect", {
+	...r,
+	ref: i,
+	"data-testid": `${e}-square`,
+	height: n,
+	width: n,
+	x: t.x - n / 2,
+	y: t.y - n / 2
+}));
+export { Square };

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

@@ -1,14 +1,12 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-const TriangleComponent = ({ dataTestId, position, size, ...props }, ref) => {
-    // Create an isosceles triangle where both width and height are size*2
-    // This maintains consistency with the circle and square Plots
-    const halfWidth = size / 2;
-    const height = size;
-    const topPoint = `${position.x},${position.y - height / 2}`;
-    const bottomLeft = `${position.x - halfWidth},${position.y + height / 2}`;
-    const bottomRight = `${position.x + halfWidth},${position.y + height / 2}`;
-    const trianglePoints = `${topPoint} ${bottomLeft} ${bottomRight}`;
-    return (_jsx("polygon", { ...props, ref: ref, "data-testid": `${dataTestId}-triangle`, points: trianglePoints }));
-};
-export const Triangle = forwardRef(TriangleComponent);
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+const Triangle = forwardRef(({ dataTestId: e, position: t, size: n, ...r }, i) => {
+	let a = n / 2, o = n, s = `${`${t.x},${t.y - o / 2}`} ${`${t.x - a},${t.y + o / 2}`} ${`${t.x + a},${t.y + o / 2}`}`;
+	return /* @__PURE__ */ jsx("polygon", {
+		...r,
+		ref: i,
+		"data-testid": `${e}-triangle`,
+		points: s
+	});
+});
+export { Triangle };

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

@@ -1,51 +1,18 @@
-/**
- * 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,
+const PlotType = {
+	CIRCLE: "CIRCLE",
+	SQUARE: "SQUARE",
+	TRIANGLE: "TRIANGLE"
+}, PlotSize = {
+	EXTRA_LARGE: "EXTRA_LARGE",
+	EXTRA_SMALL: "EXTRA_SMALL",
+	LARGE: "LARGE",
+	MEDIUM: "MEDIUM",
+	SMALL: "SMALL"
+}, PLOT_SIZE_MAP = {
+	[PlotSize.EXTRA_LARGE]: 40,
+	[PlotSize.EXTRA_SMALL]: 8,
+	[PlotSize.LARGE]: 32,
+	[PlotSize.MEDIUM]: 24,
+	[PlotSize.SMALL]: 16
 };
+export { PLOT_SIZE_MAP, PlotSize, PlotType };

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

@@ -0,0 +1,68 @@
+import { FocusRing } from "../focusRing/focusRing2.js";
+import { useFocus } from "../../hooks/useFocus/useFocus.js";
+import { useHover } from "../../hooks/useHover/useHover.js";
+import { Circle } from "./components/circle/circle.js";
+import { Square } from "./components/square/square.js";
+import { Triangle } from "./components/triangle/triangle.js";
+/* empty css     */
+import { PLOT_SIZE_MAP, PlotSize, PlotType } from "./plot.types.js";
+import { forwardRef } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var TRIANGLE_CENTROID_OFFSET_DIVISOR = 6, Component = {
+	[PlotType.CIRCLE]: Circle,
+	[PlotType.SQUARE]: Square,
+	[PlotType.TRIANGLE]: Triangle
+};
+const Plot = forwardRef(({ className: t, data: n, dataTestId: r = "plot", fill: i, fillOpacity: a, focusConfig: o, hasHoverEffect: s, hoverConfig: c, id: l, label: u, onBlur: d, onClick: f, onFocus: p, onKeyDown: m, onMouseEnter: h, onMouseLeave: g, opacity: _, position: v = {
+	x: 0,
+	y: 0
+}, size: y = PlotSize.MEDIUM, stroke: b, strokeWidth: x, tabIndex: S, type: C = PlotType.CIRCLE, ...w }, T) => {
+	let { handleMouseEnter: E, handleMouseLeave: D, isHovered: O } = useHover(h, g), { handleBlur: k, handleFocus: A, isFocused: j } = useFocus(p, d), M = (e) => {
+		f && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), f(e)), m?.(e);
+	}, { fill: N = i, opacity: P = .3, scale: F = 1.3, stroke: I = i, strokeWidth: L = 0 } = c || {}, R = typeof y == "number" ? y : PLOT_SIZE_MAP[y], z = {
+		...w,
+		"aria-label": u,
+		className: `plot ${t || ""}`,
+		dataTestId: r,
+		fill: i,
+		fillOpacity: a,
+		id: l,
+		onBlur: k,
+		onClick: f,
+		onFocus: A,
+		onKeyDown: M,
+		onMouseEnter: E,
+		onMouseLeave: D,
+		opacity: _,
+		position: v,
+		role: "button",
+		size: R,
+		stroke: b,
+		strokeWidth: s && O && !j ? 0 : x,
+		tabIndex: S
+	}, B = Component[C], V = C === PlotType.TRIANGLE ? {
+		x: v.x,
+		y: v.y - R * (F - 1) / TRIANGLE_CENTROID_OFFSET_DIVISOR
+	} : v;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [s && O && !j && /* @__PURE__ */ jsx(B, {
+		dataTestId: `${r}-hover`,
+		fill: N,
+		opacity: P,
+		position: V,
+		size: R * F,
+		stroke: I,
+		strokeWidth: L
+	}), /* @__PURE__ */ jsx(FocusRing, {
+		dataTestId: r,
+		focusConfig: {
+			...o,
+			variant: o?.variant ?? "bounding-box"
+		},
+		isFocused: j,
+		children: /* @__PURE__ */ jsx(B, {
+			ref: T,
+			...z
+		})
+	})] });
+});
+export { Plot };

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

@@ -1,34 +1,33 @@
-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);
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+const SvgContainer = forwardRef(({ ariaHidden: e, ariaLabel: t, backgroundColor: n, caption: r, children: i, className: a, dataTestId: o, height: s, imageSrc: c, overflow: l, radius: u = "0px", role: d, tabIndex: f, viewBox: p, width: m, ...h }, g) => /* @__PURE__ */ jsxs("svg", {
+	ref: g,
+	"aria-hidden": e,
+	"aria-label": t,
+	className: a,
+	"data-testid": o,
+	height: s,
+	role: d,
+	style: {
+		backgroundColor: n,
+		borderRadius: u,
+		overflow: l
+	},
+	tabIndex: f,
+	viewBox: p,
+	width: m,
+	onMouseDown: (e) => e.preventDefault(),
+	...h,
+	children: [
+		r && /* @__PURE__ */ jsx("title", { children: r }),
+		c && /* @__PURE__ */ jsx("image", {
+			height: s,
+			href: c,
+			width: m,
+			x: "0",
+			y: "0"
+		}),
+		i
+	]
+}));
+export { SvgContainer };

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

@@ -1,20 +1,2 @@
-/**
- * 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}`;
-};
+const buildViewBox = (e, t, n = 0) => `${-n} ${-n} ${e} ${t}`;
+export { buildViewBox };

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

@@ -1,19 +1,8 @@
-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 })] }));
+import { Line } from "../line/line.js";
+import { ChartText } from "../chartText/chartText.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+const Tick = ({ showTickLines: e, tick: t, tickLine: n, tickText: r }) => /* @__PURE__ */ jsxs("g", { children: [e && /* @__PURE__ */ jsx(Line, { ...n }), r && /* @__PURE__ */ jsx(ChartText, {
+	...r,
+	children: t.value
+})] });
+export { Tick };

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

@@ -1,24 +1,5 @@
-/**
- * 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),
-        }));
-    },
-};
+const TickDataUtils = { formatTicksValues: (e, t) => e.map((e) => ({
+	...e,
+	value: t(e.value)
+})) };
+export { TickDataUtils };

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

@@ -1,22 +1,13 @@
-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" })] }));
-};
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_ICON_COLOR = "#8f8f8f", ICON_OFFSET = 5;
+const HandlerIcon = ({ fill: e = DEFAULT_ICON_COLOR, x: t, y: n }) => /* @__PURE__ */ jsxs("g", {
+	fill: e,
+	pointerEvents: "none",
+	transform: `translate(${t - ICON_OFFSET}, ${n - ICON_OFFSET})`,
+	children: [
+		/* @__PURE__ */ 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" }),
+		/* @__PURE__ */ 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" }),
+		/* @__PURE__ */ jsx("path", { d: "M8.08936 7.99584C8.08936 8.43372 8.51685 8.78839 9.04464 8.78839C9.57244 8.78839 9.99993 8.43372 9.99993 7.99584V2.00416C9.99993 1.56628 9.57244 1.21161 9.04464 1.21161C8.51685 1.21161 8.08936 1.56628 8.08936 2.00416V7.99584Z" })
+	]
+});
+export { HandlerIcon };

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

@@ -1,11 +1,14 @@
-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))) }));
-};
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_LINE_COLOR = "#0078D4";
+const LineRenderer = ({ linesData: t }) => /* @__PURE__ */ jsx(Fragment, { children: t.map((e, t) => /* @__PURE__ */ jsxs("g", { children: [e.config.fill && e.fillPath && /* @__PURE__ */ jsx("path", {
+	d: e.fillPath,
+	fill: e.config.fill,
+	fillOpacity: e.config.fillOpacity || .2,
+	stroke: "none"
+}), /* @__PURE__ */ jsx("path", {
+	d: e.linePath,
+	fill: "none",
+	stroke: e.config.stroke || DEFAULT_LINE_COLOR,
+	strokeWidth: e.config.strokeWidth || 1
+})] }, e.config.dataKey || e.config.yKey || t)) });
+export { LineRenderer };

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

@@ -1,16 +1,36 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import { isFullRange } from '../utils/rangeAndPositions';
-/**
- * Selection area overlay - the interactive rectangle that users can drag and focus
- */
-export const SelectionArea = forwardRef(({ currentRange, dataLength, dataTestId, endX, height, onBlur, onFocus, onKeyDown, onMouseDown, onTouchStart, screenReaderText, selectionConfig, startX, }, ref) => {
-    // 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", { ref: ref, "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 }) }));
+import { isFullRange } from "../utils/rangeAndPositions.js";
+import { forwardRef } from "react";
+import { Fragment, jsx } from "react/jsx-runtime";
+const SelectionArea = forwardRef(({ currentRange: e, dataLength: t, dataTestId: n, endX: r, height: i, onBlur: a, onFocus: o, onKeyDown: s, onMouseDown: c, onTouchStart: l, screenReaderText: u, selectionConfig: d, startX: f }, p) => {
+	let m = d.hideOverlayOnFullRange && isFullRange(e, t);
+	return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("rect", {
+		ref: p,
+		"aria-label": u,
+		"aria-valuemax": t - 1,
+		"aria-valuemin": 0,
+		"aria-valuetext": u,
+		cursor: "grab",
+		"data-testid": n,
+		fill: d.fill,
+		fillOpacity: d.fillOpacity,
+		height: i,
+		role: "slider",
+		stroke: d.stroke,
+		strokeWidth: d.strokeWidth,
+		style: {
+			outline: "none",
+			visibility: m ? "hidden" : "visible"
+		},
+		tabIndex: 0,
+		width: r - f,
+		x: f,
+		y: 0,
+		onBlur: a,
+		onFocus: o,
+		onKeyDown: s,
+		onMouseDown: c,
+		onTouchStart: l
+	}) });
 });
-SelectionArea.displayName = 'SelectionArea';
+SelectionArea.displayName = "SelectionArea";
+export { SelectionArea };

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

@@ -1,46 +1,69 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { FocusRing } from '../../../components/focusRing/focusRing';
-import { HandlerIcon } from './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,
+import { FocusRing } from "../../focusRing/focusRing2.js";
+import { HandlerIcon } from "./HandlerIcon.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var HANDLER_COLORS = {
+	FILL: "#ffffff",
+	STROKE: "#8f8f8f"
+}, HANDLER_DIMENSIONS = {
+	RADIUS: 17,
+	STROKE_WIDTH: 1,
+	VERTICAL_LINE_WIDTH: 2
+}, getHandlerStyles = (e) => ({
+	fill: e?.fill || HANDLER_COLORS.FILL,
+	iconColor: e?.iconColor || HANDLER_COLORS.STROKE,
+	radius: e?.radius || HANDLER_DIMENSIONS.RADIUS,
+	stroke: e?.stroke || HANDLER_COLORS.STROKE,
+	strokeWidth: e?.strokeWidth || HANDLER_DIMENSIONS.STROKE_WIDTH,
+	verticalLineStroke: e?.verticalLineStroke || HANDLER_COLORS.STROKE,
+	verticalLineStrokeWidth: e?.verticalLineStrokeWidth || HANDLER_DIMENSIONS.VERTICAL_LINE_WIDTH
 });
-/**
- * Individual zoom handler with line, circle, and icon
- */
-export const ZoomHandler = ({ dataTestId, focusConfig, handlerConfig, height, isFocused, max, min, onBlur, onFocus, onKeyDown, onMouseDown, onTouchStart, screenReaderText, x, }) => {
-    const centerY = height / 2;
-    const styles = getHandlerStyles(handlerConfig);
-    return (_jsxs("g", { "data-testid": `${dataTestId}-group`, children: [_jsx("line", { pointerEvents: "none", stroke: styles.verticalLineStroke, strokeWidth: styles.verticalLineStrokeWidth, x1: x, x2: x, y1: 0, y2: height }), _jsx(FocusRing, { dataTestId: dataTestId, focusConfig: focusConfig, isFocused: isFocused, children: _jsx("circle", { "aria-label": screenReaderText, "aria-valuemax": max, "aria-valuemin": min, "aria-valuetext": screenReaderText, cursor: "ew-resize", cx: x, cy: centerY, "data-testid": dataTestId, fill: styles.fill, r: styles.radius, role: "slider", stroke: styles.stroke, strokeWidth: styles.strokeWidth, style: { outline: 'none' }, tabIndex: 0, onBlur: onBlur, onFocus: onFocus, onKeyDown: onKeyDown, onMouseDown: onMouseDown, onTouchStart: onTouchStart }) }), _jsx(HandlerIcon, { fill: styles.iconColor, x: x, y: centerY })] }));
+const ZoomHandler = ({ dataTestId: t, focusConfig: n, handlerConfig: r, height: i, isFocused: a, max: o, min: s, onBlur: c, onFocus: l, onKeyDown: u, onMouseDown: d, onTouchStart: f, screenReaderText: p, x: m }) => {
+	let h = i / 2, g = getHandlerStyles(r);
+	return /* @__PURE__ */ jsxs("g", {
+		"data-testid": `${t}-group`,
+		children: [
+			/* @__PURE__ */ jsx("line", {
+				pointerEvents: "none",
+				stroke: g.verticalLineStroke,
+				strokeWidth: g.verticalLineStrokeWidth,
+				x1: m,
+				x2: m,
+				y1: 0,
+				y2: i
+			}),
+			/* @__PURE__ */ jsx(FocusRing, {
+				dataTestId: t,
+				focusConfig: n,
+				isFocused: a,
+				children: /* @__PURE__ */ jsx("circle", {
+					"aria-label": p,
+					"aria-valuemax": o,
+					"aria-valuemin": s,
+					"aria-valuetext": p,
+					cursor: "ew-resize",
+					cx: m,
+					cy: h,
+					"data-testid": t,
+					fill: g.fill,
+					r: g.radius,
+					role: "slider",
+					stroke: g.stroke,
+					strokeWidth: g.strokeWidth,
+					style: { outline: "none" },
+					tabIndex: 0,
+					onBlur: c,
+					onFocus: l,
+					onKeyDown: u,
+					onMouseDown: d,
+					onTouchStart: f
+				})
+			}),
+			/* @__PURE__ */ jsx(HandlerIcon, {
+				fill: g.iconColor,
+				x: m,
+				y: h
+			})
+		]
+	});
 };
+export { ZoomHandler };