pixelize-design-library 2.3.21 → 2.3.25

package/dist/Components/SelectV2/SelectV2.js

@@ -0,0 +1,185 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = SelectV2;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const fieldStyles_1 = require("../Common/fieldStyles");
+const FormLabel_1 = require("../Common/FormLabel");
+const ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
+const HelperText_1 = __importDefault(require("../Common/HelperText"));
+// Mirrors Select.styles.ts sizing so a call site swapping Select -> SelectV2 keeps its layout.
+const SIZE_MAP = {
+    sm: { h: "2.125rem", fontSize: "0.8125rem", px: "0.5rem" },
+    md: { h: "2.375rem", fontSize: "0.875rem", px: "0.75rem" },
+    lg: { h: "2.75rem", fontSize: "0.9375rem", px: "1rem" },
+};
+const asIdSet = (values) => new Set((values !== null && values !== void 0 ? values : []).map((v) => v.toString()));
+function SelectV2(props) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+    const { options = [], placeholder = "Select Option", label, error = false, errorMessage, helperText, isDisabled = false, isRequired = false, size = "md", isSearchable = true, width, formControlStyle, onBlur, onFocus, renderOption, renderValue, maxMenuHeight = "16rem", defaultOpen = false, "data-testid": dataTestId, "aria-label": ariaLabel, } = props;
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const { isOpen, onOpen, onClose } = (0, react_2.useDisclosure)({ defaultIsOpen: defaultOpen });
+    const [filterText, setFilterText] = (0, react_1.useState)("");
+    const [activeIndex, setActiveIndex] = (0, react_1.useState)(-1);
+    const triggerRef = (0, react_1.useRef)(null);
+    const filterInputRef = (0, react_1.useRef)(null);
+    const listRef = (0, react_1.useRef)(null);
+    const s = (_a = SIZE_MAP[size]) !== null && _a !== void 0 ? _a : SIZE_MAP.md;
+    const fieldStyles = (0, fieldStyles_1.getFieldStateStyles)(theme, { error, focused: isOpen });
+    const selectedIds = (0, react_1.useMemo)(() => props.isMulti
+        ? asIdSet(props.value)
+        : asIdSet(props.value !== undefined ? [props.value] : undefined), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [props.isMulti, props.isMulti ? props.value : props.value]);
+    const selectedOptions = (0, react_1.useMemo)(() => options.filter((option) => selectedIds.has(option.id.toString())), [options, selectedIds]);
+    const filteredOptions = (0, react_1.useMemo)(() => {
+        if (!isSearchable || !filterText.trim())
+            return options;
+        const needle = filterText.trim().toLowerCase();
+        return options.filter((option) => option.label.toString().toLowerCase().includes(needle));
+    }, [options, filterText, isSearchable]);
+    const resetAndClose = (0, react_1.useCallback)((opts) => {
+        if (props.isMulti && (opts === null || opts === void 0 ? void 0 : opts.keepOpenForMulti))
+            return;
+        onClose();
+        setFilterText("");
+        setActiveIndex(-1);
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [onClose, onBlur, props.isMulti]);
+    const handleOpen = () => {
+        var _a;
+        if (isDisabled)
+            return;
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus();
+        onOpen();
+        const firstSelected = props.isMulti ? (_a = props.value) === null || _a === void 0 ? void 0 : _a[0] : props.value;
+        const selectedFilteredIndex = filteredOptions.findIndex((option) => option.id.toString() === (firstSelected === null || firstSelected === void 0 ? void 0 : firstSelected.toString()));
+        setActiveIndex(selectedFilteredIndex);
+    };
+    const handleSelect = (option) => {
+        var _a, _b;
+        if (option.isDisabled)
+            return;
+        if (props.isMulti) {
+            const alreadySelected = selectedIds.has(option.id.toString());
+            const next = alreadySelected
+                ? selectedOptions.filter((selected) => selected.id.toString() !== option.id.toString())
+                : [...selectedOptions, option];
+            props.onChange(next);
+            resetAndClose({ keepOpenForMulti: true });
+            (_a = filterInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            return;
+        }
+        props.onChange(option);
+        resetAndClose();
+        (_b = triggerRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+    };
+    (0, react_1.useEffect)(() => {
+        if (isOpen && isSearchable) {
+            // Popover content mounts after open; defer focus so it lands on the rendered input.
+            const id = requestAnimationFrame(() => { var _a; return (_a = filterInputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); });
+            return () => cancelAnimationFrame(id);
+        }
+    }, [isOpen, isSearchable]);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (activeIndex < 0 || !listRef.current)
+            return;
+        const activeEl = listRef.current.querySelector(`[data-index="${activeIndex}"]`);
+        (_a = activeEl === null || activeEl === void 0 ? void 0 : activeEl.scrollIntoView) === null || _a === void 0 ? void 0 : _a.call(activeEl, { block: "nearest" });
+    }, [activeIndex]);
+    const moveActive = (delta) => {
+        if (!filteredOptions.length)
+            return;
+        setActiveIndex((current) => {
+            const next = current + delta;
+            if (next < 0)
+                return filteredOptions.length - 1;
+            if (next >= filteredOptions.length)
+                return 0;
+            return next;
+        });
+    };
+    const handleTriggerKeyDown = (event) => {
+        if (isDisabled)
+            return;
+        if (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            handleOpen();
+        }
+    };
+    const handleListKeyDown = (event) => {
+        var _a;
+        switch (event.key) {
+            case "ArrowDown":
+                event.preventDefault();
+                moveActive(1);
+                break;
+            case "ArrowUp":
+                event.preventDefault();
+                moveActive(-1);
+                break;
+            case "Enter": {
+                event.preventDefault();
+                const activeOption = filteredOptions[activeIndex];
+                if (activeOption)
+                    handleSelect(activeOption);
+                break;
+            }
+            case "Escape":
+                event.preventDefault();
+                resetAndClose();
+                (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                break;
+            case "Tab":
+                resetAndClose();
+                break;
+            default:
+                break;
+        }
+    };
+    const listboxId = `selectv2-listbox-${label !== null && label !== void 0 ? label : "field"}`;
+    const defaultTriggerContent = () => {
+        var _a;
+        if (props.isMulti) {
+            const max = (_a = props.maxLabelsBeforeSummary) !== null && _a !== void 0 ? _a : 2;
+            if (selectedOptions.length === 0)
+                return placeholder;
+            if (selectedOptions.length > max) {
+                return `${selectedOptions.length} selected`;
+            }
+            return selectedOptions.map((o) => o.label).join(", ");
+        }
+        return selectedOptions[0] ? selectedOptions[0].label : placeholder;
+    };
+    const triggerIcon = !props.isMulti && ((_b = selectedOptions[0]) === null || _b === void 0 ? void 0 : _b.icon) ? selectedOptions[0].icon : null;
+    return ((0, jsx_runtime_1.jsxs)(react_2.FormControl, { isInvalid: error, isDisabled: isDisabled, style: formControlStyle, width: width, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, isRequired: isRequired })), (0, jsx_runtime_1.jsxs)(react_2.Popover, { isOpen: isOpen, onClose: () => resetAndClose(), placement: "bottom-start", matchWidth: true, autoFocus: false, returnFocusOnClose: false, gutter: 4, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsxs)(react_2.Box, { as: "button", type: "button", ref: triggerRef, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-controls": listboxId, "aria-disabled": isDisabled, "aria-label": ariaLabel, disabled: isDisabled, onClick: handleOpen, onKeyDown: handleTriggerKeyDown, display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%", h: s.h, px: s.px, fontSize: s.fontSize, fontWeight: 500, textAlign: "left", cursor: isDisabled ? "not-allowed" : "pointer", opacity: isDisabled ? 0.4 : 1, color: selectedOptions.length ? (_c = theme.colors.text) === null || _c === void 0 ? void 0 : _c[900] : (_d = theme.colors.gray) === null || _d === void 0 ? void 0 : _d[500], "data-testid": dataTestId, ...fieldStyles, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { as: "span", display: "inline-flex", alignItems: "center", gap: 1.5, minW: 0, isTruncated: true, children: [triggerIcon ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-flex", flexShrink: 0, children: triggerIcon })) : null, (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", isTruncated: true, fontStyle: selectedOptions.length ? "normal" : "italic", children: renderValue ? renderValue(selectedOptions) : defaultTriggerContent() })] }), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-flex", flexShrink: 0, ml: 2, transition: "transform 0.2s ease", transform: isOpen ? "rotate(180deg)" : "rotate(0deg)", color: (_e = theme.colors.gray) === null || _e === void 0 ? void 0 : _e[500], children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16 }) })] }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsxs)(react_2.PopoverContent, { width: "100%", borderRadius: "0.625rem", border: `0.063rem solid ${(_g = (_f = theme.colors.boxborder) === null || _f === void 0 ? void 0 : _f[200]) !== null && _g !== void 0 ? _g : (_h = theme.colors.gray) === null || _h === void 0 ? void 0 : _h[200]}`, boxShadow: (_j = theme.shadows) === null || _j === void 0 ? void 0 : _j.lg, overflow: "hidden", onKeyDown: handleListKeyDown, children: [isSearchable && ((0, jsx_runtime_1.jsx)(react_2.Box, { p: 2, borderBottom: `0.063rem solid ${(_l = (_k = theme.colors.boxborder) === null || _k === void 0 ? void 0 : _k[100]) !== null && _l !== void 0 ? _l : (_m = theme.colors.gray) === null || _m === void 0 ? void 0 : _m[200]}`, children: (0, jsx_runtime_1.jsx)(react_2.Input, { ref: filterInputRef, size: "sm", placeholder: "Type to filter...", value: filterText, onChange: (event) => {
+                                            setFilterText(event.target.value);
+                                            setActiveIndex(0);
+                                        }, "aria-label": "Filter options" }) })), (0, jsx_runtime_1.jsxs)(react_2.Box, { id: listboxId, ref: listRef, role: "listbox", "aria-multiselectable": props.isMulti || undefined, maxH: maxMenuHeight, overflowY: "auto", py: 1, sx: {
+                                        scrollbarWidth: "thin",
+                                        scrollbarColor: `${(_o = theme.colors.gray) === null || _o === void 0 ? void 0 : _o[300]} transparent`,
+                                        "&::-webkit-scrollbar": { width: "6px" },
+                                        "&::-webkit-scrollbar-thumb": {
+                                            background: (_p = theme.colors.gray) === null || _p === void 0 ? void 0 : _p[300],
+                                            borderRadius: "3px",
+                                        },
+                                    }, children: [filteredOptions.length === 0 && ((0, jsx_runtime_1.jsx)(react_2.Box, { px: 3, py: 2, fontSize: "0.8125rem", color: (_q = theme.colors.gray) === null || _q === void 0 ? void 0 : _q[500], children: "No Options" })), filteredOptions.map((option, index) => {
+                                            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+                                            const isSelected = selectedIds.has(option.id.toString());
+                                            const isActive = index === activeIndex;
+                                            return ((0, jsx_runtime_1.jsxs)(react_2.Box, { id: `${listboxId}-option-${index}`, "data-index": index, role: "option", "aria-selected": isSelected, "aria-disabled": option.isDisabled, onMouseEnter: () => setActiveIndex(index), onClick: () => handleSelect(option), mx: 1.5, px: 2.5, py: 1.5, borderRadius: "0.375rem", cursor: option.isDisabled ? "not-allowed" : "pointer", opacity: option.isDisabled ? 0.4 : 1, display: "flex", alignItems: "center", gap: 2, fontSize: "0.8125rem", fontWeight: isSelected && !props.isMulti ? 600 : 500, color: isSelected && !props.isMulti
+                                                    ? (_b = (_a = theme.colors.primary) === null || _a === void 0 ? void 0 : _a[700]) !== null && _b !== void 0 ? _b : (_c = theme.colors.primary) === null || _c === void 0 ? void 0 : _c[600]
+                                                    : (_e = (_d = theme.colors.text) === null || _d === void 0 ? void 0 : _d[700]) !== null && _e !== void 0 ? _e : (_f = theme.colors.gray) === null || _f === void 0 ? void 0 : _f[700], bg: isActive
+                                                    ? (_j = (_h = (_g = theme.colors.primary) === null || _g === void 0 ? void 0 : _g.opacity) === null || _h === void 0 ? void 0 : _h[8]) !== null && _j !== void 0 ? _j : (_k = theme.colors.gray) === null || _k === void 0 ? void 0 : _k[100]
+                                                    : "transparent", transition: "background 0.12s ease, color 0.12s ease", children: [props.isMulti ? ((0, jsx_runtime_1.jsx)(react_2.Checkbox, { isChecked: isSelected, isDisabled: option.isDisabled, pointerEvents: "none", tabIndex: -1 })) : null, renderOption ? ((0, jsx_runtime_1.jsx)(react_2.Box, { flex: 1, minW: 0, children: renderOption(option, { isSelected, isActive }) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [option.icon ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-flex", flexShrink: 0, children: option.icon })) : null, (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: 1, minW: 0, isTruncated: true, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", isTruncated: true, children: option.label }), option.description ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "block", fontSize: "0.75rem", fontWeight: 400, color: (_l = theme.colors.gray) === null || _l === void 0 ? void 0 : _l[500], isTruncated: true, children: option.description })) : null] })] }))] }, option.id));
+                                        })] })] }) })] }), error && (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { errorMessage: errorMessage }), helperText && !error && (0, jsx_runtime_1.jsx)(HelperText_1.default, { helperText: helperText })] }));
+}

