pixelize-design-library 3.0.1-beta.1 → 3.1.1

package/dist/Components/Avatar/Avatar.js

@@ -0,0 +1,26 @@
+"use strict";
+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 tone_1 = require("../../Theme/tokens/builders/tone");
+const avatarColorway_1 = require("./avatarColorway");
+const avatarSizing_1 = require("./avatarSizing");
+const STATUS_TONE = {
+    online: "success", away: "warning", busy: "error", offline: "neutral",
+};
+const STATUS_LABEL = {
+    online: "Online", away: "Away", busy: "Busy", offline: "Offline",
+};
+/** Initials or image avatar with an optional status dot; `ref` is the outer box. */
+const Avatar = (0, react_1.forwardRef)(function Avatar({ name, src, size = "md", status, ariaLabel, getInitials, "data-testid": testId }, ref) {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const [imageFailed, setImageFailed] = (0, react_1.useState)(false);
+    const px = avatarSizing_1.SIZE_PX[size];
+    const showImage = Boolean(src) && !imageFailed;
+    const { bg, color } = (0, avatarColorway_1.resolveAvatarColorway)(name, colors);
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: ref, position: "relative", boxSize: `${px}px`, flexShrink: 0, "data-testid": testId, children: [showImage ? ((0, jsx_runtime_1.jsx)(react_2.Image, { src: src, alt: name, boxSize: `${px}px`, borderRadius: "full", objectFit: "cover", onError: () => setImageFailed(true) })) : ((0, jsx_runtime_1.jsx)(react_2.Flex, { role: "img", "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : name, align: "center", justify: "center", boxSize: `${px}px`, borderRadius: "full", bg: bg, color: color, fontSize: avatarSizing_1.FONT_SIZE[size], fontWeight: 600, userSelect: "none", children: (getInitials !== null && getInitials !== void 0 ? getInitials : avatarColorway_1.initialsFor)(name) })), status ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", bottom: "0", right: "0", boxSize: avatarSizing_1.DOT_SIZE[size], borderRadius: "full", bg: (0, tone_1.toneInk)(colors, STATUS_TONE[status]), border: "2px solid", borderColor: colors.background[50] }), (0, jsx_runtime_1.jsx)(react_2.VisuallyHidden, { children: STATUS_LABEL[status] })] })) : null] }));
+});
+Avatar.displayName = "Avatar";
+exports.default = Avatar;

package/dist/Components/Avatar/AvatarGroup.d.ts

@@ -0,0 +1,4 @@
+import type { AvatarGroupProps } from "./AvatarGroupProps";
+/** Overlapping avatar stack; people past `max` collapse into a "+N" chip. */
+declare const AvatarGroup: ({ people, max, size, ariaLabel, "data-testid": testId }: AvatarGroupProps) => import("react/jsx-runtime").JSX.Element;
+export default AvatarGroup;

package/dist/Components/Avatar/AvatarGroup.js

