@kubit-ui-web/react-charts 0.1.0

package/dist/esm/components/path/path.js

@@ -0,0 +1,115 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useImperativeHandle, useRef, } from 'react';
+import { useFocus } from '../../hooks/useFocus/useFocus';
+import { useHover } from '../../hooks/useHover/useHover';
+import { cssGradientToSVG } from '../../utils/cssGradientToSvg/cssGradientToSvg';
+import { pickCustomAttributes } from '../../utils/pickCustomAttributes/pickCustomAttributes';
+import { ShadowSvg } from '../../utils/shadowSvg/shadowSvg';
+import { NodePath } from './components/nodePath/nodePath';
+import './path.css';
+const ENTER = {
+    code: 'Enter',
+    key: 'Enter',
+    keyCode: 13,
+    which: 13,
+};
+const SHADOW_FILTER_ID = 'shadow';
+/**
+ * Represents a customizable SVG path component in
+ *
+ * This component renders an SVG path with various customizable properties such as fill color, stroke color, and stroke width.
+ * It supports dynamic SVG gradients through a utility function, interactive event handlers, and accessibility features.
+ * Additionally, it can render optional nodes (control points) along the path for visual editing or debugging purposes.
+ *
+ * @param {PathProps} props - The properties for the path component.
+ * @param {string} [props.fill='transparent'] - The fill color of the path. Defaults to 'transparent'.
+ * @param {string} [props.gradient] - A CSS gradient string that will be converted to an SVG gradient.
+ * @param {string | number} [props.dataValue] - The value of the represented data.
+ * @param {string} [props.d] - The SVG path data string.
+ * @param {number} [props.tabIndex] - The tab index for keyboard navigation.
+ * @param {Function} [props.onClick] - Click event handler.
+ * @param {Function} [props.onMouseEnter] - Mouse enter event handler.
+ * @param {Function} [props.onMouseLeave] - Mouse leave event handler.
+ * @param {Function} [props.onFocus] - Focus event handler.
+ * @param {Function} [props.onBlur] - Blur event handler.
+ * @param {Function} [props.onKeyDown] - KeyDown event handler.
+ * @param {string} [props.title] - A text title for the path, used for accessibility.
+ * @param {string} [props.role='img'] - ARIA role for the path.
+ * @param {string} [props.ariaLabel] - ARIA label for the path.
+ * @param {string} [props.classNames=''] - Additional CSS class names for the path.
+ * @param {string} [props.stroke='none'] - The stroke color of the path.
+ * @param {string} [props.strokeWidth='0'] - The stroke width of the path.
+ * @param {string} [props.dataTestId] - A data attribute used for testing.
+ * @param {Array} [props.points] - An array of points for rendering nodes along the path.
+ * @param {Object} [props.nodeConfig] - Configuration for the nodes.
+ *
+ * @returns {ReactElement} A React element representing the SVG path.
+ */
+const PathComponent = ({ classNames = '', fill = 'transparent', stroke = '#0000FF', strokeWidth = '1', focusConfig = {
+    stroke: '#0000FF',
+    strokeWidth: '0.5',
+}, hoverConfig = {
+    stroke: '#0000FF',
+    strokeWidth: '0.5',
+}, role = 'img', ...props }, ref) => {
+    const { handleBlur, handleFocus, isFocused } = useFocus(props.onFocus, props.onBlur);
+    const { handleMouseEnter, handleMouseLeave, isHovered } = useHover(props.onMouseEnter, props.onMouseLeave);
+    const pathRef = useRef(null);
+    const nodeRef = useRef([]);
+    const mainRef = useRef(null);
+    useImperativeHandle(ref, () => ({
+        get main() {
+            return mainRef.current;
+        },
+        get node() {
+            return nodeRef.current;
+        },
+        get path() {
+            return pathRef.current;
+        },
+    }));
+    const handleKeyDown = (event) => {
+        if (event.key === ENTER.key) {
+            props.onKeyDown?.(props.dataValue);
+        }
+    };
+    const handleClick = () => {
+        props.onClick?.(props.dataValue);
+    };
+    const handleDoubleClick = (e) => {
+        props.onDoubleClick?.(e, props.dataValue);
+    };
+    const handleMouseDown = (e) => {
+        e.preventDefault();
+    };
+    const gradientSvgElement = props.gradient && cssGradientToSVG(props.gradient);
+    // Extract custom data-* and aria-* attributes
+    const customAttributes = pickCustomAttributes(props);
+    // Merge props to include focus and hover styles
+    const defaultProps = {
+        ...props,
+        classNames: `path ${classNames}`,
+        fill: gradientSvgElement ? 'url(#gradientePath)' : fill,
+        filter: 'url(#shadow)',
+        role,
+        stroke,
+        strokeWidth,
+    };
+    const mergedProps = {
+        ...defaultProps,
+        ...(isFocused && focusConfig),
+        ...(isHovered && hoverConfig),
+    };
+    return (_jsxs("g", { ref: mainRef, tabIndex: -1, children: [gradientSvgElement && gradientSvgElement, mergedProps.shadowSvgConfig && (_jsx(ShadowSvg, { id: SHADOW_FILTER_ID, shadowSvgConfig: mergedProps.shadowSvgConfig })), _jsxs("g", { "aria-label": mergedProps.ariaLabel, className: mergedProps.classNames, "data-draw": true, filter: mergedProps.shadowSvgConfig && mergedProps.filter, opacity: mergedProps.opacity, orientation: mergedProps.orientation, role: mergedProps.role, rotate: mergedProps.rotate, tabIndex: mergedProps.tabIndex, transform: mergedProps.transform, visibility: mergedProps.visibility, ...customAttributes, onBlur: handleBlur, onClick: handleClick, onDoubleClick: handleDoubleClick, onFocus: handleFocus, onKeyDown: handleKeyDown, onMouseDown: handleMouseDown, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [_jsx("path", { ref: pathRef, d: mergedProps.d, "data-testid": mergedProps.dataTestId, fill: mergedProps.dFill ? 'transparent' : mergedProps.fill, fillOpacity: mergedProps.fillOpacity, fillRule: mergedProps.fillRule, stroke: mergedProps.stroke, strokeDasharray: mergedProps.strokeDasharray, strokeDashoffset: mergedProps.strokeDashoffset, strokeLinecap: mergedProps.strokeLinecap, strokeLinejoin: mergedProps.strokeLinejoin, strokeMiterlimit: mergedProps.strokeMiterlimit, strokeOpacity: mergedProps.strokeOpacity, strokeWidth: mergedProps.strokeWidth, children: mergedProps.title && _jsx("title", { children: mergedProps.title }) }), mergedProps.dFill && (_jsx("path", { d: mergedProps.dFill, fill: mergedProps.fill, fillOpacity: mergedProps.fillOpacity, fillRule: mergedProps.fillRule }))] }), mergedProps.points &&
+                mergedProps.nodeConfig &&
+                mergedProps.points.map(([x, y], index) => {
+                    const nodeData = {
+                        dataKey: mergedProps.dataKey,
+                        dataValue: mergedProps.dataValue,
+                        index,
+                        xKey: mergedProps?.xKey,
+                    };
+                    return (_jsx(NodePath, { ref: rf => (nodeRef.current[index] = rf), data: nodeData, nodeConfig: mergedProps.nodeConfig, tabIndex: -1, x: x, y: y }, `${index.toString()}`));
+                })] }));
+};
+export const Path = forwardRef(PathComponent);

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