package/dist/Components/SelectV2/SelectV2Props.d.ts

@@ -0,0 +1,67 @@
+import type { ReactNode } from "react";
+export type OptionProp = {
+    id: string | number;
+    label: string | number;
+    /** Optional leading icon/avatar for this option's row (and the trigger, when selected). */
+    icon?: ReactNode;
+    /** Optional secondary line under the label (e.g. an email under a name). */
+    description?: string;
+    isDisabled?: boolean;
+};
+export type SelectV2Size = "sm" | "md" | "lg";
+type SelectV2CommonProps = {
+    options: OptionProp[];
+    placeholder?: string;
+    label?: string;
+    error?: boolean;
+    errorMessage?: string;
+    helperText?: string;
+    isDisabled?: boolean;
+    isRequired?: boolean;
+    size?: SelectV2Size;
+    /** Shows a type-ahead filter input at the top of the popup. Defaults to true. */
+    isSearchable?: boolean;
+    /** Width applied to the trigger + popup. Defaults to 100% of the container. */
+    width?: string | number;
+    formControlStyle?: React.CSSProperties;
+    onBlur?: () => void;
+    onFocus?: () => void;
+    /** Forwarded to the trigger button — lets call sites keep existing RTL/e2e queries when migrating from `Select`. */
+    "data-testid"?: string;
+    /** Forwarded to the trigger button — for a labelless select (no `label` prop) that still needs an accessible name. */
+    "aria-label"?: string;
+    /**
+     * Full control over an option row's contents (icon + label + badge, avatar + name/email, etc).
+     * Falls back to plain `option.label` text when omitted. Receives `isSelected`/`isActive` so a
+     * custom row can mirror the built-in selected/keyboard-active styling if it re-implements them.
+     */
+    renderOption?: (option: OptionProp, state: {
+        isSelected: boolean;
+        isActive: boolean;
+    }) => ReactNode;
+    /** Custom trigger content when a value (or values) is selected. Falls back to label text / icon. */
+    renderValue?: (selected: OptionProp[]) => ReactNode;
+    /** Max popup height before the option list scrolls. Defaults to "16rem". */
+    maxMenuHeight?: string;
+    /**
+     * Opens the popup immediately on mount instead of waiting for a click — for inline-edit
+     * patterns (a table cell that swaps to a select the instant it becomes editable). Clicking
+     * away still closes it via the normal Popover close-on-blur behavior (which fires `onBlur`).
+     */
+    defaultOpen?: boolean;
+};
+export type SelectV2SingleProps = SelectV2CommonProps & {
+    isMulti?: false;
+    value?: string | number;
+    onChange: (selectedOption: OptionProp | undefined) => void;
+};
+export type SelectV2MultiProps = SelectV2CommonProps & {
+    isMulti: true;
+    value?: (string | number)[];
+    onChange: (selectedOptions: OptionProp[]) => void;
+    /** Show "N selected" once more than this many are chosen, instead of listing every label. Defaults to 2. */
+    maxLabelsBeforeSummary?: number;
+};
+export type SelectV2Props = SelectV2SingleProps | SelectV2MultiProps;
+export {};
+//# sourceMappingURL=SelectV2Props.d.ts.map

