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

package/dist/cjs/components/focusRing/components/FocusRingInline.d.ts

@@ -0,0 +1,25 @@
+import { type ReactElement } from 'react';
+import type { FocusConfig } from '../../../types/focusConfig.type';
+export interface FocusRingInlineProps {
+    children: ReactElement;
+    isFocused: boolean;
+    disabled?: boolean;
+    dataTestId?: string;
+    focusConfig?: FocusConfig;
+}
+/**
+ * FocusRing component for inline mode (children).
+ * Wraps the element and renders focus ring inline with automatic z-order.
+ *
+ * This component:
+ * - Clones the children element and attaches a ref to it
+ * - Detects element bounds on mount and when focus state changes
+ * - Renders the focus ring BEFORE the element (proper z-order)
+ * - Handles both adaptive and bounding-box variants
+ * - Preserves any existing ref the children might have
+ *
+ * @param props - FocusRingInlineProps
+ * @returns JSX element with focus ring + wrapped children
+ */
+export declare const FocusRingInline: React.FC<FocusRingInlineProps>;
+//# sourceMappingURL=FocusRingInline.d.ts.map

package/dist/cjs/components/focusRing/components/FocusRingInline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FocusRingInline.d.ts","sourceRoot":"","sources":["../../../../../src/components/focusRing/components/FocusRingInline.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAwB,MAAM,OAAO,CAAC;AAEhE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAM5D,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,YAAY,CAAC;IACvB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAED;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAoC1D,CAAC"}

package/dist/cjs/components/focusRing/components/FocusRingInline.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cloneElement, useRef } from 'react';
+import { useFocusRingData } from '../hooks/useFocusRingData';
+import { composeRefs } from '../utils/composeRefs';
+import { FocusRingRenderer } from './FocusRingRenderer';
+/**
+ * FocusRing component for inline mode (children).
+ * Wraps the element and renders focus ring inline with automatic z-order.
+ *
+ * This component:
+ * - Clones the children element and attaches a ref to it
+ * - Detects element bounds on mount and when focus state changes
+ * - Renders the focus ring BEFORE the element (proper z-order)
+ * - Handles both adaptive and bounding-box variants
+ * - Preserves any existing ref the children might have
+ *
+ * @param props - FocusRingInlineProps
+ * @returns JSX element with focus ring + wrapped children
+ */
+export const FocusRingInline = ({ children, dataTestId = 'focus-ring', disabled = false, focusConfig, isFocused, }) => {
+    // Create ref for the SVG graphics element
+    const childrenRef = useRef(null);
+    const { layers } = useFocusRingData({
+        elementRef: childrenRef,
+        focusConfig,
+        isFocused,
+    });
+    // Extract the ref from children safely
+    // Children might have a ref attached, we need to preserve it while adding our own
+    const childrenWithRef = children;
+    const combinedRef = composeRefs(childrenRef, childrenWithRef.ref);
+    // Clone children and add ref (but NOT event handlers - parent manages those)
+    const wrappedChildren = cloneElement(children, {
+        ref: combinedRef,
+    });
+    return (_jsxs(_Fragment, { children: [isFocused && !disabled && (_jsx(FocusRingRenderer, { dataTestId: dataTestId, layers: layers ?? undefined })), wrappedChildren] }));
+};

package/dist/cjs/components/focusRing/components/FocusRingRenderer.d.ts

@@ -0,0 +1,13 @@
+import type { FocusRingRendererProps } from '../focusRing.types';
+/**
+ * Internal component that renders the actual focus ring elements.
+ * Supports both adaptive and bounding-box strategies with a unified rendering approach.
+ *
+ * This is a pure presentational component that receives pre-calculated FocusRingLayers
+ * and renders the appropriate SVG elements using React.createElement.
+ *
+ * @param props - FocusRingRendererProps
+ * @returns JSX element with focus ring SVG elements, or null if no valid data
+ */
+export declare const FocusRingRenderer: React.FC<FocusRingRendererProps>;
+//# sourceMappingURL=FocusRingRenderer.d.ts.map

