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

package/dist/Components/Toggle/TableToggle.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
 import { ViewToggleProps } from "./TableToggleProps";
+/** Two icon-only IconButtons (Grid/List) with no aria-pressed — selection is shown by color only; shares variant with SegmentedControl (see MODULE.md). */
 declare const TableToggle: React.FC<ViewToggleProps>;
 export default TableToggle;

package/dist/Components/Toggle/TableToggle.js

@@ -4,41 +4,96 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("@chakra-ui/react");
+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 outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
+const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
 const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
-const TableToggle = ({ value, onChange }) => {
+const MODES = ["grid", "list"];
+/** Two icon-only IconButtons (Grid/List) with no aria-pressed — selection is shown by color only; shares variant with SegmentedControl (see MODULE.md). */
+const TableToggle = ({ value, onChange, variant = "default" }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const { colors } = theme;
+    const isBrandSlide = variant === "brandSlide";
+    const isUnderlineSlide = variant === "underlineSlide";
+    const hasIndicator = isBrandSlide || isUnderlineSlide;
+    const brandFill = (0, filledSurface_1.resolveFilledSurface)(colors.primary, colors);
+    const restInk = (0, outlineRung_1.liftToContrast)(colors.background[800], colors.background[600], outlineRung_1.AA_NON_TEXT);
+    const hoverInk = (0, outlineRung_1.liftToContrast)(colors.background[900], colors.background[400], outlineRung_1.AA_NON_TEXT);
+    const trackRef = (0, react_1.useRef)(null);
+    const refs = (0, react_1.useRef)([]);
+    const [pill, setPill] = (0, react_1.useState)(null);
+    const selectedIndex = MODES.indexOf(value);
+    (0, react_1.useLayoutEffect)(() => {
+        if (!hasIndicator)
+            return;
+        const track = trackRef.current;
+        const node = refs.current[selectedIndex];
+        if (!track || !node) {
+            setPill(null);
+            return;
+        }
+        const trackRect = track.getBoundingClientRect();
+        const nodeRect = node.getBoundingClientRect();
+        setPill({ left: nodeRect.left - trackRect.left, width: nodeRect.width });
+    }, [hasIndicator, selectedIndex]);
     const styles = {
         container: {
             display: "flex",
             alignItems: "center",
-            bg: theme.colors.background[600],
-            p: "0.125rem",
-            borderRadius: "md",
+            bg: isBrandSlide ? colors.primary.opacity[8] : isUnderlineSlide ? "transparent" : colors.background[600],
+            p: isUnderlineSlide ? "0" : "0.125rem",
+            borderRadius: isUnderlineSlide ? "none" : "md",
+            borderBottom: isUnderlineSlide ? `0.0625rem solid ${colors.boxborder[200]}` : undefined,
             height: "2rem",
-            gap: "0.125rem",
+            gap: isUnderlineSlide ? "0" : "0.125rem",
             width: "6.3rem",
+            position: "relative",
         },
         button: (mode) => ({
-            bg: value === mode ? theme.colors.background[50] : "transparent",
-            boxShadow: value === mode ? "md" : "none",
-            color: value === mode ? theme.colors.text[900] : theme.colors.background[800],
-            borderRadius: "base",
+            position: "relative",
+            zIndex: 1,
+            bg: hasIndicator ? "transparent" : value === mode ? colors.backgroundColor.light : "transparent",
+            boxShadow: hasIndicator ? "none" : value === mode ? "md" : "none",
+            color: isBrandSlide
+                ? value === mode
+                    ? brandFill.color
+                    : restInk
+                : value === mode
+                    ? colors.accentText
+                    : restInk,
+            borderRadius: isUnderlineSlide ? "none" : "base",
             height: "1.75rem",
-            border: "0.031rem solid",
-            borderColor: value === mode ? theme.colors.background[400] : "transparent",
+            border: hasIndicator ? "none" : "0.031rem solid",
+            borderColor: hasIndicator
+                ? "transparent"
+                : value === mode
+                    ? colors.primary.opacity[32]
+                    : "transparent",
             padding: "0.313rem 0.813rem",
             _hover: {
-                bg: value === mode
-                    ? theme.colors.background[50]
-                    : theme.colors.background[400],
-                color: value === mode ? theme.colors.text[900] : theme.colors.background[900],
+                bg: hasIndicator
+                    ? "transparent"
+                    : value === mode
+                        ? colors.backgroundColor.light
+                        : colors.background[400],
+                color: isBrandSlide
+                    ? value === mode
+                        ? brandFill.color
+                        : hoverInk
+                    : value === mode
+                        ? colors.accentText
+                        : hoverInk,
             },
-            transition: "all 0.3s ease-in-out",
+            transition: "color 0.2s ease-in-out",
         }),
     };
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { ...styles.container, children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Table View", placement: "top", fontSize: 12, hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": "Grid View", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Table2, { size: "1.25rem" }), variant: "ghost", onClick: () => onChange("grid"), ...styles.button("grid") }) }), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Kanban View", placement: "top", fontSize: 12, hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": "List View", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Columns3, { size: "1.25rem" }), variant: "ghost", onClick: () => onChange("list"), ...styles.button("list") }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: trackRef, ...styles.container, children: [isBrandSlide && pill && ((0, jsx_runtime_1.jsx)(react_2.Box, { "aria-hidden": "true", position: "absolute", top: "0.125rem", left: 0, h: "1.75rem", w: `${pill.width}px`, borderRadius: "base", bg: brandFill.fill, boxShadow: `0 0.125rem 0.5rem ${colors.boxShadow.primary}`, transform: `translateX(${pill.left}px)`, transition: "transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.24s cubic-bezier(0.2, 0.8, 0.2, 1)" })), isUnderlineSlide && pill && ((0, jsx_runtime_1.jsx)(react_2.Box, { "aria-hidden": "true", position: "absolute", bottom: "-0.0625rem", left: 0, h: "0.125rem", w: `${pill.width}px`, borderRadius: "full", bg: colors.primary[500], transform: `translateX(${pill.left}px)`, transition: "transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.24s cubic-bezier(0.2, 0.8, 0.2, 1)" })), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Table View", placement: "top", fontSize: 12, hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { ref: (node) => {
+                        refs.current[0] = node;
+                    }, "aria-label": "Grid View", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Table2, { size: "1.25rem" }), variant: "ghost", onClick: () => onChange("grid"), ...styles.button("grid") }) }), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Kanban View", placement: "top", fontSize: 12, hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { ref: (node) => {
+                        refs.current[1] = node;
+                    }, "aria-label": "List View", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Columns3, { size: "1.25rem" }), variant: "ghost", onClick: () => onChange("list"), ...styles.button("list") }) })] }));
 };
 exports.default = TableToggle;