@@ -0,0 +1,74 @@
+import type { AriaAttributes } from 'react';
+import type { ShadowSvgConfig } from '../../utils/shadowSvg/shadowSvg.types';
+import type { NodeProps } from '../node/node.types';
+interface IDataPoint {
+    [key: string]: any;
+}
+export interface StyleProps {
+    fill?: string;
+    fillOpacity?: number | string;
+    fillRule?: 'nonzero' | 'evenodd';
+    opacity?: number | string;
+    orientation?: number | string;
+    rotate?: number | string;
+    stroke?: string;
+    strokeDasharray?: string | number;
+    strokeDashoffset?: string | number;
+    strokeLinecap?: 'butt' | 'round' | 'square';
+    strokeLinejoin?: 'miter' | 'round' | 'bevel';
+    strokeMiterlimit?: number | string;
+    strokeOpacity?: number | string;
+    strokeWidth?: number | string;
+    transform?: string;
+    visibility?: number | string;
+}
+/**
+ * Shared interface for custom data-* attributes.
+ */
+export interface DataAttributes {
+    [key: `data-${string}`]: string | number | boolean | undefined;
+}
+export interface NodePathProps extends Omit<NodeProps, 'position' | 'data' | 'ariaLabel'>, AriaAttributes, DataAttributes {
+}
+export type DataValueType = string | number | IDataPoint[];
+/**
+ * Defines the properties for a Path component in an SVG.
+ *
+ * This interface outlines the various properties that can be set on a Path component within an SVG, allowing for
+ * detailed customization of appearance and behavior. Properties include standard SVG attributes like `fill`, `stroke`,
+ * and `d` (path data), as well as React-specific event handlers such as `onClick` and `onMouseOver`. Additional
+ * properties support accessibility, styling, and interaction enhancements.
+ */
+export interface PathProps extends StyleProps, AriaAttributes, DataAttributes {
+    d?: string;
+    dFill?: string;
+    classNames?: string;
+    gradient?: string;
+    shadowSvgConfig?: ShadowSvgConfig;
+    focusConfig?: StyleProps;
+    hoverConfig?: StyleProps;
+    dataValue?: string | number | IDataPoint[];
+    title?: string;
+    role?: string;
+    ariaLabel?: string;
+    ariaHidden?: boolean;
+    tabIndex?: number;
+    dataTestId?: string;
+    dataKey?: string;
+    xKey?: string;
+    curved?: boolean;
+    gap?: number;
+    innerRadius?: number | string;
+    radius?: number | string;
+    points?: [number, number][];
+    nodeConfig?: NodePathProps;
+    onClick?: (dataValue?: DataValueType) => void;
+    onDoubleClick?: (event: React.MouseEvent<SVGPathElement, MouseEvent>, dataValue?: DataValueType) => void;
+    onMouseEnter?: (event: React.MouseEvent<SVGPathElement, MouseEvent>) => void;
+    onMouseLeave?: (event: React.MouseEvent<SVGPathElement, MouseEvent>) => void;
+    onFocus?: (event: React.FocusEvent<SVGPathElement>) => void;
+    onBlur?: (event: React.FocusEvent<SVGPathElement>) => void;
+    onKeyDown?: (dataValue?: DataValueType) => void;
+}
+export {};
+//# sourceMappingURL=path.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"path.types.d.ts","sourceRoot":"","sources":["../../../../src/components/path/path.types.ts"],"names":[],"mappings":"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"}

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

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

