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

package/dist/Components/OrderSummary/OrderSummary.js

@@ -0,0 +1,63 @@
+"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 tone_1 = require("../../Theme/tokens/builders/tone");
+const price_1 = require("../../Utils/price");
+const ProgressBar_1 = __importDefault(require("../ProgressBar/ProgressBar"));
+const Skeletons_1 = __importDefault(require("../Skeletons/Skeletons"));
+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 = () => ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 4, p: 5, borderRadius: "1.5rem", "aria-busy": "true", "data-testid": "order-summary-skeleton", children: [(0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: 4, width: "40%" }), [0, 1, 2].map((row) => ((0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "space-between", children: [(0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: 3, width: "30%" }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: 3, width: "20%" })] }, row))), (0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "space-between", pt: 2, children: [(0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: 5, width: "25%" }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { 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 } = (0, useCustomTheme_1.useCustomTheme)();
+    const headingId = (0, react_1.useId)();
+    const copy = { ...DEFAULT_LABELS, ...labels };
+    const fmt = { currency, locale };
+    const panel = colors.background[100];
+    if (isLoading)
+        return (0, jsx_runtime_1.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}${(0, price_1.formatPrice)(Math.abs(line.amount), fmt)}`, isFree: false, isDeduction: true };
+        return { text: (0, price_1.formatPrice)(line.amount, fmt), isFree: false, isDeduction: false };
+    };
+    const success = (0, tone_1.resolveSoftTone)(colors, (0, tone_1.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((0, price_1.formatPrice)(remaining, fmt));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 3, "data-testid": testId, children: [progress && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 2, px: 1, "data-testid": "order-summary-progress", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { as: "p", fontSize: "sm", fontWeight: 600, lineHeight: 1.4, color: unlocked ? colors.semanticText.success : colors.header[900], sx: tabular, children: progressText }), (0, jsx_runtime_1.jsx)(ProgressBar_1.default, { size: "xs", value: percent, colorScheme: unlocked ? "green" : "primary", borderRadius: "full", "aria-label": copy.progressLabel, "aria-valuetext": progressText })] })), (0, jsx_runtime_1.jsxs)(react_2.Box, { as: "section", "aria-labelledby": hideTitle ? undefined : headingId, "aria-label": hideTitle ? copy.title : undefined, bg: panel, borderRadius: "1.5rem", p: 5, children: [!hideTitle && ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "h2", id: headingId, fontSize: "md", fontWeight: 700, lineHeight: 1.4, color: colors.header[900], mb: 4, children: copy.title })), (0, jsx_runtime_1.jsx)(react_2.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 ((0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "space-between", align: "flex-start", gap: 4, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { as: "dt", minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", fontSize: "sm", lineHeight: 1.45, color: line.tone === "muted" ? colors.textMuted : colors.text[800], children: line.label }), line.hint && ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", display: "block", fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, children: line.hint }))] }), (0, jsx_runtime_1.jsx)(react_2.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));
+                        }) }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "space-between", align: "baseline", gap: 4, mt: 6, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", fontSize: "md", fontWeight: 700, color: colors.header[900], children: copy.total }), (0, jsx_runtime_1.jsxs)(react_2.Box, { textAlign: "right", children: [(0, jsx_runtime_1.jsx)(react_2.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: (0, price_1.formatPrice)(total, fmt) }), taxNote && ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", display: "block", fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, children: taxNote }))] })] }), savings !== undefined && savings > 0 && ((0, jsx_runtime_1.jsxs)(react_2.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: [(0, jsx_runtime_1.jsx)(lucide_react_1.PartyPopper, { size: 16, "aria-hidden": true }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", fontSize: "sm", fontWeight: 600, lineHeight: 1.4, sx: tabular, children: copy.savings((0, price_1.formatPrice)(savings, fmt)) })] }))] })] }));
+};
+exports.default = OrderSummary;

package/dist/Components/OrderSummary/OrderSummaryProps.d.ts

@@ -0,0 +1,53 @@
+import type { PriceFormat } from "../Commerce/commerceTypes";
+/** How a line is inked: default is body ink, success for discounts, muted for secondary lines. */
+export type OrderSummaryTone = "default" | "success" | "muted";
+/** One row of the breakdown. Negative numbers render as a deduction ("−₹500") in the success tone. */
+export interface OrderSummaryLine {
+    /** Stable key; falls back to the label. */
+    id?: string;
+    label: string;
+    /** A number is formatted as a price; a string is shown as is, e.g. "Calculated at checkout". */
+    amount: number | string;
+    tone?: OrderSummaryTone;
+    /** Muted line under the label, e.g. "Applied: WELCOME10". */
+    hint?: string;
+    /** Shows "FREE" in the success tone when `amount` is 0. */
+    freeWhenZero?: boolean;
+}
+/** Progress toward a free-delivery threshold, in the same currency as the lines. */
+export interface FreeShippingProgress {
+    threshold: number;
+    /** Eligible subtotal so far; at or above `threshold` the line reads as unlocked. */
+    current: number;
+}
+/** Visible copy; override every string for another language. */
+export interface OrderSummaryLabels {
+    title: string;
+    total: string;
+    /** Shown instead of a number when `amount` is 0 on a `freeWhenZero` line. */
+    free: string;
+    /** Banner text, given the formatted saving. */
+    savings: (amount: string) => string;
+    /** Progress text while below the threshold, given the formatted shortfall. */
+    addMore: (amount: string) => string;
+    /** Progress text once the threshold is met. */
+    unlocked: string;
+    /** Accessible name of the progress bar. */
+    progressLabel: string;
+}
+/** Price breakdown for the bag and checkout: lines, a large tabular total, optional savings banner and free-delivery progress. Flows in the page, so it is sticky-friendly. */
+export interface OrderSummaryProps extends PriceFormat {
+    lines: OrderSummaryLine[];
+    total: number;
+    /** Total saved on the order; the banner is hidden at 0 or when omitted. */
+    savings?: number;
+    /** Muted line under the total, e.g. "Inclusive of all taxes". */
+    taxNote?: string;
+    freeShippingProgress?: FreeShippingProgress;
+    /** Hides the "Price details" heading when the page already has one. */
+    hideTitle?: boolean;
+    /** Skeleton of the same shape; the total and lines are not rendered. */
+    isLoading?: boolean;
+    labels?: Partial<OrderSummaryLabels>;
+    "data-testid"?: string;
+}

package/dist/Components/OrderSummary/OrderSummaryProps.js

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

package/dist/Components/PaymentOption/PaymentOption.d.ts

@@ -0,0 +1,4 @@
+import type { PaymentOptionProps } from "./PaymentOptionProps";
+/** Tonal payment-method row: icon well, title, subtitle, offer tag, and an area that opens when it is chosen. */
+declare const PaymentOption: ({ value, title, subtitle, icon, offer, selected, onSelect, disabled, children, "data-testid": testId, }: PaymentOptionProps) => import("react/jsx-runtime").JSX.Element;
+export default PaymentOption;

package/dist/Components/PaymentOption/PaymentOption.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 react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const selectable_1 = require("../CheckoutKit/selectable");
+const Tag_1 = __importDefault(require("../Tag/Tag"));
+/** 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 } = (0, useCustomTheme_1.useCustomTheme)();
+    const uid = (0, react_1.useId)();
+    const titleId = `${uid}-title`;
+    const subtitleId = `${uid}-subtitle`;
+    const regionId = `${uid}-region`;
+    const { isSelected, interactive, inGroup, ringed, props } = (0, selectable_1.useSelectable)({ value, selected, disabled, onSelect });
+    const selectable = inGroup || !!onSelect;
+    const expanded = isSelected && !!children;
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", "data-testid": testId, "data-selected": isSelected || undefined, ...(0, selectable_1.selectableSurface)(colors, { selected: isSelected && selectable, disabled, interactive, ringed }), children: [(0, jsx_runtime_1.jsxs)(react_2.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 && (0, jsx_runtime_1.jsx)(selectable_1.RadioIndicator, { selected: isSelected }), icon && ((0, jsx_runtime_1.jsx)(react_2.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 })), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: 1, minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", id: titleId, display: "block", fontSize: "sm", fontWeight: 600, lineHeight: 1.4, color: colors.header[900], children: title }), subtitle && ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", id: subtitleId, display: "block", fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, children: subtitle }))] }), offer && (0, jsx_runtime_1.jsx)(Tag_1.default, { label: offer, size: "xs", tone: "success" })] }), expanded && ((0, jsx_runtime_1.jsx)(react_2.Box, { id: regionId, role: "group", "aria-labelledby": titleId, px: 4, pb: 4, pl: selectable ? "3.25rem" : 4, children: children }))] }));
+};
+exports.default = PaymentOption;

package/dist/Components/PaymentOption/PaymentOptionGroup.d.ts

@@ -0,0 +1,4 @@
+import type { PaymentOptionGroupProps } from "./PaymentOptionProps";
+/** Radiogroup wrapper for `PaymentOption`s. */
+declare const PaymentOptionGroup: (props: PaymentOptionGroupProps) => import("react/jsx-runtime").JSX.Element;
+export default PaymentOptionGroup;

package/dist/Components/PaymentOption/PaymentOptionGroup.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const selectable_1 = require("../CheckoutKit/selectable");
+/** Radiogroup wrapper for `PaymentOption`s. */
+const PaymentOptionGroup = (props) => (0, jsx_runtime_1.jsx)(selectable_1.SelectableGroup, { ...props });
+exports.default = PaymentOptionGroup;

package/dist/Components/PaymentOption/PaymentOptionProps.d.ts

@@ -0,0 +1,32 @@
+import type { ReactNode } from "react";
+/** A payment-method row. Inside a `PaymentOptionGroup` it is a radio keyed by `value`; alone, `onSelect` makes it a toggle button. */
+export interface PaymentOptionProps {
+    /** Identifies the option inside a `PaymentOptionGroup`; required there. */
+    value?: string;
+    title: string;
+    /** Muted line under the title, e.g. "Pay on delivery · ₹50 handling fee". */
+    subtitle?: string;
+    /** Slot for a method icon or logo, shown in a 40px well. */
+    icon?: ReactNode;
+    /** Short offer tag, e.g. "5% cashback". */
+    offer?: string;
+    /** Standalone selection state; ignored inside a group, where the group's value decides. */
+    selected?: boolean;
+    onSelect?: () => void;
+    /** Dims the row and drops it from the tab order, e.g. COD above the order limit; say why in `subtitle`. */
+    disabled?: boolean;
+    /** Revealed under the row only while it is selected, e.g. a UPI id input. Interactive content here sits outside the radio. */
+    children?: ReactNode;
+    "data-testid"?: string;
+}
+/** Radiogroup of `PaymentOption`s with a roving tab stop; arrow keys move focus and selection together. */
+export interface PaymentOptionGroupProps {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /** Direct `PaymentOption` children; wrapping them in another component hides their `value` from the roving tab stop. */
+    children: ReactNode;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "data-testid"?: string;
+}

package/dist/Components/PaymentOption/PaymentOptionProps.js

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

package/dist/Components/PinInput/PinInputProps.d.ts

@@ -2,7 +2,7 @@ import { PinInputProps } from "@chakra-ui/react";
 /** The only pin/OTP component exported from the package. */
 export type ChakraPinInputProps = Pick<PinInputProps, "otp" | "mask" | "defaultValue" | "placeholder" | "manageFocus" | "errorBorderColor" | "focusBorderColor" | "onChange" | "onComplete"> & {
     type?: "alphanumeric" | "number";
-    /** Square cell size, aligned to CONTROL_SIZES heights (xs 24 · sm 38 · md 40 · lg 48). Defaults to "sm". */
+    /** Square cell size, aligned to CONTROL_SIZES heights (xs 32 · sm 38 · md 40 · lg 48). Defaults to "sm". */
     size?: "xs" | "sm" | "md" | "lg";
     variant?: "flushed" | "outline" | "filled" | "unstyled";
     color?: "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "whiteAlpha" | "blackAlpha" | "primary";

package/dist/Components/PincodeChecker/PincodeChecker.d.ts

@@ -0,0 +1,4 @@
+import type { PincodeCheckerProps } from "./PincodeCheckerProps";
+/** Pincode field that answers with a delivery date, COD availability and a shipping note, held in place so the panel never jumps. */
+declare const PincodeChecker: ({ value, defaultValue, onValueChange, status: statusProp, result: resultProp, onCheck, autoCheck, checkOnMount, labels, "data-testid": testId, }: PincodeCheckerProps) => import("react/jsx-runtime").JSX.Element;
+export default PincodeChecker;

package/dist/Components/PincodeChecker/PincodeChecker.js

@@ -0,0 +1,175 @@
+"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 react_3 = require("@emotion/react");
+const lucide_react_1 = require("lucide-react");
+const Button_1 = __importDefault(require("../Button/Button"));
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const fieldStyles_1 = require("../Common/fieldStyles");
+const placeholderInk_1 = require("../../Theme/tokens/builders/placeholderInk");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const motion_2 = require("../../Theme/chakra/motion");
+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 = (0, react_3.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 } = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsx)(react_2.Box, { "aria-hidden": true, w: w, h: h, borderRadius: "md", bg: colors.background[200], animation: `${pulse} 1.2s ease-in-out infinite`, sx: (0, motion_2.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 } = (0, useCustomTheme_1.useCustomTheme)();
+    const copy = { ...DEFAULT_LABELS, ...labels };
+    const baseId = (0, react_1.useId)();
+    const inputId = `${baseId}-pin`;
+    const hintId = `${baseId}-hint`;
+    const errorId = `${baseId}-error`;
+    const [innerPin, setInnerPin] = (0, react_1.useState)(digitsOnly(defaultValue));
+    const [innerStatus, setInnerStatus] = (0, react_1.useState)("idle");
+    const [innerResult, setInnerResult] = (0, react_1.useState)();
+    const [editing, setEditing] = (0, react_1.useState)(false);
+    const [localInvalid, setLocalInvalid] = (0, react_1.useState)(false);
+    const inputRef = (0, react_1.useRef)(null);
+    const changeRef = (0, react_1.useRef)(null);
+    const latest = (0, react_1.useRef)(0);
+    const mounted = (0, react_1.useRef)(true);
+    const focusInput = (0, react_1.useRef)(false);
+    const focusChange = (0, react_1.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;
+    (0, react_1.useEffect)(() => {
+        mounted.current = true;
+        return () => {
+            mounted.current = false;
+        };
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (status === "serviceable" || status === "unserviceable")
+            setEditing(false);
+    }, [status]);
+    (0, react_1.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 = (0, react_1.useCallback)((answer) => {
+        if (document.activeElement === inputRef.current)
+            focusChange.current = true;
+        setInnerResult(answer);
+        setInnerStatus(answer.ok ? "serviceable" : "unserviceable");
+        setEditing(false);
+    }, []);
+    const run = (0, react_1.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]);
+    (0, react_1.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 = ((0, jsx_runtime_1.jsxs)(react_2.Box, { as: "form", noValidate: true, onSubmit: onSubmit, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { gap: 2, align: "stretch", children: [(0, jsx_runtime_1.jsx)(react_2.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: fieldStyles_1.FIELD_RADIUS, boxShadow: fieldRing, transition: fieldStyles_1.FIELD_TRANSITION, _placeholder: { color: (0, placeholderInk_1.placeholderInk)(colors), opacity: 1 }, _hover: invalid ? undefined : { borderColor: (0, fieldStyles_1.fieldHoverBorder)(colors) }, _focusVisible: {
+                            borderColor: invalid ? "transparent" : colors.primary[500],
+                            ...(0, focusRing_styles_1.fieldFocusVisible)(colors),
+                            boxShadow: invalid ? `${fieldRing}, ${(0, focusRing_styles_1.fieldFocusVisible)(colors).boxShadow}` : (0, focusRing_styles_1.fieldFocusVisible)(colors).boxShadow,
+                        }, sx: { ...(0, fieldStyles_1.fieldTextStyles)(colors), ...tabular, letterSpacing: "0.08em", ...(0, motion_2.reducedMotionSx)() } }), (0, jsx_runtime_1.jsx)(Button_1.default, { type: "submit", size: "lg", label: copy.check })] }), invalid ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { id: errorId, mt: 2, gap: 1.5, align: "center", fontSize: "sm", fontWeight: 500, color: colors.semanticText.error, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CircleAlert, { size: 16, "aria-hidden": true, style: { flexShrink: 0 } }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", children: (status === "invalid" && (result === null || result === void 0 ? void 0 : result.message)) || copy.invalid })] })) : ((0, jsx_runtime_1.jsx)(react_2.Text, { id: hintId, mt: 2, fontSize: "xs", color: colors.textMuted, children: copy.hint }))] }));
+    const changeButton = ((0, jsx_runtime_1.jsx)(Button_1.default, { ref: changeRef, variant: "link", size: "sm", h: "2.75rem", flexShrink: 0, onClick: reopen, label: copy.change }));
+    const savedLine = !showField && outcome === "serviceable" ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", gap: 3, children: [(0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", color: colors.textMuted, sx: tabular, children: [copy.deliverTo, " ", (0, jsx_runtime_1.jsxs)(react_2.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 ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 2, children: [result.deliveryBy && ((0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "lg", lineHeight: 1.3, sx: tabular, children: [(0, jsx_runtime_1.jsxs)(react_2.Text, { as: "span", fontSize: "sm", color: colors.textMuted, children: [copy.deliveryBy, " "] }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", fontWeight: 700, color: colors.header[900], children: result.deliveryBy })] })), result.cod !== undefined && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, fontSize: "sm", fontWeight: 500, color: colors.header[900], children: [result.cod ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", color: colors.semanticText.success, display: "inline-flex", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 16, "aria-hidden": true }) })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", color: colors.semanticText.warning, display: "inline-flex", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Info, { size: 16, "aria-hidden": true }) })), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", children: result.cod ? copy.codAvailable : copy.codUnavailable })] })), result.shippingNote && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", color: colors.textMuted, children: result.shippingNote }))] })) : outcome === "unserviceable" ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "flex-start", justify: "space-between", gap: 3, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "md", fontWeight: 600, color: colors.header[900], children: (result === null || result === void 0 ? void 0 : result.message) || copy.unserviceable }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: colors.textMuted, children: copy.unserviceableHint })] }), !showField && changeButton] })) : null;
+    const skeleton = checking && !outcome && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 3, "aria-hidden": true, children: [(0, jsx_runtime_1.jsx)(SkeletonBlock, { w: "55%", h: "0.875rem" }), (0, jsx_runtime_1.jsx)(SkeletonBlock, { w: "40%", h: "1.5rem" }), (0, jsx_runtime_1.jsx)(SkeletonBlock, { w: "70%", h: "0.875rem" })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { "aria-busy": checking || undefined, bg: colors.background[100], borderRadius: "xl", p: 4, "data-testid": testId, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { as: "h2", fontSize: "md", fontWeight: 600, color: colors.header[900], mb: 3, children: copy.heading }), showField && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.VisuallyHidden, { as: "label", htmlFor: inputId, children: copy.inputLabel }), field] })), (0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 3, mt: showField && (outcome || skeleton) ? 4 : 0, "aria-live": "polite", opacity: checking && outcome ? 0.6 : 1, transition: (0, motion_1.transitionFor)(["opacity"]), sx: (0, motion_2.reducedMotionSx)(), children: [checking && (0, jsx_runtime_1.jsx)(react_2.VisuallyHidden, { children: copy.checking }), savedLine, details, skeleton] })] }));
+};
+exports.default = PincodeChecker;

package/dist/Components/PincodeChecker/PincodeCheckerProps.d.ts

@@ -0,0 +1,57 @@
+/** Where the check is: nothing entered, request in flight, a serviceable or unserviceable answer, or a malformed pincode. */
+export type PincodeStatus = "idle" | "checking" | "serviceable" | "unserviceable" | "invalid";
+/** The answer for one pincode; structurally the same as the demo fixtures' `PincodeResult`. */
+export interface PincodeResult {
+    /** False means the pincode is not serviceable. */
+    ok: boolean;
+    city?: string;
+    /** Ready-to-print delivery date such as "Thu, 8 Oct"; never a range of days. */
+    deliveryBy?: string;
+    /** Cash on delivery available at this pincode. */
+    cod?: boolean;
+    /** Fee rules, e.g. "Free above ₹999 · ₹49 handling with COD". */
+    shippingNote?: string;
+    /** Replaces the default wording for an unserviceable or invalid pincode. */
+    message?: string;
+}
+/** Every string the checker renders; override all of them for another language. */
+export interface PincodeCheckerLabels {
+    heading: string;
+    inputLabel: string;
+    placeholder: string;
+    check: string;
+    change: string;
+    /** Visible helper under the idle field. */
+    hint: string;
+    invalid: string;
+    unserviceable: string;
+    checking: string;
+    /** Prefix before the date, e.g. "Delivery by". */
+    deliveryBy: string;
+    codAvailable: string;
+    codUnavailable: string;
+    /** Prefix in the saved line, e.g. "Deliver to". */
+    deliverTo: string;
+    /** Helper under the unserviceable message. */
+    unserviceableHint: string;
+}
+/** Six-digit pincode field that answers with a delivery date, COD availability and a shipping note. */
+export interface PincodeCheckerProps {
+    /** Controlled pincode digits; pair with `onValueChange`. */
+    value?: string;
+    /** Starting pincode when uncontrolled, e.g. the shopper's last one. */
+    defaultValue?: string;
+    onValueChange?: (pincode: string) => void;
+    /** Controlled status; omit it and the checker derives the status from what `onCheck` resolves. */
+    status?: PincodeStatus;
+    /** Controlled result matching `status`; omit it and the checker keeps the last `onCheck` result. */
+    result?: PincodeResult;
+    /** Runs when a valid pincode is submitted (Check, Enter, or the sixth digit with `autoCheck`). */
+    onCheck?: (pincode: string) => Promise<PincodeResult> | PincodeResult | void;
+    /** Checks as soon as the sixth digit is typed; the Check button always works. */
+    autoCheck?: boolean;
+    /** Runs `onCheck` once on mount when the initial pincode is valid, for a saved pincode. */
+    checkOnMount?: boolean;
+    labels?: Partial<PincodeCheckerLabels>;
+    "data-testid"?: string;
+}

package/dist/Components/PincodeChecker/PincodeCheckerProps.js

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

package/dist/Components/PriceBlock/PriceBlock.d.ts

@@ -0,0 +1,4 @@
+import type { PriceBlockProps } from "./PriceBlockProps";
+/** Selling price, struck MRP, discount, savings, tax note and unit price in one tabular, screen-reader-friendly block. */
+declare const PriceBlock: ({ price, mrp, priceRange, size, align, showSavings, taxNote, unitPrice, currency, locale, labels, "data-testid": testId, }: PriceBlockProps) => import("react/jsx-runtime").JSX.Element;
+export default PriceBlock;

package/dist/Components/PriceBlock/PriceBlock.js

@@ -0,0 +1,41 @@
+"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 price_1 = require("../../Utils/price");
+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 : `${(0, price_1.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 } = (0, useCustomTheme_1.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 ? `${(0, price_1.formatPrice)(priceRange.min, fmt)} – ${(0, price_1.formatPrice)(priceRange.max, fmt)}` : selling === undefined ? null : (0, price_1.formatPrice)(selling, fmt);
+    const percent = !priceRange && selling !== undefined ? (0, price_1.discountPercent)(selling, mrp) : 0;
+    const saved = !priceRange && selling !== undefined ? (0, price_1.discountAmount)(selling, mrp) : 0;
+    const hasDiscount = percent > 0;
+    const muted = { fontSize: scale.note, lineHeight: 1.4, color: colors.textMuted, sx: tabular };
+    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", align: a.items, gap: 0.5, textAlign: a.text, "data-testid": testId, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "baseline", justify: a.justify, columnGap: 2, rowGap: 0, wrap: "wrap", children: [priceText !== null && ((0, jsx_runtime_1.jsxs)(react_1.Text, { as: "span", fontSize: scale.price, lineHeight: scale.priceLine, fontWeight: 700, letterSpacing: "-0.02em", color: colors.header[900], sx: tabular, children: [(0, jsx_runtime_1.jsxs)(react_1.VisuallyHidden, { children: [copy.price, " "] }), priceText] })), hasDiscount && mrp !== undefined && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { as: "del", fontSize: scale.secondary, lineHeight: scale.secondaryLine, color: colors.textMuted, textDecoration: "line-through", sx: tabular, children: [(0, jsx_runtime_1.jsxs)(react_1.VisuallyHidden, { children: [copy.originalPrice, " "] }), (0, price_1.formatPrice)(mrp, fmt)] }), (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: scale.secondary, lineHeight: scale.secondaryLine, fontWeight: 600, color: colors.semanticText.success, sx: tabular, children: copy.off(percent) })] }))] }), showSavings && hasDiscount && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: scale.note, lineHeight: 1.4, fontWeight: 600, color: colors.semanticText.success, sx: tabular, children: copy.save((0, price_1.formatPrice)(saved, fmt)) })), taxNote && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", ...muted, children: taxNote })), unitPrice != null && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", ...muted, children: unitText(unitPrice, fmt) }))] }));
+};
+exports.default = PriceBlock;

