pixelize-design-library 2.4.1-beta.1 → 2.4.1-beta.10

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/SecondaryBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SecondaryBar.d.ts","sourceRoot":"","sources":["../../../src/Components/SideBar/SecondaryBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAgBxC,OAAO,EAAa,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAuK9D,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAyH7C,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"SecondaryBar.d.ts","sourceRoot":"","sources":["../../../src/Components/SideBar/SecondaryBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAgBxC,OAAO,EAAa,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AA+K9D,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAyH7C,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/Components/SideBar/SecondaryBar.js

@@ -28,7 +28,13 @@ const CollapsedItem = ({ item, isActive, itemFontSize, onItemClick }) => {
     const isDark = (0, accentText_1.isDarkCanvas)((_b = (_a = theme.colors.backgroundColor) === null || _a === void 0 ? void 0 : _a.main) !== null && _b !== void 0 ? _b : "#ffffff");
     const activeAccent = (0, sidebarAccentColors_1.useSidebarActiveAccent)(theme.colors, isDark);
     const { badgeVal, colorScheme, radius, variant } = parseBadge(item.badge);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Popover, { trigger: "hover", placement: "right-start", closeOnBlur: false, isLazy: true, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_2.Box, { role: "group", py: "8px", mb: "2px", borderRadius: "7px", display: "flex", alignItems: "center", justifyContent: "center", cursor: item.disabled ? "not-allowed" : "pointer", opacity: item.disabled ? 0.6 : 1, borderLeft: "2px solid", borderLeftColor: isActive ? theme.colors.primary[500] : "transparent", _hover: { bg: item.disabled ? "transparent" : "whiteAlpha.100" }, onClick: () => !item.disabled && (onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item)), bg: isActive ? theme.colors.primary.opacity[16] : "transparent", transition: "background 0.12s", children: (0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: item.icon, fontSize: "1rem", color: isActive ? activeAccent.icon : "whiteAlpha.600", _groupHover: isActive ? undefined : { color: "whiteAlpha.800" }, transition: "color 0.12s" }), badgeVal != null && ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.red[400] }))] }) }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { borderRadius: "0.5rem", bg: theme.colors.sidebar.background[200], boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", cursor: item.disabled ? "not-allowed" : "pointer", zIndex: 1500, color: "white", border: 'none', children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: "0.75rem", children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "0.5rem", justify: "space-between", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "0.5rem", flex: "1", minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: item.icon, fontSize: "1rem", flexShrink: 0 }), (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: "medium", as: "p", children: item.title })] }), badgeVal != null && ((0, jsx_runtime_1.jsx)(react_2.Badge, { colorScheme: colorScheme, fontSize: "0.625rem", variant: variant, borderRadius: radius, children: badgeVal }))] }) }) }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Popover, { trigger: "hover", placement: "right-start", closeOnBlur: false, isLazy: true, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_2.Box, { role: "group", py: "8px", mb: "2px", borderRadius: "7px", display: "flex", alignItems: "center", justifyContent: "center", cursor: item.disabled ? "not-allowed" : "pointer", opacity: item.disabled ? 0.6 : 1, borderLeft: "2px solid", borderLeftColor: isActive ? theme.colors.primary[500] : "transparent", _hover: {
+                        bg: item.disabled
+                            ? "transparent"
+                            : isActive
+                                ? "whiteAlpha.400"
+                                : "whiteAlpha.200",
+                    }, onClick: () => !item.disabled && (onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item)), bg: isActive ? "whiteAlpha.300" : "transparent", transition: "background 0.12s", children: (0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: item.icon, fontSize: "1rem", color: isActive ? activeAccent.icon : "whiteAlpha.600", _groupHover: isActive ? undefined : { color: "whiteAlpha.800" }, transition: "color 0.12s" }), badgeVal != null && ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.red[400] }))] }) }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { borderRadius: "0.5rem", bg: theme.colors.sidebar.background[200], boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", cursor: item.disabled ? "not-allowed" : "pointer", zIndex: 1500, color: "white", border: 'none', children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: "0.75rem", children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "0.5rem", justify: "space-between", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "0.5rem", flex: "1", minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: item.icon, fontSize: "1rem", flexShrink: 0 }), (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: "medium", as: "p", children: item.title })] }), badgeVal != null && ((0, jsx_runtime_1.jsx)(react_2.Badge, { colorScheme: colorScheme, fontSize: "0.625rem", variant: variant, borderRadius: radius, children: badgeVal }))] }) }) }) })] }));
 };
 const ExpandedItem = ({ item, isActive, itemFontSize, onItemClick }) => {
     var _a, _b;
@@ -36,7 +42,9 @@ const ExpandedItem = ({ item, isActive, itemFontSize, onItemClick }) => {
     const isDark = (0, accentText_1.isDarkCanvas)((_b = (_a = theme.colors.backgroundColor) === null || _a === void 0 ? void 0 : _a.main) !== null && _b !== void 0 ? _b : "#ffffff");
     const activeAccent = (0, sidebarAccentColors_1.useSidebarActiveAccent)(theme.colors, isDark);
     const { badgeVal, colorScheme, radius, variant } = parseBadge(item.badge);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { role: "group", px: "8px", py: "7px", mb: "2px", borderRadius: "7px", align: "center", justify: "space-between", gap: "8px", overflow: "hidden", cursor: item.disabled ? "not-allowed" : "pointer", opacity: item.disabled ? 0.6 : 1, bg: isActive ? theme.colors.primary.opacity[16] : "transparent", _hover: { bg: item.disabled ? "transparent" : "whiteAlpha.100" }, onClick: () => !item.disabled && (onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item)), borderLeft: "2px solid", borderLeftColor: isActive ? theme.colors.primary[500] : "transparent", transition: "background 0.12s", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "8px", flex: "1", minW: 0, overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: item.icon, fontSize: "0.95rem", flexShrink: 0, color: isActive ? activeAccent.icon : "whiteAlpha.800", _groupHover: isActive ? undefined : { color: "white" }, transition: "color 0.12s" }), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", minW: 0, children: (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: isActive ? 600 : 500, color: isActive ? activeAccent.label : "whiteAlpha.900", _groupHover: isActive ? undefined : { color: "white" }, as: "p", children: item.title }) })] }), badgeVal != null && ((0, jsx_runtime_1.jsx)(react_2.Badge, { colorScheme: colorScheme, fontSize: "0.625rem", variant: variant, borderRadius: radius, children: badgeVal }))] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { role: "group", px: "8px", py: "7px", mb: "2px", borderRadius: "7px", align: "center", justify: "space-between", gap: "8px", overflow: "hidden", cursor: item.disabled ? "not-allowed" : "pointer", opacity: item.disabled ? 0.6 : 1, bg: isActive ? "whiteAlpha.300" : "transparent", _hover: {
