@kubit-ui-web/react-charts 1.5.1 → 1.6.0

package/dist/esm/components/focusRing/utils/composeRefs.js

@@ -0,0 +1,16 @@
+/**
+ * Composes multiple refs into a single ref callback
+ * Allows using both internal and external refs simultaneously
+ */
+export function composeRefs(...refs) {
+    return (instance) => {
+        refs.forEach(ref => {
+            if (typeof ref === 'function') {
+                ref(instance);
+            }
+            else if (ref) {
+                ref.current = instance;
+            }
+        });
+    };
+}

package/dist/esm/components/focusRing/utils/createAdaptiveFocusRings.d.ts

@@ -0,0 +1,24 @@
+import type { FocusConfig } from '../../../types/focusConfig.type';
+import type { FocusRingLayers } from './utils.types';
+/**
+ * SVG geometric attributes that define shape position and dimensions.
+ * These attributes are extracted from the original element to create focus rings.
+ * Also used by MutationObserver to detect when focus rings need to be regenerated.
+ */
+export declare const SVG_GEOMETRIC_ATTRIBUTES: string[];
+/**
+ * Creates adaptive focus ring layers from a DOM SVGElement.
+ *
+ * This function reads properties directly from the DOM element and creates
+ * props objects for rendering new SVG elements with scaled stroke-width for the focus rings.
+ * The focus rings adapt to the exact shape of the element (circle → circle, path → path, etc.)
+ *
+ * This unified approach works for both targetRef and children modes by
+ * reading from the mounted DOM element.
+ *
+ * @param element - The SVG graphics element to create focus rings for
+ * @param focusConfig - Focus ring configuration (colors, widths, gap)
+ * @returns Focus ring layers (outer and inner props) or null if not supported
+ */
+export declare function createAdaptiveFocusRings(element: SVGGraphicsElement, focusConfig: Required<FocusConfig>): FocusRingLayers | undefined;
+//# sourceMappingURL=createAdaptiveFocusRings.d.ts.map

package/dist/esm/components/focusRing/utils/createAdaptiveFocusRings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createAdaptiveFocusRings.d.ts","sourceRoot":"","sources":["../../../../../src/components/focusRing/utils/createAdaptiveFocusRings.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAE5D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAErD;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,UAsBpC,CAAC;AAqBF;;;;;;;;;;;;;GAaG;AACH,wBAAgB,wBAAwB,CACtC,OAAO,EAAE,kBAAkB,EAC3B,WAAW,EAAE,QAAQ,CAAC,WAAW,CAAC,GACjC,eAAe,GAAG,SAAS,CAkE7B"}

package/dist/esm/components/focusRing/utils/createAdaptiveFocusRings.js

