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

package/dist/cjs/components/bar/utils/buildD.js

@@ -1,115 +1 @@
-import { BarOrientation } from '../bar.type';
-const locateFromPosition = ({ barWidth, currentBars, extraSpacing, order, orientation, }) => {
-    const halfWidth = barWidth / 2;
-    const gap = extraSpacing / 2;
-    const isEven = currentBars % 2 === 0;
-    // calculate the space between the bars
-    const ajustedSpace = isEven ? gap : gap + halfWidth;
-    // calculate the center of the bars
-    const center = Math.ceil(currentBars / 2);
-    // calculate the current position of the bar
-    const currentPosition = order - center;
-    // calculate the start reference based on the current position
-    let startReference = 0;
-    if (currentPosition === 0) {
-        startReference = isEven ? -gap : halfWidth;
-    }
-    else if (currentPosition < 0) {
-        if (orientation === BarOrientation.HORIZONTAL) {
-            startReference = currentPosition * -ajustedSpace + barWidth;
-        }
-        else {
-            startReference = currentPosition * ajustedSpace;
-        }
-    }
-    else if (currentPosition > 0) {
-        if (orientation === BarOrientation.HORIZONTAL) {
-            startReference = currentPosition * -ajustedSpace;
-        }
-        else {
-            startReference = currentPosition * ajustedSpace + barWidth;
-        }
-    }
-    return startReference;
-};
-export const buildD = ({ barWidth, currentBars, endRounded = 0, extraSpacing, order, orientation, startRounded = 0, x1, x2, y1, y2, }) => {
-    // declare the variables for the path
-    let start, draw1, draw2, draw3;
-    let end = 'Z';
-    // get the reference for the start of the draw
-    const startReference = locateFromPosition({
-        barWidth,
-        currentBars,
-        extraSpacing,
-        order,
-        orientation,
-    });
-    /**
-     * M = moove to (x, y)
-     * L = line to (x, y)
-     * Q = quadratic curve to (x curve deep, y curve deep), (end draw x, end draw y)
-     */
-    if (orientation === BarOrientation.HORIZONTAL) {
-        // calculate the start and end of the quadratic curve in horizontal orientation
-        const modifyXStart = x1 + startRounded;
-        const modifyXEnd = x2 - endRounded;
-        if (startRounded && endRounded) {
-            start = `M ${modifyXStart},${y1 + startReference}`;
-            draw1 = `L${modifyXEnd},${y2 + startReference}`;
-            draw2 = `Q${x2 + endRounded} ${y2 + startReference - barWidth / 2}, ${modifyXEnd} ${y2 + startReference - barWidth}`;
-            draw3 = `L${modifyXStart},${y1 + startReference - barWidth}`;
-            end = `Q${x1 - startRounded} ${y1 + startReference - barWidth / 2}, ${modifyXStart} ${y1 + startReference}`;
-        }
-        else if (startRounded) {
-            start = `M ${modifyXStart},${y1 + startReference}`;
-            draw1 = `L${x2},${y2 + startReference}`;
-            draw2 = `L${x2},${y2 + startReference - barWidth}`;
-            draw3 = `L${modifyXStart},${y1 + startReference - barWidth}`;
-            end = `Q${x1 - startRounded} ${y1 + startReference - barWidth / 2}, ${modifyXStart} ${y1 + startReference}`;
-        }
-        else if (endRounded) {
-            start = `M${x1},${y1 + startReference}`;
-            draw1 = `L${modifyXEnd},${y2 + startReference}`;
-            draw2 = `Q${x2 + endRounded} ${y2 + startReference - barWidth / 2}, ${modifyXEnd} ${y2 + startReference - barWidth}`;
-            draw3 = `L${x1},${y1 + startReference - barWidth}`;
-        }
-        else {
-            start = `M${x1},${y1 + startReference}`;
-            draw1 = `L${x2},${y2 + startReference}`;
-            draw2 = `L${x2},${y2 + startReference - barWidth}`;
-            draw3 = `L${x1},${y1 + startReference - barWidth}`;
-        }
-    }
-    else {
-        // calculate the start and end of the quadratic curve in vertical orientation
-        const modifyYStart = y1 - startRounded;
-        const modifyYEnd = y2 + endRounded;
-        if (startRounded && endRounded) {
-            start = `M${x1 + startReference}, ${modifyYStart}`;
-            draw1 = `L${x2 + startReference},${modifyYEnd}`;
-            draw2 = `Q${x2 + startReference - barWidth / 2} ${y2 - endRounded}, ${x2 + startReference - barWidth} ${modifyYEnd}`;
-            draw3 = `L${x1 + startReference - barWidth},${modifyYStart}`;
-            end = `Q${x1 + startReference - barWidth / 2} ${y1 + startRounded}, ${x1 + startReference} ${modifyYStart}`;
-        }
-        else if (startRounded) {
-            start = `M${x1 + startReference}, ${modifyYStart}`;
-            draw1 = `L${x2 + startReference},${y2}`;
-            draw2 = `L${x2 + startReference - barWidth},${y2}`;
-            draw3 = `L${x1 + startReference - barWidth},${modifyYStart}`;
-            end = `Q${x1 + startReference - barWidth / 2} ${y1 + startRounded}, ${x1 + startReference} ${modifyYStart}`;
-        }
-        else if (endRounded) {
-            start = `M${x1 + startReference},${y1}`;
-            draw1 = `L${x2 + startReference},${modifyYEnd}`;
-            draw2 = `Q${x2 + startReference - barWidth / 2} ${y2 - endRounded}, ${x2 + startReference - barWidth} ${modifyYEnd}`;
-            draw3 = `L${x2 + startReference - barWidth},${y1}`;
-        }
-        else {
-            start = `M${x1 + startReference},${y1}`;
-            draw1 = `L${x2 + startReference},${y2}`;
-            draw2 = `L${x2 + startReference - barWidth},${y2}`;
-            draw3 = `L${x1 + startReference - barWidth},${y1}`;
-        }
-    }
-    return `${start} ${draw1} ${draw2} ${draw3} ${end}`;
-};
+const e=require(`../bar.type.js`);var t=({barWidth:t,currentBars:n,extraSpacing:r,order:i,orientation:a})=>{let o=t/2,s=r/2,c=n%2==0,l=c?s:s+o,u=i-Math.ceil(n/2),d=0;return u===0?d=c?-s:o:u<0?d=a===e.BarOrientation.HORIZONTAL?u*-l+t:u*l:u>0&&(d=a===e.BarOrientation.HORIZONTAL?u*-l:u*l+t),d};exports.buildD=({barWidth:n,currentBars:r,endRounded:i=0,extraSpacing:a,order:o,orientation:s,startRounded:c=0,x1:l,x2:u,y1:d,y2:f})=>{let p,m,h,g,_=`Z`,v=t({barWidth:n,currentBars:r,extraSpacing:a,order:o,orientation:s});if(s===e.BarOrientation.HORIZONTAL){let e=l+c,t=u-i;c&&i?(p=`M ${e},${d+v}`,m=`L${t},${f+v}`,h=`Q${u+i} ${f+v-n/2}, ${t} ${f+v-n}`,g=`L${e},${d+v-n}`,_=`Q${l-c} ${d+v-n/2}, ${e} ${d+v}`):c?(p=`M ${e},${d+v}`,m=`L${u},${f+v}`,h=`L${u},${f+v-n}`,g=`L${e},${d+v-n}`,_=`Q${l-c} ${d+v-n/2}, ${e} ${d+v}`):i?(p=`M${l},${d+v}`,m=`L${t},${f+v}`,h=`Q${u+i} ${f+v-n/2}, ${t} ${f+v-n}`,g=`L${l},${d+v-n}`):(p=`M${l},${d+v}`,m=`L${u},${f+v}`,h=`L${u},${f+v-n}`,g=`L${l},${d+v-n}`)}else{let e=d-c,t=f+i;c&&i?(p=`M${l+v}, ${e}`,m=`L${u+v},${t}`,h=`Q${u+v-n/2} ${f-i}, ${u+v-n} ${t}`,g=`L${l+v-n},${e}`,_=`Q${l+v-n/2} ${d+c}, ${l+v} ${e}`):c?(p=`M${l+v}, ${e}`,m=`L${u+v},${f}`,h=`L${u+v-n},${f}`,g=`L${l+v-n},${e}`,_=`Q${l+v-n/2} ${d+c}, ${l+v} ${e}`):i?(p=`M${l+v},${d}`,m=`L${u+v},${t}`,h=`Q${u+v-n/2} ${f-i}, ${u+v-n} ${t}`,g=`L${u+v-n},${d}`):(p=`M${l+v},${d}`,m=`L${u+v},${f}`,h=`L${u+v-n},${f}`,g=`L${l+v-n},${d}`)}return`${p} ${m} ${h} ${g} ${_}`};

