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

package/dist/Components/StageProgress/StageProgressProps.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveStagePalette = void 0;
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
+/** Exhaustive by construction: a new scheme that maps nowhere is a compile error. */
+const scaleFor = (colors, scheme) => scheme === "primary" || scheme === "secondary" || scheme === "tertiary"
+    ? colors[scheme]
+    : colors.semantic[scheme];
+/** Resolve a chevron palette for a given color scheme from the theme. */
+const resolveStagePalette = (theme, colorScheme = "primary") => {
+    const { gray } = theme.colors;
+    const scale = scaleFor(theme.colors, colorScheme);
+    const solid = (0, filledSurface_1.resolveFilledSurface)(scale, theme.colors);
+    const strong = solid.fill;
+    const onStrong = solid.color;
+    const soft = scale[100];
+    // A fixed [700] fails AA against [100] for some hues (orange 3.30, borderline green 3.58) —
+    // walk the scale's own rungs against this specific tint instead.
+    const softText = (0, accentText_1.accentTextOnCanvas)(scale, soft);
+    const muted = gray[100];
+    // A fixed gray[500] clears AA against the canvas but not against `muted` itself (gray[100]) on
+    // several brands — walk gray's own rungs against the actual upcoming-state fill instead.
+    const mutedText = (0, accentText_1.accentTextOnCanvas)(gray, muted);
+    return {
+        soft,
+        softText,
+        strong,
+        onStrong,
+        hover: solid.hoverFill,
+        muted,
+        mutedText,
+    };
+};
+exports.resolveStagePalette = resolveStagePalette;

package/dist/Components/StageProgress/StepperStage.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { StepperStageProps } from "./StageProgressProps";
+/** Renders one numbered circle with connector lines and a wrapped label for variant="stepper". */
+declare const StepperStage: React.FC<StepperStageProps>;
+export default StepperStage;

package/dist/Components/StageProgress/StepperStage.js

@@ -0,0 +1,45 @@
+"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 lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const states_1 = require("../../Theme/tokens/primitives/states");
+const primitives_1 = require("../../Theme/tokens/primitives");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const StageProgressProps_1 = require("./StageProgressProps");
+const centerInStrip_1 = require("./centerInStrip");
+const sizeMap = {
+    sm: { circle: "24px", font: "0.7rem", label: "0.7rem", icon: 12, minW: "84px" },
+    md: { circle: "30px", font: "0.8rem", label: "0.8rem", icon: 14, minW: "104px" },
+    lg: { circle: "38px", font: "0.95rem", label: "0.9rem", icon: 16, minW: "124px" },
+};
+/** Renders one numbered circle with connector lines and a wrapped label for variant="stepper". */
+const StepperStage = ({ label, number, state, size = "md", colorScheme = "primary", onClick, isReadOnly = false, isDisabled, disabled: legacyDisabled = false, showCheck = true, isFirst, isLast, leftDone, rightDone, scrollIntoViewWhenActive = true, asListItem = false, }) => {
+    const disabled = isDisabled !== null && isDisabled !== void 0 ? isDisabled : legacyDisabled;
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const palette = (0, StageProgressProps_1.resolveStagePalette)(theme, colorScheme);
+    const ref = (0, react_1.useRef)(null);
+    const s = sizeMap[size];
+    const interactive = !isReadOnly && !disabled;
+    (0, react_1.useEffect)(() => {
+        if (state === "active" && scrollIntoViewWhenActive && ref.current) {
+            (0, centerInStrip_1.centerInStrip)(ref.current);
+        }
+    }, [state, scrollIntoViewWhenActive]);
+    const filled = state === "active" || state === "completed";
+    const circleBg = filled ? palette.strong : theme.colors.background[50];
+    const circleColor = filled ? palette.onStrong : palette.mutedText;
+    const circleBorder = filled ? palette.strong : palette.muted;
+    const line = (done, hidden) => ((0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", height: "2px", bg: done ? palette.strong : palette.muted, visibility: hidden ? "hidden" : "visible", transition: (0, primitives_1.transitionFor)(["background"], "base") }));
+    const node = ((0, jsx_runtime_1.jsxs)(react_2.Flex, { ref: ref, direction: "column", align: "center", flex: "1", minWidth: s.minW, flexShrink: 0, as: (interactive ? "button" : "div"), type: interactive ? "button" : undefined, "data-group": "", "aria-disabled": disabled ? true : undefined, border: "none", bg: "transparent", cursor: interactive ? "pointer" : "default", opacity: disabled ? states_1.DISABLED_OPACITY : 1, onClick: interactive ? onClick : undefined, borderRadius: "lg", sx: interactive ? (0, focusRing_styles_1.focusVisibleStyles)(theme.colors) : undefined, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", width: "100%", children: [line(leftDone, isFirst), (0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: s.circle, borderRadius: "full", flexShrink: 0, bg: circleBg, color: circleColor, border: "2px solid", borderColor: circleBorder, fontSize: s.font, fontWeight: 600, transition: (0, primitives_1.transitionFor)(["background-color", "border-color", "color", "box-shadow"]), "aria-current": state === "active" ? "step" : undefined, sx: state === "active"
+                            ? { boxShadow: `0 0 0 4px ${palette.soft}` }
+                            : undefined, _groupHover: interactive
+                            ? { borderColor: palette.strong, bg: palette.strong, color: palette.onStrong }
+                            : undefined, children: showCheck && state === "completed" ? (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: s.icon }) : number }), line(rightDone, isLast)] }), (0, jsx_runtime_1.jsx)(react_2.Text, { mt: 2, px: 1, borderRadius: "sm", fontSize: s.label, fontWeight: state === "active" ? 600 : 500, color: state === "upcoming" ? palette.mutedText : palette.softText, textAlign: "center", noOfLines: 2, transition: (0, primitives_1.transitionFor)(["background", "color"], "base"), _groupHover: interactive ? { bg: palette.strong, color: palette.onStrong } : undefined, children: label })] }));
+    if (!asListItem)
+        return node;
+    return ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "li", display: "flex", flex: "1", minWidth: s.minW, flexShrink: 0, listStyleType: "none", children: node }));
+};
+exports.default = StepperStage;