package/dist/Components/Toggle/TableToggleProps.d.ts

@@ -1,5 +1,11 @@
+/** The two views TableToggle switches between — "list" renders as a kanban-style icon, not a literal list. */
 export type ViewMode = "grid" | "list";
+/** Visual style for TableToggle; "default" is the plain segmented control with no sliding indicator. */
+export type TableToggleVariant = "default" | "brandSlide" | "underlineSlide";
+/** Props for TableToggle — the exported type is named ViewToggleProps, not TableToggleProps. */
 export type ViewToggleProps = {
     value: ViewMode;
     onChange: (val: ViewMode) => void;
+    /** brandSlide = primary view switcher; underlineSlide = dense toolbars/headers. */
+    variant?: TableToggleVariant;
 };

package/dist/Components/ToggleSwitch/ToggleSwitch.d.ts

@@ -0,0 +1,3 @@
+import { ToggleSwitchProps } from "./ToggleSwitchProps";
+/** Binary on/off control, role="switch"; always controlled with no internal state — distinct from the two-option Switch/SegmentedControl. */
+export default function ToggleSwitch({ isChecked, onChange, isDisabled, size, id, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, }: ToggleSwitchProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/ToggleSwitch/ToggleSwitch.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = ToggleSwitch;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const SIZES = {
+    sm: { w: "2rem", h: "1.125rem", knob: "0.875rem", travel: "0.75rem" },
+    md: { w: "2.375rem", h: "1.375rem", knob: "1.125rem", travel: "0.875rem" },
+};
+/** Binary on/off control, role="switch"; always controlled with no internal state — distinct from the two-option Switch/SegmentedControl. */
+function ToggleSwitch({ isChecked, onChange, isDisabled = false, size = "md", id, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, }) {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const dims = SIZES[size];
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", id: id, role: "switch", "aria-checked": isChecked, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, disabled: isDisabled, onClick: () => onChange(!isChecked), position: "relative", display: "inline-flex", alignItems: "center", flexShrink: 0, w: dims.w, h: dims.h, p: 0, borderRadius: "full", borderWidth: "1px", borderStyle: "solid", borderColor: isChecked ? colors.primary[500] : colors.boxborder[500], bg: isChecked ? colors.primary[500] : colors.background[600], opacity: isDisabled ? 0.5 : 1, cursor: isDisabled ? "not-allowed" : "pointer", transition: "background-color 0.2s ease, border-color 0.2s ease", _focusVisible: {
+            outline: "none",
+            boxShadow: `0 0 0 2px ${colors.primary[300]}`,
+        }, children: (0, jsx_runtime_1.jsx)(react_1.Box, { "aria-hidden": "true", position: "absolute", left: "0.125rem", w: dims.knob, h: dims.knob, borderRadius: "full", bg: colors.white, boxShadow: "sm", transition: "transform 0.2s ease", transform: isChecked ? `translateX(${dims.travel})` : "translateX(0)" }) }));
+}

package/dist/Components/ToggleSwitch/ToggleSwitchProps.d.ts

@@ -0,0 +1,13 @@
+/** Track/knob size preset for ToggleSwitch; exact widths and travel distance live in ToggleSwitch.tsx's SIZES map. */
+export type ToggleSwitchSize = "sm" | "md";
+/** Props for the switch — isChecked/onChange are required, so there's no uncontrolled/defaultChecked mode. */
+export type ToggleSwitchProps = {
+    isChecked: boolean;
+    onChange: (checked: boolean) => void;
+    isDisabled?: boolean;
+    size?: ToggleSwitchSize;
+    id?: string;
+    /** The control carries no visible text, so it has no other way to be named. */
+    "aria-label": string;
+    "aria-describedby"?: string;
+};

package/dist/Components/ToggleSwitch/ToggleSwitchProps.js

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

package/dist/Components/ToolTip/ToolTip.d.ts

@@ -1,2 +1,3 @@
 import { ToolTipProps } from "./ToolTipProps";
