@kubit-ui-web/react-charts 1.11.0 → 1.11.2

package/dist/cjs/components/line/line.js

@@ -1,9 +1 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * `Line` component that renders an SVG line element with customizable properties.
- *
- * @returns A `line` SVG element with the specified properties and attributes.
- */
-export const Line = ({ ariaLabel, className = 'line', dataTestId, ...props }) => {
-    return _jsx("line", { ...props, "aria-label": ariaLabel, className: className, "data-testid": dataTestId });
-};
+let e=require(`react/jsx-runtime`);exports.Line=({ariaLabel:t,className:n=`line`,dataTestId:r,...i})=>(0,e.jsx)(`line`,{...i,"aria-label":t,className:n,"data-testid":r});

package/dist/cjs/components/node/components/circle/circle.js

@@ -1,6 +1 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-const CircleComponent = ({ dataTestId, position, size = 1, ...props }, ref) => {
-    return (_jsx("circle", { ...props, ref: ref, cx: position?.x, cy: position?.y, "data-testid": `${dataTestId}-circle`, r: size / 2 }));
-};
-export const Circle = forwardRef(CircleComponent);
+let e=require(`react`),t=require(`react/jsx-runtime`);const n=(0,e.forwardRef)(({dataTestId:e,position:n,size:r=1,...i},a)=>(0,t.jsx)(`circle`,{...i,ref:a,cx:n?.x,cy:n?.y,"data-testid":`${e}-circle`,r:r/2}));exports.Circle=n;

package/dist/cjs/components/node/components/hexagon/hexagon.js

@@ -1,8 +1 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import { calculateShapePoints } from '../../utils/calculateShapePoints/calculateShapePoints';
-const HexagonComponent = ({ dataTestId, position = { x: 0, y: 0 }, size = 1, ...props }, ref) => {
-    const hexagonPoints = calculateShapePoints(position.x, position.y, 6, size / 2, size / 2);
-    return (_jsx("polygon", { ...props, ref: ref, "data-testid": `${dataTestId}-hexagon`, points: hexagonPoints }));
-};
-export const Hexagon = forwardRef(HexagonComponent);
+const e=require(`../../utils/calculateShapePoints/calculateShapePoints.js`);let t=require(`react`),n=require(`react/jsx-runtime`);const r=(0,t.forwardRef)(({dataTestId:t,position:r={x:0,y:0},size:i=1,...a},o)=>{let s=e.calculateShapePoints(r.x,r.y,6,i/2,i/2);return(0,n.jsx)(`polygon`,{...a,ref:o,"data-testid":`${t}-hexagon`,points:s})});exports.Hexagon=r;

package/dist/cjs/components/node/components/pentagon/pentagon.js

@@ -1,8 +1 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import { calculateShapePoints } from '../../utils/calculateShapePoints/calculateShapePoints';
-const PentagonComponent = ({ dataTestId, position = { x: 0, y: 0 }, size = 1, ...props }, ref) => {
-    const pentagonPoints = calculateShapePoints(position.x, position.y, 5, size / 2, size / 2);
-    return (_jsx("polygon", { ...props, ref: ref, "data-testid": `${dataTestId}-pentagon`, points: pentagonPoints }));
-};
-export const Pentagon = forwardRef(PentagonComponent);
+const e=require(`../../utils/calculateShapePoints/calculateShapePoints.js`);let t=require(`react`),n=require(`react/jsx-runtime`);const r=(0,t.forwardRef)(({dataTestId:t,position:r={x:0,y:0},size:i=1,...a},o)=>{let s=e.calculateShapePoints(r.x,r.y,5,i/2,i/2);return(0,n.jsx)(`polygon`,{...a,ref:o,"data-testid":`${t}-pentagon`,points:s})});exports.Pentagon=r;

package/dist/cjs/components/node/components/square/square.js