package/dist/Components/SelectV2/SelectV2Props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectV2Props.d.ts","sourceRoot":"","sources":["../../../src/Components/SelectV2/SelectV2Props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,UAAU,GAAG;IACvB,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,2FAA2F;IAC3F,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,4EAA4E;IAC5E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE9C,KAAK,mBAAmB,GAAG;IACzB,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,iFAAiF;IACjF,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,+EAA+E;IAC/E,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACvC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,oHAAoH;IACpH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,sHAAsH;IACtH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;OAIG;IACH,YAAY,CAAC,EAAE,CACb,MAAM,EAAE,UAAU,EAClB,KAAK,EAAE;QAAE,UAAU,EAAE,OAAO,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAA;KAAE,KAC9C,SAAS,CAAC;IACf,oGAAoG;IACpG,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,UAAU,EAAE,KAAK,SAAS,CAAC;IACpD,4EAA4E;IAC5E,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,mBAAmB,GAAG;IACtD,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,QAAQ,EAAE,CAAC,cAAc,EAAE,UAAU,GAAG,SAAS,KAAK,IAAI,CAAC;CAC5D,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,mBAAmB,GAAG;IACrD,OAAO,EAAE,IAAI,CAAC;IACd,KAAK,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IAC5B,QAAQ,EAAE,CAAC,eAAe,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;IAClD,4GAA4G;IAC5G,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACjC,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,mBAAmB,GAAG,kBAAkB,CAAC"}