@@ -0,0 +1,25 @@
+"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("@chakra-ui/react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const Avatar_1 = __importDefault(require("./Avatar"));
+const avatarSizing_1 = require("./avatarSizing");
+const summarize = (names, overflow) => {
+    if (overflow <= 0)
+        return names.join(", ");
+    return `${names.join(", ")} and ${overflow} more`;
+};
+/** Overlapping avatar stack; people past `max` collapse into a "+N" chip. */
+const AvatarGroup = ({ people, max = 4, size = "md", ariaLabel, "data-testid": testId }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const shown = people.slice(0, max);
+    const overflow = people.length - shown.length;
+    const px = avatarSizing_1.SIZE_PX[size];
+    const ring = { border: "2px solid", borderColor: colors.background[50] };
+    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { role: "group", "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : summarize(people.map((p) => p.name), overflow), "data-testid": testId, children: [shown.map((person, i) => ((0, jsx_runtime_1.jsx)(react_1.Box, { "aria-hidden": true, ml: i === 0 ? 0 : `-${avatarSizing_1.OVERLAP[size]}`, borderRadius: "full", ...ring, children: (0, jsx_runtime_1.jsx)(Avatar_1.default, { name: person.name, src: person.src, size: size }) }, `${person.name}-${i}`))), overflow > 0 ? ((0, jsx_runtime_1.jsxs)(react_1.Flex, { "aria-hidden": true, ml: `-${avatarSizing_1.OVERLAP[size]}`, align: "center", justify: "center", boxSize: `${px}px`, borderRadius: "full", bg: colors.backgroundColor.secondary, color: colors.text[700], fontSize: avatarSizing_1.FONT_SIZE[size], fontWeight: 600, ...ring, children: ["+", overflow] })) : null] }));
+};
+exports.default = AvatarGroup;

package/dist/Components/Avatar/AvatarGroupProps.d.ts

@@ -0,0 +1,21 @@
+import type { AvatarSize } from "./AvatarProps";
+/** One member of an AvatarGroup stack. */
+export type AvatarGroupMember = {
+    /** Drives the avatar's initials and fill colour, and appears in the group's default `aria-label`. */
+    name: string;
+    /** Image URL. Falls back to initials when missing or when the image fails to load. */
+    src?: string;
+};
+/** Overlapping stack of Avatars with a "+N" overflow chip past `max`. */
+export interface AvatarGroupProps {
+    /** Rendered left to right; only the first `max` show as avatars. */
+    people: AvatarGroupMember[];
+    /** Default 4. */
+    max?: number;
+    /** Applies to every avatar and the overflow chip. Default "md". */
+    size?: AvatarSize;
+    /** Overrides the auto-generated group `aria-label`. */
+    ariaLabel?: string;
+    /** Test hook on the root. */
+    "data-testid"?: string;
+}

package/dist/Components/Avatar/AvatarGroupProps.js

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

package/dist/Components/Avatar/AvatarProps.d.ts

@@ -0,0 +1,22 @@
+import type { ControlSize } from "../../Theme/tokens/primitives/controlSizes";
+/** ControlSize plus "2xs" for a badge-sized overlay and "xl" for a profile header. */
+export type AvatarSize = ControlSize | "2xs" | "xl";
+/** Presence indicator; the dot color and its accessible label both follow this. */
+export type AvatarStatus = "online" | "away" | "busy" | "offline";
+/** Image with graceful initials fallback, a deterministic per-name fill, and an optional presence dot. */
+export interface AvatarProps {
+    /** Used for initials, image alt text, the deterministic fill color, and the default `aria-label`. */
+    name: string;
+    /** Image URL. Falls back to initials on a missing src or a failed load. */
+    src?: string;
+    /** Default "md". */
+    size?: AvatarSize;
+    /** Presence dot in the bottom-right corner; omitted entirely when unset. */
+    status?: AvatarStatus;
+    /** Overrides the initials fallback's `aria-label` (defaults to `name`); no effect while the image shows, where `alt` is `name`. */
+    ariaLabel?: string;
+    /** Replaces the built-in two-letter initials derivation. */
+    getInitials?: (name: string) => string;
+    /** Test hook on the root. */
+    "data-testid"?: string;
+}

package/dist/Components/Avatar/AvatarProps.js

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

package/dist/Components/Avatar/avatarColorway.d.ts

@@ -0,0 +1,12 @@
+import type { PaletteProps } from "../../Theme/tokens/types";
+export declare const AVATAR_SCALE_KEYS: readonly ["red", "orange", "yellow", "green", "teal", "blue", "cyan", "purple", "pink"];
+export type AvatarScaleKey = (typeof AVATAR_SCALE_KEYS)[number];
+export declare const avatarScaleKeyFor: (seed: string) => AvatarScaleKey;
+/** Avatar fill and its contrast-resolved text colour (`bg` is the fill, `color` the ink on it). */
+export type AvatarColorway = {
+    bg: string;
+    color: string;
+};
+export declare const avatarColorwayFor: (key: AvatarScaleKey, colors: PaletteProps) => AvatarColorway;
+export declare const resolveAvatarColorway: (seed: string, colors: PaletteProps) => AvatarColorway;
+export declare const initialsFor: (name: string) => string;

package/dist/Components/Avatar/avatarColorway.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.initialsFor = exports.resolveAvatarColorway = exports.avatarColorwayFor = exports.avatarScaleKeyFor = exports.AVATAR_SCALE_KEYS = void 0;
+const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
+exports.AVATAR_SCALE_KEYS = [
+    "red", "orange", "yellow", "green", "teal", "blue", "cyan", "purple", "pink",
+];
+const hashSeed = (seed) => {
+    let hash = 0;
+    for (let i = 0; i < seed.length; i += 1)
+        hash = (hash * 31 + seed.charCodeAt(i)) >>> 0;
+    return hash;
+};
+const avatarScaleKeyFor = (seed) => exports.AVATAR_SCALE_KEYS[hashSeed(seed) % exports.AVATAR_SCALE_KEYS.length];
+exports.avatarScaleKeyFor = avatarScaleKeyFor;
+// Always via resolveFilledSurface, never scale[500] + a guessed ink.
+const avatarColorwayFor = (key, colors) => {
+    const { fill, color } = (0, filledSurface_1.resolveFilledSurface)(colors[key], colors);
+    return { bg: fill, color };
+};
+exports.avatarColorwayFor = avatarColorwayFor;
+const resolveAvatarColorway = (seed, colors) => (0, exports.avatarColorwayFor)((0, exports.avatarScaleKeyFor)(seed), colors);
+exports.resolveAvatarColorway = resolveAvatarColorway;
+const initialsFor = (name) => {
+    const words = name.trim().split(/\s+/).filter(Boolean);
+    if (words.length === 0)
+        return "";
+    if (words.length === 1)
+        return words[0].slice(0, 2).toUpperCase();
+    return (words[0][0] + words[1][0]).toUpperCase();
+};
+exports.initialsFor = initialsFor;

package/dist/Components/Avatar/avatarSizing.d.ts

@@ -0,0 +1,5 @@
+import type { AvatarSize } from "./AvatarProps";
+export declare const SIZE_PX: Record<AvatarSize, number>;
+export declare const FONT_SIZE: Record<AvatarSize, string>;
+export declare const DOT_SIZE: Record<AvatarSize, string>;
+export declare const OVERLAP: Record<AvatarSize, string>;

package/dist/Components/Avatar/avatarSizing.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OVERLAP = exports.DOT_SIZE = exports.FONT_SIZE = exports.SIZE_PX = void 0;
+exports.SIZE_PX = {
+    "2xs": 16, xs: 24, sm: 32, md: 40, lg: 48, xl: 64,
+};
+exports.FONT_SIZE = {
+    "2xs": "0.5rem", xs: "0.625rem", sm: "0.75rem", md: "0.875rem", lg: "1rem", xl: "1.25rem",
+};
+exports.DOT_SIZE = {
+    "2xs": "5px", xs: "6px", sm: "8px", md: "9px", lg: "10px", xl: "12px",
+};
+exports.OVERLAP = {
+    "2xs": "5px", xs: "8px", sm: "10px", md: "12px", lg: "14px", xl: "18px",
+};

package/dist/Components/Backdrop/Backdrop.d.ts

@@ -0,0 +1,3 @@
+import { BackdropProps } from "./BackdropProps";
+/** Fading scrim that blocks (or optionally lets through) the page behind; prefer it over a hand-rolled overlay. */
+export default function Backdrop({ open, variant, loader, text, invisible, allowBackgroundInteraction, onClick, transitionDuration, container, zIndex, children, ariaLabel, }: BackdropProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/Backdrop/Backdrop.js

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = Backdrop;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const Spinner_1 = __importDefault(require("../Spinner/Spinner"));
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const scrim_1 = require("../../Theme/tokens/builders/scrim");
+const overlay_styles_1 = require("../../Theme/chakra/overlay.styles");
+const motion_1 = require("../../Theme/chakra/motion");
+const ENTER_MS = 225;
+const EXIT_MS = 195;
+const SPINNER_BOX = "2.5rem";
+const SPINNER_THICKNESS = "0.225rem";
+/** Fading scrim that blocks (or optionally lets through) the page behind; prefer it over a hand-rolled overlay. */
+function Backdrop({ open, variant = "dim", loader = false, text, invisible = false, allowBackgroundInteraction = false, onClick, transitionDuration, container = false, zIndex, children, ariaLabel, }) {
+    var _a, _b;
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const durations = typeof transitionDuration === "number"
+        ? { enter: transitionDuration, exit: transitionDuration }
+        : { enter: (_a = transitionDuration === null || transitionDuration === void 0 ? void 0 : transitionDuration.enter) !== null && _a !== void 0 ? _a : ENTER_MS, exit: (_b = transitionDuration === null || transitionDuration === void 0 ? void 0 : transitionDuration.exit) !== null && _b !== void 0 ? _b : EXIT_MS };
+    const isDim = variant === "dim";
+    const scrim = invisible ? "transparent" : isDim ? (0, scrim_1.backdropScrim)(colors) : (0, scrim_1.overlayScrim)(colors);
+    const label = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : (loader ? "Loading" : undefined);
+    return ((0, jsx_runtime_1.jsx)(react_1.Fade, { in: open, unmountOnExit: true, transition: { enter: { duration: durations.enter / 1000 }, exit: { duration: durations.exit / 1000 } }, style: {
+            position: container ? "absolute" : "fixed",
+            inset: 0,
+            zIndex: Number(zIndex !== null && zIndex !== void 0 ? zIndex : (container ? 10 : 1300)),
+            pointerEvents: allowBackgroundInteraction ? "none" : "auto",
+        }, children: (0, jsx_runtime_1.jsx)(react_1.Box, { role: loader ? "status" : "presentation", "aria-live": loader ? "polite" : undefined, "aria-busy": loader || undefined, "aria-label": label, onClick: allowBackgroundInteraction ? undefined : onClick, position: "absolute", inset: "0", bg: scrim, backdropFilter: !isDim && !invisible ? overlay_styles_1.OVERLAY_BLUR : undefined, color: colors.white, display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column", gap: 3, pointerEvents: allowBackgroundInteraction ? "none" : "auto", cursor: onClick && !allowBackgroundInteraction ? "pointer" : undefined, sx: { WebkitTapHighlightColor: "transparent", ...(0, motion_1.reducedMotionSx)() }, children: children !== null && children !== void 0 ? children : (loader ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Spinner_1.default, { size: "lg", boxSize: SPINNER_BOX, thickness: SPINNER_THICKNESS, color: colors.white, label: text ? "" : "Loading" }), text && (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", children: text })] })) : null) }) }));
+}