+            bg: item.disabled ? "transparent" : isActive ? "whiteAlpha.400" : "whiteAlpha.200",
+        }, onClick: () => !item.disabled && (onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item)), borderLeft: "2px solid", borderLeftColor: isActive ? theme.colors.primary[500] : "transparent", transition: "background 0.12s", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "8px", flex: "1", minW: 0, overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: item.icon, fontSize: "0.95rem", flexShrink: 0, color: isActive ? activeAccent.icon : "whiteAlpha.800", _groupHover: isActive ? undefined : { color: "white" }, transition: "color 0.12s" }), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", minW: 0, children: (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: isActive ? 600 : 500, color: isActive ? activeAccent.label : "whiteAlpha.900", _groupHover: isActive ? undefined : { color: "white" }, as: "p", children: item.title }) })] }), badgeVal != null && ((0, jsx_runtime_1.jsx)(react_2.Badge, { colorScheme: colorScheme, fontSize: "0.625rem", variant: variant, borderRadius: radius, children: badgeVal }))] }));
 };
 const SecondaryBar = ({ items = [], defaultCollapsed = true, collapsedWidth = "3.5rem", expandedWidth = "10rem", headerFontSize = "0.75rem", itemFontSize = "0.75rem", selected, onItemClick, title, icon, }) => {
     var _a, _b;

package/dist/Components/SideBar/SideBar.js

@@ -29,7 +29,7 @@ const SidebarHeader = ({ logo, companyName, companySubtitle, toggle, isLoading,
     if (isLoading) {
         return ((0, jsx_runtime_1.jsx)(react_2.Box, { w: "100%", px: toggle ? 2 : 4, py: 2, h: Sidebar_1.HEADER_HEIGHT, display: "flex", alignItems: "center", flexShrink: 0, children: toggle ? ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", gap: 4, justifyContent: "center", w: "100%", children: (0, jsx_runtime_1.jsx)(react_2.Skeleton, { w: "28px", h: "28px", borderRadius: "md", startColor: "gray.600", endColor: "gray.500" }) })) : ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 3, w: "100%", children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { w: "28px", h: "28px", borderRadius: "md", startColor: "gray.600", endColor: "gray.500" }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { h: "1.25rem", w: "60%", borderRadius: "md", startColor: "gray.600", endColor: "gray.500" })] })) }));
     }
-    const logoNode = logo ? ((0, jsx_runtime_1.jsx)(react_2.Image, { borderRadius: "md", boxSize: "1.75rem", src: logo, alt: "Company Logo", flexShrink: 0, cursor: toggle ? "pointer" : undefined, onClick: toggle ? onToggle : undefined, "aria-label": toggle ? "Expand sidebar" : undefined })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { bg: theme.colors.primary[500], color: theme.colors.white, borderRadius: "md", boxSize: "1.75rem", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: "bold", flexShrink: 0, cursor: toggle ? "pointer" : undefined, onClick: toggle ? onToggle : undefined, "aria-label": toggle ? "Expand sidebar" : undefined, children: (0, jsx_runtime_1.jsx)(defaultLogo_1.default, {}) }));
+    const logoNode = logo ? ((0, jsx_runtime_1.jsx)(react_2.Image, { borderRadius: "md", boxSize: "1.75rem", src: logo, alt: "Company Logo", flexShrink: 0, cursor: toggle ? "pointer" : undefined, onClick: toggle ? onToggle : undefined, "aria-label": toggle ? "Expand sidebar" : undefined })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { bg: theme.colors.primary[500], color: (0, accentText_1.onFilled)(theme.colors.primary[500], theme.colors.white, theme.colors.black), borderRadius: "md", boxSize: "1.75rem", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: "bold", flexShrink: 0, cursor: toggle ? "pointer" : undefined, onClick: toggle ? onToggle : undefined, "aria-label": toggle ? "Expand sidebar" : undefined, children: (0, jsx_runtime_1.jsx)(defaultLogo_1.default, {}) }));
     return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { h: Sidebar_1.HEADER_HEIGHT, w: "100%", alignItems: "center", justifyContent: toggle ? "center" : "flex-start", gap: "8px", px: toggle ? "8px" : "10px", borderBottom: "1px solid", borderColor: "whiteAlpha.100", minW: 0, overflow: "hidden", flexShrink: 0, children: [logoNode, !toggle && ((0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", minW: 0, children: [(0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "right", fontWeight: 600, fontSize: "12.5px", textAlign: "left", color: theme.colors.white, lineHeight: "1.3", as: "p", width: "100%", children: companyName !== null && companyName !== void 0 ? companyName : "" }), companySubtitle && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "10px", color: "whiteAlpha.500", lineHeight: "1.3", isTruncated: true, children: companySubtitle }))] })), !toggle && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", onClick: overlay ? onClose : onToggle, "aria-label": overlay ? "Close menu" : "Collapse sidebar", w: "22px", h: "22px", borderRadius: "5px", bg: "whiteAlpha.100", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, _hover: { bg: "whiteAlpha.300" }, transition: "background 0.15s", children: overlay ? ((0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 15, color: theme.colors.white, opacity: 0.7 })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { size: 14, color: theme.colors.white, opacity: 0.6 })) }))] }));
 };
 const SkeletonMenuRow = ({ toggle }) => ((0, jsx_runtime_1.jsx)(react_2.Box, { w: "100%", px: toggle ? 1 : 2, py: 2, children: toggle ? ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", gap: 4, justifyContent: "center", children: (0, jsx_runtime_1.jsx)(react_2.Skeleton, { w: "24px", h: "24px", borderRadius: "md", startColor: "gray.600", endColor: "gray.500" }) })) : ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 3, children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { w: "18px", h: "18px", borderRadius: "md", startColor: "gray.600", endColor: "gray.500" }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { h: "0.875rem", w: "80%", borderRadius: "md", startColor: "gray.600", endColor: "gray.500" })] })) }));
@@ -64,7 +64,7 @@ const ControlCell = ({ onClick, label, accent, children }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const isDark = (0, accentText_1.isDarkCanvas)((_b = (_a = theme.colors.backgroundColor) === null || _a === void 0 ? void 0 : _a.main) !== null && _b !== void 0 ? _b : "#ffffff");
     const activeAccent = (0, sidebarAccentColors_1.useSidebarActiveAccent)(theme.colors, isDark);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", type: "button", flex: "1", minW: 0, alignItems: "center", justifyContent: "center", gap: "7px", px: "6px", py: "8px", cursor: "pointer", border: "none", bg: accent ? theme.colors.primary.opacity[16] : "transparent", onClick: onClick, _hover: { bg: accent ? theme.colors.primary.opacity[32] : "whiteAlpha.100" }, transition: "background 0.15s", children: [children, label && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "11.5px", color: accent ? activeAccent.icon : "whiteAlpha.700", fontWeight: "medium", children: label }))] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", type: "button", flex: "1", minW: 0, alignItems: "center", justifyContent: "center", gap: "7px", px: "6px", py: "8px", cursor: "pointer", border: "none", bg: accent ? "whiteAlpha.300" : "transparent", onClick: onClick, _hover: { bg: accent ? "whiteAlpha.400" : "whiteAlpha.200" }, transition: "background 0.15s", children: [children, label && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "11.5px", color: accent ? activeAccent.icon : "whiteAlpha.700", fontWeight: "medium", children: label }))] }));
 };
 // Collapse (mini-rail) sits next to the Hide/Show navbar-mode toggle. In the
 // desktop mobile-nav overlay only "Show" (return to the docked sidebar) is shown;

