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

package/dist/Components/VariantSelector/VariantSelector.js

@@ -0,0 +1,123 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const scrollbar_1 = require("../../Theme/tokens/builders/scrollbar");
+const OptionChip_1 = __importDefault(require("../OptionChip/OptionChip"));
+const commerceVariants_1 = require("../Commerce/commerceVariants");
+const variantSelection_1 = require("./variantSelection");
+const GAP = "0.5rem";
+const GRID_MIN = {
+    chip: "4rem",
+    swatch: "3rem",
+    "image-tile": "4.75rem",
+    pack: "6.5rem",
+};
+const cellKey = (axisId, valueId) => `${axisId}\u0000${valueId}`;
+/** Per-axis radiogroups whose availability is derived from `variants`; no vertical-specific vocabulary lives here. */
+const VariantSelector = ({ axes, variants, value, defaultValue, onValueChange, error, showSelectedLabel = false, showLowStock = false, size = "md", layout = "wrap", onGuideClick, "data-testid": testId, }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const uid = (0, react_1.useId)();
+    const statusId = `${uid}-status`;
+    const cells = (0, react_1.useRef)(new Map());
+    const [inner, setInner] = (0, react_1.useState)(defaultValue !== null && defaultValue !== void 0 ? defaultValue : {});
+    const [focus, setFocus] = (0, react_1.useState)(null);
+    const selection = value !== null && value !== void 0 ? value : inner;
+    const commit = (0, react_1.useCallback)((next) => {
+        if ((0, variantSelection_1.sameSelection)(next, selection))
+            return;
+        if (value === undefined)
+            setInner(next);
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(next, (0, commerceVariants_1.findVariant)(axes, variants, next));
+    }, [axes, variants, selection, value, onValueChange]);
+    const choose = (axisId, valueId) => {
+        if ((0, variantSelection_1.isSoldOutEverywhere)(variants, axisId, valueId))
+            return;
+        commit((0, variantSelection_1.selectValue)(axes, variants, selection, axisId, valueId));
+    };
+    const lowStockHint = (axis, option) => {
+        if (!showLowStock)
+            return undefined;
+        const left = (0, commerceVariants_1.remainingStock)(variants, selection, axis.id, option.id);
+        if (left === undefined || left <= 0 || left > commerceVariants_1.LOW_STOCK_THRESHOLD)
+            return undefined;
+        return `${left} left`;
+    };
+    const hintFor = (axis, option) => {
+        const low = lowStockHint(axis, option);
+        if (!low)
+            return option.hint;
+        return axis.type === "pack" && option.hint ? `${option.hint} · ${low}` : low;
+    };
+    const onKeyDown = (axis) => (event) => {
+        var _a;
+        const index = axis.values.findIndex((option) => cells.current.get(cellKey(axis.id, option.id)) === document.activeElement);
+        if (index < 0)
+            return;
+        const last = axis.values.length - 1;
+        const target = event.key === "ArrowRight" || event.key === "ArrowDown"
+            ? (index + 1) % axis.values.length
+            : event.key === "ArrowLeft" || event.key === "ArrowUp"
+                ? (index - 1 + axis.values.length) % axis.values.length
+                : event.key === "Home"
+                    ? 0
+                    : event.key === "End"
+                        ? last
+                        : -1;
+        if (target < 0)
+            return;
+        event.preventDefault();
+        const next = axis.values[target];
+        (_a = cells.current.get(cellKey(axis.id, next.id))) === null || _a === void 0 ? void 0 : _a.focus();
+        setFocus({ axisId: axis.id, valueId: next.id });
+        if ((0, commerceVariants_1.isOptionAvailable)(variants, selection, axis.id, next.id))
+            choose(axis.id, next.id);
+    };
+    const containerStyles = (axis) => {
+        if (layout === "grid") {
+            return { display: "grid", gridTemplateColumns: `repeat(auto-fill, minmax(${GRID_MIN[axis.type]}, 1fr))`, gap: GAP };
+        }
+        if (layout === "scroll") {
+            return {
+                display: "flex",
+                flexWrap: "nowrap",
+                gap: GAP,
+                overflowX: "auto",
+                pt: "0.5rem",
+                mt: "-0.5rem",
+                pr: "0.5rem",
+                scrollSnapType: "x proximity",
+                sx: (0, scrollbar_1.scrollbarStyles)(colors, "hover"),
+            };
+        }
+        return { display: "flex", flexWrap: "wrap", gap: GAP, pt: "0.25rem" };
+    };
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 5, "data-testid": testId, children: [axes.map((axis) => {
+                var _a, _b;
+                const labelId = `${uid}-${axis.id}-label`;
+                const picked = axis.values.find((option) => option.id === selection[axis.id]);
+                const unpicked = selection[axis.id] === undefined;
+                const invalid = !!error && unpicked;
+                const available = axis.values.map((option) => (0, commerceVariants_1.isOptionAvailable)(variants, selection, axis.id, option.id));
+                const firstAvailable = (_a = axis.values.find((_, i) => available[i])) !== null && _a !== void 0 ? _a : axis.values[0];
+                const stopId = (focus === null || focus === void 0 ? void 0 : focus.axisId) === axis.id ? focus.valueId : (_b = (picked !== null && picked !== void 0 ? picked : firstAvailable)) === null || _b === void 0 ? void 0 : _b.id;
+                const { guide } = axis;
+                return ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "baseline", justify: "space-between", gap: 3, mb: 3, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "baseline", gap: 2, minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", id: labelId, fontSize: "sm", fontWeight: 600, color: colors.header[900], children: axis.label }), showSelectedLabel && picked ? ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", fontSize: "sm", color: colors.textMuted, noOfLines: 1, children: picked.label })) : null] }), guide ? ((0, jsx_runtime_1.jsxs)(react_2.Box, { as: "button", type: "button", display: "inline-flex", alignItems: "center", gap: 1, flexShrink: 0, fontSize: "sm", fontWeight: 600, color: colors.accentText, borderRadius: "md", onClick: () => {
+                                        guide.onClick();
+                                        onGuideClick === null || onGuideClick === void 0 ? void 0 : onGuideClick(axis.id);
+                                    }, sx: (0, focusRing_styles_1.focusVisibleStyles)(colors), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Ruler, { size: 14, "aria-hidden": true }), guide.label] })) : null] }), (0, jsx_runtime_1.jsx)(react_2.Box, { role: "radiogroup", "aria-labelledby": labelId, "aria-invalid": invalid || undefined, "aria-describedby": invalid ? statusId : undefined, onKeyDown: onKeyDown(axis), onBlur: (event) => {
+                                if (!event.currentTarget.contains(event.relatedTarget))
+                                    setFocus(null);
+                            }, ...containerStyles(axis), children: axis.values.map((option, i) => ((0, jsx_runtime_1.jsx)(OptionChip_1.default, { ref: (node) => {
+                                    cells.current.set(cellKey(axis.id, option.id), node);
+                                }, label: option.label, variant: axis.type, swatch: option.swatch, image: option.image, hint: hintFor(axis, option), showLabel: axis.type === "swatch" && layout === "grid", size: size, fullWidth: layout === "grid" && (axis.type === "chip" || axis.type === "pack"), selected: option.id === selection[axis.id], unavailable: !available[i], invalid: invalid, tabIndex: option.id === stopId ? 0 : -1, onFocus: () => setFocus({ axisId: axis.id, valueId: option.id }), onSelect: () => choose(axis.id, option.id) }, option.id))) })] }, axis.id));
+            }), (0, jsx_runtime_1.jsx)(react_2.Box, { role: "status", id: statusId, "aria-live": "polite", mt: error ? -2 : 0, children: error ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 1.5, color: colors.semanticText.error, fontSize: "sm", fontWeight: 600, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CircleAlert, { size: 14, "aria-hidden": true }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", children: error })] })) : null })] }));
+};
+exports.default = VariantSelector;

package/dist/Components/VariantSelector/VariantSelectorProps.d.ts

@@ -0,0 +1,27 @@
+import type { OptionAxis, ProductVariant, VariantSelection } from "../Commerce/commerceTypes";
+import type { OptionChipSize } from "../OptionChip/OptionChipProps";
+/** How an axis lays out its options: wrapping rows, one horizontal scroller, or an even grid (which also prints swatch names). */
+export type VariantSelectorLayout = "wrap" | "scroll" | "grid";
+/** Config-driven option picker for any product vertical; every axis label and value comes from `axes`. */
+export interface VariantSelectorProps {
+    /** One radiogroup per axis, in order. */
+    axes: OptionAxis[];
+    /** Availability is derived per combination from these variants' stock. */
+    variants: ProductVariant[];
+    /** Controlled selection, axis id to option value id. */
+    value?: VariantSelection;
+    defaultValue?: VariantSelection;
+    /** Receives the new selection and the matching variant, or undefined while the selection is incomplete or has no variant. */
+    onValueChange?: (selection: VariantSelection, variant: ProductVariant | undefined) => void;
+    /** Prompt such as "Select a size": shown as a status message and rings every axis still unpicked. */
+    error?: string;
+    /** Prints the picked value beside each axis label ("Colour  Indigo Wash"). */
+    showSelectedLabel?: boolean;
+    /** Tags a value "N left" only when its real remaining stock is at or under LOW_STOCK_THRESHOLD. */
+    showLowStock?: boolean;
+    size?: OptionChipSize;
+    layout?: VariantSelectorLayout;
+    /** Also called when an axis `guide` link is clicked, after the guide's own onClick. */
+    onGuideClick?: (axisId: string) => void;
+    "data-testid"?: string;
+}

package/dist/Components/VariantSelector/VariantSelectorProps.js

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

package/dist/Components/VariantSelector/variantSelection.d.ts

@@ -0,0 +1,6 @@
+import type { OptionAxis, ProductVariant, VariantSelection } from "../Commerce/commerceTypes";
+/** Picks `valueId` on `axisId`, then drops every other pick that no sellable variant can pair with it. */
+export declare const selectValue: (axes: OptionAxis[], variants: ProductVariant[], selection: VariantSelection, axisId: string, valueId: string) => VariantSelection;
+/** Sold out under every combination, so picking it can never lead to a purchasable variant. */
+export declare const isSoldOutEverywhere: (variants: ProductVariant[], axisId: string, valueId: string) => boolean;
+export declare const sameSelection: (a: VariantSelection, b: VariantSelection) => boolean;

package/dist/Components/VariantSelector/variantSelection.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sameSelection = exports.isSoldOutEverywhere = exports.selectValue = void 0;
+const commerceVariants_1 = require("../Commerce/commerceVariants");
+/** Picks `valueId` on `axisId`, then drops every other pick that no sellable variant can pair with it. */
+const selectValue = (axes, variants, selection, axisId, valueId) => {
+    const next = { ...selection, [axisId]: valueId };
+    for (const axis of axes) {
+        const pick = next[axis.id];
+        if (axis.id === axisId || pick === undefined)
+            continue;
+        if (!(0, commerceVariants_1.isOptionAvailable)(variants, next, axis.id, pick))
+            delete next[axis.id];
+    }
+    return next;
+};
+exports.selectValue = selectValue;
+/** Sold out under every combination, so picking it can never lead to a purchasable variant. */
+const isSoldOutEverywhere = (variants, axisId, valueId) => !(0, commerceVariants_1.isOptionAvailable)(variants, {}, axisId, valueId);
+exports.isSoldOutEverywhere = isSoldOutEverywhere;
+const sameSelection = (a, b) => {
+    const keys = new Set([...Object.keys(a), ...Object.keys(b)]);
+    return [...keys].every((key) => a[key] === b[key]);
+};
+exports.sameSelection = sameSelection;

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

@@ -0,0 +1,4 @@
+import type { WishlistToggleProps } from "./WishlistToggleProps";
+/** Heart toggle for saving a product: glass on media, tonal or bare elsewhere; pops once when saved. */
+declare const WishlistToggle: ({ selected, defaultSelected, onSelectedChange, size, variant, label, isDisabled, "data-testid": testId, }: WishlistToggleProps) => import("react/jsx-runtime").JSX.Element;
+export default WishlistToggle;

package/dist/Components/WishlistToggle/WishlistToggle.js

@@ -0,0 +1,65 @@
+"use strict";
+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 useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
+const motion_2 = require("../../Theme/chakra/motion");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
+const scrim_1 = require("../../Theme/tokens/builders/scrim");
+const HIT_PX = { sm: 32, md: 44, lg: 48 };
+const POP_MS = 320;
+const pop = (0, react_3.keyframes) `
+  0% { transform: scale(1); }
+  40% { transform: scale(1.2); }
+  100% { transform: scale(1); }
+`;
+/** Heart toggle for saving a product: glass on media, tonal or bare elsewhere; pops once when saved. */
+const WishlistToggle = ({ selected, defaultSelected = false, onSelectedChange, size = "md", variant = "soft", label, isDisabled = false, "data-testid": testId, }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const reduced = (0, motion_2.usePrefersReducedMotion)();
+    const [inner, setInner] = (0, react_1.useState)(defaultSelected);
+    const [popKey, setPopKey] = (0, react_1.useState)(0);
+    const on = selected !== null && selected !== void 0 ? selected : inner;
+    const spec = controlSizes_1.BUTTON_SIZES[size];
+    const hit = HIT_PX[size];
+    const icon = spec.iconSize + 2;
+    const popping = on && popKey > 0 && !reduced;
+    const toggle = () => {
+        const next = !on;
+        if (selected === undefined)
+            setInner(next);
+        if (next)
+            setPopKey((k) => k + 1);
+        onSelectedChange === null || onSelectedChange === void 0 ? void 0 : onSelectedChange(next);
+    };
+    const saved = (0, filledSurface_1.resolveFilledSurface)(colors.semantic.error, colors);
+    const look = (() => {
+        if (variant === "glass") {
+            return on
+                ? { bg: saved.fill, hoverBg: saved.hoverFill, color: saved.color }
+                : { bg: (0, scrim_1.overlayScrim)(colors), hoverBg: (0, scrim_1.overlayScrim)(colors), color: colors.white };
+        }
+        const ink = on ? colors.semanticText.error : variant === "soft" ? colors.header[900] : colors.textMuted;
+        return {
+            bg: variant === "soft" ? colors.background[100] : colors.transparent,
+            hoverBg: variant === "soft" ? colors.background[200] : colors.background[100],
+            color: ink,
+        };
+    })();
+    return ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", "aria-pressed": on, "aria-label": label !== null && label !== void 0 ? label : (on ? "Remove from wishlist" : "Add to wishlist"), disabled: isDisabled, onClick: toggle, "data-testid": testId, "data-selected": on || undefined, display: "inline-flex", alignItems: "center", justifyContent: "center", boxSize: `${hit}px`, flexShrink: 0, borderRadius: "full", cursor: isDisabled ? "not-allowed" : "pointer", opacity: isDisabled ? 0.5 : 1, sx: {
+            outline: "none",
+            "&:focus-visible > [data-disc]": (0, focusRing_styles_1.focusVisibleRing)(colors),
+            "&:hover:not(:disabled) > [data-disc]": { backgroundColor: look.hoverBg },
+            ...(reduced ? {} : { "&:active:not(:disabled) > [data-disc]": { transform: "scale(0.92)" } }),
+        }, children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", "data-disc": true, display: "inline-flex", alignItems: "center", justifyContent: "center", boxSize: spec.height, borderRadius: "full", bg: look.bg, color: look.color, transition: (0, motion_1.transitionFor)(["background-color", "color", "transform"]), sx: {
+                ...(variant === "glass" ? { backdropFilter: "blur(8px)", WebkitBackdropFilter: "blur(8px)" } : {}),
+                ...(0, motion_2.reducedMotionSx)(),
+            }, children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-flex", "data-pop": popping || undefined, animation: popping ? `${pop} ${POP_MS}ms ${motion_1.MOTION_EASE}` : undefined, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Heart, { size: icon, "aria-hidden": true, fill: on ? "currentColor" : "none", strokeWidth: 2 }) }, popKey) }) }));
+};
+exports.default = WishlistToggle;

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/primitives/controlSizes.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.isControlSize = exports.DEFAULT_CONTROL_SIZE = exports.CONTROL_SIZE_NAMES = exports.BUTTON_SIZES = exports.CONTROL_SIZES = void 0;
 /** Height scale for form fields and selects — text inputs, pickers, anything typed or picked into. */
 exports.CONTROL_SIZES = {
-    xs: { height: "1.5rem", fontSize: "0.75rem", paddingX: "0.5rem", iconSize: 12 },
+    xs: { height: "2rem", fontSize: "0.75rem", paddingX: "0.5rem", iconSize: 12 },
     sm: { height: "2.375rem", fontSize: "0.8125rem", paddingX: "0.75rem", iconSize: 14 },
     md: { height: "2.5rem", fontSize: "0.875rem", paddingX: "1rem", iconSize: 16 },
     lg: { height: "3rem", fontSize: "1rem", paddingX: "1.5rem", iconSize: 18 },

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 {};