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

package/dist/Components/CheckoutKit/selectable.d.ts

@@ -0,0 +1,58 @@
+import type { FocusEvent, KeyboardEvent, ReactNode } from "react";
+import type { BoxProps } from "@chakra-ui/react";
+import type { PaletteProps } from "../../Theme/tokens/types";
+type GroupState = {
+    value: string | undefined;
+    tabStop: string | undefined;
+    select: (value: string) => void;
+};
+export declare const useSelectableGroup: () => GroupState | null;
+export type SelectableGroupProps = {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    gap?: number;
+    children: ReactNode;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "data-testid"?: string;
+};
+/** Radiogroup with a roving tab stop; arrows move focus and selection together, like native radios. */
+export declare const SelectableGroup: ({ value, defaultValue, onValueChange, gap, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "data-testid": testId, }: SelectableGroupProps) => import("react/jsx-runtime").JSX.Element;
+/** Tonal card surface; selection is a 2px ink ring plus a check, never colour alone. */
+export declare const selectableSurface: (colors: PaletteProps, { selected, disabled, interactive, ringed }: {
+    selected: boolean;
+    disabled: boolean;
+    interactive: boolean;
+    ringed: boolean;
+}) => BoxProps;
+type RadioIndicatorProps = {
+    selected: boolean;
+};
+/** The 20px circle that carries selection state beside the text. */
+export declare const RadioIndicator: ({ selected }: RadioIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+export type SelectableSemantics = {
+    role: "radio" | "button" | undefined;
+    "aria-checked"?: boolean;
+    "aria-pressed"?: boolean;
+    tabIndex: number | undefined;
+    "data-value"?: string;
+    onClick: () => void;
+    onKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
+    onFocus: (event: FocusEvent<HTMLElement>) => void;
+    onBlur: () => void;
+};
+/** Radio inside a group, toggle button when only `onSelect` is given, inert otherwise. */
+export declare const useSelectable: ({ value, selected, disabled, onSelect, }: {
+    value?: string;
+    selected?: boolean;
+    disabled: boolean;
+    onSelect?: () => void;
+}) => {
+    isSelected: boolean;
+    interactive: boolean;
+    inGroup: boolean;
+    ringed: boolean;
+    props: SelectableSemantics;
+};
+export {};

package/dist/Components/CheckoutKit/selectable.js

@@ -0,0 +1,120 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSelectable = exports.RadioIndicator = exports.selectableSurface = exports.SelectableGroup = exports.useSelectableGroup = void 0;
+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 motion_1 = require("../../Theme/tokens/primitives/motion");
+const motion_2 = require("../../Theme/chakra/motion");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const GroupContext = (0, react_1.createContext)(null);
+const useSelectableGroup = () => (0, react_1.useContext)(GroupContext);
+exports.useSelectableGroup = useSelectableGroup;
+const firstEnabledValue = (children) => {
+    for (const child of react_1.Children.toArray(children)) {
+        if (!(0, react_1.isValidElement)(child))
+            continue;
+        const { value, disabled } = child.props;
+        if (typeof value === "string" && !disabled)
+            return value;
+    }
+    return undefined;
+};
+const STEP = { ArrowDown: 1, ArrowRight: 1, ArrowUp: -1, ArrowLeft: -1 };
+/** Radiogroup with a roving tab stop; arrows move focus and selection together, like native radios. */
+const SelectableGroup = ({ value, defaultValue, onValueChange, gap = 3, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "data-testid": testId, }) => {
+    const [inner, setInner] = (0, react_1.useState)(defaultValue);
+    const current = value !== null && value !== void 0 ? value : inner;
+    const state = (0, react_1.useMemo)(() => ({
+        value: current,
+        tabStop: current !== null && current !== void 0 ? current : firstEnabledValue(children),
+        select: (next) => {
+            if (value === undefined)
+                setInner(next);
+            if (next !== current)
+                onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(next);
+        },
+    }), [current, children, value, onValueChange]);
+    const onKeyDown = (event) => {
+        const edge = event.key === "Home" ? 0 : event.key === "End" ? -1 : null;
+        const step = STEP[event.key];
+        if (edge === null && step === undefined)
+            return;
+        const radios = Array.from(event.currentTarget.querySelectorAll('[role="radio"]:not([aria-disabled="true"])'));
+        const at = radios.indexOf(document.activeElement);
+        if (at < 0)
+            return;
+        event.preventDefault();
+        const index = edge === null ? (at + step + radios.length) % radios.length : edge < 0 ? radios.length - 1 : 0;
+        const target = radios[index];
+        target.focus();
+        const next = target.getAttribute("data-value");
+        if (next !== null)
+            state.select(next);
+    };
+    return ((0, jsx_runtime_1.jsx)(GroupContext.Provider, { value: state, children: (0, jsx_runtime_1.jsx)(react_2.Flex, { role: "radiogroup", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, direction: "column", gap: gap, onKeyDown: onKeyDown, "data-testid": testId, children: children }) }));
+};
+exports.SelectableGroup = SelectableGroup;
+/** Tonal card surface; selection is a 2px ink ring plus a check, never colour alone. */
+const selectableSurface = (colors, { selected, disabled, interactive, ringed }) => ({
+    bg: colors.background[100],
+    borderRadius: "1rem",
+    boxShadow: selected ? `inset 0 0 0 2px ${colors.header[900]}` : "none",
+    opacity: disabled ? 0.6 : 1,
+    transition: (0, motion_1.transitionFor)(["background-color", "box-shadow"]),
+    _hover: interactive && !selected && !disabled ? { bg: colors.background[200] } : undefined,
+    sx: { ...(ringed ? (0, focusRing_styles_1.focusVisibleRing)(colors) : {}), ...(0, motion_2.reducedMotionSx)() },
+});
+exports.selectableSurface = selectableSurface;
+/** The 20px circle that carries selection state beside the text. */
+const RadioIndicator = ({ selected }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const fill = colors.header[900];
+    return ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", "aria-hidden": true, display: "inline-flex", alignItems: "center", justifyContent: "center", boxSize: "1.25rem", flexShrink: 0, borderRadius: "full", bg: selected ? fill : "transparent", color: (0, accentText_1.onFilled)(fill, colors.white, colors.black), boxShadow: selected ? "none" : `inset 0 0 0 1.5px ${colors.textMuted}`, transition: (0, motion_1.transitionFor)(["background-color", "box-shadow"]), sx: (0, motion_2.reducedMotionSx)(), children: selected && (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 12, strokeWidth: 3 }) }));
+};
+exports.RadioIndicator = RadioIndicator;
+/** Radio inside a group, toggle button when only `onSelect` is given, inert otherwise. */
+const useSelectable = ({ value, selected, disabled, onSelect, }) => {
+    const group = (0, exports.useSelectableGroup)();
+    const [ringed, setRinged] = (0, react_1.useState)(false);
+    const inGroup = group !== null && value !== undefined;
+    const isSelected = inGroup ? group.value === value : !!selected;
+    const interactive = (inGroup || !!onSelect) && !disabled;
+    const choose = () => {
+        if (!interactive)
+            return;
+        if (inGroup)
+            group.select(value);
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect();
+    };
+    const props = {
+        role: inGroup ? "radio" : onSelect ? "button" : undefined,
+        "aria-checked": inGroup ? isSelected : undefined,
+        "aria-pressed": !inGroup && onSelect ? isSelected : undefined,
+        tabIndex: inGroup ? (group.tabStop === value && !disabled ? 0 : -1) : onSelect && !disabled ? 0 : undefined,
+        "data-value": inGroup ? value : undefined,
+        onClick: choose,
+        onKeyDown: (event) => {
+            if (event.target !== event.currentTarget)
+                return;
+            if (event.key === " " || event.key === "Enter") {
+                event.preventDefault();
+                choose();
+            }
+        },
+        onFocus: (event) => {
+            try {
+                setRinged(event.currentTarget.matches(":focus-visible"));
+            }
+            catch {
+                setRinged(true);
+            }
+        },
+        onBlur: () => setRinged(false),
+    };
+    return { isSelected, interactive, inGroup, ringed, props };
+};
+exports.useSelectable = useSelectable;

package/dist/Components/Commerce/commerceTypes.d.ts

@@ -0,0 +1,52 @@
+export type ProductMedia = {
+    id: string;
+    src: string;
+    alt?: string;
+    thumb?: string;
+    type?: "image" | "video";
+    poster?: string;
+};
+export type ProductBadgeTone = "accent" | "neutral" | "success" | "warning" | "danger" | "info" | "inverse";
+export type ProductBadge = {
+    label: string;
+    tone?: ProductBadgeTone;
+};
+export type OptionAxisType = "swatch" | "chip" | "image-tile" | "pack";
+export type OptionValue = {
+    id: string;
+    label: string;
+    /** Any CSS colour; product data, so it is the one place a literal colour is allowed. */
+    swatch?: string;
+    image?: string;
+    hint?: string;
+    /** Quantity of the base unit this value contains, for per-unit pricing on pack axes. */
+    quantity?: number;
+};
+export type OptionAxis = {
+    id: string;
+    label: string;
+    type: OptionAxisType;
+    values: OptionValue[];
+    guide?: {
+        label: string;
+        onClick: () => void;
+    };
+};
+export type VariantSelection = Record<string, string>;
+export type ProductVariant = {
+    id: string;
+    /** Axis id to option value id; a variant with every axis set is fully specified. */
+    options: VariantSelection;
+    price: number;
+    mrp?: number;
+    /** Undefined means untracked and sellable; 0 means sold out. */
+    stock?: number;
+    backorder?: boolean;
+    sku?: string;
+    mediaIds?: string[];
+};
+export type StockState = "in-stock" | "low-stock" | "out-of-stock" | "backorder";
+export type PriceFormat = {
+    currency?: string;
+    locale?: string;
+};

package/dist/Components/Commerce/commerceTypes.js

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

package/dist/Components/Commerce/commerceVariants.d.ts

@@ -0,0 +1,13 @@
+import type { OptionAxis, ProductVariant, StockState, VariantSelection } from "./commerceTypes";
+export declare const LOW_STOCK_THRESHOLD = 5;
+export declare function stockState(variant: Pick<ProductVariant, "stock" | "backorder"> | undefined, threshold?: number): StockState;
+export declare function selectionComplete(axes: OptionAxis[], selection: VariantSelection): boolean;
+export declare function findVariant(axes: OptionAxis[], variants: ProductVariant[], selection: VariantSelection): ProductVariant | undefined;
+/** A value is offered when some sellable variant has it alongside the other axes' current picks. */
+export declare function isOptionAvailable(variants: ProductVariant[], selection: VariantSelection, axisId: string, valueId: string): boolean;
+export declare function remainingStock(variants: ProductVariant[], selection: VariantSelection, axisId: string, valueId: string): number | undefined;
+export declare function priceRange(variants: ProductVariant[]): {
+    min: number;
+    max: number;
+} | null;
+export declare function firstAvailableSelection(variants: ProductVariant[]): VariantSelection;

package/dist/Components/Commerce/commerceVariants.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LOW_STOCK_THRESHOLD = void 0;
+exports.stockState = stockState;
+exports.selectionComplete = selectionComplete;
+exports.findVariant = findVariant;
+exports.isOptionAvailable = isOptionAvailable;
+exports.remainingStock = remainingStock;
+exports.priceRange = priceRange;
+exports.firstAvailableSelection = firstAvailableSelection;
+exports.LOW_STOCK_THRESHOLD = 5;
+function stockState(variant, threshold = exports.LOW_STOCK_THRESHOLD) {
+    if (!variant || variant.stock === undefined)
+        return "in-stock";
+    if (variant.stock > 0)
+        return variant.stock <= threshold ? "low-stock" : "in-stock";
+    return variant.backorder ? "backorder" : "out-of-stock";
+}
+const sellable = (variant) => stockState(variant) !== "out-of-stock";
+const matches = (variant, selection) => Object.entries(selection).every(([axisId, valueId]) => variant.options[axisId] === valueId);
+function selectionComplete(axes, selection) {
+    return axes.every((axis) => selection[axis.id] !== undefined);
+}
+function findVariant(axes, variants, selection) {
+    if (!selectionComplete(axes, selection))
+        return undefined;
+    return variants.find((variant) => matches(variant, selection));
+}
+/** A value is offered when some sellable variant has it alongside the other axes' current picks. */
+function isOptionAvailable(variants, selection, axisId, valueId) {
+    const probe = { ...selection, [axisId]: valueId };
+    return variants.some((variant) => sellable(variant) && matches(variant, probe));
+}
+function remainingStock(variants, selection, axisId, valueId) {
+    const probe = { ...selection, [axisId]: valueId };
+    const hits = variants.filter((variant) => matches(variant, probe) && sellable(variant));
+    if (hits.length === 0 || hits.some((variant) => variant.stock === undefined))
+        return undefined;
+    return hits.reduce((sum, variant) => { var _a; return sum + ((_a = variant.stock) !== null && _a !== void 0 ? _a : 0); }, 0);
+}
+function priceRange(variants) {
+    if (variants.length === 0)
+        return null;
+    const prices = variants.map((variant) => variant.price);
+    return { min: Math.min(...prices), max: Math.max(...prices) };
+}
+function firstAvailableSelection(variants) {
+    var _a;
+    const first = (_a = variants.find(sellable)) !== null && _a !== void 0 ? _a : variants[0];
+    return first ? { ...first.options } : {};
+}

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

@@ -0,0 +1,2 @@
+export * from "./commerceTypes";
+export * from "./commerceVariants";

package/dist/Components/Commerce/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./commerceTypes"), exports);
+__exportStar(require("./commerceVariants"), exports);

package/dist/Components/Commerce/useContainerWidth.d.ts

@@ -0,0 +1,3 @@
+import { type RefObject } from "react";
+/** Width of the referenced element, or undefined until measurable (SSR, jsdom, no ResizeObserver). */
+export declare const useContainerWidth: (ref: RefObject<HTMLElement>) => number | undefined;

package/dist/Components/Commerce/useContainerWidth.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useContainerWidth = void 0;
+const react_1 = require("react");
+/** Width of the referenced element, or undefined until measurable (SSR, jsdom, no ResizeObserver). */
+const useContainerWidth = (ref) => {
+    const [width, setWidth] = (0, react_1.useState)(undefined);
+    (0, react_1.useLayoutEffect)(() => {
+        const node = ref.current;
+        if (!node)
+            return undefined;
+        const measure = () => {
+            const next = node.getBoundingClientRect().width;
+            setWidth(next > 0 ? Math.round(next) : undefined);
+        };
+        measure();
+        if (typeof ResizeObserver === "undefined")
+            return undefined;
+        const observer = new ResizeObserver(measure);
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, [ref]);
+    return width;
+};
+exports.useContainerWidth = useContainerWidth;

package/dist/Components/CouponField/CouponField.d.ts

@@ -0,0 +1,4 @@
+import type { CouponFieldProps } from "./CouponFieldProps";
+/** Coupon entry that stays out of the way: a quiet prompt row, a field with tap-to-apply offers, then an applied state with the saving. */
+declare const CouponField: ({ status, appliedCode, savedAmount, error, onApply, onRemove, suggestions, value, defaultValue, onValueChange, expanded, defaultExpanded, onExpandedChange, currency, locale, labels, "data-testid": testId, }: CouponFieldProps) => import("react/jsx-runtime").JSX.Element;
+export default CouponField;

package/dist/Components/CouponField/CouponField.js

@@ -0,0 +1,72 @@
+"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 useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const motion_2 = require("../../Theme/chakra/motion");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const tone_1 = require("../../Theme/tokens/builders/tone");
+const price_1 = require("../../Utils/price");
+const Button_1 = __importDefault(require("../Button/Button"));
+const TextInput_1 = __importDefault(require("../Input/TextInput"));
+const DEFAULT_LABELS = {
+    prompt: "Have a coupon?",
+    inputLabel: "Coupon code",
+    placeholder: "Enter code",
+    apply: "Apply",
+    remove: "Remove",
+    suggestionsTitle: "Available offers",
+    applied: (code) => `${code} applied`,
+    saved: (amount) => `You saved ${amount}`,
+    applySuggestion: (code) => `Apply ${code}`,
+};
+const normalise = (raw) => raw.replace(/\s+/g, "").toUpperCase();
+/** Coupon entry that stays out of the way: a quiet prompt row, a field with tap-to-apply offers, then an applied state with the saving. */
+const CouponField = ({ status = "idle", appliedCode, savedAmount, error, onApply, onRemove, suggestions, value, defaultValue = "", onValueChange, expanded, defaultExpanded = false, onExpandedChange, currency, locale, labels, "data-testid": testId, }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const uid = (0, react_1.useId)();
+    const panelId = `${uid}-panel`;
+    const copy = { ...DEFAULT_LABELS, ...labels };
+    const [innerText, setInnerText] = (0, react_1.useState)(defaultValue);
+    const [innerOpen, setInnerOpen] = (0, react_1.useState)(defaultExpanded);
+    const text = value !== null && value !== void 0 ? value : innerText;
+    const applying = status === "applying";
+    const open = (expanded !== null && expanded !== void 0 ? expanded : innerOpen) || applying || status === "error";
+    const setText = (next) => {
+        if (value === undefined)
+            setInnerText(next);
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(next);
+    };
+    const setOpen = (next) => {
+        if (expanded === undefined)
+            setInnerOpen(next);
+        onExpandedChange === null || onExpandedChange === void 0 ? void 0 : onExpandedChange(next);
+    };
+    const submit = (code) => {
+        const clean = normalise(code);
+        if (!clean || applying)
+            return;
+        onApply === null || onApply === void 0 ? void 0 : onApply(clean);
+    };
+    const onKeyDown = (event) => {
+        if (event.key === "Enter" && event.target.tagName === "INPUT") {
+            event.preventDefault();
+            submit(text);
+        }
+    };
+    const success = (0, tone_1.resolveSoftTone)(colors, (0, tone_1.toneScale)(colors, "success"), colors.background[100]);
+    if (status === "applied" && appliedCode) {
+        return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 3, p: 3, pl: 4, borderRadius: "1rem", bg: colors.background[100], "data-testid": testId, "data-status": "applied", children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { as: "span", align: "center", justify: "center", boxSize: 8, flexShrink: 0, borderRadius: "full", bg: success.bg, color: success.fg, children: (0, jsx_runtime_1.jsx)(lucide_react_1.BadgeCheck, { size: 16, "aria-hidden": true }) }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: 1, minW: 0, role: "status", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", display: "block", fontSize: "sm", fontWeight: 700, lineHeight: 1.4, color: colors.header[900], noOfLines: 1, children: copy.applied(appliedCode) }), savedAmount !== undefined && savedAmount > 0 && ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", display: "block", fontSize: "xs", fontWeight: 600, lineHeight: 1.4, color: colors.semanticText.success, sx: { fontVariantNumeric: "tabular-nums" }, children: copy.saved((0, price_1.formatPrice)(savedAmount, { currency, locale })) }))] }), (0, jsx_runtime_1.jsx)(Button_1.default, { variant: "ghost", colorScheme: "gray", size: "sm", onClick: onRemove, "aria-label": `${copy.remove} coupon ${appliedCode}`, children: copy.remove })] }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 3, "data-testid": testId, "data-status": status, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { as: "button", type: "button", "aria-expanded": open, "aria-controls": panelId, disabled: applying || status === "error", onClick: () => setOpen(!open), display: "flex", alignItems: "center", gap: 3, w: "100%", minH: "3rem", px: 4, borderRadius: "1rem", bg: colors.background[100], color: colors.header[900], textAlign: "left", transition: (0, motion_1.transitionFor)(["background-color"]), _hover: { bg: colors.background[200] }, sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors), ...(0, motion_2.reducedMotionSx)() }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Ticket, { size: 18, "aria-hidden": true }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", flex: 1, fontSize: "sm", fontWeight: 600, children: copy.prompt }), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-flex", "aria-hidden": true, transform: open ? "rotate(180deg)" : undefined, transition: (0, motion_1.transitionFor)(["transform"]), sx: (0, motion_2.reducedMotionSx)({ transform: open ? "rotate(180deg)" : "none" }), children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16 }) })] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { id: panelId, hidden: !open, display: open ? "block" : "none", onKeyDown: onKeyDown, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { gap: 2, align: "flex-start", children: [(0, jsx_runtime_1.jsx)(react_2.Box, { flex: 1, minW: 0, children: (0, jsx_runtime_1.jsx)(TextInput_1.default, { size: "lg", variant: "filled", "aria-label": copy.inputLabel, placeholder: copy.placeholder, value: text, onChange: (event) => setText(normalise(event.target.value)), error: status === "error", errorMessage: status === "error" ? error : undefined, isDisabled: applying, autoComplete: "off", autoCapitalize: "characters", spellCheck: false }) }), (0, jsx_runtime_1.jsx)(Button_1.default, { variant: "outline", colorScheme: "gray", size: "lg", isLoading: applying, isDisabled: !normalise(text), onClick: () => submit(text), children: copy.apply })] }), suggestions && suggestions.length > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Box, { mt: 4, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { as: "p", fontSize: "xs", fontWeight: 600, color: colors.textMuted, mb: 2, children: copy.suggestionsTitle }), (0, jsx_runtime_1.jsx)(react_2.Flex, { as: "ul", direction: "column", gap: 2, m: 0, p: 0, listStyleType: "none", children: suggestions.map((s) => ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "li", children: (0, jsx_runtime_1.jsxs)(react_2.Box, { as: "button", type: "button", disabled: applying, "aria-label": `${copy.applySuggestion(s.code)}: ${s.title}`, onClick: () => {
+                                            setText(s.code);
+                                            submit(s.code);
+                                        }, display: "flex", alignItems: "center", gap: 3, w: "100%", p: 3, borderRadius: "0.75rem", bg: colors.background[100], textAlign: "left", transition: (0, motion_1.transitionFor)(["background-color"]), _hover: { bg: colors.background[200] }, _disabled: { cursor: "not-allowed", opacity: 0.6 }, sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors), ...(0, motion_2.reducedMotionSx)() }, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", flexShrink: 0, px: 2, py: 1, borderRadius: "0.5rem", bg: colors.background[200], fontSize: "xs", fontWeight: 700, letterSpacing: "0.04em", color: colors.header[900], children: s.code }), (0, jsx_runtime_1.jsxs)(react_2.Box, { as: "span", flex: 1, minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", display: "block", fontSize: "sm", fontWeight: 600, lineHeight: 1.4, color: colors.header[900], children: s.title }), s.detail && ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", display: "block", fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, children: s.detail }))] }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", "aria-hidden": true, fontSize: "sm", fontWeight: 600, color: colors.accentText, children: copy.apply })] }) }, s.code))) })] }))] }), (0, jsx_runtime_1.jsx)(react_2.VisuallyHidden, { role: "status", children: applying ? `${copy.apply}…` : "" })] }));
+};
+exports.default = CouponField;