+/** Renders a hover/focus-triggered Chakra Tooltip — not a substitute for Toaster's transient, unprompted notifications. */
 export default function ToolTip({ placement, label, children, hasArrow, fontSize, bg, color, isDisabled, overflowOnly, isOpen, defaultIsOpen, openDelay, closeDelay, arrowSize, closeOnClick, size, width, height, arrowPadding, arrowShadowColor, direction, gutter, onClose, modifiers, closeOnPointerDown, styles, }: ToolTipProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/ToolTip/ToolTip.js

@@ -7,18 +7,19 @@ const react_2 = require("@chakra-ui/react");
 const useIsTruncated_1 = require("../../Hooks/useIsTruncated");
 const mergeRefs_1 = require("../../Utils/mergeRefs");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
-function ToolTip({ placement = "top", label, children, hasArrow = true, fontSize = "14px", bg, color = "white", isDisabled, overflowOnly = false, isOpen, defaultIsOpen, openDelay = 0, closeDelay = 0, arrowSize = 10, closeOnClick = false, size, width, height, arrowPadding, arrowShadowColor, direction, gutter = 8, onClose, modifiers, closeOnPointerDown, styles, }) {
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
+/** Renders a hover/focus-triggered Chakra Tooltip — not a substitute for Toaster's transient, unprompted notifications. */
+function ToolTip({ placement = "top", label, children, hasArrow = true, fontSize = "14px", bg, color, isDisabled, overflowOnly = false, isOpen, defaultIsOpen, openDelay = 0, closeDelay = 0, arrowSize = 10, closeOnClick = false, size, width, height, arrowPadding, arrowShadowColor, direction, gutter = 8, onClose, modifiers, closeOnPointerDown, styles, }) {
     // Measure the child for `overflowOnly`. The hook is always called (Rules of
     // Hooks) but is fully inert unless `overflowOnly` is set — no layout reads,
     // no ResizeObserver, no re-renders for ordinary tooltips. Measurement never
     // runs on hover/scroll, so showing the tooltip stays as cheap as before.
     const { ref, isTruncated } = (0, useIsTruncated_1.useIsTruncated)(label, overflowOnly && (0, react_1.isValidElement)(children));
-    // A tooltip is an INVERTED surface: near-black under a light canvas, carrying a white
-    // label. `sidebar.background` is the only ramp `buildDarkPalette` deliberately leaves
-    // un-inverted, so it stays near-black in dark mode and the white label stays legible —
-    // every other surface ramp flips light and would render the label invisible.
+    // `sidebar.background` stays near-black in both modes; ink is computed via `onFilled`.
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const surface = theme.colors.sidebar.background[500];
+    const resolvedBg = bg !== null && bg !== void 0 ? bg : surface;
+    const resolvedColor = color !== null && color !== void 0 ? color : (0, accentText_1.onFilled)(resolvedBg, theme.colors.white, theme.colors.black);
     let content = children;
     let effectiveDisabled = isDisabled;
     if (overflowOnly && (0, react_1.isValidElement)(children)) {
@@ -29,5 +30,5 @@ function ToolTip({ placement = "top", label, children, hasArrow = true, fontSize
         });
         effectiveDisabled = Boolean(isDisabled) || !isTruncated;
     }
-    return ((0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: label, placement: placement, hasArrow: hasArrow, fontSize: fontSize, bg: bg !== null && bg !== void 0 ? bg : surface, color: color, isDisabled: effectiveDisabled, isOpen: isOpen, defaultIsOpen: defaultIsOpen, openDelay: openDelay, closeDelay: closeDelay, arrowSize: arrowSize, closeOnClick: closeOnClick, size: size, width: width, height: height, arrowPadding: arrowPadding, arrowShadowColor: arrowShadowColor, direction: direction, gutter: gutter, onClose: onClose, modifiers: modifiers, closeOnPointerDown: closeOnPointerDown, style: styles, px: 3, py: 2, borderRadius: "lg", fontWeight: "400", lineHeight: "1.5", maxW: "300px", children: content }));
+    return ((0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: label, placement: placement, hasArrow: hasArrow, fontSize: fontSize, bg: resolvedBg, color: resolvedColor, isDisabled: effectiveDisabled, isOpen: isOpen, defaultIsOpen: defaultIsOpen, openDelay: openDelay, closeDelay: closeDelay, arrowSize: arrowSize, closeOnClick: closeOnClick, size: size, width: width, height: height, arrowPadding: arrowPadding, arrowShadowColor: arrowShadowColor, direction: direction, gutter: gutter, onClose: onClose, modifiers: modifiers, closeOnPointerDown: closeOnPointerDown, style: styles, px: 3, py: 2, borderRadius: "lg", fontWeight: "400", lineHeight: "1.5", maxW: "300px", children: content }));
 }

package/dist/Components/ToolTip/ToolTipProps.d.ts

@@ -1,5 +1,9 @@
 import { TooltipProps as ChakraTooltip } from "@chakra-ui/react";