package/dist/Components/StageProgress/centerInStrip.d.ts

@@ -0,0 +1,2 @@
+export declare const STRIP_ATTRIBUTE = "data-stage-strip";
+export declare const centerInStrip: (stage: HTMLElement) => void;

package/dist/Components/StageProgress/centerInStrip.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.centerInStrip = exports.STRIP_ATTRIBUTE = void 0;
+exports.STRIP_ATTRIBUTE = "data-stage-strip";
+const centerInStrip = (stage) => {
+    var _a;
+    const strip = stage.closest(`[${exports.STRIP_ATTRIBUTE}]`);
+    if (!strip)
+        return;
+    const box = strip.getBoundingClientRect();
+    const rect = stage.getBoundingClientRect();
+    const left = strip.scrollLeft + rect.left + rect.width / 2 - (box.left + box.width / 2);
+    (_a = strip.scrollTo) === null || _a === void 0 ? void 0 : _a.call(strip, { left, behavior: "smooth" });
+};
+exports.centerInStrip = centerInStrip;

package/dist/Components/StatCard/StatCard.d.ts

@@ -0,0 +1,4 @@
+import type { StatCardProps } from "./StatCardProps";
+/** KPI tile: tinted icon chip, label, 2xl tabular value, delta coloured by whether the change is good. */
+declare const StatCard: ({ label, value, delta, trend, goodDirection, hint, sparkline, footer, icon: Icon, iconTone, isLoading, onClick, "aria-label": ariaLabel, "data-testid": testId, ...rest }: StatCardProps) => import("react/jsx-runtime").JSX.Element;
+export default StatCard;

package/dist/Components/StatCard/StatCard.js

