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

package/CHANGELOG.md

@@ -18,11 +18,46 @@ next major.
 
 ### Added
 
+- **Commerce kit** — the components for a shop front, designed mobile-first (Pebble principles:
+  chromeless tonal cards, one loud action per view, selection never by colour alone). Product:
+  `Rating`, `PriceBlock`, `StockStatus`, `ProductBadges`, `WishlistToggle`, `OptionChip`,
+  `VariantSelector`, `QuantityStepper`, `MediaGallery` / `MediaLightbox`, `ProductCardGrid`,
+  `ProductCardSkeleton`, `QuickAddSheet`. Detail page: `StickyBuyBar`, `PincodeChecker`,
+  `TrustBadges`, `OffersList`, `SpecTable`, `ReviewSummary`, `ReviewList`, `DetailSections`.
+  Bag and checkout: `CartItem`, `OrderSummary`, `CouponField`, `AddressCard` / `AddressCardGroup`,
+  `PaymentOption` / `PaymentOptionGroup`, `OrderStatusTimeline`, `BagBar`. `VariantSelector` is
+  config-driven (`axes` + `variants`, any vertical) and derives per-combination availability.
+  Helpers: `stockState`, `findVariant`, `isOptionAvailable`, `remainingStock`, `priceRange`,
+  `firstAvailableSelection`, `selectionComplete`, `formatPrice`, `discountPercent`,
+  `discountAmount`, `unitPrice`. A **Storefront** page example in the playground wires them into a
+  working shop app (home, listing, product, wishlist, bag, checkout, order tracking).
+- **`star` palette token.** Rating-star gold, derived (`buildStar`) and identical in every brand.
+
+- **`Spinner` — `testId`.** Maps to `data-testid` on the rendered node, wins over a raw
+  `data-testid` passthrough. Lets consumers select a loading spinner in tests.
 - **`SegmentedControl` / `Switch` — `surface`.** The background the control is drawn on. Optional:
   the track is an opaque plate on any backdrop, so the labels read without it. Pass it to aim the
   plate's hairline edge at the real backdrop rather than at the page canvas.
 - **`MultiSelect` — `addOnBlur`.** Commits the typed address on focus-out as well as on Enter.
   Defaults to `false`, so existing call sites keep Enter-only behaviour.
