pixelize-design-library 2.4.2-beta.4 → 2.4.2-beta.41

package/dist/Theme/tokens/builders/rowStates.d.ts

@@ -0,0 +1,13 @@
+import type { PaletteProps } from "../types";
+export interface RowStateBackgrounds {
+    active: string;
+    selected: string;
+    selectedActive: string;
+}
+/**
+ * The three backgrounds a selectable list row can rest on. Every rung is NEUTRAL and pale, so a
+ * row's ink stays the canvas ink `withSurfaceRungs` already settled. Seeding a row state from
+ * `primary[500]` instead — the filled-button rung — is what painted SelectV2's hovered rows a
+ * solid brand fill under unreadable text.
+ */
+export declare const listRowBackgrounds: (colors: PaletteProps) => RowStateBackgrounds;

package/dist/Theme/tokens/builders/rowStates.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.listRowBackgrounds = void 0;
+const outlineRung_1 = require("./outlineRung");
+/**
+ * The three backgrounds a selectable list row can rest on. Every rung is NEUTRAL and pale, so a
+ * row's ink stays the canvas ink `withSurfaceRungs` already settled. Seeding a row state from
+ * `primary[500]` instead — the filled-button rung — is what painted SelectV2's hovered rows a
+ * solid brand fill under unreadable text.
+ */
+const listRowBackgrounds = (colors) => {
+    const selected = colors.backgroundColor.tertiary;
+    return {
+        active: (0, outlineRung_1.resolveHoverTint)(colors.gray[50], colors.backgroundColor.light),
+        selected,
+        selectedActive: (0, outlineRung_1.resolveHoverTint)(selected, selected),
+    };
+};
+exports.listRowBackgrounds = listRowBackgrounds;

package/dist/Theme/tokens/builders/scrollShadow.d.ts

@@ -0,0 +1,2 @@
+export type ScrollShadowStyle = Record<string, unknown>;
+export declare function scrollShadowStyles(surface: string): ScrollShadowStyle;

package/dist/Theme/tokens/builders/scrollShadow.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.scrollShadowStyles = scrollShadowStyles;
+const EDGE = "24px";
+const TINT = "rgba(0, 0, 0, 0.08)";
+// CSS-only overflow hint via background-attachment local vs scroll — no listener, no extra node.
+function scrollShadowStyles(surface) {
+    return {
+        backgroundColor: surface,
+        backgroundImage: `linear-gradient(to right, ${surface}, ${surface}), linear-gradient(to left, ${surface}, ${surface}), linear-gradient(to right, ${TINT}, transparent), linear-gradient(to left, ${TINT}, transparent)`,
+        backgroundRepeat: "no-repeat",
+        backgroundSize: `${EDGE} 100%, ${EDGE} 100%, 8px 100%, 8px 100%`,
+        backgroundPosition: "0 0, 100% 0, 0 0, 100% 0",
+        backgroundAttachment: "local, local, scroll, scroll",
+    };
+}

package/dist/Theme/tokens/builders/surfaceRungs.d.ts

@@ -1,6 +1,9 @@
 import type { PaletteProps } from "../types";
-/** Clear of the 4.5 gate, but well under body text so a hint never reads as a value. */
-export declare const PLACEHOLDER_TEXT = 5;
+/**
+ * A hint is held to the non-text floor, not the body-text one. Deliberate: at 4.5 an empty field
+ * reads as one already typed into. See CHROME-CONSISTENCY.md.
+ */
+export declare const PLACEHOLDER_TEXT = 3;
 export declare const namedSurfaces: (palette: PaletteProps) => string[];
 /** The surface an ink is closest to — clearing it clears every other one. */
 export declare const hardestSurface: (ink: string, surfaces: string[]) => string;

package/dist/Theme/tokens/builders/surfaceRungs.js

@@ -6,8 +6,11 @@ const color_1 = require("./color");
 const outlineRung_1 = require("./outlineRung");
 const accentText_1 = require("./accentText");
 const semanticText_1 = require("./semanticText");