package/dist/Components/Backdrop/BackdropProps.d.ts

@@ -0,0 +1,33 @@
+import type { ReactNode } from "react";
+/** Scrim treatment: `dim` darkens only (black 0.5, no blur); `frosted` is the heavier Modal/Drawer scrim (black 0.6 + 4px blur). */
+export type BackdropVariant = "dim" | "frosted";
+/** Props for Backdrop, a fading full-viewport (or container-scoped) scrim that optionally centres a loader. */
+export type BackdropProps = {
+    /** Mounts the scrim and fades it in; `false` fades out and unmounts. */
+    open: boolean;
+    /** Defaults to "dim". */
+    variant?: BackdropVariant;
+    /** Centres a 40px spinner in the library's `Spinner`, inheriting the scrim's foreground colour. */
+    loader?: boolean;
+    /** Caption under the loader; ignored unless `loader` is set. */
+    text?: string;
+    /** Keeps the scrim blocking every click while painting nothing. */
+    invisible?: boolean;
+    /** Lets clicks reach the page behind; `onClick` cannot fire while this is set. */
+    allowBackgroundInteraction?: boolean;
+    /** Fires on scrim clicks — the usual "click away to dismiss" hook. */
+    onClick?: () => void;
+    /** Fade length in ms, or separate enter/exit. Defaults to 225 in / 195 out. */
+    transitionDuration?: number | {
+        enter?: number;
+        exit?: number;
+    };
+    /** Scopes the scrim to the nearest positioned ancestor instead of the viewport. */
+    container?: boolean;
+    /** Defaults to the 1300 modal layer full-viewport, or 10 when `container`. */
+    zIndex?: number | string;
+    /** Rendered centred; replaces the built-in loader when both are given. */
+    children?: ReactNode;
+    /** Announced to screen readers while open; defaults to "Loading" when `loader` is set. */
+    ariaLabel?: string;
+};