+- **`StatCard` — `footer` / `sparkline`.** `footer` pins content below a divider at the bottom of
+  the card; `sparkline` sizes and positions a small inline trend chart beside the value (bring your
+  own — the library doesn't ship a mini-chart primitive). Neither renders while `isLoading`.
+- **`Table` — `columns[].label` accepts `ReactNode`, plus `labelText`.** A rich header (icon, badge,
+  tooltip trigger) is now safe everywhere a header used to be assumed to be text — sort/filter
+  button names, Manage Columns, the Group picker, filter chips, and saved column preferences all
+  read through a new `columnLabelText()` fallback chain instead of stringifying the node. Pass
+  `labelText` to control the derived text explicitly; a wide `ReactNode` header falls back to a
+  fixed width rather than auto-sizing from text length. `string`/`number` labels are unaffected.
+- **`SegmentedControl` — `shortLabel` / `orientation`.** `shortLabel` shows in place of `label`
+  below the `md` breakpoint (the full label is always restated as the accessible name);
+  `orientation="vertical"` stacks segments column-wise. Both optional, default unchanged.
+- **`SideBar` — `lockedReason`.** A tooltip explaining why a menu item is locked, shown on hover/
+  focus of a locked row (top-level, submenu, or a top-level item's `secondaryItems`).
+- **`useChartTheme`.** A hook wrapping the existing `chartInk`/`getCategoricalSeriesColors`
+  primitives into a ready-made theme for `recharts` consumers — series colors, grid/axis ink, and
+  tooltip/legend styling, all dark-mode aware. `recharts` itself is not a dependency of this
+  library; bring your own.
 
 - **Dark mode.** `PixelizeThemeProvider` (defaults to `system`), `useThemeMode`, `ThemeSwitcher`.
   Dark palettes are derived per brand from that brand's own light palette, so brand hue carries
@@ -47,6 +82,11 @@ next major.
 
 ### Changed
 
+- **`ProductCard` and `ProductDetails` are rewritten** — see Breaking below. `ProductCard` is a
+  chromeless 4:5 card (grid / list / rail, swatch dots that swap the photo, quick-add sheet or
+  direct add that morphs into a stepper, sold-out "Notify me", slots). `ProductDetails` is a
+  composed, controlled/uncontrolled product page with a sticky buy bar on mobile.
+
 - **Control heights: `xs` 24px → 30px, `sm` 32px → 38px, `md` 40px → 42px.** `lg` (48px) is
   unchanged. `CONTROL_SIZES` is the one scale behind every field, select and button, so `Button`,
   `TextInput`, `InputTextArea`, `NumberInput`, `PinInput`, `Select`, `SelectV2`, `SearchSelect`,
@@ -81,6 +121,15 @@ next major.
 
 ### Fixed
 
+- **`SingleDatePicker` / `RangeDatePicker` / `TimeOnlyPicker` popovers clipped inside a scrolling or
+  `overflow: hidden` modal.** They now portal to `document.body` (via Chakra's own `Portal`,
+  matching `Select`), so the calendar is no longer cut off by an ancestor's clipping or scroll
+  container. Also fixes Escape not closing the calendar while focus was inside it (it only
+  committed the value before).
+- **`SideBar`'s `locked` flag didn't block clicks on a top-level item's `secondaryItems` row.** The
+  rail/submenu/flyout rows already no-op'd a locked click; `SecondaryBar`'s own row renderer never
+  checked `locked` at all, so a locked secondary item stayed fully clickable with no lock icon. See
+  [COMPONENT-GOTCHAS.md](COMPONENT-GOTCHAS.md).
 - **Control-size regression: field and button heights are two scales again, not one.** A
   form-field-only bump had leaked into `Button`, `SegmentedControl`, `Tabs`, `TableToggle` and
   `Dropdown`'s trigger through one shared token. `CONTROL_SIZES` (fields/selects: xs 24 · sm 38 ·
@@ -311,6 +360,17 @@ Nothing is removed yet — each of these still ships its full implementation.
 
 ### Breaking — staged for the next major, not yet released
 
+**`ProductCard` / `ProductDetails` props are replaced, and `ProductImageSlider` is gone.** Zero
+known consumers in the Pixelize repos. `ProductCard` drops `id`, `label`, `description`,
+`productImage`, `tags`, `reviews`, `options`, `button`, `onClick`, `onAddToCart`, `onNotifyMe`,
+`onOptionChange`, `addToCart`, `goToCart`, `notifyMe`, `OnGoToCart`, `batch`, `size`,
+`avalabilitys`, `isQtyEditable`, `displayRating`; `ProductDetails` drops its old image/video,
+option and cart-callback props (it takes `product`, `selection`, `onAddToBag` and slots). Video
+and YouTube/Vimeo frames are now `ProductMedia` items in `MediaGallery`.
+
+**`star` is a required `PaletteProps` token.** A hand-written palette without it throws in
+`assertPixelizePalette` naming `star`; palettes built from the library's builders get it for free.
+
 **34 Chakra value passthroughs (and 12 type passthroughs) are removed from the Primitives barrel**,
 because each duplicated a component this library already owns. The point of the library is one
 place to change the UI; a Chakra twin beside an owned component means half the call sites bypass

package/COMPONENT-GOTCHAS.md

@@ -201,13 +201,13 @@ and wires `aria-controls` to them. Pick by that, never by the picture. A screen
 | A themed row of icon + text + icon, optionally a dropdown menu on the right | `ButtonGroupIcon` | The real "group" component despite `Buttons`' plural name suggesting otherwise |
 | *(avoid)* | `Buttons` (plural) | Legacy single-`Button` wrapper, not exported from the package root — see gotcha below |
 
-### Which "card" — `Card` / `ProductCard` / `ProductDetails` / `PaymentCard`
+### Which "card" — `Card` / `ProductCard` / `StatCard` / `PaymentCard`
 
 | Need | Component | Why not the others |
 | --- | --- | --- |
 | Generic bordered/padded container, no commerce semantics | `Card` | Layout wrapper with `header`/`footer` slots and a padded body — see gotcha below |
-| Compact product tile for a grid/listing page | `ProductCard` | Fixed size presets, single-image hover-swap, no gallery |
-| Full product detail page layout (gallery + description + variant picker) | `ProductDetails` | No card chrome of its own; same variant-list shape as `ProductCard` but named `price`, not `options` |
+| Product tile for a grid, list or rail (photo, price, rating, swatches, quick add) | `ProductCard` | Takes the same `axes` / `variants` as `ProductDetails`; for a whole page use `ProductDetails` |
+| A KPI figure with delta and sparkline | `StatCard` | Not a product or a container |
 | Subscription/pricing-tier card (plans, billing cycle, feature list) | `PaymentCard` | Takes a `Plan` object, unrelated to `options`/`productImage` |
 
 ### Managing organizations — `OrganizationDetails` vs `OrgSwitcher`
@@ -948,23 +948,27 @@ draw nothing.
 
 **Apply:** drop the nested `CardBody`, or pass `bodyProps={{ p: 0 }}`.
 
-### `ProductCard`'s variant selection goes stale after an `options` update, and `options={[]}` crashes it
-
-Both `ProductCard` and its internal `ProductPrice` capture `options[0]` into state only once, at
-mount, with no resync effect — a later re-render with refreshed `options` (new stock/price) is
-silently ignored, so Add to Cart/Notify Me act on stale data. An empty array crashes on
-`selected.label`. Separately, `description` and `avalabilitys` are typed and accepted but never
-read by the component.
-
-**Apply:** treat `options` as effectively static per mount (remount via `key` if it changes), and
-never pass `[]`. Don't rely on `description`/`avalabilitys` — there's currently no way to show either.
-
-### `ProductTags` (shared by `ProductCard`/`ProductDetails`) silently renders zero tags past 4
-
-The row-layout helper only handles 1-4 entries — 5 or more tags renders nothing at all, no
-truncation or "+N more" affordance.
-
-**Apply:** cap `tags` at 4 entries at the call site until the component adds an overflow case.
+### Commerce kit — read before building a shop screen
+
+`ProductCard`, `ProductDetails`, `VariantSelector` and the bag pieces share one contract: pass
+`axes: OptionAxis[]` + `variants: ProductVariant[]`, never per-vertical props. A variant's
+`options` must set every axis, or `findVariant` returns `undefined`.
+
+- **`layout="auto"` on `MediaGallery` and `ProductDetails` follows the container, not the window**
+  (560px / 960px). `ProductCard` and `QuickAddSheet` `auto` still read the window; pass `layout` /
+  `quickAddPresentation` explicitly inside a phone-width frame.
+- **Drawers and modals portal to the window, never into your phone frame.** `ProductCard`'s quick-add
+  sheet needs `quickAddPresentation="drawer"` and `quickAddDrawerProps={{ maxW: "390px !important", mx: "auto" }}`
+  there; the `!important` is needed because Chakra's slide sets an inline `max-width: 100vw`.
+- **`OptionChip` `unavailable` is visual and announced only** — `onSelect` still fires so a parent
+  can re-derive the other axes. Guard it yourself if the pick must be refused.
+- **`WishlistToggle` flips its default name and `aria-pressed` together** — on cards pass a fixed
+  `label` (`Save ${title}`).
+- **Group children must be direct children.** `AddressCardGroup` / `PaymentOptionGroup` read the
+  roving tab stop from their children's `value`; a wrapper component hides it.
+- **`BagBar` and `StickyBuyBar` are CSS-sticky, not fixed.** Make them the last child of the
+  scrolling container; `StickyBuyBar` also needs a parent taller than the viewport.
+- **"N left" appears only from a real `stock` count** at or below `LOW_STOCK_THRESHOLD` (5).
 
 ### `PaymentCard`'s `onHover` never fires its `"card"` variant, and the CTA hides unless `isRenewal`
 
@@ -1400,6 +1404,15 @@ and submenu items. `disabled` is unchanged and still works independently.
 **Apply:** `locked: true` alone now prevents interaction; you no longer need to also set
 `disabled: true`.
 
+**Follow-up (same trap, missed spot): `SecondaryBar` still ignored `locked`.** `SecondaryBar.tsx`'s
+`CollapsedItem`/`ExpandedItem` render the same `MenuProps` shape via a top-level item's
+`secondaryItems`, but their click guards checked only `menuDisabled(item)` — never `item.locked` —
+and neither rendered the lock icon, so a locked secondary item stayed fully clickable and looked
+identical to an unlocked one. Fixed the same way as `MenuItemBox`/`MenuPopoverContent`. Also added
+`lockedReason?: string` (`MenuProps`) — an optional per-item tooltip, shown on hover/focus of a
+locked row anywhere in `SideBar` (rail row, submenu row, both collapsed-rail flyouts, and
+`SecondaryBar`), via the library's own `ToolTip`.
+
 ### `SideBar` menu-item labels clipped the bottom of descenders (g/y/p/q/j) — fixed
 
 `TextTruncation.tsx`'s label used `overflow="hidden"` (both axes) with `lineHeight="1"`, so the line
@@ -1512,3 +1525,18 @@ sub-line needs. The library's own rows no longer use it.
 from `optionRowDescriptionInk(theme.colors)` (exported from the package root) rather than
 `theme.colors.textMuted`. It is a no-op in light mode. The row's main label is
 `optionRowInk(theme.colors, isSelected)` with `optionRowWeight(isSelected)` — never brand ink.
+
+### `Table`'s node column `label` needs `labelText` unless its text is plain children
+
+`columns[].label` accepts a node (an icon, a tooltip trigger) as well as a string or number. Every
+place that cannot render a node — the sort and filter button names, Manage Columns, the Group
+picker, filter chips, saved preferences and `onRowClick`'s `header.label` — uses a plain-text name
+instead: `labelText` if set, else the node's literal text children, else the column `id`. A node
+whose text comes from inside a component (`<MyHeader title="Revenue" />`, a `t()` call inside a
+child) has no literal children, so those places silently read the raw `id`.
+
+A wide node header is also **clipped, not ellipsized** — the header's ellipsis only works on bare
+text. Column widths come from the rendered DOM, never from label length, so sizing is unaffected.
+
+**Apply:** set `labelText` on every node label; put an `isTruncated` `Text` inside the node if it
+can outgrow the column.

package/DESIGN-GUIDE.md

@@ -213,4 +213,21 @@ not shipped in this package). Start from the closest one:
 | Settings / long form | `settings.tsx` | section nav, `SettingsSection` + `SettingRow`, `SaveBar`, danger zone |
 | Board | `pipeline.tsx` | `KanbanBoard` with custom cards and column totals (`height`/`maxH` to size it) |
 | Inbox / master–detail | `inbox.tsx` | selectable list rows, conversation pane, composer, mobile list↔detail |
-
+| Shop front (home → listing → product → bag → checkout → order) | `storefront/` | `ProductCard` grid / rail / quick-add, `ProductDetails` + `StickyBuyBar`, `CartItem`, `OrderSummary`, `CouponField`, address/payment groups, `OrderStatusTimeline`, `BagBar`; mobile frame + desktop |
+
+## 10. Shop screens (e-commerce)
+
+For catalogue, product, bag and checkout screens use the commerce kit, not `Card` + `Table`. Detail
+and rules: [COMPONENT-GOTCHAS.md](COMPONENT-GOTCHAS.md) "Commerce kit".
+
+- **Model the product once** as `axes` + `variants` (`OptionAxis[]`, `ProductVariant[]`) and hand the
+  same objects to `ProductCard`, `QuickAddSheet`, `VariantSelector` and `ProductDetails`. Any vertical
+  works — colour/size, pack size, storage, finish, shade — because the components only see axis ids.
+- **Mobile first.** Cards in a 2-up `ProductCardGrid` (`density="compact"`), a swipe `MediaGallery`,
+  `StickyBuyBar` and `BagBar` pinned at the bottom, sheets (`QuickAddSheet`, filters) instead of popovers.
+- **One loud action per view:** the single brand-filled button is Add to bag / Place order. Wishlist,
+  Buy now, Remove and Move-to-wishlist are soft or ghost.
+- **Be honest:** "N left" only from real stock, delivery as a date (`PincodeChecker`), MRP + discount
+  from `PriceBlock`, the tax note and legal-metrology block in `DetailSections`.
+- **Four states per screen** as usual: `ProductCardSkeleton` / `CartItem isLoading`, first-run and
+  filtered-empty `EmptyState`, `ErrorState` with Retry.

package/dist/Components/AddressCard/AddressCard.d.ts

@@ -0,0 +1,4 @@
+import type { AddressCardProps } from "./AddressCardProps";
+/** Tonal delivery-address card: name, tags, lines and calm Edit/Remove actions; selection is a ring plus a check. */
+declare const AddressCard: ({ value, name, phone, lines, tag, isDefault, note, selected, onSelect, onEdit, onRemove, disabled, labels, "data-testid": testId, }: AddressCardProps) => import("react/jsx-runtime").JSX.Element;
+export default AddressCard;

package/dist/Components/AddressCard/AddressCard.js

@@ -0,0 +1,25 @@
+"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 useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const selectable_1 = require("../CheckoutKit/selectable");
+const Button_1 = __importDefault(require("../Button/Button"));
+const Tag_1 = __importDefault(require("../Tag/Tag"));
+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 } = (0, useCustomTheme_1.useCustomTheme)();
+    const uid = (0, react_1.useId)();
+    const nameId = `${uid}-name`;
+    const bodyId = `${uid}-body`;
+    const copy = { ...DEFAULT_LABELS, ...labels };
+    const { isSelected, interactive, inGroup, ringed, props } = (0, selectable_1.useSelectable)({ value, selected, disabled, onSelect });
+    const selectable = inGroup || !!onSelect;
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", "data-testid": testId, "data-selected": isSelected || undefined, ...(0, selectable_1.selectableSurface)(colors, { selected: isSelected && selectable, disabled, interactive, ringed }), children: [(0, jsx_runtime_1.jsxs)(react_2.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 && ((0, jsx_runtime_1.jsx)(react_2.Box, { mt: 0.5, children: (0, jsx_runtime_1.jsx)(selectable_1.RadioIndicator, { selected: isSelected }) })), (0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 1, flex: 1, minW: 0, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, wrap: "wrap", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", id: nameId, fontSize: "sm", fontWeight: 700, lineHeight: 1.4, color: colors.header[900], children: name }), tag && (0, jsx_runtime_1.jsx)(Tag_1.default, { label: tag, size: "xs", tone: "neutral" }), isDefault && (0, jsx_runtime_1.jsx)(Tag_1.default, { label: copy.default, size: "xs", tone: "neutral" })] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { id: bodyId, children: [lines.map((line) => ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", display: "block", fontSize: "sm", lineHeight: 1.5, color: colors.text[800], children: line }, line))), phone && ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", display: "block", mt: 1, fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, sx: { fontVariantNumeric: "tabular-nums" }, children: phone })), note && ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", display: "block", mt: 1, fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, children: note }))] })] })] }), (onEdit || onRemove) && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { gap: 1, pl: selectable ? "2.75rem" : 1, pr: 2, pb: 2, children: [onEdit && ((0, jsx_runtime_1.jsx)(Button_1.default, { variant: "ghost", colorScheme: "gray", size: "sm", onClick: onEdit, "aria-label": `${copy.edit} address: ${name}`, children: copy.edit })), onRemove && ((0, jsx_runtime_1.jsx)(Button_1.default, { variant: "ghost", colorScheme: "gray", size: "sm", onClick: onRemove, "aria-label": `${copy.remove} address: ${name}`, children: copy.remove }))] }))] }));
+};
+exports.default = AddressCard;