package/dist/Components/SelectV2/SelectV2Props.js

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

package/dist/Components/SideBar/sidebarAccentColors.d.ts

@@ -0,0 +1,21 @@
+import type { PaletteProps, ThemeName } from "../../Theme/tokens/types";
+export declare const getSidebarActiveAccent: (colors: PaletteProps, brand: ThemeName | undefined, isDark: boolean) => {
+    icon: string;
+    label: string;
+};
+/**
+ * `sidebar.background` never inverts across modes (`buildDarkPalette.ts`), but `primary`
+ * does — so `primary[300]`/`primary[100]` correctly read as a light accent/label against a
+ * dark canvas in light mode, then invert to near-black in dark mode against that SAME
+ * permanently-dark canvas. Reusing each rung's own light-mode value in dark mode is the
+ * exact pairing already proven legible today.
+ *
+ * `brand` comes from `PixelizeThemeProvider`'s context, read directly (not via the throwing
+ * `useThemeMode()`) so a consumer on a plain `ChakraProvider` — dark mode is opt-in per
+ * CLAUDE.md — degrades to the current-mode value instead of crashing.
+ */
+export declare const useSidebarActiveAccent: (colors: PaletteProps, isDark: boolean) => {
+    icon: string;
+    label: string;
+};
+//# sourceMappingURL=sidebarAccentColors.d.ts.map

package/dist/Components/SideBar/sidebarAccentColors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebarAccentColors.d.ts","sourceRoot":"","sources":["../../../src/Components/SideBar/sidebarAccentColors.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAGxE,eAAO,MAAM,sBAAsB,GACjC,QAAQ,YAAY,EACpB,OAAO,SAAS,GAAG,SAAS,EAC5B,QAAQ,OAAO,KACd;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAU/B,CAAC;AAEF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,sBAAsB,GACjC,QAAQ,YAAY,EACpB,QAAQ,OAAO,KACd;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAO/B,CAAC"}