@@ -0,0 +1,48 @@
+"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 tone_1 = require("../../Theme/tokens/builders/tone");
+const planeStep_1 = require("../../Theme/tokens/builders/planeStep");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const typography_1 = require("../../Theme/tokens/primitives/typography");
+const motion_2 = require("../../Theme/chakra/motion");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const Skeletons_1 = __importDefault(require("../Skeletons/Skeletons"));
+const StatCardSkeleton = ({ hasIcon }) => ((0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", gap: 3, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 2, children: [hasIcon && (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: 8, width: 8 }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: 3, width: "40%" })] }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: 7, width: "55%" }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: 3, width: "45%" })] }));
+/** KPI tile: tinted icon chip, label, 2xl tabular value, delta coloured by whether the change is good. */
+const StatCard = ({ label, value, delta, trend, goodDirection = "up", hint, sparkline, footer, icon: Icon, iconTone, isLoading = false, onClick, "aria-label": ariaLabel, "data-testid": testId, ...rest }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const isInteractive = !!onClick && !isLoading;
+    const deltaColor = trend
+        ? trend === goodDirection
+            ? colors.semanticText.success
+            : colors.semanticText.error
+        : colors.textMuted;
+    const DeltaIcon = trend === "down" ? lucide_react_1.ArrowDownRight : lucide_react_1.ArrowUpRight;
+    const chip = iconTone
+        ? (0, tone_1.resolveSoftTone)(colors, (0, tone_1.toneScale)(colors, iconTone), colors.background[50])
+        : { bg: colors.primary.opacity[8], fg: colors.accentText };
+    const surface = {
+        display: "block",
+        w: "100%",
+        textAlign: "left",
+        bg: colors.background[50],
+        borderWidth: "1px",
+        borderColor: colors.boxborder[200],
+        borderRadius: "xl",
+        px: 5,
+        py: 4,
+    };
+    const content = isLoading ? ((0, jsx_runtime_1.jsx)(StatCardSkeleton, { hasIcon: !!Icon })) : ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", direction: "column", gap: 3, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", align: "center", gap: 2, children: [Icon && ((0, jsx_runtime_1.jsx)(react_1.Flex, { as: "span", boxSize: 8, flexShrink: 0, align: "center", justify: "center", borderRadius: "lg", bg: chip.bg, color: chip.fg, "data-icon-tone": iconTone, children: (0, jsx_runtime_1.jsx)(Icon, { size: 16, "aria-hidden": true }) })), (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "xs", fontWeight: 500, color: colors.textMuted, children: label })] }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", align: "center", justify: "space-between", gap: 3, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", display: "block", fontSize: "2xl", fontWeight: 700, letterSpacing: "-0.02em", lineHeight: "short", color: colors.header[900], sx: typography_1.NUMERIC_TEXT, children: value }), sparkline && ((0, jsx_runtime_1.jsx)(react_1.Flex, { as: "span", align: "center", justify: "center", flexShrink: 0, h: 8, minW: 16, maxW: 24, overflow: "hidden", "data-testid": "stat-sparkline", children: sparkline }))] }), (delta !== undefined || hint) && ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", align: "center", gap: 1.5, wrap: "wrap", children: [delta !== undefined && ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", align: "center", gap: 0.5, color: deltaColor, "data-testid": "stat-delta", children: [trend && (0, jsx_runtime_1.jsx)(DeltaIcon, { size: 14, "aria-hidden": true }), trend && (0, jsx_runtime_1.jsx)(react_1.VisuallyHidden, { children: trend === "up" ? "Up" : "Down" }), (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "xs", fontWeight: 600, sx: typography_1.NUMERIC_TEXT, children: delta })] })), hint && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "xs", color: colors.textMuted, children: hint }))] })), footer && ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", pt: 3, borderTopWidth: "1px", borderColor: (0, planeStep_1.cardRule)(colors), "data-testid": "stat-footer", children: footer }))] }));
+    if (!isInteractive) {
+        return ((0, jsx_runtime_1.jsx)(react_1.Box, { ...rest, ...surface, "aria-busy": isLoading || undefined, "data-testid": testId, children: content }));
+    }
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { ...rest, as: "button", type: "button", onClick: onClick, "aria-label": ariaLabel, "data-testid": testId, ...surface, cursor: "pointer", transition: (0, motion_1.transitionFor)(["box-shadow", "border-color"]), _hover: { boxShadow: "sm", borderColor: colors.boxborder[300] }, sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors), ...(0, motion_2.reducedMotionSx)() }, children: content }));
+};
+exports.default = StatCard;

package/dist/Components/StatCard/StatCardProps.d.ts

@@ -0,0 +1,34 @@
+import type { ElementType, HTMLAttributes, MouseEventHandler, ReactNode } from "react";
+import type { Tone } from "../../Theme/tokens/builders/tone";
+type StatTrend = "up" | "down";
+/** KPI tile; delta is green when `trend` matches `goodDirection`; other HTML attributes land on the root. */
+export interface StatCardProps extends Omit<HTMLAttributes<HTMLElement>, "color" | "children" | "dangerouslySetInnerHTML" | "onClick" | "aria-label"> {
+    /** Metric name in the card header, beside the optional icon chip. */
+    label: ReactNode;
+    /** Large tabular-number figure; pre-format it (currency, units) yourself. */
+    value: ReactNode;
+    /** Change text, e.g. "+12%"; muted unless `trend` is set. */
+    delta?: ReactNode;
+    /** Adds an arrow and SR "Up"/"Down" to the delta; no effect without `delta`. */
+    trend?: StatTrend;
+    /** Which trend counts as good (green); defaults to "up" — use "down" for costs or churn. */
+    goodDirection?: StatTrend;
+    /** Muted text beside the delta, e.g. "vs last month". */
+    hint?: ReactNode;
+    /** Small inline trend chart rendered beside the value, e.g. a sparkline SVG; bring your own — this only sizes/positions the slot (max 96px wide, 32px tall). */
+    sparkline?: ReactNode;
+    /** Content pinned to the bottom of the card below a divider, e.g. a "View details" link. */
+    footer?: ReactNode;
+    /** Icon component (not an element) shown in a tinted chip before the label. */
+    icon?: ElementType;
+    /** Paints the icon chip with a soft status tone; unset keeps the brand-primary chip, "neutral" is grey. */
+    iconTone?: Tone;
+    /** Shows a skeleton and disables the click target. */
+    isLoading?: boolean;
+    /** Turns the tile into a full-size button with hover and focus styles. */
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    /** Applied only when `onClick` makes the tile a button. */
+    "aria-label"?: string;
+    "data-testid"?: string;
+}
+export {};