package/dist/Components/PriceBlock/PriceBlockProps.d.ts

@@ -0,0 +1,39 @@
+import type { PriceFormat } from "../Commerce/commerceTypes";
+import type { UnitPrice } from "../../Utils/price";
+/** Price typography scale: sm for cards, md for rows and sticky bars, lg for the product page. */
+export type PriceBlockSize = "sm" | "md" | "lg";
+/** Cross-axis alignment of the price lines inside the block. */
+export type PriceBlockAlign = "start" | "center" | "end";
+/** Visually-hidden and visible copy; override every string for another language. */
+export interface PriceBlockLabels {
+    /** Screen-reader prefix before the selling price. */
+    price: string;
+    /** Screen-reader prefix inside the struck MRP. */
+    originalPrice: string;
+    /** Visible discount text, given the whole-number percentage. */
+    off: (percent: number) => string;
+    /** Visible savings text, given the already-formatted amount. */
+    save: (amount: string) => string;
+}
+/** Selling price with struck MRP, discount, tax note and unit price; every figure comes from `Utils/price` helpers. */
+export interface PriceBlockProps extends PriceFormat {
+    /** Selling price; ignored when `priceRange` is set. */
+    price?: number;
+    /** Original list price; the strike and discount only render when it is above `price`. */
+    mrp?: number;
+    /** Shows "min – max" instead of a single price, e.g. for a product whose variants differ; hides the MRP and discount. */
+    priceRange?: {
+        min: number;
+        max: number;
+    };
+    size?: PriceBlockSize;
+    align?: PriceBlockAlign;
+    /** Adds a "You save ₹1,500" line under the price; needs `mrp`. */
+    showSavings?: boolean;
+    /** Muted line under the price, e.g. "Inclusive of all taxes". */
+    taxNote?: string;
+    /** A `unitPrice()` result (null renders nothing), or a ready-made string; rendered as "₹169.80 / 100 g". */
+    unitPrice?: UnitPrice | string | null;
+    labels?: Partial<PriceBlockLabels>;
+    "data-testid"?: string;
+}

package/dist/Components/PriceBlock/PriceBlockProps.js

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

package/dist/Components/ProductBadges/ProductBadges.d.ts

@@ -0,0 +1,4 @@
+import type { ProductBadgesProps } from "./ProductBadgesProps";
+/** Stack of corner badges (sale, new, low stock…) built from `ProductBadge[]`; filled chips resolve ink per brand and mode. */
+declare const ProductBadges: ({ badges, max, size, variant, orientation, "data-testid": testId, }: ProductBadgesProps) => import("react/jsx-runtime").JSX.Element | null;
+export default ProductBadges;