pixelize-design-library 2.4.2-beta.56 → 2.4.2-beta.57

package/dist/esm/Components/OptionChip/OptionChip.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Box, Text } from "@chakra-ui/react";
+import { Check } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+import { optionInk } from "./optionInk.js";
+const CHIP_HEIGHT = { md: "2.75rem", lg: "3.25rem" };
+const PACK_HEIGHT = { md: "3.5rem", lg: "4rem" };
+const DOT = { md: "1.75rem", lg: "2rem" };
+const TILE = { md: { w: "4rem", h: "5rem" }, lg: { w: "4.5rem", h: "5.625rem" } };
+const DIM_OPACITY = 0.5;
+const band = (color, half) => `linear-gradient(to top right, transparent calc(50% - ${half}), ${color} calc(50% - ${half}), ${color} calc(50% + ${half}), transparent calc(50% + ${half}))`;
+const strikeImage = (ink, halo) => `${band(ink, "0.5px")}, ${band(halo, "1.5px")}`;
+const strikeLayer = (image) => ({
+    position: "absolute",
+    inset: 0,
+    borderRadius: "inherit",
+    pointerEvents: "none",
+    backgroundImage: image,
+});
+const CheckGrow = ({ selected }) => (_jsx(Box, { as: "span", "aria-hidden": true, display: "inline-flex", alignItems: "center", flexShrink: 0, overflow: "hidden", w: selected ? "1.125rem" : 0, opacity: selected ? 1 : 0, transition: transitionFor(["width", "opacity"], "base"), sx: reducedMotionSx(), children: _jsx(Check, { size: 14, strokeWidth: 2.5 }) }));
+const errorRing = (colors) => `inset 0 0 0 1px ${colors.semanticText.error}`;
+/** The one selectable option control: text chip, colour swatch, image tile or pack. Parent group supplies the radiogroup. */
+const OptionChip = forwardRef(function OptionChip({ label, selected = false, disabled = false, unavailable = false, invalid = false, variant = "chip", swatch, image, hint, showLabel = false, size = "md", fullWidth = false, onSelect, onFocus, tabIndex, "data-testid": testId, }, ref) {
+    const { colors } = useCustomTheme();
+    const { rest, selected: picked } = optionInk(colors);
+    const tone = selected ? picked : rest;
+    const dimmed = unavailable || disabled;
+    const accessibleName = [label, hint, unavailable ? "unavailable" : null].filter(Boolean).join(", ");
+    const strikeBackground = strikeImage(colors.text[800], colors.background[50]);
+    const base = {
+        ref,
+        as: "button",
+        type: "button",
+        role: "radio",
+        "aria-checked": selected,
+        "aria-disabled": unavailable || undefined,
+        "aria-label": accessibleName,
+        "data-testid": testId,
+        disabled,
+        tabIndex,
+        onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect(),
+        onFocus: () => onFocus === null || onFocus === void 0 ? void 0 : onFocus(),
+        position: "relative",
+        flexShrink: 0,
+        cursor: disabled ? "not-allowed" : "pointer",
+        opacity: dimmed ? DIM_OPACITY : 1,
+        w: fullWidth ? "100%" : undefined,
+        transition: transitionFor(["background-color", "color", "box-shadow", "border-color", "transform"]),
+        _active: dimmed ? undefined : { transform: "scale(0.97)" },
+    };
+    const motion = {
+        ...focusVisibleStyles(colors),
+        ...reducedMotionSx({ "&:active": { transform: "none" } }),
+    };
+    if (variant === "swatch") {
+        const dot = DOT[size];
+        return (_jsxs(Box, { ...base, display: "inline-flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: "0.25rem", minW: CHIP_HEIGHT[size], minH: CHIP_HEIGHT[size], borderRadius: "xl", bg: "transparent", color: colors.text[800], title: showLabel ? undefined : label, sx: {
+                ...motion,
+                "&:hover:not(:disabled) [data-ring]:not([data-selected])": { borderColor: colors.boxborder[500] },
+            }, children: [_jsx(Box, { as: "span", "data-ring": true, "data-selected": selected ? "" : undefined, display: "inline-flex", p: "0.125rem", borderWidth: "2px", borderStyle: "solid", borderRadius: "full", borderColor: selected ? colors.header[900] : invalid ? colors.semanticText.error : "transparent", transition: transitionFor(["border-color"]), sx: reducedMotionSx(), children: _jsx(Box, { as: "span", position: "relative", display: "block", boxSize: dot, borderRadius: "full", backgroundColor: swatch !== null && swatch !== void 0 ? swatch : colors.background[200], boxShadow: `inset 0 0 0 1px ${colors.boxborder[200]}`, sx: unavailable ? { "&::after": { content: '""', ...strikeLayer(strikeBackground) } } : undefined }) }), showLabel ? (_jsx(Text, { as: "span", fontSize: "xs", fontWeight: selected ? 600 : 500, color: selected ? colors.header[900] : rest.ink, lineHeight: "short", children: label })) : null] }));
+    }
+    if (variant === "image-tile") {
+        const tile = TILE[size];
+        return (_jsxs(Box, { ...base, display: "inline-flex", flexDirection: "column", alignItems: "center", gap: "0.375rem", bg: "transparent", color: rest.ink, w: fullWidth ? "100%" : undefined, maxW: `calc(${tile.w} + 0.5rem)`, sx: motion, children: [_jsx(Box, { as: "span", display: "block", p: "0.125rem", borderWidth: "2px", borderStyle: "solid", borderRadius: "calc(0.75rem + 4px)", borderColor: selected ? colors.header[900] : invalid ? colors.semanticText.error : "transparent", transition: transitionFor(["border-color"]), sx: reducedMotionSx(), children: _jsxs(Box, { as: "span", position: "relative", display: "block", w: tile.w, h: tile.h, borderRadius: "xl", overflow: "hidden", backgroundColor: swatch !== null && swatch !== void 0 ? swatch : colors.background[100], sx: unavailable ? { "&::after": { content: '""', ...strikeLayer(strikeBackground) } } : undefined, children: [image ? _jsx(Box, { as: "img", src: image, alt: "", loading: "lazy", w: "100%", h: "100%", objectFit: "cover", display: "block" }) : null, _jsx(Box, { as: "span", "aria-hidden": true, position: "absolute", top: "0.25rem", right: "0.25rem", display: "inline-flex", alignItems: "center", justifyContent: "center", boxSize: "1.125rem", borderRadius: "full", bg: picked.fill, color: picked.ink, opacity: selected ? 1 : 0, transform: selected ? "scale(1)" : "scale(0.6)", transition: transitionFor(["opacity", "transform"], "base"), sx: reducedMotionSx({ transform: "none" }), children: _jsx(Check, { size: 12, strokeWidth: 3 }) })] }) }), _jsx(Text, { as: "span", maxW: "100%", fontSize: "xs", fontWeight: selected ? 600 : 500, lineHeight: "short", textAlign: "center", noOfLines: 2, wordBreak: "break-word", children: label }), hint ? (_jsx(Text, { as: "span", fontSize: "xs", lineHeight: "short", color: rest.hint, noOfLines: 1, children: hint })) : null] }));
+    }
+    const isPack = variant === "pack";
+    const surface = {
+        display: "inline-flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        minW: isPack ? "5.75rem" : "3.5rem",
+        h: isPack ? PACK_HEIGHT[size] : CHIP_HEIGHT[size],
+        px: isPack ? 3 : 4,
+        borderRadius: "xl",
+        bg: tone.fill,
+        color: tone.ink,
+        fontSize: size === "lg" ? "md" : "sm",
+        fontWeight: 600,
+        lineHeight: "short",
+        whiteSpace: "nowrap",
+        boxShadow: invalid && !selected ? errorRing(colors) : "none",
+    };
+    const content = (_jsxs(Box, { as: "span", display: "inline-flex", alignItems: "center", children: [_jsx(CheckGrow, { selected: selected }), _jsx(Box, { as: "span", sx: { fontVariantNumeric: "tabular-nums" }, children: label })] }));
+    return (_jsxs(Box, { ...base, ...surface, sx: {
+            ...motion,
+            "&:hover:not(:disabled):not([aria-checked=true])": unavailable ? undefined : { backgroundColor: tone.hoverFill },
+            ...(unavailable ? { "&::after": { content: '""', ...strikeLayer(band("currentColor", "0.5px")) } } : {}),
+        }, children: [content, isPack && hint ? (_jsx(Text, { as: "span", mt: "0.125rem", fontSize: "0.6875rem", fontWeight: 500, color: tone.hint, sx: { fontVariantNumeric: "tabular-nums" }, children: hint })) : null, !isPack && hint ? (_jsx(Text, { as: "span", position: "absolute", top: "-0.375rem", right: "-0.25rem", px: "0.375rem", py: "0.0625rem", borderRadius: "full", bg: colors.surfaceRaised, color: colors.text[800], fontSize: "0.625rem", fontWeight: 600, lineHeight: "1rem", boxShadow: `0 0 0 1px ${colors.boxborder[200]}`, pointerEvents: "none", children: hint })) : null] }));
+});
+export default OptionChip;