package/dist/Components/CouponField/CouponFieldProps.d.ts

@@ -0,0 +1,49 @@
+import type { PriceFormat } from "../Commerce/commerceTypes";
+/** Where the coupon is in its lifecycle; the parent owns it because validation is a server call. */
+export type CouponStatus = "idle" | "applying" | "applied" | "error";
+/** A coupon the shopper can apply with one tap. */
+export interface CouponSuggestion {
+    code: string;
+    title: string;
+    /** Terms line, e.g. "Min. order ₹999". */
+    detail?: string;
+}
+/** Visible copy; override every string for another language. */
+export interface CouponFieldLabels {
+    prompt: string;
+    inputLabel: string;
+    placeholder: string;
+    apply: string;
+    remove: string;
+    suggestionsTitle: string;
+    /** Status text once applied, given the code. */
+    applied: (code: string) => string;
+    /** Saving text once applied, given the formatted amount. */
+    saved: (amount: string) => string;
+    /** Accessible name of a suggestion, given its code. */
+    applySuggestion: (code: string) => string;
+}
+/** Controlled coupon entry: a collapsed "Have a coupon?" row that opens into a field, then settles into an applied chip. */
+export interface CouponFieldProps extends PriceFormat {
+    status?: CouponStatus;
+    /** The code shown in the applied state. */
+    appliedCode?: string;
+    /** Saving from the applied code; shown as "You saved ₹150". */
+    savedAmount?: number;
+    /** Message shown under the field while `status` is "error"; announced as an alert. */
+    error?: string;
+    /** Called with the upper-cased code from the button, Enter, or a suggestion; set `status` to "applying" while it resolves. */
+    onApply?: (code: string) => void;
+    onRemove?: () => void;
+    suggestions?: CouponSuggestion[];
+    /** Input text when controlled. */
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /** Open state of the collapsed row when controlled; the field is always open while applying or in error. */
+    expanded?: boolean;
+    defaultExpanded?: boolean;
+    onExpandedChange?: (expanded: boolean) => void;
+    labels?: Partial<CouponFieldLabels>;
+    "data-testid"?: string;
+}

