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

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

@@ -8,7 +8,7 @@ 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 accentText_1 = require("../../../Theme/tokens/builders/accentText");
+const chartBase_1 = require("../chartBase");
 const getValidLegendPosition = (position) => {
     const validPositions = ["left", "right", "top", "bottom"];
     if (validPositions.includes(position)) {
@@ -17,65 +17,71 @@ 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", }) => {
+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 = (0, react_2.useTheme)();
     const palette = theme.colors;
-    const chartThemeMode = (0, accentText_1.isDarkCanvas)(palette.backgroundColor.main) ? "dark" : "light";
+    const ink = (0, chartColorsFromTheme_1.chartInk)(palette);
+    const gap = surfaceColor !== null && surfaceColor !== void 0 ? surfaceColor : ink.surface;
     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],
-            useSeriesColors: false,
-            horizontalGap: 10,
-            verticalGap: 5,
-            markerSize: 8,
-            markerOffsetX: -5,
-            markerOffsetY: 0,
-        };
-        return { ...defaults, ...legendStyle };
-    }, [palette, legendStyle]);
     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 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,
+            },
+        };
+    }, [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;
@@ -97,12 +103,18 @@ const ApexPieChart = ({ data, labels, title, height = 400, width = 500, donutCol
                     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" },
                                 },
                             },
                         },
@@ -110,56 +122,65 @@ const ApexPieChart = ({ data, labels, title, height = 400, width = 500, donutCol
                 };
                 break;
             case "pie":
-                extraOptions = {
-                    chart: { type: "pie" },
-                };
                 break;
             default:
                 break;
         }
+        const isDonut = !variant.includes("pie");
         return {
-            chart: {
-                type: variant.includes("pie") ? "pie" : "donut",
-            },
             labels,
             colors: seriesColors,
-            legend: {
-                position: validLegendPosition,
-                labels: {
-                    colors: mergedLegendStyle.colors,
-                    useSeriesColors: mergedLegendStyle.useSeriesColors,
-                },
-                markers: {
-                    size: mergedLegendStyle.markerSize,
-                    offsetX: mergedLegendStyle.markerOffsetX,
-                    offsetY: mergedLegendStyle.markerOffsetY,
-                    strokeWidth: 0,
-                    shape: "circle",
-                },
-                itemMargin: {
-                    horizontal: mergedLegendStyle.horizontalGap,
-                    vertical: mergedLegendStyle.verticalGap,
+            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,
                 },
+                dropShadow: { enabled: false },
             },
-            title: {
-                text: title,
-                align: titlePosition,
-                style: mergedTitleStyle,
-            },
-            dataLabels: { enabled: true },
+            states: { hover: { filter: { type: "lighten", value: 0.08 } } },
             ...extraOptions,
-            theme: { mode: chartThemeMode, ...extraOptions.theme },
+            chart: (0, chartBase_1.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: (0, chartColorsFromTheme_1.chartMode)(palette), ...extraOptions.theme },
         };
     }, [
         variant,
         labels,
         seriesColors,
-        validLegendPosition,
-        mergedLegendStyle,
+        legend,
         title,
         titlePosition,
         mergedTitleStyle,
-        chartThemeMode,
+        palette,
+        gap,
+        minLabelPercent,
+        labelInks,
+        labelsOn,
+        outside,
+        donutSize,
+        totalLabel,
+        ink.muted,
+        ink.text,
     ]);
     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 }) }));
 };

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