package/dist/esm/Components/OptionChip/OptionChipProps.js

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

package/dist/esm/Components/OptionChip/optionInk.js

@@ -0,0 +1,21 @@
+import { mix } from "../../Theme/tokens/builders/color.js";
+import { AA_NORMAL_TEXT, onFilled } from "../../Theme/tokens/builders/accentText.js";
+import { liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
+/** Resting and selected fills for an option; selection is the neutral ink fill, never the brand. */
+export const optionInk = (colors) => {
+    const selectedFill = colors.header[900];
+    const selectedInk = onFilled(selectedFill, colors.white, colors.black);
+    const rest = {
+        fill: colors.background[300],
+        hoverFill: colors.background[400],
+        ink: colors.text[800],
+        hint: liftToContrast(colors.text[700], colors.background[400], AA_NORMAL_TEXT),
+    };
+    const selected = {
+        fill: selectedFill,
+        hoverFill: selectedFill,
+        ink: selectedInk,
+        hint: liftToContrast(mix(selectedInk, selectedFill, 0.2), selectedFill, AA_NORMAL_TEXT),
+    };
+    return { rest, selected };
+};

package/dist/esm/Components/OrderStatusTimeline/OrderStatusTimeline.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex, Text, VisuallyHidden } from "@chakra-ui/react";
+import { Check } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { onFilled } from "../../Theme/tokens/builders/accentText.js";
+const DEFAULT_LABELS = { done: "Completed", current: "In progress", upcoming: "Upcoming" };
+const MARKER = "1.5rem";
+const RULE = "2px";
+const Marker = ({ state, colors }) => {
+    const ink = colors.header[900];
+    const base = {
+        as: "span",
+        "aria-hidden": true,
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        boxSize: MARKER,
+        flexShrink: 0,
+        borderRadius: "full",
+        transition: transitionFor(["background-color", "box-shadow"]),
+        sx: reducedMotionSx(),
+    };
+    if (state === "done") {
+        return (_jsx(Box, { ...base, bg: ink, color: onFilled(ink, colors.white, colors.black), children: _jsx(Check, { size: 14, strokeWidth: 3 }) }));
+    }
+    if (state === "current") {
+        return (_jsx(Box, { ...base, bg: "transparent", boxShadow: `inset 0 0 0 2px ${ink}`, children: _jsx(Box, { as: "span", boxSize: "0.5rem", borderRadius: "full", bg: ink }) }));
+    }
+    return _jsx(Box, { ...base, bg: "transparent", boxShadow: `inset 0 0 0 1.5px ${colors.textMuted}` });
+};
+const StepText = ({ step, copy, align, colors, }) => {
+    const active = step.state !== "upcoming";
+    return (_jsxs(Box, { textAlign: align, minW: 0, children: [_jsxs(Text, { as: "span", display: "block", fontSize: "sm", fontWeight: active ? 700 : 500, lineHeight: 1.4, color: active ? colors.header[900] : colors.textMuted, children: [_jsxs(VisuallyHidden, { children: [copy[step.state], ": "] }), step.label] }), step.date && (_jsx(Text, { as: "span", display: "block", fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, sx: { fontVariantNumeric: "tabular-nums" }, children: step.date })), step.detail && (_jsx(Text, { as: "span", display: "block", fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, children: step.detail }))] }));
+};
+/** Order tracking steps: filled check, ringed dot and hollow ring markers, each backed by spoken state text. */
+const OrderStatusTimeline = ({ steps, orientation = "vertical", labels, "aria-label": ariaLabel = "Order status", "data-testid": testId, }) => {
+    const { colors } = useCustomTheme();
+    const copy = { ...DEFAULT_LABELS, ...labels };
+    const filledRule = colors.header[900];
+    const idleRule = colors.boxborder[300];
+    if (orientation === "horizontal") {
+        return (_jsx(Box, { as: "ol", "aria-label": ariaLabel, display: "grid", gridTemplateColumns: `repeat(${steps.length}, minmax(0, 1fr))`, m: 0, p: 0, listStyleType: "none", "data-testid": testId, children: steps.map((step, i) => {
+                const before = i > 0 && steps[i - 1].state === "done";
+                const after = step.state === "done";
+                return (_jsxs(Flex, { as: "li", direction: "column", align: "center", gap: 2, px: 1, "aria-current": step.state === "current" ? "step" : undefined, "data-state": step.state, children: [_jsxs(Flex, { align: "center", w: "100%", children: [_jsx(Box, { flex: 1, h: RULE, bg: i === 0 ? "transparent" : before ? filledRule : idleRule }), _jsx(Marker, { state: step.state, colors: colors }), _jsx(Box, { flex: 1, h: RULE, bg: i === steps.length - 1 ? "transparent" : after ? filledRule : idleRule })] }), _jsx(StepText, { step: step, copy: copy, align: "center", colors: colors })] }, step.id));
+            }) }));
+    }
+    return (_jsx(Box, { as: "ol", "aria-label": ariaLabel, m: 0, p: 0, listStyleType: "none", "data-testid": testId, children: steps.map((step, i) => {
+            const last = i === steps.length - 1;
+            return (_jsxs(Flex, { as: "li", gap: 3, "aria-current": step.state === "current" ? "step" : undefined, "data-state": step.state, children: [_jsxs(Flex, { direction: "column", align: "center", flexShrink: 0, children: [_jsx(Marker, { state: step.state, colors: colors }), !last && _jsx(Box, { flex: 1, w: RULE, minH: "1.5rem", my: 1, bg: step.state === "done" ? filledRule : idleRule })] }), _jsx(Box, { pb: last ? 0 : 4, pt: "0.125rem", flex: 1, minW: 0, children: _jsx(StepText, { step: step, copy: copy, align: "left", colors: colors }) })] }, step.id));
+        }) }));
+};
+export default OrderStatusTimeline;

