pixelize-design-library 2.4.1 → 2.4.2-beta.0

package/dist/esm/Components/Apexcharts/ApexAreaChart/ApexAreaChart.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import ReactApexChart from "react-apexcharts";
+import { useTheme } from "@chakra-ui/react";
+import { getDefaultSeriesColors, mergeChartTitleStyle, } from "../../../Theme/tokens/builders/chartColorsFromTheme.js";
+import { baseAxisLabels, baseChart, baseGrid, baseLegend, baseTooltip } from "../chartBase.js";
+const ApexAreaChart = ({ variant = "basic", data, series, labels, title, titlePosition = "left", height = 320, width = "100%", colors, showLegend = true, legendPosition = "bottom", yAxisFormatter, }) => {
+    const theme = useTheme();
+    const palette = theme.colors;
+    const seriesColors = useMemo(() => colors !== null && colors !== void 0 ? colors : getDefaultSeriesColors(palette), [colors, palette]);
+    const resolvedSeries = useMemo(() => series !== null && series !== void 0 ? series : [{ name: title !== null && title !== void 0 ? title : "Series 1", data: data !== null && data !== void 0 ? data : [] }], [series, data, title]);
+    const isSpark = variant === "sparkline";
+    const options = useMemo(() => ({
+        chart: baseChart(palette, {
+            type: "area",
+            stacked: variant === "stacked",
+            sparkline: { enabled: isSpark },
+        }),
+        colors: seriesColors,
+        stroke: { curve: "smooth", width: 2, lineCap: "round" },
+        fill: variant === "gradient"
+            ? {
+                type: "gradient",
+                gradient: { shadeIntensity: 1, opacityFrom: 0.45, opacityTo: 0.05, stops: [0, 90, 100] },
+            }
+            : { type: "solid", opacity: variant === "stacked" ? 0.85 : 0.2 },
+        dataLabels: { enabled: false },
+        markers: { size: 0, hover: { size: isSpark ? 0 : 5 } },
+        grid: isSpark ? { show: false } : baseGrid(palette),
+        xaxis: {
+            categories: labels,
+            labels: { show: !isSpark, style: baseAxisLabels(palette) },
+            axisBorder: { show: false },
+            axisTicks: { show: false },
+            tooltip: { enabled: false },
+        },
+        yaxis: {
+            show: !isSpark,
+            labels: { style: baseAxisLabels(palette), formatter: yAxisFormatter },
+        },
+        title: {
+            text: isSpark ? undefined : title,
+            align: titlePosition,
+            style: mergeChartTitleStyle(palette),
+        },
+        legend: {
+            ...baseLegend(palette, legendPosition),
+            show: showLegend && !isSpark && resolvedSeries.length > 1,
+        },
+        tooltip: baseTooltip(palette),
+    }), [
+        palette,
+        variant,
+        isSpark,
+        seriesColors,
+        labels,
+        title,
+        titlePosition,
+        showLegend,
+        legendPosition,
+        resolvedSeries.length,
+        yAxisFormatter,
+    ]);
+    return (_jsx("div", { children: _jsx(ReactApexChart, { options: options, series: resolvedSeries, type: "area", height: height, width: width }) }));
+};
+export default ApexAreaChart;

package/dist/esm/Components/Apexcharts/ApexAreaChart/ApexAreaChartProps.js

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