package/dist/Components/SideBar/components/MenuItemBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItemBox.d.ts","sourceRoot":"","sources":["../../../../src/Components/SideBar/components/MenuItemBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAc1B,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAS5C,UAAU,KAAK;IACb,IAAI,EAAE,SAAS,CAAC;IAChB,UAAU,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACxC,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,EAAE,MAAM,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CACvD;AAED,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAuShC,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"MenuItemBox.d.ts","sourceRoot":"","sources":["../../../../src/Components/SideBar/components/MenuItemBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAc1B,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAS5C,UAAU,KAAK;IACb,IAAI,EAAE,SAAS,CAAC;IAChB,UAAU,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACxC,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,EAAE,MAAM,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CACvD;AAED,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAwShC,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/Components/SideBar/components/MenuItemBox.js

@@ -39,8 +39,11 @@ const MenuItemBox = ({ menu, activeMenu, toggle, handleClick, isOpen, onToggle,
         if (!disabled)
             handleClick === null || handleClick === void 0 ? void 0 : handleClick(menu);
     };
-    // Pill-style nav item. Active items use a translucent-purple fill + a left
-    // accent bar; idle items rely on a subtle white-overlay hover.
+    // Pill-style nav item. The fill is a white overlay, not a brand tint: the sidebar is a
+    // near-black surface in BOTH modes, and a `primary.opacity` tint of a dark accent on it is
+    // imperceptible for most brands (measured 1.03-1.15 idle->hover) and exactly 1.000 for zinc
+    // light, whose primary[500] IS the sidebar colour. Brand identity stays in the accent bar
+    // and icon below. See interactionStates.test.ts.
     const commonStyles = {
         role: "group",
         w: "100%",
@@ -50,14 +53,12 @@ const MenuItemBox = ({ menu, activeMenu, toggle, handleClick, isOpen, onToggle,
         fontWeight: "medium",
         borderLeft: "2px solid",
         borderLeftColor: isAnyActive ? theme.colors.primary[500] : "transparent",
-        backgroundColor: isAnyActive ? theme.colors.primary.opacity[16] : "transparent",
+        backgroundColor: isAnyActive ? "whiteAlpha.300" : "transparent",
         color: disabled ? "whiteAlpha.400" : "whiteAlpha.700",
         _hover: disabled
             ? {}
             : {
-                backgroundColor: isAnyActive
-                    ? theme.colors.primary.opacity[16]
-                    : "whiteAlpha.100",
+                backgroundColor: isAnyActive ? "whiteAlpha.400" : "whiteAlpha.200",
             },
         cursor: disabled ? "not-allowed" : "pointer",
         opacity: disabled ? 0.6 : 1,

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

@@ -1,13 +1,14 @@
 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.
+ * Per-cell hover fill for a table row. `table.hover[300]` works in light mode — a pale tint on a
+ * white canvas — but in dark mode that rung sits within ~10 lightness points of the near-black
+ * canvas, computing to ~1.2:1: invisible, as QA reported.
+ *
+ * The first fix for that overshot to `background[900]`, the palette's BRIGHTEST rung (~10:1), and
+ * had to invert the row's ink to keep it readable — a near-white slab in a dark table. Dark-mode
+ * hover is a *lifted surface*, not an inversion: `table.hover[500]` is a visible step up from the
+ * canvas while staying dark enough that the row's resting `text[500]` ink is still legible, so no
+ * `color` flip is needed. Pinned by tableRowHoverStyle.test.ts.
  */
 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

@@ -1 +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"}
+{"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;;;;;;;;;;GAUG;AACH,eAAO,MAAM,qBAAqB,GAAI,QAAQ,YAAY,EAAE,QAAQ,OAAO,KAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CASlG,CAAC"}

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

@@ -2,25 +2,25 @@
 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.
+ * Per-cell hover fill for a table row. `table.hover[300]` works in light mode — a pale tint on a
+ * white canvas — but in dark mode that rung sits within ~10 lightness points of the near-black
+ * canvas, computing to ~1.2:1: invisible, as QA reported.
+ *
+ * The first fix for that overshot to `background[900]`, the palette's BRIGHTEST rung (~10:1), and
+ * had to invert the row's ink to keep it readable — a near-white slab in a dark table. Dark-mode
+ * hover is a *lifted surface*, not an inversion: `table.hover[500]` is a visible step up from the
+ * canvas while staying dark enough that the row's resting `text[500]` ink is still legible, so no
+ * `color` flip is needed. Pinned by tableRowHoverStyle.test.ts.
  */
 const getTableRowHoverStyle = (colors, isDark) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     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,
+            backgroundColor: (_c = (_b = (_a = colors.table) === null || _a === void 0 ? void 0 : _a.hover) === null || _b === void 0 ? void 0 : _b[500]) !== null && _c !== void 0 ? _c : (_d = colors.background) === null || _d === void 0 ? void 0 : _d[400],
         };
     }
     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],
+        backgroundColor: (_g = (_f = (_e = colors.table) === null || _e === void 0 ? void 0 : _e.hover) === null || _f === void 0 ? void 0 : _f[300]) !== null && _g !== void 0 ? _g : (_j = (_h = colors.secondary) === null || _h === void 0 ? void 0 : _h.opacity) === null || _j === void 0 ? void 0 : _j[4],
     };
 };
 exports.getTableRowHoverStyle = getTableRowHoverStyle;