package/dist/Components/AddressCard/AddressCardGroup.d.ts

@@ -0,0 +1,4 @@
+import type { AddressCardGroupProps } from "./AddressCardProps";
+/** Radiogroup wrapper for `AddressCard`s. */
+declare const AddressCardGroup: (props: AddressCardGroupProps) => import("react/jsx-runtime").JSX.Element;
+export default AddressCardGroup;

package/dist/Components/AddressCard/AddressCardGroup.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const selectable_1 = require("../CheckoutKit/selectable");
+/** Radiogroup wrapper for `AddressCard`s. */
+const AddressCardGroup = (props) => (0, jsx_runtime_1.jsx)(selectable_1.SelectableGroup, { ...props });
+exports.default = AddressCardGroup;

package/dist/Components/AddressCard/AddressCardProps.d.ts

@@ -0,0 +1,43 @@
+import type { ReactNode } from "react";
+/** Visible copy; override every string for another language. */
+export interface AddressCardLabels {
+    default: string;
+    edit: string;
+    remove: string;
+}
+/** A saved delivery address. Inside an `AddressCardGroup` it is a radio keyed by `value`; alone, `onSelect` makes it a toggle button. */
+export interface AddressCardProps {
+    /** Identifies the card inside an `AddressCardGroup`; required there. */
+    value?: string;
+    name: string;
+    phone?: string;
+    /** Address lines in order, e.g. ["12 Palm Grove, Indiranagar", "Bengaluru, Karnataka 560038"]. */
+    lines: string[];
+    /** Short place tag such as "Home" or "Work". */
+    tag?: string;
+    /** Adds a "Default" tag. */
+    isDefault?: boolean;
+    /** Muted line under the address, e.g. "Delivers by Thu, 9 Oct". */
+    note?: ReactNode;
+    /** Standalone selection state; ignored inside a group, where the group's value decides. */
+    selected?: boolean;
+    /** Called when the card is chosen; also fires inside a group, after the group updates. */
+    onSelect?: () => void;
+    onEdit?: () => void;
+    onRemove?: () => void;
+    /** Dims the card, drops it from the tab order and ignores selection; Edit and Remove still work. */
+    disabled?: boolean;
+    labels?: Partial<AddressCardLabels>;
+    "data-testid"?: string;
+}
+/** Radiogroup of `AddressCard`s with a roving tab stop; arrow keys move focus and selection together. */
+export interface AddressCardGroupProps {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /** Direct `AddressCard` children; wrapping them in another component hides their `value` from the roving tab stop. */
+    children: ReactNode;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "data-testid"?: string;
+}