@@ -1,6 +1 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-const SquareComponent = ({ dataTestId, position = { x: 0, y: 0 }, size = 1, ...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);
+let e=require(`react`),t=require(`react/jsx-runtime`);const n=(0,e.forwardRef)(({dataTestId:e,position:n={x:0,y:0},size:r=1,...i},a)=>(0,t.jsx)(`rect`,{...i,ref:a,"data-testid":`${e}-square`,height:r,width:r,x:n.x-r/2,y:n.y-r/2}));exports.Square=n;

package/dist/cjs/components/node/components/star/star.js

@@ -1,10 +1 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import { calculateShapePoints } from '../../utils/calculateShapePoints/calculateShapePoints';
-const StarComponent = ({ dataTestId, position = { x: 0, y: 0 }, size = 1, ...props }, ref) => {
-    const outerRadius = size / 2;
-    const innerRadius = outerRadius / 2;
-    const starPoints = calculateShapePoints(position.x, position.y, 5, outerRadius, innerRadius);
-    return _jsx("polygon", { ...props, ref: ref, "data-testid": `${dataTestId}-star`, points: starPoints });
-};
-export const Star = forwardRef(StarComponent);
+const e=require(`../../utils/calculateShapePoints/calculateShapePoints.js`);let t=require(`react`),n=require(`react/jsx-runtime`);const r=(0,t.forwardRef)(({dataTestId:t,position:r={x:0,y:0},size:i=1,...a},o)=>{let s=i/2,c=s/2,l=e.calculateShapePoints(r.x,r.y,5,s,c);return(0,n.jsx)(`polygon`,{...a,ref:o,"data-testid":`${t}-star`,points:l})});exports.Star=r;

package/dist/cjs/components/node/components/straight/straight.js

@@ -1,7 +1 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-const StraightComponent = ({ dataTestId, position = { x: 0, y: 0 }, size = 1, ...props }, ref) => {
-    const d = `M ${position.x - size / 2} ${position.y} H ${position.x + size / 2} M ${position.x} ${position.y - size / 2} V ${position.y + size / 2}`;
-    return _jsx("path", { ...props, ref: ref, d: d, "data-testid": `${dataTestId}-straight`, strokeWidth: 2 });
-};
-export const Straight = forwardRef(StraightComponent);
+let e=require(`react`),t=require(`react/jsx-runtime`);const n=(0,e.forwardRef)(({dataTestId:e,position:n={x:0,y:0},size:r=1,...i},a)=>{let o=`M ${n.x-r/2} ${n.y} H ${n.x+r/2} M ${n.x} ${n.y-r/2} V ${n.y+r/2}`;return(0,t.jsx)(`path`,{...i,ref:a,d:o,"data-testid":`${e}-straight`,strokeWidth:2})});exports.Straight=n;

package/dist/cjs/components/node/components/triangle/triangle.js

@@ -1,11 +1 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-const TriangleComponent = ({ dataTestId, position = { x: 0, y: 0 }, size = 1, ...props }, ref) => {
-    const points = [
-        `${position.x},${position.y - size / 2}`,
-        `${position.x - size / 2},${position.y + size / 2}`,
-        `${position.x + size / 2},${position.y + size / 2}`,
-    ].join(' ');
-    return _jsx("polygon", { ...props, ref: ref, "data-testid": `${dataTestId}-triangle`, points: points });
-};
-export const Triangle = forwardRef(TriangleComponent);
+let e=require(`react`),t=require(`react/jsx-runtime`);const n=(0,e.forwardRef)(({dataTestId:e,position:n={x:0,y:0},size:r=1,...i},a)=>{let o=[`${n.x},${n.y-r/2}`,`${n.x-r/2},${n.y+r/2}`,`${n.x+r/2},${n.y+r/2}`].join(` `);return(0,t.jsx)(`polygon`,{...i,ref:a,"data-testid":`${e}-triangle`,points:o})});exports.Triangle=n;

package/dist/cjs/components/node/node.js

@@ -1,98 +1 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, } from 'react';
-import { useAutoClick } from '../../charts/lineChart/hook';
-import { Circle } from './components/circle/circle';
-import { Hexagon } from './components/hexagon/hexagon';
-import { Pentagon } from './components/pentagon/pentagon';
-import { Square } from './components/square/square';
-import { Star } from './components/star/star';
-import { Straight } from './components/straight/straight';
-import { Triangle } from './components/triangle/triangle';
-import { NodeType } from './node.types';
-const Component = {
-    [NodeType.Circle]: Circle,
-    [NodeType.Hexagon]: Hexagon,
-    [NodeType.Pentagon]: Pentagon,
-    [NodeType.Square]: Square,
-    [NodeType.Star]: Star,
-    [NodeType.Straight]: Straight,
-    [NodeType.Triangle]: Triangle,
-};
-/**
- * Node component that renders interactive geometric shapes for data visualization.
- *
- * @param props - `NodeProps` include:
- * - `type`: Node type (`NodeType.Circle`, `NodeType.Square`, `NodeType.Triangle`, `NodeType.Star`, `NodeType.Pentagon`, `NodeType.Hexagon`, `NodeType.Straight`). By default is `NodeType.Circle`.
- * - `size`: Shape size. By default is 1.
- * - `fill`: Shape fill color. By default is 'transparent'.
- * - `fillOpacity`: Fill color opacity.
- * - `hasHalo`: Indicates if the shape has a halo effect. By default is `false`.
- * - `position`: Shape position in the plane, with properties `x` and `y`. By default is `{ x: 0, y: 0 }`.
- * - `dataTestId`: Identifier for testing. By default is an empty string.
- * - `stroke`: Shape stroke color.
- * - `strokeWidth`: Shape stroke width.
- * - `opacity`: Shape opacity.
- * - `tabIndex`: Tab index for keyboard navigation.
- * - `id`: Shape unique identifier.
- * - `className`: Additional CSS classes for the shape.
- * - `data`: Shape related data, including index, data value, data key and `x` key.
- * - `onClick`: Function executed when clicking on the shape.
- * - `onKeyDown`: Function executed when pressing a key while the shape has focus.
- * - `onFocus`: Function executed when focusing the shape.
- * - `onBlur`: Function executed when removing focus from the shape.
- * - `onMouseEnter`: Function executed when hovering over the shape.
- * - `onMouseLeave`: Function executed when moving the mouse away from the shape.
- *
- * @returns An SVG element corresponding to the specified node type (`circle`, `rect`, `polygon`), or `null` if the type is not recognized.
- */
-const NodeComponent = ({ dataTestId = 'node', haloConfig, hasHalo = false, onBlur, onClick, onDoubleClick, onFocus, onKeyDown, onMouseEnter, onMouseLeave, position = { x: 0, y: 0 }, size = 1, type = NodeType.Circle, ...props }, ref) => {
-    // It needed to recovery the autoClick info into js event, because the react event can't be modified or handle custom properties
-    const [clickRef, autoClick] = useAutoClick(ref);
-    // TODO - Enrich events with data, stop using extra parameters for callbacks
-    const handleClick = (event) => {
-        onClick?.(event, { ...props.data, nodePosition: position }, autoClick.current);
-    };
-    const handleDoubleClick = (event) => {
-        onDoubleClick?.(event, props.data);
-    };
-    const handleKeyDown = (event) => {
-        if (event.key === 'Enter') {
-            onKeyDown?.(event, props.data);
-        }
-    };
-    const handleFocus = (event) => {
-        onFocus?.(event, props.data);
-    };
-    const handleBlur = (event) => {
-        onBlur?.(event);
-    };
-    const handleMouseEnter = (event) => {
-        onMouseEnter?.(event, props.data);
-    };
-    const handleMouseLeave = (event) => {
-        onMouseLeave?.(event);
-    };
-    const nodeProps = {
-        ...props,
-        className: `node ${props.className}`,
-        onBlur: handleBlur,
-        onClick: handleClick,
-        onDoubleClick: handleDoubleClick,
-        onFocus: handleFocus,
-        onKeyDown: handleKeyDown,
-        onMouseEnter: handleMouseEnter,
-        onMouseLeave: handleMouseLeave,
-    };
-    // Props for halo - exclude interactive handlers and accessibility attributes
-    const haloProps = {
-        className: props.className,
-        fill: haloConfig?.fill || props.fill,
-        fillOpacity: haloConfig?.fillOpacity || 0.25,
-        opacity: haloConfig?.opacity || 0.3,
-        stroke: haloConfig?.stroke || props.stroke,
-        strokeWidth: haloConfig?.strokeWidth || props.strokeWidth,
-    };
-    const InnerNode = Component[type];
-    return (_jsxs(_Fragment, { children: [hasHalo && (_jsx(InnerNode, { ...haloProps, "aria-hidden": "true", dataTestId: `${dataTestId}-halo`, position: position, size: size + size / 2 })), _jsx(InnerNode, { ...nodeProps, ref: clickRef, dataTestId: dataTestId, position: position, size: size })] }));
-};
-export const Node = forwardRef(NodeComponent);
+const e=require(`../../charts/lineChart/hook/useAutoClick.js`),t=require(`./components/circle/circle.js`),n=require(`./components/hexagon/hexagon.js`),r=require(`./components/pentagon/pentagon.js`),i=require(`./components/square/square.js`),a=require(`./components/star/star.js`),o=require(`./components/straight/straight.js`),s=require(`./components/triangle/triangle.js`),c=require(`./node.types.js`);let l=require(`react`),u=require(`react/jsx-runtime`);var d={[c.NodeType.Circle]:t.Circle,[c.NodeType.Hexagon]:n.Hexagon,[c.NodeType.Pentagon]:r.Pentagon,[c.NodeType.Square]:i.Square,[c.NodeType.Star]:a.Star,[c.NodeType.Straight]:o.Straight,[c.NodeType.Triangle]:s.Triangle};const f=(0,l.forwardRef)(({dataTestId:t=`node`,haloConfig:n,hasHalo:r=!1,onBlur:i,onClick:a,onDoubleClick:o,onFocus:s,onKeyDown:l,onMouseEnter:f,onMouseLeave:p,position:m={x:0,y:0},size:h=1,type:g=c.NodeType.Circle,..._},v)=>{let[y,b]=e.useAutoClick(v),x=e=>{a?.(e,{..._.data,nodePosition:m},b.current)},S=e=>{o?.(e,_.data)},C=e=>{e.key===`Enter`&&l?.(e,_.data)},w=e=>{s?.(e,_.data)},T=e=>{i?.(e)},E=e=>{f?.(e,_.data)},D=e=>{p?.(e)},O={..._,className:`node ${_.className}`,onBlur:T,onClick:x,onDoubleClick:S,onFocus:w,onKeyDown:C,onMouseEnter:E,onMouseLeave:D},k={className:_.className,fill:n?.fill||_.fill,fillOpacity:n?.fillOpacity||.25,opacity:n?.opacity||.3,stroke:n?.stroke||_.stroke,strokeWidth:n?.strokeWidth||_.strokeWidth},A=d[g];return(0,u.jsxs)(u.Fragment,{children:[r&&(0,u.jsx)(A,{...k,"aria-hidden":`true`,dataTestId:`${t}-halo`,position:m,size:h+h/2}),(0,u.jsx)(A,{...O,ref:y,dataTestId:t,position:m,size:h})]})});exports.Node=f;