@@ -0,0 +1,141 @@
+/**
+ * SVG geometric attributes that define shape position and dimensions.
+ * These attributes are extracted from the original element to create focus rings.
+ * Also used by MutationObserver to detect when focus rings need to be regenerated.
+ */
+export const SVG_GEOMETRIC_ATTRIBUTES = [
+    // Circle attributes
+    'cx',
+    'cy',
+    'r',
+    // Rectangle and general positioning attributes
+    'x',
+    'y',
+    'width',
+    'height',
+    // Ellipse attributes (cx, cy already included)
+    'rx',
+    'ry',
+    // Path attributes
+    'd',
+    // Polygon and polyline attributes
+    'points',
+    // Line attributes
+    'x1',
+    'y1',
+    'x2',
+    'y2',
+];
+/**
+ * SVG presentation attributes that affect stroke appearance.
+ * These are preserved for focus rings when they match the original element's style.
+ */
+const SVG_STROKE_ATTRIBUTES = [
+    'stroke-dasharray',
+    'stroke-dashoffset',
+    'stroke-linecap',
+    'stroke-linejoin',
+    'stroke-miterlimit',
+    'stroke-opacity',
+];
+/**
+ * SVG element types that support adaptive focus rings.
+ * These are geometric shapes that can be properly outlined with focus rings.
+ */
+const SUPPORTED_SVG_TYPES = ['circle', 'rect', 'ellipse', 'path', 'polygon', 'polyline', 'line'];
+/**
+ * Creates adaptive focus ring layers from a DOM SVGElement.
+ *
+ * This function reads properties directly from the DOM element and creates
+ * props objects for rendering new SVG elements with scaled stroke-width for the focus rings.
+ * The focus rings adapt to the exact shape of the element (circle → circle, path → path, etc.)
+ *
+ * This unified approach works for both targetRef and children modes by
+ * reading from the mounted DOM element.
+ *
+ * @param element - The SVG graphics element to create focus rings for
+ * @param focusConfig - Focus ring configuration (colors, widths, gap)
+ * @returns Focus ring layers (outer and inner props) or null if not supported
+ */
+export function createAdaptiveFocusRings(element, focusConfig) {
+    const elementType = element.tagName.toLowerCase();
+    // Validate that we have a valid SVG element
+    if (!SUPPORTED_SVG_TYPES.includes(elementType)) {
+        return undefined;
+    }
+    // Read original stroke width from DOM
+    const strokeWidthAttr = element.getAttribute('stroke-width') || element.getAttribute('strokeWidth');
+    const originalStrokeWidth = parseFloat(strokeWidthAttr || '0');
+    // Read fill attribute to detect open lines
+    const fillAttr = element.getAttribute('fill');
+    const isOpenLine = elementType === 'line' ||
+        elementType === 'polyline' ||
+        (elementType === 'path' && fillAttr === 'none');
+    // Calculate stroke widths for focus rings
+    // IMPORTANT: For ALL shapes, we need to account for the original stroke width
+    // so that focus rings appear OUTSIDE the element's stroke, not covered by it
+    const outerStrokeWidth = originalStrokeWidth + (focusConfig.outlineStrokeWidth + focusConfig.innerStrokeWidth) * 2;
+    const innerStrokeWidth = originalStrokeWidth + focusConfig.innerStrokeWidth * 2;
+    // Read stroke line props for open lines
+    const strokeLinecap = isOpenLine ? element.getAttribute('stroke-linecap') || 'round' : undefined;
+    const strokeLinejoin = isOpenLine ? element.getAttribute('stroke-linejoin') || 'round' : 'miter';
+    const strokeMiterlimit = isOpenLine ? undefined : '10';
+    // Extract relevant attributes from the DOM element
+    // This automatically preserves all geometric attributes (cx, cy, r, x, y, width, height, d, points, etc.)
+    const allAttributes = extractRelevantAttributes(element);
+    // The renderer will create the React elements and add data-testid
+    return {
+        innerRing: {
+            props: {
+                ...allAttributes,
+                className: 'focus-ring-inner',
+                fill: 'none',
+                stroke: focusConfig.innerColor,
+                strokeLinecap,
+                strokeLinejoin,
+                strokeMiterlimit,
+                strokeWidth: innerStrokeWidth,
+            },
+            type: elementType,
+        },
+        outerRing: {
+            props: {
+                ...allAttributes,
+                className: 'focus-ring-outer',
+                fill: 'none',
+                stroke: focusConfig.outlineColor,
+                strokeLinecap,
+                strokeLinejoin,
+                strokeMiterlimit,
+                strokeWidth: outerStrokeWidth,
+            },
+            type: elementType,
+        },
+    };
+}
+/**
+ * Extracts relevant SVG attributes from a DOM SVGElement for focus ring creation.
+ * Uses an allowlist approach: only geometric and stroke attributes are included.
+ * This ensures focus rings inherit the correct shape and appearance while avoiding
+ * React-incompatible attributes or those that would cause DOM conflicts.
+ *
+ * @param element - The SVG element to extract attributes from
+ * @returns Object containing only the allowed attributes
+ */
+function extractRelevantAttributes(element) {
+    const attrs = {};
+    // Create a Set of allowed attributes for fast lookup
+    const allowedAttributes = new Set([
+        ...SVG_GEOMETRIC_ATTRIBUTES,
+        ...SVG_STROKE_ATTRIBUTES,
+    ]);
+    // Iterate through all attributes of the element
+    for (let i = 0; i < element.attributes.length; i++) {
+        const attr = element.attributes[i];
+        // Only include attributes that are in the allowlist
+        if (allowedAttributes.has(attr.name)) {
+            attrs[attr.name] = attr.value;
+        }
+    }
+    return attrs;
+}

package/dist/esm/components/focusRing/utils/createBoundingBoxFocusRings.d.ts