package/dist/Components/Table/settings/ManageColumns.js

@@ -95,7 +95,7 @@ const ManageColumns = ({ columns, items, setItems, childInputMethodsRef, }) => {
                                 // color={theme.colors.gray[300]}
                                 _hover: { color: theme.colors.gray[500], bg: "transparent" } }), (0, jsx_runtime_1.jsx)(Checkbox_1.default, { isChecked: !item.isHidden, label: String(item.label), onChange: () => toggleCheckbox(item.id), size: "sm", labelSx: {
                                     color: item.isHidden ? theme.colors.gray[500] : theme.colors.gray[700],
-                                } }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "12px", color: theme.colors.gray[400], ml: 'auto', children: index + 1 })] }, item.id));
-                })) : ((0, jsx_runtime_1.jsx)(react_2.Text, { color: "gray.400", textAlign: "center", fontSize: "sm", py: 6, children: "No columns found" })) }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", color: theme.colors.gray[400], mt: 2, textAlign: "right", children: [visibleCount, " / ", items.length, " visible"] })] }));
+                                } }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "12px", color: theme.colors.gray[500], ml: 'auto', children: index + 1 })] }, item.id));
+                })) : ((0, jsx_runtime_1.jsx)(react_2.Text, { color: "gray.500", textAlign: "center", fontSize: "sm", py: 6, children: "No columns found" })) }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", color: theme.colors.gray[500], mt: 2, textAlign: "right", children: [visibleCount, " / ", items.length, " visible"] })] }));
 };
 exports.default = ManageColumns;

