@kubit-ui-web/react-charts 0.1.0

package/dist/cjs/types/valueFormatter.type.d.ts

@@ -0,0 +1,7 @@
+/**
+ * A function type for formatting chart values.
+ * Takes a value of type T and returns a formatted string.
+ * @template T - The type of the input value to be formatted
+ */
+export type ValueFormatter<T = string> = (value: T) => string;
+//# sourceMappingURL=valueFormatter.type.d.ts.map

package/dist/cjs/types/valueFormatter.type.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"valueFormatter.type.d.ts","sourceRoot":"","sources":["../../../src/types/valueFormatter.type.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,MAAM,cAAc,CAAC,CAAC,GAAG,MAAM,IAAI,CAAC,KAAK,EAAE,CAAC,KAAK,MAAM,CAAC"}

package/dist/cjs/types/valueFormatter.type.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/utils/ajustedTextSpace/ajustedTextSpace.d.ts

@@ -0,0 +1,2 @@
+export declare const ajustedTextSpace: (textAnchor: "middle" | "start" | "end" | undefined, value: number, extra: number) => number;
+//# sourceMappingURL=ajustedTextSpace.d.ts.map

package/dist/cjs/utils/ajustedTextSpace/ajustedTextSpace.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ajustedTextSpace.d.ts","sourceRoot":"","sources":["../../../../src/utils/ajustedTextSpace/ajustedTextSpace.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB,GAC3B,YAAY,QAAQ,GAAG,OAAO,GAAG,KAAK,GAAG,SAAS,EAClD,OAAO,MAAM,EACb,OAAO,MAAM,KACZ,MAcF,CAAC"}

package/dist/cjs/utils/ajustedTextSpace/ajustedTextSpace.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ajustedTextSpace = void 0;
+const ajustedTextSpace = (textAnchor, value, extra) => {
+    let ajusted = 0;
+    switch (textAnchor) {
+        case 'middle':
+            ajusted = value / 2 + extra;
+            break;
+        case 'end':
+            ajusted = value + extra;
+            break;
+        default:
+            ajusted = 0;
+            break;
+    }
+    return ajusted;
+};
+exports.ajustedTextSpace = ajustedTextSpace;

package/dist/cjs/utils/buildErrors/buildErrors.d.ts

@@ -0,0 +1,6 @@
+export declare const BuildError: {
+    readonly INVALID_X_TICK: "INVALID_X_TICK";
+};
+export declare const ErrorsRecord: Record<(typeof BuildError)[keyof typeof BuildError], Error>;
+export declare const buildError: (error: (typeof BuildError)[keyof typeof BuildError]) => Error;
+//# sourceMappingURL=buildErrors.d.ts.map

package/dist/cjs/utils/buildErrors/buildErrors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"buildErrors.d.ts","sourceRoot":"","sources":["../../../../src/utils/buildErrors/buildErrors.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU;;CAEb,CAAC;AAIX,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,OAAO,UAAU,CAAC,EAAE,KAAK,CAEpF,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,OAAO,CAAC,OAAO,UAAU,EAAE,MAAM,OAAO,UAAU,CAAC,KAAG,KAC5D,CAAC"}

package/dist/cjs/utils/buildErrors/buildErrors.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildError = exports.ErrorsRecord = exports.BuildError = void 0;
+exports.BuildError = {
+    INVALID_X_TICK: 'INVALID_X_TICK',
+};
+const INVALID_X_TICK_ERROR = '[getXTicks] Invalid X tick values calculated';
+exports.ErrorsRecord = {
+    INVALID_X_TICK: new Error(INVALID_X_TICK_ERROR),
+};
+const buildError = (error) => exports.ErrorsRecord[error];
+exports.buildError = buildError;

package/dist/cjs/utils/buildTickValues/buildTickValues.d.ts