package/dist/cjs/components/node/node.types.js

@@ -1,18 +1 @@
-/**
- * Enum for node types.
- *
- * This enumeration defines the possible types of nodes that can be represented in a graphical interface or data structure.
- * It includes basic geometric shapes such as circles, squares, and triangles, allowing for simple categorization and differentiation
- * of node types in various applications.
- *
- * @enum {string}
- */
-export const NodeType = {
-    Circle: 'circle', // Represents a circle node.
-    Hexagon: 'hexagon', // Represents a hexagon node.
-    Pentagon: 'pentagon', // Represents a pentagon node.
-    Square: 'square', // Represents a square node.
-    Star: 'star', // Represents a star node.
-    Straight: 'straight', // Represents a straight node.
-    Triangle: 'triangle', // Represents a triangle node.
-};
+exports.NodeType={Circle:`circle`,Hexagon:`hexagon`,Pentagon:`pentagon`,Square:`square`,Star:`star`,Straight:`straight`,Triangle:`triangle`};

package/dist/cjs/components/node/utils/calculateShapePoints/calculateShapePoints.js

@@ -1,18 +1 @@
-export const calculateShapePoints = (centerX, centerY, points, outerRadius, innerRadius) => {
-    let result = '';
-    // Determine whether drawing a regular shape or a star
-    const isRegularShape = outerRadius === innerRadius;
-    const iterations = isRegularShape ? points : 2 * points;
-    for (let i = 0; i < iterations; i++) {
-        // Use only outerRadius for regular shapes, alternate for stars
-        const radius = isRegularShape ? outerRadius : i % 2 === 0 ? outerRadius : innerRadius;
-        // Adjust angle to alternate points, subtracting Math.PI / 2 to start vertically
-        const angle = ((Math.PI * 2) / iterations) * i - Math.PI / 2;
-        // Calculate x and y based on angle and radius
-        const x = centerX + Math.cos(angle) * radius;
-        const y = centerY + Math.sin(angle) * radius;
-        // Concatenar el punto al resultado
-        result += `${x},${y} `;
-    }
-    return result.trim();
-};
+exports.calculateShapePoints=(e,t,n,r,i)=>{let a=``,o=r===i,s=o?n:2*n;for(let n=0;n<s;n++){let c=o||n%2==0?r:i,l=Math.PI*2/s*n-Math.PI/2,u=e+Math.cos(l)*c,d=t+Math.sin(l)*c;a+=`${u},${d} `}return a.trim()};

