pixelize-design-library 2.4.2 → 3.0.0

package/dist/Components/PinInput/PinInput.js

@@ -1,18 +1,35 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = PinInputs;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const FormLabel_1 = require("../Common/FormLabel");
-function PinInputs({ otp, mask, defaultValue, placeholder, manageFocus, errorBorderColor, focusBorderColor, onChange, onComplete, type, color = "primary", variant, pins = 3, label, id, isRequired, isInformation, informationMessage, }) {
+const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
+const pinInputCellSize_1 = require("./pinInputCellSize");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const FieldMessage_1 = __importDefault(require("../Common/FieldMessage"));
+const useFieldIds_1 = require("../Common/useFieldIds");
+/** The real, published OTP input (exported as `PinInput` from index.ts) — Chakra-native boxes, paste support, `type: "alphanumeric" | "number"`. */
+function PinInputs({ otp, mask, defaultValue, placeholder, manageFocus, errorBorderColor, focusBorderColor, onChange, onComplete, type, color = "primary", variant, pins = 3, label, id, isRequired, isInformation, informationMessage, size = controlSizes_1.DEFAULT_CONTROL_SIZE, error, errorMessage, helperText, isDisabled, }) {
+    var _a;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: id, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), (0, jsx_runtime_1.jsx)(react_1.HStack, { children: (0, jsx_runtime_1.jsx)(react_1.PinInput, { otp: otp, mask: mask, defaultValue: defaultValue, placeholder: placeholder, manageFocus: manageFocus, errorBorderColor: errorBorderColor, focusBorderColor: focusBorderColor, onChange: onChange, onComplete: onComplete, type: type, colorScheme: color, variant: variant, children: Array.from({ length: pins }).map((_, index) => ((0, jsx_runtime_1.jsx)(react_1.PinInputField, { backgroundColor: theme.colors.background[100], 
-                        // [800], not [300]/[700]: WCAG 1.4.11 needs >=3.0 for a control boundary, measured
-                        // against the parent surface — up to `muted` (lightest). [700] fails there (2.41-2.72);
-                        // [800] clears all named surfaces with margin (3.44-3.90).
-                        borderColor: theme.colors.boxborder[500], _focus: {
-                            borderColor: theme.colors.primary[500],
-                            boxShadow: `0 0 0 0.063rem ${theme.colors.primary[500]}`,
-                        } }, index))) }) })] }));
+    const ids = (0, useFieldIds_1.useFieldIds)(id, { error, errorMessage, helperText });
+    const invalidCell = error
+        ? {
+            _invalid: {
+                borderColor: theme.colors.semanticText.error,
+                boxShadow: "none",
+                _focus: { borderColor: theme.colors.semanticText.error, ...(0, focusRing_styles_1.fieldFocusVisible)(theme.colors) },
+            },
+        }
+        : {};
+    const fieldName = (_a = label !== null && label !== void 0 ? label : id) !== null && _a !== void 0 ? _a : "One-time code";
+    // Square cells at the same heights every other field uses — Chakra's own PinInput size
+    // scale doesn't line up with the library's, so cells are sized directly.
+    const cell = (0, pinInputCellSize_1.pinInputCellSize)(size);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), (0, jsx_runtime_1.jsx)(react_1.HStack, { role: "group", "aria-label": fieldName, children: (0, jsx_runtime_1.jsx)(react_1.PinInput, { otp: otp, mask: mask, defaultValue: defaultValue, placeholder: placeholder, manageFocus: manageFocus, errorBorderColor: errorBorderColor, focusBorderColor: focusBorderColor, onChange: onChange, onComplete: onComplete, type: type, colorScheme: color, variant: variant, isInvalid: error, isDisabled: isDisabled, children: Array.from({ length: pins }).map((_, index) => ((0, jsx_runtime_1.jsx)(react_1.PinInputField, { "aria-label": `${fieldName}, digit ${index + 1} of ${pins}`, "aria-describedby": ids.describedBy, boxSize: cell.boxSize, fontSize: cell.fontSize, borderRadius: "lg", backgroundColor: theme.colors.background[100], borderColor: theme.colors.boxborder[500], _focus: { borderColor: theme.colors.primary[500], ...(0, focusRing_styles_1.fieldFocusVisible)(theme.colors) }, ...invalidCell }, index))) }) }), (0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
 }

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