@@ -0,0 +1,28 @@
+interface TickNumeric {
+    max: number;
+    step: number;
+    min?: number;
+    breakAxis?: number;
+}
+/**
+ * Returns the divisor for a given number.
+ * The divisor is determined based on the number's divisibility by 2, 3, 4, or 5.
+ * If the number is not divisible by any of these, the divisor is set to 1.
+ *
+ * @param number - The number for which to determine the divisor.
+ * @returns The divisor for the given number.
+ */
+export declare const getDivisor: (number: number) => number;
+/**
+ * Builds the tick values for YAxis of a chart based on the provided data.
+ * This is a fallback function that is used just in case no tickValues are provided as prop
+ * Users should provide tickValues as prop to avoid using this basic fallback function
+ *
+ * @param data - An array of string values representing the data points.
+ * @returns An object containing the numeric fallback tickValues for the YAxis of the chart.
+ */
+export declare const buildTickValues: (data: string[]) => {
+    numeric: TickNumeric;
+};
+export {};
+//# sourceMappingURL=buildTickValues.d.ts.map

package/dist/cjs/utils/buildTickValues/buildTickValues.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"buildTickValues.d.ts","sourceRoot":"","sources":["../../../../src/utils/buildTickValues/buildTickValues.ts"],"names":[],"mappings":"AAAA,UAAU,WAAW;IACnB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,UAAU,GAAI,QAAQ,MAAM,KAAG,MAW3C,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,GAAI,MAAM,MAAM,EAAE,KAAG;IAAE,OAAO,EAAE,WAAW,CAAA;CAkBtE,CAAC"}

package/dist/cjs/utils/buildTickValues/buildTickValues.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildTickValues = exports.getDivisor = void 0;
+/**
+ * Returns the divisor for a given number.
+ * The divisor is determined based on the number's divisibility by 2, 3, 4, or 5.
+ * If the number is not divisible by any of these, the divisor is set to 1.
+ *
+ * @param number - The number for which to determine the divisor.
+ * @returns The divisor for the given number.
+ */
+const getDivisor = (number) => {
+    if (number % 3 === 0) {
+        return 3;
+    }
+    if (number % 4 === 0) {
+        return 4;
+    }
+    if (number % 5 === 0) {
+        return 5;
+    }
+    if (number % 2 === 0) {
+        return 2;
+    }
+    return 1;
+};
+exports.getDivisor = getDivisor;
+/**
+ * Builds the tick values for YAxis of a chart based on the provided data.
+ * This is a fallback function that is used just in case no tickValues are provided as prop
+ * Users should provide tickValues as prop to avoid using this basic fallback function
+ *
+ * @param data - An array of string values representing the data points.
+ * @returns An object containing the numeric fallback tickValues for the YAxis of the chart.
+ */
+const buildTickValues = (data) => {
+    if (data.length === 0) {
+        return { numeric: { max: 2, min: 0, step: 1 } };
+    }
+    const yMin = Math.min(...data.map(d => parseFloat(d)));
+    const yMax = Math.max(...data.map(d => parseFloat(d)));
+    const yRange = Math.abs(yMax - yMin);
+    const step = yRange / 2;
+    return {
+        numeric: {
+            max: yMax,
+            min: yMin,
+            step,
+        },
+    };
+};
+exports.buildTickValues = buildTickValues;

package/dist/cjs/utils/calculateFocusOutline/calculateFocusOutline.d.ts