package/dist/esm/Components/OrderStatusTimeline/OrderStatusTimelineProps.js

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

package/dist/esm/Components/OrderSummary/OrderSummary.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { Box, Flex, Text } from "@chakra-ui/react";
+import { PartyPopper } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { resolveSoftTone, toneScale } from "../../Theme/tokens/builders/tone.js";
+import { formatPrice } from "../../Utils/price.js";
+import ProgressBar from "../ProgressBar/ProgressBar.js";
+import Skeletons from "../Skeletons/Skeletons.js";
+const DEFAULT_LABELS = {
+    title: "Price details",
+    total: "Total",
+    free: "FREE",
+    savings: (amount) => `You save ${amount} on this order`,
+    addMore: (amount) => `Add ${amount} more for free delivery`,
+    unlocked: "You've unlocked free delivery",
+    progressLabel: "Progress to free delivery",
+};
+const MINUS = "−";
+const tabular = { fontVariantNumeric: "tabular-nums" };
+const SummarySkeleton = () => (_jsxs(Flex, { direction: "column", gap: 4, p: 5, borderRadius: "1.5rem", "aria-busy": "true", "data-testid": "order-summary-skeleton", children: [_jsx(Skeletons, { type: "skeleton", height: 4, width: "40%" }), [0, 1, 2].map((row) => (_jsxs(Flex, { justify: "space-between", children: [_jsx(Skeletons, { type: "skeleton", height: 3, width: "30%" }), _jsx(Skeletons, { type: "skeleton", height: 3, width: "20%" })] }, row))), _jsxs(Flex, { justify: "space-between", pt: 2, children: [_jsx(Skeletons, { type: "skeleton", height: 5, width: "25%" }), _jsx(Skeletons, { type: "skeleton", height: 5, width: "30%" })] })] }));
+/** Tonal price panel: label/amount rows, a large tabular total, a calm savings banner and free-delivery progress. */
+const OrderSummary = ({ lines, total, savings, taxNote, freeShippingProgress, hideTitle = false, isLoading = false, currency, locale, labels, "data-testid": testId, }) => {
+    const { colors } = useCustomTheme();
+    const headingId = useId();
+    const copy = { ...DEFAULT_LABELS, ...labels };
+    const fmt = { currency, locale };
+    const panel = colors.background[100];
+    if (isLoading)
+        return _jsx(SummarySkeleton, {});
+    const inkFor = (line, isFree, isDeduction) => {
+        if (isFree || isDeduction || line.tone === "success")
+            return colors.semanticText.success;
+        return line.tone === "muted" ? colors.textMuted : colors.header[900];
+    };
+    const amountText = (line) => {
+        if (typeof line.amount === "string")
+            return { text: line.amount, isFree: false, isDeduction: false };
+        if (line.amount === 0 && line.freeWhenZero)
+            return { text: copy.free, isFree: true, isDeduction: false };
+        if (line.amount < 0)
+            return { text: `${MINUS}${formatPrice(Math.abs(line.amount), fmt)}`, isFree: false, isDeduction: true };
+        return { text: formatPrice(line.amount, fmt), isFree: false, isDeduction: false };
+    };
+    const success = resolveSoftTone(colors, toneScale(colors, "success"), panel);
+    const progress = freeShippingProgress;
+    const remaining = progress ? Math.max(0, progress.threshold - progress.current) : 0;
+    const unlocked = !!progress && remaining === 0;
+    const percent = progress && progress.threshold > 0 ? Math.min(100, Math.round((progress.current / progress.threshold) * 100)) : 0;
+    const progressText = unlocked ? copy.unlocked : copy.addMore(formatPrice(remaining, fmt));
+    return (_jsxs(Flex, { direction: "column", gap: 3, "data-testid": testId, children: [progress && (_jsxs(Flex, { direction: "column", gap: 2, px: 1, "data-testid": "order-summary-progress", children: [_jsx(Text, { as: "p", fontSize: "sm", fontWeight: 600, lineHeight: 1.4, color: unlocked ? colors.semanticText.success : colors.header[900], sx: tabular, children: progressText }), _jsx(ProgressBar, { size: "xs", value: percent, colorScheme: unlocked ? "green" : "primary", borderRadius: "full", "aria-label": copy.progressLabel, "aria-valuetext": progressText })] })), _jsxs(Box, { as: "section", "aria-labelledby": hideTitle ? undefined : headingId, "aria-label": hideTitle ? copy.title : undefined, bg: panel, borderRadius: "1.5rem", p: 5, children: [!hideTitle && (_jsx(Text, { as: "h2", id: headingId, fontSize: "md", fontWeight: 700, lineHeight: 1.4, color: colors.header[900], mb: 4, children: copy.title })), _jsx(Flex, { as: "dl", direction: "column", gap: 3, m: 0, children: lines.map((line) => {
+                            var _a;
+                            const { text, isFree, isDeduction } = amountText(line);
+                            const ink = inkFor(line, isFree, isDeduction);
+                            return (_jsxs(Flex, { justify: "space-between", align: "flex-start", gap: 4, children: [_jsxs(Box, { as: "dt", minW: 0, children: [_jsx(Text, { as: "span", fontSize: "sm", lineHeight: 1.45, color: line.tone === "muted" ? colors.textMuted : colors.text[800], children: line.label }), line.hint && (_jsx(Text, { as: "span", display: "block", fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, children: line.hint }))] }), _jsx(Box, { as: "dd", m: 0, flexShrink: 0, textAlign: "right", fontSize: "sm", fontWeight: isFree || isDeduction ? 600 : 500, lineHeight: 1.45, color: ink, sx: tabular, children: text })] }, (_a = line.id) !== null && _a !== void 0 ? _a : line.label));
+                        }) }), _jsxs(Flex, { justify: "space-between", align: "baseline", gap: 4, mt: 6, children: [_jsx(Text, { as: "span", fontSize: "md", fontWeight: 700, color: colors.header[900], children: copy.total }), _jsxs(Box, { textAlign: "right", children: [_jsx(Text, { as: "span", display: "block", fontSize: "1.5rem", fontWeight: 700, lineHeight: 1.2, letterSpacing: "-0.02em", color: colors.header[900], sx: tabular, "data-testid": "order-summary-total", children: formatPrice(total, fmt) }), taxNote && (_jsx(Text, { as: "span", display: "block", fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, children: taxNote }))] })] }), savings !== undefined && savings > 0 && (_jsxs(Flex, { align: "center", gap: 2, mt: 4, px: 3, py: 2.5, borderRadius: "0.75rem", bg: success.bg, color: success.fg, "data-testid": "order-summary-savings", children: [_jsx(PartyPopper, { size: 16, "aria-hidden": true }), _jsx(Text, { as: "span", fontSize: "sm", fontWeight: 600, lineHeight: 1.4, sx: tabular, children: copy.savings(formatPrice(savings, fmt)) })] }))] })] }));
+};
+export default OrderSummary;