package/dist/esm/Components/Apexcharts/ApexBarChart/ApexBarChart.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import ReactApexChart from "react-apexcharts";
+import { useTheme } from "@chakra-ui/react";
+import { chartAxisLabelColor, getDefaultSeriesColors, mergeChartTitleStyle, } from "../../../Theme/tokens/builders/chartColorsFromTheme.js";
+import { baseAxisLabels, baseChart, baseGrid, baseLegend, baseTooltip } from "../chartBase.js";
+export default function ApexBarChart({ data, labels, title, titlePosition, height = 400, width = 500, barColor, xAxisStyle, yAxisStyle, titleStyle, horizontal = false, distributed = false, seriesName = "Data", series, stacked = false, showLegend, legendPosition = "bottom", }) {
+    const theme = useTheme();
+    const palette = theme.colors;
+    const seriesColors = useMemo(() => getDefaultSeriesColors(palette), [palette]);
+    const resolvedBarColors = useMemo(() => barColor !== null && barColor !== void 0 ? barColor : (distributed ? seriesColors : [seriesColors[1]]), [barColor, distributed, seriesColors]);
+    const axisColor = chartAxisLabelColor(palette);
+    const mergedXAxis = useMemo(() => { var _a; return ({ ...baseAxisLabels(palette), ...xAxisStyle, colors: (_a = xAxisStyle === null || xAxisStyle === void 0 ? void 0 : xAxisStyle.color) !== null && _a !== void 0 ? _a : axisColor }); }, [palette, axisColor, xAxisStyle]);
+    const mergedYAxis = useMemo(() => { var _a; return ({ ...baseAxisLabels(palette), ...yAxisStyle, colors: (_a = yAxisStyle === null || yAxisStyle === void 0 ? void 0 : yAxisStyle.color) !== null && _a !== void 0 ? _a : axisColor }); }, [palette, axisColor, yAxisStyle]);
+    const mergedTitleStyle = useMemo(() => mergeChartTitleStyle(palette, titleStyle), [palette, titleStyle]);
+    const options = useMemo(() => ({
+        chart: baseChart(palette, { type: "bar", stacked }),
+        plotOptions: {
+            bar: {
+                borderRadius: 4,
+                borderRadiusApplication: "end",
+                columnWidth: "55%",
+                barHeight: "60%",
+                horizontal,
+                distributed,
+            },
+        },
+        dataLabels: { enabled: false },
+        grid: baseGrid(palette, horizontal),
+        xaxis: {
+            categories: labels,
+            labels: { style: mergedXAxis },
+            axisBorder: { show: false },
+            axisTicks: { show: false },
+        },
+        yaxis: { labels: { style: mergedYAxis } },
+        title: { text: title, align: titlePosition, style: mergedTitleStyle },
+        legend: {
+            ...baseLegend(palette, legendPosition),
+            show: showLegend !== null && showLegend !== void 0 ? showLegend : (series ? series.length > 1 : false),
+        },
+        tooltip: baseTooltip(palette),
+        colors: resolvedBarColors,
+    }), [
+        palette,
+        labels,
+        mergedXAxis,
+        mergedYAxis,
+        title,
+        titlePosition,
+        mergedTitleStyle,
+        resolvedBarColors,
+        horizontal,
+        distributed,
+        stacked,
+        showLegend,
+        legendPosition,
+        series,
+    ]);
+    const resolvedSeries = series !== null && series !== void 0 ? series : [{ name: seriesName, data: data !== null && data !== void 0 ? data : [] }];
+    return (_jsx("div", { children: _jsx(ReactApexChart, { options: options, series: resolvedSeries, type: "bar", height: height, width: width }) }));
+}

package/dist/esm/Components/Apexcharts/ApexBarChart/ApexBarChartProps.js

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

package/dist/esm/Components/Apexcharts/ApexLineChart/ApexLineChart.js

