pixelize-design-library 2.4.2-beta.9 → 3.0.0

package/dist/Components/AlertDialog/AlertDialogProps.d.ts

@@ -1,19 +1,44 @@
 import { AlertDialogProps, AlertProps } from "@chakra-ui/react";
 import { ReactElement } from "react";
-export type AlertDialogsProps = Pick<AlertDialogProps, "isOpen" | "onClose" | "leastDestructiveRef"> & Pick<AlertProps, "addRole" | "colorScheme" | "size" | "status" | "variant"> & {
+/** Props accepted for backward compatibility but never read by AlertDialog. */
+export type AlertDialogDeadProps = {
+    /** @deprecated Never read — the dialog already has role="alertdialog". */
+    addRole?: AlertProps["addRole"];
+    /** @deprecated Never read — use `tone`. */
+    colorScheme?: AlertProps["colorScheme"];
+    /** @deprecated Never read — the dialog always uses Chakra's default size. */
+    size?: AlertProps["size"];
+    /** @deprecated Never read — use `tone`. */
+    status?: AlertProps["status"];
+    /** @deprecated Never read — use `tone`. */
+    variant?: AlertProps["variant"];
+    /** @deprecated Never read — React strips `key` before props arrive. */
+    key?: string | number;
+};
+/** Fixed Cancel/Confirm dialog; `tone="danger"` fills Confirm red, otherwise it is primary. */
+export type AlertDialogsProps = Pick<AlertDialogProps, "isOpen" | "onClose" | "leastDestructiveRef" | "closeOnOverlayClick" | "closeOnEsc"> & AlertDialogDeadProps & {
     title: string;
+    /** Rendered inside the dialog body. */
     content: ReactElement;
     isCentered?: boolean;
+    /** Defaults to "Confirm". */
     confirmButtonText?: string;
+    /** Defaults to "Cancel"; Cancel calls `onClose` and holds `leastDestructiveRef`. */
     cancelButtonText?: string;
+    /** Shows a spinner on the Confirm button. */
     isConfirmLoading?: boolean;
+    /** Fires on Confirm click; does not close the dialog — call `onClose` yourself. */
     onConfirm: () => void;
+    /** Defaults to "default" (primary Confirm); "danger" makes Confirm red. */
+    tone?: "default" | "danger";
+    /** `sx` for the dialog content box. */
     ContentStyle?: React.CSSProperties;
     headerStyle?: React.CSSProperties;
     bodyStyle?: React.CSSProperties;
     footerStyle?: React.CSSProperties;
     closeButtonStyle?: React.CSSProperties;
+    /** Raw style escape hatch for the Cancel button. */
     button1Style?: React.CSSProperties;
+    /** Raw style escape hatch for Confirm; prefer `tone` for a danger action. */
     button2Style?: React.CSSProperties;
-    key?: string | number;
 };

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

@@ -1,3 +1,4 @@
 import { ApexAreaChartProps } from "./ApexAreaChartProps";
+/** Filled line chart (basic/stacked/gradient/sparkline); unlike `ApexLineChart`, `data`/`series` are read fresh via `useMemo` every render, not frozen at mount. */
 declare const ApexAreaChart: ({ variant, data, series, labels, title, titlePosition, height, width, colors, showLegend, legendPosition, yAxisFormatter, }: ApexAreaChartProps) => import("react/jsx-runtime").JSX.Element;
 export default ApexAreaChart;

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

@@ -5,17 +5,21 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const react_apexcharts_1 = __importDefault(require("react-apexcharts"));
 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"));
+/** Filled line chart (basic/stacked/gradient/sparkline); unlike `ApexLineChart`, `data`/`series` are read fresh via `useMemo` every render, not frozen at mount. */
 const ApexAreaChart = ({ variant = "basic", data, series, labels, title, titlePosition = "left", height = 320, width = "100%", colors, showLegend = true, legendPosition = "bottom", yAxisFormatter, }) => {
     const { colors: palette } = (0, useCustomTheme_1.useCustomTheme)();
+    const chartId = `apex-area-${(0, react_1.useId)().replace(/:/g, "")}`;
     const seriesColors = (0, react_1.useMemo)(() => colors !== null && colors !== void 0 ? colors : (0, chartColorsFromTheme_1.getDefaultSeriesColors)(palette), [colors, palette]);
     const resolvedSeries = (0, react_1.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 = (0, react_1.useMemo)(() => ({
         chart: (0, chartBase_1.baseChart)(palette, {
+            id: chartId,
             type: "area",
             stacked: variant === "stacked",
             sparkline: { enabled: isSpark },
@@ -54,6 +58,7 @@ const ApexAreaChart = ({ variant = "basic", data, series, labels, title, titlePo
         tooltip: (0, chartBase_1.baseTooltip)(palette),
     }), [
         palette,
+        chartId,
         variant,
         isSpark,
         seriesColors,
@@ -65,6 +70,6 @@ const ApexAreaChart = ({ variant = "basic", data, series, labels, title, titlePo
         resolvedSeries.length,
         yAxisFormatter,
     ]);
-    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_apexcharts_1.default, { options: options, series: resolvedSeries, type: "area", 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: resolvedSeries, type: "area", height: height, width: width }) }) }));
 };
 exports.default = ApexAreaChart;

package/dist/Components/Apexcharts/ApexAreaChart/ApexAreaChartProps.d.ts

@@ -1,19 +1,34 @@
+/** "sparkline" strips axes, legend and title for a compact inline trend; the others only change fill/stacking. */
 export type AreaChartVariant = "basic" | "stacked" | "gradient" | "sparkline";
+/** One named line in a multi-series area chart; `name` becomes its legend label. */
 export type ApexAreaSeries = {
     name: string;
     data: number[];
 };
+/** Props for the area chart; unlike ApexLineChart, `data`/`series` are re-read every render, not frozen at mount. */
 export type ApexAreaChartProps = {
+    /** Defaults to "basic"; "sparkline" also hides the title, axes and legend. */
     variant?: AreaChartVariant;
+    /** Ignored entirely once `series` is also passed — `series` always wins, no merge. */
     data?: number[];
+    /** Multiple named lines; wins over `data`. The legend appears only when there is more than one series. */
     series?: ApexAreaSeries[];
+    /** X-axis category labels, one per data point; hidden in the "sparkline" variant. */
     labels?: string[];
+    /** Heading above the chart and the name of the series built from `data` (default "Series 1"); not drawn in "sparkline". */
     title?: string;
+    /** Horizontal alignment of the title. Defaults to "left". */
     titlePosition?: "left" | "center" | "right";
+    /** Chart height as a px number or CSS string. Defaults to 320; also sizes the loading skeleton. */
     height?: number | string;
+    /** Chart width as a px number or CSS string. Defaults to "100%"; also sizes the loading skeleton. */
     width?: number | string;
+    /** Series colours in order. Defaults to the theme's categorical series palette. */
     colors?: string[];
+    /** Defaults to true, but the legend only shows with more than one series and never in "sparkline". */
     showLegend?: boolean;
+    /** Legend placement. Defaults to "bottom". */
     legendPosition?: "top" | "right" | "bottom" | "left";
+    /** Formats y-axis tick labels from the numeric value; no effect in "sparkline", where the axis is hidden. */
     yAxisFormatter?: (value: number) => string;
 };

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

@@ -1,2 +1,3 @@
 import { ApexBarChartProps } from "./ApexBarChartProps";
+/** Bar chart wrapper around react-apexcharts (horizontal/stacked/distributed via props), themed via chartColorsFromTheme + chartBase. */
 export default function ApexBarChart({ data, labels, title, titlePosition, height, width, barColor, xAxisStyle, yAxisStyle, titleStyle, horizontal, distributed, seriesName, series, stacked, showLegend, legendPosition, }: ApexBarChartProps): import("react/jsx-runtime").JSX.Element;

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

@@ -6,13 +6,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = ApexBarChart;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const react_apexcharts_1 = __importDefault(require("react-apexcharts"));
 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"));
+/** Bar chart wrapper around react-apexcharts (horizontal/stacked/distributed via props), themed via chartColorsFromTheme + chartBase. */
 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 = (0, react_2.useTheme)();
     const palette = theme.colors;
+    const chartId = `apex-bar-${(0, react_1.useId)().replace(/:/g, "")}`;
     const seriesColors = (0, react_1.useMemo)(() => (0, chartColorsFromTheme_1.getDefaultSeriesColors)(palette), [palette]);
     const resolvedBarColors = (0, react_1.useMemo)(() => barColor !== null && barColor !== void 0 ? barColor : (distributed ? seriesColors : [seriesColors[1]]), [barColor, distributed, seriesColors]);
     const axisColor = (0, chartColorsFromTheme_1.chartAxisLabelColor)(palette);
@@ -20,7 +23,7 @@ function ApexBarChart({ data, labels, title, titlePosition, height = 400, width
     const mergedYAxis = (0, react_1.useMemo)(() => { var _a; return ({ ...(0, chartBase_1.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 = (0, react_1.useMemo)(() => (0, chartColorsFromTheme_1.mergeChartTitleStyle)(palette, titleStyle), [palette, titleStyle]);
     const options = (0, react_1.useMemo)(() => ({
-        chart: (0, chartBase_1.baseChart)(palette, { type: "bar", stacked }),
+        chart: (0, chartBase_1.baseChart)(palette, { id: chartId, type: "bar", stacked }),
         plotOptions: {
             bar: {
                 borderRadius: 4,
@@ -49,6 +52,7 @@ function ApexBarChart({ data, labels, title, titlePosition, height = 400, width
         colors: resolvedBarColors,
     }), [
         palette,
+        chartId,
         labels,
         mergedXAxis,
         mergedYAxis,
@@ -63,6 +67,6 @@ function ApexBarChart({ data, labels, title, titlePosition, height = 400, width
         legendPosition,
         series,
     ]);
-    const resolvedSeries = series !== null && series !== void 0 ? series : [{ name: seriesName, data: data !== null && data !== void 0 ? data : [] }];
-    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_apexcharts_1.default, { options: options, series: resolvedSeries, type: "bar", height: height, width: width }) }));
+    const resolvedSeries = (0, react_1.useMemo)(() => series !== null && series !== void 0 ? series : [{ name: seriesName, data: data !== null && data !== void 0 ? data : [] }], [series, seriesName, data]);
+    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: resolvedSeries, type: "bar", height: height, width: width }) }) }));
 }

package/dist/Components/Apexcharts/ApexBarChart/ApexBarChartProps.d.ts

@@ -1,29 +1,51 @@
+/** Renders grouped/stacked/distributed bars from `series`, or one series from `data`+`seriesName`; not a substitute for ApexLineChart on trend-over-time data. */
 export type ApexBarChartProps = {
+    /** Ignored whenever `series` is also passed — series wins outright and data is silently dropped, not merged. */
     data?: number[];
+    /** Category labels, one per bar or bar group; they run along the vertical axis when `horizontal` is true. */
     labels: string[];
+    /** Heading above the chart, aligned by `titlePosition`. */
     title?: string;
+    /** No default here (renders ApexCharts' native left-align) — pie, line and polar charts default it to "center", area and radial to "left". */
     titlePosition?: "left" | "center" | "right";
+    /** 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;
+    /** Array paints per-bar only when `distributed` is true; otherwise only barColor[0] applies and the rest are silently unused. */
     barColor?: string[];
+    /** Font and colour of x-axis labels; colour falls back to the theme's axis ink. */
     xAxisStyle?: StyleProps;
+    /** Font and colour of y-axis labels; colour falls back to the theme's axis ink. */
     yAxisStyle?: StyleProps;
+    /** Font and colour of the title; unset fields default to 14px, weight 600 and the theme's text ink. */
     titleStyle?: StyleProps;
+    /** Draws bars left to right instead of upward. Defaults to false. */
     horizontal?: boolean;
+    /** Gives each bar its own colour from `barColor` or the theme palette. Defaults to false (one colour). */
     distributed?: boolean;
+    /** Name of the single series built from `data`. Defaults to "Data"; ignored when `series` is passed. */
     seriesName?: string;
+    /** Multi-series bars — {name, data}[], not data's flat number[]; passing this alongside `data` makes data a no-op. */
     series?: {
         name: string;
         data: number[];
     }[];
+    /** Stacks `series` on top of each other instead of grouping them side by side. Defaults to false. */
     stacked?: boolean;
+    /** Unset default isn't fixed — shows only when `series` has more than one entry; the single-`data` path stays legend-less. */
     showLegend?: boolean;
+    /** Legend placement. Defaults to "bottom". */
     legendPosition?: "top" | "right" | "bottom" | "left";
 };
 type StyleProps = {
+    /** CSS font size, e.g. "12px". Axis labels default to 12px, the title to 14px. */
     fontSize?: string;
+    /** CSS font family. Defaults to inherit, i.e. the page font. */
     fontFamily?: string;
+    /** CSS font weight. The title defaults to 600. */
     fontWeight?: string | number;
+    /** Text colour. Defaults to the theme's axis ink on axes and its text ink on the title. */
     color?: string;
 };
 export {};

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

@@ -0,0 +1,7 @@
+type ApexChartFallbackProps = {
+    height?: string | number;
+    width?: string | number;
+};
+/** Suspense fallback while the lazy react-apexcharts chunk loads — reserves the chart's own footprint. */
+declare const ApexChartFallback: ({ height, width }: ApexChartFallbackProps) => import("react/jsx-runtime").JSX.Element;
+export default ApexChartFallback;

package/dist/Components/Apexcharts/ApexChartFallback.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Skeletons_1 = __importDefault(require("../Skeletons/Skeletons"));
+/** Suspense fallback while the lazy react-apexcharts chunk loads — reserves the chart's own footprint. */
+const ApexChartFallback = ({ height = "320px", width = "100%" }) => ((0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: height, width: width, borderRadius: "lg" }));
+exports.default = ApexChartFallback;

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

@@ -1,3 +1,4 @@
 import { ApexLineChartProps } from "./ApexLineChartProps";
+/** Line chart wrapper around react-apexcharts, themed via chartColorsFromTheme + chartBase. */
 declare const ApexLineChart: ({ data, labels, title, height, width, lineColors, titlePosition, titleStyle, compact, toolbarBreakpointPct, titleClampLines, showTitleEllipsis, showSeries, series: seriesNames, variant, }: ApexLineChartProps) => import("react/jsx-runtime").JSX.Element;
 export default ApexLineChart;

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

@@ -5,14 +5,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const react_apexcharts_1 = __importDefault(require("react-apexcharts"));
 const react_2 = require("@chakra-ui/react");
 const ToolTip_1 = __importDefault(require("../../ToolTip/ToolTip"));
 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"));
+/** Line chart wrapper around react-apexcharts, themed via chartColorsFromTheme + chartBase. */
 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 = (0, react_2.useTheme)();
     const palette = theme.colors;
+    const chartId = `apex-line-${(0, react_1.useId)().replace(/:/g, "")}`;
     const resolvedLineColors = lineColors !== null && lineColors !== void 0 ? lineColors : (0, chartColorsFromTheme_1.getDefaultSeriesColors)(palette);
     const resolvedTitleStyle = (0, react_1.useMemo)(() => (0, chartColorsFromTheme_1.mergeChartTitleStyle)(palette, titleStyle), [palette, titleStyle]);
     const initialName = Array.isArray(seriesNames) && seriesNames.length ? seriesNames[0] : "Series 1";
@@ -86,6 +89,7 @@ const ApexLineChart = ({ data, labels, title, height, width, lineColors, titlePo
     const showToolbar = !isSmall && ratio >= toolbarBreakpointPct;
     const options = (0, react_1.useMemo)(() => ({
         chart: (0, chartBase_1.baseChart)(palette, {
+            id: chartId,
             type: "line",
             animations: variant === "realtime"
                 ? { enabled: true, speed: 1000, dynamicAnimation: { speed: 1000 } }
@@ -93,6 +97,7 @@ const ApexLineChart = ({ data, labels, title, height, width, lineColors, titlePo
             zoom: { enabled: !isSmall },
             toolbar: { show: showToolbar },
         }),
+        theme: { mode: (0, chartColorsFromTheme_1.chartMode)(palette) },
         stroke: { curve: "smooth", width: 2, lineCap: "round" },
         colors: resolvedLineColors,
         xaxis: {
@@ -122,6 +127,7 @@ const ApexLineChart = ({ data, labels, title, height, width, lineColors, titlePo
         },
     }), [
         variant,
+        chartId,
         showToolbar,
         resolvedLineColors,
         labels,
@@ -132,7 +138,7 @@ const ApexLineChart = ({ data, labels, title, height, width, lineColors, titlePo
         showSeries,
         palette,
     ]);
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: wrapperRef, children: [title && isSmall && ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: title, placement: "top", hasArrow: true, fontSize: "0.75rem", isDisabled: !isTruncated, children: (0, jsx_runtime_1.jsx)("div", { ref: titleRef, style: {
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: wrapperRef, children: [title && isSmall && ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: title, placement: "top", hasArrow: true, fontSize: "xs", isDisabled: !isTruncated, children: (0, jsx_runtime_1.jsx)("div", { ref: titleRef, style: {
                         textAlign: "left",
                         color: resolvedTitleStyle === null || resolvedTitleStyle === void 0 ? void 0 : resolvedTitleStyle.color,
                         fontSize: computedFontSize,
@@ -153,6 +159,6 @@ const ApexLineChart = ({ data, labels, title, height, width, lineColors, titlePo
                         wordBreak: clampLines > 1 ? "break-word" : undefined,
                         lineHeight: clampLines > 1 ? "1.2em" : undefined,
                         maxHeight: clampLines > 1 ? `${1.2 * clampLines}em` : undefined,
-                    }, children: title }) })), (0, jsx_runtime_1.jsx)(react_apexcharts_1.default, { options: options, series: apexSeries, type: "line", height: height, width: width })] }));
+                    }, children: title }) })), (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: apexSeries, type: "line", height: height, width: width }) })] }));
 };
 exports.default = ApexLineChart;