package/dist/Components/Backdrop/BackdropProps.js

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

package/dist/Components/BagBar/BagBar.d.ts

@@ -0,0 +1,4 @@
+import type { BagBarProps } from "./BagBarProps";
+/** Glass bar for the bag and checkout: total and price-details link left, the single primary action right. */
+declare const BagBar: ({ total, note, onViewDetails, ctaLabel, onCta, ctaDisabled, ctaLoading, position, zIndex, currency, locale, labels, "data-testid": testId, }: BagBarProps) => import("react/jsx-runtime").JSX.Element;
+export default BagBar;

package/dist/Components/BagBar/BagBar.js

@@ -0,0 +1,33 @@
+"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("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const scrim_1 = require("../../Theme/tokens/builders/scrim");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const typography_1 = require("../../Theme/tokens/primitives/typography");
+const motion_2 = require("../../Theme/chakra/motion");
+const price_1 = require("../../Utils/price");
+const Button_1 = __importDefault(require("../Button/Button"));
+const DEFAULT_LABELS = { region: "Bag total", total: "Total", viewDetails: "View price details", cta: "Place order" };
+const GLASS_ALPHA = Math.round(0.86 * 255).toString(16);
+const BLUR = "blur(20px) saturate(180%)";
+const NO_BLUR_SUPPORT = "@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)))";
+const SAFE_BOTTOM = "calc(0.75rem + env(safe-area-inset-bottom, 0px))";
+/** Glass bar for the bag and checkout: total and price-details link left, the single primary action right. */
+const BagBar = ({ total, note, onViewDetails, ctaLabel, onCta, ctaDisabled = false, ctaLoading = false, position = "static", zIndex = 10, currency, locale, labels, "data-testid": testId, }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const copy = { ...DEFAULT_LABELS, ...labels };
+    const sticky = position === "bottom";
+    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "section", "aria-label": copy.region, align: "center", justify: "space-between", gap: 4, px: 4, pt: 3, pb: SAFE_BOTTOM, borderTopRadius: "3xl", bg: `${colors.surfaceRaised}${GLASS_ALPHA}`, backdropFilter: BLUR, position: sticky ? "sticky" : "static", bottom: sticky ? 0 : undefined, zIndex: sticky ? zIndex : undefined, boxShadow: sticky ? `0 -12px 32px -16px ${(0, scrim_1.overlayScrim)(colors)}` : "none", "data-testid": testId, sx: { WebkitBackdropFilter: BLUR, [NO_BLUR_SUPPORT]: { backgroundColor: colors.surfaceRaised } }, children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { minW: 0, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "baseline", gap: 2, wrap: "wrap", children: [(0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "xs", fontWeight: 600, color: colors.textMuted, children: copy.total }), (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "xl", fontWeight: 700, lineHeight: 1.2, letterSpacing: "-0.02em", color: colors.header[900], sx: typography_1.NUMERIC_TEXT, "data-testid": "bag-bar-total", children: (0, price_1.formatPrice)(total, { currency, locale }) })] }), note && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", display: "block", fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, children: note })), onViewDetails && ((0, jsx_runtime_1.jsxs)(react_1.Box, { as: "button", type: "button", onClick: onViewDetails, display: "inline-flex", alignItems: "center", gap: 1, position: "relative", fontSize: "xs", fontWeight: 600, color: colors.accentText, borderRadius: "sm", transition: (0, motion_1.transitionFor)(["opacity"]), _hover: { opacity: 0.8 }, sx: {
+                            ...(0, focusRing_styles_1.focusVisibleStyles)(colors),
+                            ...(0, motion_2.reducedMotionSx)(),
+                            "&::before": { content: '""', position: "absolute", inset: "-0.75rem -0.5rem" },
+                        }, children: [copy.viewDetails, (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { size: 14, "aria-hidden": true })] }))] }), (0, jsx_runtime_1.jsx)(Button_1.default, { size: "lg", onClick: onCta, isDisabled: ctaDisabled, isLoading: ctaLoading, flexShrink: 0, children: ctaLabel !== null && ctaLabel !== void 0 ? ctaLabel : copy.cta })] }));
+};
+exports.default = BagBar;

