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

package/dist/esm/components/axisChart/xAxis/xAxis.js

@@ -1,42 +1,37 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Line } from '../../../components/line/line';
-import { Tick } from '../../../components/tick/tick';
-import { DefaultCanvasConfig } from '../../../types/canvas.type';
-import { Positions } from '../../../types/position.enum';
-import { isNear } from '../../../utils/cursorNear/isNear';
-import { pickCustomAttributes } from '../../../utils/pickCustomAttributes/pickCustomAttributes';
-import { filterLineProps } from '../utils/filterLineProps/filterLineProps';
-/**
- * Renders the X-axis of a chart, including tick marks and labels.
- *
- * This component dynamically calculates the position of each tick mark based on the provided `tickValues` and adjusts their positions to fit within the specified `canvasWidth`, taking into account any `extraSpace` margins.
- *
- * The component renders a `<g>` SVG element containing a `<Line>` component for the axis line and multiple `<Tick>` components for the tick marks and labels, adjusted for the canvas size and extra space.
- */
-export const XAxis = ({ canvasHeight = DefaultCanvasConfig.height, canvasWidth = DefaultCanvasConfig.width, cursor = 0, extraSpace = {
-    bottom: 0,
-    left: 0,
-    right: 0,
-    top: 0,
-}, position = Positions.BOTTOM, showTickLines = false, tickLine, tickLineHover, tickText, tickValues = [], ...props }) => {
-    // Extract custom attributes for the g element
-    const customAttributes = pickCustomAttributes(props);
-    return (_jsxs("g", { ...customAttributes, children: [_jsx(Line, { ...filterLineProps(props) }), tickValues &&
-                tickValues.length > 0 &&
-                tickValues.map((tick, index) => {
-                    const overrideTickLine = isNear(cursor, tick.position) && tickLineHover;
-                    const tickLineProps = overrideTickLine ? { ...tickLine, ...tickLineHover } : tickLine;
-                    const rotate = tickText?.transform === 'rotate'
-                        ? `rotate(-30, ${tick.position}, ${tickText.y})`
-                        : undefined;
-                    return (_jsx(Tick, { showTickLines: showTickLines, tick: tick, tickLine: {
-                            ...tickLineProps,
-                            x1: tick.position,
-                            x2: tick.position,
-                        }, tickText: {
-                            ...tickText,
-                            transform: rotate,
-                            x: tick.position,
-                        } }, `${index.toString()}`));
-                })] }));
-};
+import { DefaultCanvasConfig } from "../../../types/canvas.type.js";
+import { Positions } from "../../../types/position.enum.js";
+import { pickCustomAttributes } from "../../../utils/pickCustomAttributes/pickCustomAttributes.js";
+import { Line } from "../../line/line.js";
+import { Tick } from "../../tick/tick.js";
+import { isNear } from "../../../utils/cursorNear/isNear.js";
+import { filterLineProps } from "../utils/filterLineProps/filterLineProps.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+const XAxis = ({ canvasHeight: i = DefaultCanvasConfig.height, canvasWidth: a = DefaultCanvasConfig.width, cursor: o = 0, extraSpace: s = {
+	bottom: 0,
+	left: 0,
+	right: 0,
+	top: 0
+}, position: c = Positions.BOTTOM, showTickLines: l = !1, tickLine: u, tickLineHover: d, tickText: f, tickValues: p = [], ...m }) => /* @__PURE__ */ jsxs("g", {
+	...pickCustomAttributes(m),
+	children: [/* @__PURE__ */ jsx(Line, { ...filterLineProps(m) }), p && p.length > 0 && p.map((e, t) => {
+		let n = isNear(o, e.position) && d ? {
+			...u,
+			...d
+		} : u, r = f?.transform === "rotate" ? `rotate(-30, ${e.position}, ${f.y})` : void 0;
+		return /* @__PURE__ */ jsx(Tick, {
+			showTickLines: l,
+			tick: e,
+			tickLine: {
+				...n,
+				x1: e.position,
+				x2: e.position
+			},
+			tickText: {
+				...f,
+				transform: r,
+				x: e.position
+			}
+		}, `${t.toString()}`);
+	})]
+});
+export { XAxis };

package/dist/esm/components/axisChart/yAxis/yAxis.js

