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

package/dist/Components/WishlistToggle/WishlistToggleProps.d.ts

@@ -0,0 +1,19 @@
+/** Button sizes: sm 32 px, md 40 px with a 44 px hit area, lg 48 px. */
+export type WishlistToggleSize = "sm" | "md" | "lg";
+/** glass: translucent dark disc for use on photos; soft: tonal disc on the page; ghost: icon only. */
+export type WishlistToggleVariant = "glass" | "soft" | "ghost";
+/** Heart toggle button with `aria-pressed`, a spring pop on save and a 44 px touch target from md up. */
+export interface WishlistToggleProps {
+    /** Controlled state; pair with `onSelectedChange`. */
+    selected?: boolean;
+    /** Initial state when `selected` is not controlled. */
+    defaultSelected?: boolean;
+    /** Fires with the next state on click or keyboard activation. */
+    onSelectedChange?: (selected: boolean) => void;
+    size?: WishlistToggleSize;
+    variant?: WishlistToggleVariant;
+    /** Fixed accessible name, e.g. "Save Denim Jacket"; defaults to "Add to wishlist" / "Remove from wishlist". */
+    label?: string;
+    isDisabled?: boolean;
+    "data-testid"?: string;
+}

package/dist/Components/WishlistToggle/WishlistToggleProps.js

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

package/dist/Theme/assertPalette.d.ts

@@ -1,5 +1,5 @@
 import type { PaletteProps } from "./tokens/types";
-declare const REQUIRED_GROUPS: readonly ["gradient", "primary", "secondary", "tertiary", "transparent", "black", "white", "semantic", "gray", "red", "orange", "yellow", "green", "teal", "blue", "cyan", "purple", "pink", "backgroundColor", "background", "text", "header", "placeholder", "boxShadow", "focusRing", "sidebar", "boxborder", "border", "table", "disabled", "accentText", "textMuted", "semanticText", "onPrimary", "onSemantic", "surfaceRaised"];
+declare const REQUIRED_GROUPS: readonly ["gradient", "primary", "secondary", "tertiary", "transparent", "black", "white", "semantic", "gray", "red", "orange", "yellow", "green", "teal", "blue", "cyan", "purple", "pink", "backgroundColor", "background", "text", "header", "placeholder", "boxShadow", "focusRing", "sidebar", "boxborder", "border", "table", "disabled", "accentText", "textMuted", "semanticText", "onPrimary", "onSemantic", "surfaceRaised", "star"];
 type Unlisted = Exclude<keyof PaletteProps, (typeof REQUIRED_GROUPS)[number]>;
 export type AllPaletteTokensListed = Unlisted extends never ? true : ["unlisted token", Unlisted];
 export declare const allPaletteTokensListed: AllPaletteTokensListed;

package/dist/Theme/assertPalette.js