-/** Clear of the 4.5 gate, but well under body text so a hint never reads as a value. */
-exports.PLACEHOLDER_TEXT = 5;
+/**
+ * A hint is held to the non-text floor, not the body-text one. Deliberate: at 4.5 an empty field
+ * reads as one already typed into. See CHROME-CONSISTENCY.md.
+ */
+exports.PLACEHOLDER_TEXT = outlineRung_1.AA_NON_TEXT;
 const namedSurfaces = (palette) => [
     ...Object.values(palette.backgroundColor),
     palette.background[50],
@@ -21,7 +24,8 @@ exports.hardestSurface = hardestSurface;
 function withSurfaceRungs(palette) {
     const surfaces = (0, exports.namedSurfaces)(palette);
     const lift = (ink, target) => (0, outlineRung_1.liftToContrast)(ink, (0, exports.hardestSurface)(ink, surfaces), target);
-    const soften = (ink, target) => (0, outlineRung_1.softenToContrast)(ink, (0, exports.hardestSurface)(ink, surfaces), target);
+    const settle = (ink, target) => (0, outlineRung_1.settleAcross)(ink, surfaces, target);
+    const rule = (ink) => (0, outlineRung_1.ruleInk)(ink, [palette.backgroundColor.main, palette.background[50]], outlineRung_1.CHROME_RULE);
     const semanticText = semanticText_1.SEMANTIC_TONES.reduce((acc, tone) => {
         acc[tone] = lift(palette.semanticText[tone], accentText_1.AA_NORMAL_TEXT);
         return acc;
@@ -33,12 +37,18 @@ function withSurfaceRungs(palette) {
         semanticText,
         text: { ...palette.text, 500: lift(palette.text[500], accentText_1.AA_NORMAL_TEXT) },
         header: { ...palette.header, 500: lift(palette.header[500], accentText_1.AA_NORMAL_TEXT) },
-        // Placeholder must stay legible without reading as a filled value: the ramp delivered
-        // 6.85:1, level with `textMuted`, so it is settled back down to just clear of AA.
-        placeholder: {
-            ...palette.placeholder,
-            500: soften(lift(palette.placeholder[500], accentText_1.AA_NORMAL_TEXT), exports.PLACEHOLDER_TEXT),
+        // `placeholder` is deliberately absent: the brand authors that rung and the published
+        // library ships it untouched. Its floor is enforced in `placeholderInk`, against the
+        // surfaces a FIELD renders on — not `table.hover`, which no field sits on.
+        // Settled, not lifted: this rung already passed through `withOutlineRung`, and lifting it
+        // again here to AA_NON_TEXT is what shipped 3.85-4.95:1 outlines. See CHROME_BORDER.
+        boxborder: {
+            ...palette.boxborder,
+            200: rule(palette.boxborder[200]),
+            500: settle(palette.boxborder[500], outlineRung_1.CHROME_BORDER),
         },
-        boxborder: { ...palette.boxborder, 500: lift(palette.boxborder[500], outlineRung_1.AA_NON_TEXT) },
+        // The 200 rung of both ramps is the same job under two names; settle them together or an
+        // app picking `border` gets a heavier rule than one picking `boxborder`.
+        border: { ...palette.border, 200: rule(palette.border[200]) },
     };
 }

package/dist/Theme/tokens/types.d.ts

@@ -65,6 +65,24 @@ export type SidebarTokens = {
     /** Status ink resolved against the RAIL. `semanticText` is canvas-relative, not rail. */
     semanticText: SemanticTextTokens;
 };
+/**
+ * The two-tone focus indicator. `ring` is the brand-toned band that carries WCAG 1.4.11
+ * against whatever is BEHIND the control; `halo` is the inner band drawn between the ring
+ * and the control's own fill, so the indicator stays visible on a filled button too.
+ *
+ * Two tones because one band cannot own both adjacencies. `ring` is resolved against three
+ * backdrops (canvas, card, `primary[500]`) and clears all three on every brand — but a button
+ * can be filled by any `colorScheme`, and widening the ring to cover the mid-tone named surfaces
+ * as well leaves `skyline` and `storefront` with no solution at any hue (contrast is luminance
+ * alone, and their bands come out empty). `halo` takes the fill-side adjacency instead, so the
+ * pair holds whatever the button is filled with and whatever it sits on.
+ */
+export type FocusRingTokens = {
+    /** Outer band. >=3:1 against the canvas, a card surface, and the control's own fill. */
+    ring: string;
+    /** Inner band, in the surface tone. >=3:1 against the fill it hugs and against `ring`. */
+    halo: string;
+};
 export type BoxShadowTokens = {
     primary: string;
     error: string;
@@ -102,6 +120,8 @@ export type PaletteProps = {
     header: ColorScale;
     placeholder: ColorScale;
     boxShadow: BoxShadowTokens;
+    /** Two-tone `:focus-visible` indicator, resolved to 3:1 (WCAG 1.4.11). Never hand-written. */
+    focusRing: FocusRingTokens;
     sidebar: SidebarTokens;
     boxborder: ColorScale;
     border: ColorScale;
@@ -125,7 +145,7 @@ export type PaletteProps = {
 };
 /** What a brand writes by hand; every token required, so a gap is a compile error. */
 /** Derived tokens are excluded — `finalizeLightPalette` resolves them per brand. */
-export type BrandPaletteSource = Omit<PaletteProps, "accentText" | "textMuted" | "semanticText" | "sidebar" | "onPrimary" | "onSemantic"> & {
+export type BrandPaletteSource = Omit<PaletteProps, "accentText" | "textMuted" | "semanticText" | "sidebar" | "onPrimary" | "onSemantic" | "focusRing"> & {
     sidebar: {
         background: ColorScale;
     };

package/dist/Utils/table.d.ts

@@ -16,6 +16,9 @@ export type TablePaletteColor = {
     text: string;
     onSolid?: string;
 };
+export type SemanticStatusTone = "info" | "warning" | "success" | "error" | "neutral";
+/** Theme-aware status palette per value — soft fill + semantic ink from `resolveStatusTone`. */
+export declare function buildSemanticStatusPalette(toneByValue: Record<string, SemanticStatusTone>, theme: CustomThemeProps): Record<string, TablePaletteColor>;
 /** Deterministic, theme-aware color palette for groups + status pills. */
 export declare function buildTablePalette(theme: CustomThemeProps): TablePaletteColor[];
 /** Pick a deterministic palette color for a value, with optional consumer override hex. */

package/dist/Utils/table.js

@@ -36,6 +36,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TableCellCalculation = exports.pageSizeCalculation = exports.searchAndSortData = exports.calculateLeftOffset = void 0;
 exports.compareValues = compareValues;
 exports.SortMultiColumnData = SortMultiColumnData;
+exports.buildSemanticStatusPalette = buildSemanticStatusPalette;
 exports.buildTablePalette = buildTablePalette;
 exports.pickTableColor = pickTableColor;
 exports.groupRows = groupRows;
@@ -45,6 +46,9 @@ exports.useDebounce = useDebounce;
 exports.globalSearchFilter = globalSearchFilter;
 const react_1 = __importStar(require("react"));
 const accentText_1 = require("../Theme/tokens/builders/accentText");
+const color_1 = require("../Theme/tokens/builders/color");
+const outlineRung_1 = require("../Theme/tokens/builders/outlineRung");
+const filledSurface_1 = require("../Theme/tokens/builders/filledSurface");
 const statusTone_1 = require("../Theme/tokens/builders/statusTone");
 // Built once, not per comparison: sorting 10k rows runs this ~130k times, and constructing a
 // collator is orders of magnitude dearer than using one.
@@ -98,7 +102,45 @@ function SortMultiColumnData(data, sortConfig) {
         return 0;
     });
 }
+/** Theme-aware status palette per value — soft fill + semantic ink from `resolveStatusTone`. */
+function buildSemanticStatusPalette(toneByValue, theme) {
+    const c = theme.colors;
+    const mode = (0, accentText_1.isDarkCanvas)(c.backgroundColor.main) ? "dark" : "light";
+    const scales = {
+        info: c.semantic.info,
+        warning: c.semantic.warning,
+        success: c.semantic.success,
+        error: c.semantic.error,
+        neutral: c.gray,
+    };
+    return Object.fromEntries(Object.entries(toneByValue).map(([value, key]) => {
+        const scale = scales[key];
+        const tone = (0, statusTone_1.resolveStatusTone)(scale, mode);
+        const solidRung = (0, filledSurface_1.solidFillRung)(scale, c.white);
+        const solid = scale[solidRung];
+        return [
+            value,
+            {
+                solid,
+                soft: tone.bg,
+                text: tone.fg,
+                onSolid: (0, filledSurface_1.labelOnFill)(solid, c.white, c.black),
+            },
+        ];
+    }));
+}
 const withAlpha = (hex, aa) => /^#([0-9a-fA-F]{6})$/.test(hex) ? `${hex}${aa}` : hex;
+/** Consumer `statusColors` values are fill seeds — derive bleed + pill ink from them. */
+const resolveStatusOverride = (fill, white, black, surface) => {
+    const soft = withAlpha(fill, "22");
+    const solid = (0, statusTone_1.resolveAvatarFill)(fill);
+    return {
+        solid,
+        soft,
+        text: (0, outlineRung_1.liftToContrast)(fill, (0, color_1.compositeOver)(soft, surface), accentText_1.AA_NORMAL_TEXT),
+        onSolid: (0, accentText_1.onFilled)(solid, white, black),
+    };
+};
 /** Deterministic, theme-aware color palette for groups + status pills. */
 function buildTablePalette(theme) {
     const c = theme.colors;
@@ -117,11 +159,13 @@ function buildTablePalette(theme) {
     ];
     return scales.map((scale) => {
         const tone = (0, statusTone_1.resolveStatusTone)(scale, mode);
+        const solidRung = (0, filledSurface_1.solidFillRung)(scale, c.white);
+        const solid = scale[solidRung];
         return {
-            solid: scale[500],
+            solid,
             soft: tone.bg,
             text: tone.fg,
-            onSolid: (0, accentText_1.onFilled)(scale[500], c.white, c.black),
+            onSolid: (0, filledSurface_1.labelOnFill)(solid, c.white, c.black),
         };
     });
 }
@@ -134,10 +178,12 @@ const hashKey = (value) => {
 };
 /** Pick a deterministic palette color for a value, with optional consumer override hex. */
 function pickTableColor(value, palette, override, theme) {
+    var _a;
     const white = theme ? theme.colors.white : accentText_1.DEFAULT_WHITE;
     const black = theme ? theme.colors.black : accentText_1.DEFAULT_BLACK;
     if (override) {
-        return { solid: override, soft: withAlpha(override, "22"), text: override, onSolid: (0, accentText_1.onFilled)(override, white, black) };
+        const surface = (_a = theme === null || theme === void 0 ? void 0 : theme.colors.background[50]) !== null && _a !== void 0 ? _a : accentText_1.DEFAULT_WHITE;
+        return resolveStatusOverride(override, white, black, surface);
     }
     if (!palette.length) {
         throw new Error("pickTableColor: empty palette — build it with buildTablePalette(theme).");

package/dist/esm/Components/Accordion/Accordion.js

@@ -4,7 +4,9 @@ import { Accordion as ChakraAccordian, AccordionItem, AccordionButton, Accordion
 import { ChevronDown } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { isDarkCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { liftToContrast, AA_NON_TEXT } from "../../Theme/tokens/builders/outlineRung.js";
 import { getAccordionHoverColors } from "./accordionColors.js";
+/** Chakra Accordion wrapper for header/content pairs; FilterSidebar composes this directly for its collapsible filter sections. */
 const Accordion = ({ allowMultiple, allowToggle, index, onChange, reduceMotion, items, ...rest }) => {
     const { colors } = useCustomTheme();
     const isDark = isDarkCanvas(colors.backgroundColor.main);
@@ -12,13 +14,14 @@ const Accordion = ({ allowMultiple, allowToggle, index, onChange, reduceMotion,
     const headingColor = colors.text[800];
     const bodyColor = colors.text[600];
     const { expandedBg, softHover } = useMemo(() => getAccordionHoverColors(colors, isDark), [colors, isDark]);
+    const focusRing = useMemo(() => liftToContrast(colors.primary[300], colors.background[50], AA_NON_TEXT), [colors]);
     return (_jsx(ChakraAccordian, { allowMultiple: allowMultiple, allowToggle: allowToggle, index: index, onChange: onChange, reduceMotion: reduceMotion, ...rest, children: items.map((item, idx) => {
             var _a;
             return (_jsx(AccordionItem, { border: `0.063rem solid ${border}`, borderRadius: "xl", bg: colors.background[50], mb: 3, overflow: "hidden", transition: "border-color 0.15s ease, box-shadow 0.15s ease", _last: { mb: 0 }, _hover: { borderColor: colors.boxborder[200] }, ...item.itemProps, sx: (_a = item.customStyles) === null || _a === void 0 ? void 0 : _a.itemStyle, children: ({ isExpanded }) => {
                     var _a, _b, _c;
                     return (_jsxs(_Fragment, { children: [_jsx("h2", { children: _jsxs(AccordionButton, { px: 4, py: 3, gap: 3, fontSize: "0.875rem", fontWeight: 600, color: headingColor, bg: isExpanded ? expandedBg : "transparent", transition: "background 0.15s ease", _hover: { bg: isExpanded ? expandedBg : softHover }, _focusVisible: {
                                         boxShadow: "none",
-                                        outline: `0.125rem solid ${colors.primary[300]}`,
+                                        outline: `0.125rem solid ${focusRing}`,
                                         outlineOffset: "-0.125rem",
                                     }, ...item.buttonProps, sx: {
                                         ...(_a = item.customStyles) === null || _a === void 0 ? void 0 : _a.buttonStyle,

package/dist/esm/Components/AlertDialog/AlertDialog.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AlertDialog as ChakraAlertDialog, AlertDialogBody, AlertDialogCloseButton, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, Button, } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+/** Renders a fixed Cancel/Confirm AlertDialog from title+content props — not a substitute for Modal when you need custom footer buttons or slots. */
 const AlertDialog = ({ isOpen, onClose, leastDestructiveRef, content, title, confirmButtonText = "Yes", cancelButtonText = "No", isConfirmLoading, onConfirm, ContentStyle, headerStyle, bodyStyle, footerStyle, closeButtonStyle, button1Style, button2Style, isCentered, key, }) => {
     const { colors } = useCustomTheme();
     return (_jsxs(ChakraAlertDialog, { motionPreset: "slideInBottom", leastDestructiveRef: leastDestructiveRef, onClose: onClose, isOpen: isOpen, isCentered: isCentered, children: [_jsx(AlertDialogOverlay, {}), _jsxs(AlertDialogContent, { bg: colors.background[50], sx: ContentStyle, children: [_jsx(AlertDialogHeader, { sx: headerStyle, children: title }), _jsx(AlertDialogCloseButton, { sx: closeButtonStyle }), _jsx(AlertDialogBody, { sx: bodyStyle, children: content }), _jsxs(AlertDialogFooter, { sx: footerStyle, children: [_jsx(Button, { ref: leastDestructiveRef, onClick: onClose, variant: "outline", colorScheme: "red", size: "sm", sx: button1Style, children: cancelButtonText }), _jsx(Button, { colorScheme: "primary", onClick: onConfirm, isLoading: isConfirmLoading, ml: 3, size: "sm", sx: button2Style, children: confirmButtonText })] })] })] }, key));

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

@@ -4,6 +4,7 @@ import ReactApexChart from "react-apexcharts";
 import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
 import { getDefaultSeriesColors, mergeChartTitleStyle, } from "../../../Theme/tokens/builders/chartColorsFromTheme.js";
 import { baseAxisLabels, baseChart, baseGrid, baseLegend, baseTooltip } from "../chartBase.js";
+/** 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 } = useCustomTheme();
     const seriesColors = useMemo(() => colors !== null && colors !== void 0 ? colors : getDefaultSeriesColors(palette), [colors, palette]);

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

@@ -4,6 +4,7 @@ import ReactApexChart from "react-apexcharts";
 import { useTheme } from "@chakra-ui/react";
 import { chartAxisLabelColor, getDefaultSeriesColors, mergeChartTitleStyle, } from "../../../Theme/tokens/builders/chartColorsFromTheme.js";
 import { baseAxisLabels, baseChart, baseGrid, baseLegend, baseTooltip } from "../chartBase.js";
+/** Bar chart wrapper around react-apexcharts (horizontal/stacked/distributed via props), themed via chartColorsFromTheme + chartBase. */
 export default function ApexBarChart({ data, labels, title, titlePosition, height = 400, width = 500, barColor, xAxisStyle, yAxisStyle, titleStyle, horizontal = false, distributed = false, seriesName = "Data", series, stacked = false, showLegend, legendPosition = "bottom", }) {
     const theme = useTheme();
     const palette = theme.colors;

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

@@ -5,6 +5,7 @@ import { useTheme } from "@chakra-ui/react";
 import ToolTip from "../../ToolTip/ToolTip.js";
 import { getDefaultSeriesColors, mergeChartTitleStyle, } from "../../../Theme/tokens/builders/chartColorsFromTheme.js";
 import { baseAxisLabels, baseChart, baseGrid, baseTooltip } from "../chartBase.js";
+/** 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 = useTheme();
     const palette = theme.colors;

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

@@ -12,6 +12,7 @@ const getValidLegendPosition = (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", }) => {
     var _a;
     const { colors: palette } = useCustomTheme();

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

@@ -4,6 +4,7 @@ import ReactApexChart from "react-apexcharts";
 import { useTheme } from "@chakra-ui/react";
 import { chartInk, chartMode, getDefaultSeriesColors, mergeChartTitleStyle, } from "../../../Theme/tokens/builders/chartColorsFromTheme.js";
 import { baseChart, baseLegend, baseTooltip } from "../chartBase.js";
+/** 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;

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

@@ -4,6 +4,7 @@ import ReactApexChart from "react-apexcharts";
 import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
 import { chartInk, getDefaultSeriesColors, mergeChartTitleStyle, } from "../../../Theme/tokens/builders/chartColorsFromTheme.js";
 import { baseChart, baseLegend } from "../chartBase.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);

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

@@ -0,0 +1,56 @@
+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;
+/**
+ * One hue per app. `avatarColor` hashes into an 8-hue series, so six apps collide more often than
+ * not — Billing and Account shipped identical marks. Assigned over the WHOLE list, never the
+ * filtered one, so searching cannot 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;