@@ -3,8 +3,8 @@ export type ApexPieChartProps = {
     data: number[];
     labels: string[];
     title?: string;
-    height?: number;
-    width?: number;
+    height?: number | string;
+    width?: number | string;
     donutColors?: string[];
     chartColor?: string[];
     titlePosition?: "left" | "center" | "right";
@@ -15,6 +15,12 @@ export type ApexPieChartProps = {
         fontFamily?: string;
     };
     legendPosition?: "left" | "right" | "top" | "bottom";
+    showDataLabels?: boolean;
+    minLabelPercent?: number;
+    surfaceColor?: string;
+    donutSize?: string;
+    totalLabel?: string;
+    labelPlacement?: "auto" | "inside" | "outside" | "none";
     legendStyle?: {
         colors?: string | string[];
         useSeriesColors?: boolean;
@@ -26,4 +32,3 @@ export type ApexPieChartProps = {
     };
 };
 export type DonutPieVariant = "pie" | "donut" | "update-donut" | "monochrome-pie" | "gradient-donut" | "semi-donut" | "donut-with-pattern" | "pie-with-image";
-//# sourceMappingURL=ApexPieChartProps.d.ts.map

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

@@ -1,4 +1,3 @@
 import { ApexPolarChartProps } from "./ApexPolarChartsProps";
 declare const ApexPolarChart: ({ data, labels, title, height, width, chartColors, titlePosition, titleStyle, legendStyle, variant, }: ApexPolarChartProps) => import("react/jsx-runtime").JSX.Element;
 export default ApexPolarChart;
-//# sourceMappingURL=ApexPolarCharts.d.ts.map

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

@@ -8,11 +8,11 @@ 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 accentText_1 = require("../../../Theme/tokens/builders/accentText");
+const chartBase_1 = require("../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 chartThemeMode = (0, accentText_1.isDarkCanvas)(palette.backgroundColor.main) ? "dark" : "light";
+    const ink = (0, chartColorsFromTheme_1.chartInk)(palette);
     const mergedTitleStyle = (0, react_1.useMemo)(() => (0, chartColorsFromTheme_1.mergeChartTitleStyle)(palette, titleStyle), [palette, titleStyle]);
     const mergedLegendStyle = (0, react_1.useMemo)(() => {
         const defaults = {
@@ -28,7 +28,7 @@ const ApexPolarChart = ({ data, labels, title, height = 400, width = 500, chartC
         switch (variant) {
             case "basic":
                 extraOptions = {
-                    stroke: { colors: [palette.white] },
+                    stroke: { colors: [ink.surface], width: 2 },
                     fill: { opacity: 0.8 },
                 };
                 break;
@@ -41,7 +41,7 @@ const ApexPolarChart = ({ data, labels, title, height = 400, width = 500, chartC
                             shadeIntensity: 0.6,
                         },
                     },
-                    stroke: { colors: [palette.white] },
+                    stroke: { colors: [ink.surface], width: 2 },
                     fill: { opacity: 0.8 },
                 };
                 break;
@@ -49,11 +49,11 @@ const ApexPolarChart = ({ data, labels, title, height = 400, width = 500, chartC
                 break;
         }
         return {
-            chart: { type: "polarArea" },
+            chart: (0, chartBase_1.baseChart)(palette, { type: "polarArea" }),
             labels,
             colors: resolvedChartColors,
             legend: {
-                position: mergedLegendStyle.position,
+                ...(0, chartBase_1.baseLegend)(palette, mergedLegendStyle.position),
                 labels: {
                     colors: mergedLegendStyle.colors,
                     useSeriesColors: mergedLegendStyle.useSeriesColors,
@@ -64,9 +64,17 @@ const ApexPolarChart = ({ data, labels, title, height = 400, width = 500, chartC
                 align: titlePosition,
                 style: mergedTitleStyle,
             },
-            dataLabels: { enabled: true },
+            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: chartThemeMode, ...extraOptions.theme },
+            theme: { mode: (0, chartColorsFromTheme_1.chartMode)(palette), ...extraOptions.theme },
         };
     }, [
         variant,
@@ -76,8 +84,9 @@ const ApexPolarChart = ({ data, labels, title, height = 400, width = 500, chartC
         title,
         titlePosition,
         mergedTitleStyle,
-        palette.white,
-        chartThemeMode,
+        palette,
+        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 }) }));
 };

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

@@ -3,8 +3,8 @@ export type ApexPolarChartProps = {
     data: number[];
     labels: string[];
     title?: string;
-    height?: number;
-    width?: number;
+    height?: number | string;
+    width?: number | string;
     chartColors?: string[];
     titlePosition?: "left" | "center" | "right";
     titleStyle?: {
@@ -20,4 +20,3 @@ export type ApexPolarChartProps = {
     };
 };
 export type PolarVariant = "basic" | "monochrome";
-//# sourceMappingURL=ApexPolarChartsProps.d.ts.map

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

@@ -0,0 +1,3 @@
+import { ApexRadialChartProps } from "./ApexRadialChartProps";
+declare const ApexRadialChart: ({ variant, data, labels, title, titlePosition, height, width, colors, totalLabel, trackColor, hollowSize, }: ApexRadialChartProps) => import("react/jsx-runtime").JSX.Element;
+export default ApexRadialChart;

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

@@ -0,0 +1,62 @@
+"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 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 ApexRadialChart = ({ variant = "gauge", data, labels, title, titlePosition = "left", height = 320, width = "100%", colors, totalLabel = "Total", trackColor, hollowSize = "62%", }) => {
+    const theme = (0, react_2.useTheme)();
+    const palette = theme.colors;
+    const ink = (0, chartColorsFromTheme_1.chartInk)(palette);
+    const seriesColors = (0, react_1.useMemo)(() => colors !== null && colors !== void 0 ? colors : (0, chartColorsFromTheme_1.getDefaultSeriesColors)(palette), [colors, palette]);
+    const options = (0, react_1.useMemo)(() => ({
+        chart: (0, chartBase_1.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: (0, chartColorsFromTheme_1.mergeChartTitleStyle)(palette) },
+        legend: { ...(0, chartBase_1.baseLegend)(palette, "bottom"), show: variant === "multi" },
+    }), [palette, variant, seriesColors, labels, title, titlePosition, totalLabel, trackColor, hollowSize, ink.muted, ink.text]);
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_apexcharts_1.default, { options: options, series: data, type: "radialBar", height: height, width: width }) }));
+};
+exports.default = ApexRadialChart;

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

@@ -0,0 +1,14 @@
+export type RadialChartVariant = "gauge" | "multi" | "semi";
+export type ApexRadialChartProps = {
+    variant?: RadialChartVariant;
+    data: number[];
+    labels?: string[];
+    title?: string;
+    titlePosition?: "left" | "center" | "right";
+    height?: number | string;
+    width?: number | string;
+    colors?: string[];
+    totalLabel?: string;
+    trackColor?: string;
+    hollowSize?: string;
+};

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

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

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

@@ -0,0 +1,20 @@
+import type { ApexOptions } from "apexcharts";
+import type { CustomThemeProps } from "../../Theme/themeProps";
+type Palette = CustomThemeProps["colors"];
+/**
+ * Animations are the single biggest cost on a weak device, and ApexCharts re-runs them on
+ * every data change. Gate them on the same signals a browser already exposes rather than
+ * shipping a prop nobody sets: reduced-motion intent, core count, and device memory.
+ */
+export declare function prefersLightweightRendering(): boolean;
+export declare function baseChart(palette: Palette, overrides?: ApexOptions["chart"]): NonNullable<ApexOptions["chart"]>;
+export declare function baseGrid(palette: Palette, horizontal?: boolean): NonNullable<ApexOptions["grid"]>;
+export declare function baseLegend(palette: Palette, position?: ApexLegendPosition): NonNullable<ApexOptions["legend"]>;
+export declare function baseTooltip(palette: Palette): NonNullable<ApexOptions["tooltip"]>;
+export declare function baseAxisLabels(palette: Palette): {
+    colors: string;
+    fontSize: string;
+    fontFamily: string;
+};
+export type ApexLegendPosition = "top" | "right" | "bottom" | "left";
+export {};

package/dist/Components/Apexcharts/chartBase.js

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.prefersLightweightRendering = prefersLightweightRendering;
+exports.baseChart = baseChart;
+exports.baseGrid = baseGrid;
+exports.baseLegend = baseLegend;
+exports.baseTooltip = baseTooltip;
+exports.baseAxisLabels = baseAxisLabels;
+const chartColorsFromTheme_1 = require("../../Theme/tokens/builders/chartColorsFromTheme");
+const FONT = "inherit";
+/**
+ * Animations are the single biggest cost on a weak device, and ApexCharts re-runs them on
+ * every data change. Gate them on the same signals a browser already exposes rather than
+ * shipping a prop nobody sets: reduced-motion intent, core count, and device memory.
+ */
+function prefersLightweightRendering() {
+    var _a, _b;
+    if (typeof window === "undefined")
+        return true;
+    const reduced = (_b = (_a = window.matchMedia) === null || _a === void 0 ? void 0 : _a.call(window, "(prefers-reduced-motion: reduce)")) === null || _b === void 0 ? void 0 : _b.matches;
+    if (reduced)
+        return true;
+    const nav = window.navigator;
+    if (typeof nav.deviceMemory === "number" && nav.deviceMemory <= 4)
+        return true;
+    return typeof nav.hardwareConcurrency === "number" && nav.hardwareConcurrency <= 4;
+}
+function baseChart(palette, overrides = {}) {
+    const ink = (0, chartColorsFromTheme_1.chartInk)(palette);
+    const lightweight = prefersLightweightRendering();
+    return {
+        fontFamily: FONT,
+        foreColor: ink.muted,
+        background: "transparent",
+        toolbar: { show: false },
+        zoom: { enabled: false },
+        animations: lightweight
+            ? { enabled: false }
+            : { enabled: true, speed: 320, animateGradually: { enabled: false } },
+        redrawOnParentResize: true,
+        redrawOnWindowResize: true,
+        ...overrides,
+    };
+}
+function baseGrid(palette, horizontal = false) {
+    const ink = (0, chartColorsFromTheme_1.chartInk)(palette);
+    return {
+        borderColor: ink.grid,
+        strokeDashArray: 4,
+        xaxis: { lines: { show: horizontal } },
+        yaxis: { lines: { show: !horizontal } },
+        padding: { top: 8, right: 12, bottom: 0, left: 8 },
+    };
+}
+function baseLegend(palette, position = "bottom") {
+    const ink = (0, chartColorsFromTheme_1.chartInk)(palette);
+    return {
+        position,
+        horizontalAlign: position === "bottom" || position === "top" ? "center" : "left",
+        fontSize: "12px",
+        fontFamily: FONT,
+        labels: { colors: ink.muted, useSeriesColors: false },
+        markers: { size: 6, strokeWidth: 0, shape: "circle", offsetX: -3 },
+        itemMargin: { horizontal: 10, vertical: 4 },
+    };
+}
+function baseTooltip(palette) {
+    return {
+        theme: (0, chartColorsFromTheme_1.chartMode)(palette),
+        style: { fontSize: "12px", fontFamily: FONT },
+        fillSeriesColor: false,
+    };
+}
+function baseAxisLabels(palette) {
+    const ink = (0, chartColorsFromTheme_1.chartInk)(palette);
+    return { colors: ink.axis, fontSize: "12px", fontFamily: FONT };
+}

package/dist/Components/AppearanceSettings/AppearanceSettings.d.ts

@@ -0,0 +1,3 @@
+import type { AppearanceSettingsProps } from "./AppearanceSettingsProps";
+export declare const AppearanceSettings: ({ brand, fontSize, onBrandChange, onFontSizeChange, showBrand, showColorMode, showFontSize, size, labels, }: AppearanceSettingsProps) => import("react/jsx-runtime").JSX.Element;
+export default AppearanceSettings;

package/dist/Components/AppearanceSettings/AppearanceSettings.js

@@ -0,0 +1,43 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppearanceSettings = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const Theme_1 = require("../../Theme");
+const provider_1 = require("../../Theme/provider");
+const fontSize_1 = require("../../Theme/provider/fontSize");
+const SelectV2_1 = __importDefault(require("../SelectV2/SelectV2"));
+const FieldLabel = ({ children }) => ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", fontWeight: "medium", color: "gray.600", mb: 2, children: children }));
+const brandSwatch = (name) => {
+    var _a, _b, _c;
+    const brand = Theme_1.ThemesList[name];
+    return ((0, jsx_runtime_1.jsx)(react_2.Box, { w: "14px", h: "14px", borderRadius: "full", bg: (_c = (_b = (_a = brand === null || brand === void 0 ? void 0 : brand.colors) === null || _a === void 0 ? void 0 : _a.primary) === null || _b === void 0 ? void 0 : _b[500]) !== null && _c !== void 0 ? _c : "gray.300", border: "1px solid", borderColor: "whiteAlpha.300" }));
+};
+const AppearanceSettings = ({ brand, fontSize, onBrandChange, onFontSizeChange, showBrand = true, showColorMode = true, showFontSize = true, size = "sm", labels, }) => {
+    var _a, _b, _c;
+    const brandOptions = (0, react_1.useMemo)(() => Object.keys(Theme_1.ThemesList).map((name) => ({
+        id: name,
+        label: name.charAt(0).toUpperCase() + name.slice(1),
+        icon: brandSwatch(name),
+    })), []);
+    const themeLabel = (_a = labels === null || labels === void 0 ? void 0 : labels.theme) !== null && _a !== void 0 ? _a : "Theme";
+    const colorModeLabel = (_b = labels === null || labels === void 0 ? void 0 : labels.colorMode) !== null && _b !== void 0 ? _b : "Color mode";
+    const fontSizeLabel = (_c = labels === null || labels === void 0 ? void 0 : labels.fontSize) !== null && _c !== void 0 ? _c : "Font Size";
+    return ((0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "stretch", spacing: 4, children: [showBrand && ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(FieldLabel, { children: themeLabel }), (0, jsx_runtime_1.jsx)(SelectV2_1.default, { options: brandOptions, value: brand, isSearchable: false, size: size, "aria-label": themeLabel, "data-testid": "appearance-brand-select", onChange: (option) => {
+                            if (!option)
+                                return;
+                            onBrandChange === null || onBrandChange === void 0 ? void 0 : onBrandChange(String(option.id));
+                        } })] })), showColorMode && ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(FieldLabel, { children: colorModeLabel }), (0, jsx_runtime_1.jsx)(react_2.Box, { "data-testid": "appearance-mode-switcher", children: (0, jsx_runtime_1.jsx)(provider_1.ThemeSwitcher, { variant: "segmented", showBrandPicker: false, size: size, "aria-label": colorModeLabel }) })] })), showFontSize && ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(FieldLabel, { children: fontSizeLabel }), (0, jsx_runtime_1.jsx)(SelectV2_1.default, { options: fontSize_1.FONT_SIZE_OPTIONS, value: fontSize, isSearchable: false, size: size, "aria-label": fontSizeLabel, "data-testid": "appearance-font-size-select", 
+                        // Each row previews the size it sets, so the list is self-explaining.
+                        renderOption: (option) => ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", style: { fontSize: String(option.id) }, children: option.label })), onChange: (option) => {
+                            if (!option)
+                                return;
+                            onFontSizeChange === null || onFontSizeChange === void 0 ? void 0 : onFontSizeChange(String(option.id));
+                        } })] }))] }));
+};
+exports.AppearanceSettings = AppearanceSettings;
+exports.default = exports.AppearanceSettings;