@@ -0,0 +1,73 @@
+import { type FocusConfig } from '../../types/focusConfig.type';
+export interface FocusOutlineConfig {
+    /** Type of element for focus calculation */
+    elementType: 'circle' | 'rectangle';
+    /** Element width in pixels */
+    elementWidth: number;
+    /** Element height in pixels */
+    elementHeight: number;
+    /** Position of the element center */
+    elementPosition: {
+        x: number;
+        y: number;
+    };
+    /** Stroke width of the element */
+    elementStrokeWidth?: number;
+    /** Stroke width of the outer focus outline */
+    outlineStrokeWidth?: number;
+    /** Stroke width of the inner focus outline */
+    innerStrokeWidth?: number;
+    /** Gap between the outer and inner outlines */
+    gap?: number;
+}
+/**
+ * Dimensions for circle focus outlines
+ */
+export interface CircleFocusOutline {
+    type: 'circle';
+    outer: {
+        cx: number;
+        cy: number;
+        r: number;
+    };
+    inner: {
+        cx: number;
+        cy: number;
+        r: number;
+    };
+}
+/**
+ * Dimensions for rectangle focus outlines
+ */
+export interface RectangleFocusOutline {
+    type: 'rectangle';
+    outer: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    inner: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+}
+/**
+ * Union type for focus outline results
+ */
+export type FocusOutlineDimensions = CircleFocusOutline | RectangleFocusOutline;
+/**
+ * Calculates the dimensions of the focus outlines (outer and inner) for an SVG element.
+ * Supports elements with different width and height dimensions.
+ *
+ * @param config - Configuration for the calculation.
+ * @returns Object with the dimensions and positions of the outer and inner rectangles.
+ */
+export declare const calculateFocusOutline: ({ elementHeight, elementPosition, elementStrokeWidth, elementType, elementWidth, gap, innerStrokeWidth, outlineStrokeWidth, }: FocusOutlineConfig) => FocusOutlineDimensions;
+/**
+ * Helper function to get focus complete config
+ */
+export declare const getFocusConfig: (focusConfig?: FocusConfig) => Required<FocusConfig>;
+//# sourceMappingURL=calculateFocusOutline.d.ts.map

package/dist/cjs/utils/calculateFocusOutline/calculateFocusOutline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"calculateFocusOutline.d.ts","sourceRoot":"","sources":["../../../../src/utils/calculateFocusOutline/calculateFocusOutline.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAE3E,MAAM,WAAW,kBAAkB;IACjC,4CAA4C;IAC5C,WAAW,EAAE,QAAQ,GAAG,WAAW,CAAC;IACpC,8BAA8B;IAC9B,YAAY,EAAE,MAAM,CAAC;IACrB,+BAA+B;IAC/B,aAAa,EAAE,MAAM,CAAC;IACtB,qCAAqC;IACrC,eAAe,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1C,kCAAkC;IAClC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,8CAA8C;IAC9C,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,8CAA8C;IAC9C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,+CAA+C;IAC/C,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,EAAE;QACL,EAAE,EAAE,MAAM,CAAC;QACX,EAAE,EAAE,MAAM,CAAC;QACX,CAAC,EAAE,MAAM,CAAC;KACX,CAAC;IACF,KAAK,EAAE;QACL,EAAE,EAAE,MAAM,CAAC;QACX,EAAE,EAAE,MAAM,CAAC;QACX,CAAC,EAAE,MAAM,CAAC;KACX,CAAC;CACH;AAED;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,WAAW,CAAC;IAClB,KAAK,EAAE;QACL,CAAC,EAAE,MAAM,CAAC;QACV,CAAC,EAAE,MAAM,CAAC;QACV,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,KAAK,EAAE;QACL,CAAC,EAAE,MAAM,CAAC;QACV,CAAC,EAAE,MAAM,CAAC;QACV,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;CACH;AAED;;GAEG;AACH,MAAM,MAAM,sBAAsB,GAAG,kBAAkB,GAAG,qBAAqB,CAAC;AAEhF;;;;;;GAMG;AACH,eAAO,MAAM,qBAAqB,GAAI,+HASnC,kBAAkB,KAAG,sBAmEvB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,GAAI,cAAc,WAAW,KAAG,QAAQ,CAAC,WAAW,CAM7E,CAAC"}

package/dist/cjs/utils/calculateFocusOutline/calculateFocusOutline.js