package/dist/Components/BagBar/BagBarProps.d.ts

@@ -0,0 +1,38 @@
+import type { PriceFormat } from "../Commerce/commerceTypes";
+/** "static" flows in the page; "bottom" sticks to the bottom edge of its scroll container (CSS sticky, never fixed). */
+export type BagBarPosition = "static" | "bottom";
+/** Visible copy; override every string for another language. */
+export interface BagBarLabels {
+    /** Accessible name of the bar landmark. */
+    region: string;
+    /** Label next to the amount; default "Total". */
+    total: string;
+    /** Text of the price-details link; default "View price details". */
+    viewDetails: string;
+    /** Primary action text used when `ctaLabel` is not set; default "Place order". */
+    cta: string;
+}
+/** Mobile bottom bar: the payable total with a price-details link on the left and the one primary action on the right. */
+export interface BagBarProps extends PriceFormat {
+    /** Payable amount in major currency units, formatted with `currency` and `locale`. */
+    total: number;
+    /** Muted line beside the total, e.g. "Inclusive of all taxes". */
+    note?: string;
+    /** Shows the "View price details" link; use it to scroll to or open the breakdown. */
+    onViewDetails?: () => void;
+    /** Primary action label, e.g. "Place order" or "Checkout". */
+    ctaLabel?: string;
+    /** Fires when the primary action is pressed. */
+    onCta?: () => void;
+    /** Disables the primary action; default false. */
+    ctaDisabled?: boolean;
+    /** Spinner on the primary action while the order is being placed. */
+    ctaLoading?: boolean;
+    /** "static" flows in the page, "bottom" sticks to the container's bottom edge; default "static". */
+    position?: BagBarPosition;
+    /** Stacking order when `position` is "bottom"; above page content, below dialogs by default. */
+    zIndex?: number;
+    /** Per-string copy overrides; unset keys keep the English defaults. */
+    labels?: Partial<BagBarLabels>;
+    "data-testid"?: string;
+}

package/dist/Components/BagBar/BagBarProps.js

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

package/dist/Components/Breadcrumbs/Breadcrumbs.d.ts

@@ -1,3 +1,2 @@
-import React from "react";
 import { BreadcrumbsProps } from "./BreadcrumbsProps";
