pixelize-design-library 2.4.2 → 3.0.0

package/dist/Components/Toggle/TableToggle.js

@@ -7,38 +7,85 @@ 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 outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
+const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
 const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
-const TableToggle = ({ value, onChange }) => {
+const useSlidingPill_1 = require("../SegmentedControl/useSlidingPill");
+const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
+const borderWidths_1 = require("../../Theme/tokens/primitives/borderWidths");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const MODES = ["grid", "list"];
+const TRACK_HEIGHT = controlSizes_1.BUTTON_SIZES.sm.height;
+const SEGMENT_HEIGHT = `calc(${TRACK_HEIGHT} - 0.25rem)`;
+const INK_TRANSITION = (0, motion_1.transitionFor)(["color"], "base");
+const PILL_TRANSITION = (0, motion_1.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 = (0, useCustomTheme_1.useCustomTheme)();
+    const { colors } = theme;
+    const isBrandSlide = variant === "brandSlide";
+    const isUnderlineSlide = variant === "underlineSlide";
+    const hasIndicator = isBrandSlide || isUnderlineSlide;
+    const brandFill = (0, filledSurface_1.resolveFilledSurface)(colors.primary, colors);
+    const restInk = (0, outlineRung_1.liftToContrast)(colors.background[800], colors.background[600], outlineRung_1.AA_NON_TEXT);
+    const hoverInk = (0, outlineRung_1.liftToContrast)(colors.background[900], colors.background[400], outlineRung_1.AA_NON_TEXT);
+    const selectedIndex = MODES.indexOf(value);
+    const { trackRef, itemRefs: refs, pill } = (0, useSlidingPill_1.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 ? `${borderWidths_1.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 ((0, jsx_runtime_1.jsxs)(react_1.Box, { ...styles.container, children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Table View", placement: "top", fontSize: 12, hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": "Grid View", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Table2, { size: "1.25rem" }), variant: "ghost", onClick: () => onChange("grid"), ...styles.button("grid") }) }), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Kanban View", placement: "top", fontSize: 12, hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": "List View", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Columns3, { size: "1.25rem" }), variant: "ghost", onClick: () => onChange("list"), ...styles.button("list") }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_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: 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 && ((0, jsx_runtime_1.jsx)(react_1.Box, { "aria-hidden": "true", position: "absolute", bottom: `-${borderWidths_1.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 })), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Grid View", placement: "top", fontSize: "xs", hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_1.IconButton, { ref: (node) => {
+                        refs.current[0] = 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: "xs", hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_1.IconButton, { ref: (node) => {
+                        refs.current[1] = node;
+                    }, "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,5 +1,14 @@
+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; 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 = {
+    /** Controlled active view; marks that button `aria-pressed`. */
     value: ViewMode;
+    /** Fires with the clicked mode, including when it is already active. */
     onChange: (val: ViewMode) => void;
+    /** brandSlide = primary view switcher; underlineSlide = dense toolbars/headers. */
+    variant?: TableToggleVariant;
 };

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

@@ -0,0 +1,4 @@
+import { ToggleSwitchProps } from "./ToggleSwitchProps";
+/** On/off switch: a native checkbox with role="switch", label, helper and error row; `ref` is that `<input>`. */
+declare const ToggleSwitch: import("react").ForwardRefExoticComponent<ToggleSwitchProps & import("react").RefAttributes<HTMLInputElement>>;
+export default ToggleSwitch;

package/dist/Components/ToggleSwitch/ToggleSwitch.js

@@ -0,0 +1,54 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": 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 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();
+};
+/** On/off switch: a native checkbox with role="switch", label, helper and error row; `ref` is that `<input>`. */
+const ToggleSwitch = (0, react_1.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 } = (0, useCustomTheme_1.useCustomTheme)();
+    const dims = SIZES[size];
+    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, { 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" }), (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 })] }));
+});
+ToggleSwitch.displayName = "ToggleSwitch";
+exports.default = ToggleSwitch;

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