@@ -0,0 +1,153 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import ReactApexChart from "react-apexcharts";
+import { useTheme } from "@chakra-ui/react";
+import ToolTip from "../../ToolTip/ToolTip.js";
+import { getDefaultSeriesColors, mergeChartTitleStyle, } from "../../../Theme/tokens/builders/chartColorsFromTheme.js";
+import { baseAxisLabels, baseChart, baseGrid, baseTooltip } from "../chartBase.js";
+const ApexLineChart = ({ data, labels, title, height, width, lineColors, titlePosition = "center", titleStyle, compact = false, toolbarBreakpointPct = 0.6, titleClampLines, showTitleEllipsis = true, showSeries = true, series: seriesNames, variant = "basic", }) => {
+    const theme = useTheme();
+    const palette = theme.colors;
+    const resolvedLineColors = lineColors !== null && lineColors !== void 0 ? lineColors : getDefaultSeriesColors(palette);
+    const resolvedTitleStyle = useMemo(() => mergeChartTitleStyle(palette, titleStyle), [palette, titleStyle]);
+    const initialName = Array.isArray(seriesNames) && seriesNames.length ? seriesNames[0] : "Series 1";
+    const [apexSeries, setApexSeries] = useState([
+        {
+            name: initialName,
+            data: Array.isArray(data) ? data : [],
+        },
+    ]);
+    useEffect(() => {
+        if (variant === "realtime") {
+            const interval = setInterval(() => {
+                setApexSeries((prev) => {
+                    const newData = [...prev[0].data];
+                    newData.push(Math.floor(Math.random() * 100) + 10);
+                    if (newData.length > 20)
+                        newData.shift();
+                    return [{ name: prev[0].name, data: newData }];
+                });
+            }, 1000);
+            return () => clearInterval(interval);
+        }
+    }, [variant]);
+    const wrapperRef = useRef(null);
+    const [containerW, setContainerW] = useState(0);
+    useEffect(() => {
+        if (!wrapperRef.current)
+            return;
+        const ro = new ResizeObserver((entries) => {
+            var _a, _b;
+            const w = ((_b = (_a = entries[0]) === null || _a === void 0 ? void 0 : _a.contentRect) === null || _b === void 0 ? void 0 : _b.width) || 0;
+            setContainerW(w);
+        });
+        ro.observe(wrapperRef.current);
+        return () => ro.disconnect();
+    }, []);
+    const parsePercent = (v) => {
+        const n = parseFloat(v.replace("%", ""));
+        return isNaN(n) ? 0 : n / 100;
+    };
+    const chartW = typeof width === "number"
+        ? width
+        : typeof width === "string" && width.trim().endsWith("%")
+            ? containerW * parsePercent(width.trim())
+            : containerW;
+    const hNum = typeof height === "number" ? height : 0;
+    const isSmall = compact || (chartW > 0 && chartW < 280) || (hNum > 0 && hNum < 220);
+    const computedFontSize = (resolvedTitleStyle === null || resolvedTitleStyle === void 0 ? void 0 : resolvedTitleStyle.fontSize) ||
+        (chartW
+            ? `${Math.max(12, Math.min(18, Math.floor(chartW / 18)))}px`
+            : "14px");
+    const clampLines = titleClampLines !== null && titleClampLines !== void 0 ? titleClampLines : (isSmall ? 2 : 1);
+    const titleRef = useRef(null);
+    const [isTruncated, setIsTruncated] = useState(false);
+    useEffect(() => {
+        const el = titleRef.current;
+        if (!el)
+            return;
+        if (clampLines > 1) {
+            setIsTruncated(el.scrollHeight > el.clientHeight);
+        }
+        else {
+            setIsTruncated(el.scrollWidth > el.clientWidth);
+        }
+    }, [title, chartW, width, clampLines]);
+    const ratio = containerW > 0
+        ? chartW / containerW
+        : typeof width === "string" && width.trim().endsWith("%")
+            ? parsePercent(width.trim())
+            : 1;
+    const showToolbar = !isSmall && ratio >= toolbarBreakpointPct;
+    const options = useMemo(() => ({
+        chart: baseChart(palette, {
+            type: "line",
+            animations: variant === "realtime"
+                ? { enabled: true, speed: 1000, dynamicAnimation: { speed: 1000 } }
+                : baseChart(palette).animations,
+            zoom: { enabled: !isSmall },
+            toolbar: { show: showToolbar },
+        }),
+        stroke: { curve: "smooth", width: 2, lineCap: "round" },
+        colors: resolvedLineColors,
+        xaxis: {
+            ...(labels
+                ? { categories: labels }
+                : { type: variant === "realtime" ? "numeric" : "category" }),
+            labels: { style: baseAxisLabels(palette) },
+            axisBorder: { show: false },
+            axisTicks: { show: false },
+        },
+        yaxis: { labels: { style: baseAxisLabels(palette) } },
+        title: {
+            text: isSmall ? undefined : title,
+            align: titlePosition !== null && titlePosition !== void 0 ? titlePosition : "center",
+            style: resolvedTitleStyle,
+        },
+        tooltip: {
+            ...baseTooltip(palette),
+            enabled: !!showSeries,
+            marker: { show: !!showSeries },
+        },
+        markers: { size: 0, hover: { size: showSeries ? 5 : 0 } },
+        dataLabels: { enabled: false },
+        grid: {
+            ...baseGrid(palette),
+            padding: { top: isSmall ? 6 : 16, right: 12, left: 8, bottom: 0 },
+        },
+    }), [
+        variant,
+        showToolbar,
+        resolvedLineColors,
+        labels,
+        isSmall,
+        title,
+        titlePosition,
+        resolvedTitleStyle,
+        showSeries,
+        palette,
+    ]);
+    return (_jsxs("div", { ref: wrapperRef, children: [title && isSmall && (_jsx(ToolTip, { label: title, placement: "top", hasArrow: true, fontSize: "0.75rem", isDisabled: !isTruncated, children: _jsx("div", { ref: titleRef, style: {
+                        textAlign: "left",
+                        color: resolvedTitleStyle === null || resolvedTitleStyle === void 0 ? void 0 : resolvedTitleStyle.color,
+                        fontSize: computedFontSize,
+                        fontWeight: resolvedTitleStyle === null || resolvedTitleStyle === void 0 ? void 0 : resolvedTitleStyle.fontWeight,
+                        fontFamily: resolvedTitleStyle === null || resolvedTitleStyle === void 0 ? void 0 : resolvedTitleStyle.fontFamily,
+                        marginBottom: 4,
+                        width: typeof width === "string"
+                            ? width
+                            : typeof width === "number"
+                                ? `${width}px`
+                                : "100%",
+                        whiteSpace: clampLines > 1 ? "normal" : "nowrap",
+                        overflow: "hidden",
+                        textOverflow: showTitleEllipsis && clampLines === 1 ? "ellipsis" : "clip",
+                        display: clampLines > 1 ? "-webkit-box" : undefined,
+                        WebkitLineClamp: clampLines > 1 ? clampLines : undefined,
+                        WebkitBoxOrient: clampLines > 1 ? "vertical" : undefined,
+                        wordBreak: clampLines > 1 ? "break-word" : undefined,
+                        lineHeight: clampLines > 1 ? "1.2em" : undefined,
+                        maxHeight: clampLines > 1 ? `${1.2 * clampLines}em` : undefined,
+                    }, children: title }) })), _jsx(ReactApexChart, { options: options, series: apexSeries, type: "line", height: height, width: width })] }));
+};
+export default ApexLineChart;