-export default function Breadcrumbs({ spacing, separator, fontWeight, fontSize, isCurrentPage, handleClick, items, }: BreadcrumbsProps): React.JSX.Element;
+export default function Breadcrumbs({ spacing, separator, fontWeight, fontSize, isCurrentPage, handleClick, items, overflow, maxItems, labels, "data-testid": testId, }: BreadcrumbsProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/Breadcrumbs/Breadcrumbs.js

@@ -1,17 +1,45 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = Breadcrumbs;
-var react_1 = __importDefault(require("react"));
-var react_2 = require("@chakra-ui/react");
-function Breadcrumbs(_a) {
-    var spacing = _a.spacing, separator = _a.separator, fontWeight = _a.fontWeight, fontSize = _a.fontSize, isCurrentPage = _a.isCurrentPage, handleClick = _a.handleClick, items = _a.items;
-    var theme = (0, react_2.useTheme)();
-    return (react_1.default.createElement(react_2.Breadcrumb, { spacing: spacing, separator: separator, fontWeight: fontWeight, fontSize: fontSize, fontFamily: theme.fonts.body }, items.map(function (item, index) { return (react_1.default.createElement(react_2.BreadcrumbItem, { key: index, isCurrentPage: isCurrentPage && index === items.length - 1 },
-        react_1.default.createElement(react_2.BreadcrumbLink, { href: item.path, sx: { "&:hover, &:active": { textDecoration: "none" } }, onClick: function (event) {
-                event.preventDefault();
-                handleClick(item.path);
-            } }, item.label))); })));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const breadcrumbInk_1 = require("./breadcrumbInk");
+const DEFAULT_MAX_ITEMS = 3;
+const MIN_MAX_ITEMS = 2;
+const OVERFLOW_SX = {
+    nowrap: undefined,
+    wrap: { "& ol": { flexWrap: "wrap", rowGap: "4px" }, "& li": { maxWidth: "100%" } },
+    truncate: { "& ol": { flexWrap: "nowrap" }, "& li": { minWidth: 0 } },
+};
+const collapse = (entries, maxItems) => {
+    const keep = Math.max(MIN_MAX_ITEMS, Math.floor(maxItems));
+    if (entries.length <= keep)
+        return { head: entries, hidden: [], tail: [] };
+    return { head: entries.slice(0, 1), hidden: entries.slice(1, entries.length - (keep - 1)), tail: entries.slice(entries.length - (keep - 1)) };
+};
+function Breadcrumbs({ spacing, separator, fontWeight, fontSize, isCurrentPage, handleClick, items, overflow = "nowrap", maxItems = DEFAULT_MAX_ITEMS, labels, "data-testid": testId, }) {
+    const theme = (0, react_1.useTheme)();
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const ink = (0, breadcrumbInk_1.breadcrumbInk)(colors);
+    const effectiveSeparator = separator !== null && separator !== void 0 ? separator : ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", color: ink.separator, children: "/" }));
+    const clip = overflow !== "nowrap";
+    const clipProps = clip ? { noOfLines: 1 } : {};
+    const renderCrumb = ({ crumb, index }) => {
+        const isLast = Boolean(isCurrentPage) && index === items.length - 1;
+        const color = isLast ? ink.current : ink.link;
+        const common = { ...clipProps, title: clip ? crumb.label : undefined, color, fontWeight: isLast ? 600 : fontWeight };
+        return ((0, jsx_runtime_1.jsx)(react_1.BreadcrumbItem, { isCurrentPage: isLast, children: crumb.path === undefined ? ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", "aria-current": isLast ? "page" : undefined, ...common, children: crumb.label })) : ((0, jsx_runtime_1.jsx)(react_1.BreadcrumbLink, { href: crumb.path, ...common, sx: { "&:hover, &:active": { textDecoration: "none", color: isLast ? ink.current : ink.linkHover } }, onClick: (event) => {
+                    event.preventDefault();
+                    handleClick(crumb.path);
+                }, children: crumb.label })) }, index));
+    };
+    const renderMenu = (hidden) => {
+        var _a;
+        return ((0, jsx_runtime_1.jsx)(react_1.BreadcrumbItem, { sx: { flexShrink: 0 }, children: (0, jsx_runtime_1.jsxs)(react_1.Menu, { isLazy: true, placement: "bottom-start", children: [(0, jsx_runtime_1.jsx)(react_1.MenuButton, { type: "button", "aria-label": ((_a = labels === null || labels === void 0 ? void 0 : labels.showMore) !== null && _a !== void 0 ? _a : ((n) => `Show ${n} more`))(hidden.length), color: ink.link, borderRadius: "md", px: 1, _hover: { color: ink.linkHover }, sx: (0, focusRing_styles_1.focusVisibleStyles)(colors), children: "\u2026" }), (0, jsx_runtime_1.jsx)(react_1.MenuList, { children: hidden.map(({ crumb, index }) => ((0, jsx_runtime_1.jsx)(react_1.MenuItem, { isDisabled: crumb.path === undefined, onClick: () => crumb.path !== undefined && handleClick(crumb.path), children: crumb.label }, index))) })] }) }, "overflow"));
+    };
+    const entries = items.map((crumb, index) => ({ crumb, index }));
+    const { head, hidden, tail } = overflow === "truncate" ? collapse(entries, maxItems) : { head: entries, hidden: [], tail: [] };
+    return ((0, jsx_runtime_1.jsxs)(react_1.Breadcrumb, { spacing: spacing, separator: effectiveSeparator, fontWeight: fontWeight, fontSize: fontSize, fontFamily: theme.fonts.body, sx: OVERFLOW_SX[overflow], "data-testid": testId, children: [head.map(renderCrumb), hidden.length > 0 && renderMenu(hidden), tail.map(renderCrumb)] }));
 }

package/dist/Components/Breadcrumbs/BreadcrumbsProps.d.ts

@@ -1,11 +1,28 @@
 import { BreadcrumbProps } from "@chakra-ui/react";
