pixelize-design-library 2.4.2-beta.9 → 3.0.0

package/dist/esm/Components/Toaster/Toaster.js

@@ -1,12 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext, useCallback, useContext, useMemo, useState, } from "react";
-import { Box, CloseButton, Flex, Spinner, Text, useToast, } from "@chakra-ui/react";
+import { createContext, useCallback, useContext, useMemo, useRef, useState, } from "react";
+import { Box, CloseButton, Flex, Text, VisuallyHidden, useToast, } from "@chakra-ui/react";
 import { keyframes } from "@emotion/react";
-import { motion } from "framer-motion";
+import { MotionConfig, motion } from "framer-motion";
 import { CheckCircle2, AlertTriangle, Info, XCircle, } from "lucide-react";
+import Spinner from "../Spinner/Spinner.js";
+import { toastDuration } from "./toastDuration.js";
+import { REDUCED_MOTION_QUERY, reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { motionTransition, transitionFor } from "../../Theme/tokens/primitives/motion.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-import { isDarkCanvas } from "../../Theme/tokens/builders/accentText.js";
-import { resolveStatusTone } from "../../Theme/tokens/builders/statusTone.js";
+import { resolveSoftTone } from "../../Theme/tokens/builders/tone.js";
+import { compositeOver } from "../../Theme/tokens/builders/color.js";
+import { BORDER_WIDTHS } from "../../Theme/tokens/primitives/borderWidths.js";
 const ToasterContext = createContext(undefined);
 const shrink = keyframes `
   from { transform: scaleX(1); }
@@ -14,100 +19,124 @@ const shrink = keyframes `
 `;
 // One-shot ring pulse on the status icon — a subtle "just happened" beat.
 const iconPulse = keyframes `
-  0%   { box-shadow: 0 0 0 0 var(--toast-pulse-color); }
-  70%  { box-shadow: 0 0 0 0.5rem transparent; }
-  100% { box-shadow: 0 0 0 0 transparent; }
+  0%   { transform: scale(1); opacity: 1; }
+  70%  { transform: scale(1.5); opacity: 0; }
+  100% { transform: scale(1.5); opacity: 0; }
 `;
 const MotionBox = motion(Box);
-/**
- * Presentational toast card. Owns hover state so the auto-dismiss countdown
- * pauses while the pointer is over the toast — the user can read and click an
- * action without the toast vanishing mid-reach.
- */
-function ToastCard({ onClose, title, description, actions, isClosable, duration, meta, colors: c, shadowLg, }) {
+const TOAST_ENTER = motionTransition("enter", "out");
+const TOAST_EXIT = motionTransition("exit", "in");
+// Presentational toast card — owns hover state so auto-dismiss pauses while the pointer is over it.
+function ToastCard({ onClose, title, description, actions, isClosable, duration, meta, colors: c, isUrgent, }) {
     const [paused, setPaused] = useState(false);
-    const mode = isDarkCanvas(c.backgroundColor.main) ? "dark" : "light";
-    const tone = resolveStatusTone(meta.scale, mode);
+    const tone = resolveSoftTone(c, meta.scale);
     const showProgress = typeof duration === "number" && duration > 0;
-    return (_jsxs(MotionBox
-    // Refined entrance — slides in from the right and settles, never a hard pop.
-    // framer owns ALL transform animation; the CSS transition below is limited to
-    // box-shadow so it never tweens the same `transform` framer is driving frame
-    // by frame (that double-drive is what caused the ~200ms entry flicker). A
-    // tween (not spring) lands on an exact end transform, so there's no residual
-    // sub-pixel settle to shimmer.
-    , { 
-        // Refined entrance — slides in from the right and settles, never a hard pop.
-        // framer owns ALL transform animation; the CSS transition below is limited to
-        // box-shadow so it never tweens the same `transform` framer is driving frame
-        // by frame (that double-drive is what caused the ~200ms entry flicker). A
-        // tween (not spring) lands on an exact end transform, so there's no residual
-        // sub-pixel settle to shimmer.
-        initial: { opacity: 0, x: 24 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: 24 }, transition: { duration: 0.24, ease: [0.22, 1, 0.36, 1] }, onHoverStart: () => setPaused(true), onHoverEnd: () => setPaused(false), position: "relative", 
-        // Surface token, not `colors.white`: `white` is a foreground token and stays
-        // white in dark mode. `background[50]` is #ffffff in light, near-black in dark.
-        bg: c.background[50], border: `0.063rem solid ${c.boxborder[200]}`, boxShadow: shadowLg !== null && shadowLg !== void 0 ? shadowLg : "lg", borderRadius: "2xl", overflow: "hidden", minW: "22.5rem", maxW: "26rem", willChange: "transform, opacity", sx: {
-            transition: "box-shadow 0.18s ease",
-            _hover: { boxShadow: "xl" },
-        }, children: [_jsxs(Flex, { p: 3.5, gap: 3, align: actions ? "flex-start" : "center", children: [_jsx(Flex, { align: "center", justify: "center", boxSize: "2rem", minW: "2rem", borderRadius: "full", bg: tone.bg, color: tone.fg, sx: {
-                            ["--toast-pulse-color"]: tone.border,
-                            animation: `${iconPulse} 900ms ease-out 1`,
-                        }, children: meta.icon }), _jsxs(Box, { flex: "1", minW: 0, children: [title && (_jsx(Text, { fontWeight: 600, fontSize: "0.875rem", lineHeight: "1.3", color: c.text[800], children: title })), description && (_jsx(Text, { fontSize: "0.8125rem", lineHeight: "1.45", color: c.textMuted, mt: title ? "0.125rem" : 0, children: description })), actions && (_jsx(Flex, { gap: 2, mt: 2.5, align: "center", wrap: "wrap", children: actions(onClose) }))] }), isClosable && (_jsx(CloseButton, { onClick: onClose, size: "sm", color: c.textMuted, borderRadius: "md", alignSelf: "flex-start", _hover: {
-                            bg: c.gray[100],
-                            color: c.text[700],
-                        } }))] }), showProgress && (_jsx(Box, { position: "absolute", bottom: 0, left: 0, right: 0, h: "0.1875rem", bg: meta.ink, opacity: 0.85, transformOrigin: "left", sx: {
-                    animation: `${shrink} ${duration}ms linear forwards`,
-                    animationPlayState: paused ? "paused" : "running",
-                } }))] }));
+    return (_jsx(MotionConfig, { reducedMotion: "user", children: _jsxs(MotionBox
+        // The single live-region root: an explicit aria-live here, on the card's own
+        // root, keeps errors from being announced a second time by a duplicate wrapper.
+        , { 
+            // The single live-region root: an explicit aria-live here, on the card's own
+            // root, keeps errors from being announced a second time by a duplicate wrapper.
+            role: isUrgent ? "alert" : undefined, "aria-live": isUrgent ? "assertive" : undefined, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0, transition: TOAST_EXIT }, transition: TOAST_ENTER, onHoverStart: () => setPaused(true), onHoverEnd: () => setPaused(false), position: "relative", bg: c.surfaceRaised, border: `${BORDER_WIDTHS.hairline} solid ${c.boxborder[200]}`, boxShadow: "md", borderRadius: "xl", overflow: "hidden", minW: "22.5rem", maxW: "26rem", sx: {
+                isolation: "isolate",
+                transition: transitionFor(["box-shadow"]),
+                _hover: { boxShadow: "lg" },
+                ...reducedMotionSx(),
+            }, children: [_jsxs(Flex, { p: 3.5, gap: 3, align: actions ? "flex-start" : "center", children: [_jsx(Flex, { align: "center", justify: "center", boxSize: "2rem", minW: "2rem", borderRadius: "full", position: "relative", bg: compositeOver(tone.bg, c.surfaceRaised), color: tone.fg, sx: {
+                                "&::after": {
+                                    content: '""',
+                                    position: "absolute",
+                                    inset: 0,
+                                    borderRadius: "full",
+                                    bg: tone.border,
+                                    zIndex: -1,
+                                    opacity: 0,
+                                    animation: `${iconPulse} 900ms ease-out 1`,
+                                    ...reducedMotionSx(),
+                                },
+                            }, children: meta.icon }), _jsxs(VisuallyHidden, { children: [meta.label, ":"] }), _jsxs(Box, { flex: "1", minW: 0, children: [title && (_jsx(Text, { fontWeight: 600, fontSize: "0.875rem", lineHeight: "1.3", color: c.text[800], children: title })), description && (_jsx(Text, { fontSize: "0.8125rem", lineHeight: "1.45", color: c.textMuted, mt: title ? "0.125rem" : 0, children: description })), actions && (_jsx(Flex, { gap: 2, mt: 2.5, align: "center", wrap: "wrap", children: actions(onClose) }))] }), isClosable && (_jsx(CloseButton, { onClick: onClose, size: "sm", color: c.textMuted, borderRadius: "md", alignSelf: "flex-start", _hover: {
+                                bg: c.gray[100],
+                                color: c.text[700],
+                            } }))] }), showProgress && (_jsx(Box, { position: "absolute", bottom: 0, left: 0, right: 0, h: "0.1875rem", bg: meta.ink, opacity: 0.85, transformOrigin: "left", sx: {
+                        animation: `${shrink} ${duration}ms linear forwards`,
+                        animationPlayState: paused ? "paused" : "running",
+                        [REDUCED_MOTION_QUERY]: { display: "none" },
+                    } }, duration))] }) }));
 }
+/** Provides useToaster().showToast() — a transient, self-dismissing notification, not hover-triggered info (ToolTip) or a blocking confirmation (AlertDialog). */
 export default function ToasterProvider({ children }) {
     const toast = useToast();
     const theme = useCustomTheme();
     const colors = theme.colors;
-    const shadowLg = theme.shadows.lg;
-    // Dark mode swaps the palette object, so this must re-derive per mode.
+    const live = useRef(new Map());
     const statusConfig = useMemo(() => ({
         success: {
             scale: colors.semantic.success,
             ink: colors.semanticText.success,
             icon: _jsx(CheckCircle2, { size: 18 }),
+            label: "Success",
         },
         error: {
             scale: colors.semantic.error,
             ink: colors.semanticText.error,
             icon: _jsx(XCircle, { size: 18 }),
+            label: "Error",
         },
         warning: {
             scale: colors.semantic.warning,
             ink: colors.semanticText.warning,
             icon: _jsx(AlertTriangle, { size: 18 }),
+            label: "Warning",
         },
         info: {
             scale: colors.semantic.info,
             ink: colors.semanticText.info,
             icon: _jsx(Info, { size: 18 }),
+            label: "Info",
         },
         loading: {
             scale: colors.primary,
             ink: colors.accentText,
-            icon: _jsx(Spinner, { size: "sm", thickness: "0.125rem", speed: "0.7s" }),
+            icon: _jsx(Spinner, { size: "xs", color: "currentColor" }),
+            label: "Loading",
         },
     }), [colors]);
-    const showToast = useCallback(({ title, description, status = "info", duration = 5000, isClosable = true, position = "top-right", onClose, actions, }) => {
-        var _a;
-        const meta = (_a = statusConfig[status]) !== null && _a !== void 0 ? _a : statusConfig.info;
-        toast({
+    const optionsFor = useCallback((props) => {
+        const { title, description, status = "info", isClosable = true, actions } = props;
+        const duration = toastDuration(props);
+        return {
             duration,
             isClosable,
-            position,
-            onCloseComplete: onClose,
-            render: ({ onClose }) => (_jsx(ToastCard, { onClose: onClose, title: title, description: description, actions: actions, isClosable: isClosable, duration: duration, meta: meta, colors: colors, shadowLg: shadowLg })),
+            render: ({ onClose }) => (_jsx(ToastCard, { onClose: onClose, title: title, description: description, actions: actions, isClosable: isClosable, duration: duration, meta: statusConfig[status], colors: colors, isUrgent: status === "error" })),
+        };
+    }, [statusConfig, colors]);
+    const showToast = useCallback((props) => {
+        var _a;
+        const id = toast({
+            ...optionsFor(props),
+            position: (_a = props.position) !== null && _a !== void 0 ? _a : "top-right",
+            onCloseComplete: () => {
+                var _a;
+                live.current.delete(id);
+                (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
+            },
         });
-    }, [toast, statusConfig, colors, shadowLg]);
-    // Memoized because this provider wraps the whole app: an unstable value re-renders every
-    // `useToaster()` consumer (92 files in crm-frontend) on each provider render, defeating the
-    // stable-children bail-out the consuming apps rely on.
-    const value = useMemo(() => ({ showToast }), [showToast]);
+        live.current.set(id, props);
+        return id;
+    }, [toast, optionsFor]);
+    const update = useCallback((id, patch) => {
+        const previous = live.current.get(id);
+        if (!previous)
+            return;
+        const next = { ...previous, ...patch };
+        if (patch.status !== undefined && !("duration" in patch))
+            delete next.duration;
+        live.current.set(id, next);
+        toast.update(id, optionsFor(next));
+    }, [toast, optionsFor]);
+    const close = useCallback((id) => toast.close(id), [toast]);
+    // NOTE: memoized — an unstable value re-renders every useToaster() consumer (92 files in crm-frontend) on each render.
+    const value = useMemo(() => ({ showToast, update, close }), [showToast, update, close]);
     return (_jsx(ToasterContext.Provider, { value: value, children: children }));
 }
 export const useToaster = () => {

package/dist/esm/Components/Toaster/toastDuration.js

@@ -0,0 +1,3 @@
+export const DEFAULT_TOAST_DURATION = 5000;
+/** An explicit duration wins; otherwise loading toasts stay up and the rest dismiss after 5s. */
+export const toastDuration = ({ duration, status }) => duration !== undefined ? duration : status === "loading" ? null : DEFAULT_TOAST_DURATION;

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 {};