package/dist/cjs/components/focusRing/components/FocusRingRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FocusRingRenderer.d.ts","sourceRoot":"","sources":["../../../../../src/components/focusRing/components/FocusRingRenderer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAEjE;;;;;;;;;GASG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAkB9D,CAAC"}

package/dist/cjs/components/focusRing/components/FocusRingRenderer.js

@@ -0,0 +1,25 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement } from 'react';
+/**
+ * Internal component that renders the actual focus ring elements.
+ * Supports both adaptive and bounding-box strategies with a unified rendering approach.
+ *
+ * This is a pure presentational component that receives pre-calculated FocusRingLayers
+ * and renders the appropriate SVG elements using React.createElement.
+ *
+ * @param props - FocusRingRendererProps
+ * @returns JSX element with focus ring SVG elements, or null if no valid data
+ */
+export const FocusRingRenderer = ({ dataTestId, layers }) => {
+    if (!layers) {
+        return null;
+    }
+    // Unified rendering: both adaptive and bounding-box use the same structure
+    return (_jsxs("g", { className: "focus-ring-container", pointerEvents: "none", children: [createElement(layers.outerRing.type, {
+                ...layers.outerRing.props,
+                'data-testid': `${dataTestId}-focus-outer`,
+            }), createElement(layers.innerRing.type, {
+                ...layers.innerRing.props,
+                'data-testid': `${dataTestId}-focus-inner`,
+            })] }));
+};

package/dist/cjs/components/focusRing/components/FocusRingSeparate.d.ts

@@ -0,0 +1,40 @@
+import type { RefObject } from 'react';
+import type { FocusConfig } from '../../../types/focusConfig.type';
+export interface FocusRingSeparateProps {
+    targetRef: RefObject<SVGGraphicsElement>;
+    isFocused: boolean;
+    disabled?: boolean;
+    dataTestId?: string;
+    focusConfig?: FocusConfig;
+}
+/**
+ * FocusRing component for separate mode (targetRef).
+ * Renders only the focus ring, allowing precise z-order control.
+ *
+ * This component:
+ * - Uses a ref to the target element (does not wrap it)
+ * - Only renders the focus ring (no children cloning)
+ * - Allows precise z-order control by controlling where FocusRing is placed in JSX
+ * - Handles both adaptive and bounding-box variants
+ *
+ * **IMPORTANT NOTE: Z-Order with Adaptive Variant**
+ *
+ * When using `variant: 'adaptive'` (default), the FocusRing **MUST be rendered BEFORE**
+ * the target element in SVG document order. Otherwise, focus ring strokes will cover the element.
+ *
+ * @param props - FocusRingSeparateProps
+ * @returns JSX element with only focus ring, or null if not focused/disabled
+ *
+ * @example
+ * ```tsx
+ * const ref = useRef<SVGCircleElement>(null);
+ *
+ * // CORRECT: FocusRing before element
+ * <>
+ *   <FocusRingSeparate targetRef={ref} isFocused={true} />
+ *   <circle ref={ref} cx={50} cy={50} r={30} />
+ * </>
+ * ```
+ */
+export declare const FocusRingSeparate: React.FC<FocusRingSeparateProps>;
+//# sourceMappingURL=FocusRingSeparate.d.ts.map

package/dist/cjs/components/focusRing/components/FocusRingSeparate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FocusRingSeparate.d.ts","sourceRoot":"","sources":["../../../../../src/components/focusRing/components/FocusRingSeparate.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAK5D,MAAM,WAAW,sBAAsB;IACrC,SAAS,EAAE,SAAS,CAAC,kBAAkB,CAAC,CAAC;IACzC,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAoB9D,CAAC"}

