@kubit-ui-web/react-charts 0.1.0

package/dist/esm/components/axisChart/yAxis/yAxis.types.d.ts

@@ -0,0 +1,37 @@
+import type { ChartTextProps } from '../../../components/chartText/chartText.types';
+import type { LineProps } from '../../../components/line/line.types';
+import type { TickData } from '../../../components/tick/tick.types';
+import type { Positions } from '../../../types/position.enum';
+/**
+ * Props for the `YAxis` component, extending `LineProps` to include additional properties specific to rendering a Y-axis.
+ *
+ * @param position - Optional. Specifies the position of the Y-axis on the canvas. Can be one of the `Positions` ('left', 'right', 'top', 'bottom').
+ * @param tickValues - Optional. An array of `TickData` objects representing the data points to be used for ticks on the Y-axis.
+ * @param showTickLines - Optional. A boolean indicating whether tick lines should be displayed.
+ * @param tickLine - Optional. `LineProps` for customizing the appearance of tick lines.
+ * @param tickText - Optional. Properties for customizing the appearance of tick text, excluding `y`, `x`, `dx`, and `dy` which are managed by the component. Includes optional `left` and `right` properties to adjust the text position.
+ * @param canvasWidth - Optional. The width of the canvas on which the Y-axis is rendered. Used for calculating positions.
+ * @param canvasHeight - Optional. The height of the canvas on which the Y-axis is rendered. Used for calculating positions.
+ * @param extraSpace - Optional. An object specifying additional space around the Y-axis. Can include `left`, `right`, `top`, and `bottom` properties.
+ */
+export interface YAxisProps extends LineProps {
+    position?: (typeof Positions)[keyof typeof Positions];
+    tickValues?: TickData[];
+    showTickLines?: boolean;
+    tickLine?: LineProps;
+    tickLineHover?: LineProps;
+    tickText?: Omit<ChartTextProps, 'dx' | 'dy'> & {
+        left?: number;
+        right?: number;
+    };
+    canvasWidth?: number;
+    canvasHeight?: number;
+    extraSpace?: {
+        left?: number;
+        right?: number;
+        top?: number;
+        bottom?: number;
+    };
+    cursor?: number;
+}
+//# sourceMappingURL=yAxis.types.d.ts.map

package/dist/esm/components/axisChart/yAxis/yAxis.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"yAxis.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/axisChart/yAxis/yAxis.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AAC7E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAC9D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAC7D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAEvD;;;;;;;;;;;GAWG;AACH,MAAM,WAAW,UAAW,SAAQ,SAAS;IAC3C,QAAQ,CAAC,EAAE,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,OAAO,SAAS,CAAC,CAAC;IACtD,UAAU,CAAC,EAAE,QAAQ,EAAE,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,IAAI,CAAC,cAAc,EAAE,IAAI,GAAG,IAAI,CAAC,GAAG;QAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,UAAU,CAAC,EAAE;QACX,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;IAEF,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}

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

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

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

@@ -0,0 +1,4 @@
+import type { FC } from 'react';
+import type { BarProps } from './bar.type';
+export declare const Bar: FC<BarProps>;
+//# sourceMappingURL=bar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"bar.d.ts","sourceRoot":"","sources":["../../../../src/components/bar/bar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAgB,MAAM,OAAO,CAAC;AAG9C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAI3C,eAAO,MAAM,GAAG,EAAE,EAAE,CAAC,QAAQ,CAkD5B,CAAC"}

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

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Path } from '../path/path';
+import { buildD } from './utils/buildD';
+import { getSegments } from './utils/getSegments';
+export const Bar = ({ barConfig, currentBars, endRounded, extraSpacing = 0, order = 1, orientation, startRounded, x1, x2, y1, y2, }) => {
+    const { barWidth, singleConfig } = barConfig;
+    const segments = getSegments({ barConfig, orientation, x1, x2, y1, y2 });
+    return (_jsx("g", { children: singleConfig.map((single, 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, { d: d, fill: single.color, hoverConfig: {
+                    stroke: 'transparent',
+                    strokeWidth: '0',
+                }, stroke: "transparent", tabIndex: 0, title: single.title }, `${single.title}-${index.toString()}`));
+        }) }));
+};

package/dist/esm/components/bar/bar.type.d.ts