package/dist/cjs/components/bar/utils/getSegments.js

@@ -1,31 +1 @@
-import { BarOrientation } from '../bar.type';
-const transformCoverage = (coveragePercent, maxValue) => {
-    return (coveragePercent / 100) * maxValue;
-};
-const ajustedGap = (positive, value, gap) => {
-    return positive ? value + gap / 2 : value - gap / 2;
-};
-export const getSegments = ({ barConfig, orientation, x1, x2, y1, y2, }) => {
-    const { gap = 0, singleConfig } = barConfig;
-    const isHorizontal = orientation === BarOrientation.HORIZONTAL;
-    // the start of the bar based on the orientation
-    const barStart = isHorizontal ? x1 : y1;
-    // the end of the bar based on the orientation
-    const barEnd = isHorizontal ? x2 : y2;
-    // ajusted type based on the values of the start and end
-    const ajustedType = {
-        end: barEnd < barStart,
-        start: barEnd > barStart,
-    };
-    return singleConfig.reduce((acc, single, idx) => {
-        const { coverage: coveragePercent } = single;
-        // calculate the coverage based on the percentage and the bar size
-        const coverage = transformCoverage(coveragePercent, barEnd - barStart);
-        // if the index is 0, the start is the barStart, otherwise it's the end of the previous segment
-        const start = idx === 0 ? barStart : ajustedGap(ajustedType.start, acc[idx - 1][1], gap);
-        // if the index is the last, the end is the barEnd, otherwise it's the start + coverage
-        const end = idx + 1 === singleConfig.length ? barEnd : ajustedGap(ajustedType.end, start + coverage, gap);
-        acc.push([start, end]);
-        return acc;
-    }, []);
-};
+const e=require(`../bar.type.js`);var t=(e,t)=>e/100*t,n=(e,t,n)=>e?t+n/2:t-n/2;exports.getSegments=({barConfig:r,orientation:i,x1:a,x2:o,y1:s,y2:c})=>{let{gap:l=0,singleConfig:u}=r,d=i===e.BarOrientation.HORIZONTAL,f=d?a:s,p=d?o:c,m={end:p<f,start:p>f};return u.reduce((e,r,i)=>{let{coverage:a}=r,o=t(a,p-f),s=i===0?f:n(m.start,e[i-1][1],l),c=i+1===u.length?p:n(m.end,s+o,l);return e.push([s,c]),e},[])};