package/dist/cjs/components/focusRing/components/FocusRingSeparate.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useFocusRingData } from '../hooks/useFocusRingData';
+import { FocusRingRenderer } from './FocusRingRenderer';
+/**
+ * FocusRing component for separate mode (targetRef).
+ * Renders only the focus ring, allowing precise z-order control.
+ *
+ * This component:
+ * - Uses a ref to the target element (does not wrap it)
+ * - Only renders the focus ring (no children cloning)
+ * - Allows precise z-order control by controlling where FocusRing is placed in JSX
+ * - Handles both adaptive and bounding-box variants
+ *
+ * **IMPORTANT NOTE: Z-Order with Adaptive Variant**
+ *
+ * When using `variant: 'adaptive'` (default), the FocusRing **MUST be rendered BEFORE**
+ * the target element in SVG document order. Otherwise, focus ring strokes will cover the element.
+ *
+ * @param props - FocusRingSeparateProps
+ * @returns JSX element with only focus ring, or null if not focused/disabled
+ *
+ * @example
+ * ```tsx
+ * const ref = useRef<SVGCircleElement>(null);
+ *
+ * // CORRECT: FocusRing before element
+ * <>
+ *   <FocusRingSeparate targetRef={ref} isFocused={true} />
+ *   <circle ref={ref} cx={50} cy={50} r={30} />
+ * </>
+ * ```
+ */
+export const FocusRingSeparate = ({ dataTestId = 'focus-ring', disabled = false, focusConfig, isFocused, targetRef, }) => {
+    const { layers } = useFocusRingData({
+        elementRef: targetRef,
+        focusConfig,
+        isFocused,
+    });
+    // Early return if not focused or disabled
+    if (!isFocused || disabled) {
+        return null;
+    }
+    // Render focus ring with unified structure
+    return _jsx(FocusRingRenderer, { dataTestId: dataTestId, layers: layers });
+};

package/dist/cjs/components/focusRing/focusRing.css

@@ -0,0 +1,14 @@
+.focus-ring-outer {
+    /* Ensure focus rings don't interfere with pointer events */
+    pointer-events: none;
+}
+
+.focus-ring-inner {
+    /* Ensure focus rings don't interfere with pointer events */
+    pointer-events: none;
+}
+
+.focus-ring-container {
+    /* Ensure focus ring group doesn't interfere with interactions */
+    pointer-events: none;
+}

package/dist/cjs/components/focusRing/focusRing.d.ts

@@ -0,0 +1,35 @@
+import type { FC } from 'react';
+import './focusRing.css';
+import type { FocusRingProps } from './focusRing.types';
+/**
+ * FocusRing - Controlled, purely decorative component for rendering focus rings around SVG elements.
+ *
+ * **Key Characteristics:**
+ * - **Controlled Component**: Parent manages `isFocused` state
+ * - **Purely Decorative**: Does not intercept or manage events
+ * - **Two Modes**: Inline (children) or Separate (targetRef) rendering
+ * - **Zero Configuration**: Automatic element detection
+ *
+ * **Two Modes:**
+ *
+ * 1. **Inline (children)** - Wraps element, focus ring rendered inline, z-order handled automatically
+ * 2. **Separate (targetRef)** - Only renders focus ring, allows precise z-order control
+ *
+ * **IMPORTANT NOTE: Z-Order with Adaptive Variant**
+ *
+ * When using `variant: 'adaptive'` (default) with `targetRef` mode, the FocusRing **MUST be rendered BEFORE**
+ * the target element in SVG document order. Otherwise, focus ring strokes will cover the element.
+ *
+ * ```tsx
+ * // CORRECT: FocusRing before element
+ * <>
+ *   <FocusRing targetRef={ref} isFocused={focused} />
+ *   <circle ref={ref} cx={50} cy={50} r={30} />
+ * </>
+ * ```
+ *
+ * @param props - FocusRingProps
+ * @returns JSX element with focus ring or null
+ */
+export declare const FocusRing: FC<FocusRingProps>;
+//# sourceMappingURL=focusRing.d.ts.map