package/dist/esm/components/plot/components/circle/circle.d.ts

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

package/dist/esm/components/plot/components/circle/circle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"circle.d.ts","sourceRoot":"","sources":["../../../../../../src/components/plot/components/circle/circle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiC,KAAK,YAAY,EAAc,MAAM,OAAO,CAAC;AAErF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAkBvD,eAAO,MAAM,MAAM,EAAkC,CACnD,KAAK,EAAE,cAAc,GAAG;IACtB,GAAG,CAAC,EAAE,YAAY,CAAC,UAAU,CAAC,CAAC;CAChC,KACE,GAAG,CAAC,OAAO,CAAC"}

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

@@ -0,0 +1,6 @@
+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);

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

@@ -0,0 +1,4 @@
+export * from './circle/circle';
+export * from './square/square';
+export * from './triangle/triangle';
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,3 @@
+export * from './circle/circle';
+export * from './square/square';
+export * from './triangle/triangle';

package/dist/esm/components/plot/components/square/square.d.ts

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

package/dist/esm/components/plot/components/square/square.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"square.d.ts","sourceRoot":"","sources":["../../../../../../src/components/plot/components/square/square.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiC,KAAK,YAAY,EAAc,MAAM,OAAO,CAAC;AAErF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAmBvD,eAAO,MAAM,MAAM,EAAkC,CACnD,KAAK,EAAE,cAAc,GAAG;IACtB,GAAG,CAAC,EAAE,YAAY,CAAC,UAAU,CAAC,CAAC;CAChC,KACE,GAAG,CAAC,OAAO,CAAC"}

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