@@ -0,0 +1,85 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFocusConfig = exports.calculateFocusOutline = void 0;
+const focusConfig_type_1 = require("../../types/focusConfig.type");
+/**
+ * Calculates the dimensions of the focus outlines (outer and inner) for an SVG element.
+ * Supports elements with different width and height dimensions.
+ *
+ * @param config - Configuration for the calculation.
+ * @returns Object with the dimensions and positions of the outer and inner rectangles.
+ */
+const calculateFocusOutline = ({ elementHeight, elementPosition, elementStrokeWidth = 0, elementType, elementWidth, gap = 0, innerStrokeWidth = 2, outlineStrokeWidth = 2, }) => {
+    if (elementType === 'circle') {
+        // For circles, work with radius
+        const elementRadius = elementWidth / 2;
+        // Calculate inner circle radius
+        // Position inner circle adjacent to the inner edge of the outer stroke (no gap)
+        // The element's stroke extends strokeWidth/2 outward from the element edge
+        // The same happens for the inner stroke
+        // This ensures the inner circle is positioned correctly without gaps
+        const innerRadius = elementRadius + elementStrokeWidth / 2 + innerStrokeWidth / 2 + gap;
+        // Calculate outer circle radius
+        // Position outer ring completely outside the element and the inner stroke
+        // The element's stroke extends strokeWidth/2 outward from the element edge
+        // The inner stroke is added to ensure the outer ring is clearly visible
+        // The outline stroke / 2 is added to ensure the outer ring is clearly visible
+        const outerRadius = innerRadius + innerStrokeWidth / 2 + outlineStrokeWidth / 2;
+        return {
+            inner: {
+                cx: elementPosition.x,
+                cy: elementPosition.y,
+                r: innerRadius,
+            },
+            outer: {
+                cx: elementPosition.x,
+                cy: elementPosition.y,
+                r: outerRadius,
+            },
+            type: 'circle',
+        };
+    }
+    // Calculate inner rectangle dimensions
+    // Here we have to take into account that height and width must grow in both sides
+    // to ensure the inner rectangle is positioned correctly without gaps
+    // that is why here we do not divide by 2
+    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
+    // We also take into account if some gap between outlines is wanted
+    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,
+        },
+        type: 'rectangle',
+    };
+};
+exports.calculateFocusOutline = calculateFocusOutline;
+/**
+ * Helper function to get focus complete config
+ */
+const getFocusConfig = (focusConfig) => ({
+    gap: focusConfig?.gap ?? focusConfig_type_1.FOCUS_DEFAULT.OUTLINES_GAP,
+    innerColor: focusConfig?.innerColor ?? focusConfig_type_1.FOCUS_DEFAULT.FOCUS_INNER,
+    innerStrokeWidth: focusConfig?.innerStrokeWidth ?? focusConfig_type_1.FOCUS_DEFAULT.INNER_FOCUS_STROKE_WIDTH,
+    outlineColor: focusConfig?.outlineColor ?? focusConfig_type_1.FOCUS_DEFAULT.FOCUS_COLOR,
+    outlineStrokeWidth: focusConfig?.outlineStrokeWidth ?? focusConfig_type_1.FOCUS_DEFAULT.OUTER_FOCUS_STROKE_WIDTH,
+});
+exports.getFocusConfig = getFocusConfig;

package/dist/cjs/utils/classNames/classNames.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Generates a string of class names based on the provided arguments.
+ * Each argument can be:
+ * - A string, which will be included directly in the output.
+ * - An array of strings, where each string will be included in the output.
+ * - An object with keys as class names and boolean values indicating whether the class should be included.
+ *
+ * @param args - A rest parameter that accepts an array of strings, arrays of strings, or objects with string keys and boolean values.
+ * @returns A string of class names, separated by spaces.
+ */
+export declare const classNames: (...args: (string | string[] | {
+    [key: string]: boolean;
+})[]) => string;
+//# sourceMappingURL=classNames.d.ts.map

package/dist/cjs/utils/classNames/classNames.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"classNames.d.ts","sourceRoot":"","sources":["../../../../src/utils/classNames/classNames.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,eAAO,MAAM,UAAU,GAAI,GAAG,MAAM,CAAC,MAAM,GAAG,MAAM,EAAE,GAAG;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CAAE,CAAC,EAAE,KAAG,MAaxF,CAAC"}