package/dist/Components/AppearanceSettings/AppearanceSettingsProps.d.ts

@@ -0,0 +1,18 @@
+import type { SelectV2Size } from "../SelectV2/SelectV2Props";
+export type AppearanceSettingsLabels = {
+    theme?: string;
+    colorMode?: string;
+    fontSize?: string;
+};
+export type AppearanceSettingsProps = {
+    brand?: string;
+    fontSize?: string;
+    onBrandChange?: (brand: string) => void;
+    onFontSizeChange?: (fontSize: string) => void;
+    showBrand?: boolean;
+    showColorMode?: boolean;
+    showFontSize?: boolean;
+    size?: SelectV2Size;
+    /** Pass translated strings; the library ships English defaults. */
+    labels?: AppearanceSettingsLabels;
+};

package/dist/Components/AppearanceSettings/AppearanceSettingsProps.js

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

package/dist/Components/Breadcrumbs/Breadcrumbs.d.ts

@@ -1,3 +1,2 @@
 import { BreadcrumbsProps } from "./BreadcrumbsProps";
 export default function Breadcrumbs({ spacing, separator, fontWeight, fontSize, isCurrentPage, handleClick, items, }: BreadcrumbsProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=Breadcrumbs.d.ts.map

package/dist/Components/Breadcrumbs/BreadcrumbsProps.d.ts

@@ -9,4 +9,3 @@ export type BreadcrumbItem = {
     path: string;
     label: string;
 };
-//# sourceMappingURL=BreadcrumbsProps.d.ts.map

package/dist/Components/Button/Button.d.ts

@@ -1,5 +1,4 @@
 import { ButtonProps } from "./ButtonProps";
-declare function Button({ label, children, onClick, opacity, variant, leftIcon, rightIcon, size, isDisabled, isLoading, loadingText, type, width, sx, colorScheme, ref, border, borderRadius, onMouseEnter, onMouseLeave, }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+declare function Button({ label, children, onClick, opacity, variant, leftIcon, rightIcon, size, isDisabled, isLoading, loadingText, type, width, sx, colorScheme, ref, border, borderRadius, onMouseEnter, onMouseLeave, ...aria }: ButtonProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof Button>;
 export default _default;
-//# sourceMappingURL=Button.d.ts.map