pixelize-design-library 2.4.2 → 3.0.0

package/dist/esm/Components/Toggle/TableToggle.js

@@ -2,38 +2,85 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, IconButton } from "@chakra-ui/react";
 import { Columns3, Table2 } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { AA_NON_TEXT, liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
+import { resolveFilledSurface } from "../../Theme/tokens/builders/filledSurface.js";
 import ToolTip from "../ToolTip/ToolTip.js";
-const TableToggle = ({ value, onChange }) => {
+import { useSlidingPill } from "../SegmentedControl/useSlidingPill.js";
+import { BUTTON_SIZES } from "../../Theme/tokens/primitives/controlSizes.js";
+import { BORDER_WIDTHS } from "../../Theme/tokens/primitives/borderWidths.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+const MODES = ["grid", "list"];
+const TRACK_HEIGHT = BUTTON_SIZES.sm.height;
+const SEGMENT_HEIGHT = `calc(${TRACK_HEIGHT} - 0.25rem)`;
+const INK_TRANSITION = transitionFor(["color"], "base");
+const PILL_TRANSITION = transitionFor(["transform", "width"], "base", "out");
+/** Two icon-only IconButtons (Grid/List), aria-pressed marks the active one; shares variant with SegmentedControl. */
+const TableToggle = ({ value, onChange, variant = "default" }) => {
     const theme = useCustomTheme();
+    const { colors } = theme;
+    const isBrandSlide = variant === "brandSlide";
+    const isUnderlineSlide = variant === "underlineSlide";
+    const hasIndicator = isBrandSlide || isUnderlineSlide;
+    const brandFill = resolveFilledSurface(colors.primary, colors);
+    const restInk = liftToContrast(colors.background[800], colors.background[600], AA_NON_TEXT);
+    const hoverInk = liftToContrast(colors.background[900], colors.background[400], AA_NON_TEXT);
+    const selectedIndex = MODES.indexOf(value);
+    const { trackRef, itemRefs: refs, pill } = useSlidingPill(hasIndicator, selectedIndex, []);
     const styles = {
         container: {
             display: "flex",
             alignItems: "center",
-            bg: theme.colors.background[600],
-            p: "0.125rem",
-            borderRadius: "md",
-            height: "2rem",
-            gap: "0.125rem",
+            bg: isBrandSlide ? colors.primary.opacity[8] : isUnderlineSlide ? "transparent" : colors.background[600],
+            p: isUnderlineSlide ? "0" : "0.125rem",
+            borderRadius: isUnderlineSlide ? "none" : "lg",
+            borderBottom: isUnderlineSlide ? `${BORDER_WIDTHS.hairline} solid ${colors.boxborder[200]}` : undefined,
+            height: TRACK_HEIGHT,
+            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",
-            height: "1.75rem",
-            border: "0.031rem solid",
-            borderColor: value === mode ? theme.colors.background[400] : "transparent",
+            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" : "lg",
+            height: SEGMENT_HEIGHT,
+            border: hasIndicator ? "none" : "1px 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: INK_TRANSITION,
         }),
     };
-    return (_jsxs(Box, { ...styles.container, children: [_jsx(ToolTip, { label: "Table View", placement: "top", fontSize: 12, hasArrow: true, children: _jsx(IconButton, { "aria-label": "Grid View", icon: _jsx(Table2, { size: "1.25rem" }), variant: "ghost", onClick: () => onChange("grid"), ...styles.button("grid") }) }), _jsx(ToolTip, { label: "Kanban View", placement: "top", fontSize: 12, hasArrow: true, children: _jsx(IconButton, { "aria-label": "List View", icon: _jsx(Columns3, { size: "1.25rem" }), variant: "ghost", onClick: () => onChange("list"), ...styles.button("list") }) })] }));
+    return (_jsxs(Box, { ref: trackRef, ...styles.container, children: [isBrandSlide && pill && (_jsx(Box, { "aria-hidden": "true", position: "absolute", top: "0.125rem", left: 0, h: SEGMENT_HEIGHT, w: `${pill.width}px`, borderRadius: "lg", bg: brandFill.fill, boxShadow: `0 0.125rem 0.5rem ${colors.boxShadow.primary}`, transform: `translateX(${pill.left}px)`, transition: PILL_TRANSITION })), isUnderlineSlide && pill && (_jsx(Box, { "aria-hidden": "true", position: "absolute", bottom: `-${BORDER_WIDTHS.hairline}`, left: 0, h: "0.125rem", w: `${pill.width}px`, borderRadius: "full", bg: colors.primary[500], transform: `translateX(${pill.left}px)`, transition: PILL_TRANSITION })), _jsx(ToolTip, { label: "Grid View", placement: "top", fontSize: "xs", hasArrow: true, children: _jsx(IconButton, { ref: (node) => {
+                        refs.current[0] = node;
+                    }, "aria-label": "Grid View", "aria-pressed": value === "grid", icon: _jsx(Table2, { size: "1.25rem" }), variant: "ghost", onClick: () => onChange("grid"), ...styles.button("grid") }) }), _jsx(ToolTip, { label: "List View", placement: "top", fontSize: "xs", hasArrow: true, children: _jsx(IconButton, { ref: (node) => {
+                        refs.current[1] = node;
+                    }, "aria-label": "List View", "aria-pressed": value === "list", icon: _jsx(Columns3, { size: "1.25rem" }), variant: "ghost", onClick: () => onChange("list"), ...styles.button("list") }) })] }));
 };
 export default TableToggle;

package/dist/esm/Components/ToggleSwitch/ToggleSwitch.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useState } from "react";
+import { Box, Flex } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { focusVisibleRing } from "../../Theme/chakra/focusRing.styles.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { AA_NON_TEXT, liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
+import { resolveFilledSurface } from "../../Theme/tokens/builders/filledSurface.js";
+import { useFieldIds } from "../Common/useFieldIds.js";
+import FieldMessage from "../Common/FieldMessage.js";
+import { TextLabel } from "../Common/FormLabel.js";
+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();
+};
+/** On/off switch: a native checkbox with role="switch", label, helper and error row; `ref` is that `<input>`. */
+const ToggleSwitch = forwardRef(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, }, ref) {
+    const { colors } = useCustomTheme();
+    const dims = SIZES[size];
+    const ids = useFieldIds(id, { error, errorMessage, helperText });
+    const describedBy = [ariaDescribedBy, ids.describedBy].filter(Boolean).join(" ") || undefined;
+    const motion = transitionFor(["background-color", "border-color"]);
+    const filled = resolveFilledSurface(colors[colorScheme], colors);
+    const offTrack = liftToContrast(colors.background[600], colors.background[50], AA_NON_TEXT);
+    const [internalChecked, setInternalChecked] = 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 = (_jsxs(Box, { position: "relative", display: "inline-flex", flexShrink: 0, w: dims.w, h: dims.h, sx: { "input:focus-visible + span": focusVisibleRing(colors) }, children: [_jsx(Box, { ref: ref, 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" }), _jsx(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: reducedMotionSx(), children: _jsx(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: transitionFor(["transform"], "base"), transform: checked ? `translateX(${dims.travel})` : "translateX(0)", sx: reducedMotionSx() }) })] }));
+    const labelNode = label && (_jsx(TextLabel, { label: label, id: ids.inputId, isRequired: isRequired && !fieldLabel, inline: true }));
+    const fieldLabelNode = fieldLabel && (_jsx(TextLabel, { label: fieldLabel, id: ids.inputId, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired }));
+    return (_jsxs(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, _jsxs(Flex, { align: "center", gap: 2, children: [labelPosition === "start" && labelNode, track, labelPosition === "end" && labelNode] }), _jsx(FieldMessage, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
+});
+ToggleSwitch.displayName = "ToggleSwitch";
+export default ToggleSwitch;

package/dist/esm/Components/ToggleSwitch/ToggleSwitchProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/ToolTip/OverflowToolTip.js

@@ -1,20 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import ToolTip from "./ToolTip.js";
-/**
- * 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>`. */
 export default function OverflowToolTip(props) {
     return _jsx(ToolTip, { ...props, overflowOnly: true });
 }

package/dist/esm/Components/ToolTip/ToolTip.js

@@ -1,30 +1,109 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cloneElement, isValidElement } from "react";
-import { Tooltip as ChakraTooltip } from "@chakra-ui/react";
+import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { cloneElement, forwardRef, isValidElement, useCallback, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, } from "react";
+import { Tooltip as ChakraTooltip, chakra } from "@chakra-ui/react";
 import { useIsTruncated } from "../../Hooks/useIsTruncated.js";
 import { mergeRefs } from "../../Utils/mergeRefs.js";
-import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-export default 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, }) {
-    // 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 } = useIsTruncated(label, overflowOnly && 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.
-    const theme = useCustomTheme();
-    const surface = theme.colors.sidebar.background[500];
+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 } }];
+};
+// NOTE: Chakra clones this instead of the real trigger, so the trigger never remounts on arming.
+const TriggerBridge = forwardRef(function TriggerBridge({ target, onSync, ...handlers }, ref) {
+    useImperativeHandle(ref, () => target.current, [target]);
+    useLayoutEffect(() => onSync(handlers));
+    useLayoutEffect(() => () => onSync(null), [onSync]);
+    return null;
+});
+const getElementRef = (element) => element.ref;
+/** Renders a hover/focus-triggered Chakra Tooltip — not a substitute for Toaster's transient, unprompted notifications. */
+export default 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: truncationRef, isTruncated } = useIsTruncated(label, overflowOnly && isValidElement(children));
+    const safeModifiers = useMemo(() => withViewportPadding(modifiers), [modifiers]);
+    const [armed, setArmed] = useState(() => Boolean(isOpen || defaultIsOpen));
+    if (isOpen && !armed)
+        setArmed(true);
+    const triggerRef = useRef(null);
+    const bridge = useRef(null);
+    const pendingArm = useRef(null);
+    const [describedBy, setDescribedBy] = useState();
+    const syncBridge = useCallback((handlers) => {
+        var _a, _b;
+        bridge.current = handlers;
+        setDescribedBy(handlers === null || handlers === void 0 ? void 0 : handlers["aria-describedby"]);
+        const pending = pendingArm.current;
+        if (!handlers || !pending)
+            return;
+        pendingArm.current = null;
+        if (pending.kind === "pointer")
+            (_a = handlers.onPointerEnter) === null || _a === void 0 ? void 0 : _a.call(handlers, pending.event);
+        else
+            (_b = handlers.onFocus) === null || _b === void 0 ? void 0 : _b.call(handlers, pending.event);
+    }, []);
     let content = children;
-    let effectiveDisabled = isDisabled;
+    let effectiveDisabled = Boolean(isDisabled);
     if (overflowOnly && isValidElement(children)) {
-        const child = children;
-        const childRef = child.ref;
-        content = cloneElement(child, {
-            ref: mergeRefs(ref, childRef),
+        content = cloneElement(children, {
+            ref: mergeRefs(truncationRef, getElementRef(children)),
         });
-        effectiveDisabled = Boolean(isDisabled) || !isTruncated;
+        effectiveDisabled = effectiveDisabled || !isTruncated;
     }
-    return (_jsx(ChakraTooltip, { 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 }));
+    if (!label)
+        return _jsxs(_Fragment, { children: [content, null] });
+    const child = (isValidElement(content) ? (content) : (_jsx(chakra.span, { display: "inline-block", tabIndex: 0, children: content })));
+    const own = child.props;
+    const arm = (event) => {
+        if (effectiveDisabled)
+            return;
+        pendingArm.current = event;
+        setArmed(true);
+    };
+    const trigger = cloneElement(child, {
+        ref: mergeRefs(triggerRef, getElementRef(child)),
+        "aria-describedby": describedBy,
+        onPointerEnter: (e) => {
+            var _a, _b, _c;
+            (_a = own.onPointerEnter) === null || _a === void 0 ? void 0 : _a.call(own, e);
+            if (e.defaultPrevented)
+                return;
+            if (bridge.current)
+                (_c = (_b = bridge.current).onPointerEnter) === null || _c === void 0 ? void 0 : _c.call(_b, e);
+            else if (e.pointerType !== "touch")
+                arm({ kind: "pointer", event: e });
+        },
+        onFocus: (e) => {
+            var _a, _b, _c;
+            (_a = own.onFocus) === null || _a === void 0 ? void 0 : _a.call(own, e);
+            if (e.defaultPrevented)
+                return;
+            if (bridge.current)
+                (_c = (_b = bridge.current).onFocus) === null || _c === void 0 ? void 0 : _c.call(_b, e);
+            else
+                arm({ kind: "focus", event: e });
+        },
+        onBlur: (e) => {
+            var _a, _b, _c;
+            (_a = own.onBlur) === null || _a === void 0 ? void 0 : _a.call(own, e);
+            if (!e.defaultPrevented)
+                (_c = (_b = bridge.current) === null || _b === void 0 ? void 0 : _b.onBlur) === null || _c === void 0 ? void 0 : _c.call(_b, e);
+        },
+        onClick: (e) => {
+            var _a, _b, _c;
+            (_a = own.onClick) === null || _a === void 0 ? void 0 : _a.call(own, e);
+            if (!e.defaultPrevented)
+                (_c = (_b = bridge.current) === null || _b === void 0 ? void 0 : _b.onClick) === null || _c === void 0 ? void 0 : _c.call(_b, e);
+        },
+        onPointerDown: (e) => {
+            var _a, _b, _c;
+            (_a = own.onPointerDown) === null || _a === void 0 ? void 0 : _a.call(own, e);
+            if (!e.defaultPrevented)
+                (_c = (_b = bridge.current) === null || _b === void 0 ? void 0 : _b.onPointerDown) === null || _c === void 0 ? void 0 : _c.call(_b, e);
+        },
+    });
+    return (_jsxs(_Fragment, { children: [trigger, armed && (_jsx(ChakraTooltip, { 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: _jsx(TriggerBridge, { target: triggerRef, onSync: syncBridge }) }))] }));
 }

package/dist/esm/Components/TrustBadges/TrustBadges.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex, Text } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+const DEFAULT_LABEL = "Why shop with us";
+const LIST_STYLES = {
+    row: { display: "flex", flexWrap: "wrap" },
+    grid: { display: "grid", gridTemplateColumns: "repeat(2, minmax(0, 1fr))" },
+    stack: { display: "flex", flexDirection: "column" },
+};
+/** Reassurance items (returns, COD, authenticity, secure payments) on calm tonal tiles; the title always carries the meaning. */
+const TrustBadges = ({ items, layout = "row", "aria-label": ariaLabel = DEFAULT_LABEL, "data-testid": testId }) => {
+    const { colors } = useCustomTheme();
+    if (items.length === 0)
+        return null;
+    const stacked = layout === "stack";
+    const tile = (item) => {
+        var _a;
+        return (_jsxs(Flex, { as: "li", align: stacked ? "center" : "flex-start", gap: 3, p: 3, minH: "2.75rem", borderRadius: "xl", bg: colors.background[100], flex: layout === "row" ? "1 1 9.5rem" : undefined, minW: 0, children: [_jsx(Flex, { as: "span", "aria-hidden": true, flexShrink: 0, align: "center", justify: "center", boxSize: "2.25rem", borderRadius: "full", bg: colors.background[50], color: colors.accentText, sx: { "& svg": { width: "1.125rem", height: "1.125rem" } }, children: item.icon }), _jsxs(Box, { minW: 0, children: [_jsx(Text, { fontSize: "sm", fontWeight: 600, lineHeight: 1.35, color: colors.header[900], children: item.title }), item.detail ? (_jsx(Text, { mt: 0.5, fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, children: item.detail })) : null] })] }, (_a = item.id) !== null && _a !== void 0 ? _a : item.title));
+    };
+    return (_jsx(Box, { as: "ul", "aria-label": ariaLabel, "data-layout": layout, "data-testid": testId, listStyleType: "none", m: 0, p: 0, gap: 2, sx: LIST_STYLES[layout], children: items.map(tile) }));
+};
+export default TrustBadges;

package/dist/esm/Components/TrustBadges/TrustBadgesProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/UpgradeButton/UpgradeButton.js

@@ -2,11 +2,15 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Flex, Spinner, Text } from "@chakra-ui/react";
 import { Sparkles } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { DISABLED_OPACITY } from "../../Theme/tokens/primitives/states.js";
 import { resolveGradient } from "../../Theme/tokens/builders/gradientInk.js";
 import { contrastRatio } from "../../Theme/tokens/builders/color.js";
 import { AA_NON_TEXT } from "../../Theme/tokens/builders/outlineRung.js";
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { neutralTokens } from "../../Theme/tokens/brands/neutrals.js";
 /** 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 = 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.
@@ -14,16 +18,12 @@ const sizeMap = {
     md: { px: "20px", py: "5px", font: "14px", sub: "10px", icon: 13, radius: "full" },
     lg: { px: "26px", py: "8px", font: "16px", sub: "11px", icon: 16, radius: "full" },
 };
+/** Gradient CTA pill with optional shimmer, subtitle and loading state for upgrade prompts. */
 const UpgradeButton = ({ label, mobileLabel, subtitle, icon = Sparkles, iconColor, variant = "brand", gradient, size = "md", shimmer = true, isLoading = false, isDisabled = false, maxLabelWidth = "160px", ariaLabel, onClick, }) => {
     const theme = 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] },