package/dist/cjs/components/focusRing/focusRing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"focusRing.d.ts","sourceRoot":"","sources":["../../../../src/components/focusRing/focusRing.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAIhC,OAAO,iBAAiB,CAAC;AACzB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAsCxD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,SAAS,oBAAqB,CAAC"}

package/dist/cjs/components/focusRing/focusRing.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FocusRingInline } from './components/FocusRingInline';
+import { FocusRingSeparate } from './components/FocusRingSeparate';
+import './focusRing.css';
+const FocusRingComponent = ({ children, dataTestId = 'focus-ring', disabled = false, focusConfig, isFocused, targetRef, }) => {
+    if (children) {
+        return (_jsx(FocusRingInline, { dataTestId: dataTestId, disabled: disabled, focusConfig: focusConfig, isFocused: isFocused, children: children }));
+    }
+    if (targetRef) {
+        return (_jsx(FocusRingSeparate, { dataTestId: dataTestId, disabled: disabled, focusConfig: focusConfig, isFocused: isFocused, targetRef: targetRef }));
+    }
+    return null;
+};
+/**
+ * FocusRing - Controlled, purely decorative component for rendering focus rings around SVG elements.
+ *
+ * **Key Characteristics:**
+ * - **Controlled Component**: Parent manages `isFocused` state
+ * - **Purely Decorative**: Does not intercept or manage events
+ * - **Two Modes**: Inline (children) or Separate (targetRef) rendering
+ * - **Zero Configuration**: Automatic element detection
+ *
+ * **Two Modes:**
+ *
+ * 1. **Inline (children)** - Wraps element, focus ring rendered inline, z-order handled automatically
+ * 2. **Separate (targetRef)** - Only renders focus ring, allows precise z-order control
+ *
+ * **IMPORTANT NOTE: Z-Order with Adaptive Variant**
+ *
+ * When using `variant: 'adaptive'` (default) with `targetRef` mode, the FocusRing **MUST be rendered BEFORE**
+ * the target element in SVG document order. Otherwise, focus ring strokes will cover the element.
+ *
+ * ```tsx
+ * // CORRECT: FocusRing before element
+ * <>
+ *   <FocusRing targetRef={ref} isFocused={focused} />
+ *   <circle ref={ref} cx={50} cy={50} r={30} />
+ * </>
+ * ```
+ *
+ * @param props - FocusRingProps
+ * @returns JSX element with focus ring or null
+ */
+export const FocusRing = FocusRingComponent;

package/dist/cjs/components/focusRing/focusRing.types.d.ts

@@ -0,0 +1,40 @@
+import type { ReactElement, RefObject } from 'react';
+import type { FocusConfig } from '../../types/focusConfig.type';
+import type { FocusRingLayers } from './utils/utils.types';
+export interface FocusRingProps {
+    /**
+     * The SVG graphics element to wrap with focus ring (Mode 1: inline rendering).
+     * Must be a renderable SVG element (path, circle, rect, g, etc.).
+     * Mutually exclusive with targetRef - provide either children OR targetRef, not both.
+     */
+    children?: ReactElement;
+    /**
+     * Reference to external SVG graphics element (Mode 2: separate rendering).
+     * Must be a renderable SVG element (path, circle, rect, g, etc.).
+     * When provided, only the focus ring is rendered (not the element itself).
+     * Mutually exclusive with children - provide either children OR targetRef, not both.
+     */
+    targetRef?: RefObject<SVGGraphicsElement>;
+    /**
+     * Controlled focus state (REQUIRED).
+     * The parent component must manage this state and update it based on focus/blur events.
+     * FocusRing is purely decorative and does not manage state internally.
+     */
+    isFocused: boolean;
+    /** Test identifier for the focus ring elements */
+    dataTestId?: string;
+    /** Whether the focus ring is disabled */
+    disabled?: boolean;
+    /** Configuration for focus ring appearance */
+    focusConfig?: FocusConfig;
+}
+/**
+ * Props for the internal FocusRingRenderer component
+ */
+export interface FocusRingRendererProps {
+    /** Test identifier for the focus ring elements */
+    dataTestId: string;
+    /** Pre-computed layers (unified structure for both adaptive and bounding-box modes) */
+    layers?: FocusRingLayers;
+}
+//# sourceMappingURL=focusRing.types.d.ts.map

