pixelize-design-library 2.4.2-beta.43 → 2.4.2-beta.44

package/dist/Components/Toggle/TableToggle.js

@@ -4,15 +4,15 @@ 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("react");
-const react_2 = require("@chakra-ui/react");
+const react_1 = 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 useSlidingPill_1 = require("../SegmentedControl/useSlidingPill");
 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). */
+/** Two icon-only IconButtons (Grid/List), aria-pressed marks the active one; shares variant with SegmentedControl (see MODULE.md). */
 const TableToggle = ({ value, onChange, variant = "default" }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const { colors } = theme;
@@ -22,30 +22,15 @@ const TableToggle = ({ value, onChange, variant = "default" }) => {
     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 { trackRef, itemRefs: refs, pill } = (0, useSlidingPill_1.useSlidingPill)(hasIndicator, selectedIndex, []);
     const styles = {
         container: {
             display: "flex",
             alignItems: "center",
             bg: isBrandSlide ? colors.primary.opacity[8] : isUnderlineSlide ? "transparent" : colors.background[600],
             p: isUnderlineSlide ? "0" : "0.125rem",
-            borderRadius: isUnderlineSlide ? "none" : "md",
+            borderRadius: isUnderlineSlide ? "none" : "lg",
             borderBottom: isUnderlineSlide ? `0.0625rem solid ${colors.boxborder[200]}` : undefined,
             height: "2rem",
             gap: isUnderlineSlide ? "0" : "0.125rem",
@@ -64,9 +49,9 @@ const TableToggle = ({ value, onChange, variant = "default" }) => {
                 : value === mode
                     ? colors.accentText
                     : restInk,
-            borderRadius: isUnderlineSlide ? "none" : "base",
+            borderRadius: isUnderlineSlide ? "none" : "lg",
             height: "1.75rem",
-            border: hasIndicator ? "none" : "0.031rem solid",
+            border: hasIndicator ? "none" : "1px solid",
             borderColor: hasIndicator
                 ? "transparent"
                 : value === mode
@@ -90,10 +75,10 @@ const TableToggle = ({ value, onChange, variant = "default" }) => {
             transition: "color 0.2s ease-in-out",
         }),
     };
-    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) => {
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { ref: trackRef, ...styles.container, children: [isBrandSlide && pill && ((0, jsx_runtime_1.jsx)(react_1.Box, { "aria-hidden": "true", position: "absolute", top: "0.125rem", left: 0, h: "1.75rem", w: `${pill.width}px`, borderRadius: "lg", 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_1.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: "Grid View", placement: "top", fontSize: 12, hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_1.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) => {
+                    }, "aria-label": "Grid View", "aria-pressed": value === "grid", 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: "List View", placement: "top", fontSize: 12, hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_1.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") }) })] }));
+                    }, "aria-label": "List View", "aria-pressed": value === "list", 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,7 +1,8 @@
+import type { SegmentedControlVariant } from "../SegmentedControl/SegmentedControlProps";
 /** 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";
+/** Visual style for TableToggle; single-sourced from SegmentedControl's own variant union. */
+export type TableToggleVariant = SegmentedControlVariant;
 /** Props for TableToggle — the exported type is named ViewToggleProps, not TableToggleProps. */
 export type ViewToggleProps = {
     value: ViewMode;

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

@@ -1,3 +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;
+/** The library's on/off switch: a native checkbox with role="switch", label, helper and error row. */
+export default function ToggleSwitch({ isChecked, defaultChecked, onChange, isDisabled, isReadOnly, size, colorScheme, id, label, fieldLabel, isInformation, informationMessage, labelPosition, helperText, error, errorMessage, isRequired, name, value, onFocus, onBlur, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, m, mt, mb, ml, mr, mx, my, }: ToggleSwitchProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/ToggleSwitch/ToggleSwitch.js

@@ -1,19 +1,53 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 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 react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const motion_1 = require("../../Theme/chakra/motion");
+const motion_2 = require("../../Theme/tokens/primitives/motion");
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
+const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
+const useFieldIds_1 = require("../Common/useFieldIds");
+const FieldMessage_1 = __importDefault(require("../Common/FieldMessage"));
+const FormLabel_1 = require("../Common/FormLabel");
 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" },
+    lg: { w: "3rem", h: "1.75rem", knob: "1.375rem", travel: "1.25rem" },
+};
+const toggleOnEnter = (event) => {
+    if (event.key !== "Enter")
+        return;
+    event.preventDefault();
+    event.currentTarget.click();
 };
-/** 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, }) {
+/** The library's on/off switch: a native checkbox with role="switch", label, helper and error row. */
+function ToggleSwitch({ isChecked, defaultChecked = false, onChange, isDisabled = false, isReadOnly = false, size = "md", colorScheme = "primary", id, label, fieldLabel, isInformation, informationMessage, labelPosition = "end", helperText, error = false, errorMessage, isRequired = false, name, value, onFocus, onBlur, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, m, mt, mb, ml, mr, mx, my, }) {
     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)" }) }));
+    const ids = (0, useFieldIds_1.useFieldIds)(id, { error, errorMessage, helperText });
+    const describedBy = [ariaDescribedBy, ids.describedBy].filter(Boolean).join(" ") || undefined;
+    const motion = (0, motion_2.transitionFor)(["background-color", "border-color"]);
+    const filled = (0, filledSurface_1.resolveFilledSurface)(colors[colorScheme], colors);
+    const offTrack = (0, outlineRung_1.liftToContrast)(colors.background[600], colors.background[50], outlineRung_1.AA_NON_TEXT);
+    const [internalChecked, setInternalChecked] = (0, react_1.useState)(defaultChecked);
+    const checked = isChecked !== null && isChecked !== void 0 ? isChecked : internalChecked;
+    const handleChange = (event) => {
+        if (isReadOnly)
+            return;
+        const next = event.target.checked;
+        if (isChecked === undefined)
+            setInternalChecked(next);
+        onChange === null || onChange === void 0 ? void 0 : onChange(next, event);
+    };
+    const track = ((0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", display: "inline-flex", flexShrink: 0, w: dims.w, h: dims.h, sx: { "input:focus-visible + span": (0, focusRing_styles_1.focusVisibleRing)(colors) }, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: "input", type: "checkbox", role: "switch", ...ids.controlProps, "aria-describedby": describedBy, "aria-checked": checked, "aria-readonly": isReadOnly ? true : undefined, "aria-label": ariaLabel, name: name, value: value, checked: checked, disabled: isDisabled, onChange: handleChange, onKeyDown: toggleOnEnter, onFocus: onFocus, onBlur: onBlur, position: "absolute", inset: 0, w: "100%", h: "100%", m: 0, opacity: 0, zIndex: 1, cursor: isDisabled || isReadOnly ? "not-allowed" : "pointer" }), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", "aria-hidden": "true", position: "relative", display: "inline-flex", alignItems: "center", w: "100%", h: "100%", borderRadius: "full", borderWidth: "1px", borderStyle: "solid", borderColor: error ? colors.semanticText.error : checked ? filled.fill : colors.boxborder[500], bg: checked ? filled.fill : offTrack, transition: motion, sx: (0, motion_1.reducedMotionSx)(), children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", position: "absolute", left: "0.125rem", w: dims.knob, h: dims.knob, borderRadius: "full", bg: checked ? filled.color : colors.white, boxShadow: "sm", transition: (0, motion_2.transitionFor)(["transform"], "base"), transform: checked ? `translateX(${dims.travel})` : "translateX(0)", sx: (0, motion_1.reducedMotionSx)() }) })] }));
+    const labelNode = label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: ids.inputId, isRequired: isRequired && !fieldLabel, inline: true }));
+    const fieldLabelNode = fieldLabel && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: fieldLabel, id: ids.inputId, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { display: "inline-flex", flexDirection: "column", opacity: isDisabled ? 0.5 : 1, m: m, mt: mt, mb: mb, ml: ml, mr: mr, mx: mx, my: my, children: [fieldLabelNode, (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, children: [labelPosition === "start" && labelNode, track, labelPosition === "end" && labelNode] }), (0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
 }

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

@@ -1,13 +1,68 @@
-/** 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;
+import type { ChangeEvent, FocusEventHandler } from "react";
+/** Track/knob size preset; exact widths and travel live in ToggleSwitch.tsx's SIZES map. */
+export type ToggleSwitchSize = "sm" | "md" | "lg";
+/** Which theme scale fills the "on" track, via `resolveFilledSurface`. Defaults to "primary". */
+export type ToggleSwitchColorScheme = "primary" | "secondary" | "tertiary" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink";
+type Naming = {
+    label: string;
+    "aria-label"?: string;
+    fieldLabel?: string;
+} | {
+    label?: undefined;
+    "aria-label": string;
+    fieldLabel?: string;
+} | {
+    label?: undefined;
+    "aria-label"?: undefined;
+    fieldLabel: string;
+};
+/** Controlled when `isChecked` is passed, else uncontrolled from `defaultChecked`. Needs a visible `label`/`fieldLabel` or an `aria-label`. `error` replaces `helperText`. */
+export type ToggleSwitchProps = Naming & {
+    /** Omit for an uncontrolled switch driven by `defaultChecked`. */
+    isChecked?: boolean;
+    /** Initial state for an uncontrolled switch; ignored once `isChecked` is passed. */
+    defaultChecked?: boolean;
+    /** Fires with the next state; the native change event comes second. Optional when uncontrolled with no listener. */
+    onChange?: (checked: boolean, event: ChangeEvent<HTMLInputElement>) => void;
+    /** Also dims the whole field to 50% opacity. */
     isDisabled?: boolean;
+    /** Stays focusable and announces `aria-readonly`, but ignores clicks and keys — unlike `isDisabled`. */
+    isReadOnly?: boolean;
+    /** Defaults to "md". */
     size?: ToggleSwitchSize;
+    /** Fill colour when on. Defaults to "primary". */
+    colorScheme?: ToggleSwitchColorScheme;
+    /** Input id; generated when omitted, and the base for message/label ids. */
     id?: string;
-    /** The control carries no visible text, so it has no other way to be named. */
-    "aria-label": string;
+    /** Merged with the helper/error message id, never replaced by it. */
     "aria-describedby"?: string;
+    /** Label side relative to the track; defaults to "end". */
+    labelPosition?: "start" | "end";
+    /** Field label above the switch, its own `<label for>` — distinct from the inline `label` beside the track. */
+    fieldLabel?: string;
+    /** Info tooltip icon beside `fieldLabel`; alone it renders nothing without `informationMessage`. */
+    isInformation?: boolean;
+    /** Tooltip text shown when `isInformation` is set. */
+    informationMessage?: string;
+    /** Hidden while `error` is true. */
+    helperText?: string;
+    /** Red track border and shows `errorMessage` instead of `helperText`. */
+    error?: boolean;
+    errorMessage?: string;
+    /** Adds the asterisk to `fieldLabel` when present, else to the inline `label`; `aria-required` is omitted, not allowed on role="switch". */
+    isRequired?: boolean;
+    name?: string;
+    /** Native input value submitted with a form when checked. */
+    value?: string;
+    onFocus?: FocusEventHandler<HTMLInputElement>;
+    onBlur?: FocusEventHandler<HTMLInputElement>;
+    /** Margin on the wrapper `Box` — a closed list, not a general style escape hatch. */
+    m?: string | number;
+    mt?: string | number;
+    mb?: string | number;
+    ml?: string | number;
+    mr?: string | number;
+    mx?: string | number;
+    my?: string | number;
 };
+export {};

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

@@ -1,17 +1,2 @@
 import { ToolTipProps } from "./ToolTipProps";
-/**
- * A tooltip that only appears when its child text is actually truncated
- * (ellipsis active) — no tooltip when the text fully fits. Thin sugar over
- * `<ToolTip overflowOnly>`; use it wherever you clamp text with `noOfLines` /
- * ellipsis and want the full text revealed only when it's cut off.
- *
- * The child must be the single element that clamps the text (e.g. a Chakra
- * `Text` with `noOfLines`); its ref is managed internally. Works for both
- * single-line and multi-line clamps.
- *
- * @example
- * <OverflowToolTip label={title}>
- *   <Text noOfLines={1}>{title}</Text>
- * </OverflowToolTip>
- */
 export default function OverflowToolTip(props: ToolTipProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/ToolTip/OverflowToolTip.js

@@ -6,21 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = OverflowToolTip;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ToolTip_1 = __importDefault(require("./ToolTip"));
-/**
- * A tooltip that only appears when its child text is actually truncated
- * (ellipsis active) — no tooltip when the text fully fits. Thin sugar over
- * `<ToolTip overflowOnly>`; use it wherever you clamp text with `noOfLines` /
- * ellipsis and want the full text revealed only when it's cut off.
- *
- * The child must be the single element that clamps the text (e.g. a Chakra
- * `Text` with `noOfLines`); its ref is managed internally. Works for both
- * single-line and multi-line clamps.
- *
- * @example
- * <OverflowToolTip label={title}>
- *   <Text noOfLines={1}>{title}</Text>
- * </OverflowToolTip>
- */
+// Tooltip that appears only when its child text is actually truncated. Sugar over <ToolTip overflowOnly>.
 function OverflowToolTip(props) {
     return (0, jsx_runtime_1.jsx)(ToolTip_1.default, { ...props, overflowOnly: true });
 }

package/dist/Components/ToolTip/ToolTip.js

@@ -6,20 +6,20 @@ const react_1 = require("react");
 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");
-const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const TOOLTIP_OPEN_DELAY_MS = 300;
+/** Keeps the bubble off the viewport edge: a subpixel overhang there raises page scrollbars. */
+const VIEWPORT_PADDING = 8;
+const withViewportPadding = (modifiers) => {
+    const caller = modifiers !== null && modifiers !== void 0 ? modifiers : [];
+    if (caller.some((m) => m.name === "preventOverflow"))
+        return modifiers;
+    return [...caller, { name: "preventOverflow", options: { padding: VIEWPORT_PADDING } }];
+};
 /** 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.
+function ToolTip({ placement = "top", label, children, hasArrow = true, fontSize, bg, color, isDisabled, overflowOnly = false, isOpen, defaultIsOpen, openDelay = TOOLTIP_OPEN_DELAY_MS, closeDelay = 0, arrowSize = 10, closeOnClick = false, size, width, height, arrowPadding, arrowShadowColor, direction, gutter = 8, onClose, modifiers, closeOnPointerDown, styles, }) {
+    // NOTE: hook always runs (Rules of Hooks) but is inert unless overflowOnly is set — no cost for ordinary tooltips.
     const { ref, isTruncated } = (0, useIsTruncated_1.useIsTruncated)(label, overflowOnly && (0, react_1.isValidElement)(children));
-    // `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);
+    const safeModifiers = (0, react_1.useMemo)(() => withViewportPadding(modifiers), [modifiers]);
     let content = children;
     let effectiveDisabled = isDisabled;
     if (overflowOnly && (0, react_1.isValidElement)(children)) {
@@ -30,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: 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 }));
+    return ((0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: label, placement: placement, hasArrow: hasArrow, fontSize: fontSize, bg: bg, 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: safeModifiers, closeOnPointerDown: closeOnPointerDown, style: styles, children: content }));
 }

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

@@ -1,10 +1,12 @@
 import { TooltipProps as ChakraTooltip } from "@chakra-ui/react";
-/** Closed prop list, no ...rest — shouldWrapChildren/portalProps aren't exposed; hasArrow defaults true, closeOnClick false (both flipped from Chakra). */
+/** Closed prop list, no ...rest; hasArrow defaults true, closeOnClick false, openDelay 300ms; look comes from the theme's tooltipSurface. */
 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/color default to the theme's tooltipSurface (dark in both modes) — override only if you own the contrast. */
     bg?: string;
+    /** Label ink; defaults to the tooltipSurface text colour. */
     color?: string;
     children: React.ReactNode;
+    /** Inline CSS on the tooltip bubble (forwarded as `style`), not on the child. */
     styles?: React.CSSProperties;
     /**
      * When `true`, the tooltip is shown **only** while its child is actually
@@ -15,5 +17,6 @@ export type ToolTipProps = Pick<ChakraTooltip, "placement" | "label" | "hasArrow
      * single-line and multi-line clamps.
      */
     overflowOnly?: boolean;
+    /** Defaults to "top". */
     placement?: "auto" | "auto-start" | "auto-end" | "top" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end";
 };

package/dist/Components/UpgradeButton/UpgradeButton.js

@@ -7,8 +7,10 @@ const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const gradientInk_1 = require("../../Theme/tokens/builders/gradientInk");
 const color_1 = require("../../Theme/tokens/builders/color");
 const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const neutrals_1 = require("../../Theme/tokens/brands/neutrals");
 /** The brand's gold sparkle accent, kept only where it clears 3:1 on the button's own fill. */
-const ACCENT_GOLD = "#FFD66B";
+const ACCENT_GOLD = neutrals_1.neutralTokens.yellow[400];
 const sizeMap = {
     // 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.
@@ -20,12 +22,7 @@ const UpgradeButton = ({ label, mobileLabel, subtitle, icon = lucide_react_1.Spa
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const c = theme.colors;
     const themeGradient = c.gradient;
-    // `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.
+    // NOTE: primary/secondary shifted one rung darker — the [500]->[700] pair had no ink that clears AA at both ends.
     const variantGradient = {
         brand: themeGradient,
         primary: { from: c.primary[600], to: c.primary[800] },
@@ -35,13 +32,10 @@ const UpgradeButton = ({ label, mobileLabel, subtitle, icon = lucide_react_1.Spa
         danger: { from: c.semantic.error[400], to: c.semantic.error[600] },
         info: { from: c.semantic.info[400], to: c.semantic.info[600] },
     };
-    // `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.
+    // NOTE: gold iconColor default fails AA as body text (~1.4-3.3 across brands) — label/subtitle use this ink instead.
     const resolved = (0, gradientInk_1.resolveGradient)(gradient !== null && gradient !== void 0 ? gradient : variantGradient[variant], c.white, c.black);
     const ink = resolved.ink;
-    // 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.
+    // NOTE: gold only clears 3:1 on a dark gradient — falls back to label ink whenever it 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
@@ -52,7 +46,7 @@ const UpgradeButton = ({ label, mobileLabel, subtitle, icon = lucide_react_1.Spa
     const g = `linear-gradient(135deg, ${resolved.from} 0%, ${resolved.to} 100%)`;
     const gReversed = `linear-gradient(135deg, ${resolved.to} 0%, ${resolved.from} 100%)`;
     const hasMobile = !!mobileLabel && mobileLabel !== label;
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { as: "button", type: "button", "aria-label": ariaLabel || label, onClick: blocked ? undefined : onClick, disabled: isDisabled, position: "relative", cursor: blocked ? "default" : "pointer", opacity: isDisabled ? 0.6 : 1, px: { base: s.px === "20px" ? "14px" : s.px, md: s.px }, py: s.py, bgImage: g, color: ink, borderRadius: s.radius, fontWeight: "bold", textAlign: "center", overflow: "hidden", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", transition: "transform 0.3s ease, box-shadow 0.3s ease, background-image 0.3s ease", _focusVisible: { outline: "none", boxShadow: `0 0 0 3px ${resolved.from}55` }, _hover: blocked
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { as: "button", type: "button", "aria-label": ariaLabel || label, onClick: blocked ? undefined : onClick, disabled: isDisabled, position: "relative", cursor: blocked ? "default" : "pointer", opacity: isDisabled ? 0.6 : 1, px: { base: s.px === "20px" ? "14px" : s.px, md: s.px }, py: s.py, bgImage: g, color: ink, borderRadius: s.radius, fontWeight: "bold", textAlign: "center", overflow: "hidden", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", transition: "transform 0.3s ease, box-shadow 0.3s ease, background-image 0.3s ease", _hover: blocked
             ? undefined
             : {
                 transform: "translateY(-2px)",
@@ -61,6 +55,7 @@ const UpgradeButton = ({ label, mobileLabel, subtitle, icon = lucide_react_1.Spa
                 ...(shimmer ? { _before: { left: "130%" } } : {}),
             }, sx: shimmer
             ? {
+                ...(0, focusRing_styles_1.focusVisibleStyles)(c),
                 _before: {
                     content: '""',
                     position: "absolute",
@@ -74,6 +69,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: 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 }))] }));
+            : (0, focusRing_styles_1.focusVisibleStyles)(c), 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/AddUserModal.js

@@ -80,7 +80,7 @@ const AddUserModal = ({ isOpen, onClose, roleOptions, isLoading, onSubmit, onAdd
             type: "email",
         },
     ];
-    return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isOpen, onClose: onClose, trapFocus: false, isCentered: true, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, { backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(react_2.ModalContent, { bg: colors.background[50], borderRadius: "2xl", overflow: "hidden", children: [(0, jsx_runtime_1.jsxs)(react_2.ModalHeader, { borderBottom: "1px solid", borderColor: colors.boxborder[200], children: [labels.addNewUser, upgradeNotice] }), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, {}), (0, jsx_runtime_1.jsx)(react_2.ModalBody, { py: 5, children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 4, align: "stretch", children: [textFields.map((field) => ((0, jsx_runtime_1.jsx)(react_2.FormControl, { isInvalid: !!errors[field.id], children: (0, jsx_runtime_1.jsx)(TextInput_1.default, { id: field.id, name: field.id, type: field.type, label: field.label, placeholder: field.placeholder, value: values[field.id], onChange: handleChange(field.id), isRequired: true, error: !!errors[field.id], errorMessage: errors[field.id], width: "100%" }) }, field.id))), (0, jsx_runtime_1.jsx)(react_2.FormControl, { isInvalid: !!errors.role, isRequired: true, children: (0, jsx_runtime_1.jsx)(SearchSelect_1.default, { label: labels.role, options: roleOptions.map((item) => ({
+    return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isOpen, onClose: onClose, trapFocus: false, isCentered: true, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, { backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(react_2.ModalContent, { bg: colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", children: [(0, jsx_runtime_1.jsxs)(react_2.ModalHeader, { borderBottom: "1px solid", borderColor: colors.boxborder[200], children: [labels.addNewUser, upgradeNotice] }), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, {}), (0, jsx_runtime_1.jsx)(react_2.ModalBody, { py: 5, children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 4, align: "stretch", children: [textFields.map((field) => ((0, jsx_runtime_1.jsx)(react_2.FormControl, { isInvalid: !!errors[field.id], children: (0, jsx_runtime_1.jsx)(TextInput_1.default, { id: field.id, name: field.id, type: field.type, label: field.label, placeholder: field.placeholder, value: values[field.id], onChange: handleChange(field.id), isRequired: true, error: !!errors[field.id], errorMessage: errors[field.id], width: "100%" }) }, field.id))), (0, jsx_runtime_1.jsx)(react_2.FormControl, { isInvalid: !!errors.role, isRequired: true, children: (0, jsx_runtime_1.jsx)(SearchSelect_1.default, { label: labels.role, options: roleOptions.map((item) => ({
                                             id: item.id,
                                             label: item.label,
                                         })), value: (_a = values.role) !== null && _a !== void 0 ? _a : undefined, onSelect: (option) => {

package/dist/Components/UserDetails/ChangeRoleModal.js

@@ -36,7 +36,7 @@ const ChangeRoleModal = ({ isOpen, onClose, userId, email, currentRole, roleOpti
             return;
         await (onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit({ userId, roleId: selectedRole.id }));
     };
-    return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isOpen, onClose: onClose, trapFocus: false, isCentered: true, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, { backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(react_2.ModalContent, { bg: colors.background[50], borderRadius: "2xl", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_2.ModalHeader, { borderBottom: "1px solid", borderColor: colors.boxborder[200], children: labels.changeRoleTitle }), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, {}), (0, jsx_runtime_1.jsx)(react_2.ModalBody, { py: 5, children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 4, align: "stretch", children: [(0, jsx_runtime_1.jsx)(TextInput_1.default, { label: labels.email, value: email !== null && email !== void 0 ? email : "", isDisabled: true, width: "100%" }), (0, jsx_runtime_1.jsx)(react_2.FormControl, { isInvalid: !!error, isRequired: true, children: (0, jsx_runtime_1.jsx)(SearchSelect_1.default, { label: labels.role, options: roleOptions.map((item) => ({
+    return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isOpen, onClose: onClose, trapFocus: false, isCentered: true, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, { backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(react_2.ModalContent, { bg: colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_2.ModalHeader, { borderBottom: "1px solid", borderColor: colors.boxborder[200], children: labels.changeRoleTitle }), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, {}), (0, jsx_runtime_1.jsx)(react_2.ModalBody, { py: 5, children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 4, align: "stretch", children: [(0, jsx_runtime_1.jsx)(TextInput_1.default, { label: labels.email, value: email !== null && email !== void 0 ? email : "", isDisabled: true, width: "100%" }), (0, jsx_runtime_1.jsx)(react_2.FormControl, { isInvalid: !!error, isRequired: true, children: (0, jsx_runtime_1.jsx)(SearchSelect_1.default, { label: labels.role, options: roleOptions.map((item) => ({
                                             id: item.id,
                                             label: item.label,
                                         })), value: selectedRole !== null && selectedRole !== void 0 ? selectedRole : undefined, onSelect: (option) => {

package/dist/Components/UserDetails/DeactivateConfirmModal.js

@@ -7,13 +7,11 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 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 statusTone_1 = require("../../Theme/tokens/builders/statusTone");
-const Button_1 = __importDefault(require("../Button/Button"));
+const tone_1 = require("../../Theme/tokens/builders/tone");
+const ConfirmDialog_1 = __importDefault(require("../ConfirmDialog/ConfirmDialog"));
 const DeactivateConfirmModal = ({ isOpen, onClose, userName, isLoading, onConfirm, labels, }) => {
     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.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 }) })] })] }) })] })] }));
+    const errorTone = (0, tone_1.resolveSoftTone)(colors, colors.semantic.error);
+    return ((0, jsx_runtime_1.jsxs)(ConfirmDialog_1.default, { isOpen: isOpen, onClose: onClose, onConfirm: onConfirm, title: labels.confirmDeactivation, iconBg: errorTone.bg, iconColor: errorTone.fg, cancelLabel: labels.cancel, confirmLabel: labels.deactivateUser, confirmIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 16 }), isConfirmLoading: isLoading, disableCancelWhilePending: false, focusCancelOnOpen: false, bodyLayout: "stack", actionsPt: 2, 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] }) })] }));
 };
 exports.default = DeactivateConfirmModal;

package/dist/Components/UserDetails/UserDetails.js

@@ -39,12 +39,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const react_2 = require("@chakra-ui/react");
+const Avatar_1 = __importDefault(require("../Avatar/Avatar"));
 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 PersonChip_1 = __importDefault(require("../PersonChip/PersonChip"));
 const AddUserModal_1 = __importDefault(require("./AddUserModal"));
 const ChangeRoleModal_1 = __importDefault(require("./ChangeRoleModal"));
 const DeactivateConfirmModal_1 = __importDefault(require("./DeactivateConfirmModal"));
@@ -98,10 +100,6 @@ const UserDetails = ({ users, selectedUser, selectedUserId, roleOptions = [], ca
     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];
-    // Picked dynamically against `avatarBg` rather than a fixed [600] rung — a fixed rung falls
-    // short of AA (4.27) for some brands' primary scale in dark mode.
-    const avatarColor = (0, accentText_1.accentTextOnCanvas)(colors.primary, avatarBg);
     const successScheme = "green";
     const dangerScheme = "red";
     const handleDeactivateConfirm = () => {
@@ -109,15 +107,15 @@ const UserDetails = ({ users, selectedUser, selectedUserId, roleOptions = [], ca
             onDeactivate === null || onDeactivate === void 0 ? void 0 : onDeactivate(actionUserId);
         onConfirmClose();
     };
-    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 renderStatusBadge = (isActive) => ((0, jsx_runtime_1.jsx)(react_2.Badge, { variant: "subtle", colorScheme: isActive ? successScheme : dangerScheme, borderRadius: "full", px: 2, py: 0.5, fontSize: "xs", 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: "xs", 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)` }, tabIndex: 0, role: "region", "aria-label": labels.teamMembers, 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 ? rowBackgrounds.selected : "transparent", _hover: {
                                         background: isSelected
                                             ? 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 &&
+                                    }, 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)(PersonChip_1.default, { size: "sm", name: `${user.firstName} ${user.lastName}`, imageUrl: user.profile, secondary: 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", tabIndex: 0, role: "region", "aria-label": selectedUser ? labels.userDetails : labels.selectTeamMember, 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)(Avatar_1.default, { size: "lg", name: selectedUser.name, src: selectedUser.profilePhoto }), selectedUser.isCurrent && ((0, jsx_runtime_1.jsx)(react_2.Badge, { position: "absolute", bottom: -1, right: -1, colorScheme: "blue", variant: "solid", fontSize: "xs", 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: "xs", 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 &&
                                                         (onReinvite === null || onReinvite === void 0 ? void 0 : onReinvite(selectedUser.userId)), children: labels.resendInvitation })), (0, jsx_runtime_1.jsx)(react_2.Button, { size: "xs", variant: "outline", colorScheme: "gray", fontSize: "xs", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Shield, { size: 13 }), onClick: () => {
                                                         if (selectedUser.userId != null) {

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

@@ -1,15 +1,2 @@
 import type { WorkspaceTrayPreviewProps } from "./WorkspaceWindowProps";
-/**
- * Presentational, app-agnostic hover-preview for a "workspace tray" pill (or any
- * trigger). Headless of any data: the consumer passes the trigger as `children`
- * and the card body as `preview` (node or render-prop receiving `close()`), so
- * this can preview a ticket, a doc, a chat — anything — with the same intent-safe
- * hover behavior.
- *
- * Intent-safe hover (hover-bridge): hovering the trigger opens the card after a
- * short delay (anti-flash); a shared open/close timer + small gap let the cursor
- * travel trigger ⇄ card without the card closing; leaving both (with a grace
- * delay) closes it; Escape dismisses. Fetch/render the preview lazily via
- * `onOpenChange`.
- */
 export default function WorkspaceTrayPreview({ children, preview, enabled, openDelayMs, closeDelayMs, placement, onOpenChange, width, testId, }: WorkspaceTrayPreviewProps): import("react/jsx-runtime").JSX.Element;