package/dist/Components/SideBar/sidebarAccentColors.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSidebarActiveAccent = exports.getSidebarActiveAccent = void 0;
+const react_1 = require("react");
+const brands_1 = require("../../Theme/tokens/brands");
+const PixelizeThemeProvider_1 = require("../../Theme/provider/PixelizeThemeProvider");
+const getSidebarActiveAccent = (colors, brand, isDark) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    const fallbackIcon = (_d = (_b = (_a = colors.primary) === null || _a === void 0 ? void 0 : _a[300]) !== null && _b !== void 0 ? _b : (_c = colors.gray) === null || _c === void 0 ? void 0 : _c[300]) !== null && _d !== void 0 ? _d : "#ffffff";
+    const fallbackLabel = (_h = (_f = (_e = colors.primary) === null || _e === void 0 ? void 0 : _e[100]) !== null && _f !== void 0 ? _f : (_g = colors.gray) === null || _g === void 0 ? void 0 : _g[100]) !== null && _h !== void 0 ? _h : "#ffffff";
+    if (!isDark)
+        return { icon: fallbackIcon, label: fallbackLabel };
+    const lightPrimary = brand ? (_j = brands_1.lightPalettes[brand]) === null || _j === void 0 ? void 0 : _j.primary : undefined;
+    return {
+        icon: (_k = lightPrimary === null || lightPrimary === void 0 ? void 0 : lightPrimary[300]) !== null && _k !== void 0 ? _k : fallbackIcon,
+        label: (_l = lightPrimary === null || lightPrimary === void 0 ? void 0 : lightPrimary[100]) !== null && _l !== void 0 ? _l : fallbackLabel,
+    };
+};
+exports.getSidebarActiveAccent = getSidebarActiveAccent;
+/**
+ * `sidebar.background` never inverts across modes (`buildDarkPalette.ts`), but `primary`
+ * does — so `primary[300]`/`primary[100]` correctly read as a light accent/label against a
+ * dark canvas in light mode, then invert to near-black in dark mode against that SAME
+ * permanently-dark canvas. Reusing each rung's own light-mode value in dark mode is the
+ * exact pairing already proven legible today.
+ *
+ * `brand` comes from `PixelizeThemeProvider`'s context, read directly (not via the throwing
+ * `useThemeMode()`) so a consumer on a plain `ChakraProvider` — dark mode is opt-in per
+ * CLAUDE.md — degrades to the current-mode value instead of crashing.
+ */
+const useSidebarActiveAccent = (colors, isDark) => {
+    const themeMode = (0, react_1.useContext)(PixelizeThemeProvider_1.ThemeModeContext);
+    const brand = themeMode === null || themeMode === void 0 ? void 0 : themeMode.brand;
+    return (0, react_1.useMemo)(() => (0, exports.getSidebarActiveAccent)(colors, brand, isDark), [colors, brand, isDark]);
+};
+exports.useSidebarActiveAccent = useSidebarActiveAccent;

package/dist/Components/Table/components/tableRowHoverStyle.d.ts

@@ -0,0 +1,13 @@
+import type { PaletteProps } from "../../../Theme/tokens/types";
+/**
+ * Per-cell hover fill for a table row. `table.hover[300]` (the token built for this) still works
+ * in light mode — a pale tint against a white canvas — but in dark mode that rung sits within
+ * ~10 lightness points of the near-black canvas (both compressed near L7-15), so it computes to
+ * ~1.2:1 contrast: invisible, which is exactly what QA reported. `background[900]` is this
+ * palette's dark-mode "bright highlight" rung (~9.7-10.7:1 against the canvas, verified
+ * numerically across brands) — but the row's resting ink (`text[500]`) is tuned for a near-black
+ * backdrop and goes illegible against a bright one, so hover must also flip `color`, mirroring how
+ * Jodit's own dark-mode hover rule flips text to its canvas color alongside the brighter fill.
+ */
+export declare const getTableRowHoverStyle: (colors: PaletteProps, isDark: boolean) => Record<string, string>;
+//# sourceMappingURL=tableRowHoverStyle.d.ts.map

package/dist/Components/Table/components/tableRowHoverStyle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tableRowHoverStyle.d.ts","sourceRoot":"","sources":["../../../../src/Components/Table/components/tableRowHoverStyle.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAEhE;;;;;;;;;GASG;AACH,eAAO,MAAM,qBAAqB,GAAI,QAAQ,YAAY,EAAE,QAAQ,OAAO,KAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAUlG,CAAC"}

package/dist/Components/Table/components/tableRowHoverStyle.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTableRowHoverStyle = void 0;
+/**
+ * Per-cell hover fill for a table row. `table.hover[300]` (the token built for this) still works
+ * in light mode — a pale tint against a white canvas — but in dark mode that rung sits within
+ * ~10 lightness points of the near-black canvas (both compressed near L7-15), so it computes to
+ * ~1.2:1 contrast: invisible, which is exactly what QA reported. `background[900]` is this
+ * palette's dark-mode "bright highlight" rung (~9.7-10.7:1 against the canvas, verified
+ * numerically across brands) — but the row's resting ink (`text[500]`) is tuned for a near-black
+ * backdrop and goes illegible against a bright one, so hover must also flip `color`, mirroring how
+ * Jodit's own dark-mode hover rule flips text to its canvas color alongside the brighter fill.
+ */
+const getTableRowHoverStyle = (colors, isDark) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    if (isDark) {
+        return {
+            backgroundColor: (_b = (_a = colors.background) === null || _a === void 0 ? void 0 : _a[900]) !== null && _b !== void 0 ? _b : (_d = (_c = colors.table) === null || _c === void 0 ? void 0 : _c.hover) === null || _d === void 0 ? void 0 : _d[300],
+            color: (_e = colors.backgroundColor) === null || _e === void 0 ? void 0 : _e.main,
+        };
+    }
+    return {
+        backgroundColor: (_h = (_g = (_f = colors.table) === null || _f === void 0 ? void 0 : _f.hover) === null || _g === void 0 ? void 0 : _g[300]) !== null && _h !== void 0 ? _h : (_k = (_j = colors.secondary) === null || _j === void 0 ? void 0 : _j.opacity) === null || _k === void 0 ? void 0 : _k[4],
+    };
+};
+exports.getTableRowHoverStyle = getTableRowHoverStyle;