package/dist/cjs/components/focusRing/focusRing.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"focusRing.types.d.ts","sourceRoot":"","sources":["../../../../src/components/focusRing/focusRing.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAE5D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAE3D,MAAM,WAAW,cAAc;IAC7B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,YAAY,CAAC;IAExB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC,kBAAkB,CAAC,CAAC;IAE1C;;;;OAIG;IACH,SAAS,EAAE,OAAO,CAAC;IAEnB,kDAAkD;IAClD,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,8CAA8C;IAC9C,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAED;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,kDAAkD;IAClD,UAAU,EAAE,MAAM,CAAC;IAEnB,uFAAuF;IACvF,MAAM,CAAC,EAAE,eAAe,CAAC;CAC1B"}

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

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

package/dist/cjs/components/focusRing/hooks/useFocusRingData.d.ts

@@ -0,0 +1,27 @@
+import { type RefObject } from 'react';
+import { type FocusConfig } from '../../../types/focusConfig.type';
+import type { FocusRingLayers } from '../utils/utils.types';
+export interface UseFocusRingDataOptions {
+    elementRef: RefObject<SVGGraphicsElement>;
+    isFocused: boolean;
+    focusConfig?: FocusConfig;
+}
+export interface FocusRingData {
+    resolvedConfig: Required<FocusConfig>;
+    layers: FocusRingLayers | undefined;
+}
+/**
+ * Hook that handles all focus ring data calculation logic.
+ * Separated from rendering concerns for better testability and reusability.
+ *
+ * This hook:
+ * - Generates layers for both adaptive and bounding-box variants
+ * - Both variants return the same FocusRingLayers structure
+ * - Only calculates what's needed based on the variant
+ * - Manages all the state and effects related to focus ring data
+ *
+ * @param options - Configuration options for the hook
+ * @returns Focus ring data including resolved config and calculated layers
+ */
+export declare function useFocusRingData({ elementRef, focusConfig, isFocused, }: UseFocusRingDataOptions): FocusRingData;
+//# sourceMappingURL=useFocusRingData.d.ts.map

package/dist/cjs/components/focusRing/hooks/useFocusRingData.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFocusRingData.d.ts","sourceRoot":"","sources":["../../../../../src/components/focusRing/hooks/useFocusRingData.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAgC,MAAM,OAAO,CAAC;AAErE,OAAO,EAAE,KAAK,WAAW,EAAkB,MAAM,0BAA0B,CAAC;AAO5E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAE5D,MAAM,WAAW,uBAAuB;IACtC,UAAU,EAAE,SAAS,CAAC,kBAAkB,CAAC,CAAC;IAC1C,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAED,MAAM,WAAW,aAAa;IAC5B,cAAc,EAAE,QAAQ,CAAC,WAAW,CAAC,CAAC;IACtC,MAAM,EAAE,eAAe,GAAG,SAAS,CAAC;CACrC;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,UAAU,EACV,WAAW,EACX,SAAS,GACV,EAAE,uBAAuB,GAAG,aAAa,CA+DzC"}

package/dist/cjs/components/focusRing/hooks/useFocusRingData.js