@@ -6,7 +6,7 @@ const REQUIRED_GROUPS = [
     "semantic", "gray", "red", "orange", "yellow", "green", "teal", "blue", "cyan",
     "purple", "pink", "backgroundColor", "background", "text", "header", "placeholder",
     "boxShadow", "focusRing", "sidebar", "boxborder", "border", "table", "disabled",
-    "accentText", "textMuted", "semanticText", "onPrimary", "onSemantic", "surfaceRaised",
+    "accentText", "textMuted", "semanticText", "onPrimary", "onSemantic", "surfaceRaised", "star",
 ];
 exports.allPaletteTokensListed = true;
 const NESTED = [

package/dist/Theme/tokens/brands/index.js

@@ -49,6 +49,7 @@ const resolvedRungs_1 = require("../builders/resolvedRungs");
 const focusRing_1 = require("../builders/focusRing");
 const surfaceRungs_1 = require("../builders/surfaceRungs");
 const surfaceRaised_1 = require("../builders/surfaceRaised");
+const star_1 = require("../builders/star");
 /** Derived, never hand-written: a copied hex goes stale the moment a canvas moves. */
 const finalizeLightPalette = (source) => ({
     ...source,
@@ -60,6 +61,7 @@ const finalizeLightPalette = (source) => ({
     onSemantic: (0, semanticText_1.buildOnSemantic)(source.semantic, source.white, source.black),
     focusRing: (0, focusRing_1.buildFocusRing)(source),
     surfaceRaised: (0, surfaceRaised_1.buildSurfaceRaised)(source),
+    star: (0, star_1.buildStar)(source.backgroundColor.main),
 });
 exports.finalizeLightPalette = finalizeLightPalette;
 // NOTE: withFocusRing is outermost — it must see primary and surfaces together, after every earlier step.

package/dist/Theme/tokens/brands/zinc/palette.dark.d.ts

@@ -203,5 +203,6 @@ declare const palette: {
     textMuted: string;
     onSemantic: import("../..").SemanticTextTokens;
     surfaceRaised: string;
+    star: string;
 };
 export default palette;

package/dist/Theme/tokens/builders/buildDarkPalette.js

@@ -10,6 +10,7 @@ const mutedText_1 = require("./mutedText");
 const semanticText_1 = require("./semanticText");
 const focusRing_1 = require("./focusRing");
 const surfaceRaised_1 = require("./surfaceRaised");
+const star_1 = require("./star");
 // Structural ramps are rebuilt at explicit targets (not reversed — light ramps bottom near 35%);
 // utility hues are reversed so index roles survive; brand/semantic ramps shift one step lighter.
 const SCALE_KEYS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
@@ -211,6 +212,7 @@ function buildDarkPalette(light) {
         onSemantic: (0, semanticText_1.buildOnSemantic)(semantic, light.white, light.black),
         focusRing: (0, focusRing_1.buildFocusRing)({ primary, background, backgroundColor: namedSurfaces }),
         surfaceRaised: (0, surfaceRaised_1.buildSurfaceRaised)({ backgroundColor: namedSurfaces, background, white }),
+        star: (0, star_1.buildStar)(namedSurfaces.main),
         sidebar: (0, sidebarAccent_1.withSidebarTokens)(light),
         boxShadow: {
             primary: (0, buildBrandTokens_1.buildPrimaryShadowTint)(primary[500]),

package/dist/Theme/tokens/builders/index.d.ts

@@ -11,3 +11,4 @@ export * from "./tone";
 export * from "./scrim";
 export * from "./tooltipSurface";
 export * from "./surfaceRaised";
+export * from "./star";

package/dist/Theme/tokens/builders/index.js

@@ -27,3 +27,4 @@ __exportStar(require("./tone"), exports);
 __exportStar(require("./scrim"), exports);
 __exportStar(require("./tooltipSurface"), exports);
 __exportStar(require("./surfaceRaised"), exports);
+__exportStar(require("./star"), exports);

package/dist/Theme/tokens/builders/rechartsTheme.d.ts

@@ -0,0 +1,56 @@
+import type { PaletteProps } from "../types";
+export interface RechartsGridTheme {
+    stroke: string;
+    strokeDasharray: string;
+}
+export interface RechartsAxisTheme {
+    stroke: string;
+    tick: {
+        fill: string;
+        fontSize: string;
+        fontFamily: string;
+    };
+}
+export interface RechartsTooltipTheme {
+    contentStyle: {
+        backgroundColor: string;
+        border: string;
+        borderRadius: string;
+        color: string;
+        fontSize: string;
+        fontFamily: string;
+    };
+    labelStyle: {
+        color: string;
+        fontWeight: number;
+    };
+    itemStyle: {
+        color: string;
+    };
+    cursor: {
+        stroke: string;
+        strokeDasharray: string;
+    };
+}
+export interface RechartsLegendTheme {
+    wrapperStyle: {
+        color: string;
+        fontSize: string;
+        fontFamily: string;
+    };
+}
+export interface RechartsChartTheme {
+    seriesColors: string[];
+    grid: RechartsGridTheme;
+    axis: RechartsAxisTheme;
+    tooltip: RechartsTooltipTheme;
+    legend: RechartsLegendTheme;
+    referenceLine: {
+        stroke: string;
+        strokeDasharray: string;
+    };
+    surface: string;
+    text: string;
+    muted: string;
+}
+export declare function buildRechartsTheme(colors: PaletteProps): RechartsChartTheme;

package/dist/Theme/tokens/builders/rechartsTheme.js

@@ -0,0 +1,43 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildRechartsTheme = buildRechartsTheme;
+const radii_1 = __importDefault(require("../primitives/radii"));
+const chartColorsFromTheme_1 = require("./chartColorsFromTheme");
+const FONT = "inherit";
+const FONT_SIZE = "12px";
+const DASH = "4 4";
+// Reuses chartInk/getCategoricalSeriesColors — no parallel color derivation. No recharts import.
+function buildRechartsTheme(colors) {
+    const ink = (0, chartColorsFromTheme_1.chartInk)(colors);
+    return {
+        seriesColors: (0, chartColorsFromTheme_1.getCategoricalSeriesColors)(colors),
+        grid: { stroke: ink.grid, strokeDasharray: DASH },
+        axis: {
+            stroke: ink.grid,
+            tick: { fill: ink.axis, fontSize: FONT_SIZE, fontFamily: FONT },
+        },
+        tooltip: {
+            contentStyle: {
+                backgroundColor: ink.tooltipBg,
+                border: `1px solid ${ink.grid}`,
+                borderRadius: radii_1.default.md,
+                color: ink.text,
+                fontSize: FONT_SIZE,
+                fontFamily: FONT,
+            },
+            labelStyle: { color: ink.text, fontWeight: 600 },
+            itemStyle: { color: ink.text },
+            cursor: { stroke: ink.grid, strokeDasharray: DASH },
+        },
+        legend: {
+            wrapperStyle: { color: ink.muted, fontSize: FONT_SIZE, fontFamily: FONT },
+        },
+        referenceLine: { stroke: ink.muted, strokeDasharray: DASH },
+        surface: ink.surface,
+        text: ink.text,
+        muted: ink.muted,
+    };
+}

package/dist/Theme/tokens/builders/star.d.ts

@@ -0,0 +1,3 @@
+export declare const STAR_ON_LIGHT = "#f5a70a";
+export declare const STAR_ON_DARK = "#f6b93b";
+export declare const buildStar: (canvas: string) => string;

package/dist/Theme/tokens/builders/star.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildStar = exports.STAR_ON_DARK = exports.STAR_ON_LIGHT = void 0;
+const color_1 = require("./color");
+exports.STAR_ON_LIGHT = "#f5a70a";
+exports.STAR_ON_DARK = "#f6b93b";
+const buildStar = (canvas) => (0, color_1.relativeLuminance)(canvas) > 0.18 ? exports.STAR_ON_LIGHT : exports.STAR_ON_DARK;
+exports.buildStar = buildStar;

package/dist/Theme/tokens/types.d.ts

@@ -122,10 +122,12 @@ export type PaletteProps = {
     onSemantic: SemanticTextTokens;
     /** Dialog/drawer/popover/menu surface: `background[50]` in light, one elevation step up in dark. */
     surfaceRaised: string;
+    /** Rating-star gold, the same hue in every brand. Decorative: always pair it with a numeric rating. */
+    star: string;
 };
 /** What a brand writes by hand; every token required, so a gap is a compile error. */
 /** Derived tokens are excluded — `finalizeLightPalette` resolves them per brand. */
-export type BrandPaletteSource = Omit<PaletteProps, "accentText" | "textMuted" | "semanticText" | "sidebar" | "onPrimary" | "onSemantic" | "focusRing" | "surfaceRaised"> & {
+export type BrandPaletteSource = Omit<PaletteProps, "accentText" | "textMuted" | "semanticText" | "sidebar" | "onPrimary" | "onSemantic" | "focusRing" | "surfaceRaised" | "star"> & {
     sidebar: {
         background: ColorScale;
     };

package/dist/Theme/useChartTheme.d.ts

@@ -0,0 +1,4 @@
+import type { RechartsAxisTheme, RechartsChartTheme, RechartsGridTheme, RechartsLegendTheme, RechartsTooltipTheme } from "./tokens/builders/rechartsTheme";
+export type { RechartsAxisTheme, RechartsChartTheme, RechartsGridTheme, RechartsLegendTheme, RechartsTooltipTheme, };
+export declare const useChartTheme: () => RechartsChartTheme;
+export default useChartTheme;

package/dist/Theme/useChartTheme.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useChartTheme = void 0;
+const react_1 = require("react");
+const useCustomTheme_1 = require("./useCustomTheme");
+const rechartsTheme_1 = require("./tokens/builders/rechartsTheme");
+const useChartTheme = () => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    return (0, react_1.useMemo)(() => (0, rechartsTheme_1.buildRechartsTheme)(colors), [colors]);
+};
+exports.useChartTheme = useChartTheme;
+exports.default = exports.useChartTheme;

package/dist/Utils/price.d.ts

@@ -0,0 +1,16 @@
+export type PriceFormatOptions = {
+    currency?: string;
+    locale?: string;
+    maximumFractionDigits?: number;
+};
+export declare const DEFAULT_CURRENCY = "INR";
+export declare const DEFAULT_LOCALE = "en-IN";
+export declare function formatPrice(value: number, options?: PriceFormatOptions): string;
+export declare function discountPercent(price: number, mrp?: number): number;
+export declare function discountAmount(price: number, mrp?: number): number;
+export type UnitPrice = {
+    value: number;
+    per: number;
+    unit: string;
+};
+export declare function unitPrice(price: number, quantity: number, unit: string, per?: number): UnitPrice | null;

package/dist/Utils/price.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_LOCALE = exports.DEFAULT_CURRENCY = void 0;
+exports.formatPrice = formatPrice;
+exports.discountPercent = discountPercent;
+exports.discountAmount = discountAmount;
+exports.unitPrice = unitPrice;
+exports.DEFAULT_CURRENCY = "INR";
+exports.DEFAULT_LOCALE = "en-IN";
+function formatPrice(value, options = {}) {
+    const { currency = exports.DEFAULT_CURRENCY, locale = exports.DEFAULT_LOCALE, maximumFractionDigits } = options;
+    const whole = Number.isInteger(value);
+    return new Intl.NumberFormat(locale, {
+        style: "currency",
+        currency,
+        minimumFractionDigits: whole ? 0 : 2,
+        maximumFractionDigits: maximumFractionDigits !== null && maximumFractionDigits !== void 0 ? maximumFractionDigits : (whole ? 0 : 2),
+    }).format(value);
+}
+function discountPercent(price, mrp) {
+    if (mrp === undefined || mrp <= price || mrp <= 0)
+        return 0;
+    return Math.round(((mrp - price) / mrp) * 100);
+}
+function discountAmount(price, mrp) {
+    if (mrp === undefined || mrp <= price)
+        return 0;
+    return mrp - price;
+}
+function unitPrice(price, quantity, unit, per = 1) {
+    if (!(quantity > 0))
+        return null;
+    return { value: Math.round((price / quantity) * per * 100) / 100, per, unit };
+}

package/dist/esm/Components/AddressCard/AddressCard.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { Box, Flex, Text } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { RadioIndicator, selectableSurface, useSelectable } from "../CheckoutKit/selectable.js";
+import Button from "../Button/Button.js";
+import Tag from "../Tag/Tag.js";
+const DEFAULT_LABELS = { default: "Default", edit: "Edit", remove: "Remove" };
+/** Tonal delivery-address card: name, tags, lines and calm Edit/Remove actions; selection is a ring plus a check. */
+const AddressCard = ({ value, name, phone, lines, tag, isDefault = false, note, selected, onSelect, onEdit, onRemove, disabled = false, labels, "data-testid": testId, }) => {
+    const { colors } = useCustomTheme();
+    const uid = useId();
+    const nameId = `${uid}-name`;
+    const bodyId = `${uid}-body`;
+    const copy = { ...DEFAULT_LABELS, ...labels };
+    const { isSelected, interactive, inGroup, ringed, props } = useSelectable({ value, selected, disabled, onSelect });
+    const selectable = inGroup || !!onSelect;
+    return (_jsxs(Flex, { direction: "column", "data-testid": testId, "data-selected": isSelected || undefined, ...selectableSurface(colors, { selected: isSelected && selectable, disabled, interactive, ringed }), children: [_jsxs(Flex, { ...props, "data-radio": true, "aria-disabled": selectable && disabled ? true : undefined, "aria-labelledby": props.role ? nameId : undefined, "aria-describedby": props.role ? bodyId : undefined, gap: 3, p: 4, pb: onEdit || onRemove ? 2 : 4, borderRadius: "1rem", cursor: interactive ? "pointer" : "default", outline: "none", align: "flex-start", children: [selectable && (_jsx(Box, { mt: 0.5, children: _jsx(RadioIndicator, { selected: isSelected }) })), _jsxs(Flex, { direction: "column", gap: 1, flex: 1, minW: 0, children: [_jsxs(Flex, { align: "center", gap: 2, wrap: "wrap", children: [_jsx(Text, { as: "span", id: nameId, fontSize: "sm", fontWeight: 700, lineHeight: 1.4, color: colors.header[900], children: name }), tag && _jsx(Tag, { label: tag, size: "xs", tone: "neutral" }), isDefault && _jsx(Tag, { label: copy.default, size: "xs", tone: "neutral" })] }), _jsxs(Box, { id: bodyId, children: [lines.map((line) => (_jsx(Text, { as: "span", display: "block", fontSize: "sm", lineHeight: 1.5, color: colors.text[800], children: line }, line))), phone && (_jsx(Text, { as: "span", display: "block", mt: 1, fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, sx: { fontVariantNumeric: "tabular-nums" }, children: phone })), note && (_jsx(Text, { as: "span", display: "block", mt: 1, fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, children: note }))] })] })] }), (onEdit || onRemove) && (_jsxs(Flex, { gap: 1, pl: selectable ? "2.75rem" : 1, pr: 2, pb: 2, children: [onEdit && (_jsx(Button, { variant: "ghost", colorScheme: "gray", size: "sm", onClick: onEdit, "aria-label": `${copy.edit} address: ${name}`, children: copy.edit })), onRemove && (_jsx(Button, { variant: "ghost", colorScheme: "gray", size: "sm", onClick: onRemove, "aria-label": `${copy.remove} address: ${name}`, children: copy.remove }))] }))] }));
+};
+export default AddressCard;

package/dist/esm/Components/AddressCard/AddressCardGroup.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SelectableGroup } from "../CheckoutKit/selectable.js";
+/** Radiogroup wrapper for `AddressCard`s. */
+const AddressCardGroup = (props) => _jsx(SelectableGroup, { ...props });
+export default AddressCardGroup;

package/dist/esm/Components/AddressCard/AddressCardProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/BagBar/BagBar.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex, Text } from "@chakra-ui/react";
+import { ChevronUp } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { overlayScrim } from "../../Theme/tokens/builders/scrim.js";
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { formatPrice } from "../../Utils/price.js";
+import Button from "../Button/Button.js";
+const DEFAULT_LABELS = { region: "Bag total", total: "Total", viewDetails: "View price details", cta: "Place order" };
+const GLASS_ALPHA = Math.round(0.86 * 255).toString(16);
+const BLUR = "blur(20px) saturate(180%)";
+const NO_BLUR_SUPPORT = "@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)))";
+const SAFE_BOTTOM = "calc(0.75rem + env(safe-area-inset-bottom, 0px))";
+/** Glass bar for the bag and checkout: total and price-details link left, the single primary action right. */
+const BagBar = ({ total, note, onViewDetails, ctaLabel, onCta, ctaDisabled = false, ctaLoading = false, position = "static", zIndex = 10, currency, locale, labels, "data-testid": testId, }) => {
+    const { colors } = useCustomTheme();
+    const copy = { ...DEFAULT_LABELS, ...labels };
+    const sticky = position === "bottom";
+    return (_jsxs(Flex, { as: "section", "aria-label": copy.region, align: "center", justify: "space-between", gap: 4, px: 4, pt: 3, pb: SAFE_BOTTOM, borderTopRadius: "1.5rem", bg: `${colors.surfaceRaised}${GLASS_ALPHA}`, backdropFilter: BLUR, position: sticky ? "sticky" : "static", bottom: sticky ? 0 : undefined, zIndex: sticky ? zIndex : undefined, boxShadow: sticky ? `0 -12px 32px -16px ${overlayScrim(colors)}` : "none", "data-testid": testId, sx: { WebkitBackdropFilter: BLUR, [NO_BLUR_SUPPORT]: { backgroundColor: colors.surfaceRaised } }, children: [_jsxs(Box, { minW: 0, children: [_jsxs(Flex, { align: "baseline", gap: 2, wrap: "wrap", children: [_jsx(Text, { as: "span", fontSize: "xs", fontWeight: 600, color: colors.textMuted, children: copy.total }), _jsx(Text, { as: "span", fontSize: "1.25rem", fontWeight: 700, lineHeight: 1.2, letterSpacing: "-0.02em", color: colors.header[900], sx: { fontVariantNumeric: "tabular-nums" }, "data-testid": "bag-bar-total", children: formatPrice(total, { currency, locale }) })] }), note && (_jsx(Text, { as: "span", display: "block", fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, children: note })), onViewDetails && (_jsxs(Box, { as: "button", type: "button", onClick: onViewDetails, display: "inline-flex", alignItems: "center", gap: 1, position: "relative", fontSize: "xs", fontWeight: 600, color: colors.accentText, borderRadius: "sm", transition: transitionFor(["opacity"]), _hover: { opacity: 0.8 }, sx: {
+                            ...focusVisibleStyles(colors),
+                            ...reducedMotionSx(),
+                            "&::before": { content: '""', position: "absolute", inset: "-0.75rem -0.5rem" },
+                        }, children: [copy.viewDetails, _jsx(ChevronUp, { size: 14, "aria-hidden": true })] }))] }), _jsx(Button, { size: "lg", onClick: onCta, isDisabled: ctaDisabled, isLoading: ctaLoading, flexShrink: 0, children: ctaLabel !== null && ctaLabel !== void 0 ? ctaLabel : copy.cta })] }));
+};
+export default BagBar;

package/dist/esm/Components/BagBar/BagBarProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/CartItem/CartItem.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex, Text } from "@chakra-ui/react";
+import { Truck } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { formatPrice } from "../../Utils/price.js";
+import Button from "../Button/Button.js";
+import PriceBlock from "../PriceBlock/PriceBlock.js";
+import QuantityStepper from "../QuantityStepper/QuantityStepper.js";
+import Skeletons from "../Skeletons/Skeletons.js";
+import StockStatus from "../StockStatus/StockStatus.js";
+import { summariseOptions } from "./cartItemOptions.js";
+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 (_jsxs(Flex, { gap: 3, align: "flex-start", "aria-busy": "true", "data-testid": "cart-item-skeleton", children: [_jsx(Skeletons, { type: "skeleton", height: thumb.h, width: thumb.w, borderRadius: thumb.radius }), _jsxs(Flex, { direction: "column", gap: 2, flex: 1, minW: 0, children: [_jsx(Skeletons, { type: "skeleton", height: 3, width: "35%" }), _jsx(Skeletons, { type: "skeleton", height: 4, width: "80%" }), _jsx(Skeletons, { type: "skeleton", height: 3, width: "45%" }), layout === "row" && _jsx(Skeletons, { 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 } = useCustomTheme();
+    const copy = { ...DEFAULT_LABELS, ...labels };
+    const compact = layout === "compact";
+    const thumb = THUMB[layout];
+    const fmt = { currency, locale };
+    if (isLoading)
+        return _jsx(CartItemSkeleton, { layout: layout });
+    const summary = optionsSummary !== null && optionsSummary !== void 0 ? optionsSummary : 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 = (_jsx(QuantityStepper, { size: "sm", variant: "soft", value: quantity, min: minQuantity, max: maxQuantity, removable: !!onRemove, onRemove: onRemove, onValueChange: onQuantityChange, itemLabel: title }));
+    return (_jsxs(Flex, { gap: 3, align: "flex-start", "data-testid": testId, "data-unavailable": unavailable || undefined, children: [_jsx(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 && _jsx(Box, { as: "img", src: image, alt: imageAlt, w: "100%", h: "100%", objectFit: "cover", display: "block" }) }), _jsxs(Flex, { direction: "column", flex: 1, minW: 0, gap: 1.5, children: [_jsxs(Flex, { direction: "column", gap: 0.5, minW: 0, children: [brand && (_jsx(Text, { as: "span", fontSize: "xs", fontWeight: 600, lineHeight: 1.4, color: colors.textMuted, noOfLines: 1, children: brand })), _jsx(Text, { ...titleProps, display: "block", textAlign: "left", fontSize: "sm", fontWeight: 600, lineHeight: 1.4, color: titleInk, noOfLines: 2, borderRadius: "sm", cursor: linked ? "pointer" : undefined, transition: transitionFor(["color"]), _hover: linked ? { textDecoration: "underline" } : undefined, sx: { ...focusVisibleStyles(colors), ...reducedMotionSx() }, children: title }), summary && (_jsx(Text, { as: "span", fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, children: summary }))] }), unavailable ? (_jsxs(Flex, { direction: "column", gap: 0.5, children: [_jsx(StockStatus, { status: "out-of-stock", message: copy.outOfStock, size: "sm" }), _jsx(Text, { as: "span", fontSize: "xs", color: colors.textMuted, children: copy.notIncluded })] })) : (_jsxs(Flex, { align: "flex-end", justify: "space-between", gap: 3, wrap: "wrap", children: [compact ? (_jsx(Text, { as: "span", fontSize: "xs", color: colors.textMuted, sx: { fontVariantNumeric: "tabular-nums" }, children: copy.quantity(quantity) })) : (stepper), _jsx(Box, { ml: "auto", children: _jsx(PriceBlock, { size: compact ? "sm" : "md", align: "end", price: lineTotal, mrp: lineMrp, taxNote: quantity > 1 ? copy.each(formatPrice(price, fmt)) : undefined, ...fmt }) })] })), !unavailable && !compact && stock && stock !== "in-stock" && (_jsx(StockStatus, { status: stock, count: stockCount, message: stockMessage, size: "sm" })), !unavailable && deliveryBy && (_jsxs(Flex, { align: "center", gap: 1.5, color: colors.textMuted, children: [_jsx(Truck, { size: 13, "aria-hidden": true }), _jsx(Text, { as: "span", fontSize: "xs", lineHeight: 1.4, children: copy.delivery(deliveryBy) })] })), !compact && (onRemove || (onMoveToWishlist && !unavailable)) && (_jsxs(Flex, { gap: 1, ml: -3, mt: 0.5, children: [onMoveToWishlist && !unavailable && (_jsx(Button, { variant: "ghost", colorScheme: "gray", size: "sm", onClick: onMoveToWishlist, "aria-label": `${copy.moveToWishlist}: ${title}`, children: copy.moveToWishlist })), onRemove && (_jsx(Button, { variant: "ghost", colorScheme: "gray", size: "sm", onClick: onRemove, "aria-label": `${copy.remove}: ${title}`, children: copy.remove }))] }))] })] }));
+};
+export default CartItem;

package/dist/esm/Components/CartItem/CartItemProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/CartItem/cartItemOptions.js

@@ -0,0 +1,9 @@
+/** "Indigo Wash · M" from the chosen option labels, in axis order; axes with no pick are skipped. */
+export 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(" · ");
+};

package/dist/esm/Components/CheckoutKit/selectable.js

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

package/dist/esm/Components/Commerce/commerceTypes.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/Commerce/commerceVariants.js

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

package/dist/esm/Components/Commerce/index.js

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

package/dist/esm/Components/Commerce/useContainerWidth.js

@@ -0,0 +1,21 @@
+import { useLayoutEffect, useState } from "react";
+/** Width of the referenced element, or undefined until measurable (SSR, jsdom, no ResizeObserver). */
+export const useContainerWidth = (ref) => {
+    const [width, setWidth] = useState(undefined);
+    useLayoutEffect(() => {
+        const node = ref.current;
+        if (!node)
+            return undefined;
+        const measure = () => {
+            const next = node.getBoundingClientRect().width;
+            setWidth(next > 0 ? Math.round(next) : undefined);
+        };
+        measure();
+        if (typeof ResizeObserver === "undefined")
+            return undefined;
+        const observer = new ResizeObserver(measure);
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, [ref]);
+    return width;
+};