package/dist/cjs/components/chartText/chartText.js

@@ -1,18 +1 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * Functional component for rendering SVG text elements in React.
- *
- * This component abstracts the `<text>` SVG element, providing a convenient interface for rendering text within SVGs
- * using React. It accepts all standard SVG text attributes via `ChartTextProps`, along with additional React-specific
- * properties such as `className` and `tabIndex`. The component's children are expected to be the text content to be
- * rendered.
- *
- * @param {ChartTextProps} props - The properties for the text component.
- * @param {string} [props.className='circle'] - Optional. CSS class name for the text element. Defaults to 'circle'.
- * @param {number} [props.tabIndex=-1] - Optional. Specifies the tab order of the element. Defaults to -1, which means the element is not focusable.
- * @param {React.ReactNode} props.children - The text content to be rendered within the `<text>` element.
- * @returns {React.ReactElement} A React element representing the SVG text.
- */
-export const ChartText = ({ children, className = 'circle', ...props }) => {
-    return (_jsx("text", { className: className, ...props, children: children }));
-};
+let e=require(`react/jsx-runtime`);exports.ChartText=({children:t,className:n=`circle`,...r})=>(0,e.jsx)(`text`,{className:n,...r,children:t});

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

@@ -1,37 +1 @@
-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] }));
-};
+const e=require(`../hooks/useFocusRingData.js`),t=require(`../utils/composeRefs.js`),n=require(`./FocusRingRenderer.js`);let r=require(`react`),i=require(`react/jsx-runtime`);exports.FocusRingInline=({children:a,dataTestId:o=`focus-ring`,disabled:s=!1,focusConfig:c,isFocused:l})=>{let u=(0,r.useRef)(null),{layers:d}=e.useFocusRingData({elementRef:u,focusConfig:c,isFocused:l}),f=(0,r.cloneElement)(a,{ref:t.composeRefs(u,a.ref)});return(0,i.jsxs)(i.Fragment,{children:[l&&!s&&(0,i.jsx)(n.FocusRingRenderer,{dataTestId:o,layers:d??void 0}),f]})};

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