@@ -0,0 +1,6 @@
+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);

package/dist/esm/components/plot/components/triangle/triangle.d.ts

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

package/dist/esm/components/plot/components/triangle/triangle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"triangle.d.ts","sourceRoot":"","sources":["../../../../../../src/components/plot/components/triangle/triangle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiC,KAAK,YAAY,EAAc,MAAM,OAAO,CAAC;AAErF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAsBvD,eAAO,MAAM,QAAQ,EAAoC,CACvD,KAAK,EAAE,cAAc,GAAG;IACtB,GAAG,CAAC,EAAE,YAAY,CAAC,UAAU,CAAC,CAAC;CAChC,KACE,GAAG,CAAC,OAAO,CAAC"}

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

@@ -0,0 +1,14 @@
+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);

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

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

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

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

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

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

package/dist/esm/components/plot/plot.css

@@ -0,0 +1,12 @@
+.plot {
+  outline: none;
+  /* Removes the browser's default outline */
+}
+
+/* Keep classes for compatibility with existing customizations via CSS */
+.plot-focus-outer,
+.plot-focus-inner {
+  /* Basic styles that are not overridden by properties */
+  pointer-events: none;
+  /* So they don't intercept events */
+}

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

@@ -0,0 +1,39 @@
+import { type ForwardedRef } from 'react';
+import './plot.css';
+import { type PlotProps } from './plot.types';
+/**
+ * `Plot` component which renders an interactive point in a chart with hover effects and accessibility features.
+ *
+ * @template T - The type of the value represented by this plot point's data. Defaults to string.
+ *
+ * @param props - `PlotProps` include:
+ *
+ * - `type`: Type of the plot point (circle, square, triangle). By default is `PlotType.Circle`.
+ * - `size`: Size of the plot point. Can be a predefined size from PlotSize enum or a direct pixel size.
+ * - `fill`: Fill color of the plot point.
+ * - `fillOpacity`: Fill color opacity. By default is 1.
+ * - `hasHoverEffect`: Whether the plot has a hover effect. By default is `true`.
+ * - `position`: Required. The position of the plot point on the plane.
+ * - `dataTestId`: Identifier for testing. By default is 'Plot'.
+ * - `stroke`: Stroke color of the plot point. By default is 'transparent'.
+ * - `strokeWidth`: Stroke width of the plot point. By default is 0.
+ * - `opacity`: Overall opacity of the plot point. By default is 1.
+ * - `label`: Accessible label for the plot point.
+ * - `tabIndex`: Tab index for keyboard navigation. By default is -1 to support programmatic focus management.
+ * - `id`: Unique identifier for the plot point.
+ * - `className`: Additional CSS classes for the plot point.
+ * - `hoverConfig`: Configuration for the hover effect.
+ * - `data`: Data associated with this plot point, with value of type T.
+ * - `onClick`: Function executed when clicking on the plot point.
+ * - `onKeyDown`: Function executed when pressing a key while the plot point has focus.
+ * - `onFocus`: Function executed when focusing the plot point.
+ * - `onBlur`: Function executed when removing focus from the plot point.
+ * - `onMouseEnter`: Function executed when hovering over the plot point.
+ * - `onMouseLeave`: Function executed when moving the mouse away from the plot point.
+ *
+ * @returns An SVG element representing the plot point with event handlers and accessibility features.
+ */
+export declare const Plot: <T = string>(props: PlotProps<T> & {
+    ref?: ForwardedRef<SVGElement>;
+}) => JSX.Element;
+//# sourceMappingURL=plot.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"plot.d.ts","sourceRoot":"","sources":["../../../../src/components/plot/plot.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAc,MAAM,OAAO,CAAC;AAYtD,OAAO,YAAY,CAAC;AACpB,OAAO,EAAiB,KAAK,SAAS,EAAsB,MAAM,cAAc,CAAC;AA+IjF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,eAAO,MAAM,IAAI,EAAgC,CAAC,CAAC,GAAG,MAAM,EAC1D,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG;IACpB,GAAG,CAAC,EAAE,YAAY,CAAC,UAAU,CAAC,CAAC;CAChC,KACE,GAAG,CAAC,OAAO,CAAC"}

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