package/dist/esm/Components/OrderSummary/OrderSummaryProps.js

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

package/dist/esm/Components/PaymentOption/PaymentOption.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { Box, Flex, Text } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { RadioIndicator, selectableSurface, useSelectable } from "../CheckoutKit/selectable.js";
+import Tag from "../Tag/Tag.js";
+/** Tonal payment-method row: icon well, title, subtitle, offer tag, and an area that opens when it is chosen. */
+const PaymentOption = ({ value, title, subtitle, icon, offer, selected, onSelect, disabled = false, children, "data-testid": testId, }) => {
+    const { colors } = useCustomTheme();
+    const uid = useId();
+    const titleId = `${uid}-title`;
+    const subtitleId = `${uid}-subtitle`;
+    const regionId = `${uid}-region`;
+    const { isSelected, interactive, inGroup, ringed, props } = useSelectable({ value, selected, disabled, onSelect });
+    const selectable = inGroup || !!onSelect;
+    const expanded = isSelected && !!children;
+    return (_jsxs(Flex, { direction: "column", "data-testid": testId, "data-selected": isSelected || undefined, ...selectableSurface(colors, { selected: isSelected && selectable, disabled, interactive, ringed }), children: [_jsxs(Flex, { ...props, "data-radio": true, "aria-disabled": selectable && disabled ? true : undefined, "aria-labelledby": props.role ? titleId : undefined, "aria-describedby": props.role && subtitle ? subtitleId : undefined, "aria-controls": expanded && props.role === "radio" ? regionId : undefined, align: "center", gap: 3, p: 4, borderRadius: "1rem", cursor: interactive ? "pointer" : "default", outline: "none", children: [selectable && _jsx(RadioIndicator, { selected: isSelected }), icon && (_jsx(Flex, { as: "span", "aria-hidden": true, align: "center", justify: "center", boxSize: 10, flexShrink: 0, borderRadius: "0.75rem", bg: colors.background[50], color: colors.header[900], children: icon })), _jsxs(Box, { flex: 1, minW: 0, children: [_jsx(Text, { as: "span", id: titleId, display: "block", fontSize: "sm", fontWeight: 600, lineHeight: 1.4, color: colors.header[900], children: title }), subtitle && (_jsx(Text, { as: "span", id: subtitleId, display: "block", fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, children: subtitle }))] }), offer && _jsx(Tag, { label: offer, size: "xs", tone: "success" })] }), expanded && (_jsx(Box, { id: regionId, role: "group", "aria-labelledby": titleId, px: 4, pb: 4, pl: selectable ? "3.25rem" : 4, children: children }))] }));
+};
+export default PaymentOption;