@@ -0,0 +1,33 @@
+import type { FocusConfig } from '../../../types/focusConfig.type';
+import type { ElementBounds, FocusRingLayers, RectangleFocusOutline } from './utils.types';
+/**
+ * Calculates the dimensions of the focus outlines (outer and inner) for a bounding-box.
+ * This function is used internally by createBoundingBoxFocusRings and always produces
+ * rectangular focus rings.
+ *
+ * @param bounds - Element bounds information from DOM detection
+ * @param config - Focus stroke configuration (widths and gap)
+ * @returns Rectangle dimensions for outer and inner focus rings
+ */
+export declare const calculateBoundingBoxFocusRings: (bounds: ElementBounds, config: {
+    outlineStrokeWidth: number;
+    innerStrokeWidth: number;
+    gap: number;
+}) => RectangleFocusOutline;
+/**
+ * Creates bounding-box focus ring layers with calculated dimensions.
+ *
+ * This function:
+ * 1. Detects element bounds from DOM using getBBox()
+ * 2. Calculates geometric dimensions using calculateBoundingBoxFocusRings
+ * 3. Wraps the result in the same FocusRingLayers structure as createAdaptiveFocusRings
+ * 4. Includes all rendering props (colors, strokes, etc.)
+ *
+ * This provides a unified API for both adaptive and bounding-box strategies.
+ *
+ * @param element - The SVG graphics element to create focus rings for
+ * @param focusConfig - Focus ring configuration (colors, widths, gap)
+ * @returns Focus ring layers in the same format as createAdaptiveFocusRings, or null if detection fails
+ */
+export declare function createBoundingBoxFocusRings(element: SVGGraphicsElement, focusConfig: Required<FocusConfig>): FocusRingLayers | undefined;
+//# sourceMappingURL=createBoundingBoxFocusRings.d.ts.map

package/dist/esm/components/focusRing/utils/createBoundingBoxFocusRings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createBoundingBoxFocusRings.d.ts","sourceRoot":"","sources":["../../../../../src/components/focusRing/utils/createBoundingBoxFocusRings.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAE5D,OAAO,KAAK,EAAE,aAAa,EAAE,eAAe,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAE3F;;;;;;;;GAQG;AACH,eAAO,MAAM,8BAA8B,GACzC,QAAQ,aAAa,EACrB,QAAQ;IACN,kBAAkB,EAAE,MAAM,CAAC;IAC3B,gBAAgB,EAAE,MAAM,CAAC;IACzB,GAAG,EAAE,MAAM,CAAC;CACb,KACA,qBAkCF,CAAC;AAiCF;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,2BAA2B,CACzC,OAAO,EAAE,kBAAkB,EAC3B,WAAW,EAAE,QAAQ,CAAC,WAAW,CAAC,GACjC,eAAe,GAAG,SAAS,CA0C7B"}

package/dist/esm/components/focusRing/utils/createBoundingBoxFocusRings.js