package/dist/cjs/components/path/components/nodePath/nodePath.js

@@ -1,38 +1 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import { processAccessibilityTemplate } from '../../../../charts/lineChart/utils/accessibilityTemplateProcessor';
-import { pickCustomAttributes } from '../../../../utils/pickCustomAttributes/pickCustomAttributes';
-import { Node } from '../../../node/node';
-const NODE_PATH_FOCUS_BORDER = 'node-path-focus-border';
-/**
- * NodePathComponent renders a Node with custom attributes including processed aria-label templates.
- *
- * aria-label attributes in nodeConfig that contain template placeholders like {{dataKey}} will be processed
- * and replaced with actual values from the data.
- */
-const NodePathComponent = ({ data, nodeConfig, tabIndex = 0, x, y }, ref) => {
-    // Extract custom aria-* and data-* attributes from nodeConfig
-    const customAttributes = nodeConfig ? pickCustomAttributes(nodeConfig) : {};
-    // Process aria-label template if it exists and contains placeholders
-    if (customAttributes['aria-label'] &&
-        data &&
-        typeof customAttributes['aria-label'] === 'string') {
-        const ariaLabelValue = customAttributes['aria-label'];
-        if (ariaLabelValue.includes('{{')) {
-            const processedAriaLabel = processAccessibilityTemplate(ariaLabelValue, {
-                dataKey: data.dataKey,
-                dataValue: data.dataValue,
-                index: data.index ?? 0,
-                xKey: data.xKey,
-            }, data.dataValue);
-            if (processedAriaLabel) {
-                customAttributes['aria-label'] = processedAriaLabel;
-            }
-        }
-    }
-    return (_jsx(_Fragment, { children: nodeConfig && (_jsx(Node, { ...nodeConfig, ref: ref, ...customAttributes, className: NODE_PATH_FOCUS_BORDER, data: data, hasHalo: nodeConfig.hasHalo, position: {
-                x: x,
-                y: y,
-            }, tabIndex: tabIndex })) }));
-};
-export const NodePath = forwardRef(NodePathComponent);
+const e=require(`../../../../utils/pickCustomAttributes/pickCustomAttributes.js`),t=require(`../../../../charts/lineChart/utils/accessibilityTemplateProcessor.js`),n=require(`../../../node/node.js`);let r=require(`react`),i=require(`react/jsx-runtime`);var a=`node-path-focus-border`;const o=(0,r.forwardRef)(({data:r,nodeConfig:o,tabIndex:s=0,x:c,y:l},u)=>{let d=o?e.pickCustomAttributes(o):{};if(d[`aria-label`]&&r&&typeof d[`aria-label`]==`string`){let e=d[`aria-label`];if(e.includes(`{{`)){let n=t.processAccessibilityTemplate(e,{dataKey:r.dataKey,dataValue:r.dataValue,index:r.index??0,xKey:r.xKey},r.dataValue);n&&(d[`aria-label`]=n)}}return(0,i.jsx)(i.Fragment,{children:o&&(0,i.jsx)(n.Node,{...o,ref:u,...d,className:a,data:r,hasHalo:o.hasHalo,position:{x:c,y:l},tabIndex:s})})});exports.NodePath=o;