@@ -1,34 +1,36 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Line } from '../../../components/line/line';
-import { Tick } from '../../../components/tick/tick';
-import { Positions } from '../../../types/position.enum';
-import { isNear } from '../../../utils/cursorNear/isNear';
-import { pickCustomAttributes } from '../../../utils/pickCustomAttributes/pickCustomAttributes';
-import { filterLineProps } from '../utils/filterLineProps/filterLineProps';
-/**
- * Renders a Y-axis for a chart, including tick marks and labels.
- * This component renders a `<g>` SVG element containing a `<Line>` component for the axis line and multiple `<Tick>` components for the tick marks and labels.
- */
-export const YAxis = ({ canvasWidth, cursor = 0, extraSpace = {
-    bottom: 0,
-    left: 0,
-    right: 0,
-    top: 0,
-}, position = Positions.LEFT, showTickLines = true, tickLine, tickLineHover, tickText, tickValues = [], ...props }) => {
-    // Extract custom attributes for the g element
-    const customAttributes = pickCustomAttributes(props);
-    return (_jsxs("g", { ...customAttributes, children: [_jsx(Line, { ...filterLineProps(props) }), tickValues &&
-                tickValues.length > 0 &&
-                tickValues.map((tick, index) => {
-                    const overrideTickLine = isNear(cursor, tick.position) && tickLineHover;
-                    const tickLineProps = overrideTickLine ? { ...tickLine, ...tickLineHover } : tickLine;
-                    const rotate = tickText?.transform === 'rotate'
-                        ? `rotate(-30, ${tickText.x}, ${tick.position})`
-                        : undefined;
-                    return (_jsx(Tick, { showTickLines: showTickLines, tick: tick, tickLine: {
-                            ...tickLineProps,
-                            y1: tick.position,
-                            y2: tick.position,
-                        }, tickText: { ...tickText, transform: rotate, y: tick.position } }, `${index.toString()}`));
-                })] }));
-};
+import { Positions } from "../../../types/position.enum.js";
+import { pickCustomAttributes } from "../../../utils/pickCustomAttributes/pickCustomAttributes.js";
+import { Line } from "../../line/line.js";
+import { Tick } from "../../tick/tick.js";
+import { isNear } from "../../../utils/cursorNear/isNear.js";
+import { filterLineProps } from "../utils/filterLineProps/filterLineProps.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+const YAxis = ({ canvasWidth: i, cursor: a = 0, extraSpace: o = {
+	bottom: 0,
+	left: 0,
+	right: 0,
+	top: 0
+}, position: s = Positions.LEFT, showTickLines: c = !0, tickLine: l, tickLineHover: u, tickText: d, tickValues: f = [], ...p }) => /* @__PURE__ */ jsxs("g", {
+	...pickCustomAttributes(p),
+	children: [/* @__PURE__ */ jsx(Line, { ...filterLineProps(p) }), f && f.length > 0 && f.map((e, t) => {
+		let n = isNear(a, e.position) && u ? {
+			...l,
+			...u
+		} : l, r = d?.transform === "rotate" ? `rotate(-30, ${d.x}, ${e.position})` : void 0;
+		return /* @__PURE__ */ jsx(Tick, {
+			showTickLines: c,
+			tick: e,
+			tickLine: {
+				...n,
+				y1: e.position,
+				y2: e.position
+			},
+			tickText: {
+				...d,
+				transform: r,
+				y: e.position
+			}
+		}, `${t.toString()}`);
+	})]
+});
+export { YAxis };

package/dist/esm/components/bar/bar.js