@@ -0,0 +1,126 @@
+/**
+ * Calculates the dimensions of the focus outlines (outer and inner) for a bounding-box.
+ * This function is used internally by createBoundingBoxFocusRings and always produces
+ * rectangular focus rings.
+ *
+ * @param bounds - Element bounds information from DOM detection
+ * @param config - Focus stroke configuration (widths and gap)
+ * @returns Rectangle dimensions for outer and inner focus rings
+ */
+export const calculateBoundingBoxFocusRings = (bounds, config) => {
+    const { elementHeight, elementPosition, elementStrokeWidth, elementWidth } = bounds;
+    const { gap, innerStrokeWidth, outlineStrokeWidth } = config;
+    // Calculate inner rectangle dimensions
+    // Height and width must grow on both sides to ensure the inner rectangle
+    // is positioned correctly without gaps
+    const innerWidth = elementWidth + elementStrokeWidth + innerStrokeWidth + gap * 2;
+    const innerHeight = elementHeight + elementStrokeWidth + innerStrokeWidth + gap * 2;
+    const innerX = elementPosition.x - innerWidth / 2;
+    const innerY = elementPosition.y - innerHeight / 2;
+    // Calculate outer rectangle dimensions
+    // Must account for the fact that both inner and outer strokes extend outward from their borders
+    // Inner stroke extends innerStrokeWidth/2 on each side, outer stroke extends outlineStrokeWidth/2 on each side
+    const outerWidth = innerWidth + innerStrokeWidth + outlineStrokeWidth;
+    const outerHeight = innerHeight + innerStrokeWidth + outlineStrokeWidth;
+    const outerX = elementPosition.x - outerWidth / 2;
+    const outerY = elementPosition.y - outerHeight / 2;
+    return {
+        inner: {
+            height: innerHeight,
+            width: innerWidth,
+            x: innerX,
+            y: innerY,
+        },
+        outer: {
+            height: outerHeight,
+            width: outerWidth,
+            x: outerX,
+            y: outerY,
+        },
+    };
+};
+/**
+ * Helper function to detect element bounds from the DOM.
+ * Uses getBBox() for accurate measurements including transforms.
+ *
+ * @param element - SVG element to detect
+ * @returns Element bounds information or null if detection fails
+ */
+function detectElementBoundsFromDOM(element) {
+    try {
+        const bbox = element.getBBox();
+        if (bbox.width <= 0 || bbox.height <= 0) {
+            return null;
+        }
+        const computedStyle = window.getComputedStyle(element);
+        const strokeWidth = parseFloat(computedStyle.strokeWidth || '0');
+        return {
+            elementHeight: bbox.height,
+            elementPosition: {
+                x: bbox.x + bbox.width / 2,
+                y: bbox.y + bbox.height / 2,
+            },
+            elementStrokeWidth: strokeWidth,
+            elementWidth: bbox.width,
+        };
+    }
+    catch {
+        return null;
+    }
+}
+/**
+ * Creates bounding-box focus ring layers with calculated dimensions.
+ *
+ * This function:
+ * 1. Detects element bounds from DOM using getBBox()
+ * 2. Calculates geometric dimensions using calculateBoundingBoxFocusRings
+ * 3. Wraps the result in the same FocusRingLayers structure as createAdaptiveFocusRings
+ * 4. Includes all rendering props (colors, strokes, etc.)
+ *
+ * This provides a unified API for both adaptive and bounding-box strategies.
+ *
+ * @param element - The SVG graphics element to create focus rings for
+ * @param focusConfig - Focus ring configuration (colors, widths, gap)
+ * @returns Focus ring layers in the same format as createAdaptiveFocusRings, or null if detection fails
+ */
+export function createBoundingBoxFocusRings(element, focusConfig) {
+    // Detect element bounds from DOM
+    const bounds = detectElementBoundsFromDOM(element);
+    if (!bounds) {
+        return undefined;
+    }
+    const dimensions = calculateBoundingBoxFocusRings(bounds, {
+        gap: focusConfig.gap,
+        innerStrokeWidth: focusConfig.innerStrokeWidth,
+        outlineStrokeWidth: focusConfig.outlineStrokeWidth,
+    });
+    // The renderer will create the React elements and add data-testid
+    return {
+        innerRing: {
+            props: {
+                className: 'focus-ring-inner',
+                fill: 'none',
+                height: dimensions.inner.height,
+                stroke: focusConfig.innerColor,
+                strokeWidth: focusConfig.innerStrokeWidth,
+                width: dimensions.inner.width,
+                x: dimensions.inner.x,
+                y: dimensions.inner.y,
+            },
+            type: 'rect',
+        },
+        outerRing: {
+            props: {
+                className: 'focus-ring-outer',
+                fill: 'none',
+                height: dimensions.outer.height,
+                stroke: focusConfig.outlineColor,
+                strokeWidth: focusConfig.outlineStrokeWidth,
+                width: dimensions.outer.width,
+                x: dimensions.outer.x,
+                y: dimensions.outer.y,
+            },
+            type: 'rect',
+        },
+    };
+}

package/dist/esm/components/focusRing/utils/utils.types.d.ts

@@ -0,0 +1,52 @@
+/**
+ * Props for rendering a focus ring element
+ */
+export interface FocusRingElementProps {
+    /** SVG element type (e.g., 'circle', 'rect', 'path') */
+    type: string;
+    /** Props to pass to React.createElement */
+    props: Record<string, unknown>;
+}
+/**
+ * Result of creating focus ring layers
+ */
+export interface FocusRingLayers {
+    /** Outer focus ring element props (blue) */
+    outerRing: FocusRingElementProps;
+    /** Inner focus ring element props (white) */
+    innerRing: FocusRingElementProps;
+}
+/**
+ * Element bounds information from DOM detection
+ */
+export interface ElementBounds {
+    /** Element width in pixels */
+    elementWidth: number;
+    /** Element height in pixels */
+    elementHeight: number;
+    /** Position of the element center */
+    elementPosition: {
+        x: number;
+        y: number;
+    };
+    /** Stroke width of the element */
+    elementStrokeWidth: number;
+}
+/**
+ * Dimensions for rectangle focus outlines
+ */
+export interface RectangleFocusOutline {
+    outer: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    inner: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+}
+//# sourceMappingURL=utils.types.d.ts.map

