pixelize-design-library 2.4.2-beta.9 → 3.0.0

package/dist/Components/Card/PaymentCard/PaymentCard.js

@@ -7,64 +7,79 @@ 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 filledSurface_1 = require("../../../Theme/tokens/builders/filledSurface");
 const accentText_1 = require("../../../Theme/tokens/builders/accentText");
+const motion_1 = require("../../../Theme/tokens/primitives/motion");
+const borderWidths_1 = require("../../../Theme/tokens/primitives/borderWidths");
+const motion_2 = require("../../../Theme/chakra/motion");
 const Button_1 = __importDefault(require("../../Button/Button"));
 const getCardStyles = (isActive, isNextUpgrade, popular, theme) => {
-    const withOnButtonColor = (styles) => ({
-        ...styles,
-        onButtonColor: (0, accentText_1.onFilled)(styles.buttonColor, theme.colors.white, theme.colors.black),
-    });
+    const withOnButtonColor = (styles) => {
+        const scale = theme.colors[styles.buttonScale];
+        const solid = (0, filledSurface_1.resolveFilledSurface)(scale, theme.colors);
+        return {
+            ...styles,
+            buttonColor: solid.fill,
+            onButtonColor: solid.color,
+            iconInk: (0, accentText_1.accentTextOnCanvas)(scale, styles.buttonColor50),
+        };
+    };
     if (isActive) {
         return withOnButtonColor({
             badgeText: "Active Plan",
-            badgeColor: `0.125rem solid ${theme.colors.green[500]}`,
+            badgeColor: `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${theme.colors.green[500]}`,
             buttonColor: theme.colors.green[500],
+            buttonScale: "green",
             buttonColor50: theme.colors.green[50],
+            colorScheme: "green",
         });
     }
     if (isNextUpgrade) {
         return withOnButtonColor({
             badgeText: "Upgrade Your Plan",
-            badgeColor: `0.125rem solid ${theme.colors.primary[500]}`,
+            badgeColor: `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${theme.colors.primary[500]}`,
             buttonColor: theme.colors.primary[500],
+            buttonScale: "primary",
             buttonColor50: theme.colors.primary[50],
+            colorScheme: "primary",
         });
     }
     if (popular) {
         return withOnButtonColor({
             badgeText: "Most Popular",
-            badgeColor: `0.125rem solid ${theme.colors.primary[500]}`,
+            badgeColor: `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${theme.colors.primary[500]}`,
             buttonColor: theme.colors.primary[500],
+            buttonScale: "primary",
             buttonColor50: theme.colors.primary[50],
+            colorScheme: "primary",
         });
     }
     return withOnButtonColor({
         badgeText: "",
-        badgeColor: "",
+        badgeColor: `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${theme.colors.boxborder[200]}`,
         buttonColor: theme.colors.primary[500],
+        buttonScale: "primary",
         buttonColor50: theme.colors.primary[50],
+        colorScheme: "primary",
     });
 };
