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

package/README.md

@@ -2,6 +2,11 @@
 
 A comprehensive React component library built with TypeScript, providing a rich set of UI components for modern web applications.
 
+> **Building with this library (including via an AI assistant)?** Read
+> [COMPONENT-GOTCHAS.md](./COMPONENT-GOTCHAS.md) first — it documents known silent-failure traps
+> and which near-duplicate component to pick for what. It ships with this package, so it's
+> available at `node_modules/pixelize-design-library/COMPONENT-GOTCHAS.md` too.
+
 ## Features
 
 - 🎨 **Modern Design System** - Consistent and beautiful components
@@ -53,6 +58,27 @@ function App() {
 export default App;
 ```
 
+## Theming and filled surfaces
+
+Nine brand presets with light/dark palettes. Wrap your app in `PixelizeThemeProvider` and read tokens
+via `useCustomTheme()`.
+
+**Do not** pair a scale's `[500]` swatch with `colors.white` or `onPrimary` for custom filled UI —
+white often fails WCAG on `[500]` and ink falls back to black (e.g. black text on red badges). Use
+library components (`Button`, `Tag`, `Badge`) or:
+
+```ts
+import { resolveFilledSurface, useCustomTheme } from "pixelize-design-library";
+
+const { colors } = useCustomTheme();
+const solid = resolveFilledSurface(colors.red, colors);
+// solid.fill, solid.color, solid.hoverFill, solid.hoverColor, …
+```
+
+Full rules for app developers and AI assistants: [`src/Theme/THEME-CONTRACT.md`](src/Theme/THEME-CONTRACT.md)
+(§ *Filled surfaces in consumer apps*). After upgrading, rebuild the library (`npm run build`) and run
+`npm run pixelize` in consumer frontends.
+
 ## Components
 
 ### Layout & Navigation

package/dist/Components/Accordion/Accordion.d.ts

@@ -1,3 +1,4 @@
 import { AccordionProps } from "./AccordionProps";
+/** Chakra Accordion wrapper for header/content pairs; FilterSidebar composes this directly for its collapsible filter sections. */
 declare const Accordion: ({ allowMultiple, allowToggle, index, onChange, reduceMotion, items, ...rest }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
 export default Accordion;

package/dist/Components/Accordion/Accordion.js

@@ -6,7 +6,9 @@ const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 const accordionColors_1 = require("./accordionColors");
+/** 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 } = (0, useCustomTheme_1.useCustomTheme)();
     const isDark = (0, accentText_1.isDarkCanvas)(colors.backgroundColor.main);
@@ -14,13 +16,14 @@ const Accordion = ({ allowMultiple, allowToggle, index, onChange, reduceMotion,
     const headingColor = colors.text[800];
     const bodyColor = colors.text[600];
     const { expandedBg, softHover } = (0, react_1.useMemo)(() => (0, accordionColors_1.getAccordionHoverColors)(colors, isDark), [colors, isDark]);
+    const focusRing = (0, react_1.useMemo)(() => (0, outlineRung_1.liftToContrast)(colors.primary[300], colors.background[50], outlineRung_1.AA_NON_TEXT), [colors]);
     return ((0, jsx_runtime_1.jsx)(react_2.Accordion, { allowMultiple: allowMultiple, allowToggle: allowToggle, index: index, onChange: onChange, reduceMotion: reduceMotion, ...rest, children: items.map((item, idx) => {
             var _a;
             return ((0, jsx_runtime_1.jsx)(react_2.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 ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", { children: (0, jsx_runtime_1.jsxs)(react_2.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/Components/Accordion/AccordionProps.d.ts

@@ -1,8 +1,10 @@
 import { AccordionProps as ChakraAccordionProps, AccordionItemProps, AccordionButtonProps, AccordionPanelProps } from "@chakra-ui/react";
+/** Chakra's AccordionProps plus the header/content rows to render; each row can override its own button/panel/item styles. */
 export type AccordionProps = ChakraAccordionProps & {
     items: {
         header: React.ReactNode;
         content: React.ReactNode;
+        /** Spread after the built-in style props (incl. `_hover`) — `bg`/`_hover` here replace, not merge, the expanded/hover highlight. */
         buttonProps?: AccordionButtonProps;
         panelProps?: AccordionPanelProps;
         itemProps?: AccordionItemProps;

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

@@ -1,3 +1,4 @@
 import { AlertDialogsProps } from "./AlertDialogProps";
+/** Renders a fixed Cancel/Confirm AlertDialog from title+content props — not a substitute for Modal when you need custom footer buttons or slots. */
 declare const AlertDialog: ({ isOpen, onClose, leastDestructiveRef, content, title, confirmButtonText, cancelButtonText, isConfirmLoading, onConfirm, ContentStyle, headerStyle, bodyStyle, footerStyle, closeButtonStyle, button1Style, button2Style, isCentered, key, }: AlertDialogsProps) => import("react/jsx-runtime").JSX.Element;
 export default AlertDialog;

package/dist/Components/AlertDialog/AlertDialog.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+/** 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 } = (0, useCustomTheme_1.useCustomTheme)();
     return ((0, jsx_runtime_1.jsxs)(react_1.AlertDialog, { motionPreset: "slideInBottom", leastDestructiveRef: leastDestructiveRef, onClose: onClose, isOpen: isOpen, isCentered: isCentered, children: [(0, jsx_runtime_1.jsx)(react_1.AlertDialogOverlay, {}), (0, jsx_runtime_1.jsxs)(react_1.AlertDialogContent, { bg: colors.background[50], sx: ContentStyle, children: [(0, jsx_runtime_1.jsx)(react_1.AlertDialogHeader, { sx: headerStyle, children: title }), (0, jsx_runtime_1.jsx)(react_1.AlertDialogCloseButton, { sx: closeButtonStyle }), (0, jsx_runtime_1.jsx)(react_1.AlertDialogBody, { sx: bodyStyle, children: content }), (0, jsx_runtime_1.jsxs)(react_1.AlertDialogFooter, { sx: footerStyle, children: [(0, jsx_runtime_1.jsx)(react_1.Button, { ref: leastDestructiveRef, onClick: onClose, variant: "outline", colorScheme: "red", size: "sm", sx: button1Style, children: cancelButtonText }), (0, jsx_runtime_1.jsx)(react_1.Button, { colorScheme: "primary", onClick: onConfirm, isLoading: isConfirmLoading, ml: 3, size: "sm", sx: button2Style, children: confirmButtonText })] })] })] }, key));

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

@@ -1,5 +1,6 @@
 import { AlertDialogProps, AlertProps } from "@chakra-ui/react";
 import { ReactElement } from "react";
+/** colorScheme/size/status/variant/addRole (Picked from Chakra's AlertProps) are typed but never read — buttons are hardcoded; style via button1Style/button2Style. */
 export type AlertDialogsProps = Pick<AlertDialogProps, "isOpen" | "onClose" | "leastDestructiveRef"> & Pick<AlertProps, "addRole" | "colorScheme" | "size" | "status" | "variant"> & {
     title: string;
     content: ReactElement;
@@ -15,5 +16,6 @@ export type AlertDialogsProps = Pick<AlertDialogProps, "isOpen" | "onClose" | "l
     closeButtonStyle?: React.CSSProperties;
     button1Style?: React.CSSProperties;
     button2Style?: React.CSSProperties;
+    /** React reserves "key" and never forwards it as a prop, so this is always undefined here — no effect. */
     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

@@ -9,6 +9,7 @@ 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");
+/** 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 seriesColors = (0, react_1.useMemo)(() => colors !== null && colors !== void 0 ? colors : (0, chartColorsFromTheme_1.getDefaultSeriesColors)(palette), [colors, palette]);

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

@@ -1,10 +1,14 @@
+/** "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 = {
     variant?: AreaChartVariant;
+    /** Ignored entirely once `series` is also passed — `series` always wins, no merge. */
     data?: number[];
     series?: ApexAreaSeries[];
     labels?: 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

@@ -10,6 +10,7 @@ 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");
+/** 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;

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

@@ -1,10 +1,14 @@
+/** 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[];
     labels: string[];
     title?: string;
+    /** No default here (renders ApexCharts' native left-align) — every sibling chart in this family defaults it to "center". */
     titlePosition?: "left" | "center" | "right";
     height?: number | string;
     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[];
     xAxisStyle?: StyleProps;
     yAxisStyle?: StyleProps;
@@ -12,11 +16,13 @@ export type ApexBarChartProps = {
     horizontal?: boolean;
     distributed?: boolean;
     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[];
     }[];
     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;
     legendPosition?: "top" | "right" | "bottom" | "left";
 };

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

@@ -10,6 +10,7 @@ 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");
+/** 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;

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

@@ -1,13 +1,19 @@
+/** Renders exactly one line from `data`; not a substitute for ApexBarChart/ApexPieChart when comparing multiple series side by side. */
 export type ApexLineChartProps = {
+    /** "realtime" doesn't animate your data — after mount it overwrites the series with Math.random() values every second instead. */
     variant?: LineChartVariant;
+    /** Read only at mount — later prop updates are silently ignored unless this component remounts (new `key`). */
     data: number[];
     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[];
     title?: string;
     height?: number | string;
     width?: number | string;
     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;
     titleStyle?: {
         color?: string;
@@ -18,6 +24,7 @@ export type ApexLineChartProps = {
     compact?: boolean;
     titleClampLines?: number;
     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;
@@ -25,4 +32,5 @@ export type ApexLineChartProps = {
     };
     toolbarBreakpointPct?: number;
 };
+/** Chart mode: "basic" plots `data` as given; "realtime" instead free-runs on random values — see `variant` below. */
 export type LineChartVariant = "basic" | "realtime";

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

@@ -1,3 +1,4 @@
 import { ApexPieChartProps } from "./ApexPieChartProps";
+/** 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, }: ApexPieChartProps) => import("react/jsx-runtime").JSX.Element;
 export default ApexPieChart;

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

@@ -17,6 +17,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 } = (0, useCustomTheme_1.useCustomTheme)();

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

@@ -1,11 +1,14 @@
+/** 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 = {
     variant?: DonutPieVariant;
     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[];
     title?: string;
     height?: number | string;
     width?: number | string;
     donutColors?: string[];
+    /** Wins over `donutColors` when both are set — donutColors is then silently ignored, not merged with it. */
     chartColor?: string[];
     titlePosition?: "left" | "center" | "right";
     titleStyle?: {
@@ -15,7 +18,9 @@ export type ApexPieChartProps = {
         fontFamily?: string;
     };
     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;
     surfaceColor?: string;
     donutSize?: string;
@@ -31,4 +36,5 @@ export type ApexPieChartProps = {
         markerOffsetY?: number;
     };
 };
+/** Visual preset for the pie/donut fill; "pie-with-image" is fixed to two placeholder images, not configurable via props. */
 export type DonutPieVariant = "pie" | "donut" | "update-donut" | "monochrome-pie" | "gradient-donut" | "semi-donut" | "donut-with-pattern" | "pie-with-image";

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

@@ -9,6 +9,7 @@ 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");
+/** 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;

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

@@ -1,6 +1,8 @@
+/** 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 = {
     variant?: PolarVariant;
     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[];
     title?: string;
     height?: number | string;
@@ -19,4 +21,5 @@ export type ApexPolarChartProps = {
         position?: "top" | "right" | "bottom" | "left";
     };
 };
+/** "monochrome" recolors every wedge as shades of one hue instead of the palette's distinct series colors. */
 export type PolarVariant = "basic" | "monochrome";

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

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

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

@@ -9,6 +9,7 @@ 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");
+/** 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 } = (0, useCustomTheme_1.useCustomTheme)();
     const ink = (0, chartColorsFromTheme_1.chartInk)(palette);

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

@@ -1,4 +1,6 @@
+/** "semi" draws a half-circle gauge; "multi" stacks several bars and forces its own hollow size (see `hollowSize`). */
 export type RadialChartVariant = "gauge" | "multi" | "semi";
+/** Props for the radial/gauge chart; `totalLabel` only renders when `variant="multi"`, which also ignores `hollowSize`. */
 export type ApexRadialChartProps = {
     variant?: RadialChartVariant;
     data: number[];
@@ -10,5 +12,6 @@ export type ApexRadialChartProps = {
     colors?: string[];
     totalLabel?: string;
     trackColor?: string;
+    /** Ignored when `variant="multi"` — the ring width is hardcoded to `"52%"` in that variant. */
     hollowSize?: string;
 };

package/dist/Components/AppSwitcher/AppMark.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import { chartMode } from "../../Theme/tokens/builders/chartColorsFromTheme";
+import { type AppOption } from "./AppSwitcherProps";
+/**
+ * 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 declare const assignAppHues: (apps: readonly AppOption[], mode: ReturnType<typeof chartMode>) => string[];
+export declare const appTint: (hue: string, surface: string, white: string) => string;
+export declare const appTintInk: (fill: string, white: string, black: string) => string;
+declare const AppMark: React.FC<{
+    app: AppOption;
+    hue: string;
+    boxSize: string;
+    iconSize: number;
+    muted?: boolean;
+}>;
+export default AppMark;

package/dist/Components/AppSwitcher/AppMark.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.appTintInk = exports.appTint = exports.assignAppHues = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const color_1 = require("../../Theme/tokens/builders/color");
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
+const accentText_2 = require("../../Theme/tokens/builders/accentText");
+const chartColorsFromTheme_1 = require("../../Theme/tokens/builders/chartColorsFromTheme");
+const statusTone_1 = require("../../Theme/tokens/builders/statusTone");
+const OrgSwitcherProps_1 = require("../OrgSwitcher/OrgSwitcherProps");
+const AppSwitcherProps_1 = require("./AppSwitcherProps");
+// 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.
+ */
+const assignAppHues = (apps, mode) => {
+    const ramp = chartColorsFromTheme_1.CATEGORICAL_SERIES[mode].map(statusTone_1.resolveAvatarFill);
+    const taken = new Set(apps.flatMap((a) => (a.color ? [a.color] : [])));
+    return apps.map((app) => {
+        if (app.color)
+            return app.color;
+        const seed = (0, OrgSwitcherProps_1.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;
+    });
+};
+exports.assignAppHues = assignAppHues;
+// 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.
+const appTint = (hue, surface, white) => (0, outlineRung_1.liftToContrast)((0, color_1.mix)(hue, surface, 1 - FILL_STRENGTH), white, accentText_2.AA_NORMAL_TEXT);
+exports.appTint = appTint;
+const appTintInk = (fill, white, black) => (0, accentText_1.onFilled)(fill, white, black);
+exports.appTintInk = appTintInk;
+const AppMark = ({ app, hue, boxSize, iconSize, muted = false, }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    if (app.iconUrl) {
+        return ((0, jsx_runtime_1.jsx)(react_2.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 : (0, exports.appTint)(hue, surface, colors.white);
+    const ink = muted ? colors.textMuted : (0, exports.appTintInk)(fill, colors.white, colors.black);
+    // lucide icons are forwardRef objects, not functions — a typeof check silently drops them.
+    const isElement = (0, react_1.isValidElement)(app.icon);
+    const Icon = !isElement && app.icon ? app.icon : null;
+    return ((0, jsx_runtime_1.jsx)(react_2.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 ? ((0, jsx_runtime_1.jsx)(Icon, { size: iconSize, color: ink })) : (0, react_1.isValidElement)(app.icon) ? ((0, jsx_runtime_1.jsx)(react_2.Box, { display: "flex", color: ink, children: app.icon })) : ((0, AppSwitcherProps_1.appInitials)(app.name)) }));
+};
+exports.default = AppMark;

package/dist/Components/AppSwitcher/AppSwitcher.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { type AppSwitcherProps } from "./AppSwitcherProps";
+declare const AppSwitcher: React.FC<AppSwitcherProps>;
+export default AppSwitcher;