package/dist/esm/components/focusRing/utils/utils.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/focusRing/utils/utils.types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,wDAAwD;IACxD,IAAI,EAAE,MAAM,CAAC;IACb,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAChC;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,4CAA4C;IAC5C,SAAS,EAAE,qBAAqB,CAAC;IACjC,6CAA6C;IAC7C,SAAS,EAAE,qBAAqB,CAAC;CAClC;AAED;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,8BAA8B;IAC9B,YAAY,EAAE,MAAM,CAAC;IACrB,+BAA+B;IAC/B,aAAa,EAAE,MAAM,CAAC;IACtB,qCAAqC;IACrC,eAAe,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1C,kCAAkC;IAClC,kBAAkB,EAAE,MAAM,CAAC;CAC5B;AAED;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE;QACL,CAAC,EAAE,MAAM,CAAC;QACV,CAAC,EAAE,MAAM,CAAC;QACV,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,KAAK,EAAE;QACL,CAAC,EAAE,MAAM,CAAC;QACV,CAAC,EAAE,MAAM,CAAC;QACV,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;CACH"}

package/dist/esm/components/focusRing/utils/utils.types.js

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

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

@@ -1,6 +1,7 @@
 export * from './axisChart';
 export * from './bar';
 export * from './chartText';
+export * from './focusRing';
 export * from './foreignObject';
 export * from './line';
 export * from './node';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,OAAO,CAAC;AACtB,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,OAAO,CAAC;AACtB,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC"}

package/dist/esm/components/index.js

@@ -1,6 +1,7 @@
 export * from './axisChart';
 export * from './bar';
 export * from './chartText';
+export * from './focusRing';
 export * from './foreignObject';
 export * from './line';
 export * from './node';

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

@@ -1 +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"}
+{"version":3,"file":"plot.d.ts","sourceRoot":"","sources":["../../../../src/components/plot/plot.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAc,MAAM,OAAO,CAAC;AAStD,OAAO,YAAY,CAAC;AACpB,OAAO,EAAiB,KAAK,SAAS,EAAsB,MAAM,cAAc,CAAC;AA2GjF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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

@@ -1,8 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
+import { FocusRing } from '../../components/focusRing/focusRing';
 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';
@@ -15,25 +15,13 @@ const Component = {
     [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);
+    const { handleBlur, handleFocus, isFocused } = useFocus(onFocus, onBlur);
     // 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
+    // Calculate size in pixels
     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
+    // Properties for the main plot shape - focus handlers managed by FocusRing
     const plotShapeProps = {
         ...props,
         ['aria-label']: label,
@@ -53,12 +41,12 @@ const PlotComponent = ({ className, data, dataTestId = 'plot', fill, fillOpacity
         role: 'button',
         size: sizeInPixels,
         stroke, // Maintains original stroke color
-        strokeWidth: hasHoverEffect && isHovered && !isFocused ? 0 : strokeWidth,
+        strokeWidth: hasHoverEffect && isHovered ? 0 : strokeWidth, // Removed isFocused dependency
         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 })] }));
+    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 })), _jsx(FocusRing, { dataTestId: dataTestId, focusConfig: { ...focusConfig, variant: focusConfig?.variant ?? 'bounding-box' }, isFocused: isFocused, children: _jsx(PlotShape, { ref: ref, ...plotShapeProps }) })] }));
 };
 /**
  * `Plot` component which renders an interactive point in a chart with hover effects and accessibility features.

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

@@ -1,5 +1,4 @@
-import type { FC, KeyboardEvent, MouseEvent, TouchEvent } from 'react';
-import type { FocusConfig } from '../../../types/focusConfig.type';
+import { type KeyboardEvent, type MouseEvent, type TouchEvent } from 'react';
 import type { ZoomAreaSelectionConfig, ZoomRange } from '../zoomArea.type';
 /**
 
@@ -31,27 +30,8 @@ interface SelectionAreaProps {
     onBlur: () => void;
 }
 /**
- * Props for the SelectionAreaFocusRing component
+ * Selection area overlay - the interactive rectangle that users can drag and focus
  */
