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

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

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

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

@@ -0,0 +1,10 @@
+const SIZE = 400;
+/** A diagonal-stripe SVG data URI: `color` ground with translucent `stripe` bands, no network. */
+export 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/esm/Components/Apexcharts/ApexPolarCharts/ApexPolarCharts.js

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

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

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

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

@@ -0,0 +1,5 @@
+import { lazyWithRetry } from "../../Utils/lazyWithRetry.js";
+// Keeps apexcharts/react-apexcharts (99% of the wrapper's weight) out of the main
+// bundle; shared so all six chart wrappers resolve the same dynamic chunk once.
+const LazyReactApexChart = lazyWithRetry(() => import("react-apexcharts"));
+export default LazyReactApexChart;

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

@@ -0,0 +1,69 @@
+import { chartInk, chartMode } from "../../Theme/tokens/builders/chartColorsFromTheme.js";
+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.
+ */
+export 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;
+}
+export function baseChart(palette, overrides = {}) {
+    const ink = 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,
+    };
+}
+export function baseGrid(palette, horizontal = false) {
+    const ink = 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 },
+    };
+}
+export function baseLegend(palette, position = "bottom") {
+    const ink = 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 },
+    };
+}
+export function baseTooltip(palette) {
+    return {
+        theme: chartMode(palette),
+        style: { fontSize: "12px", fontFamily: FONT },
+        fillSeriesColor: false,
+    };
+}
+export function baseAxisLabels(palette) {
+    const ink = chartInk(palette);
+    return { colors: ink.axis, fontSize: "12px", fontFamily: FONT };
+}

package/dist/esm/Components/AppSwitcher/AppMark.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isValidElement } from "react";
+import { Box, Flex, Image } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { mix } from "../../Theme/tokens/builders/color.js";
+import { onFilled } from "../../Theme/tokens/builders/accentText.js";
+import { liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
+import { AA_NORMAL_TEXT } from "../../Theme/tokens/builders/accentText.js";
+import { CATEGORICAL_SERIES } from "../../Theme/tokens/builders/chartColorsFromTheme.js";
+import { resolveAvatarFill } from "../../Theme/tokens/builders/statusTone.js";
+import { avatarColor } from "../OrgSwitcher/OrgSwitcherProps.js";
+import { appInitials } from "./AppSwitcherProps.js";
+// The app's own hue at 85% strength — the solid mark, softened just off full saturation.
+const FILL_STRENGTH = 0.85;
+// NOTE: assigned over the WHOLE app list, never the filtered one, so searching can't repaint a mark.
+export const assignAppHues = (apps, mode) => {
+    const ramp = CATEGORICAL_SERIES[mode].map(resolveAvatarFill);
+    const taken = new Set(apps.flatMap((a) => (a.color ? [a.color] : [])));
+    return apps.map((app) => {
+        if (app.color)
+            return app.color;
+        const seed = avatarColor(app.id || app.name, mode);
+        const start = Math.max(0, ramp.indexOf(seed));
+        for (let i = 0; i < ramp.length; i += 1) {
+            const next = ramp[(start + i) % ramp.length];
+            if (!taken.has(next)) {
+                taken.add(next);
+                return next;
+            }
+        }
+        // More apps than the series has hues; past this point a repeat is unavoidable.
+        return seed;
+    });
+};
+// Softening costs the fill contrast, so it is walked back until a WHITE glyph clears AA — every
+// mark keeps the same white icon instead of some flipping to black.
+export const appTint = (hue, surface, white) => liftToContrast(mix(hue, surface, 1 - FILL_STRENGTH), white, AA_NORMAL_TEXT);
+export const appTintInk = (fill, white, black) => onFilled(fill, white, black);
+const AppMark = ({ app, hue, boxSize, iconSize, muted = false, }) => {
+    const { colors } = useCustomTheme();
+    if (app.iconUrl) {
+        return (_jsx(Image, { src: app.iconUrl, alt: "", boxSize: boxSize, borderRadius: "lg", objectFit: "cover", flexShrink: 0, opacity: muted ? 0.55 : 1 }));
+    }
+    const surface = colors.backgroundColor.light;
+    const fill = muted ? colors.backgroundColor.quaternary : appTint(hue, surface, colors.white);
+    const ink = muted ? colors.textMuted : appTintInk(fill, colors.white, colors.black);
+    // lucide icons are forwardRef objects, not functions — a typeof check silently drops them.
+    const isElement = isValidElement(app.icon);
+    const Icon = !isElement && app.icon ? app.icon : null;
+    return (_jsx(Flex, { align: "center", justify: "center", boxSize: boxSize, borderRadius: "lg", flexShrink: 0, bg: fill, color: ink, fontSize: `${Math.round(iconSize * 0.72)}px`, fontWeight: 700, "aria-hidden": true, children: Icon ? (_jsx(Icon, { size: iconSize, color: ink })) : isValidElement(app.icon) ? (_jsx(Box, { display: "flex", color: ink, children: app.icon })) : (appInitials(app.name)) }));
+};
+export default AppMark;