package/dist/Components/Apexcharts/ApexLineChart/ApexLineChartProps.d.ts

@@ -1,28 +1,46 @@
+/** Renders exactly one line from `data`; not a substitute for ApexBarChart/ApexPieChart when comparing multiple series side by side. */
 export type ApexLineChartProps = {
+    /** @deprecated "realtime" does not animate your data: it appends Math.random() values every second. Removed in the next major. */
     variant?: LineChartVariant;
+    /** Read only at mount — later prop updates are silently ignored unless this component remounts (new `key`). */
     data: number[];
+    /** X-axis category labels, one per data point; omitted, the axis falls back to point positions. */
     labels?: string[];
+    /** Only series[0] is read, as the single line's name — there is no way to render more than one line here. */
     series?: string[];
+    /** Heading above the chart; in compact mode it is drawn as clamped text, with a tooltip when truncated. */
     title?: string;
+    /** Chart height as a px number or CSS string. A numeric height under 220 switches the chart to compact mode. */
     height?: number | string;
+    /** Chart width as a px number or CSS string; percentages resolve against the container. Under 280px it goes compact. */
     width?: number | string;
+    /** Line colours in order. Defaults to the theme's categorical series palette. */
     lineColors?: string[];
+    /** Ignored once the chart renders in compact/small mode — the fallback title there is always left-aligned regardless of this value. */
     titlePosition?: "left" | "center" | "right";
+    /** Despite the name, gates only the tooltip and hover markers — the line itself still renders when this is false. */
     showSeries?: boolean;
+    /** Title colour and font; defaults to 14px, weight 600 and the text ink. Compact mode scales an unset fontSize to the width (12-18px). */
     titleStyle?: {
         color?: string;
         fontSize?: string;
         fontWeight?: number | string;
         fontFamily?: string;
     };
+    /** Forces compact mode: the title moves above the chart and zoom and toolbar turn off. Small sizes enable it automatically. */
     compact?: boolean;
+    /** Maximum title lines before clipping in compact mode. Defaults to 2 there; no effect outside compact mode. */
     titleClampLines?: number;
+    /** Adds "…" to a clipped compact title. Defaults to true; applies only when `titleClampLines` is 1. */
     showTitleEllipsis?: boolean;
+    /** Declared but never read by this component — has zero effect here; ApexPieChart/ApexPolarCharts implement the same shape and apply it. */
     legendStyle?: {
         colors?: string | string[];
         useSeriesColors?: boolean;
         position?: "top" | "right" | "bottom" | "left";
     };
+    /** Minimum chart width, as a fraction of its container, for the zoom toolbar to show. Defaults to 0.6. */
     toolbarBreakpointPct?: number;
 };