+/** `isCurrentPage` marks only the last item in `items`; `handleClick` fully replaces the link's default navigation. */
 export type BreadcrumbsProps = Pick<BreadcrumbProps, "spacing" | "separator" | "fontWeight" | "fontSize"> & {
     isCurrentPage?: boolean;
+    /** @deprecated Never read by Breadcrumbs — has no effect at all. */
     isLastChild?: boolean;
+    /** Called with a crumb's path; never called for a label-only crumb (no `path`). */
     handleClick: (path: string) => void;
     items: BreadcrumbItem[];
+    /** "wrap" flows crumbs onto new lines; "truncate" keeps one line and folds middle crumbs into a "…" menu. Default "nowrap". */
+    overflow?: "nowrap" | "wrap" | "truncate";
+    /** With overflow "truncate": most crumbs shown (first plus the last `maxItems - 1`); the rest go in the menu. Default 3, minimum 2. */
+    maxItems?: number;
+    /** Visible-string overrides; `showMore` is the collapsed menu button's aria-label. */
+    labels?: BreadcrumbsLabels;
+    "data-testid"?: string;
 };
+/** Visible strings, each with an English default. */
+export type BreadcrumbsLabels = {
+    /** Default: `Show ${count} more`. */
+    showMore?: (count: number) => string;
+};
+/** One crumb: `label` is the visible text; `path` goes to the link's href and `handleClick`. */
 export type BreadcrumbItem = {
-    path: string;
+    /** Omit for a label-only crumb: rendered as text, not a link, never passed to `handleClick`. */
+    path?: string;
     label: string;
 };

package/dist/Components/Breadcrumbs/breadcrumbInk.d.ts

@@ -0,0 +1,9 @@
+import type { PaletteProps } from "../../Theme/tokens/types";
+export type BreadcrumbInk = {
+    link: string;
+    linkHover: string;
+    current: string;
+    separator: string;
+};
+/** Chakra ships no default Breadcrumb theme, so every ink here needs an explicit token. */
+export declare const breadcrumbInk: (colors: PaletteProps) => BreadcrumbInk;

package/dist/Components/Breadcrumbs/breadcrumbInk.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.breadcrumbInk = void 0;
+/** Chakra ships no default Breadcrumb theme, so every ink here needs an explicit token. */
+const breadcrumbInk = (colors) => ({
+    link: colors.textMuted,
+    linkHover: colors.accentText,
+    current: colors.text[900],
+    separator: colors.textMuted,
+});
+exports.breadcrumbInk = breadcrumbInk;

package/dist/Components/BulkSelectionBar/BulkSelectionBar.d.ts

@@ -0,0 +1,4 @@
+import type { BulkSelectionBarProps } from "./BulkSelectionBarProps";
+/** Action bar for table row selection: count, shared facts, bulk action buttons and a clear button; renders nothing at zero. */
+declare const BulkSelectionBar: ({ selectedCount, facts, actions, onClearSelection, clearLabel, countLabel, placement, "aria-label": ariaLabel, "data-testid": testId, }: BulkSelectionBarProps) => import("react/jsx-runtime").JSX.Element | null;
+export default BulkSelectionBar;

package/dist/Components/BulkSelectionBar/BulkSelectionBar.js

@@ -0,0 +1,44 @@
+"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 lucide_react_1 = require("lucide-react");
+const Button_1 = __importDefault(require("../Button/Button"));
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const FACT_SEPARATOR = " · ";
+const VARIANT_BY_TONE = {
+    default: "outline",
+    primary: "solid",
+    danger: "outline",
+};
+const SCHEME_BY_TONE = {
+    default: "gray",
+    primary: "primary",
+    danger: "red",
+};
+const TOUCH_SX = { "@media (pointer: coarse)": { minHeight: "44px", minWidth: "44px" } };
+/** Action bar for table row selection: count, shared facts, bulk action buttons and a clear button; renders nothing at zero. */
+const BulkSelectionBar = ({ selectedCount, facts, actions, onClearSelection, clearLabel = "Clear selection", countLabel, placement = "sticky", "aria-label": ariaLabel = "Selection actions", "data-testid": testId = "bulk-selection-bar", }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const isActive = selectedCount > 0;
+    const summary = countLabel !== null && countLabel !== void 0 ? countLabel : `${selectedCount} selected`;
+    const [announcement, setAnnouncement] = (0, react_1.useState)("");
+    (0, react_1.useEffect)(() => {
+        setAnnouncement(isActive ? summary : "");
+    }, [isActive, summary]);
+    if (!isActive)
+        return null;
+    const resolvedFacts = (facts !== null && facts !== void 0 ? facts : []).filter(Boolean);
+    const isSticky = placement === "sticky";
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { role: "region", "aria-label": ariaLabel, "data-testid": testId, align: "center", gap: 3, wrap: "wrap", px: 4, py: 2, w: "100%", borderRadius: "lg", borderWidth: "1px", borderColor: colors.boxborder[200], bg: colors.surfaceRaised, position: isSticky ? "sticky" : "relative", bottom: isSticky ? 0 : undefined, zIndex: isSticky ? 2 : undefined, children: [(0, jsx_runtime_1.jsx)(react_2.VisuallyHidden, { role: "status", "aria-live": "polite", "data-testid": "bulk-selection-announcement", children: announcement }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "baseline", gap: 1, flex: "1", minW: "180px", wrap: "wrap", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", fontWeight: 600, color: colors.text[800], "data-testid": "bulk-selection-count", children: summary }), resolvedFacts.length ? ((0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", color: colors.textMuted, "data-testid": "bulk-selection-facts", children: [FACT_SEPARATOR, resolvedFacts.join(FACT_SEPARATOR)] })) : null] }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, wrap: "wrap", children: [actions.map((action) => {
+                        var _a;
+                        const tone = (_a = action.tone) !== null && _a !== void 0 ? _a : "default";
+                        const Icon = action.icon;
+                        return ((0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: VARIANT_BY_TONE[tone], colorScheme: SCHEME_BY_TONE[tone], onClick: action.onClick, isDisabled: action.isDisabled, isLoading: action.isLoading, loadingText: action.label, leftIcon: Icon ? (0, jsx_runtime_1.jsx)(Icon, { size: 16, "aria-hidden": "true" }) : undefined, sx: TOUCH_SX, "data-testid": `bulk-action-${action.id}`, "data-tone": tone, children: action.label }, action.id));
+                    }), (0, jsx_runtime_1.jsx)(react_2.Box, { children: (0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: onClearSelection, leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 16, "aria-hidden": "true" }), sx: TOUCH_SX, "data-testid": "bulk-selection-clear", children: clearLabel }) })] })] }));
+};
+exports.default = BulkSelectionBar;