package/dist/Components/UpgradeButton/UpgradeButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UpgradeButton.d.ts","sourceRoot":"","sources":["../../../src/Components/UpgradeButton/UpgradeButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EACL,kBAAkB,EAGnB,MAAM,sBAAsB,CAAC;AAW9B,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA2J/C,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"UpgradeButton.d.ts","sourceRoot":"","sources":["../../../src/Components/UpgradeButton/UpgradeButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EACL,kBAAkB,EAGnB,MAAM,sBAAsB,CAAC;AAgB9B,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAyK/C,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/Components/UpgradeButton/UpgradeButton.js

@@ -5,21 +5,33 @@ const react_1 = 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 color_1 = require("../../Theme/tokens/builders/color");
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
+/** The brand's gold sparkle accent, kept only where it clears 3:1 on the button's own fill. */
+const ACCENT_GOLD = "#FFD66B";
 const sizeMap = {
-    sm: { px: "12px", py: "4px", font: "12px", sub: "8px", icon: 11, radius: "40px" },
+    // Compact, not tiny: an 8px subtitle was unreadable, so `sm` sits deliberately
+    // close to `md` — it's the dense variant of the same badge, not a smaller one.
+    sm: { px: "14px", py: "4px", font: "13px", sub: "9px", icon: 12, radius: "44px" },
     md: { px: "20px", py: "5px", font: "14px", sub: "10px", icon: 13, radius: "50px" },
     lg: { px: "26px", py: "8px", font: "16px", sub: "11px", icon: 16, radius: "60px" },
 };
-const UpgradeButton = ({ label, mobileLabel, subtitle, icon = lucide_react_1.Sparkles, iconColor = "#FFD66B", variant = "brand", gradient, size = "md", shimmer = true, isLoading = false, isDisabled = false, maxLabelWidth = "160px", ariaLabel, onClick, }) => {
+const UpgradeButton = ({ label, mobileLabel, subtitle, icon = lucide_react_1.Sparkles, iconColor, variant = "brand", gradient, size = "md", shimmer = true, isLoading = false, isDisabled = false, maxLabelWidth = "160px", ariaLabel, onClick, }) => {
     var _a, _b;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const c = theme.colors;
     // Only reachable if a consumer hand-builds a palette without `gradient`; every shipped brand sets it.
     const themeGradient = (_a = c.gradient) !== null && _a !== void 0 ? _a : { from: c.primary[500], to: c.primary[700] };
+    // `primary`/`secondary` at [500]->[700] / [400]->[600] sit in the mid-luminance band where
+    // neither white nor black ink clears AA at both ends at once (measured worst-case as low as
+    // 2.72:1 across brands — no ink choice fixes a gradient with no readable ink at all). One rung
+    // darker moves both stops onto the same side of that divide; verified universally >=4.5 at
+    // both ends across all 9 brands x both modes. `success`/`warning`/`danger`/`info` already sit
+    // there at [400]->[600] and don't need the shift.
     const variantGradient = {
         brand: themeGradient,
-        primary: { from: c.primary[500], to: c.primary[700] },
-        secondary: { from: c.secondary[400], to: c.secondary[600] },
+        primary: { from: c.primary[600], to: c.primary[800] },
+        secondary: { from: c.secondary[600], to: c.secondary[800] },
         success: { from: c.semantic.success[400], to: c.semantic.success[600] },
         warning: { from: c.semantic.warning[400], to: c.semantic.warning[600] },
         danger: { from: c.semantic.error[400], to: c.semantic.error[600] },
@@ -27,9 +39,15 @@ const UpgradeButton = ({ label, mobileLabel, subtitle, icon = lucide_react_1.Spa
     };
     const resolved = (_b = gradient !== null && gradient !== void 0 ? gradient : variantGradient[variant]) !== null && _b !== void 0 ? _b : themeGradient;
     // `iconColor`'s gold default fails AA as body text against this gradient (measured ~1.4-3.3
-    // across brands) — the label/subtitle share this computed ink instead. The icon/spinner keep
-    // `iconColor` since non-text UI only needs WCAG 1.4.11's 3:1, which the gold clears.
+    // across brands) — the label/subtitle share this computed ink instead.
     const ink = (0, accentText_1.onGradient)(resolved.from, resolved.to, c.white, c.black);
+    // The gold only clears 1.4.11's 3:1 on a DARK gradient. zinc dark inverts `primary` to a
+    // near-white fill, where gold-on-near-white measures ~1.3:1 and the icon vanishes, so fall
+    // back to the label's ink whenever the gold misses either stop.
+    const resolvedIconColor = iconColor !== null && iconColor !== void 0 ? iconColor : ((0, color_1.contrastRatio)(ACCENT_GOLD, resolved.from) >= outlineRung_1.AA_NON_TEXT &&
+        (0, color_1.contrastRatio)(ACCENT_GOLD, resolved.to) >= outlineRung_1.AA_NON_TEXT
+        ? ACCENT_GOLD
+        : ink);
     const s = sizeMap[size];
     const Icon = icon;
     const blocked = isLoading || isDisabled;
@@ -58,6 +76,6 @@ const UpgradeButton = ({ label, mobileLabel, subtitle, icon = lucide_react_1.Spa
                     pointerEvents: "none",
                 },
             }
-            : undefined, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "6px", maxW: maxLabelWidth, overflow: "hidden", whiteSpace: "nowrap", zIndex: 1, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: s.font, overflow: "hidden", textOverflow: "ellipsis", display: hasMobile ? { base: "none", md: "block" } : "block", children: label }), hasMobile && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: s.font, overflow: "hidden", textOverflow: "ellipsis", display: { base: "block", md: "none" }, children: mobileLabel })), isLoading ? ((0, jsx_runtime_1.jsx)(react_1.Spinner, { size: "xs", thickness: "1.5px", color: iconColor })) : (Icon && (0, jsx_runtime_1.jsx)(Icon, { size: s.icon, color: iconColor, style: { flexShrink: 0 } }))] }), subtitle && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", mt: "1px", fontSize: s.sub, fontWeight: "bold", color: ink, maxW: maxLabelWidth, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", zIndex: 1, children: subtitle }))] }));
+            : undefined, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "6px", maxW: maxLabelWidth, overflow: "hidden", whiteSpace: "nowrap", zIndex: 1, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: s.font, overflow: "hidden", textOverflow: "ellipsis", display: hasMobile ? { base: "none", md: "block" } : "block", children: label }), hasMobile && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: s.font, overflow: "hidden", textOverflow: "ellipsis", display: { base: "block", md: "none" }, children: mobileLabel })), isLoading ? ((0, jsx_runtime_1.jsx)(react_1.Spinner, { size: "xs", thickness: "1.5px", color: resolvedIconColor })) : (Icon && (0, jsx_runtime_1.jsx)(Icon, { size: s.icon, color: resolvedIconColor, style: { flexShrink: 0 } }))] }), subtitle && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", mt: "1px", fontSize: s.sub, fontWeight: "bold", color: ink, maxW: maxLabelWidth, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", zIndex: 1, children: subtitle }))] }));
 };
 exports.default = UpgradeButton;