@@ -0,0 +1,95 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useFocus } from '../../hooks/useFocus/useFocus';
+import { useHover } from '../../hooks/useHover/useHover';
+import { calculateFocusOutline, getFocusConfig, } from '../../utils/calculateFocusOutline/calculateFocusOutline';
+import { Circle } from './components/circle/circle';
+import { Square } from './components/square/square';
+import { Triangle } from './components/triangle/triangle';
+import './plot.css';
+import { PLOT_SIZE_MAP, PlotSize, PlotType } from './plot.types';
+// Map of components by type
+const Component = {
+    [PlotType.CIRCLE]: Circle,
+    [PlotType.SQUARE]: Square,
+    [PlotType.TRIANGLE]: Triangle,
+};
+const PlotComponent = ({ className, data, dataTestId = 'plot', fill, fillOpacity, focusConfig, hasHoverEffect, hoverConfig, id, label, onBlur, onClick, onFocus, onKeyDown, onMouseEnter, onMouseLeave, opacity, position = { x: 0, y: 0 }, size = PlotSize.MEDIUM, stroke, strokeWidth, tabIndex, type = PlotType.CIRCLE, ...props }, ref) => {
+    const { handleBlur, handleFocus, isFocused } = useFocus(onFocus, onBlur);
+    const { handleMouseEnter, handleMouseLeave, isHovered } = useHover(onMouseEnter, onMouseLeave);
+    // Extract properties from hoverConfig with default values
+    const { fill: hoverFill = fill, opacity: hoverOpacity = 0.3, scale: hoverScale = 1.3, stroke: hoverStroke = fill, strokeWidth: hoverStrokeWidth = 0, } = hoverConfig || {};
+    // Extract properties from focusConfig with default values
+    const resolvedFocusConfig = getFocusConfig(focusConfig);
+    // Calculate focus outline dimensions using the utility
+    const sizeInPixels = typeof size === 'number' ? size : PLOT_SIZE_MAP[size];
+    const focusOutline = calculateFocusOutline({
+        elementHeight: sizeInPixels,
+        elementPosition: position,
+        elementStrokeWidth: strokeWidth,
+        elementType: 'rectangle',
+        elementWidth: sizeInPixels,
+        gap: resolvedFocusConfig.gap,
+        innerStrokeWidth: resolvedFocusConfig.innerStrokeWidth,
+        outlineStrokeWidth: resolvedFocusConfig.outlineStrokeWidth,
+    });
+    // Properties for the main plot shape - no hover styles applied to the main component
+    const plotShapeProps = {
+        ...props,
+        ['aria-label']: label,
+        className: `plot ${className || ''}`,
+        dataTestId,
+        fill, // Maintains original fill color
+        fillOpacity, // Maintains original opacity
+        id,
+        onBlur: handleBlur,
+        onClick,
+        onFocus: handleFocus,
+        onKeyDown,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        opacity, // Maintains original overall opacity
+        position,
+        role: 'button',
+        size: sizeInPixels,
+        stroke, // Maintains original stroke color
+        strokeWidth: hasHoverEffect && isHovered && !isFocused ? 0 : strokeWidth,
+        tabIndex,
+    };
+    // Get the correct component based on type
+    const PlotShape = Component[type];
+    return (_jsxs(_Fragment, { children: [hasHoverEffect && isHovered && !isFocused && (_jsx(PlotShape, { dataTestId: `${dataTestId}-hover`, fill: hoverFill, opacity: hoverOpacity, position: position, size: sizeInPixels * hoverScale, stroke: hoverStroke, strokeWidth: hoverStrokeWidth })), isFocused && focusOutline.type === 'rectangle' && (_jsxs("g", { children: [_jsx("rect", { className: "plot-focus-outer", "data-testid": `${dataTestId}-focus-outer`, fill: "none", height: focusOutline.outer.height, stroke: resolvedFocusConfig.outlineColor, strokeWidth: resolvedFocusConfig.outlineStrokeWidth, width: focusOutline.outer.width, x: focusOutline.outer.x, y: focusOutline.outer.y }), _jsx("rect", { className: "plot-focus-inner", "data-testid": `${dataTestId}-focus-inner`, fill: "none", height: focusOutline.inner.height, stroke: resolvedFocusConfig.innerColor, strokeWidth: resolvedFocusConfig.innerStrokeWidth, width: focusOutline.inner.width, x: focusOutline.inner.x, y: focusOutline.inner.y })] })), _jsx(PlotShape, { ref: ref, ...plotShapeProps })] }));
+};
+/**
+ * `Plot` component which renders an interactive point in a chart with hover effects and accessibility features.
+ *
+ * @template T - The type of the value represented by this plot point's data. Defaults to string.
+ *
+ * @param props - `PlotProps` include:
+ *
+ * - `type`: Type of the plot point (circle, square, triangle). By default is `PlotType.Circle`.
+ * - `size`: Size of the plot point. Can be a predefined size from PlotSize enum or a direct pixel size.
+ * - `fill`: Fill color of the plot point.
+ * - `fillOpacity`: Fill color opacity. By default is 1.
+ * - `hasHoverEffect`: Whether the plot has a hover effect. By default is `true`.
+ * - `position`: Required. The position of the plot point on the plane.
+ * - `dataTestId`: Identifier for testing. By default is 'Plot'.
+ * - `stroke`: Stroke color of the plot point. By default is 'transparent'.
+ * - `strokeWidth`: Stroke width of the plot point. By default is 0.
+ * - `opacity`: Overall opacity of the plot point. By default is 1.
+ * - `label`: Accessible label for the plot point.
+ * - `tabIndex`: Tab index for keyboard navigation. By default is -1 to support programmatic focus management.
+ * - `id`: Unique identifier for the plot point.
+ * - `className`: Additional CSS classes for the plot point.
+ * - `hoverConfig`: Configuration for the hover effect.
+ * - `data`: Data associated with this plot point, with value of type T.
+ * - `onClick`: Function executed when clicking on the plot point.
+ * - `onKeyDown`: Function executed when pressing a key while the plot point has focus.
+ * - `onFocus`: Function executed when focusing the plot point.
+ * - `onBlur`: Function executed when removing focus from the plot point.
+ * - `onMouseEnter`: Function executed when hovering over the plot point.
+ * - `onMouseLeave`: Function executed when moving the mouse away from the plot point.
+ *
+ * @returns An SVG element representing the plot point with event handlers and accessibility features.
+ */
+export const Plot = forwardRef(PlotComponent);

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