package/dist/Components/StatCard/StatCardProps.js

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

package/dist/Components/StatusTag/StatusTag.d.ts

@@ -0,0 +1,4 @@
+import type { StatusTagProps } from "./StatusTagProps";
+/** Typed status-to-Tag wrapper: map your vocabulary to tones once, render chips or dots everywhere. */
+declare function StatusTag<S extends string>({ status, label, map, display, size, "data-testid": testId, }: StatusTagProps<S>): import("react/jsx-runtime").JSX.Element;
+export default StatusTag;

package/dist/Components/StatusTag/StatusTag.js

@@ -0,0 +1,24 @@
+"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 Tag_1 = __importDefault(require("../Tag/Tag"));
+const NEUTRAL = { tone: "neutral" };
+const warned = new Set();
+const warnUnknown = (status) => {
+    if (process.env.NODE_ENV === "production" || warned.has(status))
+        return;
+    warned.add(status);
+    console.warn(`StatusTag: no appearance mapped for status "${status}"; rendering neutral.`);
+};
+/** Typed status-to-Tag wrapper: map your vocabulary to tones once, render chips or dots everywhere. */
+function StatusTag({ status, label, map, display = "chip", size = "sm", "data-testid": testId, }) {
+    const known = Object.prototype.hasOwnProperty.call(map, status);
+    if (!known)
+        warnUnknown(status);
+    const { tone, variant } = known ? map[status] : NEUTRAL;
+    return (0, jsx_runtime_1.jsx)(Tag_1.default, { label: label, tone: tone, variant: variant, display: display, size: size, "data-testid": testId });
+}
+exports.default = StatusTag;

package/dist/Components/StatusTag/StatusTagProps.d.ts

@@ -0,0 +1,24 @@
+import type { Tone } from "../../Theme/tokens/builders/tone";
+import type { TagDisplay, TagVariant } from "../Tag/TagProps";
+/** How one status looks: a tone, plus the chip variant (ignored in dot display). */
+export type StatusAppearance = {
+    /** Status tone of the tag, same tones as Tag. */
+    tone: Tone;
+    /** Chip variant; ignored in dot display. */
+    variant?: TagVariant;
+};
+/** Props for StatusTag; `S` is the app's status union so `map` must cover every status. */
+export interface StatusTagProps<S extends string = string> {
+    /** The raw status value; one missing from `map` renders neutral and warns once in development. */
+    status: S;
+    /** Visible text; the app owns translation, StatusTag never derives it from `status`. */
+    label: string;
+    /** Status vocabulary to appearance, declared once per app. */
+    map: Record<S, StatusAppearance>;
+    /** "dot" gives a quiet dot plus label; default "chip". */
+    display?: TagDisplay;
+    /** Tag size; defaults to "sm". */
+    size?: "sm" | "md";
+    /** Test id on the tag. */
+    "data-testid"?: string;
+}

package/dist/Components/StatusTag/StatusTagProps.js

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

package/dist/Components/StickyBuyBar/StickyBuyBar.d.ts

@@ -0,0 +1,4 @@
+import type { StickyBuyBarProps } from "./StickyBuyBarProps";
+/** Bottom bar with price and one primary action whose mode, slide-in visibility and quantity stepper are all controlled. */
+declare const StickyBuyBar: ({ price, mrp, mode, visible, position, isLoading, quantity, onQuantityChange, maxQuantity, onAddToBag, onSelectOption, onNotify, onGoToBag, onBuyNow, itemLabel, currency, locale, labels, "data-testid": testId, }: StickyBuyBarProps) => import("react/jsx-runtime").JSX.Element;
+export default StickyBuyBar;

package/dist/Components/StickyBuyBar/StickyBuyBar.js