package/dist/Components/UserDetails/UserDetails.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UserDetails.d.ts","sourceRoot":"","sources":["../../../src/Components/UserDetails/UserDetails.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAkCjD,OAAO,EAEL,gBAAgB,EACjB,MAAM,oBAAoB,CAAC;AAyC5B,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAmhB3C,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"UserDetails.d.ts","sourceRoot":"","sources":["../../../src/Components/UserDetails/UserDetails.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAmCjD,OAAO,EAEL,gBAAgB,EACjB,MAAM,oBAAoB,CAAC;AAyC5B,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAwhB3C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/Components/UserDetails/UserDetails.js

@@ -41,6 +41,7 @@ const react_1 = __importStar(require("react"));
 const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const EmptyState_1 = __importDefault(require("../EmptyState/EmptyState"));
 const AddUserModal_1 = __importDefault(require("./AddUserModal"));
@@ -130,9 +131,11 @@ const UserDetails = ({ users, selectedUser, selectedUserId, roleOptions = [], ca
                                                             onConfirmOpen();
                                                         }
                                                     }, children: labels.deactivateUser }))] }))] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { p: 4, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.05em", color: muted, mb: 3, children: labels.personalInformation }), (0, jsx_runtime_1.jsx)(react_2.Box, { border: "1px solid", borderColor: border, borderRadius: "lg", overflow: "hidden", children: selectedUser.details.map((detail, index) => {
-                                                var _a, _b, _c, _d, _e, _f, _g;
+                                                var _a, _b, _c, _d, _e, _f, _g, _h, _j;
                                                 const Icon = (_a = detail.icon) !== null && _a !== void 0 ? _a : lucide_react_1.UserRound;
-                                                return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { gap: 3, px: 3, py: 2.5, _hover: { bg: (_c = (_b = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _b === void 0 ? void 0 : _b[50]) !== null && _c !== void 0 ? _c : "#F8FAFC" }, alignItems: "center", transition: "background 0.15s ease", children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "30px", bg: (_e = (_d = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _d === void 0 ? void 0 : _d[50]) !== null && _e !== void 0 ? _e : "#EEF2FF", borderRadius: "lg", color: (_g = (_f = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _f === void 0 ? void 0 : _f[600]) !== null && _g !== void 0 ? _g : "#4F46E5", flexShrink: 0, children: (0, jsx_runtime_1.jsx)(Icon, { size: 15 }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { minWidth: "110px", children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", fontWeight: 600, color: muted, children: detail.label }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: 1, children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: heading, fontWeight: 500, children: detail.value }) })] }), index < selectedUser.details.length - 1 && ((0, jsx_runtime_1.jsx)(react_2.Divider, { borderColor: border }))] }, index));
+                                                return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { gap: 3, px: 3, py: 2.5, _hover: {
+                                                                bg: (0, outlineRung_1.resolveHoverTint)((_c = (_b = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _b === void 0 ? void 0 : _b[50]) !== null && _c !== void 0 ? _c : "#F8FAFC", (_e = (_d = colors === null || colors === void 0 ? void 0 : colors.background) === null || _d === void 0 ? void 0 : _d[50]) !== null && _e !== void 0 ? _e : "#ffffff"),
+                                                            }, alignItems: "center", transition: "background 0.15s ease", children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "30px", bg: (_g = (_f = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _f === void 0 ? void 0 : _f[50]) !== null && _g !== void 0 ? _g : "#EEF2FF", borderRadius: "lg", color: (_j = (_h = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _h === void 0 ? void 0 : _h[600]) !== null && _j !== void 0 ? _j : "#4F46E5", flexShrink: 0, children: (0, jsx_runtime_1.jsx)(Icon, { size: 15 }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { minWidth: "110px", children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", fontWeight: 600, color: muted, children: detail.label }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: 1, children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: heading, fontWeight: 500, children: detail.value }) })] }), index < selectedUser.details.length - 1 && ((0, jsx_runtime_1.jsx)(react_2.Divider, { borderColor: border }))] }, index));
                                             }) })] })] })) : ((0, jsx_runtime_1.jsx)(EmptyState_1.default, { icon: lucide_react_1.UserRound, title: labels.selectTeamMember, description: labels.noUserSelected, minH: "300px" })) })] }), (0, jsx_runtime_1.jsx)(AddUserModal_1.default, { isOpen: isAddUserOpen, onClose: onAddUserClose, roleOptions: roleOptions, isLoading: isAddUserLoading, onSubmit: async (values) => {
                     await (onAddUserSubmit === null || onAddUserSubmit === void 0 ? void 0 : onAddUserSubmit(values));
                     onAddUserClose();