package/dist/cjs/utils/classNames/classNames.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.classNames = void 0;
+/**
+ * Generates a string of class names based on the provided arguments.
+ * Each argument can be:
+ * - A string, which will be included directly in the output.
+ * - An array of strings, where each string will be included in the output.
+ * - An object with keys as class names and boolean values indicating whether the class should be included.
+ *
+ * @param args - A rest parameter that accepts an array of strings, arrays of strings, or objects with string keys and boolean values.
+ * @returns A string of class names, separated by spaces.
+ */
+const classNames = (...args) => {
+    return args
+        .flatMap(arg => {
+        if (typeof arg === 'string') {
+            return arg;
+        }
+        if (Array.isArray(arg)) {
+            return arg;
+        }
+        return Object.entries(arg)
+            .filter(([, value]) => value)
+            .map(([key]) => key);
+    })
+        .join(' ');
+};
+exports.classNames = classNames;

package/dist/cjs/utils/cssGradientToSvg/cssGradientToSvg.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Converts a CSS linear gradient string into an SVG linear gradient.
+ *
+ * This function parses a CSS gradient string, extracts its angle and color stops,
+ * and then generates an SVG element with a corresponding linear gradient definition.
+ * The SVG element is hidden and can be used within an SVG image or as a reference
+ * for fill patterns. Currently, it supports gradients at angles of 90, 180, and 270 degrees.
+ *
+ * @param cssGradient - A string representing the CSS linear gradient. The string should
+ *                      start with the gradient angle (in degrees) followed by color stops,
+ *                      where each color stop is defined by its color and optional offset.
+ *                      Example: "180, red, blue 50%".
+ * @param id - An optional string that specifies the ID attribute for the generated
+ *             linearGradient element. This ID can be used to reference the gradient
+ *             from other SVG elements. Defaults to 'gradientePath'.
+ * @returns An SVG element containing a linearGradient definition based on the provided
+ *          CSS gradient string. If the angle is not supported, it returns an empty
+ *          React fragment.
+ */
+export declare const cssGradientToSVG: (cssGradient: string, id?: string) => JSX.Element;
+//# sourceMappingURL=cssGradientToSvg.d.ts.map

package/dist/cjs/utils/cssGradientToSvg/cssGradientToSvg.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cssGradientToSvg.d.ts","sourceRoot":"","sources":["../../../../src/utils/cssGradientToSvg/cssGradientToSvg.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,gBAAgB,GAAI,aAAa,MAAM,EAAE,WAAoB,KAAG,GAAG,CAAC,OA0ChF,CAAC"}

package/dist/cjs/utils/cssGradientToSvg/cssGradientToSvg.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cssGradientToSVG = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Converts a CSS linear gradient string into an SVG linear gradient.
+ *
+ * This function parses a CSS gradient string, extracts its angle and color stops,
+ * and then generates an SVG element with a corresponding linear gradient definition.
+ * The SVG element is hidden and can be used within an SVG image or as a reference
+ * for fill patterns. Currently, it supports gradients at angles of 90, 180, and 270 degrees.
+ *
+ * @param cssGradient - A string representing the CSS linear gradient. The string should
+ *                      start with the gradient angle (in degrees) followed by color stops,
+ *                      where each color stop is defined by its color and optional offset.
+ *                      Example: "180, red, blue 50%".
+ * @param id - An optional string that specifies the ID attribute for the generated
+ *             linearGradient element. This ID can be used to reference the gradient
+ *             from other SVG elements. Defaults to 'gradientePath'.
+ * @returns An SVG element containing a linearGradient definition based on the provided
+ *          CSS gradient string. If the angle is not supported, it returns an empty
+ *          React fragment.
+ */
+const cssGradientToSVG = (cssGradient, id = 'gradientePath') => {
+    const parts = cssGradient.split(',').map(part => part.trim());
+    const angle = parseInt(parts[0], 10); // Extract the angle
+    const stops = parts.slice(1).map(part => {
+        const [color, offset] = part.split(' ');
+        return { color, offset };
+    });
+    const y1 = '0%';
+    let x1 = '0%', x2 = '0%', y2 = '0%';
+    switch (angle) {
+        case 180:
+            y2 = '100%';
+            break;
+        case 90:
+            x2 = '100%';
+            break;
+        case 270:
+            x1 = '100%';
+            break;
+        default:
+            // eslint-disable-next-line no-console
+            console.error('Unsupported angle');
+            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}); // Return an empty fragment for unsupported angles
+    }
+    return ((0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)("linearGradient", { id: id, x1: x1, x2: x2, y1: y1, y2: y2, children: stops.map((stop, index) => ((0, jsx_runtime_1.jsx)("stop", { offset: stop.offset, stopColor: stop.color }, `${index}-${stop.offset}`.toString()))) }) }));
+};
+exports.cssGradientToSVG = cssGradientToSVG;