package/dist/cjs/components/path/path2.js

@@ -0,0 +1 @@
+const e=require(`../focusRing/focusRing2.js`),t=require(`../../hooks/useFocus/useFocus.js`),n=require(`../../hooks/useHover/useHover.js`),r=require(`../../utils/adaptLegacyFocusConfig/adaptLegacyFocusConfig.js`),i=require(`../../utils/cssGradientToSvg/cssGradientToSvg.js`),a=require(`../../utils/pickCustomAttributes/pickCustomAttributes.js`),o=require(`../../utils/shadowSvg/shadowSvg.js`),s=require(`./components/nodePath/nodePath.js`);;/* empty css      */let c=require(`react`),l=require(`react/jsx-runtime`);var u={code:`Enter`,key:`Enter`,keyCode:13,which:13},d=`shadow`;const f=(0,c.forwardRef)(({classNames:f=``,fill:p=`transparent`,stroke:m=`#0000FF`,strokeWidth:h=`1`,focusConfig:g,hoverConfig:_={stroke:`#0000FF`,strokeWidth:`0.5`},role:v=`img`,tabIndex:y=0,...b},x)=>{let{handleBlur:S,handleFocus:C,isFocused:w}=t.useFocus(b.onFocus,b.onBlur),T=r.adaptLegacyFocusConfig(g),{handleMouseEnter:E,handleMouseLeave:D,isHovered:O}=n.useHover(b.onMouseEnter,b.onMouseLeave),k=(0,c.useRef)(null),A=(0,c.useRef)([]),j=(0,c.useRef)(null);(0,c.useImperativeHandle)(x,()=>({get main(){return j.current},get node(){return A.current},get path(){return k.current}}));let M=e=>{e.key===u.key&&b.onKeyDown?.(b.dataValue)},N=()=>{b.onClick?.(b.dataValue)},P=e=>{b.onDoubleClick?.(e,b.dataValue)},F=e=>{e.preventDefault()},I=b.gradient&&i.cssGradientToSVG(b.gradient),L=a.pickCustomAttributes(b),R={...b,classNames:`path ${f}`,fill:I?`url(#gradientePath)`:p,filter:`url(#shadow)`,role:v,stroke:m,strokeWidth:h,tabIndex:y,...O&&_};return(0,l.jsxs)(`g`,{ref:j,children:[I&&I,R.shadowSvgConfig&&(0,l.jsx)(o.ShadowSvg,{id:d,shadowSvgConfig:R.shadowSvgConfig}),(0,l.jsx)(e.FocusRing,{dataTestId:`${R.dataTestId}-focus-ring`,focusConfig:T,isFocused:w,targetRef:k}),(0,l.jsxs)(`g`,{"aria-label":R.ariaLabel,className:R.classNames,"data-draw":!0,filter:R.shadowSvgConfig&&R.filter,opacity:R.opacity,orientation:R.orientation,role:R.role,rotate:R.rotate,tabIndex:R.tabIndex,transform:R.transform,visibility:R.visibility,...L,onBlur:S,onClick:N,onDoubleClick:P,onFocus:C,onKeyDown:M,onMouseDown:F,onMouseEnter:E,onMouseLeave:D,children:[(0,l.jsx)(`path`,{ref:k,d:R.d,"data-testid":R.dataTestId,fill:R.dFill?`transparent`:R.fill,fillOpacity:R.fillOpacity,fillRule:R.fillRule,stroke:R.stroke,strokeDasharray:R.strokeDasharray,strokeDashoffset:R.strokeDashoffset,strokeLinecap:R.strokeLinecap,strokeLinejoin:R.strokeLinejoin,strokeMiterlimit:R.strokeMiterlimit,strokeOpacity:R.strokeOpacity,strokeWidth:R.strokeWidth,children:R.title&&(0,l.jsx)(`title`,{children:R.title})}),R.dFill&&(0,l.jsx)(`path`,{d:R.dFill,fill:R.fill,fillOpacity:R.fillOpacity,fillRule:R.fillRule})]}),R.points&&R.nodeConfig&&R.points.map(([e,t],n)=>(0,l.jsx)(s.NodePath,{ref:e=>A.current[n]=e,data:{dataKey:R.dataKey,dataValue:R.dataValue,index:n,xKey:R?.xKey},nodeConfig:R.nodeConfig,tabIndex:-1,x:e,y:t},`${n.toString()}`))]})});exports.Path=f;