package/dist/Theme/chakra/Avatar.styles.d.ts

@@ -0,0 +1,33 @@
+import type { StyleFunctionProps } from "@chakra-ui/react";
+declare const $badgeBorder: {
+    variable: string;
+    reference: string;
+};
+export declare const Avatar: {
+    baseStyle?: (({ theme }: StyleFunctionProps) => {
+        badge: {
+            [$badgeBorder.variable]: any;
+        };
+        container: {
+            [$badgeBorder.variable]: any;
+        };
+    }) | undefined;
+    sizes?: {
+        [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
+            keys: ("container" | "label" | "group" | "badge" | "excessLabel")[];
+        }>;
+    } | undefined;
+    variants?: {
+        [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
+            keys: ("container" | "label" | "group" | "badge" | "excessLabel")[];
+        }>;
+    } | undefined;
+    defaultProps?: {
+        size?: string | number | undefined;
+        variant?: string | number | undefined;
+        colorScheme?: string | undefined;
+    } | undefined;
+    parts: ("container" | "label" | "group" | "badge" | "excessLabel")[];
+};
+export {};
+//# sourceMappingURL=Avatar.styles.d.ts.map

package/dist/Theme/chakra/Avatar.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.styles.d.ts","sourceRoot":"","sources":["../../../src/Theme/chakra/Avatar.styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAK3D,QAAA,MAAM,YAAY;;;CAAgC,CAAC;AAoBnD,eAAO,MAAM,MAAM;6BAZ4B,kBAAkB;;YAI3D,CAAC,YAAY,CAAC,QAAQ,CAAC,MAAQ;;;YAG/B,CAAC,YAAY,CAAC,QAAQ,CAAC,MAAQ;;;;;;;;;;;;;;;;;;;CAOnC,CAAC"}

package/dist/Theme/chakra/Avatar.styles.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Avatar = void 0;
+const react_1 = require("@chakra-ui/react");
+const anatomy_1 = require("@chakra-ui/anatomy");
+const { defineMultiStyleConfig, definePartsStyle } = (0, react_1.createMultiStyleConfigHelpers)(anatomy_1.avatarAnatomy.keys);
+const $badgeBorder = (0, react_1.cssVar)("avatar-border-color");
+/**
+ * Same bug class as Menu/Modal/Popover: Chakra's own Avatar baseStyle hardcodes the badge/
+ * container border color to `colors.white` outside `_dark` (it's a cutout ring meant to match
+ * the surface the avatar sits on), gated behind `_dark`, which this theme-swap app never
+ * triggers. Every bare `<Avatar>`/`<AvatarBadge>` renders a white ring on the dark canvas.
+ */
+const baseStyle = definePartsStyle(({ theme }) => {
+    var _a, _b, _c, _d, _e, _f;
+    const border = (_f = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.backgroundColor) === null || _b === void 0 ? void 0 : _b.light) !== null && _c !== void 0 ? _c : (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.background) === null || _e === void 0 ? void 0 : _e[50]) !== null && _f !== void 0 ? _f : "#fff";
+    return {
+        badge: {
+            [$badgeBorder.variable]: border,
+        },
+        container: {
+            [$badgeBorder.variable]: border,
+        },
+    };
+});
+exports.Avatar = defineMultiStyleConfig({
+    baseStyle,
+});

package/dist/Theme/chakra/Drawer.styles.d.ts

@@ -0,0 +1,32 @@
+import type { StyleFunctionProps } from "@chakra-ui/react";
+declare const $bg: {
+    variable: string;
+    reference: string;
+};
+export declare const Drawer: {
+    baseStyle?: (({ theme }: StyleFunctionProps) => {
+        dialog: {
+            [$bg.variable]: any;
+            bg: string;
+            color: any;
+        };
+    }) | undefined;
+    sizes?: {
+        [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
+            keys: ("overlay" | "body" | "dialog" | "footer" | "header" | "closeButton" | "dialogContainer")[];
+        }>;
+    } | undefined;
+    variants?: {
+        [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
+            keys: ("overlay" | "body" | "dialog" | "footer" | "header" | "closeButton" | "dialogContainer")[];
+        }>;
+    } | undefined;
+    defaultProps?: {
+        size?: string | number | undefined;
+        variant?: string | number | undefined;
+        colorScheme?: string | undefined;
+    } | undefined;
+    parts: ("overlay" | "body" | "dialog" | "footer" | "header" | "closeButton" | "dialogContainer")[];
+};
+export {};
+//# sourceMappingURL=Drawer.styles.d.ts.map