-interface SelectionAreaFocusRingProps {
-    /** Start X position */
-    startX: number;
-    /** End X position */
-    endX: number;
-    /** Chart height */
-    height: number;
-    /** Whether the selection area is focused */
-    isFocused: boolean;
-    /** Custom focus configuration (already resolved) */
-    focusConfig: Required<FocusConfig>;
-}
-/**
- * Focus ring for the selection area - rendered separately to control z-order
- */
-export declare const SelectionAreaFocusRing: FC<SelectionAreaFocusRingProps>;
-/**
- * Selection area overlay
- */
-export declare const SelectionArea: FC<SelectionAreaProps>;
+export declare const SelectionArea: import("react").ForwardRefExoticComponent<SelectionAreaProps & import("react").RefAttributes<SVGRectElement>>;
 export {};
 //# sourceMappingURL=SelectionArea.d.ts.map

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

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

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

@@ -1,48 +1,16 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { calculateFocusOutline } from '../../../utils/calculateFocusOutline/calculateFocusOutline';
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import { isFullRange } from '../utils/rangeAndPositions';
 /**
- * Focus ring for the selection area - rendered separately to control z-order
+ * Selection area overlay - the interactive rectangle that users can drag and focus
  */
-export const SelectionAreaFocusRing = ({ endX, focusConfig, height, isFocused, startX, }) => {
-    if (!isFocused) {
-        return null;
-    }
-    // Calculate selection area dimensions
-    const selectionWidth = endX - startX;
-    const selectionHeight = height;
-    const centerX = startX + selectionWidth / 2;
-    const centerY = height / 2;
-    // Calculate focus ring dimensions using the new util
-    const focusOutline = calculateFocusOutline({
-        elementHeight: selectionHeight,
-        elementPosition: { x: centerX, y: centerY },
-        elementStrokeWidth: 0, // Selection area typically has no border
-        elementType: 'rectangle',
-        elementWidth: selectionWidth,
-        gap: focusConfig.gap,
-        innerStrokeWidth: focusConfig.innerStrokeWidth,
-        outlineStrokeWidth: focusConfig.outlineStrokeWidth,
-    });
-    // Use resolved configuration values directly
-    const outlineColor = focusConfig.outlineColor;
-    const innerColor = focusConfig.innerColor;
-    const outlineStrokeWidth = focusConfig.outlineStrokeWidth;
-    const innerStrokeWidth = focusConfig.innerStrokeWidth;
-    if (focusOutline.type !== 'rectangle') {
-        return null;
-    }
-    return (_jsxs("g", { pointerEvents: "none", children: [_jsx("rect", { fill: "none", height: focusOutline.outer.height, stroke: outlineColor, strokeWidth: outlineStrokeWidth, width: focusOutline.outer.width, x: focusOutline.outer.x, y: focusOutline.outer.y }), _jsx("rect", { fill: "none", height: focusOutline.inner.height, stroke: innerColor, strokeWidth: innerStrokeWidth, width: focusOutline.inner.width, x: focusOutline.inner.x, y: focusOutline.inner.y })] }));
-};
-/**
- * Selection area overlay
- */
-export const SelectionArea = ({ currentRange, dataLength, dataTestId, endX, height, onBlur, onFocus, onKeyDown, onMouseDown, onTouchStart, screenReaderText, selectionConfig, startX, }) => {
+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", { "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: {
+    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';

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

@@ -17,12 +17,12 @@ interface ZoomHandlerProps {
     min: number;
     /** Maximum allowed value */
     max: number;
-    /** Whether this handler is focused */
+    /** Whether the handler is focused (controlled mode) */
     isFocused: boolean;
     /** Custom handler configuration */
     handlerConfig?: ZoomAreaHandlerConfig;
-    /** Custom focus configuration (already resolved) */
-    focusConfig: Required<FocusConfig>;
+    /** Focus ring configuration */
+    focusConfig?: FocusConfig;
     /** Text announced by screen readers */
     screenReaderText?: string;
     /** Data test ID */

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

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