@@ -0,0 +1,32 @@
+export declare const BarOrientation: {
+    readonly HORIZONTAL: "HORIZONTAL";
+    readonly VERTICAL: "VERTICAL";
+};
+export interface BarChartColor {
+    color: string;
+    coverage: number;
+    title?: string;
+}
+export interface BarChartStyles {
+    gap?: number;
+    barWidth: number;
+    singleConfig: BarChartColor[];
+}
+export interface BarProps {
+    orientation: (typeof BarOrientation)[keyof typeof BarOrientation];
+    barConfig: BarChartStyles;
+    order?: number;
+    currentBars: number;
+    extraSpacing?: number;
+    parentIndex?: number;
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+    startRounded?: number;
+    endRounded?: number;
+}
+export interface BarChartSegmentProps extends Omit<BarProps, 'colorPalette'> {
+    color: string;
+}
+//# sourceMappingURL=bar.type.d.ts.map

package/dist/esm/components/bar/bar.type.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bar.type.d.ts","sourceRoot":"","sources":["../../../../src/components/bar/bar.type.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,cAAc;;;CAGjB,CAAC;AAEX,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,cAAc;IAC7B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,aAAa,EAAE,CAAC;CAC/B;AAED,MAAM,WAAW,QAAQ;IACvB,WAAW,EAAE,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,OAAO,cAAc,CAAC,CAAC;IAClE,SAAS,EAAE,cAAc,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,QAAQ,EAAE,cAAc,CAAC;IAC1E,KAAK,EAAE,MAAM,CAAC;CACf"}

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

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

package/dist/esm/components/bar/fragments/barChartSegment.d.ts

@@ -0,0 +1,3 @@
+import type { ReactElement } from 'react';
+export declare const BarChartSegment: () => ReactElement;
+//# sourceMappingURL=barChartSegment.d.ts.map

package/dist/esm/components/bar/fragments/barChartSegment.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"barChartSegment.d.ts","sourceRoot":"","sources":["../../../../../src/components/bar/fragments/barChartSegment.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,eAAO,MAAM,eAAe,QAAO,YAMlC,CAAC"}

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

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const BarChartSegment = () => {
+    return (_jsx("path", { children: _jsx("title", {}) }));
+};

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

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

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

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

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

@@ -0,0 +1,2 @@
+export * from './bar';
+export * from './bar.type';

package/dist/esm/components/bar/utils/buildD.d.ts

@@ -0,0 +1,9 @@
+import { type BarProps } from '../bar.type';
+type GetSegmentProps = Omit<BarProps, 'barConfig' | 'order' | 'extraSpacing'> & {
+    barWidth: number;
+    order: number;
+    extraSpacing: number;
+};
+export declare const buildD: ({ barWidth, currentBars, endRounded, extraSpacing, order, orientation, startRounded, x1, x2, y1, y2, }: GetSegmentProps) => string;
+export {};
+//# sourceMappingURL=buildD.d.ts.map

package/dist/esm/components/bar/utils/buildD.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"buildD.d.ts","sourceRoot":"","sources":["../../../../../src/components/bar/utils/buildD.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,KAAK,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE5D,KAAK,eAAe,GAAG,IAAI,CAAC,QAAQ,EAAE,WAAW,GAAG,OAAO,GAAG,cAAc,CAAC,GAAG;IAC9E,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AA8CF,eAAO,MAAM,MAAM,GAAI,wGAYpB,eAAe,KAAG,MA0EpB,CAAC"}

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