@@ -33,13 +33,10 @@ const UpgradeButton = ({ label, mobileLabel, subtitle, icon = Sparkles, iconColo
         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 = 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 : (contrastRatio(ACCENT_GOLD, resolved.from) >= AA_NON_TEXT &&
         contrastRatio(ACCENT_GOLD, resolved.to) >= AA_NON_TEXT
         ? ACCENT_GOLD
@@ -50,7 +47,7 @@ const UpgradeButton = ({ label, mobileLabel, subtitle, icon = Sparkles, iconColo
     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 (_jsxs(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 (_jsxs(Box, { as: "button", type: "button", "aria-label": ariaLabel, onClick: blocked ? undefined : onClick, disabled: isDisabled, position: "relative", cursor: blocked ? "default" : "pointer", opacity: isDisabled ? DISABLED_OPACITY : 1, px: { base: s.px === "20px" ? "14px" : s.px, md: s.px }, py: s.py, bgImage: g, color: ink, borderRadius: s.radius, fontWeight: 700, 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)",
@@ -59,6 +56,7 @@ const UpgradeButton = ({ label, mobileLabel, subtitle, icon = Sparkles, iconColo
                 ...(shimmer ? { _before: { left: "130%" } } : {}),
             }, sx: shimmer
             ? {
+                ...focusVisibleStyles(c),
                 _before: {
                     content: '""',
                     position: "absolute",
@@ -71,7 +69,8 @@ const UpgradeButton = ({ label, mobileLabel, subtitle, icon = Sparkles, iconColo
                     transition: "left 0.7s ease",
                     pointerEvents: "none",
                 },
+                ...reducedMotionSx({ "&::before": { transition: "none" } }),
             }
-            : undefined, children: [_jsxs(Flex, { align: "center", gap: "6px", maxW: maxLabelWidth, overflow: "hidden", whiteSpace: "nowrap", zIndex: 1, children: [_jsx(Text, { as: "span", fontSize: s.font, overflow: "hidden", textOverflow: "ellipsis", display: hasMobile ? { base: "none", md: "block" } : "block", children: label }), hasMobile && (_jsx(Text, { as: "span", fontSize: s.font, overflow: "hidden", textOverflow: "ellipsis", display: { base: "block", md: "none" }, children: mobileLabel })), isLoading ? (_jsx(Spinner, { size: "xs", thickness: "1.5px", color: resolvedIconColor })) : (Icon && _jsx(Icon, { size: s.icon, color: resolvedIconColor, style: { flexShrink: 0 } }))] }), subtitle && (_jsx(Text, { as: "span", mt: "1px", fontSize: s.sub, fontWeight: "bold", color: ink, maxW: maxLabelWidth, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", zIndex: 1, children: subtitle }))] }));
+            : { ...focusVisibleStyles(c), ...reducedMotionSx() }, children: [_jsxs(Flex, { align: "center", gap: "6px", maxW: maxLabelWidth, overflow: "hidden", whiteSpace: "nowrap", zIndex: 1, children: [_jsx(Text, { as: "span", fontSize: s.font, overflow: "hidden", textOverflow: "ellipsis", display: hasMobile ? { base: "none", md: "block" } : "block", children: label }), hasMobile && (_jsx(Text, { as: "span", fontSize: s.font, overflow: "hidden", textOverflow: "ellipsis", display: { base: "block", md: "none" }, children: mobileLabel })), isLoading ? (_jsx(Spinner, { size: "xs", thickness: "1.5px", color: resolvedIconColor, label: "" })) : (Icon && _jsx(Icon, { size: s.icon, color: resolvedIconColor, style: { flexShrink: 0 } }))] }), subtitle && (_jsx(Text, { as: "span", mt: "1px", fontSize: s.sub, fontWeight: 700, color: ink, maxW: maxLabelWidth, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", zIndex: 1, children: subtitle }))] }));
 };
 export default UpgradeButton;

package/dist/esm/Components/UserDetails/AddUserModal.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, ModalFooter, FormControl, VStack, } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { raisedRule } from "../../Theme/tokens/builders/surfaceRaised.js";
 import Button from "../Button/Button.js";
 import TextInput from "../Input/TextInput.js";
 import SearchSelect from "../SearchSelect/SearchSelect.js";
@@ -75,7 +76,7 @@ const AddUserModal = ({ isOpen, onClose, roleOptions, isLoading, onSubmit, onAdd
             type: "email",
         },
     ];
-    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, trapFocus: false, isCentered: true, children: [_jsx(ModalOverlay, { backdropFilter: "blur(4px)" }), _jsxs(ModalContent, { bg: colors.background[50], borderRadius: "2xl", overflow: "hidden", children: [_jsxs(ModalHeader, { borderBottom: "1px solid", borderColor: colors.boxborder[200], children: [labels.addNewUser, upgradeNotice] }), _jsx(ModalCloseButton, {}), _jsx(ModalBody, { py: 5, children: _jsxs(VStack, { spacing: 4, align: "stretch", children: [textFields.map((field) => (_jsx(FormControl, { isInvalid: !!errors[field.id], children: _jsx(TextInput, { 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))), _jsx(FormControl, { isInvalid: !!errors.role, isRequired: true, children: _jsx(SearchSelect, { label: labels.role, options: roleOptions.map((item) => ({
+    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, trapFocus: false, isCentered: true, children: [_jsx(ModalOverlay, { backdropFilter: "blur(4px)" }), _jsxs(ModalContent, { bg: colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", children: [_jsxs(ModalHeader, { borderBottom: "1px solid", borderColor: raisedRule(colors), children: [labels.addNewUser, upgradeNotice] }), _jsx(ModalCloseButton, {}), _jsx(ModalBody, { py: 5, children: _jsxs(VStack, { spacing: 4, align: "stretch", children: [textFields.map((field) => (_jsx(FormControl, { isInvalid: !!errors[field.id], children: _jsx(TextInput, { 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))), _jsx(FormControl, { isInvalid: !!errors.role, isRequired: true, children: _jsx(SearchSelect, { 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/esm/Components/UserDetails/ChangeRoleModal.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, ModalFooter, FormControl, VStack, } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { raisedRule } from "../../Theme/tokens/builders/surfaceRaised.js";
 import Button from "../Button/Button.js";
 import TextInput from "../Input/TextInput.js";
 import SearchSelect from "../SearchSelect/SearchSelect.js";
@@ -31,7 +32,7 @@ const ChangeRoleModal = ({ isOpen, onClose, userId, email, currentRole, roleOpti
             return;
         await (onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit({ userId, roleId: selectedRole.id }));
     };
-    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, trapFocus: false, isCentered: true, children: [_jsx(ModalOverlay, { backdropFilter: "blur(4px)" }), _jsxs(ModalContent, { bg: colors.background[50], borderRadius: "2xl", overflow: "hidden", children: [_jsx(ModalHeader, { borderBottom: "1px solid", borderColor: colors.boxborder[200], children: labels.changeRoleTitle }), _jsx(ModalCloseButton, {}), _jsx(ModalBody, { py: 5, children: _jsxs(VStack, { spacing: 4, align: "stretch", children: [_jsx(TextInput, { label: labels.email, value: email !== null && email !== void 0 ? email : "", isDisabled: true, width: "100%" }), _jsx(FormControl, { isInvalid: !!error, isRequired: true, children: _jsx(SearchSelect, { label: labels.role, options: roleOptions.map((item) => ({
+    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, trapFocus: false, isCentered: true, children: [_jsx(ModalOverlay, { backdropFilter: "blur(4px)" }), _jsxs(ModalContent, { bg: colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", children: [_jsx(ModalHeader, { borderBottom: "1px solid", borderColor: raisedRule(colors), children: labels.changeRoleTitle }), _jsx(ModalCloseButton, {}), _jsx(ModalBody, { py: 5, children: _jsxs(VStack, { spacing: 4, align: "stretch", children: [_jsx(TextInput, { label: labels.email, value: email !== null && email !== void 0 ? email : "", isDisabled: true, width: "100%" }), _jsx(FormControl, { isInvalid: !!error, isRequired: true, children: _jsx(SearchSelect, { 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/esm/Components/UserDetails/DeactivateConfirmModal.js

@@ -1,14 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, HStack, VStack, Text, Flex, Box, } from "@chakra-ui/react";
-import { AlertTriangle, Trash2 } from "lucide-react";
+import { Text, Box } from "@chakra-ui/react";
+import { Trash2 } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-import { isDarkCanvas } from "../../Theme/tokens/builders/accentText.js";
-import { resolveStatusTone } from "../../Theme/tokens/builders/statusTone.js";
-import Button from "../Button/Button.js";
+import { resolveSoftTone } from "../../Theme/tokens/builders/tone.js";
+import ConfirmDialog from "../ConfirmDialog/ConfirmDialog.js";
 const DeactivateConfirmModal = ({ isOpen, onClose, userName, isLoading, onConfirm, labels, }) => {
     const { colors } = useCustomTheme();
-    const mode = isDarkCanvas(colors.backgroundColor.main) ? "dark" : "light";
-    const errorTone = resolveStatusTone(colors.semantic.error, mode);
-    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, children: [_jsx(ModalOverlay, { backdropFilter: "blur(4px)" }), _jsxs(ModalContent, { bg: colors.background[50], borderRadius: "2xl", overflow: "hidden", children: [_jsxs(ModalHeader, { borderBottom: "1px solid", borderColor: colors.boxborder[200], display: "flex", alignItems: "center", gap: 3, children: [_jsx(Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: errorTone.bg, color: errorTone.fg, children: _jsx(AlertTriangle, { size: 18 }) }), _jsx(Text, { fontSize: "1.05rem", fontWeight: 600, children: labels.confirmDeactivation })] }), _jsx(ModalCloseButton, {}), _jsx(ModalBody, { py: 6, children: _jsxs(VStack, { spacing: 4, align: "stretch", children: [_jsx(Text, { fontSize: "md", fontWeight: 500, color: colors.text[900], children: labels.deactivateConfirmQuestion }), _jsx(Box, { bg: colors.gray[50], borderRadius: "lg", p: 4, border: "1px solid", borderColor: colors.boxborder[200], children: _jsxs(Text, { color: colors.textMuted, fontSize: "sm", children: [userName ? `${userName} ` : "", labels.deactivateConfirmDescription] }) }), _jsxs(HStack, { justifyContent: "flex-end", spacing: 3, pt: 2, children: [_jsx(Button, { label: labels.cancel, onClick: onClose, variant: "outline", size: "sm", colorScheme: "gray" }), _jsx(Button, { label: labels.deactivateUser, onClick: onConfirm, colorScheme: "red", size: "sm", isLoading: isLoading, leftIcon: _jsx(Trash2, { size: 16 }) })] })] }) })] })] }));
+    const errorTone = resolveSoftTone(colors, colors.semantic.error);
+    return (_jsxs(ConfirmDialog, { isOpen: isOpen, onClose: onClose, onConfirm: onConfirm, title: labels.confirmDeactivation, iconBg: errorTone.bg, iconColor: errorTone.fg, cancelLabel: labels.cancel, confirmLabel: labels.deactivateUser, confirmIcon: _jsx(Trash2, { size: 16 }), isConfirmLoading: isLoading, disableCancelWhilePending: false, focusCancelOnOpen: false, bodyLayout: "stack", actionsPt: 2, children: [_jsx(Text, { fontSize: "md", fontWeight: 500, color: colors.text[900], children: labels.deactivateConfirmQuestion }), _jsx(Box, { bg: colors.background[50], borderRadius: "lg", p: 4, border: "1px solid", borderColor: colors.boxborder[200], children: _jsxs(Text, { color: colors.textMuted, fontSize: "sm", children: [userName ? `${userName} ` : "", labels.deactivateConfirmDescription] }) })] }));
 };
 export default DeactivateConfirmModal;