package/dist/cjs/components/plot/components/circle/circle.js

@@ -1,6 +1 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-const CircleComponent = ({ dataTestId, position, size, ...props }, ref) => {
-    return (_jsx("circle", { ...props, ref: ref, cx: position.x, cy: position.y, "data-testid": `${dataTestId}-circle`, r: size / 2 }));
-};
-export const Circle = forwardRef(CircleComponent);
+let e=require(`react`),t=require(`react/jsx-runtime`);const n=(0,e.forwardRef)(({dataTestId:e,position:n,size:r,...i},a)=>(0,t.jsx)(`circle`,{...i,ref:a,cx:n.x,cy:n.y,"data-testid":`${e}-circle`,r:r/2}));exports.Circle=n;

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

@@ -1,6 +1 @@
-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);
+let e=require(`react`),t=require(`react/jsx-runtime`);const n=(0,e.forwardRef)(({dataTestId:e,position:n,size:r,...i},a)=>(0,t.jsx)(`rect`,{...i,ref:a,"data-testid":`${e}-square`,height:r,width:r,x:n.x-r/2,y:n.y-r/2}));exports.Square=n;

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

@@ -1,14 +1 @@
-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);
+let e=require(`react`),t=require(`react/jsx-runtime`);const n=(0,e.forwardRef)(({dataTestId:e,position:n,size:r,...i},a)=>{let o=r/2,s=r,c=`${`${n.x},${n.y-s/2}`} ${`${n.x-o},${n.y+s/2}`} ${`${n.x+o},${n.y+s/2}`}`;return(0,t.jsx)(`polygon`,{...i,ref:a,"data-testid":`${e}-triangle`,points:c})});exports.Triangle=n;

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

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

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

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