-export type ToolTipProps = Pick<ChakraTooltip, "placement" | "label" | "hasArrow" | "fontSize" | "bg" | "color" | "isDisabled" | "isOpen" | "defaultIsOpen" | "openDelay" | "closeDelay" | "arrowSize" | "closeOnClick" | "size" | "width" | "height" | "arrowPadding" | "arrowShadowColor" | "direction" | "gutter" | "onClose" | "modifiers" | "closeOnPointerDown"> & {
+/** Closed prop list, no ...rest — shouldWrapChildren/portalProps aren't exposed; hasArrow defaults true, closeOnClick false (both flipped from Chakra). */
+export type ToolTipProps = Pick<ChakraTooltip, "placement" | "label" | "hasArrow" | "fontSize" | "isDisabled" | "isOpen" | "defaultIsOpen" | "openDelay" | "closeDelay" | "arrowSize" | "closeOnClick" | "size" | "width" | "height" | "arrowPadding" | "arrowShadowColor" | "direction" | "gutter" | "onClose" | "modifiers" | "closeOnPointerDown"> & {
+    /** bg/color default to the theme's inverted sidebar surface (near-black both modes) — override only if you own the contrast. */
+    bg?: string;
+    color?: string;
     children: React.ReactNode;
     styles?: React.CSSProperties;
     /**

package/dist/Components/Trail/EditableCell.d.ts

@@ -5,7 +5,9 @@ interface EditableCellProps {
     column: Column;
     isEditable: boolean;
     handleCellClick: (rowId: number, columnId: number) => void;
+    /** Also fires on outside-click with the cell's current unchanged value — a commit signal, not only a real edit. */
     handleCellChange: (rowId: number, columnLabel: string, value: string) => void;
 }
+/** Inline editable cell driven entirely by parent-owned row state — no internal draft state of its own. */
 export declare const EditableCell: React.FC<EditableCellProps>;
 export {};

package/dist/Components/Trail/EditableCell.js

@@ -7,6 +7,7 @@ const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
+/** Inline editable cell driven entirely by parent-owned row state — no internal draft state of its own. */
 const EditableCell = ({ row, column, isEditable, handleCellClick, handleCellChange, }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const cellRef = (0, react_1.useRef)(null);
@@ -23,7 +24,7 @@ const EditableCell = ({ row, column, isEditable, handleCellClick, handleCellChan
             return ((0, jsx_runtime_1.jsx)(react_2.Box, { width: "50%", ref: cellRef, children: (0, jsx_runtime_1.jsx)(react_2.Input, { type: "date", value: value, onChange: (e) => handleCellChange(row.id, column.label, e.target.value) }) }));
         }
         else if (column.label === "priority") {
-            return ((0, jsx_runtime_1.jsx)(react_2.Box, { width: "100%", ref: cellRef, children: (0, jsx_runtime_1.jsxs)(react_2.Menu, { isOpen: true, children: [(0, jsx_runtime_1.jsx)(react_2.MenuButton, { as: react_2.Button, rightIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, {}), bg: colors.teal[50], color: (0, accentText_1.accentTextOnCanvas)(colors.teal, colors.teal[50]), _hover: { bg: colors.teal[100] }, _active: { bg: colors.teal[200] }, children: value }), (0, jsx_runtime_1.jsxs)(react_2.MenuList, { children: [(0, jsx_runtime_1.jsx)(react_2.MenuItem, { onClick: () => handleCellChange(row.id, column.label, "Low"), _hover: { bg: colors.teal[100] }, children: "Low" }), (0, jsx_runtime_1.jsx)(react_2.MenuItem, { onClick: () => handleCellChange(row.id, column.label, "Medium"), _hover: { bg: colors.teal[100] }, children: "Medium" }), (0, jsx_runtime_1.jsx)(react_2.MenuItem, { onClick: () => handleCellChange(row.id, column.label, "High"), _hover: { bg: colors.teal[100] }, children: "High" })] })] }) }));
+            return ((0, jsx_runtime_1.jsx)(react_2.Box, { width: "100%", ref: cellRef, children: (0, jsx_runtime_1.jsxs)(react_2.Menu, { isOpen: true, children: [(0, jsx_runtime_1.jsx)(react_2.MenuButton, { as: react_2.Button, rightIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, {}), bg: colors.teal[50], color: (0, accentText_1.accentTextOnCanvas)(colors.teal, colors.teal[50]), _hover: { bg: colors.teal[100] }, _active: { bg: colors.teal[200] }, children: value }), (0, jsx_runtime_1.jsxs)(react_2.MenuList, { children: [(0, jsx_runtime_1.jsx)(react_2.MenuItem, { onClick: () => handleCellChange(row.id, column.label, "Low"), children: "Low" }), (0, jsx_runtime_1.jsx)(react_2.MenuItem, { onClick: () => handleCellChange(row.id, column.label, "Medium"), children: "Medium" }), (0, jsx_runtime_1.jsx)(react_2.MenuItem, { onClick: () => handleCellChange(row.id, column.label, "High"), children: "High" })] })] }) }));
         }
         else {
             return ((0, jsx_runtime_1.jsx)(react_2.Box, { width: "100%", ref: cellRef, children: (0, jsx_runtime_1.jsx)(react_2.Input, { value: value, onChange: (e) => handleCellChange(row.id, column.label, e.target.value) }) }));

package/dist/Components/Trail/SelectAllCheckbox.d.ts

@@ -4,5 +4,6 @@ interface SelectAllCheckboxProps {
     isIndeterminate: boolean;
     handleSelectAll: () => void;
 }
+/** Purely presentational — isAllSelected/isIndeterminate must be computed and owned entirely by the parent. */
 export declare const SelectAllCheckbox: React.FC<SelectAllCheckboxProps>;
 export {};

package/dist/Components/Trail/SelectAllCheckbox.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SelectAllCheckbox = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
+/** Purely presentational — isAllSelected/isIndeterminate must be computed and owned entirely by the parent. */
 const SelectAllCheckbox = ({ isAllSelected, isIndeterminate, handleSelectAll, }) => {
     return ((0, jsx_runtime_1.jsx)(react_1.Checkbox, { isChecked: isAllSelected, isIndeterminate: isIndeterminate, onChange: handleSelectAll }));
 };

package/dist/Components/Trail/TrailWorks.d.ts

@@ -1,2 +1,3 @@
+/** Hardcoded 2-row demo table with no props at all — not a reusable grid; use Table for a real editable/selectable list. */
 declare const TrailWorks: () => import("react/jsx-runtime").JSX.Element;
 export default TrailWorks;

package/dist/Components/Trail/TrailWorks.js

@@ -3,9 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+/** Hardcoded 2-row demo table with no props at all — not a reusable grid; use Table for a real editable/selectable list. */
 const TrailWorks = () => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    const cellBorder = colors.border[500];
+    const cellBorder = colors.boxborder[200];
     const data = [
         {
             contact: "John Doe",

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

@@ -1,10 +1,12 @@
 import { ElementType } from "react";
+/** Size preset for UpgradeButton; "sm" is a dense variant of the same badge, not simply a smaller one. */
 export type UpgradeButtonSize = "sm" | "md" | "lg";
 /**
  * Theme-aware color variants. Each resolves to a gradient built from the
  * active theme's tokens, so the button blends with whichever theme is active.
  */
 export type UpgradeButtonVariant = "brand" | "primary" | "secondary" | "success" | "warning" | "danger" | "info";
+/** Prominent animated shimmer CTA button for "upgrade now" actions — not the compact plan-state pill; see PlanPill/PlanBadge for that. Reused as LimitReachedModal's own CTA. */
 export interface UpgradeButtonProps {
     /** Primary label (shown on md+ screens). */
     label: string;
@@ -14,7 +16,7 @@ export interface UpgradeButtonProps {
     subtitle?: string;
     /** Leading icon. Defaults to lucide `Sparkles`. Pass null to hide. */
     icon?: ElementType | null;
-    /** Icon color. Defaults to a gold tone. */
+    /** Defaults to gold only when gold clears AA contrast against the gradient; otherwise silently falls back to the label's ink color. */
     iconColor?: string;
     /**
      * Theme-aware color variant. Defaults to `brand` (the active theme's
@@ -29,11 +31,13 @@ export interface UpgradeButtonProps {
         from: string;
         to: string;
     };
+    /** Default "md". */
     size?: UpgradeButtonSize;
     /** Animated light sweep on hover. Default true. */
     shimmer?: boolean;
-    /** Show a spinner and block interaction. */
+    /** Blocks onClick and shows a spinner, but does NOT set the native disabled attribute or dim opacity — pair with isDisabled for that. */
     isLoading?: boolean;
+    /** Unlike isLoading, this also dims opacity and sets the native disabled attribute. */
     isDisabled?: boolean;
     /** Truncate the label beyond this width. */
     maxLabelWidth?: string;

package/dist/Components/UserDetails/DeactivateConfirmModal.js

@@ -14,6 +14,6 @@ const DeactivateConfirmModal = ({ isOpen, onClose, userName, isLoading, onConfir
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const mode = (0, accentText_1.isDarkCanvas)(colors.backgroundColor.main) ? "dark" : "light";
     const errorTone = (0, statusTone_1.resolveStatusTone)(colors.semantic.error, mode);
-    return ((0, jsx_runtime_1.jsxs)(react_1.Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, children: [(0, jsx_runtime_1.jsx)(react_1.ModalOverlay, { backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(react_1.ModalContent, { bg: colors.background[50], borderRadius: "2xl", overflow: "hidden", children: [(0, jsx_runtime_1.jsxs)(react_1.ModalHeader, { borderBottom: "1px solid", borderColor: colors.boxborder[200], display: "flex", alignItems: "center", gap: 3, children: [(0, jsx_runtime_1.jsx)(react_1.Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: errorTone.bg, color: errorTone.fg, children: (0, jsx_runtime_1.jsx)(lucide_react_1.AlertTriangle, { size: 18 }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "1.05rem", fontWeight: 600, children: labels.confirmDeactivation })] }), (0, jsx_runtime_1.jsx)(react_1.ModalCloseButton, {}), (0, jsx_runtime_1.jsx)(react_1.ModalBody, { py: 6, children: (0, jsx_runtime_1.jsxs)(react_1.VStack, { spacing: 4, align: "stretch", children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "md", fontWeight: 500, color: colors.text[900], children: labels.deactivateConfirmQuestion }), (0, jsx_runtime_1.jsx)(react_1.Box, { bg: colors.gray[50], borderRadius: "lg", p: 4, border: "1px solid", borderColor: colors.boxborder[200], children: (0, jsx_runtime_1.jsxs)(react_1.Text, { color: colors.textMuted, fontSize: "sm", children: [userName ? `${userName} ` : "", labels.deactivateConfirmDescription] }) }), (0, jsx_runtime_1.jsxs)(react_1.HStack, { justifyContent: "flex-end", spacing: 3, pt: 2, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.cancel, onClick: onClose, variant: "outline", size: "sm", colorScheme: "gray" }), (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.deactivateUser, onClick: onConfirm, colorScheme: "red", size: "sm", isLoading: isLoading, leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 16 }) })] })] }) })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, children: [(0, jsx_runtime_1.jsx)(react_1.ModalOverlay, { backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(react_1.ModalContent, { bg: colors.background[50], borderRadius: "2xl", overflow: "hidden", children: [(0, jsx_runtime_1.jsxs)(react_1.ModalHeader, { borderBottom: "1px solid", borderColor: colors.boxborder[200], display: "flex", alignItems: "center", gap: 3, children: [(0, jsx_runtime_1.jsx)(react_1.Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: errorTone.bg, color: errorTone.fg, children: (0, jsx_runtime_1.jsx)(lucide_react_1.AlertTriangle, { size: 18 }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "1.05rem", fontWeight: 600, children: labels.confirmDeactivation })] }), (0, jsx_runtime_1.jsx)(react_1.ModalCloseButton, {}), (0, jsx_runtime_1.jsx)(react_1.ModalBody, { py: 6, children: (0, jsx_runtime_1.jsxs)(react_1.VStack, { spacing: 4, align: "stretch", children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "md", fontWeight: 500, color: colors.text[900], children: labels.deactivateConfirmQuestion }), (0, jsx_runtime_1.jsx)(react_1.Box, { bg: colors.background[50], borderRadius: "lg", p: 4, border: "1px solid", borderColor: colors.boxborder[200], children: (0, jsx_runtime_1.jsxs)(react_1.Text, { color: colors.textMuted, fontSize: "sm", children: [userName ? `${userName} ` : "", labels.deactivateConfirmDescription] }) }), (0, jsx_runtime_1.jsxs)(react_1.HStack, { justifyContent: "flex-end", spacing: 3, pt: 2, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.cancel, onClick: onClose, variant: "outline", size: "sm", colorScheme: "gray" }), (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.deactivateUser, onClick: onConfirm, colorScheme: "red", size: "sm", isLoading: isLoading, leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 16 }) })] })] }) })] })] }));
 };
 exports.default = DeactivateConfirmModal;

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