@@ -0,0 +1,115 @@
+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}`;
+};

package/dist/esm/components/bar/utils/getSegments.d.ts

@@ -0,0 +1,6 @@
+import { type BarProps } from '../bar.type';
+type GetSegmentProps = Omit<BarProps, 'barWidth' | 'currentBars' | 'position'>;
+type GetSegmentReturn = [number, number][];
+export declare const getSegments: ({ barConfig, orientation, x1, x2, y1, y2, }: GetSegmentProps) => GetSegmentReturn;
+export {};
+//# sourceMappingURL=getSegments.d.ts.map

package/dist/esm/components/bar/utils/getSegments.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getSegments.d.ts","sourceRoot":"","sources":["../../../../../src/components/bar/utils/getSegments.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,KAAK,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE5D,KAAK,eAAe,GAAG,IAAI,CAAC,QAAQ,EAAE,UAAU,GAAG,aAAa,GAAG,UAAU,CAAC,CAAC;AAC/E,KAAK,gBAAgB,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,CAAC;AAS3C,eAAO,MAAM,WAAW,GAAI,6CAOzB,eAAe,KAAG,gBAyBpB,CAAC"}

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

@@ -0,0 +1,31 @@
+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;
+    }, []);
+};

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

@@ -0,0 +1,18 @@
+import type { FC } from 'react';
+import type { ChartTextProps } from './chartText.types';
+/**
+ * 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 declare const ChartText: FC<ChartTextProps>;
+//# sourceMappingURL=chartText.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chartText.d.ts","sourceRoot":"","sources":["../../../../src/components/chartText/chartText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAExD;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAWxC,CAAC"}

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

@@ -0,0 +1,18 @@
+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', tabIndex = -1, ...props }) => {
+    return (_jsx("text", { className: className, tabIndex: tabIndex, ...props, children: children }));
+};

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

@@ -0,0 +1,57 @@
+/**
+ * Defines the properties for rendering text within SVG elements in React components.
+ *
+ * This interface encompasses a wide range of properties that control the appearance and positioning of text in SVG.
+ * It includes standard SVG attributes for positioning (x, y, dx, dy), text formatting (fontFamily, fontSize, fontStyle,
+ * fontWeight), text decoration (textDecoration), and more advanced SVG features like textLength, lengthAdjust, and
+ * writingMode. Additionally, it supports React-specific properties like style, className, and children, allowing for
+ * further customization and integration within React applications.
+ */
+export interface ChartTextProps {
+    x?: number | string;
+    y?: number | string;
+    dx?: number | string;
+    dy?: number | string;
+    textLength?: number | string;
+    lengthAdjust?: 'spacing' | 'spacingAndGlyphs';
+    rotate?: number;
+    textAnchor?: 'start' | 'middle' | 'end';
+    startOffset?: number;
+    direction?: 'ltr' | 'rtl';
+    kerning?: number;
+    letterSpacing?: number;
+    wordSpacing?: number;
+    textDecoration?: 'none' | 'underline' | 'overline' | 'line-through' | 'blink';
+    unicodeBidi?: 'normal' | 'embed' | 'bidi-override';
+    writingMode?: 'lr-tb' | 'rl-tb' | 'tb-rl' | 'lr' | 'rl' | 'tb';
+    fill?: string;
+    fillOpacity?: number;
+    stroke?: string;
+    strokeWidth?: number;
+    strokeOpacity?: number;
+    fontFamily?: string;
+    /**
+     * Font size in SVG user units (unitless number).
+     *
+     * Must be a number to ensure proper scaling with the SVG viewBox coordinate system.
+     * Using string units like 'px' or 'em' would break responsive chart scaling and
+     * cause layout calculation errors in text measurement utilities.
+     *
+     * @example
+     * // ✅ Correct: Scales with viewBox
+     * fontSize: 2
+     *
+     * // ❌ Incorrect: Fixed size, doesn't scale
+     * fontSize: "12px"
+     */
+    fontSize?: number;
+    fontStyle?: 'normal' | 'italic' | 'oblique';
+    fontWeight?: 'normal' | 'bold' | 'bolder' | 'lighter' | number;
+    opacity?: number;
+    transform?: string;
+    style?: React.CSSProperties;
+    className?: string;
+    tabIndex?: number;
+    children?: React.ReactNode;
+}
+//# sourceMappingURL=chartText.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chartText.types.d.ts","sourceRoot":"","sources":["../../../../src/components/chartText/chartText.types.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,MAAM,WAAW,cAAc;IAC7B,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,YAAY,CAAC,EAAE,SAAS,GAAG,kBAAkB,CAAC;IAC9C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,UAAU,GAAG,cAAc,GAAG,OAAO,CAAC;IAC9E,WAAW,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,eAAe,CAAC;IACnD,WAAW,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC/D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;;;;;;;;;OAaG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC;IAC5C,UAAU,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;IAC/D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B"}

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

@@ -0,0 +1,10 @@
+/**
+ * Defines the properties for rendering text within SVG elements in React components.
+ *
+ * This interface encompasses a wide range of properties that control the appearance and positioning of text in SVG.
+ * It includes standard SVG attributes for positioning (x, y, dx, dy), text formatting (fontFamily, fontSize, fontStyle,
+ * fontWeight), text decoration (textDecoration), and more advanced SVG features like textLength, lengthAdjust, and
+ * writingMode. Additionally, it supports React-specific properties like style, className, and children, allowing for
+ * further customization and integration within React applications.
+ */
+export {};

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

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

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

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

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

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

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

@@ -0,0 +1,4 @@
+import type { FC } from 'react';
+import type { ForeignObjectProps } from './foreignObject.types';
+export declare const ForeignObject: FC<ForeignObjectProps>;
+//# sourceMappingURL=foreignObject.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"foreignObject.d.ts","sourceRoot":"","sources":["../../../../src/components/foreignObject/foreignObject.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAEhE,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAahD,CAAC"}

package/dist/esm/components/foreignObject/foreignObject.js

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

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

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+export interface ForeignObjectProps {
+    children?: ReactNode;
+    width?: string | number;
+    height?: string | number;
+    x?: string | number;
+    y?: string | number;
+    dataTestId?: string;
+}
+//# sourceMappingURL=foreignObject.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"foreignObject.types.d.ts","sourceRoot":"","sources":["../../../../src/components/foreignObject/foreignObject.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB"}

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,11 @@
+export * from './axisChart';
+export * from './bar';
+export * from './chartText';
+export * from './foreignObject';
+export * from './line';
+export * from './node';
+export * from './path';
+export * from './svgContainer';
+export * from './tick';
+export * from './zoomArea';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/esm/components/index.js

@@ -0,0 +1,10 @@
+export * from './axisChart';
+export * from './bar';
+export * from './chartText';
+export * from './foreignObject';
+export * from './line';
+export * from './node';
+export * from './path';
+export * from './svgContainer';
+export * from './tick';
+export * from './zoomArea';

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

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

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

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

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

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

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

@@ -0,0 +1,9 @@
+import type { FC } from 'react';
+import type { LineProps } from './line.types';
+/**
+ * `Line` component that renders an SVG line element with customizable properties.
+ *
+ * @returns A `line` SVG element with the specified properties and attributes.
+ */
+export declare const Line: FC<LineProps>;
+//# sourceMappingURL=line.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"line.d.ts","sourceRoot":"","sources":["../../../../src/components/line/line.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C;;;;GAIG;AACH,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CAgB9B,CAAC"}

package/dist/esm/components/line/line.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * `Line` component that renders an SVG line element with customizable properties.
+ *
+ * @returns A `line` SVG element with the specified properties and attributes.
+ */
+export const Line = ({ ariaLabel = '', className = 'line', dataTestId, tabIndex = -1, ...props }) => {
+    return (_jsx("line", { ...props, "aria-label": ariaLabel, className: className, "data-testid": dataTestId, tabIndex: tabIndex }));
+};

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

@@ -0,0 +1,43 @@
+/**
+ * Props for the `Line` component, defining the visual appearance and behavior of a line element.
+ *
+ * @param x1 - The x-coordinate of the start point of the line. Can be a number or a string representing a percentage.
+ * @param y1 - The y-coordinate of the start point of the line. Can be a number or a string representing a percentage.
+ * @param x2 - The x-coordinate of the end point of the line. Can be a number or a string representing a percentage.
+ * @param y2 - The y-coordinate of the end point of the line. Can be a number or a string representing a percentage.
+ * @param stroke - The color of the line. Can be any valid CSS color string.
+ * @param strokeWidth - The thickness of the line. Can be a number or a string representing a percentage.
+ * @param strokeOpacity - The opacity of the line's stroke. A number between 0 (completely transparent) and 1 (completely opaque).
+ * @param strokeLinecap - The shape to be used at the end of the line. Can be 'butt', 'round', or 'square'.
+ * @param strokeLinejoin - The shape to be used at the corners of the line. Can be 'miter', 'round', or 'bevel'.
+ * @param strokeDasharray - The pattern of dashes and gaps used to paint the stroke of the line.
+ * @param strokeDashoffset - The distance into the dash pattern to start the dash.
+ * @param opacity - The overall opacity of the line. A number between 0 (completely transparent) and 1 (completely opaque).
+ * @param transform - A string representing the transformation to apply to the line.
+ * @param style - CSS properties to apply to the line.
+ * @param className - The CSS class name to apply to the line.
+ * @param tabIndex - The tab index of the line, indicating if it is focusable.
+ * @param ariaLabel - The accessible label for the line, used by screen readers.
+ * @param dataTestId - An identifier used for testing purposes.
+ */
+export interface LineProps {
+    x1?: number | string;
+    y1?: number | string;
+    x2?: number | string;
+    y2?: number | string;
+    stroke?: string;
+    strokeWidth?: number | string;
+    strokeOpacity?: number;
+    strokeLinecap?: 'butt' | 'round' | 'square';
+    strokeLinejoin?: 'miter' | 'round' | 'bevel';
+    strokeDasharray?: string;
+    strokeDashoffset?: number;
+    opacity?: number;
+    transform?: string;
+    style?: React.CSSProperties;
+    className?: string;
+    tabIndex?: number;
+    ariaLabel?: string;
+    dataTestId?: string;
+}
+//# sourceMappingURL=line.types.d.ts.map