@@ -1,44 +1,58 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Path } from '../path/path';
-import { buildAriaLabel } from './utils/accessibility';
-import { buildD } from './utils/buildD';
-import { getSegments } from './utils/getSegments';
-export const Bar = ({ barConfig, currentBars, endRounded, extraSpacing = 0, focusConfig = {
-    stroke: '#0078D4',
-    strokeWidth: 0.2,
-}, onBlur, onFocus, order = 1, orientation, startRounded, tabIndex = 0, x1, x2, y1, y2, 
-// Allow to build a11y aria-labels with templates
-dataKey, xKey, yKey, xData, yData, }) => {
-    const { barWidth, singleConfig } = barConfig;
-    const segments = getSegments({ barConfig, orientation, x1, x2, y1, y2 });
-    return (_jsx("g", { children: singleConfig.map(({ color, 'aria-label': ariaLabel, ...singleProps }, index) => {
-            const [segmentX1, segmentX2] = orientation === 'HORIZONTAL' ? segments[index] : [x1, x2];
-            const [segmentY1, segmentY2] = orientation === 'VERTICAL' ? segments[index] : [y1, y2];
-            const d = buildD({
-                barWidth,
-                currentBars,
-                endRounded: index === singleConfig.length - 1 && endRounded ? endRounded : undefined,
-                extraSpacing,
-                order,
-                orientation,
-                startRounded: index === 0 && startRounded ? startRounded : undefined,
-                x1: segmentX1,
-                x2: segmentX2,
-                y1: segmentY1,
-                y2: segmentY2,
-            });
-            return (_jsx(Path, { "aria-label": buildAriaLabel({
-                    ariaLabel,
-                    dataKey,
-                    xKey,
-                    yKey,
-                    xData,
-                    yData,
-                    coverage: singleProps.coverage,
-                    index,
-                }), d: d, fill: color, focusConfig: focusConfig, hoverConfig: {
-                    stroke: 'transparent',
-                    strokeWidth: '0',
-                }, stroke: "transparent", tabIndex: tabIndex, onBlur: onBlur, onFocus: onFocus, ...singleProps }, `${index.toString()}`));
-        }) }));
+import { Path } from "../path/path2.js";
+import { buildAriaLabel } from "./utils/accessibility.js";
+import { buildD } from "./utils/buildD.js";
+import { getSegments } from "./utils/getSegments.js";
+import { jsx } from "react/jsx-runtime";
+const Bar = ({ barConfig: t, currentBars: n, endRounded: r, extraSpacing: i = 0, focusConfig: a = {
+	stroke: "#0078D4",
+	strokeWidth: .2
+}, onBlur: o, onFocus: s, order: c = 1, orientation: l, startRounded: u, tabIndex: d = 0, x1: f, x2: p, y1: m, y2: h, dataKey: g, xKey: _, yKey: v, xData: y, yData: b }) => {
+	let { barWidth: x, singleConfig: S } = t, C = getSegments({
+		barConfig: t,
+		orientation: l,
+		x1: f,
+		x2: p,
+		y1: m,
+		y2: h
+	});
+	return /* @__PURE__ */ jsx("g", { children: S.map(({ color: e, "aria-label": t, ...w }, T) => {
+		let [E, D] = l === "HORIZONTAL" ? C[T] : [f, p], [O, k] = l === "VERTICAL" ? C[T] : [m, h], A = buildD({
+			barWidth: x,
+			currentBars: n,
+			endRounded: T === S.length - 1 && r ? r : void 0,
+			extraSpacing: i,
+			order: c,
+			orientation: l,
+			startRounded: T === 0 && u ? u : void 0,
+			x1: E,
+			x2: D,
+			y1: O,
+			y2: k
+		});
+		return /* @__PURE__ */ jsx(Path, {
+			"aria-label": buildAriaLabel({
+				ariaLabel: t,
+				dataKey: g,
+				xKey: _,
+				yKey: v,
+				xData: y,
+				yData: b,
+				coverage: w.coverage,
+				index: T
+			}),
+			d: A,
+			fill: e,
+			focusConfig: a,
+			hoverConfig: {
+				stroke: "transparent",
+				strokeWidth: "0"
+			},
+			stroke: "transparent",
+			tabIndex: d,
+			onBlur: o,
+			onFocus: s,
+			...w
+		}, `${T.toString()}`);
+	}) });
 };
+export { Bar };

package/dist/esm/components/bar/bar.type.js

@@ -1,4 +1,5 @@
-export const BarOrientation = {
-    HORIZONTAL: 'HORIZONTAL',
-    VERTICAL: 'VERTICAL',
+const BarOrientation = {
+	HORIZONTAL: "HORIZONTAL",
+	VERTICAL: "VERTICAL"
 };
+export { BarOrientation };

package/dist/esm/components/bar/utils/accessibility.js

@@ -1,30 +1,14 @@
-// Template keys for accessibility labels
-export const BAR_TEMPLATE_KEYS = {
-    DATA_KEY: '{{dataKey}}',
-    X_KEY: '{{xKey}}',
-    Y_KEY: '{{yKey}}',
-    X_DATA: '{{xData}}',
-    Y_DATA: '{{yData}}',
-    COVERAGE: '{{coverage}}',
-    INDEX: '{{index}}',
-};
-export const buildAriaLabel = ({ ariaLabel, dataKey, xKey, yKey, xData, yData, coverage, index, }) => {
-    if (!ariaLabel) {
-        return undefined;
-    }
-    const dataKeyRegExp = new RegExp(BAR_TEMPLATE_KEYS.DATA_KEY, 'g');
-    const xKeyRegExp = new RegExp(BAR_TEMPLATE_KEYS.X_KEY, 'g');
-    const yKeyRegExp = new RegExp(BAR_TEMPLATE_KEYS.Y_KEY, 'g');
-    const xDataRegExp = new RegExp(BAR_TEMPLATE_KEYS.X_DATA, 'g');
-    const yDataRegExp = new RegExp(BAR_TEMPLATE_KEYS.Y_DATA, 'g');
-    const coverageRegExp = new RegExp(BAR_TEMPLATE_KEYS.COVERAGE, 'g');
-    const indexRegExp = new RegExp(BAR_TEMPLATE_KEYS.INDEX, 'g');
-    return ariaLabel
-        .replace(dataKeyRegExp, dataKey ?? '')
-        .replace(xKeyRegExp, xKey ?? '')
-        .replace(yKeyRegExp, yKey ?? '')
-        .replace(xDataRegExp, String(xData ?? ''))
-        .replace(yDataRegExp, String(yData ?? ''))
-        .replace(coverageRegExp, String(coverage))
-        .replace(indexRegExp, String(index));
+const BAR_TEMPLATE_KEYS = {
+	DATA_KEY: "{{dataKey}}",
+	X_KEY: "{{xKey}}",
+	Y_KEY: "{{yKey}}",
+	X_DATA: "{{xData}}",
+	Y_DATA: "{{yData}}",
+	COVERAGE: "{{coverage}}",
+	INDEX: "{{index}}"
+}, buildAriaLabel = ({ ariaLabel: e, dataKey: t, xKey: n, yKey: r, xData: i, yData: a, coverage: o, index: s }) => {
+	if (!e) return;
+	let c = new RegExp(BAR_TEMPLATE_KEYS.DATA_KEY, "g"), l = new RegExp(BAR_TEMPLATE_KEYS.X_KEY, "g"), u = new RegExp(BAR_TEMPLATE_KEYS.Y_KEY, "g"), d = new RegExp(BAR_TEMPLATE_KEYS.X_DATA, "g"), f = new RegExp(BAR_TEMPLATE_KEYS.Y_DATA, "g"), p = new RegExp(BAR_TEMPLATE_KEYS.COVERAGE, "g"), m = new RegExp(BAR_TEMPLATE_KEYS.INDEX, "g");
+	return e.replace(c, t ?? "").replace(l, n ?? "").replace(u, r ?? "").replace(d, String(i ?? "")).replace(f, String(a ?? "")).replace(p, String(o)).replace(m, String(s));
 };
+export { buildAriaLabel };

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

@@ -1,115 +1,23 @@
-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;
+import { BarOrientation } from "../bar.type.js";
+var locateFromPosition = ({ 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 === BarOrientation.HORIZONTAL ? u * -l + t : u * l : u > 0 && (d = a === BarOrientation.HORIZONTAL ? u * -l : u * l + t), d;
 };
-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 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 = locateFromPosition({
+		barWidth: n,
+		currentBars: r,
+		extraSpacing: a,
+		order: o,
+		orientation: s
+	});
+	if (s === 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} ${_}`;
 };
+export { buildD };

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

@@ -1,31 +1,13 @@
-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;
-    }, []);
+import { BarOrientation } from "../bar.type.js";
+var transformCoverage = (e, t) => e / 100 * t, ajustedGap = (e, t, n) => e ? t + n / 2 : t - n / 2;
+const getSegments = ({ barConfig: r, orientation: i, x1: a, x2: o, y1: s, y2: c }) => {
+	let { gap: l = 0, singleConfig: u } = r, d = i === 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 = transformCoverage(a, p - f), s = i === 0 ? f : ajustedGap(m.start, e[i - 1][1], l), c = i + 1 === u.length ? p : ajustedGap(m.end, s + o, l);
+		return e.push([s, c]), e;
+	}, []);
 };
+export { getSegments };

package/dist/esm/components/chartText/chartText.js

@@ -1,18 +1,7 @@
-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 }));
-};
+import { jsx } from "react/jsx-runtime";
+const ChartText = ({ children: e, className: t = "circle", ...n }) => /* @__PURE__ */ jsx("text", {
+	className: t,
+	...n,
+	children: e
+});
+export { ChartText };

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

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

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

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