package/dist/esm/Components/Apexcharts/ApexLineChart/ApexLineChartProps.js

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

package/dist/esm/Components/Apexcharts/ApexPieChart/ApexPieChart.js

@@ -0,0 +1,182 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import ReactApexChart from "react-apexcharts";
+import { useTheme } from "@chakra-ui/react";
+import { chartInk, chartMode, getDefaultSeriesColors, labelOnSeries, mergeChartTitleStyle, } from "../../../Theme/tokens/builders/chartColorsFromTheme.js";
+import { baseChart, baseLegend, baseTooltip } from "../chartBase.js";
+const getValidLegendPosition = (position) => {
+    const validPositions = ["left", "right", "top", "bottom"];
+    if (validPositions.includes(position)) {
+        return position;
+    }
+    console.warn(`Invalid legend position: ${position}. Defaulting to 'bottom'.`);
+    return "bottom";
+};
+const ApexPieChart = ({ data, labels, title, height = 400, width = 500, donutColors, chartColor, titlePosition = "center", titleStyle, legendPosition = "bottom", legendStyle, variant = "pie", showDataLabels = true, minLabelPercent = 8, surfaceColor, donutSize = "68%", totalLabel = "Total", labelPlacement = "auto", }) => {
+    var _a;
+    const theme = useTheme();
+    const palette = theme.colors;
+    const ink = chartInk(palette);
+    const gap = surfaceColor !== null && surfaceColor !== void 0 ? surfaceColor : ink.surface;
+    const mergedTitleStyle = useMemo(() => mergeChartTitleStyle(palette, titleStyle), [palette, titleStyle]);
+    const seriesColors = useMemo(() => { var _a; return (_a = chartColor !== null && chartColor !== void 0 ? chartColor : donutColors) !== null && _a !== void 0 ? _a : getDefaultSeriesColors(palette); }, [chartColor, donutColors, palette]);
+    const labelInks = useMemo(() => seriesColors.map((c) => labelOnSeries(c, palette)), [seriesColors, palette]);
+    const numericHeight = typeof height === "number" ? height : Number.POSITIVE_INFINITY;
+    // A fixed outside-offset throws labels off a small canvas, and no single ink clears AA
+    // inside eight fills, so a small chart drops to legend plus tooltip instead.
+    const placement = labelPlacement === "auto"
+        ? numericHeight >= 240
+            ? "outside"
+            : "none"
+        : labelPlacement;
+    const labelsOn = showDataLabels && placement !== "none";
+    const outside = placement === "outside";
+    const validLegendPosition = getValidLegendPosition(legendPosition);
+    const legend = useMemo(() => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+        const base = baseLegend(palette, validLegendPosition);
+        if (!legendStyle)
+            return base;
+        return {
+            ...base,
+            labels: {
+                colors: (_a = legendStyle.colors) !== null && _a !== void 0 ? _a : (_b = base.labels) === null || _b === void 0 ? void 0 : _b.colors,
+                useSeriesColors: (_c = legendStyle.useSeriesColors) !== null && _c !== void 0 ? _c : (_d = base.labels) === null || _d === void 0 ? void 0 : _d.useSeriesColors,
+            },
+            markers: {
+                ...base.markers,
+                size: (_e = legendStyle.markerSize) !== null && _e !== void 0 ? _e : (_f = base.markers) === null || _f === void 0 ? void 0 : _f.size,
+                offsetX: (_g = legendStyle.markerOffsetX) !== null && _g !== void 0 ? _g : (_h = base.markers) === null || _h === void 0 ? void 0 : _h.offsetX,
+                offsetY: (_j = legendStyle.markerOffsetY) !== null && _j !== void 0 ? _j : (_k = base.markers) === null || _k === void 0 ? void 0 : _k.offsetY,
+            },
+            itemMargin: {
+                horizontal: (_l = legendStyle.horizontalGap) !== null && _l !== void 0 ? _l : (_m = base.itemMargin) === null || _m === void 0 ? void 0 : _m.horizontal,
+                vertical: (_o = legendStyle.verticalGap) !== null && _o !== void 0 ? _o : (_p = base.itemMargin) === null || _p === void 0 ? void 0 : _p.vertical,
+            },
+        };
+    }, [palette, validLegendPosition, legendStyle]);
+    const options = useMemo(() => {
+        var _a, _b, _c;
+        let extraOptions = {};
+        switch (variant) {
+            case "semi-donut":
+                extraOptions = {
+                    plotOptions: { pie: { startAngle: -90, endAngle: 90, offsetY: 10 } },
+                };
+                break;
+            case "monochrome-pie":
+                extraOptions = {
+                    theme: { monochrome: { enabled: true, shadeTo: "light", shadeIntensity: 0.65 } },
+                };
+                break;
+            case "gradient-donut":
+                extraOptions = { fill: { type: "gradient" } };
+                break;
+            case "donut-with-pattern":
+                extraOptions = {
+                    fill: {
+                        type: "pattern",
+                        pattern: { style: ["verticalLines", "squares", "horizontalLines", "circles"] },
+                    },
+                };
+                break;
+            case "pie-with-image":
+                extraOptions = {
+                    fill: {
+                        type: "image",
+                        image: {
+                            src: [
+                                "https://i.imgur.com/UM3mrju.jpg",
+                                "https://i.imgur.com/NpPOqQq.jpg",
+                            ],
+                        },
+                    },
+                };
+                break;
+            case "update-donut":
+                extraOptions = {
+                    plotOptions: {
+                        pie: {
+                            donut: {
+                                size: donutSize,
+                                labels: {
+                                    show: true,
+                                    name: { fontSize: "12px", fontFamily: "inherit", color: ink.muted, offsetY: -2 },
+                                    value: {
+                                        fontSize: "22px",
+                                        fontFamily: "inherit",
+                                        fontWeight: 600,
+                                        color: ink.text,
+                                        offsetY: 4,
+                                    },
+                                    total: { show: true, label: totalLabel, color: ink.muted, fontSize: "12px" },
+                                },
+                            },
+                        },
+                    },
+                };
+                break;
+            case "pie":
+                break;
+            default:
+                break;
+        }
+        const isDonut = !variant.includes("pie");
+        return {
+            labels,
+            colors: seriesColors,
+            stroke: { width: 2, colors: [gap] },
+            legend,
+            tooltip: { ...baseTooltip(palette), y: { formatter: (v) => `${v}` } },
+            title: { text: title, align: titlePosition, style: mergedTitleStyle },
+            dataLabels: {
+                enabled: labelsOn,
+                formatter: (val) => (val < minLabelPercent ? "" : `${Math.round(val)}%`),
+                style: {
+                    fontSize: "12px",
+                    fontFamily: "inherit",
+                    fontWeight: 600,
+                    colors: outside ? [ink.text] : labelInks,
+                },
+                dropShadow: { enabled: false },
+            },
+            states: { hover: { filter: { type: "lighten", value: 0.08 } } },
+            ...extraOptions,
+            chart: baseChart(palette, {
+                type: isDonut ? "donut" : "pie",
+                ...((_a = extraOptions.chart) !== null && _a !== void 0 ? _a : {}),
+            }),
+            plotOptions: {
+                ...extraOptions.plotOptions,
+                pie: {
+                    expandOnClick: false,
+                    customScale: outside && labelsOn ? 0.72 : 1,
+                    dataLabels: { offset: outside && labelsOn ? 42 : 0 },
+                    ...(isDonut ? { donut: { size: donutSize } } : {}),
+                    ...((_c = (_b = extraOptions.plotOptions) === null || _b === void 0 ? void 0 : _b.pie) !== null && _c !== void 0 ? _c : {}),
+                },
+            },
+            theme: { mode: chartMode(palette), ...extraOptions.theme },
+        };
+    }, [
+        variant,
+        labels,
+        seriesColors,
+        legend,
+        title,
+        titlePosition,
+        mergedTitleStyle,
+        palette,
+        gap,
+        minLabelPercent,
+        labelInks,
+        labelsOn,
+        outside,
+        donutSize,
+        totalLabel,
+        ink.muted,
+        ink.text,
+    ]);
+    return (_jsx("div", { children: _jsx(ReactApexChart, { options: options, series: data, type: (_a = options.chart) === null || _a === void 0 ? void 0 : _a.type, height: height, width: width }) }));
+};
+export default ApexPieChart;