@@ -1,4 +1,5 @@
 import React from "react";
 import { UserDetailsProps } from "./UserDetailsProps";
+/** Two-pane user directory + detail panel with bundled Add/Change-Role/Deactivate modals. */
 declare const UserDetails: React.FC<UserDetailsProps>;
 export default UserDetails;

package/dist/Components/UserDetails/UserDetails.js

@@ -43,6 +43,7 @@ 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 rowStates_1 = require("../../Theme/tokens/builders/rowStates");
 const EmptyState_1 = __importDefault(require("../EmptyState/EmptyState"));
 const AddUserModal_1 = __importDefault(require("./AddUserModal"));
 const ChangeRoleModal_1 = __importDefault(require("./ChangeRoleModal"));
@@ -84,6 +85,7 @@ const DEFAULT_LABELS = {
     deactivateConfirmQuestion: "Are you sure you want to deactivate this user?",
     deactivateConfirmDescription: "will no longer have access to the organization. You can reactivate them later if needed.",
 };
+/** Two-pane user directory + detail panel with bundled Add/Change-Role/Deactivate modals. */
 const UserDetails = ({ users, selectedUser, selectedUserId, roleOptions = [], canManageUsers = false, isUsersLoading = false, isInviteLoading = false, isDeactivateLoading = false, isAddUserLoading = false, isChangeRoleLoading = false, onSelectUser, onRefresh, onBack, onAddUserSubmit, onChangeRoleSubmit, onReinvite, onDeactivate, onAddRoleClick, addUserUpgradeNotice, labels: labelOverrides, minHeight = "90vh", }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const labels = (0, react_1.useMemo)(() => ({ ...DEFAULT_LABELS, ...labelOverrides }), [labelOverrides]);
@@ -93,6 +95,7 @@ const UserDetails = ({ users, selectedUser, selectedUserId, roleOptions = [], ca
     const [actionUserId, setActionUserId] = (0, react_1.useState)(null);
     const border = colors.boxborder[200];
     const surface = colors.background[50];
+    const rowBackgrounds = (0, react_1.useMemo)(() => (0, rowStates_1.listRowBackgrounds)(colors), [colors]);
     const muted = colors.textMuted;
     const heading = colors.text[900];
     const avatarBg = colors.primary[100];
@@ -109,10 +112,10 @@ const UserDetails = ({ users, selectedUser, selectedUserId, roleOptions = [], ca
     const renderStatusBadge = (isActive) => ((0, jsx_runtime_1.jsx)(react_2.Badge, { variant: "subtle", colorScheme: isActive ? successScheme : dangerScheme, borderRadius: "full", px: 2, py: 0.5, fontSize: "0.65rem", fontWeight: 600, textTransform: "none", children: isActive ? labels.active : labels.inactive }));
     return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { backgroundColor: colors.backgroundColor.main, minHeight: minHeight, p: { base: 3, md: 4 }, gap: 3, flexDirection: { base: "column", lg: "row" }, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { width: { base: "100%", lg: "300px" }, backgroundColor: surface, borderRadius: "xl", boxShadow: "sm", border: "1px solid", borderColor: border, position: "relative", order: { base: 2, lg: 1 }, overflow: "hidden", display: "flex", flexDirection: "column", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { px: 4, py: 3, borderBottom: "1px solid", borderColor: border, alignItems: "center", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [onBack && ((0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Go back", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { size: 18 }), variant: "ghost", size: "xs", color: muted, onClick: onBack })), (0, jsx_runtime_1.jsx)(react_2.Heading, { size: "sm", fontWeight: 600, color: heading, children: labels.teamMembers }), (0, jsx_runtime_1.jsx)(react_2.Badge, { colorScheme: "gray", borderRadius: "full", fontSize: "0.65rem", px: 2, children: users.length })] }), onRefresh && ((0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": labels.refreshList, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.RefreshCw, { size: 15 }), variant: "ghost", size: "xs", color: muted, onClick: onRefresh, isLoading: isUsersLoading }))] }), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: 1, overflowY: "auto", maxHeight: { base: "380px", lg: `calc(${minHeight} - 80px)` }, children: isUsersLoading ? ((0, jsx_runtime_1.jsx)(react_2.VStack, { spacing: 2, p: 3, children: Array.from({ length: 6 }).map((_, idx) => ((0, jsx_runtime_1.jsxs)(react_2.Flex, { alignItems: "center", gap: 3, p: 2, w: "100%", children: [(0, jsx_runtime_1.jsx)(react_2.SkeletonCircle, { size: "9" }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: 1, children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "12px", mb: 2, width: "80%" }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "9px", width: "60%" })] })] }, idx))) })) : users.length === 0 ? ((0, jsx_runtime_1.jsx)(EmptyState_1.default, { icon: lucide_react_1.Users, title: labels.noUsers, size: "sm", minH: "220px" })) : ((0, jsx_runtime_1.jsx)(react_2.VStack, { spacing: 1, p: 2, align: "stretch", children: users.map((user) => {
                                 const isSelected = selectedUserId != null && selectedUserId === user.id;
-                                return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { p: 2.5, w: "100%", cursor: "pointer", alignItems: "center", gap: 2.5, backgroundColor: isSelected ? colors.primary[50] : "transparent", _hover: {
+                                return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { p: 2.5, w: "100%", cursor: "pointer", alignItems: "center", gap: 2.5, backgroundColor: isSelected ? rowBackgrounds.selected : "transparent", _hover: {
                                         background: isSelected
-                                            ? colors.primary[50]
-                                            : (0, outlineRung_1.resolveHoverTint)(colors.gray[50], surface),
+                                            ? rowBackgrounds.selectedActive
+                                            : rowBackgrounds.active,
                                     }, transition: "background 0.15s ease", borderRadius: "lg", position: "relative", onClick: () => onSelectUser === null || onSelectUser === void 0 ? void 0 : onSelectUser(user), children: [isSelected && ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", left: 0, top: "20%", bottom: "20%", width: "3px", borderRadius: "full", bg: colors.primary[500] })), (0, jsx_runtime_1.jsx)(react_2.Avatar, { size: "sm", name: `${user.firstName} ${user.lastName}`, src: user.profile, bg: avatarBg, color: avatarColor }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: 1, overflow: "hidden", children: [(0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", fontWeight: 600, noOfLines: 1, color: heading, children: [user.firstName, " ", user.lastName] }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", color: muted, noOfLines: 1, children: user.email })] }), renderStatusBadge(user.isActive)] }, user.id));
                             }) })) })] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: 1, backgroundColor: surface, borderRadius: "xl", boxShadow: "sm", border: "1px solid", borderColor: border, display: "flex", flexDirection: "column", order: { base: 1, lg: 2 }, overflow: "hidden", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { justifyContent: "space-between", alignItems: "center", px: 4, py: 3, borderBottom: "1px solid", borderColor: border, children: [(0, jsx_runtime_1.jsx)(react_2.Heading, { size: "sm", fontWeight: 600, color: heading, children: selectedUser ? labels.userDetails : labels.selectTeamMember }), canManageUsers && ((0, jsx_runtime_1.jsx)(react_2.Button, { size: "sm", colorScheme: "primary", fontSize: "xs", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.UserPlus, { size: 15 }), onClick: onAddUserOpen, children: labels.addUser }))] }), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: 1, overflowY: "auto", children: isUsersLoading ? ((0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 4, p: 4, align: "stretch", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 4, children: [(0, jsx_runtime_1.jsx)(react_2.SkeletonCircle, { size: "16" }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: 1, children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "18px", width: "50%", mb: 2 }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "12px", width: "35%" })] })] }), Array.from({ length: 4 }).map((_, idx) => ((0, jsx_runtime_1.jsxs)(react_2.Box, { w: "100%", children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "12px", width: "30%", mb: 2 }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "10px", width: "80%" })] }, idx)))] })) : selectedUser ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: { base: "column", md: "row" }, alignItems: { base: "flex-start", md: "center" }, justifyContent: "space-between", gap: 4, p: 4, borderBottom: "1px solid", borderColor: border, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { alignItems: "center", gap: 4, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", children: [(0, jsx_runtime_1.jsx)(react_2.Avatar, { size: "lg", name: selectedUser.name, src: selectedUser.profilePhoto, bg: avatarBg, color: avatarColor }), selectedUser.isCurrent && ((0, jsx_runtime_1.jsx)(react_2.Badge, { position: "absolute", bottom: -1, right: -1, colorScheme: "blue", variant: "solid", fontSize: "0.6rem", borderRadius: "full", px: 2, py: 0.5, boxShadow: "sm", textTransform: "none", children: labels.you }))] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Heading, { size: "md", mb: 1, color: heading, children: selectedUser.name }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: muted, mb: 2, children: selectedUser.role }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [renderStatusBadge(selectedUser.isActive), selectedUser.isPending && ((0, jsx_runtime_1.jsx)(react_2.Badge, { variant: "subtle", borderRadius: "full", px: 2, py: 0.5, fontSize: "0.65rem", fontWeight: 600, colorScheme: "orange", textTransform: "none", children: labels.pendingInvitation }))] })] })] }), canManageUsers &&
                                             !selectedUser.isSuperAdmin && ((0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, flexWrap: "wrap", children: [!selectedUser.isCurrent && !selectedUser.isActive && ((0, jsx_runtime_1.jsx)(react_2.Button, { size: "xs", variant: "outline", colorScheme: "blue", fontSize: "xs", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Send, { size: 13 }), isLoading: isInviteLoading, onClick: () => selectedUser.userId != null &&

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

@@ -1,43 +1,57 @@
 import { ElementType, ReactNode } from "react";
+/** One assignable role offered in the Add User and Change Role selects. */
 export type RoleOption = {
     id: number;
     label: string;
 };
+/** One row in the left-panel user list — see SelectedUserDetail for the richer shape used once selected. */
 export type UserListItem = {
     id: number;
     firstName: string;
     lastName: string;
     email: string;
+    /** Display-only — UserDetails never reads this in the list row itself, only in SelectedUserDetail once selected. */
     role: string;
     profile?: string;
     isActive: boolean;
+    /** isPending/isCurrent/isSuperAdmin here are decorative — only SelectedUserDetail's copies (after selection) drive any badge or action-bar behavior. */
     isPending?: boolean;
     isCurrent?: boolean;
     isSuperAdmin?: boolean;
 };
+/** One label/value row in the "Personal Information" panel; icon falls back to a generic user icon when omitted. */
 export type UserDetailRow = {
     label: string;
     value: string;
     icon?: ElementType;
 };
+/** Right-panel shape for the selected user — distinct field names from UserListItem (name, userId); not derived from it. */
 export type SelectedUserDetail = {
+    /** When null, Change Role and Resend Invitation silently no-op on click (no disabled state) — unlike Deactivate, which greys out. */
     userId?: number;
     name: string;
+    /** Feeds ChangeRoleModal's currentRole — must case-insensitively match a roleOptions[].label or the modal opens with nothing pre-selected. */
     role: string;
+    /** Shown only inside ChangeRoleModal's header — the Personal Information panel does not render this field, only `details`. */
     email: string;
     profilePhoto?: string;
     isActive: boolean;
+    /** Renders the "Pending Invitation" badge only — does not affect which action buttons show. */
     isPending?: boolean;
+    /** Hides Resend Invitation and Deactivate (both gated on !isCurrent) and shows a "You" badge on the avatar. */
     isCurrent?: boolean;
+    /** True hides the entire action bar (reinvite/change-role/deactivate), not just the deactivate button. */
     isSuperAdmin?: boolean;
     details: UserDetailRow[];
 };
+/** Form values submitted by the Add User modal; role stays null until the user picks one. */
 export type AddUserFormValues = {
     firstName: string;
     lastName: string;
     email: string;
     role: RoleOption | null;
 };
+/** Payload from the Change Role modal — just the ids, unlike AddUserFormValues which carries the full RoleOption. */
 export type ChangeRoleSubmitPayload = {
     userId: number;
     roleId: number;
@@ -83,6 +97,7 @@ export type UserDetailsLabels = {
     deactivateConfirmQuestion?: string;
     deactivateConfirmDescription?: string;
 };
+/** Two-pane user directory + detail panel with bundled Add/Change-Role/Deactivate modals; not a role editor — pair with RolesPermission for managing roles themselves. */
 export interface UserDetailsProps {
     /** Full list of users shown in the left panel. */
     users: UserListItem[];
@@ -96,19 +111,25 @@ export interface UserDetailsProps {
     canManageUsers?: boolean;
     /** Loading flags driven by the host app's async calls. */
     isUsersLoading?: boolean;
+    /** Spins only the Resend Invitation button, not the list or either modal. */
     isInviteLoading?: boolean;
+    /** Unlike isAddUserLoading/isChangeRoleLoading, the confirm modal closes immediately on click — this flag can't keep it open to show a spinner. */
     isDeactivateLoading?: boolean;
     isAddUserLoading?: boolean;
     isChangeRoleLoading?: boolean;
     /** Selection + refresh. */
     onSelectUser?: (user: UserListItem) => void;
+    /** Omitting this hides the refresh button entirely, not just disables it. */
     onRefresh?: () => void;
     /** Back navigation handler for the list panel header. */
     onBack?: () => void;
     /** Modal submit / action callbacks. */
     onAddUserSubmit?: (values: AddUserFormValues) => void | Promise<void>;
+    /** Awaited before the modal closes — unlike onDeactivate, which fires and closes immediately. */
     onChangeRoleSubmit?: (payload: ChangeRoleSubmitPayload) => void | Promise<void>;
+    /** Never called when selectedUser.userId is null — the button stays enabled but silently no-ops. */
     onReinvite?: (userId: number) => void;
+    /** Not awaited — the confirm modal closes right after this fires, so a slow or failing deactivation gets no in-modal feedback. */
     onDeactivate?: (userId: number) => void;
     /** "Add New Role" actions inside the SearchSelect of each modal. */
     onAddRoleClick?: () => void;
@@ -116,9 +137,10 @@ export interface UserDetailsProps {
     addUserUpgradeNotice?: ReactNode;
     /** Translated/override strings. */
     labels?: UserDetailsLabels;
-    /** Minimum height of the outer container. Defaults to "90vh". */
+    /** Also feeds a calc() for the sidebar's max-height — a non-CSS-length value (e.g. "auto") silently breaks that calc. Defaults to "90vh". */
     minHeight?: string;
 }
+/** Self-contained invite form (first/last/email/role) with its own validation — not a generic modal; it always renders these exact fields. */
 export interface AddUserModalProps {
     isOpen: boolean;
     onClose: () => void;
@@ -127,13 +149,17 @@ export interface AddUserModalProps {
     onSubmit?: (values: AddUserFormValues) => void | Promise<void>;
     onAddRoleClick?: () => void;
     upgradeNotice?: ReactNode;
+    /** A strict subset of UserDetailsLabels — the merged defaults from UserDetails always satisfy it. */
     labels: Required<Pick<UserDetailsLabels, "addNewUser" | "firstName" | "lastName" | "email" | "role" | "firstNamePlaceholder" | "lastNamePlaceholder" | "emailPlaceholder" | "addNewRole" | "cancel" | "save" | "firstNameRequired" | "lastNameRequired" | "emailRequired" | "emailInvalid" | "roleRequired">>;
 }
+/** Reassigns one user's role only — Save stays disabled until a genuinely different role is picked (see currentRole below). */
 export interface ChangeRoleModalProps {
     isOpen: boolean;
     onClose: () => void;
+    /** Submit silently no-ops when null — Save disables only for isUnchanged/no-selection, not for this. */
     userId: number | null;
     email?: string;
+    /** Matched to roleOptions by case-insensitive label text; no match silently pre-selects nothing and leaves Save disabled. */
     currentRole?: string;
     roleOptions: RoleOption[];
     isLoading?: boolean;
@@ -141,11 +167,14 @@ export interface ChangeRoleModalProps {
     onAddRoleClick?: () => void;
     labels: Required<Pick<UserDetailsLabels, "changeRoleTitle" | "email" | "role" | "addNewRole" | "cancel" | "save" | "roleRequired">>;
 }
+/** Confirm dialog for deactivating one user — closes immediately on confirm (see isDeactivateLoading); not a delete, the user can be reactivated later. */
 export interface DeactivateConfirmModalProps {
     isOpen: boolean;
     onClose: () => void;
     userName?: string;
+    /** Effectively unusable — the modal always closes before an async confirm could flip this. */
     isLoading?: boolean;
+    /** Synchronous by type — the modal closes in the same tick this fires, so it can't be awaited. */
     onConfirm: () => void;
     labels: Required<Pick<UserDetailsLabels, "confirmDeactivation" | "deactivateConfirmQuestion" | "deactivateConfirmDescription" | "cancel" | "deactivateUser">>;
 }

package/dist/Components/WorkspaceWindow/WorkspaceWindowProps.d.ts

@@ -2,10 +2,11 @@ import type { ReactNode } from "react";
 /**
  * Window state for a WorkspaceWindow.
  * - "medium": default centered dialog (Jira-style)
- * - "maximized": near-full-screen
+ * - "maximized": renders IDENTICALLY to "medium" — no separate maximize size exists (see onMaximize)
  * - "minimized": collapsed to a tray pill (rendered by WorkspaceTray, not the window)
  */
 export type WorkspaceWindowState = "medium" | "maximized" | "minimized";
+/** Props for one WorkspaceWindow instance; minimized windows render separately via WorkspaceTrayProps below. */
 export interface WorkspaceWindowProps {
     /** Title shown in the window's control bar. */
     title: ReactNode;
@@ -14,6 +15,7 @@ export interface WorkspaceWindowProps {
     /** Window body. */
     children: ReactNode;
     onMinimize?: () => void;
+    /** Kept for back-compat only — no maximize/restore control is rendered; this is never called. */
     onMedium?: () => void;
     onMaximize?: () => void;
     onClose?: () => void;
@@ -31,10 +33,12 @@ export interface WorkspaceWindowProps {
     /** data-testid for the window container. */
     testId?: string;
 }
+/** One minimized window in the tray; id is passed back to onRestore/onClose so callers can target the right window. */
 export interface WorkspaceTrayItem {
     id: string;
     title: ReactNode;
 }
+/** Props for the bottom-right cluster of minimized-window pills; renders nothing when items is empty. */
 export interface WorkspaceTrayProps {
     /** Minimized items rendered as restore pills along the bottom. */
     items: WorkspaceTrayItem[];
@@ -53,6 +57,7 @@ export interface WorkspaceTrayProps {
         close: () => void;
     }) => ReactNode;
 }
+/** Props for WorkspaceTrayPreview — despite the name, works for any hover trigger, not just tray pills. */
 export interface WorkspaceTrayPreviewProps {
     /**
      * The trigger markup (typically a tray pill). The preview + trigger share one

package/dist/Hooks/exclusiveOverlay.d.ts

@@ -0,0 +1,4 @@
+export declare const exclusiveOpen: (id: string, close: () => void) => void;
+export declare const exclusiveClose: (id: string) => void;
+/** Test-only reset — not exported from the package root. */
+export declare const resetExclusiveOverlay: () => void;