package/dist/Components/CouponField/CouponFieldProps.js

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

package/dist/Components/DatePicker/DatePickerProps.d.ts

@@ -44,7 +44,7 @@ export type BaseDatePickerProps = {
     width?: string | number;
     /** Blocks today in the calendar and in typed input; the single picker preselects tomorrow instead. */
     disableToday?: boolean;
-    /** Control-scale height: xs 24 · sm 38 · md 40 · lg 48px (default `sm`, like TextInput); also scales the calendar/clock icon. */
+    /** Control-scale height: xs 32 · sm 38 · md 40 · lg 48px (default `sm`, like TextInput); also scales the calendar/clock icon. */
     size?: "xs" | "sm" | "md" | "lg";
 };
 /** Single-date variant, Date API (default) — `isRange` must be false or omitted; this is the discriminant the DatePickerProps union switches on. */

package/dist/Components/DatePicker/PickerPortal.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+export declare const usePickerPortal: (isOpen: boolean) => {
+    isMounted: boolean;
+    isPopoverOpen: boolean;
+};
+type PickerPortalProps = {
+    isMounted: boolean;
+    children: React.ReactNode;
+};
+export declare const PickerPortal: ({ isMounted, children }: PickerPortalProps) => import("react/jsx-runtime").JSX.Element | null;
+export default PickerPortal;