@@ -1,12 +1,23 @@
 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 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";
     pins: number;
     label?: string;
+    /** Fallback accessible name (after `label`) for the group and digits; also the base of the message ids. */
     id?: string;
+    /** Marks every digit aria-invalid with the error border and shows `errorMessage` in place of `helperText`. */
+    error?: boolean;
+    /** Shown under the cells while `error` is true; each digit's aria-describedby points at it. */
+    errorMessage?: string;
+    /** Shown under the cells when there is no error; each digit's aria-describedby points at it. */
+    helperText?: string;
+    /** Disables every digit cell. */
+    isDisabled?: boolean;
     isRequired?: boolean;
     isInformation?: boolean;
     informationMessage?: string;

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

@@ -0,0 +1,7 @@
+import { type ControlSize } from "../../Theme/tokens/primitives/controlSizes";
+export type PinInputCellSize = {
+    boxSize: string;
+    fontSize: string;
+};
+/** Square OTP cell dimensions for a size, aligned to the shared CONTROL_SIZES heights. */
+export declare const pinInputCellSize: (size: ControlSize) => PinInputCellSize;

package/dist/Components/PinInput/pinInputCellSize.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pinInputCellSize = void 0;
+const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
+/** Square OTP cell dimensions for a size, aligned to the shared CONTROL_SIZES heights. */
+const pinInputCellSize = (size) => {
+    const spec = controlSizes_1.CONTROL_SIZES[size];
+    return { boxSize: spec.height, fontSize: spec.fontSize };
+};
+exports.pinInputCellSize = pinInputCellSize;

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 typography_1 = require("../../Theme/tokens/primitives/typography");
+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 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), ...typography_1.NUMERIC_TEXT, 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: typography_1.NUMERIC_TEXT, 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: typography_1.NUMERIC_TEXT, 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,70 @@
+/** 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;
+    /** Shown after the pincode in the saved line, e.g. "560001 · Bengaluru". */
+    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 (h2) above the field. */
+    heading: string;
+    /** Visually hidden label of the pincode input. */
+    inputLabel: string;
+    /** Placeholder of the empty pincode input. */
+    placeholder: string;
+    /** Text of the submit button. */
+    check: string;
+    /** Text of the link button that reopens the field after a serviceable result. */
+    change: string;
+    /** Visible helper under the idle field. */
+    hint: string;
+    /** Error under the field for a malformed pincode; `PincodeResult.message` replaces it when status is invalid. */
+    invalid: string;
+    /** Headline for an unserviceable pincode; `PincodeResult.message` replaces it. */
+    unserviceable: string;
+    /** Visually hidden announcement while a check is in flight. */
+    checking: string;
+    /** Prefix before the date, e.g. "Delivery by". */
+    deliveryBy: string;
+    /** Line shown when the result has `cod: true`. */
+    codAvailable: string;
+    /** Line shown when the result has `cod: false`; omitted when `cod` is undefined. */
+    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;
+    /** Fires on every edit with the digits-only value, capped at six digits. */
+    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;
+    /** Overrides for any label; unspecified strings keep the English defaults. */
+    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/PlanBadge/PlanBadge.d.ts

@@ -1,11 +1,4 @@
 import React from "react";
 import { PlanBadgeProps } from "./PlanBadgeProps";
-/**
- * The top-bar plan badge: resolves an org's plan state into a `PlanPill`, or
- * renders nothing when there is nothing to say (or nobody who can act on it).
- *
- * Use this when the app has the plan state to hand; drop to `PlanPill` directly
- * for a badge whose copy is decided elsewhere.
- */
 declare const PlanBadge: React.FC<PlanBadgeProps>;
 export default PlanBadge;

package/dist/Components/PlanBadge/PlanBadge.js

@@ -6,13 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const planBadge_1 = require("../../Utils/planBadge");
 const PlanPill_1 = __importDefault(require("../PlanPill/PlanPill"));
