pixelize-design-library 3.0.1-beta.1 → 3.1.0

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

@@ -1,123 +1,91 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
-var react_apexcharts_1 = __importDefault(require("react-apexcharts"));
-var react_2 = require("@chakra-ui/react");
-var chartColorsFromTheme_1 = require("../../../Theme/chartColorsFromTheme");
-var getValidLegendPosition = function (position) {
-    var validPositions = ["left", "right", "top", "bottom"];
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const chartColorsFromTheme_1 = require("../../../Theme/tokens/builders/chartColorsFromTheme");
+const chartBase_1 = require("../chartBase");
+const LazyReactApexChart_1 = __importDefault(require("../LazyReactApexChart"));
+const ApexChartFallback_1 = __importDefault(require("../ApexChartFallback"));
+const pieImageTexture_1 = require("./pieImageTexture");
+const getValidLegendPosition = (position) => {
+    const validPositions = ["left", "right", "top", "bottom"];
     if (validPositions.includes(position)) {
         return position;
     }
-    console.warn("Invalid legend position: ".concat(position, ". Defaulting to 'bottom'."));
+    console.warn(`Invalid legend position: ${position}. Defaulting to 'bottom'.`);
     return "bottom";
 };
-var ApexPieChart = function (_a) {
-    var _b;
-    var data = _a.data, labels = _a.labels, title = _a.title, _c = _a.height, height = _c === void 0 ? 400 : _c, _d = _a.width, width = _d === void 0 ? 500 : _d, donutColors = _a.donutColors, chartColor = _a.chartColor, _e = _a.titlePosition, titlePosition = _e === void 0 ? "center" : _e, titleStyle = _a.titleStyle, _f = _a.legendPosition, legendPosition = _f === void 0 ? "bottom" : _f, legendStyle = _a.legendStyle, _g = _a.variant, variant = _g === void 0 ? "pie" : _g;
-    var theme = (0, react_2.useTheme)();
-    var palette = theme.colors;
-    var mergedTitleStyle = (0, react_1.useMemo)(function () { return (0, chartColorsFromTheme_1.mergeChartTitleStyle)(palette, titleStyle); }, [palette, titleStyle]);
-    var mergedLegendStyle = (0, react_1.useMemo)(function () {
-        var defaults = {
-            colors: palette.text[900],
-            useSeriesColors: false,
-            horizontalGap: 10,
-            verticalGap: 5,
-            markerSize: 8,
-            markerOffsetX: -5,
-            markerOffsetY: 0,
+/** Pie/donut chart wrapper around react-apexcharts, themed via chartColorsFromTheme + chartBase. */
+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", images, }) => {
+    var _a;
+    const { colors: palette } = (0, useCustomTheme_1.useCustomTheme)();
+    const ink = (0, chartColorsFromTheme_1.chartInk)(palette);
+    const gap = surfaceColor !== null && surfaceColor !== void 0 ? surfaceColor : ink.surface;
+    const chartId = `apex-pie-${(0, react_1.useId)().replace(/:/g, "")}`;
+    const mergedTitleStyle = (0, react_1.useMemo)(() => (0, chartColorsFromTheme_1.mergeChartTitleStyle)(palette, titleStyle), [palette, titleStyle]);
+    const seriesColors = (0, react_1.useMemo)(() => { var _a; return (_a = chartColor !== null && chartColor !== void 0 ? chartColor : donutColors) !== null && _a !== void 0 ? _a : (0, chartColorsFromTheme_1.getDefaultSeriesColors)(palette); }, [chartColor, donutColors, palette]);
+    const labelInks = (0, react_1.useMemo)(() => seriesColors.map((c) => (0, chartColorsFromTheme_1.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 sliceCount = data.length;
+    const labelsOn = showDataLabels && placement !== "none";
+    const outside = placement === "outside";
+    const validLegendPosition = getValidLegendPosition(legendPosition);
+    const legend = (0, react_1.useMemo)(() => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+        const base = (0, chartBase_1.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,
+            },
         };
-        return __assign(__assign({}, defaults), legendStyle);
-    }, [palette, legendStyle]);
-    var seriesColors = (0, react_1.useMemo)(function () { var _a; return (_a = chartColor !== null && chartColor !== void 0 ? chartColor : donutColors) !== null && _a !== void 0 ? _a : (0, chartColorsFromTheme_1.getDefaultSeriesColors)(palette); }, [chartColor, donutColors, palette]);
-    var validLegendPosition = getValidLegendPosition(legendPosition);
-    var options = (0, react_1.useMemo)(function () {
-        var extraOptions = {};
+    }, [palette, validLegendPosition, legendStyle]);
+    const options = (0, react_1.useMemo)(() => {
+        var _a, _b, _c;
+        let extraOptions = {};
         switch (variant) {
             case "semi-donut":
                 extraOptions = {
-                    plotOptions: {
-                        pie: {
-                            startAngle: -90,
-                            endAngle: 90,
-                            offsetY: 10,
-                        },
-                    },
+                    plotOptions: { pie: { startAngle: -90, endAngle: 90, offsetY: 10 } },
                 };
                 break;
             case "monochrome-pie":
                 extraOptions = {
-                    theme: {
-                        monochrome: {
-                            enabled: true,
-                            shadeTo: "light",
-                            shadeIntensity: 0.65,
-                        },
-                    },
+                    theme: { monochrome: { enabled: true, shadeTo: "light", shadeIntensity: 0.65 } },
                 };
                 break;
             case "gradient-donut":
-                extraOptions = {
-                    fill: {
-                        type: "gradient",
-                    },
-                };
+                extraOptions = { fill: { type: "gradient" } };
                 break;
             case "donut-with-pattern":
                 extraOptions = {
                     fill: {
                         type: "pattern",
-                        pattern: {
-                            style: ["verticalLines", "squares", "horizontalLines", "circles"],
-                        },
+                        pattern: { style: ["verticalLines", "squares", "horizontalLines", "circles"] },
                     },
                 };
                 break;
@@ -126,10 +94,7 @@ var ApexPieChart = function (_a) {
                     fill: {
                         type: "image",
                         image: {
-                            src: [
-                                "https://i.imgur.com/UM3mrju.jpg",
-                                "https://i.imgur.com/NpPOqQq.jpg",
-                            ],
+                            src: images !== null && images !== void 0 ? images : Array.from({ length: sliceCount }, (_, i) => (0, pieImageTexture_1.pieImageTexture)(seriesColors[i % seriesColors.length], gap)),
                         },
                     },
                 };
@@ -139,12 +104,18 @@ var ApexPieChart = function (_a) {
                     plotOptions: {
                         pie: {
                             donut: {
+                                size: donutSize,
                                 labels: {
                                     show: true,
-                                    total: {
-                                        show: true,
-                                        label: "Total",
+                                    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" },
                                 },
                             },
                         },
@@ -152,48 +123,70 @@ var ApexPieChart = function (_a) {
                 };
                 break;
             case "pie":
-                extraOptions = {
-                    chart: { type: "pie" },
-                };
                 break;
             default:
                 break;
         }
-        return __assign({ chart: {
-                type: variant.includes("pie") ? "pie" : "donut",
-            }, labels: labels, colors: seriesColors, legend: {
-                position: validLegendPosition,
-                labels: {
-                    colors: mergedLegendStyle.colors,
-                    useSeriesColors: mergedLegendStyle.useSeriesColors,
+        const isDonut = !variant.includes("pie");
+        return {
+            labels,
+            colors: seriesColors,
+            stroke: { width: 2, colors: [gap] },
+            legend,
+            tooltip: { ...(0, chartBase_1.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,
                 },
-                markers: {
-                    size: mergedLegendStyle.markerSize,
-                    offsetX: mergedLegendStyle.markerOffsetX,
-                    offsetY: mergedLegendStyle.markerOffsetY,
-                    strokeWidth: 0,
-                    shape: "circle",
+                dropShadow: { enabled: false },
+            },
+            states: { hover: { filter: { type: "lighten", value: 0.08 } } },
+            ...extraOptions,
+            chart: (0, chartBase_1.baseChart)(palette, {
+                id: chartId,
+                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 : {}),
                 },
-                itemMargin: {
-                    horizontal: mergedLegendStyle.horizontalGap,
-                    vertical: mergedLegendStyle.verticalGap,
-                },
-            }, title: {
-                text: title,
-                align: titlePosition,
-                style: mergedTitleStyle,
-            }, dataLabels: { enabled: true } }, extraOptions);
+            },
+            theme: { mode: (0, chartColorsFromTheme_1.chartMode)(palette), ...extraOptions.theme },
+        };
     }, [
         variant,
+        chartId,
         labels,
         seriesColors,
-        validLegendPosition,
-        mergedLegendStyle,
+        legend,
         title,
         titlePosition,
         mergedTitleStyle,
+        palette,
+        gap,
+        minLabelPercent,
+        labelInks,
+        labelsOn,
+        outside,
+        donutSize,
+        totalLabel,
+        ink.muted,
+        ink.text,
+        images,
+        sliceCount,
     ]);
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement(react_apexcharts_1.default, { options: options, series: data, type: (_b = options.chart) === null || _b === void 0 ? void 0 : _b.type, height: height, width: width })));
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(ApexChartFallback_1.default, { height: height, width: width }), children: (0, jsx_runtime_1.jsx)(LazyReactApexChart_1.default, { options: options, series: data, type: (_a = options.chart) === null || _a === void 0 ? void 0 : _a.type, height: height, width: width }) }) }));
 };
 exports.default = ApexPieChart;

package/dist/Components/Apexcharts/ApexPieChart/ApexPieChartProps.d.ts

@@ -1,20 +1,47 @@
+/** Renders pie/donut slices from parallel `data`+`labels` arrays; not a substitute for ApexPolarCharts, whose wedges vary by radius, not arc share. */
 export type ApexPieChartProps = {
+    /** Visual preset. Defaults to "pie"; variants containing "pie" draw a full pie, the others a donut. */
     variant?: DonutPieVariant;
+    /** Slice values, one per label; data labels show each slice's share as a percent, tooltips the raw value. */
     data: number[];
+    /** Must be the same length and order as `data` — index i labels index i; a mismatched length misaligns slices silently, no warning. */
     labels: string[];
+    /** Heading above the chart, aligned by `titlePosition`. */
     title?: string;
-    height?: number;
-    width?: number;
+    /** Chart height as a px number or CSS string. Defaults to 400; under 240 it hides auto-placed data labels. */
+    height?: number | string;
+    /** Chart width as a px number or CSS string. Defaults to 500; also sizes the loading skeleton. */
+    width?: number | string;
+    /** Slice colours in order. Defaults to the theme's categorical palette; overridden by `chartColor`. */
     donutColors?: string[];
+    /** Wins over `donutColors` when both are set — donutColors is then silently ignored, not merged with it. */
     chartColor?: string[];
+    /** Horizontal alignment of the title. Defaults to "center". */
     titlePosition?: "left" | "center" | "right";
+    /** Title colour and font; defaults to 14px, weight 600 and the theme's text ink. */
     titleStyle?: {
         color?: string;
         fontSize?: string;
         fontWeight?: number | string;
         fontFamily?: string;
     };
+    /** Legend placement. Defaults to "bottom"; an invalid value logs a console warning and falls back to it. */
     legendPosition?: "left" | "right" | "top" | "bottom";
+    /** True alone doesn't guarantee labels — with the default labelPlacement="auto", a numeric height under 240 forces them off, no warning. */
+    showDataLabels?: boolean;
+    /** Slices below this render an empty-string label, not a hidden one — text silently vanishes on small slices even with showDataLabels true. */
+    minLabelPercent?: number;
+    /** Colour of the gap stroke between slices and of pattern backdrops. Defaults to the theme's main background. */
+    surfaceColor?: string;
+    /** Donut hole size as a CSS percent string. Defaults to "68%"; no effect on pie variants. */
+    donutSize?: string;
+    /** Caption under the centre total. Defaults to "Total"; shown only for `variant="update-donut"`. */
+    totalLabel?: string;
+    /** Where data labels sit. "auto" (default) means outside at height 240+ or non-numeric height, none below. */
+    labelPlacement?: "auto" | "inside" | "outside" | "none";
+    /** Only for `variant="pie-with-image"`: one image source per slice (the first repeats past the end). Omitted, each slice gets a themed striped texture in its own colour. */
+    images?: string[];
+    /** Legend overrides (label colours, gaps, marker size and offsets); unset fields keep the themed defaults. */
     legendStyle?: {
         colors?: string | string[];
         useSeriesColors?: boolean;
@@ -25,4 +52,5 @@ export type ApexPieChartProps = {
         markerOffsetY?: number;
     };
 };
+/** Visual preset for the pie/donut fill; "pie-with-image" fills slices from the `images` prop, or from inline striped textures when it is omitted. */
 export type DonutPieVariant = "pie" | "donut" | "update-donut" | "monochrome-pie" | "gradient-donut" | "semi-donut" | "donut-with-pattern" | "pie-with-image";

package/dist/Components/Apexcharts/ApexPieChart/pieImageTexture.d.ts

@@ -0,0 +1,2 @@
+/** A diagonal-stripe SVG data URI: `color` ground with translucent `stripe` bands, no network. */
+export declare function pieImageTexture(color: string, stripe: string): string;

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

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pieImageTexture = pieImageTexture;
+const SIZE = 400;
+/** A diagonal-stripe SVG data URI: `color` ground with translucent `stripe` bands, no network. */
+function pieImageTexture(color, stripe) {
+    const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${SIZE}" height="${SIZE}" viewBox="0 0 ${SIZE} ${SIZE}">` +
+        `<defs><pattern id="s" width="24" height="24" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">` +
+        `<rect width="10" height="24" fill="${stripe}" fill-opacity="0.28"/></pattern></defs>` +
+        `<rect width="${SIZE}" height="${SIZE}" fill="${color}"/>` +
+        `<rect width="${SIZE}" height="${SIZE}" fill="url(#s)"/></svg>`;
+    return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
+}

package/dist/Components/Apexcharts/ApexPolarCharts/ApexPolarCharts.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
 import { ApexPolarChartProps } from "./ApexPolarChartsProps";
-declare const ApexPolarChart: ({ data, labels, title, height, width, chartColors, titlePosition, titleStyle, legendStyle, variant, }: ApexPolarChartProps) => React.JSX.Element;
+/** Polar-area chart wrapper around react-apexcharts, themed via chartColorsFromTheme + chartBase. */
+declare const ApexPolarChart: ({ data, labels, title, height, width, chartColors, titlePosition, titleStyle, legendStyle, variant, }: ApexPolarChartProps) => import("react/jsx-runtime").JSX.Element;
 export default ApexPolarChart;

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

@@ -1,76 +1,37 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
-var react_apexcharts_1 = __importDefault(require("react-apexcharts"));
-var react_2 = require("@chakra-ui/react");
-var chartColorsFromTheme_1 = require("../../../Theme/chartColorsFromTheme");
-var ApexPolarChart = function (_a) {
-    var data = _a.data, labels = _a.labels, title = _a.title, _b = _a.height, height = _b === void 0 ? 400 : _b, _c = _a.width, width = _c === void 0 ? 500 : _c, chartColors = _a.chartColors, _d = _a.titlePosition, titlePosition = _d === void 0 ? "center" : _d, titleStyle = _a.titleStyle, legendStyle = _a.legendStyle, _e = _a.variant, variant = _e === void 0 ? "basic" : _e;
-    var theme = (0, react_2.useTheme)();
-    var palette = theme.colors;
-    var mergedTitleStyle = (0, react_1.useMemo)(function () { return (0, chartColorsFromTheme_1.mergeChartTitleStyle)(palette, titleStyle); }, [palette, titleStyle]);
-    var mergedLegendStyle = (0, react_1.useMemo)(function () {
-        var defaults = {
-            colors: palette.text[900],
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const chartColorsFromTheme_1 = require("../../../Theme/tokens/builders/chartColorsFromTheme");
+const chartBase_1 = require("../chartBase");
+const LazyReactApexChart_1 = __importDefault(require("../LazyReactApexChart"));
+const ApexChartFallback_1 = __importDefault(require("../ApexChartFallback"));
+/** Polar-area chart wrapper around react-apexcharts, themed via chartColorsFromTheme + chartBase. */
+const ApexPolarChart = ({ data, labels, title, height = 400, width = 500, chartColors, titlePosition = "center", titleStyle, legendStyle, variant = "basic", }) => {
+    const theme = (0, react_2.useTheme)();
+    const palette = theme.colors;
+    const ink = (0, chartColorsFromTheme_1.chartInk)(palette);
+    const chartId = `apex-polar-${(0, react_1.useId)().replace(/:/g, "")}`;
+    const mergedTitleStyle = (0, react_1.useMemo)(() => (0, chartColorsFromTheme_1.mergeChartTitleStyle)(palette, titleStyle), [palette, titleStyle]);
+    const mergedLegendStyle = (0, react_1.useMemo)(() => {
+        const defaults = {
+            colors: ink.text,
             position: "bottom",
             useSeriesColors: false,
         };
-        return __assign(__assign({}, defaults), legendStyle);
-    }, [palette, legendStyle]);
-    var resolvedChartColors = (0, react_1.useMemo)(function () { return chartColors !== null && chartColors !== void 0 ? chartColors : (0, chartColorsFromTheme_1.getDefaultSeriesColors)(palette); }, [chartColors, palette]);
-    var options = (0, react_1.useMemo)(function () {
-        var extraOptions = {};
+        return { ...defaults, ...legendStyle };
+    }, [legendStyle, ink.text]);
+    const resolvedChartColors = (0, react_1.useMemo)(() => chartColors !== null && chartColors !== void 0 ? chartColors : (0, chartColorsFromTheme_1.getDefaultSeriesColors)(palette), [chartColors, palette]);
+    const options = (0, react_1.useMemo)(() => {
+        let extraOptions = {};
         switch (variant) {
             case "basic":
                 extraOptions = {
-                    stroke: { colors: [palette.white] },
+                    stroke: { colors: [ink.surface], width: 2 },
                     fill: { opacity: 0.8 },
                 };
                 break;
@@ -83,35 +44,54 @@ var ApexPolarChart = function (_a) {
                             shadeIntensity: 0.6,
                         },
                     },
-                    stroke: { colors: [palette.white] },
+                    stroke: { colors: [ink.surface], width: 2 },
                     fill: { opacity: 0.8 },
                 };
                 break;
             default:
                 break;
         }
-        return __assign({ chart: { type: "polarArea" }, labels: labels, colors: resolvedChartColors, legend: {
-                position: mergedLegendStyle.position,
+        return {
+            chart: (0, chartBase_1.baseChart)(palette, { id: chartId, type: "polarArea" }),
+            labels,
+            colors: resolvedChartColors,
+            legend: {
+                ...(0, chartBase_1.baseLegend)(palette, mergedLegendStyle.position),
                 labels: {
                     colors: mergedLegendStyle.colors,
                     useSeriesColors: mergedLegendStyle.useSeriesColors,
                 },
-            }, title: {
+            },
+            title: {
                 text: title,
                 align: titlePosition,
                 style: mergedTitleStyle,
-            }, dataLabels: { enabled: true } }, extraOptions);
+            },
+            tooltip: (0, chartBase_1.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: (0, chartColorsFromTheme_1.chartMode)(palette), ...extraOptions.theme },
+        };
     }, [
         variant,
+        chartId,
         labels,
         resolvedChartColors,
         mergedLegendStyle,
         title,
         titlePosition,
         mergedTitleStyle,
-        palette.white,
+        palette,
+        ink.surface,
+        ink.grid,
     ]);
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement(react_apexcharts_1.default, { options: options, series: data, type: "polarArea", height: height, width: width })));
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(ApexChartFallback_1.default, { height: height, width: width }), children: (0, jsx_runtime_1.jsx)(LazyReactApexChart_1.default, { options: options, series: data, type: "polarArea", height: height, width: width }) }) }));
 };
 exports.default = ApexPolarChart;