@@ -0,0 +1,70 @@
+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;
+    /** 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;
+    /** Shown in place of `helperText` while `error` is true. */
+    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;
+    /** Native name of the input, so the switch submits with a surrounding form. */
+    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/ToggleSwitch/ToggleSwitchProps.js

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

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

@@ -1,17 +1,3 @@
 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>
- */
+/** Tooltip that appears only when its child text is actually truncated; sugar over `<ToolTip overflowOnly>`. */
 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.d.ts

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

package/dist/Components/ToolTip/ToolTip.js

@@ -6,28 +6,107 @@ 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");
-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 } = (0, useIsTruncated_1.useIsTruncated)(label, overflowOnly && (0, react_1.isValidElement)(children));
-    // A tooltip is an INVERTED surface: near-black under a light canvas, carrying a white
-    // label. `sidebar.background` is the only ramp `buildDarkPalette` deliberately leaves
-    // un-inverted, so it stays near-black in dark mode and the white label stays legible —
-    // every other surface ramp flips light and would render the label invisible.
-    const theme = (0, useCustomTheme_1.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 = (0, react_1.forwardRef)(function TriggerBridge({ target, onSync, ...handlers }, ref) {
+    (0, react_1.useImperativeHandle)(ref, () => target.current, [target]);
+    (0, react_1.useLayoutEffect)(() => onSync(handlers));
+    (0, react_1.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. */
+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 } = (0, useIsTruncated_1.useIsTruncated)(label, overflowOnly && (0, react_1.isValidElement)(children));
+    const safeModifiers = (0, react_1.useMemo)(() => withViewportPadding(modifiers), [modifiers]);
+    const [armed, setArmed] = (0, react_1.useState)(() => Boolean(isOpen || defaultIsOpen));
+    if (isOpen && !armed)
+        setArmed(true);
+    const triggerRef = (0, react_1.useRef)(null);
+    const bridge = (0, react_1.useRef)(null);
+    const pendingArm = (0, react_1.useRef)(null);
+    const [describedBy, setDescribedBy] = (0, react_1.useState)();
+    const syncBridge = (0, react_1.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 && (0, react_1.isValidElement)(children)) {
-        const child = children;
-        const childRef = child.ref;
-        content = (0, react_1.cloneElement)(child, {
-            ref: (0, mergeRefs_1.mergeRefs)(ref, childRef),
+        content = (0, react_1.cloneElement)(children, {
+            ref: (0, mergeRefs_1.mergeRefs)(truncationRef, getElementRef(children)),
         });
-        effectiveDisabled = Boolean(isDisabled) || !isTruncated;
+        effectiveDisabled = effectiveDisabled || !isTruncated;
     }
-    return ((0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: label, placement: placement, hasArrow: hasArrow, fontSize: fontSize, bg: bg !== null && bg !== void 0 ? bg : surface, color: color, isDisabled: effectiveDisabled, isOpen: isOpen, defaultIsOpen: defaultIsOpen, openDelay: openDelay, closeDelay: closeDelay, arrowSize: arrowSize, closeOnClick: closeOnClick, size: size, width: width, height: height, arrowPadding: arrowPadding, arrowShadowColor: arrowShadowColor, direction: direction, gutter: gutter, onClose: onClose, modifiers: modifiers, closeOnPointerDown: closeOnPointerDown, style: styles, px: 3, py: 2, borderRadius: "lg", fontWeight: "400", lineHeight: "1.5", maxW: "300px", children: content }));
+    if (!label)
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [content, null] });
+    const child = ((0, react_1.isValidElement)(content) ? (content) : ((0, jsx_runtime_1.jsx)(react_2.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 = (0, react_1.cloneElement)(child, {
+        ref: (0, mergeRefs_1.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 ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [trigger, armed && ((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: (0, jsx_runtime_1.jsx)(TriggerBridge, { target: triggerRef, onSync: syncBridge }) }))] }));
 }

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

@@ -1,6 +1,13 @@
 import { TooltipProps as ChakraTooltip } from "@chakra-ui/react";
-export type ToolTipProps = Pick<ChakraTooltip, "placement" | "label" | "hasArrow" | "fontSize" | "bg" | "color" | "isDisabled" | "isOpen" | "defaultIsOpen" | "openDelay" | "closeDelay" | "arrowSize" | "closeOnClick" | "size" | "width" | "height" | "arrowPadding" | "arrowShadowColor" | "direction" | "gutter" | "onClose" | "modifiers" | "closeOnPointerDown"> & {
+/** Closed prop list, no ...rest; 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 tooltipSurface (dark in both modes) — override only if you own the contrast. */
+    bg?: string;
+    /** Label ink; defaults to the tooltipSurface text colour. */
+    color?: string;
+    /** The trigger element; a non-element such as text is wrapped in a focusable span. */
     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
@@ -11,5 +18,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/TrustBadges/TrustBadges.d.ts

@@ -0,0 +1,4 @@
+import type { TrustBadgesProps } from "./TrustBadgesProps";
+/** Reassurance items (returns, COD, authenticity, secure payments) on calm tonal tiles; the title always carries the meaning. */
+declare const TrustBadges: ({ items, layout, "aria-label": ariaLabel, "data-testid": testId }: TrustBadgesProps) => import("react/jsx-runtime").JSX.Element | null;
+export default TrustBadges;

package/dist/Components/TrustBadges/TrustBadges.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+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 } = (0, useCustomTheme_1.useCustomTheme)();
+    if (items.length === 0)
+        return null;
+    const stacked = layout === "stack";
+    const tile = (item) => {
+        var _a;
+        return ((0, jsx_runtime_1.jsxs)(react_1.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: [(0, jsx_runtime_1.jsx)(react_1.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 }), (0, jsx_runtime_1.jsxs)(react_1.Box, { minW: 0, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", fontWeight: 600, lineHeight: 1.35, color: colors.header[900], children: item.title }), item.detail ? ((0, jsx_runtime_1.jsx)(react_1.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 ((0, jsx_runtime_1.jsx)(react_1.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) }));
+};
+exports.default = TrustBadges;

package/dist/Components/TrustBadges/TrustBadgesProps.d.ts

@@ -0,0 +1,24 @@
+import type { ReactNode } from "react";
+/** One reassurance, e.g. "7-day easy returns". */
+export interface TrustItem {
+    /** Stable key; falls back to the title. */
+    id?: string;
+    /** A lucide icon element; decorative, so the title always carries the meaning. */
+    icon: ReactNode;
+    /** Bold headline of the tile; also the React key when `id` is missing. */
+    title: string;
+    /** Smaller muted line under the title. */
+    detail?: string;
+}
+/** `row` is a wrapping horizontal strip, `grid` an even two-column grid, `stack` a vertical list. */
+export type TrustBadgesLayout = "row" | "grid" | "stack";
+/** Reassurance items (returns, COD, authenticity, secure payments) on a tonal tile. */
+export interface TrustBadgesProps {
+    /** Tiles in display order; an empty array renders nothing. */
+    items: TrustItem[];
+    /** Defaults to "row". */
+    layout?: TrustBadgesLayout;
+    /** Accessible name of the list. */
+    "aria-label"?: string;
+    "data-testid"?: string;
+}

package/dist/Components/TrustBadges/TrustBadgesProps.js

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

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

@@ -1,4 +1,5 @@
 import React from "react";
 import { UpgradeButtonProps } from "./UpgradeButtonProps";
+/** Gradient CTA pill with optional shimmer, subtitle and loading state for upgrade prompts. */
 declare const UpgradeButton: React.FC<UpgradeButtonProps>;
 export default UpgradeButton;