@@ -0,0 +1,87 @@
+"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 react_2 = require("@emotion/react");
+const lucide_react_1 = require("lucide-react");
+const Button_1 = __importDefault(require("../Button/Button"));
+const PriceBlock_1 = __importDefault(require("../PriceBlock/PriceBlock"));
+const QuantityStepper_1 = __importDefault(require("../QuantityStepper/QuantityStepper"));
+const glass_1 = require("../MediaGallery/glass");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const zIndices_1 = __importDefault(require("../../Theme/tokens/primitives/zIndices"));
+const motion_2 = require("../../Theme/chakra/motion");
+const tonalHover_1 = require("../CheckoutKit/tonalHover");
+const DEFAULT_LABELS = {
+    region: "Buy",
+    add: "Add to bag",
+    selectOption: "Select an option",
+    notify: "Notify me",
+    added: "Added",
+    goToBag: "Go to bag",
+    buyNow: "Buy now",
+    adding: "Adding to bag",
+};
+const SLIDE_MS = 240;
+const BAR_HEIGHT = "3.25rem";
+const SLOT_MIN_WIDTH = "9.5rem";
+const RISE = "6px";
+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))";
+const pop = (0, react_2.keyframes) `0% { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(1); }`;
+const STACK_ORDER = ["add", "select-option", "notify", "added", "go-to-bag"];
+/** Bottom bar with price and one primary action whose mode, slide-in visibility and quantity stepper are all controlled. */
+const StickyBuyBar = ({ price, mrp, mode = "add", visible = true, position = "sticky", isLoading = false, quantity, onQuantityChange, maxQuantity, onAddToBag, onSelectOption, onNotify, onGoToBag, onBuyNow, itemLabel, currency, locale, labels, "data-testid": testId, }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const reduced = (0, motion_2.usePrefersReducedMotion)();
+    const copy = { ...DEFAULT_LABELS, ...labels };
+    const glass = (0, glass_1.glassStyles)(colors);
+    const stepping = mode === "stepper";
+    const active = stepping ? null : mode;
+    const text = {
+        add: copy.add,
+        "select-option": copy.selectOption,
+        notify: copy.notify,
+        added: copy.added,
+        "go-to-bag": copy.goToBag,
+    };
+    const handlers = {
+        add: onAddToBag,
+        "select-option": onSelectOption,
+        notify: onNotify,
+        added: undefined,
+        "go-to-bag": onGoToBag,
+    };
+    const tonal = mode === "notify";
+    const inert = mode === "added" || isLoading;
+    // NOTE: Button's prop type is a closed Pick, so aria-busy / aria-disabled ride in on a spread.
+    const aria = {
+        "aria-busy": isLoading ? "true" : undefined,
+        "aria-disabled": inert ? "true" : undefined,
+        "aria-label": isLoading ? copy.adding : undefined,
+    };
+    const layer = (on) => ({
+        gridArea: "1 / 1",
+        opacity: on ? 1 : 0,
+        visibility: on ? "visible" : "hidden",
+        transition: reduced ? "none" : `${(0, motion_1.transitionFor)(["opacity"])}, visibility 0s linear ${on ? 0 : motion_1.MOTION_MS.fast}ms`,
+    });
+    const label = (key) => {
+        const on = key === active;
+        return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", "aria-hidden": on ? undefined : true, gridArea: "1 / 1", align: "center", justify: "center", gap: 1.5, opacity: on ? 1 : 0, transform: on || reduced ? "none" : `translateY(${RISE})`, transition: (0, motion_1.transitionFor)(["opacity", "transform"]), sx: (0, motion_2.reducedMotionSx)(), children: [key === "added" && ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", display: "inline-flex", animation: on && !reduced ? `${pop} 280ms ${motion_1.MOTION_EASE} both` : undefined, sx: (0, motion_2.reducedMotionSx)(), children: (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 18, "aria-hidden": true }) })), text[key]] }, key));
+    };
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "section", role: "region", "aria-label": copy.region, "aria-hidden": visible ? undefined : true, position: position === "sticky" ? "sticky" : "relative", bottom: position === "sticky" ? 0 : undefined, zIndex: zIndices_1.default.sticky, px: 4, pt: 3, pb: SAFE_BOTTOM, transform: visible ? "translateY(0)" : "translateY(100%)", visibility: visible ? "visible" : "hidden", transition: reduced ? "none" : `transform ${SLIDE_MS}ms ${motion_1.MOTION_EASE}, visibility 0s linear ${visible ? 0 : SLIDE_MS}ms`, "data-testid": testId, ...glass, sx: { ...glass.sx, [NO_BLUR_SUPPORT]: { backgroundColor: colors.surfaceRaised }, ...(0, motion_2.reducedMotionSx)() }, children: (0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 3, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { flex: 1, minW: 0, children: (0, jsx_runtime_1.jsx)(PriceBlock_1.default, { size: "sm", price: price, mrp: mrp, currency: currency, locale: locale }) }), mode === "add" && onBuyNow && ((0, jsx_runtime_1.jsx)(Button_1.default, { variant: "outline", size: "lg", h: BAR_HEIGHT, onClick: onBuyNow, label: copy.buyNow })), (0, jsx_runtime_1.jsxs)(react_1.Grid, { minW: SLOT_MIN_WIDTH, justifyItems: "stretch", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { ...layer(!stepping), "aria-hidden": stepping ? true : undefined, children: (0, jsx_runtime_1.jsx)(Button_1.default, { ...aria, variant: tonal ? "ghost" : "solid", size: "lg", w: "100%", h: BAR_HEIGHT, onClick: () => {
+                                    var _a;
+                                    if (!inert)
+                                        (_a = handlers[mode]) === null || _a === void 0 ? void 0 : _a.call(handlers);
+                                }, sx: {
+                                    ...(tonal ? { bg: colors.background[100], color: colors.header[900], _hover: { bg: (0, tonalHover_1.tonalHover)(colors) } } : {}),
+                                    ...(inert ? { cursor: isLoading ? "progress" : "default", pointerEvents: isLoading ? "auto" : "none" } : {}),
+                                    display: "grid",
+                                }, children: STACK_ORDER.map(label) }) }), (0, jsx_runtime_1.jsx)(react_1.Flex, { ...layer(stepping), "aria-hidden": stepping ? undefined : true, justify: "center", align: "center", h: BAR_HEIGHT, children: (0, jsx_runtime_1.jsx)(QuantityStepper_1.default, { value: quantity, onValueChange: onQuantityChange, max: maxQuantity, itemLabel: itemLabel, size: "md" }) })] })] }) }));
+};
+exports.default = StickyBuyBar;