package/dist/Components/Apexcharts/ApexPolarCharts/ApexPolarChartsProps.d.ts

@@ -1,22 +1,34 @@
+/** Renders polarArea wedges (radius varies by value, angles equal) from parallel `data`+`labels`; not a substitute for ApexPieChart's equal-radius arcs. */
 export type ApexPolarChartProps = {
+    /** Defaults to "basic"; "monochrome" shades every wedge from one hue. */
     variant?: PolarVariant;
+    /** Wedge values, one per label; a larger value extends its wedge farther from the centre. */
     data: number[];
+    /** Must be the same length and order as `data` — index i labels index i; a mismatched length misaligns wedges silently, no warning. */
     labels: string[];
+    /** Heading above the chart, aligned by `titlePosition`. */
     title?: string;
-    height?: number;
-    width?: number;
+    /** Chart height as a px number or CSS string. Defaults to 400; also sizes the loading skeleton. */
+    height?: number | string;
+    /** Chart width as a px number or CSS string. Defaults to 500; also sizes the loading skeleton. */
+    width?: number | string;
+    /** Wedge colours in order. Defaults to the theme's categorical palette. */
     chartColors?: string[];
+    /** Horizontal alignment of the title. Defaults to "center". */
     titlePosition?: "left" | "center" | "right";
+    /** Title colour and font; defaults to 14px, weight 600 and the theme's text ink. */
     titleStyle?: {
         color?: string;
         fontSize?: string;
         fontWeight?: number | string;
         fontFamily?: string;
     };
+    /** Legend overrides: label colours, series-coloured labels and position. Defaults to the text ink at the bottom. */
     legendStyle?: {
         colors?: string | string[];
         useSeriesColors?: boolean;
         position?: "top" | "right" | "bottom" | "left";
     };
 };
+/** "monochrome" recolors every wedge as shades of one hue instead of the palette's distinct series colors. */
 export type PolarVariant = "basic" | "monochrome";

package/dist/Components/Apexcharts/ApexRadialChart/ApexRadialChart.d.ts

@@ -0,0 +1,4 @@
+import { ApexRadialChartProps } from "./ApexRadialChartProps";
+/** Radial/gauge chart (gauge/multi/semi); `hollowSize` is silently overridden to a fixed `"52%"` whenever `variant="multi"`. */
+declare const ApexRadialChart: ({ variant, data, labels, title, titlePosition, height, width, colors, totalLabel, trackColor, hollowSize, }: ApexRadialChartProps) => import("react/jsx-runtime").JSX.Element;
+export default ApexRadialChart;