package/dist/Components/AddressCard/AddressCardProps.js

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

package/dist/Components/BagBar/BagBar.d.ts

@@ -0,0 +1,4 @@
+import type { BagBarProps } from "./BagBarProps";
+/** Glass bar for the bag and checkout: total and price-details link left, the single primary action right. */
+declare const BagBar: ({ total, note, onViewDetails, ctaLabel, onCta, ctaDisabled, ctaLoading, position, zIndex, currency, locale, labels, "data-testid": testId, }: BagBarProps) => import("react/jsx-runtime").JSX.Element;
+export default BagBar;

package/dist/Components/BagBar/BagBar.js

@@ -0,0 +1,32 @@
+"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 scrim_1 = require("../../Theme/tokens/builders/scrim");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const motion_2 = require("../../Theme/chakra/motion");
+const price_1 = require("../../Utils/price");
+const Button_1 = __importDefault(require("../Button/Button"));
+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 } = (0, useCustomTheme_1.useCustomTheme)();
+    const copy = { ...DEFAULT_LABELS, ...labels };
+    const sticky = position === "bottom";
+    return ((0, jsx_runtime_1.jsxs)(react_1.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 ${(0, scrim_1.overlayScrim)(colors)}` : "none", "data-testid": testId, sx: { WebkitBackdropFilter: BLUR, [NO_BLUR_SUPPORT]: { backgroundColor: colors.surfaceRaised } }, children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { minW: 0, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "baseline", gap: 2, wrap: "wrap", children: [(0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "xs", fontWeight: 600, color: colors.textMuted, children: copy.total }), (0, jsx_runtime_1.jsx)(react_1.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: (0, price_1.formatPrice)(total, { currency, locale }) })] }), note && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", display: "block", fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, children: note })), onViewDetails && ((0, jsx_runtime_1.jsxs)(react_1.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: (0, motion_1.transitionFor)(["opacity"]), _hover: { opacity: 0.8 }, sx: {
+                            ...(0, focusRing_styles_1.focusVisibleStyles)(colors),
+                            ...(0, motion_2.reducedMotionSx)(),
+                            "&::before": { content: '""', position: "absolute", inset: "-0.75rem -0.5rem" },
+                        }, children: [copy.viewDetails, (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { size: 14, "aria-hidden": true })] }))] }), (0, jsx_runtime_1.jsx)(Button_1.default, { size: "lg", onClick: onCta, isDisabled: ctaDisabled, isLoading: ctaLoading, flexShrink: 0, children: ctaLabel !== null && ctaLabel !== void 0 ? ctaLabel : copy.cta })] }));
+};
+exports.default = BagBar;

package/dist/Components/BagBar/BagBarProps.d.ts

@@ -0,0 +1,30 @@
+import type { PriceFormat } from "../Commerce/commerceTypes";
+/** "static" flows in the page; "bottom" sticks to the bottom edge of its scroll container (CSS sticky, never fixed). */
+export type BagBarPosition = "static" | "bottom";
+/** Visible copy; override every string for another language. */
+export interface BagBarLabels {
+    /** Accessible name of the bar landmark. */
+    region: string;
+    total: string;
+    viewDetails: string;
+    cta: string;
+}
+/** Mobile bottom bar: the payable total with a price-details link on the left and the one primary action on the right. */
+export interface BagBarProps extends PriceFormat {
+    total: number;
+    /** Muted line beside the total, e.g. "Inclusive of all taxes". */
+    note?: string;
+    /** Shows the "View price details" link; use it to scroll to or open the breakdown. */
+    onViewDetails?: () => void;
+    /** Primary action label, e.g. "Place order" or "Checkout". */
+    ctaLabel?: string;
+    onCta?: () => void;
+    ctaDisabled?: boolean;
+    /** Spinner on the primary action while the order is being placed. */
+    ctaLoading?: boolean;
+    position?: BagBarPosition;
+    /** Stacking order when `position` is "bottom"; above page content, below dialogs by default. */
+    zIndex?: number;
+    labels?: Partial<BagBarLabels>;
+    "data-testid"?: string;
+}

package/dist/Components/BagBar/BagBarProps.js

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

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,60 @@
+"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 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: { fontVariantNumeric: "tabular-nums" }, 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,64 @@
+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 {
+    moveToWishlist: string;
+    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 {
+    title: string;
+    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[];
+    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;
+    quantity: number;
+    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;
+    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;
+    layout?: CartItemLayout;
+    /** Skeleton of the same shape; actions are not rendered. */
+    isLoading?: boolean;
+    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/CheckoutKit/selectable.d.ts

@@ -0,0 +1,58 @@
+import type { FocusEvent, KeyboardEvent, ReactNode } from "react";
+import type { BoxProps } from "@chakra-ui/react";
+import type { PaletteProps } from "../../Theme/tokens/types";
+type GroupState = {
+    value: string | undefined;
+    tabStop: string | undefined;
+    select: (value: string) => void;
+};
+export declare const useSelectableGroup: () => GroupState | null;
+export type SelectableGroupProps = {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    gap?: number;
+    children: ReactNode;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "data-testid"?: string;
+};
+/** Radiogroup with a roving tab stop; arrows move focus and selection together, like native radios. */
+export declare const SelectableGroup: ({ value, defaultValue, onValueChange, gap, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "data-testid": testId, }: SelectableGroupProps) => import("react/jsx-runtime").JSX.Element;
+/** Tonal card surface; selection is a 2px ink ring plus a check, never colour alone. */
+export declare const selectableSurface: (colors: PaletteProps, { selected, disabled, interactive, ringed }: {
+    selected: boolean;
+    disabled: boolean;
+    interactive: boolean;
+    ringed: boolean;
+}) => BoxProps;
+type RadioIndicatorProps = {
+    selected: boolean;
+};
+/** The 20px circle that carries selection state beside the text. */
+export declare const RadioIndicator: ({ selected }: RadioIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+export type SelectableSemantics = {
+    role: "radio" | "button" | undefined;
+    "aria-checked"?: boolean;
+    "aria-pressed"?: boolean;
+    tabIndex: number | undefined;
+    "data-value"?: string;
+    onClick: () => void;
+    onKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
+    onFocus: (event: FocusEvent<HTMLElement>) => void;
+    onBlur: () => void;
+};
+/** Radio inside a group, toggle button when only `onSelect` is given, inert otherwise. */
+export declare const useSelectable: ({ value, selected, disabled, onSelect, }: {
+    value?: string;
+    selected?: boolean;
+    disabled: boolean;
+    onSelect?: () => void;
+}) => {
+    isSelected: boolean;
+    interactive: boolean;
+    inGroup: boolean;
+    ringed: boolean;
+    props: SelectableSemantics;
+};
+export {};