package/dist/esm/Components/PaymentOption/PaymentOptionGroup.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SelectableGroup } from "../CheckoutKit/selectable.js";
+/** Radiogroup wrapper for `PaymentOption`s. */
+const PaymentOptionGroup = (props) => _jsx(SelectableGroup, { ...props });
+export default PaymentOptionGroup;

package/dist/esm/Components/PaymentOption/PaymentOptionProps.js

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

package/dist/esm/Components/PincodeChecker/PincodeChecker.js

@@ -0,0 +1,170 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useRef, useState } from "react";
+import { Box, Flex, Text, VisuallyHidden } from "@chakra-ui/react";
+import { keyframes } from "@emotion/react";
+import { Check, CircleAlert, Info } from "lucide-react";
+import Button from "../Button/Button.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { fieldFocusVisible } from "../../Theme/chakra/focusRing.styles.js";
+import { FIELD_RADIUS, FIELD_TRANSITION, fieldHoverBorder, fieldTextStyles } from "../Common/fieldStyles.js";
+import { placeholderInk } from "../../Theme/tokens/builders/placeholderInk.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+const DEFAULT_LABELS = {
+    heading: "Check delivery",
+    inputLabel: "Pincode",
+    placeholder: "Enter pincode",
+    check: "Check",
+    change: "Change",
+    hint: "Delivery date, COD and returns for your area",
+    invalid: "Enter a 6-digit pincode",
+    unserviceable: "We don't deliver here yet",
+    checking: "Checking delivery",
+    deliveryBy: "Delivery by",
+    codAvailable: "Cash on Delivery available",
+    codUnavailable: "Cash on Delivery not available",
+    deliverTo: "Deliver to",
+    unserviceableHint: "Try another pincode",
+};
+const PIN_LENGTH = 6;
+const FIELD_HEIGHT = "3rem";
+const ERROR_RING = "1.5px";
+const tabular = { fontVariantNumeric: "tabular-nums" };
+const pulse = keyframes `0%, 100% { opacity: 1; } 50% { opacity: 0.5; }`;
+const digitsOnly = (raw) => raw.replace(/\D/g, "").slice(0, PIN_LENGTH);
+const isPin = (pin) => pin.length === PIN_LENGTH;
+const isThenable = (value) => typeof value === "object" && value !== null && typeof value.then === "function";
+const SkeletonBlock = ({ w, h }) => {
+    const { colors } = useCustomTheme();
+    return (_jsx(Box, { "aria-hidden": true, w: w, h: h, borderRadius: "md", bg: colors.background[200], animation: `${pulse} 1.2s ease-in-out infinite`, sx: reducedMotionSx() }));
+};
+/** Pincode field that answers with a delivery date, COD availability and a shipping note, held in place so the panel never jumps. */
+const PincodeChecker = ({ value, defaultValue = "", onValueChange, status: statusProp, result: resultProp, onCheck, autoCheck = true, checkOnMount = false, labels, "data-testid": testId, }) => {
+    const { colors } = useCustomTheme();
+    const copy = { ...DEFAULT_LABELS, ...labels };
+    const baseId = useId();
+    const inputId = `${baseId}-pin`;
+    const hintId = `${baseId}-hint`;
+    const errorId = `${baseId}-error`;
+    const [innerPin, setInnerPin] = useState(digitsOnly(defaultValue));
+    const [innerStatus, setInnerStatus] = useState("idle");
+    const [innerResult, setInnerResult] = useState();
+    const [editing, setEditing] = useState(false);
+    const [localInvalid, setLocalInvalid] = useState(false);
+    const inputRef = useRef(null);
+    const changeRef = useRef(null);
+    const latest = useRef(0);
+    const mounted = useRef(true);
+    const focusInput = useRef(false);
+    const focusChange = useRef(false);
+    const pin = value === undefined ? innerPin : digitsOnly(value);
+    const status = statusProp !== null && statusProp !== void 0 ? statusProp : innerStatus;
+    const result = resultProp !== null && resultProp !== void 0 ? resultProp : innerResult;
+    const invalid = localInvalid || status === "invalid";
+    const outcome = status === "serviceable" || status === "unserviceable"
+        ? status
+        : status === "idle" || status === "invalid"
+            ? null
+            : result
+                ? result.ok
+                    ? "serviceable"
+                    : "unserviceable"
+                : null;
+    const checking = status === "checking";
+    const showField = editing || status === "idle" || invalid;
+    useEffect(() => {
+        mounted.current = true;
+        return () => {
+            mounted.current = false;
+        };
+    }, []);
+    useEffect(() => {
+        if (status === "serviceable" || status === "unserviceable")
+            setEditing(false);
+    }, [status]);
+    useEffect(() => {
+        var _a, _b;
+        if (showField && focusInput.current) {
+            focusInput.current = false;
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        if (!showField && focusChange.current) {
+            focusChange.current = false;
+            (_b = changeRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+    }, [showField]);
+    const settle = useCallback((answer) => {
+        if (document.activeElement === inputRef.current)
+            focusChange.current = true;
+        setInnerResult(answer);
+        setInnerStatus(answer.ok ? "serviceable" : "unserviceable");
+        setEditing(false);
+    }, []);
+    const run = useCallback((code) => {
+        if (!isPin(code)) {
+            setLocalInvalid(true);
+            return;
+        }
+        setLocalInvalid(false);
+        setEditing(showField);
+        const ticket = ++latest.current;
+        const answer = onCheck === null || onCheck === void 0 ? void 0 : onCheck(code);
+        if (answer === undefined)
+            return;
+        if (!isThenable(answer)) {
+            settle(answer);
+            return;
+        }
+        setInnerStatus("checking");
+        answer.then((resolved) => {
+            if (mounted.current && ticket === latest.current)
+                settle(resolved);
+        }, () => {
+            if (mounted.current && ticket === latest.current)
+                settle({ ok: false });
+        });
+    }, [onCheck, settle, showField]);
+    useEffect(() => {
+        if (checkOnMount && isPin(pin))
+            run(pin);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const onChange = (event) => {
+        const next = digitsOnly(event.target.value);
+        if (value === undefined)
+            setInnerPin(next);
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(next);
+        setEditing(true);
+        setLocalInvalid(false);
+        if (autoCheck && isPin(next))
+            run(next);
+    };
+    const onSubmit = (event) => {
+        var _a;
+        event.preventDefault();
+        if (!isPin(pin))
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        run(pin);
+    };
+    const reopen = () => {
+        focusInput.current = true;
+        setEditing(true);
+    };
+    const fieldRing = invalid
+        ? `inset 0 0 0 ${ERROR_RING} ${colors.semanticText.error}`
+        : "none";
+    const field = (_jsxs(Box, { as: "form", noValidate: true, onSubmit: onSubmit, children: [_jsxs(Flex, { gap: 2, align: "stretch", children: [_jsx(Box, { as: "input", ref: inputRef, id: inputId, type: "text", inputMode: "numeric", autoComplete: "postal-code", maxLength: PIN_LENGTH, value: pin, placeholder: copy.placeholder, onChange: onChange, onBlur: () => {
+                            if (pin.length > 0 && !isPin(pin))
+                                setLocalInvalid(true);
+                        }, "aria-invalid": invalid || undefined, "aria-describedby": invalid ? errorId : hintId, flex: 1, minW: 0, h: FIELD_HEIGHT, px: 4, fontSize: "md", bg: colors.background[50], borderWidth: "1px", borderStyle: "solid", borderColor: "transparent", borderRadius: FIELD_RADIUS, boxShadow: fieldRing, transition: FIELD_TRANSITION, _placeholder: { color: placeholderInk(colors), opacity: 1 }, _hover: invalid ? undefined : { borderColor: fieldHoverBorder(colors) }, _focusVisible: {
+                            borderColor: invalid ? "transparent" : colors.primary[500],
+                            ...fieldFocusVisible(colors),
+                            boxShadow: invalid ? `${fieldRing}, ${fieldFocusVisible(colors).boxShadow}` : fieldFocusVisible(colors).boxShadow,
+                        }, sx: { ...fieldTextStyles(colors), ...tabular, letterSpacing: "0.08em", ...reducedMotionSx() } }), _jsx(Button, { type: "submit", size: "lg", label: copy.check })] }), invalid ? (_jsxs(Flex, { id: errorId, mt: 2, gap: 1.5, align: "center", fontSize: "sm", fontWeight: 500, color: colors.semanticText.error, children: [_jsx(CircleAlert, { size: 16, "aria-hidden": true, style: { flexShrink: 0 } }), _jsx(Text, { as: "span", children: (status === "invalid" && (result === null || result === void 0 ? void 0 : result.message)) || copy.invalid })] })) : (_jsx(Text, { id: hintId, mt: 2, fontSize: "xs", color: colors.textMuted, children: copy.hint }))] }));
+    const changeButton = (_jsx(Button, { ref: changeRef, variant: "link", size: "sm", h: "2.75rem", flexShrink: 0, onClick: reopen, label: copy.change }));
+    const savedLine = !showField && outcome === "serviceable" ? (_jsxs(Flex, { align: "center", justify: "space-between", gap: 3, children: [_jsxs(Text, { fontSize: "sm", color: colors.textMuted, sx: tabular, children: [copy.deliverTo, " ", _jsxs(Text, { as: "span", fontWeight: 600, color: colors.header[900], children: [pin, (result === null || result === void 0 ? void 0 : result.city) ? ` · ${result.city}` : ""] })] }), changeButton] })) : null;
+    const details = outcome === "serviceable" && result ? (_jsxs(Flex, { direction: "column", gap: 2, children: [result.deliveryBy && (_jsxs(Text, { fontSize: "lg", lineHeight: 1.3, sx: tabular, children: [_jsxs(Text, { as: "span", fontSize: "sm", color: colors.textMuted, children: [copy.deliveryBy, " "] }), _jsx(Text, { as: "span", fontWeight: 700, color: colors.header[900], children: result.deliveryBy })] })), result.cod !== undefined && (_jsxs(Flex, { align: "center", gap: 2, fontSize: "sm", fontWeight: 500, color: colors.header[900], children: [result.cod ? (_jsx(Box, { as: "span", color: colors.semanticText.success, display: "inline-flex", children: _jsx(Check, { size: 16, "aria-hidden": true }) })) : (_jsx(Box, { as: "span", color: colors.semanticText.warning, display: "inline-flex", children: _jsx(Info, { size: 16, "aria-hidden": true }) })), _jsx(Text, { as: "span", children: result.cod ? copy.codAvailable : copy.codUnavailable })] })), result.shippingNote && (_jsx(Text, { fontSize: "xs", color: colors.textMuted, children: result.shippingNote }))] })) : outcome === "unserviceable" ? (_jsxs(Flex, { align: "flex-start", justify: "space-between", gap: 3, children: [_jsxs(Box, { children: [_jsx(Text, { fontSize: "md", fontWeight: 600, color: colors.header[900], children: (result === null || result === void 0 ? void 0 : result.message) || copy.unserviceable }), _jsx(Text, { fontSize: "sm", color: colors.textMuted, children: copy.unserviceableHint })] }), !showField && changeButton] })) : null;
+    const skeleton = checking && !outcome && (_jsxs(Flex, { direction: "column", gap: 3, "aria-hidden": true, children: [_jsx(SkeletonBlock, { w: "55%", h: "0.875rem" }), _jsx(SkeletonBlock, { w: "40%", h: "1.5rem" }), _jsx(SkeletonBlock, { w: "70%", h: "0.875rem" })] }));
+    return (_jsxs(Box, { "aria-busy": checking || undefined, bg: colors.background[100], borderRadius: "xl", p: 4, "data-testid": testId, children: [_jsx(Text, { as: "h2", fontSize: "md", fontWeight: 600, color: colors.header[900], mb: 3, children: copy.heading }), showField && (_jsxs(_Fragment, { children: [_jsx(VisuallyHidden, { as: "label", htmlFor: inputId, children: copy.inputLabel }), field] })), _jsxs(Flex, { direction: "column", gap: 3, mt: showField && (outcome || skeleton) ? 4 : 0, "aria-live": "polite", opacity: checking && outcome ? 0.6 : 1, transition: transitionFor(["opacity"]), sx: reducedMotionSx(), children: [checking && _jsx(VisuallyHidden, { children: copy.checking }), savedLine, details, skeleton] })] }));
+};
+export default PincodeChecker;

package/dist/esm/Components/PincodeChecker/PincodeCheckerProps.js

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

package/dist/esm/Components/PriceBlock/PriceBlock.js

@@ -0,0 +1,39 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Flex, Text, VisuallyHidden } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { discountAmount, discountPercent, formatPrice } from "../../Utils/price.js";
+const SCALE = {
+    sm: { price: "0.9375rem", priceLine: 1.33, secondary: "0.75rem", secondaryLine: 1.33, note: "0.75rem" },
+    md: { price: "1.125rem", priceLine: 1.22, secondary: "0.8125rem", secondaryLine: 1.38, note: "0.75rem" },
+    lg: { price: "1.75rem", priceLine: 1.21, secondary: "0.9375rem", secondaryLine: 1.47, note: "0.8125rem" },
+};
+const ALIGN = {
+    start: { items: "flex-start", justify: "flex-start", text: "left" },
+    center: { items: "center", justify: "center", text: "center" },
+    end: { items: "flex-end", justify: "flex-end", text: "right" },
+};
+const DEFAULT_LABELS = {
+    price: "Price",
+    originalPrice: "Original price",
+    off: (percent) => `${percent}% off`,
+    save: (amount) => `You save ${amount}`,
+};
+const unitText = (unit, fmt) => typeof unit === "string" ? unit : `${formatPrice(unit.value, fmt)} / ${unit.per === 1 ? "" : `${unit.per} `}${unit.unit}`;
+const tabular = { fontVariantNumeric: "tabular-nums" };
+/** Selling price, struck MRP, discount, savings, tax note and unit price in one tabular, screen-reader-friendly block. */
+const PriceBlock = ({ price, mrp, priceRange, size = "md", align = "start", showSavings = false, taxNote, unitPrice, currency, locale, labels, "data-testid": testId, }) => {
+    const { colors } = useCustomTheme();
+    const fmt = { currency, locale };
+    const copy = { ...DEFAULT_LABELS, ...labels };
+    const scale = SCALE[size];
+    const a = ALIGN[align];
+    const isRange = !!priceRange && priceRange.min !== priceRange.max;
+    const selling = priceRange ? priceRange.min : price;
+    const priceText = isRange ? `${formatPrice(priceRange.min, fmt)} – ${formatPrice(priceRange.max, fmt)}` : selling === undefined ? null : formatPrice(selling, fmt);
+    const percent = !priceRange && selling !== undefined ? discountPercent(selling, mrp) : 0;
+    const saved = !priceRange && selling !== undefined ? discountAmount(selling, mrp) : 0;
+    const hasDiscount = percent > 0;
+    const muted = { fontSize: scale.note, lineHeight: 1.4, color: colors.textMuted, sx: tabular };
+    return (_jsxs(Flex, { direction: "column", align: a.items, gap: 0.5, textAlign: a.text, "data-testid": testId, children: [_jsxs(Flex, { align: "baseline", justify: a.justify, columnGap: 2, rowGap: 0, wrap: "wrap", children: [priceText !== null && (_jsxs(Text, { as: "span", fontSize: scale.price, lineHeight: scale.priceLine, fontWeight: 700, letterSpacing: "-0.02em", color: colors.header[900], sx: tabular, children: [_jsxs(VisuallyHidden, { children: [copy.price, " "] }), priceText] })), hasDiscount && mrp !== undefined && (_jsxs(_Fragment, { children: [_jsxs(Box, { as: "del", fontSize: scale.secondary, lineHeight: scale.secondaryLine, color: colors.textMuted, textDecoration: "line-through", sx: tabular, children: [_jsxs(VisuallyHidden, { children: [copy.originalPrice, " "] }), formatPrice(mrp, fmt)] }), _jsx(Text, { as: "span", fontSize: scale.secondary, lineHeight: scale.secondaryLine, fontWeight: 600, color: colors.semanticText.success, sx: tabular, children: copy.off(percent) })] }))] }), showSavings && hasDiscount && (_jsx(Text, { as: "span", fontSize: scale.note, lineHeight: 1.4, fontWeight: 600, color: colors.semanticText.success, sx: tabular, children: copy.save(formatPrice(saved, fmt)) })), taxNote && (_jsx(Text, { as: "span", ...muted, children: taxNote })), unitPrice != null && (_jsx(Text, { as: "span", ...muted, children: unitText(unitPrice, fmt) }))] }));
+};
+export default PriceBlock;

package/dist/esm/Components/PriceBlock/PriceBlockProps.js

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

package/dist/esm/Components/ProductBadges/ProductBadges.js

@@ -0,0 +1,59 @@
+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";
+import { isDarkCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { resolveFilledSurface } from "../../Theme/tokens/builders/filledSurface.js";
+import { overlayScrim } from "../../Theme/tokens/builders/scrim.js";
+import { resolveStatusTone } from "../../Theme/tokens/builders/statusTone.js";
+const scaleFor = (colors, tone) => {
+    switch (tone) {
+        case "accent":
+            return colors.primary;
+        case "neutral":
+            return colors.gray;
+        case "success":
+            return colors.semantic.success;
+        case "warning":
+            return colors.semantic.warning;
+        case "danger":
+            return colors.semantic.error;
+        case "info":
+            return colors.semantic.info;
+    }
+};
+const SIZE = {
+    sm: { h: "1.25rem", font: "0.6875rem", px: 1.5 },
+    md: { h: "1.5rem", font: "0.75rem", px: 2 },
+};
+const lookFor = (colors, tone, variant) => {
+    if (variant === "glass") {
+        const dot = tone === "inverse" || tone === "neutral" ? undefined : resolveFilledSurface(scaleFor(colors, tone), colors).fill;
+        return { bg: overlayScrim(colors), color: colors.white, dot };
+    }
+    if (tone === "inverse") {
+        return variant === "soft"
+            ? { bg: colors.background[100], color: colors.header[900] }
+            : { bg: colors.header[900], color: colors.background[50] };
+    }
+    const scale = scaleFor(colors, tone);
+    if (variant === "soft") {
+        const soft = resolveStatusTone(scale, isDarkCanvas(colors.backgroundColor.main) ? "dark" : "light");
+        return { bg: soft.bg, color: soft.fg };
+    }
+    const filled = resolveFilledSurface(scale, colors);
+    return { bg: filled.fill, color: filled.color };
+};
+/** Stack of corner badges (sale, new, low stock…) built from `ProductBadge[]`; filled chips resolve ink per brand and mode. */
+const ProductBadges = ({ badges, max = 2, size = "sm", variant = "solid", orientation = "vertical", "data-testid": testId, }) => {
+    const { colors } = useCustomTheme();
+    const shown = badges.slice(0, Math.max(0, max));
+    if (shown.length === 0)
+        return null;
+    const s = SIZE[size];
+    return (_jsx(Flex, { as: "ul", role: "list", listStyleType: "none", m: 0, p: 0, direction: orientation === "vertical" ? "column" : "row", align: "flex-start", wrap: orientation === "vertical" ? "nowrap" : "wrap", gap: 1.5, maxW: "100%", "data-testid": testId, children: shown.map((badge, i) => {
+            var _a, _b;
+            const look = lookFor(colors, (_a = badge.tone) !== null && _a !== void 0 ? _a : "neutral", variant);
+            return (_jsxs(Flex, { as: "li", "data-tone": (_b = badge.tone) !== null && _b !== void 0 ? _b : "neutral", "data-variant": variant, align: "center", gap: 1, h: s.h, px: s.px, maxW: "100%", borderRadius: "md", bg: look.bg, color: look.color, sx: variant === "glass" ? { backdropFilter: "blur(8px)", WebkitBackdropFilter: "blur(8px)" } : undefined, children: [look.dot && _jsx(Box, { as: "span", "aria-hidden": true, boxSize: "6px", flexShrink: 0, borderRadius: "full", bg: look.dot }), _jsx(Text, { as: "span", fontSize: s.font, fontWeight: 600, lineHeight: 1, letterSpacing: "0.01em", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", sx: { fontVariantNumeric: "tabular-nums" }, children: badge.label })] }, `${badge.label}-${i}`));
+        }) }));
+};
+export default ProductBadges;

package/dist/esm/Components/ProductBadges/ProductBadgesProps.js

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