+/** Chart mode: "basic" plots `data` as given; "realtime" instead free-runs on random values — see `variant`. */
 export type LineChartVariant = "basic" | "realtime";

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

@@ -1,3 +1,4 @@
 import { ApexPieChartProps } from "./ApexPieChartProps";
-declare const ApexPieChart: ({ data, labels, title, height, width, donutColors, chartColor, titlePosition, titleStyle, legendPosition, legendStyle, variant, showDataLabels, minLabelPercent, surfaceColor, donutSize, totalLabel, labelPlacement, }: ApexPieChartProps) => import("react/jsx-runtime").JSX.Element;
+/** Pie/donut chart wrapper around react-apexcharts, themed via chartColorsFromTheme + chartBase. */
+declare const ApexPieChart: ({ data, labels, title, height, width, donutColors, chartColor, titlePosition, titleStyle, legendPosition, legendStyle, variant, showDataLabels, minLabelPercent, surfaceColor, donutSize, totalLabel, labelPlacement, images, }: ApexPieChartProps) => import("react/jsx-runtime").JSX.Element;
 export default ApexPieChart;

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

@@ -5,10 +5,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const react_apexcharts_1 = __importDefault(require("react-apexcharts"));
 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)) {
@@ -17,11 +19,13 @@ const getValidLegendPosition = (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", }) => {
+/** 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]);
@@ -33,6 +37,7 @@ const ApexPieChart = ({ data, labels, title, height = 400, width = 500, donutCol
             ? "outside"
             : "none"
         : labelPlacement;
+    const sliceCount = data.length;
     const labelsOn = showDataLabels && placement !== "none";
     const outside = placement === "outside";
     const validLegendPosition = getValidLegendPosition(legendPosition);
@@ -89,10 +94,7 @@ const ApexPieChart = ({ data, labels, title, height = 400, width = 500, donutCol
                     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)),
                         },
                     },
                 };
@@ -147,6 +149,7 @@ const ApexPieChart = ({ data, labels, title, height = 400, width = 500, donutCol
             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 : {}),
             }),
@@ -164,6 +167,7 @@ const ApexPieChart = ({ data, labels, title, height = 400, width = 500, donutCol
         };
     }, [
         variant,
+        chartId,
         labels,
         seriesColors,
         legend,
@@ -180,7 +184,9 @@ const ApexPieChart = ({ data, labels, title, height = 400, width = 500, donutCol
         totalLabel,
         ink.muted,
         ink.text,
+        images,
+        sliceCount,
     ]);
-    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_apexcharts_1.default, { options: options, series: data, type: (_a = options.chart) === null || _a === void 0 ? void 0 : _a.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,26 +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;
+    /** 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;
@@ -31,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,3 +1,4 @@
 import { ApexPolarChartProps } from "./ApexPolarChartsProps";
+/** 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

@@ -5,23 +5,26 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const react_apexcharts_1 = __importDefault(require("react-apexcharts"));
 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: palette.text[900],
+            colors: ink.text,
             position: "bottom",
             useSeriesColors: false,
         };
         return { ...defaults, ...legendStyle };
-    }, [palette, 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 = {};
@@ -49,7 +52,7 @@ const ApexPolarChart = ({ data, labels, title, height = 400, width = 500, chartC
                 break;
         }
         return {
-            chart: (0, chartBase_1.baseChart)(palette, { type: "polarArea" }),
+            chart: (0, chartBase_1.baseChart)(palette, { id: chartId, type: "polarArea" }),
             labels,
             colors: resolvedChartColors,
             legend: {
@@ -78,6 +81,7 @@ const ApexPolarChart = ({ data, labels, title, height = 400, width = 500, chartC
         };
     }, [
         variant,
+        chartId,
         labels,
         resolvedChartColors,
         mergedLegendStyle,
@@ -88,6 +92,6 @@ const ApexPolarChart = ({ data, labels, title, height = 400, width = 500, chartC
         ink.surface,
         ink.grid,
     ]);
-    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(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;
+    /** 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";