-/**
- * The top-bar plan badge: resolves an org's plan state into a `PlanPill`, or
- * renders nothing when there is nothing to say (or nobody who can act on it).
- *
- * Use this when the app has the plan state to hand; drop to `PlanPill` directly
- * for a badge whose copy is decided elsewhere.
- */
+// Top-bar plan badge — resolves an org's plan state into a PlanPill, or renders nothing.
 const PlanBadge = ({ input, maxLabelWidth, ariaLabel, onClick, }) => {
     const { visible, label, mobileLabel, subtitle, tone } = (0, planBadge_1.resolvePlanBadge)(input);
     if (!visible)

package/dist/Components/PlanBadge/PlanBadgeProps.d.ts

@@ -1,10 +1,12 @@
 import { PlanBadgeInput } from "../../Utils/planBadge";
+/** Props for the top-bar plan badge; see PlanBadgeInput for the state this resolves into a PlanPill. */
 export interface PlanBadgeProps {
     /** The org's plan state. Resolved into label, tone and chip text internally. */
     input: PlanBadgeInput;
     /** Truncate the label beyond this width. */
     maxLabelWidth?: string;
-    /** Accessible label (falls back to `label — status`). */
+    /** Replaces the name read from the visible label and status; it must contain that text, or voice control cannot match it. */
     ariaLabel?: string;
+    /** Passed straight through to the underlying PlanPill button — same always-interactive caveat applies. */
     onClick?: React.MouseEventHandler<HTMLButtonElement>;
 }

package/dist/Components/PlanPill/PlanPill.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
 import { PlanPillProps } from "./PlanPillProps";
+/** Gradient pill button with plan label, optional time-left chip and a tone-based icon; always renders a `<button>`. */
 declare const PlanPill: React.FC<PlanPillProps>;
 export default PlanPill;

package/dist/Components/PlanPill/PlanPill.js

@@ -5,12 +5,17 @@ const react_1 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const gradientInk_1 = require("../../Theme/tokens/builders/gradientInk");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const typography_1 = require("../../Theme/tokens/primitives/typography");
 const planPillGradient_1 = require("./planPillGradient");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const BASE_TRANSFORM_BOX_SHADOW_TRANSITION = (0, motion_1.transitionFor)(["transform", "box-shadow"], "base");
 const TONE_ICON = {
     normal: lucide_react_1.Sparkles,
     warning: lucide_react_1.Clock,
     danger: lucide_react_1.AlertCircle,
 };
+/** Gradient pill button with plan label, optional time-left chip and a tone-based icon; always renders a `<button>`. */
 const PlanPill = ({ label, mobileLabel, status, tone = "normal", icon, gradient, maxLabelWidth = "150px", ariaLabel, onClick, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const c = theme.colors;
@@ -23,17 +28,15 @@ const PlanPill = ({ label, mobileLabel, status, tone = "normal", icon, gradient,
     const ink = resolved.ink;
     const Icon = icon === undefined ? TONE_ICON[tone] : icon;
     const hasMobile = !!mobileLabel && mobileLabel !== label;
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { as: "button", type: "button", "aria-label": ariaLabel || (status ? `${label} — ${status}` : label), onClick: onClick, display: "inline-flex", alignItems: "center", gap: "7px", pl: "12px", pr: status ? "5px" : "12px", py: "3px", bgImage: (0, gradientInk_1.gradientCss)(resolved), color: ink, borderRadius: "full", whiteSpace: "nowrap", cursor: "pointer", transition: "transform 0.2s ease, box-shadow 0.2s ease", _hover: {
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { as: "button", type: "button", "aria-label": ariaLabel, onClick: onClick, display: "inline-flex", alignItems: "center", gap: "7px", pl: "12px", pr: status ? "5px" : "12px", py: "3px", bgImage: (0, gradientInk_1.gradientCss)(resolved), color: ink, borderRadius: "full", whiteSpace: "nowrap", cursor: "pointer", transition: BASE_TRANSFORM_BOX_SHADOW_TRANSITION, _hover: {
             transform: "translateY(-1px)",
             boxShadow: `0 6px 18px ${resolved.from}59`,
-        }, _focusVisible: {
-            outline: "none",
-            boxShadow: `0 0 0 3px ${resolved.from}55`,
         }, sx: {
+            ...(0, focusRing_styles_1.focusVisibleStyles)(c),
             "@media (prefers-reduced-motion: reduce)": {
                 transition: "none",
                 _hover: { transform: "none" },
             },
-        }, children: [Icon ? (0, jsx_runtime_1.jsx)(Icon, { size: 12, strokeWidth: 2.5, "aria-hidden": true }) : null, (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "12.5px", fontWeight: "600", lineHeight: "18px", overflow: "hidden", textOverflow: "ellipsis", maxW: maxLabelWidth, display: hasMobile ? { base: "none", md: "block" } : "block", children: label }), hasMobile ? ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "12.5px", fontWeight: "600", lineHeight: "18px", display: { base: "block", md: "none" }, children: mobileLabel })) : null, status ? ((0, jsx_runtime_1.jsx)(react_1.Flex, { as: "span", align: "center", px: "8px", borderRadius: "full", bg: (0, planPillGradient_1.chipFill)(resolved), border: "1px solid", borderColor: (0, planPillGradient_1.chipBorder)(resolved), fontSize: "11px", fontWeight: "700", lineHeight: "18px", sx: { fontVariantNumeric: "tabular-nums" }, children: status })) : null] }));
+        }, children: [Icon ? (0, jsx_runtime_1.jsx)(Icon, { size: 12, strokeWidth: 2.5, "aria-hidden": true }) : null, (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "xs-plus", fontWeight: "600", lineHeight: "18px", overflow: "hidden", textOverflow: "ellipsis", maxW: maxLabelWidth, display: hasMobile ? { base: "none", md: "block" } : "block", children: label }), hasMobile ? ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "xs-plus", fontWeight: "600", lineHeight: "18px", display: { base: "block", md: "none" }, children: mobileLabel })) : null, status ? ((0, jsx_runtime_1.jsx)(react_1.Flex, { as: "span", align: "center", px: "8px", borderRadius: "full", bg: (0, planPillGradient_1.chipFill)(resolved), border: "1px solid", borderColor: (0, planPillGradient_1.chipBorder)(resolved), fontSize: "xs-minus", fontWeight: "700", lineHeight: "18px", sx: typography_1.NUMERIC_TEXT, children: status })) : null] }));
 };
 exports.default = PlanPill;