package/dist/cjs/utils/cssGradientToSvg/cssGradientToSvg.types.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Defines the structure for a gradient stop used in creating SVG gradients.
+ * A gradient stop specifies a color and its position within the gradient.
+ *
+ * @property {string} color - The CSS color value of the gradient stop. This can be any valid CSS color format (e.g., hex, rgb, rgba, hsl).
+ * @property {string} offset - The position of the color stop within the gradient, expressed as a percentage (e.g., '50%') or a length (e.g., '100px').
+ */
+export interface GradientStop {
+    color: string;
+    offset: string;
+}
+//# sourceMappingURL=cssGradientToSvg.types.d.ts.map

package/dist/cjs/utils/cssGradientToSvg/cssGradientToSvg.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cssGradientToSvg.types.d.ts","sourceRoot":"","sources":["../../../../src/utils/cssGradientToSvg/cssGradientToSvg.types.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB"}

package/dist/cjs/utils/cssGradientToSvg/cssGradientToSvg.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/utils/cursorNear/isNear.d.ts

@@ -0,0 +1,2 @@
+export declare const isNear: (cursor: number, position: number, extraArea?: number) => boolean;
+//# sourceMappingURL=isNear.d.ts.map

package/dist/cjs/utils/cursorNear/isNear.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"isNear.d.ts","sourceRoot":"","sources":["../../../../src/utils/cursorNear/isNear.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM,GAAI,QAAQ,MAAM,EAAE,UAAU,MAAM,EAAE,YAAW,MAAU,KAAG,OAEhF,CAAC"}

package/dist/cjs/utils/cursorNear/isNear.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isNear = void 0;
+const isNear = (cursor, position, extraArea = 1) => {
+    return cursor >= position - extraArea && cursor <= position + extraArea;
+};
+exports.isNear = isNear;

package/dist/cjs/utils/getAxisData/getAxisData.d.ts

@@ -0,0 +1,2 @@
+export declare const getAxisData: <T extends Record<string, unknown>>(data: T[], key: string) => unknown[];
+//# sourceMappingURL=getAxisData.d.ts.map

package/dist/cjs/utils/getAxisData/getAxisData.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getAxisData.d.ts","sourceRoot":"","sources":["../../../../src/utils/getAxisData/getAxisData.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC3D,MAAM,CAAC,EAAE,EACT,KAAK,MAAM,KACV,OAAO,EAET,CAAC"}

package/dist/cjs/utils/getAxisData/getAxisData.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getAxisData = void 0;
+const getAxisData = (data, key) => {
+    return data.map(dt => dt[key]);
+};
+exports.getAxisData = getAxisData;

package/dist/cjs/utils/getCanvasDimensions/getCanvasDimensions.d.ts

