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

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

@@ -1,9 +1,24 @@
 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

@@ -0,0 +1,4 @@
+import React from "react";
+import { PlanBadgeProps } from "./PlanBadgeProps";
+declare const PlanBadge: React.FC<PlanBadgeProps>;
+export default PlanBadge;

package/dist/Components/PlanBadge/PlanBadge.js

@@ -0,0 +1,16 @@
+"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 planBadge_1 = require("../../Utils/planBadge");
+const PlanPill_1 = __importDefault(require("../PlanPill/PlanPill"));
+// 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)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(PlanPill_1.default, { label: label, mobileLabel: mobileLabel, status: subtitle, tone: tone, maxLabelWidth: maxLabelWidth, ariaLabel: ariaLabel, onClick: onClick }));
+};
+exports.default = PlanBadge;

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

@@ -0,0 +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;
+    /** 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/PlanBadge/PlanBadgeProps.js

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

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

@@ -0,0 +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

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const 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;
+    const toneGradient = {
+        normal: c.gradient,
+        warning: (0, planPillGradient_1.statusGradient)(c.semantic.warning),
+        danger: (0, planPillGradient_1.statusGradient)(c.semantic.error),
+    };
+    const resolved = (0, gradientInk_1.resolveGradient)(gradient !== null && gradient !== void 0 ? gradient : toneGradient[tone], c.white, c.black);
+    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, 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`,
+        }, 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: "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

@@ -0,0 +1,30 @@
+import { ElementType } from "react";
+/**
+ * Urgency of the plan state. Drives the gradient and the leading icon, so the
+ * 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;
+    /** Compact label for small screens. Defaults to `label`. */
+    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;
+    /** Explicit gradient stops. Overrides the tone's theme gradient. */
+    gradient?: {
+        from: string;
+        to: string;
+    };
+    /** Truncate the label beyond this width. */
+    maxLabelWidth?: string;
+    /** 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/PlanPillProps.js

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

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

@@ -0,0 +1,12 @@
+import { inkSafeGradient, type Gradient } from "../../Theme/tokens/builders/gradientInk";
+import type { ColorScale } from "../../Theme/tokens/types";
+export { inkSafeGradient };
+export type { Gradient };
+/** @deprecated Use `colors.white` from `useCustomTheme()` directly. */
+export declare const STATUS_INK: string;
+export declare const ACCENT_GRADIENT: Gradient;
+export declare const statusGradient: (scale: ColorScale) => Gradient;
+export declare const darkerStop: (g: Gradient) => string;
+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

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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");
+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" };
+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;
+// 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. */
+const chipBorder = (g) => (0, color_1.relativeLuminance)(g.from) > (0, color_1.relativeLuminance)(g.to) ? g.from : g.to;
+exports.chipBorder = chipBorder;

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;

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

@@ -0,0 +1,45 @@
+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?: {
+        /** Lowest price, formatted first; equal to `max` shows a single price. */
+        min: number;
+        /** Highest price, formatted after the dash. */
+        max: number;
+    };
+    /** Typography scale; defaults to "md". */
+    size?: PriceBlockSize;
+    /** Alignment of the lines; defaults to "start". */
+    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;
+    /** Overrides the default English copy; unset keys keep their default. */
+    labels?: Partial<PriceBlockLabels>;
+    /** Test id on the block's root. */
+    "data-testid"?: string;
+}

package/dist/Components/PriceBlock/PriceBlockProps.js

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

package/dist/Components/Primitives/Primitives.d.ts

@@ -0,0 +1,3 @@
+export { Box, Flex, Stack, VStack, HStack, Grid, GridItem, SimpleGrid, Wrap, WrapItem, Center, Spacer, Container, Divider, Text, Heading, Link, Image, Icon, Badge, Alert, AlertIcon, AlertTitle, AlertDescription, Portal, Collapse, Show, Hide, List, ListItem, ListIcon, OrderedList, UnorderedList, Popover, PopoverTrigger, PopoverContent, PopoverBody, PopoverHeader, PopoverFooter, PopoverArrow, PopoverCloseButton, FormControl, FormLabel, FormErrorMessage, FormHelperText, TableContainer, Thead, Tbody, Tfoot, Tr, Th, Td, Menu, MenuButton, MenuList, MenuItem, MenuGroup, MenuDivider, MenuOptionGroup, MenuItemOption, ChakraProvider, extendTheme, useDisclosure, useMediaQuery, useToken, useBreakpointValue, } from "@chakra-ui/react";
+export { Table as TableRoot } from "@chakra-ui/react";
+export type { BoxProps, FlexProps, StackProps, TextProps, HeadingProps, GridProps, GridItemProps, SimpleGridProps, BadgeProps, IconProps, LinkProps, ImageProps, DividerProps, ContainerProps, FormControlProps, FormLabelProps, PopoverProps, ListProps, AlertProps, MenuProps, } from "@chakra-ui/react";