package/dist/Theme/chakra/Drawer.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.styles.d.ts","sourceRoot":"","sources":["../../../src/Theme/chakra/Drawer.styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAK3D,QAAA,MAAM,GAAG;;;CAAsB,CAAC;AAgBhC,eAAO,MAAM,MAAM;6BAR4B,kBAAkB;;YAE7D,CAAC,GAAG,CAAC,QAAQ,CAAC,MAAkF;;;;;;;;;;;;;;;;;;;;;CAQlG,CAAC"}

package/dist/Theme/chakra/Drawer.styles.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Drawer = void 0;
+const react_1 = require("@chakra-ui/react");
+const anatomy_1 = require("@chakra-ui/anatomy");
+const { defineMultiStyleConfig, definePartsStyle } = (0, react_1.createMultiStyleConfigHelpers)(anatomy_1.drawerAnatomy.keys);
+const $bg = (0, react_1.cssVar)("drawer-bg");
+/**
+ * Chakra's own Drawer baseStyle hardcodes `--drawer-bg` to "colors.white" (gated behind `_dark`,
+ * which this theme-swap app never triggers — see createBrandTheme's colorMode comment), so every
+ * `<DrawerContent>` in every consuming app renders a white panel on the dark canvas — the same
+ * bug class `Menu.styles.ts`/`Modal.styles.ts` already fix.
+ */
+const baseStyle = definePartsStyle(({ theme }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    return ({
+        dialog: {
+            [$bg.variable]: (_f = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.backgroundColor) === null || _b === void 0 ? void 0 : _b.light) !== null && _c !== void 0 ? _c : (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.background) === null || _e === void 0 ? void 0 : _e[50]) !== null && _f !== void 0 ? _f : "#fff",
+            bg: $bg.reference,
+            color: (_j = (_h = (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.text) === null || _h === void 0 ? void 0 : _h[900]) !== null && _j !== void 0 ? _j : "inherit",
+        },
+    });
+});
+exports.Drawer = defineMultiStyleConfig({
+    baseStyle,
+});

package/dist/Theme/chakra/Menu.styles.d.ts

@@ -0,0 +1,70 @@
+import type { StyleFunctionProps } from "@chakra-ui/react";
+declare const $bg: {
+    variable: string;
+    reference: string;
+};
+/**
+ * Chakra's own MenuList baseStyle hardcodes `--menu-bg` to "#fff" (gated behind `_dark`, which
+ * this theme-swap app never triggers — see createBrandTheme's colorMode comment), so every
+ * bare `<MenuList>` in every consuming app renders a white dropdown on the dark canvas. A `bg`
+ * prop set by a call site only recolors the list's own box, not this var — which `MenuItem`'s
+ * `_focus`/`_active`/`_expanded` states read — so both must come from the theme, not per call
+ * site (already duplicated at every fix-it-locally call site: NavigationBar, ButtonGroupIcon,
+ * ThemeSwitcher's BrandMenu/MenuVariant).
+ *
+ * Chakra's own MenuItem baseStyle then RE-hardcodes the same `--menu-bg` var on `_focus`/
+ * `_active`/`_expanded` (to `colors.gray.100`/`.200`, also `_dark`-gated) — so even with `list`
+ * fixed above, hovering/focusing an item snaps the var back to a near-white literal. Override
+ * `item` here too, to a theme-driven hover tint, or every hover state stays white regardless of
+ * the list fix.
+ */
+declare const $itemBg: {
+    variable: string;
+    reference: string;
+};
+export declare const Menu: {
+    baseStyle?: (({ theme }: StyleFunctionProps) => {
+        list: {
+            [$bg.variable]: any;
+            bg: string;
+            color: any;
+        };
+        item: {
+            bg: string;
+            _focus: {
+                [$itemBg.variable]: any;
+                bg: string;
+            };
+            _hover: {
+                [$itemBg.variable]: any;
+                bg: string;
+            };
+            _active: {
+                [$itemBg.variable]: any;
+                bg: string;
+            };
+            _expanded: {
+                [$itemBg.variable]: any;
+                bg: string;
+            };
+        };
+    }) | undefined;
+    sizes?: {
+        [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
+            keys: ("button" | "list" | "icon" | "item" | "groupTitle" | "command" | "divider")[];
+        }>;
+    } | undefined;
+    variants?: {
+        [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
+            keys: ("button" | "list" | "icon" | "item" | "groupTitle" | "command" | "divider")[];
+        }>;
+    } | undefined;
+    defaultProps?: {
+        size?: string | number | undefined;
+        variant?: string | number | undefined;
+        colorScheme?: string | undefined;
+    } | undefined;
+    parts: ("button" | "list" | "icon" | "item" | "groupTitle" | "command" | "divider")[];
+};
+export {};
+//# sourceMappingURL=Menu.styles.d.ts.map