@@ -0,0 +1,22 @@
+interface GetCanvasDimensionsProps {
+    canvasHeight: string | number;
+    canvasWidth: string | number;
+    svgElement: SVGSVGElement;
+}
+interface GetCanvasDimensionsReturn {
+    parsedCanvasWidth: number;
+    parsedCanvasHeight: number;
+}
+/**
+ * Calculates the dimensions of an SVG element based on the provided width and height values.
+ * The width and height can be specified in pixels, percentages, or rem units.
+ *
+ * @param {GetCanvasDimensionsProps} props - The properties for calculating dimensions.
+ * @param {string | number} props.canvasHeight - The height of the canvas (can be a string or number).
+ * @param {string | number} props.canvasWidth - The width of the canvas (can be a string or number).
+ * @param {SVGSVGElement} props.svgElement - The SVG element to calculate dimensions for.
+ * @returns {GetCanvasDimensionsReturn} An object containing the calculated canva's width and height.
+ */
+export declare const getCanvasDimensions: ({ canvasHeight, canvasWidth, svgElement, }: GetCanvasDimensionsProps) => GetCanvasDimensionsReturn;
+export {};
+//# sourceMappingURL=getCanvasDimensions.d.ts.map

package/dist/cjs/utils/getCanvasDimensions/getCanvasDimensions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getCanvasDimensions.d.ts","sourceRoot":"","sources":["../../../../src/utils/getCanvasDimensions/getCanvasDimensions.ts"],"names":[],"mappings":"AAyFA,UAAU,wBAAwB;IAChC,YAAY,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B,WAAW,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,UAAU,EAAE,aAAa,CAAC;CAC3B;AAED,UAAU,yBAAyB;IACjC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,kBAAkB,EAAE,MAAM,CAAC;CAC5B;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,mBAAmB,GAAI,4CAIjC,wBAAwB,KAAG,yBAkB7B,CAAC"}

package/dist/cjs/utils/getCanvasDimensions/getCanvasDimensions.js