package/dist/cjs/components/svgContainer/svgContainer.js

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

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

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

package/dist/cjs/components/tick/tick.js

@@ -1,19 +1 @@
-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 })] }));
+const e=require(`../line/line.js`),t=require(`../chartText/chartText.js`);let n=require(`react/jsx-runtime`);exports.Tick=({showTickLines:r,tick:i,tickLine:a,tickText:o})=>(0,n.jsxs)(`g`,{children:[r&&(0,n.jsx)(e.Line,{...a}),o&&(0,n.jsx)(t.ChartText,{...o,children:i.value})]});

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

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

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

@@ -1,22 +1 @@
-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" })] }));
-};
+let e=require(`react/jsx-runtime`);var t=`#8f8f8f`,n=5;exports.HandlerIcon=({fill:r=t,x:i,y:a})=>(0,e.jsxs)(`g`,{fill:r,pointerEvents:`none`,transform:`translate(${i-n}, ${a-n})`,children:[(0,e.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,e.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,e.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/cjs/components/zoomArea/components/LineRenderer.js

@@ -1,11 +1 @@
-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))) }));
-};
+let e=require(`react/jsx-runtime`);var t=`#0078D4`;exports.LineRenderer=({linesData:n})=>(0,e.jsx)(e.Fragment,{children:n.map((n,r)=>(0,e.jsxs)(`g`,{children:[n.config.fill&&n.fillPath&&(0,e.jsx)(`path`,{d:n.fillPath,fill:n.config.fill,fillOpacity:n.config.fillOpacity||.2,stroke:`none`}),(0,e.jsx)(`path`,{d:n.linePath,fill:`none`,stroke:n.config.stroke||t,strokeWidth:n.config.strokeWidth||1})]},n.config.dataKey||n.config.yKey||r))});

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

@@ -1,16 +1 @@
-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 }) }));
-});
-SelectionArea.displayName = 'SelectionArea';
+const e=require(`../utils/rangeAndPositions.js`);let t=require(`react`),n=require(`react/jsx-runtime`);const r=(0,t.forwardRef)(({currentRange:t,dataLength:r,dataTestId:i,endX:a,height:o,onBlur:s,onFocus:c,onKeyDown:l,onMouseDown:u,onTouchStart:d,screenReaderText:f,selectionConfig:p,startX:m},h)=>{let g=p.hideOverlayOnFullRange&&e.isFullRange(t,r);return(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(`rect`,{ref:h,"aria-label":f,"aria-valuemax":r-1,"aria-valuemin":0,"aria-valuetext":f,cursor:`grab`,"data-testid":i,fill:p.fill,fillOpacity:p.fillOpacity,height:o,role:`slider`,stroke:p.stroke,strokeWidth:p.strokeWidth,style:{outline:`none`,visibility:g?`hidden`:`visible`},tabIndex:0,width:a-m,x:m,y:0,onBlur:s,onFocus:c,onKeyDown:l,onMouseDown:u,onTouchStart:d})})});r.displayName=`SelectionArea`,exports.SelectionArea=r;

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

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