package/dist/Theme/chakra/Menu.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.styles.d.ts","sourceRoot":"","sources":["../../../src/Theme/chakra/Menu.styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAK3D,QAAA,MAAM,GAAG;;;CAAoB,CAAC;AAE9B;;;;;;;;;;;;;;GAcG;AACH,QAAA,MAAM,OAAO;;;CAAyB,CAAC;AA4BvC,eAAO,MAAM,IAAI;6BA1B8B,kBAAkB;;YAO3D,CAAC,GAAG,CAAC,QAAQ,CAAC,MAAkF;;;;;;;gBAWtF,CAAC,OAAO,CAAC,QAAQ,CAAC,MAAS;;;;gBAC3B,CAAC,OAAO,CAAC,QAAQ,CAAC,MAAS;;;;gBAC1B,CAAC,OAAO,CAAC,QAAQ,CAAC,MAAU;;;;gBAC1B,CAAC,OAAO,CAAC,QAAQ,CAAC,MAAS;;;;;;;;;;;;;;;;;;;;;CAO5C,CAAC"}

package/dist/Theme/chakra/Menu.styles.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Menu = void 0;
+const react_1 = require("@chakra-ui/react");
+const anatomy_1 = require("@chakra-ui/anatomy");
+const { defineMultiStyleConfig, definePartsStyle } = (0, react_1.createMultiStyleConfigHelpers)(anatomy_1.menuAnatomy.keys);
+const $bg = (0, react_1.cssVar)("menu-bg");
+/**
+ * Chakra's own MenuList baseStyle hardcodes `--menu-bg` to "#fff" (gated behind `_dark`, which
+ * this theme-swap app never triggers — see createBrandTheme's colorMode comment), so every
+ * bare `<MenuList>` in every consuming app renders a white dropdown on the dark canvas. A `bg`
+ * prop set by a call site only recolors the list's own box, not this var — which `MenuItem`'s
+ * `_focus`/`_active`/`_expanded` states read — so both must come from the theme, not per call
+ * site (already duplicated at every fix-it-locally call site: NavigationBar, ButtonGroupIcon,
+ * ThemeSwitcher's BrandMenu/MenuVariant).
+ *
+ * Chakra's own MenuItem baseStyle then RE-hardcodes the same `--menu-bg` var on `_focus`/
+ * `_active`/`_expanded` (to `colors.gray.100`/`.200`, also `_dark`-gated) — so even with `list`
+ * fixed above, hovering/focusing an item snaps the var back to a near-white literal. Override
+ * `item` here too, to a theme-driven hover tint, or every hover state stays white regardless of
+ * the list fix.
+ */
+const $itemBg = (0, react_1.cssVar)("menu-item-bg");
+const baseStyle = definePartsStyle(({ theme }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
+    const hoverBg = (_g = (_d = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.primary) === null || _b === void 0 ? void 0 : _b.opacity) === null || _c === void 0 ? void 0 : _c[8]) !== null && _d !== void 0 ? _d : (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.gray) === null || _f === void 0 ? void 0 : _f[100]) !== null && _g !== void 0 ? _g : "#f7fafc";
+    const activeBg = (_p = (_l = (_k = (_j = (_h = theme.colors) === null || _h === void 0 ? void 0 : _h.primary) === null || _j === void 0 ? void 0 : _j.opacity) === null || _k === void 0 ? void 0 : _k[16]) !== null && _l !== void 0 ? _l : (_o = (_m = theme.colors) === null || _m === void 0 ? void 0 : _m.gray) === null || _o === void 0 ? void 0 : _o[200]) !== null && _p !== void 0 ? _p : "#edf2f7";
+    return {
+        list: {
+            [$bg.variable]: (_v = (_s = (_r = (_q = theme.colors) === null || _q === void 0 ? void 0 : _q.backgroundColor) === null || _r === void 0 ? void 0 : _r.light) !== null && _s !== void 0 ? _s : (_u = (_t = theme.colors) === null || _t === void 0 ? void 0 : _t.background) === null || _u === void 0 ? void 0 : _u[50]) !== null && _v !== void 0 ? _v : "#fff",
+            bg: $bg.reference,
+            color: (_y = (_x = (_w = theme.colors) === null || _w === void 0 ? void 0 : _w.text) === null || _x === void 0 ? void 0 : _x[900]) !== null && _y !== void 0 ? _y : "inherit",
+        },
+        // Own CSS var (`--menu-item-bg`), NOT the list's `--menu-bg` — Chakra's stock item
+        // baseStyle rewrites `--menu-bg` itself on hover/focus, so reusing that same var name
+        // here for the item's resting bg risked the two colliding under the same custom
+        // property. A dedicated var keeps the item's hover/focus tint fully independent of the
+        // list's background var.
+        item: {
+            bg: "transparent",
+            _focus: { [$itemBg.variable]: hoverBg, bg: $itemBg.reference },
+            _hover: { [$itemBg.variable]: hoverBg, bg: $itemBg.reference },
+            _active: { [$itemBg.variable]: activeBg, bg: $itemBg.reference },
+            _expanded: { [$itemBg.variable]: hoverBg, bg: $itemBg.reference },
+        },
+    };
+});
+exports.Menu = defineMultiStyleConfig({
+    baseStyle,
+});