@@ -0,0 +1,67 @@
+import { useEffect, useMemo, useState } from 'react';
+import { getFocusConfig } from '../../../types/focusConfig.type';
+import { SVG_GEOMETRIC_ATTRIBUTES, createAdaptiveFocusRings, } from '../utils/createAdaptiveFocusRings';
+import { createBoundingBoxFocusRings } from '../utils/createBoundingBoxFocusRings';
+/**
+ * Hook that handles all focus ring data calculation logic.
+ * Separated from rendering concerns for better testability and reusability.
+ *
+ * This hook:
+ * - Generates layers for both adaptive and bounding-box variants
+ * - Both variants return the same FocusRingLayers structure
+ * - Only calculates what's needed based on the variant
+ * - Manages all the state and effects related to focus ring data
+ *
+ * @param options - Configuration options for the hook
+ * @returns Focus ring data including resolved config and calculated layers
+ */
+export function useFocusRingData({ elementRef, focusConfig, isFocused, }) {
+    // Resolve config once at the top
+    const resolvedConfig = useMemo(() => getFocusConfig(focusConfig), [focusConfig]);
+    const [layers, setLayers] = useState(undefined);
+    // Calculation happens when isFocused changes or when focus config changes
+    // MutationObserver watches for geometric attribute changes
+    // to automatically regenerate layers when the element moves or resizes
+    useEffect(() => {
+        if (!elementRef?.current || !isFocused) {
+            setLayers(undefined);
+            return undefined;
+        }
+        const element = elementRef.current;
+        // Function to calculate focus ring layers from current DOM state
+        const calculateRings = () => {
+            // Strategy 1: Adaptive variant - generate layers from DOM element
+            if (resolvedConfig.variant === 'adaptive') {
+                const adaptiveLayers = createAdaptiveFocusRings(element, resolvedConfig);
+                setLayers(adaptiveLayers);
+            }
+            // Strategy 2: Bounding-box variant - detect bounds and calculate layers
+            if (resolvedConfig.variant === 'bounding-box') {
+                const boundingBoxLayers = createBoundingBoxFocusRings(element, resolvedConfig);
+                setLayers(boundingBoxLayers);
+            }
+        };
+        // Calculate layers initially
+        calculateRings();
+        // Set up MutationObserver to detect changes in geometric attributes
+        // This ensures focus ring updates automatically when the element moves or resizes
+        const observer = new MutationObserver(mutations => {
+            const hasGeometricChanges = mutations.some(mutation => mutation.type === 'attributes' &&
+                SVG_GEOMETRIC_ATTRIBUTES.includes(mutation.attributeName ?? ''));
+            if (hasGeometricChanges) {
+                // Recalculate focus rings on relevant attribute changes
+                calculateRings();
+            }
+        });
+        // Observe only geometric attributes that affect position and size
+        observer.observe(element, {
+            attributeFilter: [...SVG_GEOMETRIC_ATTRIBUTES],
+            attributes: true,
+        });
+        return () => observer.disconnect();
+    }, [isFocused, resolvedConfig]);
+    return {
+        layers,
+        resolvedConfig,
+    };
+}

package/dist/cjs/components/focusRing/index.d.ts

@@ -0,0 +1,3 @@
+export { FocusRing } from './focusRing';
+export type { FocusRingProps, FocusRingRendererProps } from './focusRing.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/cjs/components/focusRing/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/focusRing/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/cjs/components/focusRing/index.js

@@ -0,0 +1 @@
+export { FocusRing } from './focusRing';

package/dist/cjs/components/focusRing/utils/composeRefs.d.ts

@@ -0,0 +1,7 @@
+import type { ForwardedRef } from 'react';
+/**
+ * Composes multiple refs into a single ref callback
+ * Allows using both internal and external refs simultaneously
+ */
+export declare function composeRefs<T>(...refs: Array<ForwardedRef<T> | undefined>): (instance: T | null) => void;
+//# sourceMappingURL=composeRefs.d.ts.map

package/dist/cjs/components/focusRing/utils/composeRefs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"composeRefs.d.ts","sourceRoot":"","sources":["../../../../../src/components/focusRing/utils/composeRefs.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C;;;GAGG;AACH,wBAAgB,WAAW,CAAC,CAAC,EAC3B,GAAG,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,GAC1C,CAAC,QAAQ,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,CAU9B"}

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