@@ -1,25 +1 @@
-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`,
-            })] }));
-};
+let e=require(`react`),t=require(`react/jsx-runtime`);exports.FocusRingRenderer=({dataTestId:n,layers:r})=>r?(0,t.jsxs)(`g`,{className:`focus-ring-container`,pointerEvents:`none`,children:[(0,e.createElement)(r.outerRing.type,{...r.outerRing.props,"data-testid":`${n}-focus-outer`}),(0,e.createElement)(r.innerRing.type,{...r.innerRing.props,"data-testid":`${n}-focus-inner`})]}):null;

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

@@ -1,45 +1 @@
-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 });
-};
+const e=require(`../hooks/useFocusRingData.js`),t=require(`./FocusRingRenderer.js`);let n=require(`react/jsx-runtime`);exports.FocusRingSeparate=({dataTestId:r=`focus-ring`,disabled:i=!1,focusConfig:a,isFocused:o,targetRef:s})=>{let{layers:c}=e.useFocusRingData({elementRef:s,focusConfig:a,isFocused:o});return!o||i?null:(0,n.jsx)(t.FocusRingRenderer,{dataTestId:r,layers:c})};

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

@@ -0,0 +1 @@
+const e=require(`./components/FocusRingInline.js`),t=require(`./components/FocusRingSeparate.js`);;/* empty css           */let n=require(`react/jsx-runtime`);exports.FocusRing=({children:r,dataTestId:i=`focus-ring`,disabled:a=!1,focusConfig:o,isFocused:s,targetRef:c})=>r?(0,n.jsx)(e.FocusRingInline,{dataTestId:i,disabled:a,focusConfig:o,isFocused:s,children:r}):c?(0,n.jsx)(t.FocusRingSeparate,{dataTestId:i,disabled:a,focusConfig:o,isFocused:s,targetRef:c}):null;

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

@@ -1,67 +1 @@
-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,
-    };
-}
+const e=require(`../../../types/focusConfig.type.js`),t=require(`../utils/createAdaptiveFocusRings.js`),n=require(`../utils/createBoundingBoxFocusRings.js`);let r=require(`react`);function i({elementRef:i,focusConfig:a,isFocused:o}){let s=(0,r.useMemo)(()=>e.getFocusConfig(a),[a]),[c,l]=(0,r.useState)(void 0);return(0,r.useEffect)(()=>{if(!i?.current||!o){l(void 0);return}let e=i.current,r=()=>{s.variant===`adaptive`&&l(t.createAdaptiveFocusRings(e,s)),s.variant===`bounding-box`&&l(n.createBoundingBoxFocusRings(e,s))};r();let a=new MutationObserver(e=>{e.some(e=>e.type===`attributes`&&t.SVG_GEOMETRIC_ATTRIBUTES.includes(e.attributeName??``))&&r()});return a.observe(e,{attributeFilter:[...t.SVG_GEOMETRIC_ATTRIBUTES],attributes:!0}),()=>a.disconnect()},[o,s]),{layers:c,resolvedConfig:s}}exports.useFocusRingData=i;

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

@@ -1,16 +1 @@
-/**
- * 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;
-            }
-        });
-    };
-}
+function e(...e){return t=>{e.forEach(e=>{typeof e==`function`?e(t):e&&(e.current=t)})}}exports.composeRefs=e;

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

@@ -1,141 +1 @@
-/**
- * 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;
-}
+const e=[`cx`,`cy`,`r`,`x`,`y`,`width`,`height`,`rx`,`ry`,`d`,`points`,`x1`,`y1`,`x2`,`y2`];var t=[`stroke-dasharray`,`stroke-dashoffset`,`stroke-linecap`,`stroke-linejoin`,`stroke-miterlimit`,`stroke-opacity`],n=[`circle`,`rect`,`ellipse`,`path`,`polygon`,`polyline`,`line`];function r(e,t){let r=e.tagName.toLowerCase();if(!n.includes(r))return;let a=e.getAttribute(`stroke-width`)||e.getAttribute(`strokeWidth`),o=parseFloat(a||`0`),s=e.getAttribute(`fill`),c=r===`line`||r===`polyline`||r===`path`&&s===`none`,l=o+(t.outlineStrokeWidth+t.innerStrokeWidth)*2,u=o+t.innerStrokeWidth*2,d=c?e.getAttribute(`stroke-linecap`)||`round`:void 0,f=c?e.getAttribute(`stroke-linejoin`)||`round`:`miter`,p=c?void 0:`10`,m=i(e);return{innerRing:{props:{...m,className:`focus-ring-inner`,fill:`none`,stroke:t.innerColor,strokeLinecap:d,strokeLinejoin:f,strokeMiterlimit:p,strokeWidth:u},type:r},outerRing:{props:{...m,className:`focus-ring-outer`,fill:`none`,stroke:t.outlineColor,strokeLinecap:d,strokeLinejoin:f,strokeMiterlimit:p,strokeWidth:l},type:r}}}function i(n){let r={},i=new Set([...e,...t]);for(let e=0;e<n.attributes.length;e++){let t=n.attributes[e];i.has(t.name)&&(r[t.name]=t.value)}return r}exports.SVG_GEOMETRIC_ATTRIBUTES=e,exports.createAdaptiveFocusRings=r;

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

@@ -1,126 +1 @@
-/**
- * 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',
-        },
-    };
-}
+const e=(e,t)=>{let{elementHeight:n,elementPosition:r,elementStrokeWidth:i,elementWidth:a}=e,{gap:o,innerStrokeWidth:s,outlineStrokeWidth:c}=t,l=a+i+s+o*2,u=n+i+s+o*2,d=r.x-l/2,f=r.y-u/2,p=l+s+c,m=u+s+c,h=r.x-p/2,g=r.y-m/2;return{inner:{height:u,width:l,x:d,y:f},outer:{height:m,width:p,x:h,y:g}}};function t(e){try{let t=e.getBBox();if(t.width<=0||t.height<=0)return null;let n=window.getComputedStyle(e),r=parseFloat(n.strokeWidth||`0`);return{elementHeight:t.height,elementPosition:{x:t.x+t.width/2,y:t.y+t.height/2},elementStrokeWidth:r,elementWidth:t.width}}catch{return null}}function n(n,r){let i=t(n);if(!i)return;let a=e(i,{gap:r.gap,innerStrokeWidth:r.innerStrokeWidth,outlineStrokeWidth:r.outlineStrokeWidth});return{innerRing:{props:{className:`focus-ring-inner`,fill:`none`,height:a.inner.height,stroke:r.innerColor,strokeWidth:r.innerStrokeWidth,width:a.inner.width,x:a.inner.x,y:a.inner.y},type:`rect`},outerRing:{props:{className:`focus-ring-outer`,fill:`none`,height:a.outer.height,stroke:r.outlineColor,strokeWidth:r.outlineStrokeWidth,width:a.outer.width,x:a.outer.x,y:a.outer.y},type:`rect`}}}exports.createBoundingBoxFocusRings=n;

package/dist/cjs/components/foreignObject/foreignObject.js

@@ -1,4 +1 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-export const ForeignObject = ({ children, dataTestId, height, width, x, y, }) => {
-    return (_jsx("foreignObject", { "data-testid": dataTestId, height: height, width: width, x: x, y: y, children: children }));
-};
+let e=require(`react/jsx-runtime`);exports.ForeignObject=({children:t,dataTestId:n,height:r,width:i,x:a,y:o})=>(0,e.jsx)(`foreignObject`,{"data-testid":n,height:r,width:i,x:a,y:o,children:t});