package/dist/Components/BulkSelectionBar/BulkSelectionBarProps.d.ts

@@ -0,0 +1,41 @@
+import type { ElementType } from "react";
+/** Emphasis of a bulk action: "primary" is the affirmative one, "danger" the destructive one, "default" the rest. */
+export type BulkActionTone = "default" | "primary" | "danger";
+/** One button in the bar; actions render in array order. */
+export interface BulkAction {
+    /** Stable key; also the suffix of the button's `data-testid` (`bulk-action-<id>`). */
+    id: string;
+    /** Button text; also the loading text while `isLoading`. */
+    label: string;
+    /** Called when the button is pressed. */
+    onClick: () => void;
+    /** Defaults to "default". */
+    tone?: BulkActionTone;
+    /** Icon component (e.g. a lucide icon); rendered at 16px, decorative. */
+    icon?: ElementType;
+    /** Disables the button. */
+    isDisabled?: boolean;
+    /** Spinner on this action; the label stays as the loading text. */
+    isLoading?: boolean;
+}
+/** Props for the selection bar shown while table rows are selected; it renders nothing at zero. */
+export interface BulkSelectionBarProps {
+    /** Rows selected; the bar renders nothing at 0 and announces each change politely. */
+    selectedCount: number;
+    /** Short claims true of the whole selection, e.g. ["all leave", "no clashes"]; joined after the count with " · ". */
+    facts?: string[];
+    /** Buttons shown after the count, in array order, before the clear button. */
+    actions: BulkAction[];
+    /** Called when the clear button is pressed. */
+    onClearSelection: () => void;
+    /** Clear button text; defaults to "Clear selection". */
+    clearLabel?: string;
+    /** Replaces the default "{n} selected" text, and what is announced. */
+    countLabel?: string;
+    /** "sticky" (default) pins to the bottom of the nearest scroll container; "inline" stays in flow. */
+    placement?: "inline" | "sticky";
+    /** Accessible name of the region; defaults to "Selection actions". */
+    "aria-label"?: string;
+    /** Test id on the bar; defaults to "bulk-selection-bar". */
+    "data-testid"?: string;
+}

package/dist/Components/BulkSelectionBar/BulkSelectionBarProps.js

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

package/dist/Components/BulkSelectionBar/index.d.ts

@@ -0,0 +1,2 @@
+export { default as BulkSelectionBar } from "./BulkSelectionBar";
+export type { BulkAction, BulkActionTone, BulkSelectionBarProps } from "./BulkSelectionBarProps";

package/dist/Components/BulkSelectionBar/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BulkSelectionBar = void 0;
+var BulkSelectionBar_1 = require("./BulkSelectionBar");
+Object.defineProperty(exports, "BulkSelectionBar", { enumerable: true, get: function () { return __importDefault(BulkSelectionBar_1).default; } });

package/dist/Components/Button/Button.d.ts

@@ -1,5 +1,4 @@
-import React from "react";
+import { type ComponentWithAs } from "@chakra-ui/react";
 import { ButtonProps } from "./ButtonProps";
-declare function Button({ label, children, onClick, opacity, variant, leftIcon, rightIcon, size, isDisabled, isLoading, loadingText, type, width, sx, colorScheme, ref, border, borderRadius, onMouseEnter, onMouseLeave, }: ButtonProps): React.JSX.Element;
-declare const _default: React.MemoExoticComponent<typeof Button>;
+declare const _default: ComponentWithAs<"button", ButtonProps>;
 export default _default;