package/dist/esm/Components/Apexcharts/ApexPieChart/ApexPieChartProps.js

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

package/dist/esm/Components/Apexcharts/ApexPolarCharts/ApexPolarCharts.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import ReactApexChart from "react-apexcharts";
+import { useTheme } from "@chakra-ui/react";
+import { chartInk, chartMode, getDefaultSeriesColors, mergeChartTitleStyle, } from "../../../Theme/tokens/builders/chartColorsFromTheme.js";
+import { baseChart, baseLegend, baseTooltip } from "../chartBase.js";
+const ApexPolarChart = ({ data, labels, title, height = 400, width = 500, chartColors, titlePosition = "center", titleStyle, legendStyle, variant = "basic", }) => {
+    const theme = useTheme();
+    const palette = theme.colors;
+    const ink = chartInk(palette);
+    const mergedTitleStyle = useMemo(() => mergeChartTitleStyle(palette, titleStyle), [palette, titleStyle]);
+    const mergedLegendStyle = useMemo(() => {
+        const defaults = {
+            colors: palette.text[900],
+            position: "bottom",
+            useSeriesColors: false,
+        };
+        return { ...defaults, ...legendStyle };
+    }, [palette, legendStyle]);
+    const resolvedChartColors = useMemo(() => chartColors !== null && chartColors !== void 0 ? chartColors : getDefaultSeriesColors(palette), [chartColors, palette]);
+    const options = useMemo(() => {
+        let extraOptions = {};
+        switch (variant) {
+            case "basic":
+                extraOptions = {
+                    stroke: { colors: [ink.surface], width: 2 },
+                    fill: { opacity: 0.8 },
+                };
+                break;
+            case "monochrome":
+                extraOptions = {
+                    theme: {
+                        monochrome: {
+                            enabled: true,
+                            shadeTo: "light",
+                            shadeIntensity: 0.6,
+                        },
+                    },
+                    stroke: { colors: [ink.surface], width: 2 },
+                    fill: { opacity: 0.8 },
+                };
+                break;
+            default:
+                break;
+        }
+        return {
+            chart: baseChart(palette, { type: "polarArea" }),
+            labels,
+            colors: resolvedChartColors,
+            legend: {
+                ...baseLegend(palette, mergedLegendStyle.position),
+                labels: {
+                    colors: mergedLegendStyle.colors,
+                    useSeriesColors: mergedLegendStyle.useSeriesColors,
+                },
+            },
+            title: {
+                text: title,
+                align: titlePosition,
+                style: mergedTitleStyle,
+            },
+            tooltip: baseTooltip(palette),
+            yaxis: { show: false },
+            plotOptions: {
+                polarArea: {
+                    rings: { strokeWidth: 1, strokeColor: ink.grid },
+                    spokes: { strokeWidth: 1, connectorColors: ink.grid },
+                },
+            },
+            dataLabels: { enabled: false },
+            ...extraOptions,
+            theme: { mode: chartMode(palette), ...extraOptions.theme },
+        };
+    }, [
+        variant,
+        labels,
+        resolvedChartColors,
+        mergedLegendStyle,
+        title,
+        titlePosition,
+        mergedTitleStyle,
+        palette,
+        ink.surface,
+        ink.grid,
+    ]);
+    return (_jsx("div", { children: _jsx(ReactApexChart, { options: options, series: data, type: "polarArea", height: height, width: width }) }));
+};
+export default ApexPolarChart;