+/** Subscription plan card with price, feature list and a call-to-action; badge and accent follow active, upgrade and popular state. */
 const PaymentCard = ({ plan, isActive = false, isNextUpgrade = false, billingCycle, onSelect, onHover, buttonLoading, isLoading = false, isRenewal = false, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
-    const { badgeText, badgeColor, buttonColor, buttonColor50, onButtonColor } = getCardStyles(isActive, isNextUpgrade, !!plan.popular, theme);
+    const { badgeText, badgeColor, buttonColor, buttonColor50, onButtonColor, iconInk, colorScheme } = getCardStyles(isActive, isNextUpgrade, !!plan.popular, theme);
     const variantStyles = plan.buttonVariant === "outline"
-        ? {
-            borderColor: buttonColor,
-            color: buttonColor,
-            _hover: { bg: buttonColor50 },
-        }
+        ? {}
         : {
             bg: buttonColor,
             color: onButtonColor,
             _hover: { bg: buttonColor },
         };
-    return ((0, jsx_runtime_1.jsx)(react_1.GridItem, { children: (0, jsx_runtime_1.jsx)(react_1.Box, { bg: theme.colors.background[50], minH: "100%", borderRadius: "lg", p: 8, borderWidth: "0.063rem", borderColor: theme.colors.gray[200], boxShadow: "md", position: "relative", transition: "all 0.2s", transform: plan.popular ? "scale(1.03)" : "none", border: badgeColor, _hover: { transform: "translateY(-0.313rem)", shadow: "xl" }, children: isLoading ? (
+    return ((0, jsx_runtime_1.jsx)(react_1.GridItem, { children: (0, jsx_runtime_1.jsx)(react_1.Box, { bg: theme.colors.background[50], minH: "100%", borderRadius: "xl", p: 8, position: "relative", transition: (0, motion_1.transitionFor)(["transform", "box-shadow"], "base"), transform: plan.popular ? "scale(1.03)" : "none", border: badgeColor, _hover: { transform: "translateY(-0.313rem)", shadow: "lg" }, sx: (0, motion_2.reducedMotionSx)(), children: isLoading ? (
             // 🔹 Skeleton Loader Layout
-            (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "24px", width: "120px", mx: "auto", mb: 4 }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "50px", width: "50px", borderRadius: "lg", mx: "auto", mb: 4 }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "24px", width: "100px", mx: "auto", mb: 3 }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "30px", width: "160px", mx: "auto", mb: 4 }), (0, jsx_runtime_1.jsx)(react_1.SkeletonText, { noOfLines: 2, spacing: "2" }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "44px", width: "full", mt: 6, borderRadius: "md" }), (0, jsx_runtime_1.jsx)(react_1.VStack, { align: "start", spacing: 3, mt: 6, children: [1, 2, 3, 4].map((i) => ((0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "16px", width: "80%" }, i))) })] })) : (
+            (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "24px", width: "120px", mx: "auto", mb: 4 }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "50px", width: "50px", borderRadius: "lg", mx: "auto", mb: 4 }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "24px", width: "100px", mx: "auto", mb: 3 }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "30px", width: "160px", mx: "auto", mb: 4 }), (0, jsx_runtime_1.jsx)(react_1.SkeletonText, { noOfLines: 2, spacing: "2" }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "44px", width: "full", mt: 6, borderRadius: "lg" }), (0, jsx_runtime_1.jsx)(react_1.VStack, { align: "start", spacing: 3, mt: 6, children: [1, 2, 3, 4].map((i) => ((0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "16px", width: "80%" }, i))) })] })) : (
             // 🔹 Actual Card Content
-            (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [badgeText && ((0, jsx_runtime_1.jsx)(react_1.Badge, { position: "absolute", top: "-0.75rem", left: "50%", transform: "translateX(-50%)", bg: buttonColor, color: onButtonColor, fontSize: "sm", px: 4, py: 1, borderRadius: "full", children: badgeText })), (0, jsx_runtime_1.jsxs)(react_1.Box, { textAlign: "center", mb: 6, children: [(0, jsx_runtime_1.jsx)(react_1.Flex, { justify: "center", align: "center", w: "3.125rem", h: "3.125rem", borderRadius: "lg", bg: buttonColor50, color: buttonColor, mx: "auto", mb: 4, children: plan.icon }), (0, jsx_runtime_1.jsx)(react_1.Heading, { as: "h3", size: "lg", mb: 4, color: theme.colors.gray[800], children: plan.name }), (plan.yearlyPrice !== 0 || plan.monthlyPrice !== 0) && ((0, jsx_runtime_1.jsxs)(react_1.Heading, { as: "h4", size: "2xl", mb: 1, color: theme.colors.gray[800], display: "flex", justifyContent: "center", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { fontSize: "1.5rem", children: "\u20B9" }), billingCycle === "yearly"
+            (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [badgeText && ((0, jsx_runtime_1.jsx)(react_1.Badge, { position: "absolute", top: "-0.75rem", left: "50%", transform: "translateX(-50%)", bg: buttonColor, color: onButtonColor, fontSize: "sm", px: 4, py: 1, borderRadius: "full", children: badgeText })), (0, jsx_runtime_1.jsxs)(react_1.Box, { textAlign: "center", mb: 6, children: [(0, jsx_runtime_1.jsx)(react_1.Flex, { justify: "center", align: "center", w: "3.125rem", h: "3.125rem", borderRadius: "lg", bg: buttonColor50, color: iconInk, mx: "auto", mb: 4, children: plan.icon }), (0, jsx_runtime_1.jsx)(react_1.Heading, { as: "h3", size: "lg", mb: 4, color: theme.colors.header[900], children: plan.name }), (plan.yearlyPrice !== 0 || plan.monthlyPrice !== 0) && ((0, jsx_runtime_1.jsxs)(react_1.Heading, { as: "h4", size: "2xl", mb: 1, color: theme.colors.header[900], display: "flex", justifyContent: "center", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { fontSize: "2xl", children: "\u20B9" }), billingCycle === "yearly"
                                         ? plan.yearlyPrice
-                                        : plan.monthlyPrice, (0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", flexDirection: "column", justifyContent: "end", ml: 1, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.9rem", fontWeight: "normal", color: theme.colors.gray[600], children: plan.billing }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.7rem", fontWeight: "normal", color: theme.colors.gray[600], children: plan.tax })] })] })), plan.priceDescription && ((0, jsx_runtime_1.jsx)(react_1.Text, { color: theme.colors.green[800], mt: 2, children: plan === null || plan === void 0 ? void 0 : plan.priceDescription })), (0, jsx_runtime_1.jsx)(react_1.Text, { color: theme.colors.gray[600], mt: 2, children: plan.description })] }), ((!isActive && plan.buttonText) || isRenewal) && ((0, jsx_runtime_1.jsx)(Button_1.default, { isLoading: plan.plan_id === buttonLoading, loadingText: plan.buttonLoadingText, width: "full", variant: plan.buttonVariant, size: "lg", onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect(plan.plan_id), onMouseEnter: () => onHover === null || onHover === void 0 ? void 0 : onHover(plan.plan_id, "button", true), onMouseLeave: () => onHover === null || onHover === void 0 ? void 0 : onHover(plan.plan_id, "button", false), ...variantStyles, children: plan.buttonText })), (0, jsx_runtime_1.jsx)(react_1.VStack, { align: "start", spacing: 3, mt: 6, children: plan.features.map((feature, i) => ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", children: [(0, jsx_runtime_1.jsx)(react_1.Icon, { as: lucide_react_1.Check, color: theme.colors.green[500], mr: 2 }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", children: feature })] }, i))) })] })) }) }));
+                                        : plan.monthlyPrice, (0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", flexDirection: "column", justifyContent: "end", ml: 1, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.9rem", fontWeight: "normal", color: theme.colors.textMuted, children: plan.billing }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.7rem", fontWeight: "normal", color: theme.colors.textMuted, children: plan.tax })] })] })), plan.priceDescription && ((0, jsx_runtime_1.jsx)(react_1.Text, { color: theme.colors.semanticText.success, mt: 2, children: plan === null || plan === void 0 ? void 0 : plan.priceDescription })), (0, jsx_runtime_1.jsx)(react_1.Text, { color: theme.colors.textMuted, mt: 2, children: plan.description })] }), ((!isActive && plan.buttonText) || isRenewal) && ((0, jsx_runtime_1.jsx)(Button_1.default, { isLoading: plan.plan_id === buttonLoading, loadingText: plan.buttonLoadingText, width: "full", variant: plan.buttonVariant, colorScheme: colorScheme, size: "lg", onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect(plan.plan_id), onMouseEnter: () => onHover === null || onHover === void 0 ? void 0 : onHover(plan.plan_id, "button", true), onMouseLeave: () => onHover === null || onHover === void 0 ? void 0 : onHover(plan.plan_id, "button", false), ...variantStyles, children: plan.buttonText })), (0, jsx_runtime_1.jsx)(react_1.VStack, { align: "start", spacing: 3, mt: 6, children: plan.features.map((feature, i) => ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", children: [(0, jsx_runtime_1.jsx)(react_1.Icon, { as: lucide_react_1.Check, color: theme.colors.semanticText.success, mr: 2 }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", children: feature })] }, i))) })] })) }) }));
 };
 exports.default = PaymentCard;

package/dist/Components/Card/PaymentCard/PaymentCardProps.d.ts

@@ -1,27 +1,52 @@
+/** Subscription/pricing-tier card — takes a `Plan` (billing cycle, features), not a physical product like ProductCard's `options`. */
 export type PaymentCardProps = {
+    /** The plan to render. */
     plan: Plan;
+    /** true hides the CTA button unless `isRenewal` is also true, no matter what `plan.buttonText` says. */
     isActive?: boolean;
+    /** Adds an "Upgrade Your Plan" badge and primary outline; ignored when `isActive` is set. */
     isNextUpgrade?: boolean;
+    /** Picks which of `plan.monthlyPrice` / `plan.yearlyPrice` is shown. */
     billingCycle: "monthly" | "yearly";
+    /** Called with `plan.plan_id` when the CTA button is clicked. */
     onSelect?: (planId: number) => void;
+    /** `type` is always "button" in practice — PaymentCard never wires hover on the outer card, only the CTA button. */
     onHover?: (planId: number, type: "card" | "button", state: boolean) => void;
+    /** The plan_id whose button should spin, not a boolean — matched via `===` against each plan's plan_id. */
     buttonLoading?: number;
+    /** Replaces the card content with skeletons. */
     isLoading?: boolean;
+    /** Keeps the CTA button visible on the active plan. */
     isRenewal?: boolean;
 };
+/** Plan data rendered by PaymentCard — `billing`/`tax` are pre-formatted display strings shown under the price, not derived from monthlyPrice/yearlyPrice. */
 export type Plan = {
+    /** Identifier passed to `onSelect` / `onHover` and matched against `buttonLoading`. */
     plan_id: number;
+    /** Plan title. */
     name: string;
+    /** Muted line under the price. */
     description: string;
+    /** Price in rupees shown for the monthly cycle; the price block is hidden when both prices are 0. */
     monthlyPrice: number;
+    /** Price in rupees shown for the yearly cycle; the price block is hidden when both prices are 0. */
     yearlyPrice: number;
+    /** Display string beside the price, e.g. "/month". */
     billing: string;
+    /** Display string under `billing`, e.g. "+ GST". */
     tax: string;
+    /** Check-marked feature list, one row per entry. */
     features: string[];
+    /** Icon rendered in the tinted tile above the name. */
     icon: React.ReactNode;
+    /** CTA label; with no text the button is hidden unless `isRenewal`. */
     buttonText: string;
+    /** "link" still gets the same filled bg/color override as "solid" — only "outline" is excluded from it. */
     buttonVariant: "solid" | "outline" | "link";
+    /** Adds a "Most Popular" badge and scales the card up slightly; lower priority than active and upgrade badges. */
     popular?: boolean;
+    /** CTA text while this plan's button is loading. */
     buttonLoadingText?: string;
+    /** Success-coloured line under the price, e.g. a discount note. */
     priceDescription?: string;
 };

package/dist/Components/CartItem/CartItem.d.ts

@@ -0,0 +1,4 @@
+import type { CartItemProps } from "./CartItemProps";
+/** One bag line: tonal thumbnail, linked title, chosen options, line total with struck MRP, stepper and calm text actions. */
+declare const CartItem: ({ title, brand, href, onTitleClick, image, imageAlt, axes, selection, optionsSummary, price, mrp, quantity, onQuantityChange, minQuantity, maxQuantity, onRemove, onMoveToWishlist, stock, stockCount, stockMessage, deliveryBy, unavailable, layout, isLoading, currency, locale, labels, "data-testid": testId, }: CartItemProps) => import("react/jsx-runtime").JSX.Element;
+export default CartItem;

package/dist/Components/CartItem/CartItem.js

@@ -0,0 +1,61 @@
+"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("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const typography_1 = require("../../Theme/tokens/primitives/typography");
+const motion_2 = require("../../Theme/chakra/motion");
+const price_1 = require("../../Utils/price");
+const Button_1 = __importDefault(require("../Button/Button"));
+const PriceBlock_1 = __importDefault(require("../PriceBlock/PriceBlock"));
+const QuantityStepper_1 = __importDefault(require("../QuantityStepper/QuantityStepper"));
+const Skeletons_1 = __importDefault(require("../Skeletons/Skeletons"));
+const StockStatus_1 = __importDefault(require("../StockStatus/StockStatus"));
+const cartItemOptions_1 = require("./cartItemOptions");
+const DEFAULT_LABELS = {
+    moveToWishlist: "Move to wishlist",
+    remove: "Remove",
+    outOfStock: "Out of stock",
+    notIncluded: "Not included in your total",
+    quantity: (quantity) => `Qty ${quantity}`,
+    each: (price) => `${price} each`,
+    delivery: (date) => `Delivery by ${date}`,
+};
+const THUMB = {
+    row: { w: "5rem", h: "6.25rem", radius: "0.75rem" },
+    compact: { w: "3.5rem", h: "4.375rem", radius: "0.625rem" },
+};
+const DIMMED_MEDIA = 0.45;
+const CartItemSkeleton = ({ layout }) => {
+    const thumb = THUMB[layout];
+    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { gap: 3, align: "flex-start", "aria-busy": "true", "data-testid": "cart-item-skeleton", children: [(0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: thumb.h, width: thumb.w, borderRadius: thumb.radius }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", gap: 2, flex: 1, minW: 0, children: [(0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: 3, width: "35%" }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: 4, width: "80%" }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: 3, width: "45%" }), layout === "row" && (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: 10, width: "100%", borderRadius: "full" })] })] }));
+};
+/** One bag line: tonal thumbnail, linked title, chosen options, line total with struck MRP, stepper and calm text actions. */
+const CartItem = ({ title, brand, href, onTitleClick, image, imageAlt = "", axes, selection, optionsSummary, price, mrp, quantity, onQuantityChange, minQuantity = 1, maxQuantity, onRemove, onMoveToWishlist, stock, stockCount, stockMessage, deliveryBy, unavailable = false, layout = "row", isLoading = false, currency, locale, labels, "data-testid": testId, }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const copy = { ...DEFAULT_LABELS, ...labels };
+    const compact = layout === "compact";
+    const thumb = THUMB[layout];
+    const fmt = { currency, locale };
+    if (isLoading)
+        return (0, jsx_runtime_1.jsx)(CartItemSkeleton, { layout: layout });
+    const summary = optionsSummary !== null && optionsSummary !== void 0 ? optionsSummary : (0, cartItemOptions_1.summariseOptions)(axes, selection);
+    const lineTotal = price * quantity;
+    const lineMrp = mrp !== undefined ? mrp * quantity : undefined;
+    const titleInk = unavailable ? colors.textMuted : colors.header[900];
+    const titleProps = href
+        ? { as: "a", href }
+        : onTitleClick
+            ? { as: "button", type: "button", onClick: onTitleClick }
+            : { as: "span" };
+    const linked = !!href || !!onTitleClick;
+    const stepper = ((0, jsx_runtime_1.jsx)(QuantityStepper_1.default, { size: "sm", variant: "soft", value: quantity, min: minQuantity, max: maxQuantity, removable: !!onRemove, onRemove: onRemove, onValueChange: onQuantityChange, itemLabel: title }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { gap: 3, align: "flex-start", "data-testid": testId, "data-unavailable": unavailable || undefined, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { flexShrink: 0, w: thumb.w, h: thumb.h, borderRadius: thumb.radius, overflow: "hidden", bg: colors.background[100], opacity: unavailable ? DIMMED_MEDIA : 1, children: image && (0, jsx_runtime_1.jsx)(react_1.Box, { as: "img", src: image, alt: imageAlt, w: "100%", h: "100%", objectFit: "cover", display: "block" }) }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", flex: 1, minW: 0, gap: 1.5, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", gap: 0.5, minW: 0, children: [brand && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "xs", fontWeight: 600, lineHeight: 1.4, color: colors.textMuted, noOfLines: 1, children: brand })), (0, jsx_runtime_1.jsx)(react_1.Text, { ...titleProps, display: "block", textAlign: "left", fontSize: "sm", fontWeight: 600, lineHeight: 1.4, color: titleInk, noOfLines: 2, borderRadius: "sm", cursor: linked ? "pointer" : undefined, transition: (0, motion_1.transitionFor)(["color"]), _hover: linked ? { textDecoration: "underline" } : undefined, sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors), ...(0, motion_2.reducedMotionSx)() }, children: title }), summary && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, children: summary }))] }), unavailable ? ((0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", gap: 0.5, children: [(0, jsx_runtime_1.jsx)(StockStatus_1.default, { status: "out-of-stock", message: copy.outOfStock, size: "sm" }), (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "xs", color: colors.textMuted, children: copy.notIncluded })] })) : ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "flex-end", justify: "space-between", gap: 3, wrap: "wrap", children: [compact ? ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "xs", color: colors.textMuted, sx: typography_1.NUMERIC_TEXT, children: copy.quantity(quantity) })) : (stepper), (0, jsx_runtime_1.jsx)(react_1.Box, { ml: "auto", children: (0, jsx_runtime_1.jsx)(PriceBlock_1.default, { size: compact ? "sm" : "md", align: "end", price: lineTotal, mrp: lineMrp, taxNote: quantity > 1 ? copy.each((0, price_1.formatPrice)(price, fmt)) : undefined, ...fmt }) })] })), !unavailable && !compact && stock && stock !== "in-stock" && ((0, jsx_runtime_1.jsx)(StockStatus_1.default, { status: stock, count: stockCount, message: stockMessage, size: "sm" })), !unavailable && deliveryBy && ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 1.5, color: colors.textMuted, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Truck, { size: 13, "aria-hidden": true }), (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "xs", lineHeight: 1.4, children: copy.delivery(deliveryBy) })] })), !compact && (onRemove || (onMoveToWishlist && !unavailable)) && ((0, jsx_runtime_1.jsxs)(react_1.Flex, { gap: 1, ml: -3, mt: 0.5, children: [onMoveToWishlist && !unavailable && ((0, jsx_runtime_1.jsx)(Button_1.default, { variant: "ghost", colorScheme: "gray", size: "sm", onClick: onMoveToWishlist, "aria-label": `${copy.moveToWishlist}: ${title}`, children: copy.moveToWishlist })), onRemove && ((0, jsx_runtime_1.jsx)(Button_1.default, { variant: "ghost", colorScheme: "gray", size: "sm", onClick: onRemove, "aria-label": `${copy.remove}: ${title}`, children: copy.remove }))] }))] })] }));
+};
+exports.default = CartItem;

package/dist/Components/CartItem/CartItemProps.d.ts

@@ -0,0 +1,74 @@
+import type { OptionAxis, PriceFormat, StockState, VariantSelection } from "../Commerce/commerceTypes";
+/** Row is the full bag line with controls; compact is read-only for a mini-bag or order review. */
+export type CartItemLayout = "row" | "compact";
+/** Every visible string; override for another language. */
+export interface CartItemLabels {
+    /** Text and accessible name of the move-to-wishlist action; default "Move to wishlist". */
+    moveToWishlist: string;
+    /** Text and accessible name of the remove action; default "Remove". */
+    remove: string;
+    /** Shown instead of the price when `unavailable`. */
+    outOfStock: string;
+    /** Muted line under the out-of-stock state. */
+    notIncluded: string;
+    /** Compact layout quantity text, given the quantity. */
+    quantity: (quantity: number) => string;
+    /** Muted unit price under a multi-unit line total, given the formatted unit price. */
+    each: (price: string) => string;
+    /** Delivery line, given `deliveryBy`. */
+    delivery: (date: string) => string;
+}
+/** One bag line: thumbnail, title, chosen options, line total, quantity and actions. Totals are computed here, so pass unit prices. */
+export interface CartItemProps extends PriceFormat {
+    /** Product name, clamped to two lines; also names the quantity stepper and action buttons for screen readers. */
+    title: string;
+    /** Muted single line above the title. */
+    brand?: string;
+    /** Makes the title a link to the product page. */
+    href?: string;
+    /** Makes the title a button when there is no `href`, for client-side routing. */
+    onTitleClick?: () => void;
+    /** Product image URL, shown 4:5. */
+    image?: string;
+    /** Empty by default: the title beside the image already names it. */
+    imageAlt?: string;
+    /** With `selection`, builds the "Indigo Wash · M" line from the chosen option labels. */
+    axes?: OptionAxis[];
+    /** Chosen option per axis, read against `axes` to build the options line. */
+    selection?: VariantSelection;
+    /** Replaces the line built from `axes` and `selection`. */
+    optionsSummary?: string;
+    /** Selling price of one unit; the line total is `price * quantity`. */
+    price: number;
+    /** List price of one unit; the strike only shows when it is above `price`. */
+    mrp?: number;
+    /** Units on this line; the line total is `price * quantity`. Controlled: update it from `onQuantityChange`. */
+    quantity: number;
+    /** Called with the new quantity when the stepper changes it; never fires in the compact layout, which has no stepper. */
+    onQuantityChange?: (quantity: number) => void;
+    /** Lowest quantity; at this value the minus becomes a trash button when `onRemove` is set. */
+    minQuantity?: number;
+    /** Highest quantity, usually the stock on hand. */
+    maxQuantity?: number;
+    /** Adds the Remove action (row layout) and turns the stepper's minus into a trash at `minQuantity`. */
+    onRemove?: () => void;
+    /** Adds the "Move to wishlist" action. */
+    onMoveToWishlist?: () => void;
+    /** Availability line under the price, e.g. low-stock. Omit for in-stock lines. */
+    stock?: StockState;
+    /** Units left, shown for `low-stock`. */
+    stockCount?: number;
+    /** Replaces the default stock words. */
+    stockMessage?: string;
+    /** Pre-formatted date, e.g. "Thu, 9 Oct"; rendered as "Delivery by Thu, 9 Oct". */
+    deliveryBy?: string;
+    /** Dims the image, drops price and stepper and keeps only Remove. */
+    unavailable?: boolean;
+    /** "row" or "compact"; default "row". */
+    layout?: CartItemLayout;
+    /** Skeleton of the same shape; actions are not rendered. */
+    isLoading?: boolean;
+    /** Per-string copy overrides; unset keys keep the English defaults. */
+    labels?: Partial<CartItemLabels>;
+    "data-testid"?: string;
+}

package/dist/Components/CartItem/CartItemProps.js

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

package/dist/Components/CartItem/cartItemOptions.d.ts

@@ -0,0 +1,3 @@
+import type { OptionAxis, VariantSelection } from "../Commerce/commerceTypes";
+/** "Indigo Wash · M" from the chosen option labels, in axis order; axes with no pick are skipped. */
+export declare const summariseOptions: (axes: OptionAxis[] | undefined, selection: VariantSelection | undefined) => string;

package/dist/Components/CartItem/cartItemOptions.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.summariseOptions = void 0;
+/** "Indigo Wash · M" from the chosen option labels, in axis order; axes with no pick are skipped. */
+const summariseOptions = (axes, selection) => {
+    if (!axes || !selection)
+        return "";
+    return axes
+        .map((axis) => { var _a; return (_a = axis.values.find((value) => value.id === selection[axis.id])) === null || _a === void 0 ? void 0 : _a.label; })
+        .filter((label) => !!label)
+        .join(" · ");
+};
+exports.summariseOptions = summariseOptions;

package/dist/Components/Checkbox/Checkbox.d.ts

@@ -1,2 +1,18 @@
-import { CheckboxProps } from "./CheckboxProps";
-export default function CheckBox({ label, labelFontSize, showLabelTooltip, labelTooltip, labelClampLines, spacing, isInvalid, color, iconColor, iconSize, isChecked, isIndeterminate, onChange, isDisabled, size, value, defaultChecked, sx, error, errorMessage, helperText, onClick, labelSx, ...aria }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+import React from "react";
+/** Native checkbox with optional label (else aria-label); `error` links its message via aria-describedby; `ref` is the `<input>`. */
+declare const CheckBox: React.ForwardRefExoticComponent<Pick<import("@chakra-ui/react").CheckboxProps, "size" | "defaultChecked" | "id" | "aria-describedby" | "aria-label" | "aria-labelledby" | "onChange" | "onClick" | "sx" | "isDisabled" | "value" | "spacing" | "isInvalid" | "iconColor" | "iconSize" | "isChecked" | "isIndeterminate"> & {
+    label?: string;
+    labelFontSize?: string;
+    showLabelTooltip?: boolean;
+    labelTooltip?: string;
+    labelClampLines?: number;
+    width?: string | number;
+    variant?: "solid" | "outline" | "ghost" | "link" | "unstyled";
+    color?: "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "whiteAlpha" | "blackAlpha";
+    size?: "sm" | "md" | "lg";
+    error?: boolean;
+    errorMessage?: string;
+    helperText?: string;
+    labelSx?: React.CSSProperties;
+} & React.RefAttributes<HTMLInputElement>>;
+export default CheckBox;

package/dist/Components/Checkbox/Checkbox.js

@@ -3,18 +3,21 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = CheckBox;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("@chakra-ui/react");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
-const ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
-const HelperText_1 = __importDefault(require("../Common/HelperText"));
+const FieldMessage_1 = __importDefault(require("../Common/FieldMessage"));
+const useFieldIds_1 = require("../Common/useFieldIds");
 const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
-function CheckBox({ label, labelFontSize, showLabelTooltip, labelTooltip, labelClampLines, spacing, isInvalid, color, iconColor, iconSize, isChecked, isIndeterminate, onChange, isDisabled, size = "md", value, defaultChecked, sx, error, errorMessage, helperText, onClick, labelSx, ...aria }) {
+/** Native checkbox with optional label (else aria-label); `error` links its message via aria-describedby; `ref` is the `<input>`. */
+const CheckBox = (0, react_1.forwardRef)(function CheckBox({ label, labelFontSize, showLabelTooltip, labelTooltip, labelClampLines, spacing, isInvalid, color, iconColor, iconSize, isChecked, isIndeterminate, onChange, isDisabled, size = "md", value, defaultChecked, sx, error, errorMessage, helperText, onClick, labelSx, id, variant, ...aria }, ref) {
+    void variant;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
-    const controlSize = size === "sm" ? "1rem"
-        : size === "md" ? "1.25rem"
-            : size === "lg" ? "1.5rem"
+    const ids = (0, useFieldIds_1.useFieldIds)(id, { error, errorMessage, helperText });
+    const controlSize = size === "sm" ? "0.875rem"
+        : size === "md" ? "1rem"
+            : size === "lg" ? "1.25rem"
                 : size; // pass-through if already a CSS value
     const clampStyles = labelClampLines
         ? {
@@ -27,8 +30,10 @@ function CheckBox({ label, labelFontSize, showLabelTooltip, labelTooltip, labelC
             ...labelSx,
         }
         : { ...labelSx };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Checkbox, { ...aria, onClick: onClick, spacing: spacing !== null && spacing !== void 0 ? spacing : "0.5rem", isInvalid: isInvalid, colorScheme: color, iconColor: iconColor, iconSize: iconSize, isChecked: isChecked, isIndeterminate: isIndeterminate, onChange: onChange, isDisabled: isDisabled, size: size, value: value, defaultChecked: defaultChecked, borderColor: theme.colors.gray[500], display: "flex", alignItems: "center", sx: {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Checkbox, { ref: ref, id: ids.inputId, "aria-describedby": ids.describedBy, ...aria, onClick: onClick, spacing: spacing !== null && spacing !== void 0 ? spacing : "0.5rem", isInvalid: isInvalid || error, colorScheme: color, iconColor: iconColor, iconSize: iconSize, isChecked: isChecked, isIndeterminate: isIndeterminate, onChange: onChange, isDisabled: isDisabled, size: size, value: value, defaultChecked: defaultChecked, borderColor: theme.colors.boxborder[500], display: "flex", alignItems: "center", sx: {
                     ...sx,
                     ".chakra-checkbox__control": { w: controlSize, h: controlSize },
-                }, children: label && (showLabelTooltip ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: labelTooltip !== null && labelTooltip !== void 0 ? labelTooltip : label, hasArrow: true, placement: "top", fontSize: "0.75rem", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", sx: clampStyles, fontSize: labelFontSize !== null && labelFontSize !== void 0 ? labelFontSize : "0.8125rem", color: theme.colors.text[700], fontWeight: 500, ml: 0, children: label }) })) : ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", sx: clampStyles, fontSize: labelFontSize !== null && labelFontSize !== void 0 ? labelFontSize : "0.8125rem", color: theme.colors.text[700], fontWeight: 500, ml: 0, children: label }))) }), error && (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { errorMessage: errorMessage }), helperText && !error && (0, jsx_runtime_1.jsx)(HelperText_1.default, { helperText: helperText })] }));
-}
+                }, children: label && (showLabelTooltip ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: labelTooltip !== null && labelTooltip !== void 0 ? labelTooltip : label, hasArrow: true, placement: "top", fontSize: "xs", children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", sx: clampStyles, fontSize: labelFontSize !== null && labelFontSize !== void 0 ? labelFontSize : "0.875rem", color: theme.colors.text[700], fontWeight: 500, ml: 0, children: label }) })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", sx: clampStyles, fontSize: labelFontSize !== null && labelFontSize !== void 0 ? labelFontSize : "0.875rem", color: theme.colors.text[700], fontWeight: 500, ml: 0, children: label }))) }), (0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
+});
+CheckBox.displayName = "CheckBox";
+exports.default = CheckBox;

package/dist/Components/Checkbox/Checkbox.styles.js

@@ -1,69 +1,79 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Checkbox = void 0;
+const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
 const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const fieldStyles_1 = require("../Common/fieldStyles");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const BACKGROUND_BORDER_COLOR_BOX_SHADOW_TRANSITION = (0, motion_1.transitionFor)(["background", "border-color", "box-shadow"]);
+// One fill rule for every colour scheme, via resolveFilledSurface — was a flat [600].
 exports.Checkbox = {
     baseStyle: ({ theme, colorScheme = "primary" }) => {
         var _a;
         const palette = (_a = theme.colors[colorScheme]) !== null && _a !== void 0 ? _a : theme.colors.primary;
-        // A browser probe found the checked checkbox's hover repeating its own resting `[600]` fill.
-        // Chakra's stock control also carries a checked-hover at `_checked._hover` (this override
-        // nests the other way, `_hover._checked`) — two different key paths landing on the same
-        // selector, so whichever one the cascade picks must still differ from resting. Setting both
-        // paths to the same lifted value removes that ambiguity outright.
-        const hoverChecked = (0, outlineRung_1.resolveHoverTint)(palette[600], palette[600]);
+        const filled = (0, filledSurface_1.resolveFilledSurface)(palette, theme.colors);
+        // filledSurface's own hoverFill can collapse on a near-monochrome scale (zinc); step from
+        // the resolved fill with resolveHoverTint instead, which guarantees a perceptible move.
+        const hoverFill = (0, outlineRung_1.resolveHoverTint)(filled.fill, filled.fill);
+        const hoverColor = (0, accentText_1.onFilled)(hoverFill, theme.colors.white, theme.colors.black);
+        const activeFill = (0, outlineRung_1.resolveHoverTint)(hoverFill, hoverFill);
         return {
             control: {
-                width: "1.25rem",
-                height: "1.25rem",
-                borderWidth: "1.6px",
+                borderWidth: "1px",
                 borderRadius: "base",
-                // Without a resting colour Chakra falls back to its own gray.500.
-                borderColor: theme.colors.boxborder[500],
-                transition: "background 0.15s, border-color 0.15s, box-shadow 0.15s",
-                _disabled: {
-                    bg: theme.colors.background[50],
-                    borderColor: theme.colors.boxborder[500],
-                    cursor: "not-allowed",
+                borderColor: (0, fieldStyles_1.fieldHoverBorder)(theme.colors),
+                transition: BACKGROUND_BORDER_COLOR_BOX_SHADOW_TRANSITION,
+                _invalid: {
+                    borderColor: theme.colors.semanticText.error,
                 },
                 _indeterminate: {
-                    bg: theme.colors.background[50],
-                    borderColor: palette[500],
-                    svg: {
-                        color: palette[500],
-                    },
+                    bg: filled.fill,
+                    borderColor: filled.fill,
+                    svg: { color: filled.color },
                 },
                 _checked: {
-                    bg: palette[600],
-                    borderColor: palette[600],
+                    bg: filled.fill,
+                    borderColor: filled.fill,
                     _hover: {
-                        bg: hoverChecked,
-                        borderColor: hoverChecked,
+                        bg: hoverFill,
+                        borderColor: hoverFill,
                     },
                 },
                 _hover: {
                     bg: theme.colors.background[100],
-                    borderColor: palette[400],
+                    borderColor: filled.fill,
                     _checked: {
-                        bg: hoverChecked,
-                        borderColor: hoverChecked,
+                        bg: hoverFill,
+                        borderColor: hoverFill,
                     },
                     _indeterminate: {
-                        bg: "none",
-                        borderColor: palette[600],
+                        bg: hoverFill,
+                        borderColor: hoverFill,
                     },
                 },
-                _focus: {
-                    boxShadow: `0 0 0 2px ${palette[300]}`,
-                    borderColor: palette[500],
-                },
+                _focusVisible: (0, focusRing_styles_1.focusVisibleRing)(theme.colors),
                 _active: {
-                    bg: palette[600],
-                    borderColor: palette[600],
+                    bg: activeFill,
+                    borderColor: activeFill,
+                },
+                // Last so it wins over _checked/_indeterminate at equal specificity.
+                _disabled: {
+                    bg: theme.colors.background[100],
+                    borderColor: theme.colors.boxborder[500],
+                    cursor: "not-allowed",
+                    opacity: 1,
                 },
             },
             icon: {
-                color: theme.colors.background[50],
+                color: filled.color,
+                _hover: {
+                    color: hoverColor,
+                },
+                _disabled: {
+                    color: theme.colors.textMuted,
+                },
             },
         };
     },

package/dist/Components/Checkbox/CheckboxProps.d.ts

@@ -1,16 +1,30 @@
 import { CheckboxProps as ChakraButtonProps } from "@chakra-ui/react";
+/** Curated Pick of Chakra's native CheckboxProps (not a full re-export) plus this library's label/tooltip/error additions. */
 export type CheckboxProps = Pick<ChakraButtonProps, "spacing" | "isInvalid" | "size" | "iconColor" | "iconSize" | "isChecked" | "isIndeterminate" | "onChange" | "isDisabled" | "value" | "defaultChecked" | "sx" | "onClick" | "aria-label" | "aria-labelledby" | "aria-describedby" | "id"> & {
+    /** Optional; without it, pass `aria-label`. */
     label?: string;
+    /** Defaults to "0.875rem" (14px). */
     labelFontSize?: string;
+    /** Wraps the label in a tooltip showing `labelTooltip`. */
     showLabelTooltip?: boolean;
+    /** Tooltip text; defaults to `label`. Ignored unless `showLabelTooltip`. */
     labelTooltip?: string;
+    /** Clamps the label to this many lines with an ellipsis. */
     labelClampLines?: number;
+    /** Passed through to the Chakra checkbox root. */
     width?: string | number;
+    /** @deprecated Ignored — Checkbox.styles.ts defines no `variants` key; a checkbox has no button-like look to switch. */
     variant?: "solid" | "outline" | "ghost" | "link" | "unstyled";
+    /** Maps to Chakra's colorScheme (icon/fill tint), not a CSS color — text color is fixed via theme tokens. */
     color?: "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "whiteAlpha" | "blackAlpha";
+    /** Control box sm 14px · md 16px · lg 20px; defaults to "md". */
     size?: "sm" | "md" | "lg";
+    /** Sets `isInvalid` (error border + aria-invalid) and shows `errorMessage` in place of `helperText`, linked via aria-describedby. */
     error?: boolean;
+    /** Shown in place of `helperText` while `error` is true, linked via aria-describedby. */
     errorMessage?: string;
+    /** Hidden while `error` is true. */
     helperText?: string;
+    /** Extra styles for the label span, merged after the clamp styles. */
     labelSx?: React.CSSProperties;
 };