package/dist/Components/DatePicker/PickerPortal.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PickerPortal = exports.usePickerPortal = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const framer_motion_1 = require("framer-motion");
+// NOTE: mounts on first open, after any open Modal's aria-hidden pass, then opens a render later.
+const usePickerPortal = (isOpen) => {
+    const [hasMounted, setHasMounted] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        if (isOpen)
+            setHasMounted(true);
+    }, [isOpen]);
+    return { isMounted: isOpen || hasMounted, isPopoverOpen: isOpen && hasMounted };
+};
+exports.usePickerPortal = usePickerPortal;
+// NOTE: detaches from an ancestor Modal's variant tree, which otherwise pins a late-mounted popover hidden.
+const ROOT_MOTION_CONTEXT = {};
+const BodyPortal = ({ children }) => {
+    const bodyRef = (0, react_1.useRef)(document.body);
+    return ((0, jsx_runtime_1.jsx)(react_2.Portal, { containerRef: bodyRef, children: (0, jsx_runtime_1.jsx)(framer_motion_1.MotionContext.Provider, { value: ROOT_MOTION_CONTEXT, children: children }) }));
+};
+const PickerPortal = ({ isMounted, children }) => isMounted ? (0, jsx_runtime_1.jsx)(BodyPortal, { children: children }) : null;
+exports.PickerPortal = PickerPortal;
+exports.default = exports.PickerPortal;

package/dist/Components/DatePicker/RangeDatePicker.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
 import { RangeDatePickerProps } from "./DatePickerProps";
-/** Two-endpoint range field; `onChange` fires only via Apply/Escape, never on a bare day click or on outside-click close. */
+/** Two-endpoint range field; `onChange` fires on Apply, outside click or Escape in the calendar — never on a bare day click. */
 export declare const RangeDatePicker: React.FC<RangeDatePickerProps>;
 export default RangeDatePicker;