package/dist/Components/StickyBuyBar/StickyBuyBarProps.d.ts

@@ -0,0 +1,60 @@
+import type { PriceFormat } from "../Commerce/commerceTypes";
+/** What the primary slot does: add, prompt for an option, notify, confirm an add, go to the bag, or edit the quantity in place. */
+export type StickyBuyBarMode = "add" | "select-option" | "notify" | "added" | "go-to-bag" | "stepper";
+/** `sticky` pins to the viewport bottom inside its scroll parent; `static` flows with the page, e.g. inside a phone frame. */
+export type StickyBuyBarPosition = "sticky" | "static";
+/** Every string the bar renders; override all of them for another language. */
+export interface StickyBuyBarLabels {
+    /** Accessible name of the landmark region. */
+    region: string;
+    /** Primary button text in `add` mode; defaults to "Add to bag". */
+    add: string;
+    /** Prompt shown when an option is still unpicked, e.g. "Select a size". */
+    selectOption: string;
+    /** Primary button text in `notify` mode; defaults to "Notify me". */
+    notify: string;
+    /** Short confirmation in the button while mode is `added`. */
+    added: string;
+    /** Primary button text in `go-to-bag` mode; defaults to "Go to bag". */
+    goToBag: string;
+    /** Secondary button text shown beside the primary when `onBuyNow` is set; defaults to "Buy now". */
+    buyNow: string;
+    /** Screen-reader name of the busy button while `isLoading`. */
+    adding: string;
+}
+/** Mobile bottom bar: price on the left, one primary action on the right; the parent decides when it is `visible`. */
+export interface StickyBuyBarProps extends PriceFormat {
+    /** Selling price of the selected variant. */
+    price: number;
+    /** List price; the strike and discount only render when it is above `price`. */
+    mrp?: number;
+    /** State of the primary slot; the width never changes between states. */
+    mode?: StickyBuyBarMode;
+    /** Controlled: slides in when true and out when false, and is removed from the tab order while out. Typically driven by an IntersectionObserver on the inline CTA. */
+    visible?: boolean;
+    /** Defaults to "sticky". */
+    position?: StickyBuyBarPosition;
+    /** Marks the primary as busy (aria-busy) and ignores further taps. */
+    isLoading?: boolean;
+    /** `stepper` mode only: current quantity. */
+    quantity?: number;
+    /** `stepper` mode only: fires with the new quantity. */
+    onQuantityChange?: (quantity: number) => void;
+    /** `stepper` mode only: ceiling, e.g. the variant's remaining stock. */
+    maxQuantity?: number;
+    /** Fires on the primary in `add` mode. */
+    onAddToBag?: () => void;
+    /** Fires on the primary in `select-option` mode; the page should scroll the selector into view. */
+    onSelectOption?: () => void;
+    /** Fires on the primary in `notify` mode. */
+    onNotify?: () => void;
+    /** Fires on the primary in `go-to-bag` mode. */
+    onGoToBag?: () => void;
+    /** Adds a secondary "Buy now" beside the primary in `add` mode when provided. */
+    onBuyNow?: () => void;
+    /** Product name, so the stepper reads "Quantity of Slim-Fit Denim Jacket". */
+    itemLabel?: string;
+    /** Per-key overrides merged over the English defaults. */
+    labels?: Partial<StickyBuyBarLabels>;
+    "data-testid"?: string;
+}

package/dist/Components/StickyBuyBar/StickyBuyBarProps.js

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

package/dist/Components/StockStatus/StockStatus.d.ts

@@ -0,0 +1,4 @@
+import type { StockStatusProps } from "./StockStatusProps";
+/** Availability dot + label for a `StockState`; colour comes from `semanticText`, meaning from the words. */
+declare const StockStatus: ({ status, count, message, size, "data-testid": testId }: StockStatusProps) => import("react/jsx-runtime").JSX.Element;
+export default StockStatus;