package/dist/esm/Components/Apexcharts/ApexPolarCharts/ApexPolarChartsProps.js

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

package/dist/esm/Components/Apexcharts/ApexRadialChart/ApexRadialChart.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import ReactApexChart from "react-apexcharts";
+import { useTheme } from "@chakra-ui/react";
+import { chartInk, getDefaultSeriesColors, mergeChartTitleStyle, } from "../../../Theme/tokens/builders/chartColorsFromTheme.js";
+import { baseChart, baseLegend } from "../chartBase.js";
+const ApexRadialChart = ({ variant = "gauge", data, labels, title, titlePosition = "left", height = 320, width = "100%", colors, totalLabel = "Total", trackColor, hollowSize = "62%", }) => {
+    const theme = useTheme();
+    const palette = theme.colors;
+    const ink = chartInk(palette);
+    const seriesColors = useMemo(() => colors !== null && colors !== void 0 ? colors : getDefaultSeriesColors(palette), [colors, palette]);
+    const options = useMemo(() => ({
+        chart: baseChart(palette, { type: "radialBar" }),
+        colors: seriesColors,
+        labels: labels !== null && labels !== void 0 ? labels : [],
+        stroke: { lineCap: "round" },
+        plotOptions: {
+            radialBar: {
+                startAngle: variant === "semi" ? -90 : 0,
+                endAngle: variant === "semi" ? 90 : 360,
+                hollow: { size: variant === "multi" ? "52%" : hollowSize },
+                track: {
+                    background: trackColor !== null && trackColor !== void 0 ? trackColor : palette.backgroundColor.quaternary,
+                    strokeWidth: "100%",
+                    margin: variant === "multi" ? 6 : 0,
+                },
+                dataLabels: {
+                    name: { fontSize: "12px", fontFamily: "inherit", color: ink.muted, offsetY: variant === "semi" ? -8 : -4 },
+                    value: {
+                        fontSize: "22px",
+                        fontFamily: "inherit",
+                        fontWeight: 600,
+                        color: ink.text,
+                        offsetY: variant === "semi" ? -2 : 4,
+                        formatter: (val) => `${Math.round(val)}%`,
+                    },
+                    total: {
+                        show: variant === "multi",
+                        label: totalLabel,
+                        color: ink.muted,
+                        fontSize: "12px",
+                        formatter: (w) => {
+                            const totals = w.globals.seriesTotals;
+                            if (!totals.length)
+                                return "0%";
+                            return `${Math.round(totals.reduce((a, b) => a + b, 0) / totals.length)}%`;
+                        },
+                    },
+                },
+            },
+        },
+        title: { text: title, align: titlePosition, style: mergeChartTitleStyle(palette) },
+        legend: { ...baseLegend(palette, "bottom"), show: variant === "multi" },
+    }), [palette, variant, seriesColors, labels, title, titlePosition, totalLabel, trackColor, hollowSize, ink.muted, ink.text]);
+    return (_jsx("div", { children: _jsx(ReactApexChart, { options: options, series: data, type: "radialBar", height: height, width: width }) }));
+};
+export default ApexRadialChart;

package/dist/esm/Components/Apexcharts/ApexRadialChart/ApexRadialChartProps.js

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