@@ -0,0 +1,101 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCanvasDimensions = void 0;
+const unit_enum_1 = require("../../types/unit.enum");
+/**
+ * A mapping of string representations of units to their corresponding `Unit` enum values.
+ * This is used to convert string-based unit identifiers into their respective `Unit` enum types.
+ *
+ * @example
+ * stringToUnit["%"] // Returns Unit.PERCENT
+ * stringToUnit["rem"] // Returns Unit.REM
+ */
+const stringToUnit = {
+    [unit_enum_1.Unit.PERCENTAGE]: unit_enum_1.Unit.PERCENTAGE,
+    [unit_enum_1.Unit.REM]: unit_enum_1.Unit.REM,
+};
+/**
+ * An enumeration representing the dimensions of an SVG element.
+ * This is used to specify whether the width or height dimension is being referenced.
+ *
+ * @enum {string}
+ * @property {string} WIDTH - Represents the width dimension ('WIDTH').
+ * @property {string} HEIGHT - Represents the height dimension ('HEIGHT').
+ */
+const Dimension = {
+    HEIGHT: 'HEIGHT',
+    WIDTH: 'WIDTH',
+};
+const UNIT_VALUE_REGEX = /^(\d+(\.\d+)?)(px|rem|%)?$/;
+const MATCH_VALUE_INDEX = 1;
+const MATCH_UNIT_INDEX = 3;
+/**
+ * Extracts the numeric value and unit from a regex match result.
+ *
+ * @param match - The regex match array containing the value and unit.
+ * @returns An object containing the numeric value and the unit as a string.
+ */
+const parseDimensionValue = (value) => {
+    if (typeof value === 'number') {
+        return { unit: undefined, value };
+    }
+    const match = value.match(UNIT_VALUE_REGEX);
+    if (!match) {
+        throw new Error(`Invalid string format: "${value}"`);
+    }
+    const parsedValue = parseFloat(match[MATCH_VALUE_INDEX]); // match for group (\d+(\.\d+)?)
+    const unit = match[MATCH_UNIT_INDEX]; // match for group (px|rem|%)
+    return { unit: stringToUnit[unit], value: parsedValue };
+};
+/**
+ * Calculates the percentage of a value based on the specified dimension (width or height) and the SVG element's dimensions.
+ *
+ * @param {number} value - The value to be converted to a percentage.
+ * @param {`${Dimension}`} dimension - The dimension type (width or height).
+ * @param {SVGSVGElement} svgElement - The SVG element to calculate dimensions for.
+ * @returns {number} The calculated percentage value.
+ */
+const calculatePercentage = (value, dimension, svgElement) => {
+    const svgContainer = svgElement.parentElement;
+    if (!svgContainer) {
+        return 0;
+    }
+    const containerDimension = dimension === Dimension.WIDTH ? svgContainer.clientWidth : svgContainer.clientHeight;
+    return (value / 100) * containerDimension;
+};
+/**
+ * Calculates the rem value based on the root font size.
+ *
+ * @param {number} value - The value in rem to be converted to pixels.
+ * @returns {number} The calculated pixel value.
+ */
+const calculateRem = (value) => {
+    const remValue = parseFloat(getComputedStyle(document.documentElement).fontSize);
+    return value * remValue;
+};
+/**
+ * Calculates the dimensions of an SVG element based on the provided width and height values.
+ * The width and height can be specified in pixels, percentages, or rem units.
+ *
+ * @param {GetCanvasDimensionsProps} props - The properties for calculating dimensions.
+ * @param {string | number} props.canvasHeight - The height of the canvas (can be a string or number).
+ * @param {string | number} props.canvasWidth - The width of the canvas (can be a string or number).
+ * @param {SVGSVGElement} props.svgElement - The SVG element to calculate dimensions for.
+ * @returns {GetCanvasDimensionsReturn} An object containing the calculated canva's width and height.
+ */
+const getCanvasDimensions = ({ canvasHeight, canvasWidth, svgElement, }) => {
+    const { unit: widthUnit, value: widthValue } = parseDimensionValue(canvasWidth);
+    const parsedCanvasWidth = widthUnit === unit_enum_1.Unit.PERCENTAGE
+        ? calculatePercentage(widthValue, Dimension.WIDTH, svgElement)
+        : widthUnit === unit_enum_1.Unit.REM
+            ? calculateRem(widthValue)
+            : widthValue;
+    const { unit: heightUnit, value: heightValue } = parseDimensionValue(canvasHeight);
+    const parsedCanvasHeight = heightUnit === unit_enum_1.Unit.PERCENTAGE
+        ? calculatePercentage(heightValue, Dimension.HEIGHT, svgElement)
+        : heightUnit === unit_enum_1.Unit.REM
+            ? calculateRem(heightValue)
+            : heightValue;
+    return { parsedCanvasHeight, parsedCanvasWidth };
+};
+exports.getCanvasDimensions = getCanvasDimensions;

package/dist/cjs/utils/getChildrenAttr/getChildrenAttr.d.ts

@@ -0,0 +1,10 @@
+import { type ReactNode } from 'react';
+interface GetChildrenAttrProps {
+    attrName: string;
+    originalValue: string;
+    children: ReactNode[];
+    updateValue: (v: string) => void;
+}
+export declare const getChildrenAttr: ({ attrName, children, originalValue, updateValue, }: GetChildrenAttrProps) => void;
+export {};
+//# sourceMappingURL=getChildrenAttr.d.ts.map

package/dist/cjs/utils/getChildrenAttr/getChildrenAttr.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getChildrenAttr.d.ts","sourceRoot":"","sources":["../../../../src/utils/getChildrenAttr/getChildrenAttr.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAkB,MAAM,OAAO,CAAC;AAEjE,UAAU,oBAAoB;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,SAAS,EAAE,CAAC;IACtB,WAAW,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC;AAED,eAAO,MAAM,eAAe,GAAI,qDAK7B,oBAAoB,KAAG,IAazB,CAAC"}