package/dist/Components/StockStatus/StockStatus.js

@@ -0,0 +1,31 @@
+"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 TEXT_SIZE = { sm: "xs", md: "sm" };
+const DOT_PX = { sm: 6, md: 8 };
+const defaultMessage = (status, count) => {
+    switch (status) {
+        case "in-stock":
+            return "In stock";
+        case "low-stock":
+            return count !== undefined ? `Only ${count} left` : "Low stock";
+        case "out-of-stock":
+            return "Out of stock";
+        case "backorder":
+            return "Available on backorder";
+    }
+};
+/** Availability dot + label for a `StockState`; colour comes from `semanticText`, meaning from the words. */
+const StockStatus = ({ status, count, message, size = "md", "data-testid": testId }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const ink = {
+        "in-stock": colors.semanticText.success,
+        "low-stock": colors.semanticText.warning,
+        "out-of-stock": colors.textMuted,
+        backorder: colors.semanticText.info,
+    };
+    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", display: "inline-flex", align: "center", gap: 1.5, "data-status": status, "data-testid": testId, color: ink[status], children: [(0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", "aria-hidden": true, boxSize: `${DOT_PX[size]}px`, flexShrink: 0, borderRadius: "full", bg: "currentColor" }), (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: TEXT_SIZE[size], fontWeight: 600, lineHeight: 1.4, children: message !== null && message !== void 0 ? message : defaultMessage(status, count) })] }));
+};
+exports.default = StockStatus;

package/dist/Components/StockStatus/StockStatusProps.d.ts

@@ -0,0 +1,16 @@
+import type { StockState } from "../Commerce/commerceTypes";
+/** Text size; the dot scales with it. */
+export type StockStatusSize = "sm" | "md";
+/** Availability as a dot plus words, never colour alone. */
+export interface StockStatusProps {
+    /** Availability: in-stock and low-stock read as success and warning, backorder as info, out-of-stock as muted. */
+    status: StockState;
+    /** Units left; shown as "Only 3 left" for low-stock only, ignored for every other state. */
+    count?: number;
+    /** Replaces the default words, e.g. "In stock · ships within 24 hours". */
+    message?: string;
+    /** Text size; defaults to "md". */
+    size?: StockStatusSize;
+    /** Test id on the root element. */
+    "data-testid"?: string;
+}

package/dist/Components/StockStatus/StockStatusProps.js

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

package/dist/Components/Switch/Switch.d.ts

@@ -1,3 +1,3 @@
-import React from "react";
 import { SwitchProps } from "./SwitchProps";
-export default function Switch({ leftText, rightText, leftIcon, rightIcon, onSwitchToggle, switchActive, }: SwitchProps): React.JSX.Element;
+/** @deprecated Two labelled choices; for a single on/off field use `ToggleSwitch`. Renders `SegmentedControl` at 12.5rem when labelled. */
+export default function Switch({ leftText, rightText, leftIcon, rightIcon, onSwitchToggle, switchActive, size, surface, "aria-label": ariaLabel, }: SwitchProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/Switch/Switch.js

@@ -4,21 +4,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = Switch;
-var react_1 = __importDefault(require("react"));
-var react_2 = require("@chakra-ui/react");
-var useCustomTheme_1 = require("../../Theme/useCustomTheme");
-function Switch(_a) {
-    var leftText = _a.leftText, rightText = _a.rightText, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, onSwitchToggle = _a.onSwitchToggle, switchActive = _a.switchActive;
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var highlightBg = (0, react_2.useColorModeValue)(theme.colors.primary[50], theme.colors.primary[800]);
-    var borderColor = (0, react_2.useColorModeValue)(theme.colors.gray[100], theme.colors.gray[600]);
-    return (react_1.default.createElement(react_2.Box, { bg: "white", border: "0.063rem solid", borderColor: borderColor, borderRadius: "1.25rem", p: "0.063rem", w: "12.5rem", position: "relative" },
-        react_1.default.createElement(react_2.Box, { position: "absolute", top: 0, bottom: 0, w: "50%", bg: highlightBg, border: "0.063rem solid ".concat(theme.colors.primary[500]), borderRadius: "1rem", transition: "transform 0.3s ease", transform: switchActive === "left" ? "translateX(0%)" : "translateX(100%)" }),
-        react_1.default.createElement(react_2.Flex, { as: "ul", listStyleType: "none", m: 0, p: "0.063rem", zIndex: 1, position: "relative" },
-            react_1.default.createElement(react_2.Flex, { as: "li", w: "6.875rem", h: "100%", align: "center", justify: "center", cursor: "pointer", px: 2, fontSize: "0.875rem", fontWeight: switchActive === "left" ? 600 : 400, color: theme.colors.black, zIndex: 1, onClick: function () { return onSwitchToggle("left"); } },
-                leftIcon,
-                react_1.default.createElement(react_2.Text, { ml: leftIcon ? 1 : 0 }, leftText)),
-            react_1.default.createElement(react_2.Flex, { as: "li", w: "6.875rem", h: "100%", align: "center", justify: "center", cursor: "pointer", px: 2, fontSize: "0.875rem", fontWeight: switchActive === "right" ? 600 : 400, color: "black", zIndex: 1, onClick: function () { return onSwitchToggle("right"); } },
-                rightIcon,
-                react_1.default.createElement(react_2.Text, { ml: rightIcon ? 1 : 0 }, rightText)))));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const SegmentedControl_1 = __importDefault(require("../SegmentedControl/SegmentedControl"));
+/** @deprecated Two labelled choices; for a single on/off field use `ToggleSwitch`. Renders `SegmentedControl` at 12.5rem when labelled. */
+function Switch({ leftText, rightText, leftIcon, rightIcon, onSwitchToggle, switchActive, size = "sm", surface, "aria-label": ariaLabel, }) {
+    const options = [
+        { value: "left", label: leftText, icon: leftIcon },
+        { value: "right", label: rightText, icon: rightIcon },
+    ];
+    // Unlabelled segments have nothing to size to, so the 12.5rem floor only overflowed its cell.
+    const hasLabels = Boolean(leftText || rightText);
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { w: "fit-content", maxW: "100%", minW: hasLabels ? "12.5rem" : undefined, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.default, { options: options, value: switchActive, onChange: onSwitchToggle, size: size, variant: "brandSlide", surface: surface, isFullWidth: true, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : `${leftText} or ${rightText}` }) }));
 }