package/dist/Components/PlanPill/PlanPillProps.d.ts

@@ -4,6 +4,7 @@ import { ElementType } from "react";
  * badge reads as healthy / expiring soon / expired before the text is read.
  */
 export type PlanPillTone = "normal" | "warning" | "danger";
+/** Presentational plan-state pill — label/status/gradient only, no resolution logic. For org plan data, use PlanBadge instead of hand-deriving tone/copy here. */
 export interface PlanPillProps {
     /** Primary label, e.g. the plan name or an upgrade prompt. */
     label: string;
@@ -11,6 +12,7 @@ export interface PlanPillProps {
     mobileLabel?: string;
     /** Remaining time, e.g. `3mo left`. Rendered as an inset chip; omitted when empty. */
     status?: string;
+    /** Plan urgency; picks the theme gradient and default icon. Defaults to `normal`. */
     tone?: PlanPillTone;
     /** Leading icon. Defaults to a tone-appropriate lucide icon. Pass null to hide. */
     icon?: ElementType | null;
@@ -21,7 +23,8 @@ export interface PlanPillProps {
     };
     /** Truncate the label beyond this width. */
     maxLabelWidth?: string;
-    /** Accessible label (falls back to `label — status`). */
+    /** Replaces the name read from the visible label and status; it must contain that text, or voice control cannot match it. */
     ariaLabel?: string;
+    /** Renders as a real <button> (hover-lift, pointer cursor, tabbable) even when omitted — there is no static/non-interactive mode. */
     onClick?: React.MouseEventHandler<HTMLButtonElement>;
 }

package/dist/Components/PlanPill/planPillGradient.d.ts

@@ -1,28 +1,12 @@
+import { inkSafeGradient, type Gradient } from "../../Theme/tokens/builders/gradientInk";
 import type { ColorScale } from "../../Theme/tokens/types";
-export type Gradient = {
-    from: string;
-    to: string;
-};
-export declare const STATUS_INK = "#ffffff";
-/**
- * Opt-in accent for consumers who want a fixed badge colour instead of the brand `gradient`.
- * One hue, like every brand gradient — a second hue reads as a status change, not a style.
- */
+export { inkSafeGradient };
+export type { Gradient };
+/** @deprecated Use `colors.white` from `useCustomTheme()` directly. */
+export declare const STATUS_INK: string;
 export declare const ACCENT_GRADIENT: Gradient;
-/**
- * Sinks both stops until WHITE ink clears AA, keeping each stop's hue. Any mid-tone gradient —
- * a brand `gradient` token, a status scale — otherwise flips `onGradient` to black ink, so the
- * same badge reads white-on-colour in one brand and black-on-pastel in the next.
- */
-export declare const inkSafeGradient: (gradient: Gradient) => Gradient;
-/** Status tones are semantic scales, not designed as label backdrops. */
 export declare const statusGradient: (scale: ColorScale) => Gradient;
 export declare const darkerStop: (g: Gradient) => string;
-/**
- * Solid inset chip in the pill's own hue. A translucent scrim was a guessed alpha that
- * composited into a muddy dark lozenge on every mid-tone gradient; a derived rung reads as
- * one step down from the pill in every brand and both modes.
- */
 export declare const chipFill: (g: Gradient) => string;
 /** The pill's lighter stop — guaranteed lighter than `chipFill`, so it draws the inset edge. */
 export declare const chipBorder: (g: Gradient) => string;

package/dist/Components/PlanPill/planPillGradient.js

@@ -1,35 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.chipBorder = exports.chipFill = exports.darkerStop = exports.statusGradient = exports.inkSafeGradient = exports.ACCENT_GRADIENT = exports.STATUS_INK = void 0;
+exports.chipBorder = exports.chipFill = exports.darkerStop = exports.statusGradient = exports.ACCENT_GRADIENT = exports.STATUS_INK = exports.inkSafeGradient = void 0;
 const statusTone_1 = require("../../Theme/tokens/builders/statusTone");
 const color_1 = require("../../Theme/tokens/builders/color");
-exports.STATUS_INK = "#ffffff";
-/**
- * Opt-in accent for consumers who want a fixed badge colour instead of the brand `gradient`.
- * One hue, like every brand gradient — a second hue reads as a status change, not a style.
- */
+const neutrals_1 = require("../../Theme/tokens/brands/neutrals");
+const gradientInk_1 = require("../../Theme/tokens/builders/gradientInk");
+Object.defineProperty(exports, "inkSafeGradient", { enumerable: true, get: function () { return gradientInk_1.inkSafeGradient; } });
+/** @deprecated Use `colors.white` from `useCustomTheme()` directly. */
+exports.STATUS_INK = neutrals_1.neutralTokens.white;
 exports.ACCENT_GRADIENT = { from: "#8b3fc8", to: "#762d9d" };
-/**
- * Sinks both stops until WHITE ink clears AA, keeping each stop's hue. Any mid-tone gradient —
- * a brand `gradient` token, a status scale — otherwise flips `onGradient` to black ink, so the
- * same badge reads white-on-colour in one brand and black-on-pastel in the next.
- */
-const inkSafeGradient = (gradient) => ({
-    from: (0, statusTone_1.resolveAvatarFill)(gradient.from),
-    to: (0, statusTone_1.resolveAvatarFill)(gradient.to),
-});
-exports.inkSafeGradient = inkSafeGradient;
-/** Status tones are semantic scales, not designed as label backdrops. */
-const statusGradient = (scale) => (0, exports.inkSafeGradient)({ from: scale[400], to: scale[600] });
+const statusGradient = (scale) => (0, gradientInk_1.inkSafeGradient)({ from: scale[400], to: scale[600] });
 exports.statusGradient = statusGradient;
 const CHIP_INK_CONTRAST = 7;
 const darkerStop = (g) => (0, color_1.relativeLuminance)(g.from) <= (0, color_1.relativeLuminance)(g.to) ? g.from : g.to;
 exports.darkerStop = darkerStop;
-/**
- * Solid inset chip in the pill's own hue. A translucent scrim was a guessed alpha that
- * composited into a muddy dark lozenge on every mid-tone gradient; a derived rung reads as
- * one step down from the pill in every brand and both modes.
- */
+// NOTE: derived rung, not a translucent scrim — a guessed alpha muddied every mid-tone gradient.
 const chipFill = (g) => (0, statusTone_1.resolveAvatarFill)((0, exports.darkerStop)(g), CHIP_INK_CONTRAST);
 exports.chipFill = chipFill;
 /** The pill's lighter stop — guaranteed lighter than `chipFill`, so it draws the inset edge. */

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 typography_1 = require("../../Theme/tokens/primitives/typography");
+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}`;
+/** 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: typography_1.NUMERIC_TEXT };
+    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: typography_1.NUMERIC_TEXT, 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: typography_1.NUMERIC_TEXT, 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: typography_1.NUMERIC_TEXT, 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: typography_1.NUMERIC_TEXT, 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;