@@ -0,0 +1,177 @@
+import type { FocusConfig } from '../../types/focusConfig.type';
+/**
+ * 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 declare const PlotType: {
+    /** Represents a circle plot point */
+    readonly CIRCLE: "CIRCLE";
+    /** Represents a square plot point */
+    readonly SQUARE: "SQUARE";
+    /** Represents a triangle plot point */
+    readonly 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 declare const PlotSize: {
+    /** Extra large plot point (40x40 pixels) */
+    readonly EXTRA_LARGE: "EXTRA_LARGE";
+    /** Extra small plot point (8x8 pixels) */
+    readonly EXTRA_SMALL: "EXTRA_SMALL";
+    /** Large plot point (32x32 pixels) */
+    readonly LARGE: "LARGE";
+    /** Medium plot point (24x24 pixels) */
+    readonly MEDIUM: "MEDIUM";
+    /** Small plot point (16x16 pixels) */
+    readonly 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 declare const PLOT_SIZE_MAP: Record<(typeof PlotSize)[keyof typeof PlotSize], number>;
+/**
+ * Data associated with a plot point.
+ *
+ * @interface
+ * @template T - The type of the value represented by this plot point. Defaults to string.
+ */
+export interface PlotData<T = string> {
+    /** Index of the data point in its dataset */
+    index?: number;
+    /** Value represented by this plot point */
+    value?: T;
+    /** Category or series this plot point belongs to */
+    category?: string;
+    /** Precise coordinate values (may differ from SVG position) */
+    coordinate?: {
+        x: number;
+        y: number;
+    };
+}
+/**
+ * Properties for a plot component.
+ *
+ * This interface outlines the properties that can be set on a plot component within a chart.
+ * It supports customization of the plot's appearance such as fill color, size, and position,
+ * as well as accessibility features and event handlers for interactivity.
+ *
+ * @interface
+ * @template T - The type of the value represented by this plot point's data. Defaults to string.
+ */
+export interface PlotProps<T = string> {
+    /** Type of the plot point (circle, square, triangle). Defaults to PlotType.CIRCLE. */
+    type?: (typeof PlotType)[keyof typeof PlotType];
+    /**
+     * Size of the plot point.
+     * Can be a predefined size from PlotSize enum or a direct numeric value in pixels.
+     * Defaults to PlotSize.MEDIUM.
+     */
+    size?: (typeof PlotSize)[keyof typeof PlotSize] | number;
+    /** Fill color of the plot point. */
+    fill?: string;
+    /** Fill color opacity. Defaults to 1. */
+    fillOpacity?: number;
+    /** Whether the plot has a hover effect. */
+    hasHoverEffect?: boolean;
+    /** Position of the plot point on the plane. Required. */
+    position: {
+        x: number;
+        y: number;
+    };
+    /** Identifier for testing. Defaults to 'Plot'. */
+    dataTestId?: string;
+    /** Stroke color of the plot point. Defaults to 'transparent'. */
+    stroke?: string;
+    /** Stroke width of the plot point. Defaults to 0. */
+    strokeWidth?: number;
+    /** Overall opacity of the plot point. Defaults to 1. */
+    opacity?: number;
+    /** Accessible label for the plot point. */
+    label?: string;
+    /** Tab index for keyboard navigation. */
+    tabIndex?: number;
+    /** Unique identifier for the plot point. */
+    id?: string;
+    /** Additional CSS classes for the plot point. */
+    className?: string;
+    /**
+     * Configuration for the hover effect.
+     *
+     * - `fill` - Fill color when hovered. Defaults to the plot's original fill color.
+     * - `stroke` - Stroke color when hovered. Defaults to the plot's original fill color.
+     * - `strokeWidth` - Stroke width when hovered. Defaults to 0.
+     * - `opacity` - Overall opacity when hovered. Defaults to 0.3.
+     * - `scale` - Scale factor for the hover effect. Defaults to 1.3 (30% larger).
+     */
+    hoverConfig?: {
+        fill?: string;
+        stroke?: string;
+        strokeWidth?: number;
+        opacity?: number;
+        scale?: number;
+    };
+    /**
+     * Configuration for the focus effect.
+     */
+    focusConfig?: FocusConfig;
+    /** Data associated with this plot point. */
+    data?: PlotData<T>;
+    /**
+     * Function executed when clicking on the plot point.
+     * Uses the standard React mouse event handler signature.
+     */
+    onClick?: React.MouseEventHandler<SVGElement>;
+    /**
+     * Function executed when pressing a key while the plot point has focus.
+     * Uses the standard React keyboard event handler signature.
+     */
+    onKeyDown?: React.KeyboardEventHandler<SVGElement>;
+    /**
+     * Function executed when focusing the plot point.
+     * Uses the standard React focus event handler signature.
+     */
+    onFocus?: React.FocusEventHandler<SVGElement>;
+    /**
+     * Function executed when removing focus from the plot point.
+     * Uses the standard React focus event handler signature.
+     */
+    onBlur?: React.FocusEventHandler<SVGElement>;
+    /**
+     * Function executed when hovering over the plot point.
+     * Uses the standard React mouse event handler signature.
+     */
+    onMouseEnter?: React.MouseEventHandler<SVGElement>;
+    /**
+     * Function executed when moving the mouse away from the plot point.
+     * Uses the standard React mouse event handler signature.
+     */
+    onMouseLeave?: React.MouseEventHandler<SVGElement>;
+}
+/**
+ * Properties for internal plot shape components.
+ * This interface extends PlotProps but overrides the 'size' property to use a numeric value
+ * rather than the PlotSize enum.
+ *
+ * @interface
+ * @template T - The type of the value represented by this plot point's data. Defaults to string.
+ */
+export interface PlotShapeProps<T = string> extends Omit<PlotProps<T>, 'size'> {
+    /** The size of the plot shape in pixels */
+    size: number;
+}
+//# sourceMappingURL=plot.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"plot.types.d.ts","sourceRoot":"","sources":["../../../../src/components/plot/plot.types.ts"],"names":[],"mappings":"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"}