package/dist/Components/Switch/SwitchProps.d.ts

@@ -1,8 +1,22 @@
+import type { SegmentedControlSize } from "../SegmentedControl/SegmentedControlProps";
+/** @deprecated Use `SegmentedControl` — this two-option pill is kept only for existing call sites. */
 export type SwitchProps = {
+    /** Label of the left segment; when both labels are empty the control drops its 12.5rem minimum width. */
     leftText: string;
+    /** Label of the right segment. */
     rightText: string;
+    /** Rendered before the left label. */
     leftIcon?: JSX.Element;
+    /** Rendered before the right label. */
     rightIcon?: JSX.Element;
+    /** Fires on click and on arrow/Home/End keys with the newly selected side. */
     onSwitchToggle: (value: "left" | "right") => void;
+    /** Controlled selected side; the pill only moves when this changes. */
     switchActive: "left" | "right";
+    /** Whole-track height on the button control scale (sm 32 · md 40 · lg 48px, as Button); defaults to "sm". Pass "md" beside a "md" field. */
+    size?: SegmentedControlSize;
+    /** Background this sits on. Optional: the track is opaque on any backdrop; pass it only to aim the plate's hairline edge at the real backdrop. */
+    surface?: string;
+    /** Names the radiogroup; pass it, as there is no visible group label. */
+    "aria-label"?: string;
 };

package/dist/Components/Table/Table.d.ts

@@ -1,3 +1,3 @@
-import React from "react";
 import { TableProps } from "./TableProps";
-export default function Table({ data, columns, onSelection, isLoading, isCheckbox, headerBgColor, freezedBgColor, headerTextColor, freezedTextColor, tableBorderColor, noBorders, isPagination, onRowClick, selections, isActionFreeze, preferences, paginationMode, noOfRowsPerPage, totalRecords, onPagination, isTableSettings, headerActions, onGlobalSearch, onNoOfRowsPerPageChange, paginationSelectOptions, tableMaxHeight, minVisibleRows, maxVisibleRows, autoFitViewport, tableSettings, filterSidebar, loadingSkeletonRows, defaultVisibleColumns, }: TableProps): React.JSX.Element;
+/** Data table: virtualized-height rows, pagination, filters, selection, and an optional Monday-style grouped board. */
+export default function Table({ data, columns, onSelection, isLoading, isCheckbox, freezedBgColor, freezedTextColor, noBorders, isPagination, onRowClick, selections, isActionFreeze, preferences, paginationMode, infiniteScroll, hasMore, isLoadingMore, groupLoadMore, loadMoreText, loadMorePosition, loadMoreChunkSize, noOfRowsPerPage, totalRecords, onPagination, isTableSettings, headerActions, onGlobalSearch, onNoOfRowsPerPageChange, paginationSelectOptions, tableMaxHeight, minVisibleRows, maxVisibleRows, autoFitViewport, tableSettings, filterSidebar, loadingSkeletonRows, defaultVisibleColumns, density, variant, stripe, renderRowDetail, expandedRows, onExpandedRowsChange, groupColors, onAddItem, emptyState, onRefresh, isGlobalSearch, }: TableProps): import("react/jsx-runtime").JSX.Element;