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

package/dist/esm/Components/StickyBuyBar/StickyBuyBar.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex, Grid } from "@chakra-ui/react";
+import { keyframes } from "@emotion/react";
+import { Check } from "lucide-react";
+import Button from "../Button/Button.js";
+import PriceBlock from "../PriceBlock/PriceBlock.js";
+import QuantityStepper from "../QuantityStepper/QuantityStepper.js";
+import { glassStyles } from "../MediaGallery/glass.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { MOTION_EASE, transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import zIndices from "../../Theme/tokens/primitives/zIndices.js";
+import { reducedMotionSx, usePrefersReducedMotion } from "../../Theme/chakra/motion.js";
+const DEFAULT_LABELS = {
+    region: "Buy",
+    add: "Add to bag",
+    selectOption: "Select an option",
+    notify: "Notify me",
+    added: "Added",
+    goToBag: "Go to bag",
+    buyNow: "Buy now",
+    adding: "Adding to bag",
+};
+const SLIDE_MS = 240;
+const BAR_HEIGHT = "3.25rem";
+const SLOT_MIN_WIDTH = "9.5rem";
+const RISE = "6px";
+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))";
+const pop = keyframes `0% { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(1); }`;
+const STACK_ORDER = ["add", "select-option", "notify", "added", "go-to-bag"];
+const StickyBuyBar = ({ price, mrp, mode = "add", visible = true, position = "sticky", isLoading = false, quantity, onQuantityChange, maxQuantity, onAddToBag, onSelectOption, onNotify, onGoToBag, onBuyNow, itemLabel, currency, locale, labels, "data-testid": testId, }) => {
+    const { colors } = useCustomTheme();
+    const reduced = usePrefersReducedMotion();
+    const copy = { ...DEFAULT_LABELS, ...labels };
+    const glass = glassStyles(colors);
+    const stepping = mode === "stepper";
+    const active = stepping ? null : mode;
+    const text = {
+        add: copy.add,
+        "select-option": copy.selectOption,
+        notify: copy.notify,
+        added: copy.added,
+        "go-to-bag": copy.goToBag,
+    };
+    const handlers = {
+        add: onAddToBag,
+        "select-option": onSelectOption,
+        notify: onNotify,
+        added: undefined,
+        "go-to-bag": onGoToBag,
+    };
+    const tonal = mode === "notify";
+    const inert = mode === "added" || isLoading;
+    // NOTE: Button's prop type is a closed Pick, so aria-busy / aria-disabled ride in on a spread.
+    const aria = {
+        "aria-busy": isLoading ? "true" : undefined,
+        "aria-disabled": inert ? "true" : undefined,
+        "aria-label": isLoading ? copy.adding : undefined,
+    };
+    const layer = (on) => ({
+        gridArea: "1 / 1",
+        opacity: on ? 1 : 0,
+        visibility: on ? "visible" : "hidden",
+        transition: reduced ? "none" : `${transitionFor(["opacity"])}, visibility 0s linear ${on ? 0 : 150}ms`,
+    });
+    const label = (key) => {
+        const on = key === active;
+        return (_jsxs(Flex, { as: "span", "aria-hidden": on ? undefined : true, gridArea: "1 / 1", align: "center", justify: "center", gap: 1.5, opacity: on ? 1 : 0, transform: on || reduced ? "none" : `translateY(${RISE})`, transition: transitionFor(["opacity", "transform"]), sx: reducedMotionSx(), children: [key === "added" && (_jsx(Box, { as: "span", display: "inline-flex", animation: on && !reduced ? `${pop} 280ms ${MOTION_EASE} both` : undefined, sx: reducedMotionSx(), children: _jsx(Check, { size: 18, "aria-hidden": true }) })), text[key]] }, key));
+    };
+    return (_jsx(Box, { as: "section", role: "region", "aria-label": copy.region, "aria-hidden": visible ? undefined : true, position: position === "sticky" ? "sticky" : "relative", bottom: position === "sticky" ? 0 : undefined, zIndex: zIndices.sticky, px: 4, pt: 3, pb: SAFE_BOTTOM, transform: visible ? "translateY(0)" : "translateY(100%)", visibility: visible ? "visible" : "hidden", transition: reduced ? "none" : `transform ${SLIDE_MS}ms ${MOTION_EASE}, visibility 0s linear ${visible ? 0 : SLIDE_MS}ms`, "data-testid": testId, ...glass, sx: { ...glass.sx, [NO_BLUR_SUPPORT]: { backgroundColor: colors.surfaceRaised }, ...reducedMotionSx() }, children: _jsxs(Flex, { align: "center", gap: 3, children: [_jsx(Box, { flex: 1, minW: 0, children: _jsx(PriceBlock, { size: "sm", price: price, mrp: mrp, currency: currency, locale: locale }) }), mode === "add" && onBuyNow && (_jsx(Button, { variant: "outline", size: "lg", h: BAR_HEIGHT, onClick: onBuyNow, label: copy.buyNow })), _jsxs(Grid, { minW: SLOT_MIN_WIDTH, justifyItems: "stretch", alignItems: "center", children: [_jsx(Box, { ...layer(!stepping), "aria-hidden": stepping ? true : undefined, children: _jsx(Button, { ...aria, variant: tonal ? "ghost" : "solid", size: "lg", w: "100%", h: BAR_HEIGHT, onClick: () => {
+                                    var _a;
+                                    if (!inert)
+                                        (_a = handlers[mode]) === null || _a === void 0 ? void 0 : _a.call(handlers);
+                                }, sx: {
+                                    ...(tonal ? { bg: colors.background[100], color: colors.header[900], _hover: { bg: colors.background[200] } } : {}),
+                                    ...(inert ? { cursor: isLoading ? "progress" : "default", pointerEvents: isLoading ? "auto" : "none" } : {}),
+                                    display: "grid",
+                                }, children: STACK_ORDER.map(label) }) }), _jsx(Flex, { ...layer(stepping), "aria-hidden": stepping ? undefined : true, justify: "center", align: "center", h: BAR_HEIGHT, children: _jsx(QuantityStepper, { value: quantity, onValueChange: onQuantityChange, max: maxQuantity, itemLabel: itemLabel, size: "md" }) })] })] }) }));
+};
+export default StickyBuyBar;

package/dist/esm/Components/StickyBuyBar/StickyBuyBarProps.js

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

package/dist/esm/Components/StockStatus/StockStatus.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex, Text } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+const TEXT_SIZE = { sm: "xs", md: "sm" };
+const DOT_PX = { sm: 6, md: 8 };
+const defaultMessage = (status, count) => {
+    switch (status) {
+        case "in-stock":
+            return "In stock";
+        case "low-stock":
+            return count !== undefined ? `Only ${count} left` : "Low stock";
+        case "out-of-stock":
+            return "Out of stock";
+        case "backorder":
+            return "Available on backorder";
+    }
+};
+/** Availability dot + label for a `StockState`; colour comes from `semanticText`, meaning from the words. */
+const StockStatus = ({ status, count, message, size = "md", "data-testid": testId }) => {
+    const { colors } = useCustomTheme();
+    const ink = {
+        "in-stock": colors.semanticText.success,
+        "low-stock": colors.semanticText.warning,
+        "out-of-stock": colors.textMuted,
+        backorder: colors.semanticText.info,
+    };
+    return (_jsxs(Flex, { as: "span", display: "inline-flex", align: "center", gap: 1.5, "data-status": status, "data-testid": testId, color: ink[status], children: [_jsx(Box, { as: "span", "aria-hidden": true, boxSize: `${DOT_PX[size]}px`, flexShrink: 0, borderRadius: "full", bg: "currentColor" }), _jsx(Text, { as: "span", fontSize: TEXT_SIZE[size], fontWeight: 600, lineHeight: 1.4, children: message !== null && message !== void 0 ? message : defaultMessage(status, count) })] }));
+};
+export default StockStatus;

package/dist/esm/Components/StockStatus/StockStatusProps.js

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

package/dist/esm/Components/Table/Table.js

@@ -19,6 +19,7 @@ import { DENSITY_ROWS, EMPTY_STATE_HEIGHT, GROUP_HEADER_HEIGHT, MAX_TABLE_HEIGHT
 import { scrollbarStyles, SCROLLBAR_WIDTH } from "../../Theme/tokens/builders/scrollbar.js";
 import { scrollShadowStyles } from "../../Theme/tokens/builders/scrollShadow.js";
 import useTable from "./hooks/useTable.js";
+import { toSavedColumns } from "./columnLabel.js";
 import { searchAndSortData, SortMultiColumnData, groupRows, buildTablePalette, pickTableColor } from "../../Utils/table.js";
 import { useGetPreferences, useSavePreferences, } from "../../Hooks/usePreferences.js";
 import TableSettings from "./settings/TableSettings.js";
@@ -165,7 +166,7 @@ export default function Table({ data, columns, onSelection, isLoading, isCheckbo
     }, [tablePreferences === null || tablePreferences === void 0 ? void 0 : tablePreferences.groupBy]);
     const handleDensityChange = (d) => {
         setDensityState(d);
-        savePreferences === null || savePreferences === void 0 ? void 0 : savePreferences({ ...tablePreferences, columns: columnsList, groupBy: groupByState !== null && groupByState !== void 0 ? groupByState : null, density: d });
+        savePreferences === null || savePreferences === void 0 ? void 0 : savePreferences({ ...tablePreferences, columns: toSavedColumns(columnsList), groupBy: groupByState !== null && groupByState !== void 0 ? groupByState : null, density: d });
     };
     // Settings "Save": persist columns + group (+ current density) in ONE write so
     // they don't clobber each other, and apply them locally.

package/dist/esm/Components/Table/columnLabel.js

@@ -0,0 +1,21 @@
+import { isValidElement } from "react";
+export const isPrimitiveLabel = (label) => typeof label === "string" || typeof label === "number";
+const textOf = (node) => {
+    if (isPrimitiveLabel(node))
+        return String(node);
+    if (Array.isArray(node))
+        return node.map(textOf).join("");
+    if (isValidElement(node))
+        return textOf(node.props.children);
+    return "";
+};
+/** Plain-text name of a column, for every place a node cannot go: aria-labels, settings, chips, saved preferences. */
+export const columnLabelText = (column) => {
+    if (isPrimitiveLabel(column.label))
+        return String(column.label);
+    if (column.labelText)
+        return column.labelText;
+    return textOf(column.label).replace(/\s+/g, " ").trim() || String(column.id);
+};
+/** Columns as they may be POSTed: a node label is swapped for its text, since elements are not JSON. */
+export const toSavedColumns = (columns) => columns.map((column) => isPrimitiveLabel(column.label) ? column : { ...column, label: columnLabelText(column) });

package/dist/esm/Components/Table/components/TableBody.js

@@ -12,6 +12,7 @@ import { useTableVariant } from "../variants/TableVariantContext.js";
 import { resolvePillInk } from "../variants/pillInk.js";
 import EmptyState from "../../EmptyState/EmptyState.js";
 import { DENSITY_ROWS, EMPTY_STATE_HEIGHT, GROUP_HEADER_HEIGHT } from "./rowMetrics.js";
+import { columnLabelText, isPrimitiveLabel } from "../columnLabel.js";
 import { transitionFor } from "../../../Theme/tokens/primitives/motion.js";
 import { reducedMotionSx } from "../../../Theme/chakra/motion.js";
 const getRowId = (row) => row.id;
@@ -80,7 +81,10 @@ const TableRow = React.memo(({ row, rowIndex, isChecked, isExpanded, isContent,
     }, [onMeasure, isExpanded, hasContent, row]);
     const handleCellClick = useCallback((header) => {
         if (!header.node && onRowClick) {
-            onRowClick(row, { label: header.label, id: header.id });
+            onRowClick(row, {
+                label: isPrimitiveLabel(header.label) ? header.label : columnLabelText(header),
+                id: header.id,
+            });
         }
     }, [row, onRowClick]);
     const variant = useTableVariant();

package/dist/esm/Components/Table/components/TableHeader.js

@@ -5,6 +5,7 @@ import { calculateLeftOffset } from "../../../Utils/table.js";
 import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
 import { accentTextOnCanvas } from "../../../Theme/tokens/builders/accentText.js";
 import TableFilters from "../filters/TableFilters.js";
+import { columnLabelText } from "../columnLabel.js";
 import { ChevronDown, ChevronsUpDown, ChevronUp } from "lucide-react";
 import CheckBox from "../../Checkbox/Checkbox.js";
 import { useTableVariant } from "../variants/TableVariantContext.js";
@@ -17,7 +18,7 @@ const TableHeader = ({ columns, isCheckbox, handleSort, headerRefs, columnWidths
     return (_jsxs(Tr, { pr: 0, "aria-rowindex": 1, children: [isContent && _jsx(ContentSpacerCell, { noBorders: noBorders }), isCheckbox && (_jsx(SelectAllCell, { slotRef: slotRef, freezedTextColor: freezedTextColor, noBorders: noBorders, isSelecting: isSelecting, isLoading: isLoading, checked: checked, handleCheckbox: handleCheckbox })), columns.map((header, index) => {
                 if (header === null || header === void 0 ? void 0 : header.isHidden)
                     return null;
-                return (_jsx(ColumnHeader, { header: header, index: index, columnWidths: columnWidths, slotWidth: slotWidth, handleSort: handleSort, isCheckbox: isCheckbox, noBorders: noBorders, columnsSort: columnsSort, headerRefs: headerRefs, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch, openFilterId: openFilterId, setOpenFilterId: setOpenFilterId }, header.label));
+                return (_jsx(ColumnHeader, { header: header, index: index, columnWidths: columnWidths, slotWidth: slotWidth, handleSort: handleSort, isCheckbox: isCheckbox, noBorders: noBorders, columnsSort: columnsSort, headerRefs: headerRefs, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch, openFilterId: openFilterId, setOpenFilterId: setOpenFilterId }, columnLabelText(header)));
             }), isLink && _jsx(ViewSpacerCell, { noBorders: noBorders, isActionFreeze: isActionFreeze })] }));
 };
 export default memo(TableHeader);
@@ -91,7 +92,7 @@ const ColumnHeader = memo(({ header, index, columnWidths, slotWidth, isCheckbox,
         !!columnsSearch[header.id];
     return (_jsx(Th, { scope: "col", ref: (el) => (headerRefs.current[index] = el), "aria-sort": ariaSort, textAlign: align, textTransform: variant.header.textTransform, fontSize: variant.header.fontSize, fontWeight: variant.header.fontWeight, letterSpacing: variant.header.letterSpacing, position: isFrozen ? "sticky" : undefined, left: isFrozen ? `${leftOffset}px` : undefined, minWidth: 120, backgroundColor: variant.header.bg, maxWidth: 500, zIndex: isFrozen ? 2 : 1, py: 2, pr: align === "end" ? undefined : 0, overflow: "hidden", borderTop: "none", borderBottom: noBorders ? "none" : `0.063rem solid ${variant.header.ruleColor}`, borderRight: noBorders || !variant.header.showColumnRule
             ? "none"
-            : `0.063rem solid ${variant.header.ruleColor}`, className: `columns ${isFrozen ? "sticky-columns" : "scrollable-columns"}`, height: variant.header.height, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: _jsxs(Box, { display: "flex", color: variant.header.ink, lineHeight: "1.25rem", justifyContent: LABEL_JUSTIFY[align], flexDirection: align === "end" ? "row-reverse" : "row", gap: align === "end" ? 1 : undefined, alignItems: "center", position: "relative", children: [_jsx(Box, { textAlign: align, textOverflow: "ellipsis", whiteSpace: "nowrap", display: "inline-block", overflow: "hidden", children: header.label }), _jsxs(Box, { display: "inline-flex", alignItems: "center", opacity: showActions ? 1 : 0, transition: transitionFor(["opacity"], "base"), sx: reducedMotionSx(), _focusWithin: { opacity: 1 }, children: [header.isSort && (_jsx(SortingIcon, { label: String(header.label), sortState: (_b = isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) !== null && _b !== void 0 ? _b : "none", isVisible: isHovered || isSortActive, handleSortClick: () => {
+            : `0.063rem solid ${variant.header.ruleColor}`, className: `columns ${isFrozen ? "sticky-columns" : "scrollable-columns"}`, height: variant.header.height, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: _jsxs(Box, { display: "flex", color: variant.header.ink, lineHeight: "1.25rem", justifyContent: LABEL_JUSTIFY[align], flexDirection: align === "end" ? "row-reverse" : "row", gap: align === "end" ? 1 : undefined, alignItems: "center", position: "relative", children: [_jsx(Box, { textAlign: align, textOverflow: "ellipsis", whiteSpace: "nowrap", display: "inline-block", overflow: "hidden", children: header.label }), _jsxs(Box, { display: "inline-flex", alignItems: "center", opacity: showActions ? 1 : 0, transition: transitionFor(["opacity"], "base"), sx: reducedMotionSx(), _focusWithin: { opacity: 1 }, children: [header.isSort && (_jsx(SortingIcon, { label: columnLabelText(header), sortState: (_b = isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) !== null && _b !== void 0 ? _b : "none", isVisible: isHovered || isSortActive, handleSortClick: () => {
                                 let direction = "asc";
                                 if ((isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) === "asc") {
                                     direction = "desc";

package/dist/esm/Components/Table/filters/ActiveFilters.js

@@ -7,6 +7,7 @@ import { accentTextOnCanvas } from "../../../Theme/tokens/builders/accentText.js
 import { resolveSoftTone } from "../../../Theme/tokens/builders/tone.js";
 import { scrollbarStyles } from "../../../Theme/tokens/builders/scrollbar.js";
 import { focusVisibleStyles } from "../../../Theme/chakra/focusRing.styles.js";
+import { columnLabelText } from "../columnLabel.js";
 import VeritcalDivider from "../../Divider/Divider.js";
 const ActiveFilters = React.memo(({ columns, columnsSearch, setColumnsSearch, }) => {
     const theme = useCustomTheme();
@@ -14,7 +15,7 @@ const ActiveFilters = React.memo(({ columns, columnsSearch, setColumnsSearch, })
     const columnLabelMap = useMemo(() => {
         const map = new Map();
         for (const col of columns) {
-            map.set(col.id, col.label);
+            map.set(col.id, columnLabelText(col));
         }
         return map;
     }, [columns]);

package/dist/esm/Components/Table/filters/TableFilters.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { memo, useCallback, useEffect, useRef, useState } from "react";
 import { Icon, IconButton, Input, InputGroup, InputLeftElement, Popover, PopoverBody, PopoverContent, PopoverTrigger, Portal, useTheme, } from "@chakra-ui/react";
+import { columnLabelText } from "../columnLabel.js";
 import { EllipsisVertical, Search } from "lucide-react";
 const TableFilters = memo(({ header, setColumnsSearch, columnsSearch, onClose, isOpen, onOpen, }) => {
     const theme = useTheme();
@@ -36,7 +37,7 @@ const TableFilters = memo(({ header, setColumnsSearch, columnsSearch, onClose, i
         setRefreshDataOnOpen((prev) => !prev);
         onOpen === null || onOpen === void 0 ? void 0 : onOpen();
     };
-    return (_jsxs(Popover, { isOpen: isOpen, onClose: onClose, onOpen: handleOpen, children: [_jsx(PopoverTrigger, { children: _jsx(IconButton, { "aria-label": `Filter ${header.label}`, icon: _jsx(EllipsisVertical, { size: 17, color: theme.colors.primary[900] }), size: "xs", variant: "ghost", _hover: { bg: "none" } }) }), _jsx(Portal, { children: _jsx(PopoverContent, { width: "200px", bg: theme.colors.surfaceRaised, children: _jsx(PopoverBody, { p: 2, children: _jsxs(InputGroup, { flex: "1", size: "xs", children: [_jsx(InputLeftElement, { pointerEvents: "none", children: _jsx(Icon, { as: Search, color: theme.colors.textMuted, boxSize: 4 }) }), _jsx(Input, { autoFocus: true, placeholder: `Search ${header.label}...`, size: "xs", ref: searchRef, onChange: (e) => {
+    return (_jsxs(Popover, { isOpen: isOpen, onClose: onClose, onOpen: handleOpen, children: [_jsx(PopoverTrigger, { children: _jsx(IconButton, { "aria-label": `Filter ${columnLabelText(header)}`, icon: _jsx(EllipsisVertical, { size: 17, color: theme.colors.primary[900] }), size: "xs", variant: "ghost", _hover: { bg: "none" } }) }), _jsx(Portal, { children: _jsx(PopoverContent, { width: "200px", bg: theme.colors.surfaceRaised, children: _jsx(PopoverBody, { p: 2, children: _jsxs(InputGroup, { flex: "1", size: "xs", children: [_jsx(InputLeftElement, { pointerEvents: "none", children: _jsx(Icon, { as: Search, color: theme.colors.textMuted, boxSize: 4 }) }), _jsx(Input, { autoFocus: true, placeholder: `Search ${columnLabelText(header)}...`, size: "xs", ref: searchRef, onChange: (e) => {
                                         e.stopPropagation();
                                         debouncedSearch(e.target.value);
                                     }, onFocus: (e) => e.stopPropagation() })] }) }) }) })] }));

package/dist/esm/Components/Table/hooks/useTable.js

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { searchAndSortData, SortMultiColumnData } from "../../../Utils/table.js";
+import { isPrimitiveLabel, toSavedColumns } from "../columnLabel.js";
 export const DEFAULT_PAGE_SIZE = 20;
 const defaultPageSize = DEFAULT_PAGE_SIZE;
 const mergeColumnWithPreference = (pref, originalCol) => {
@@ -10,7 +11,7 @@ const mergeColumnWithPreference = (pref, originalCol) => {
     const next = { ...originalCol };
     next.isHidden =
         typeof pref.isHidden === "boolean" ? pref.isHidden : (_a = originalCol === null || originalCol === void 0 ? void 0 : originalCol.isHidden) !== null && _a !== void 0 ? _a : false;
-    if (typeof pref.label === "string" || typeof pref.label === "number") {
+    if (isPrimitiveLabel(pref.label) && isPrimitiveLabel(originalCol === null || originalCol === void 0 ? void 0 : originalCol.label)) {
         next.label = pref.label;
     }
     return next;
@@ -217,7 +218,7 @@ const useTable = ({ data, isPagination, selections, onSelection, tablePreference
         if (savePreferences) {
             savePreferences({
                 ...tablePreferences,
-                columns: columns,
+                columns: toSavedColumns(columns),
                 ...extra,
             });
         }

package/dist/esm/Components/Table/settings/ManageColumns.js

@@ -6,6 +6,7 @@ import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
 import { scrollbarStyles } from "../../../Theme/tokens/builders/scrollbar.js";
 import { accentTextOnCanvas } from "../../../Theme/tokens/builders/accentText.js";
 import { listRowBackgrounds } from "../../../Theme/tokens/builders/rowStates.js";
+import { columnLabelText } from "../columnLabel.js";
 import { ChevronDown, ChevronUp, GripVertical } from "lucide-react";
 import { transitionFor } from "../../../Theme/tokens/primitives/motion.js";
 const ManageColumns = ({ columns, items, setItems, childInputMethodsRef, }) => {
@@ -61,7 +62,7 @@ const ManageColumns = ({ columns, items, setItems, childInputMethodsRef, }) => {
         setItems(newItems);
         setError(null);
     };
-    const filteredItems = items.filter((item) => item.label.toString().toLowerCase().includes(searchTerm.toLowerCase()));
+    const filteredItems = items.filter((item) => columnLabelText(item).toLowerCase().includes(searchTerm.toLowerCase()));
     const allChecked = items.every((item) => !item.isHidden);
     const someChecked = items.some((item) => !item.isHidden) && !allChecked;
     const handleSelectAll = () => {
@@ -87,9 +88,9 @@ const ManageColumns = ({ columns, items, setItems, childInputMethodsRef, }) => {
                             : "transparent", cursor: "grab", fontSize: "13px", px: 2, py: "3px", mb: "3px", transition: transitionFor(["background-color", "border-color"]), _hover: {
                             bg: rowBackgrounds.active,
                             borderColor: theme.colors.boxborder[200],
-                        }, _active: { cursor: "grabbing" }, children: [_jsx(Box, { as: "span", "aria-hidden": "true", display: "inline-flex", cursor: "grab", mr: 1, _hover: { color: theme.colors.textMuted }, children: _jsx(GripVertical, { size: 14 }) }), _jsx(Checkbox, { isChecked: !item.isHidden, label: String(item.label), onChange: () => toggleCheckbox(item.id), size: "sm", labelSx: {
+                        }, _active: { cursor: "grabbing" }, children: [_jsx(Box, { as: "span", "aria-hidden": "true", display: "inline-flex", cursor: "grab", mr: 1, _hover: { color: theme.colors.textMuted }, children: _jsx(GripVertical, { size: 14 }) }), _jsx(Checkbox, { isChecked: !item.isHidden, label: columnLabelText(item), onChange: () => toggleCheckbox(item.id), size: "sm", labelSx: {
                                     color: item.isHidden ? theme.colors.textMuted : theme.colors.text[700],
-                                } }), _jsx(Text, { fontSize: "12px", color: theme.colors.textMuted, ml: 'auto', children: index + 1 }), _jsx(IconButton, { "aria-label": `Move ${item.label} up`, icon: _jsx(ChevronUp, { size: 14 }), variant: "ghost", size: "xs", ml: 1, minW: "auto", h: "auto", p: 0, color: theme.colors.textMuted, isDisabled: realIndex <= 0, onClick: () => moveItem(item.id, -1) }), _jsx(IconButton, { "aria-label": `Move ${item.label} down`, icon: _jsx(ChevronDown, { size: 14 }), variant: "ghost", size: "xs", ml: 1, minW: "auto", h: "auto", p: 0, color: theme.colors.textMuted, isDisabled: realIndex === -1 || realIndex >= items.length - 1, onClick: () => moveItem(item.id, 1) })] }, item.id));
+                                } }), _jsx(Text, { fontSize: "12px", color: theme.colors.textMuted, ml: 'auto', children: index + 1 }), _jsx(IconButton, { "aria-label": `Move ${columnLabelText(item)} up`, icon: _jsx(ChevronUp, { size: 14 }), variant: "ghost", size: "xs", ml: 1, minW: "auto", h: "auto", p: 0, color: theme.colors.textMuted, isDisabled: realIndex <= 0, onClick: () => moveItem(item.id, -1) }), _jsx(IconButton, { "aria-label": `Move ${columnLabelText(item)} down`, icon: _jsx(ChevronDown, { size: 14 }), variant: "ghost", size: "xs", ml: 1, minW: "auto", h: "auto", p: 0, color: theme.colors.textMuted, isDisabled: realIndex === -1 || realIndex >= items.length - 1, onClick: () => moveItem(item.id, 1) })] }, item.id));
                 })) : (_jsx(Text, { color: theme.colors.textMuted, textAlign: "center", fontSize: "sm", py: 6, children: "No columns found" })) }), _jsxs(Text, { fontSize: "xs", color: theme.colors.textMuted, mt: 2, textAlign: "right", children: [visibleCount, " / ", items.length, " visible"] })] }));
 };
 export default ManageColumns;

package/dist/esm/Components/Table/settings/TableSettings.js

@@ -6,6 +6,7 @@ import ManageColumns from "./ManageColumns.js";
 import Button from "../../Button/Button.js";
 import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
 import { scrollbarStyles } from "../../../Theme/tokens/builders/scrollbar.js";
+import { columnLabelText } from "../columnLabel.js";
 import { Settings, Check } from "lucide-react";
 import ToolTip from "../../ToolTip/ToolTip.js";
 import { listRowBackgrounds } from "../../../Theme/tokens/builders/rowStates.js";
@@ -67,7 +68,7 @@ const TableSettings = ({ columns, onSave, density = "normal", onDensityChange, g
                                                                 // Only columns that declare a `columnType` are groupable.
                                                                 ...columns
                                                                     .filter((c) => !!c.columnType && !c.isHidden)
-                                                                    .map((c) => ({ id: c.id, label: String(c.label) }))]
+                                                                    .map((c) => ({ id: c.id, label: columnLabelText(c) }))]
                                                                 .map((opt) => {
                                                                 var _a;
                                                                 const selected = selectedGroup === opt.id;

package/dist/esm/Components/TrustBadges/TrustBadges.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex, Text } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+const DEFAULT_LABEL = "Why shop with us";
+const LIST_STYLES = {
+    row: { display: "flex", flexWrap: "wrap" },
+    grid: { display: "grid", gridTemplateColumns: "repeat(2, minmax(0, 1fr))" },
+    stack: { display: "flex", flexDirection: "column" },
+};
+/** Reassurance items (returns, COD, authenticity, secure payments) on calm tonal tiles; the title always carries the meaning. */
+const TrustBadges = ({ items, layout = "row", "aria-label": ariaLabel = DEFAULT_LABEL, "data-testid": testId }) => {
+    const { colors } = useCustomTheme();
+    if (items.length === 0)
+        return null;
+    const stacked = layout === "stack";
+    const tile = (item) => {
+        var _a;
+        return (_jsxs(Flex, { as: "li", align: stacked ? "center" : "flex-start", gap: 3, p: 3, minH: "2.75rem", borderRadius: "xl", bg: colors.background[100], flex: layout === "row" ? "1 1 9.5rem" : undefined, minW: 0, children: [_jsx(Flex, { as: "span", "aria-hidden": true, flexShrink: 0, align: "center", justify: "center", boxSize: "2.25rem", borderRadius: "full", bg: colors.background[50], color: colors.accentText, sx: { "& svg": { width: "1.125rem", height: "1.125rem" } }, children: item.icon }), _jsxs(Box, { minW: 0, children: [_jsx(Text, { fontSize: "sm", fontWeight: 600, lineHeight: 1.35, color: colors.header[900], children: item.title }), item.detail ? (_jsx(Text, { mt: 0.5, fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, children: item.detail })) : null] })] }, (_a = item.id) !== null && _a !== void 0 ? _a : item.title));
+    };
+    return (_jsx(Box, { as: "ul", "aria-label": ariaLabel, "data-layout": layout, "data-testid": testId, listStyleType: "none", m: 0, p: 0, gap: 2, sx: LIST_STYLES[layout], children: items.map(tile) }));
+};
+export default TrustBadges;

package/dist/esm/Components/TrustBadges/TrustBadgesProps.js

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

package/dist/esm/Components/VariantSelector/VariantSelector.js

@@ -0,0 +1,118 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useId, useRef, useState } from "react";
+import { Box, Flex, Text } from "@chakra-ui/react";
+import { CircleAlert, Ruler } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+import { scrollbarStyles } from "../../Theme/tokens/builders/scrollbar.js";
+import OptionChip from "../OptionChip/OptionChip.js";
+import { LOW_STOCK_THRESHOLD, findVariant, isOptionAvailable, remainingStock, } from "../Commerce/commerceVariants.js";
+import { isSoldOutEverywhere, sameSelection, selectValue } from "./variantSelection.js";
+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 } = useCustomTheme();
+    const uid = useId();
+    const statusId = `${uid}-status`;
+    const cells = useRef(new Map());
+    const [inner, setInner] = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : {});
+    const [focus, setFocus] = useState(null);
+    const selection = value !== null && value !== void 0 ? value : inner;
+    const commit = useCallback((next) => {
+        if (sameSelection(next, selection))
+            return;
+        if (value === undefined)
+            setInner(next);
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(next, findVariant(axes, variants, next));
+    }, [axes, variants, selection, value, onValueChange]);
+    const choose = (axisId, valueId) => {
+        if (isSoldOutEverywhere(variants, axisId, valueId))
+            return;
+        commit(selectValue(axes, variants, selection, axisId, valueId));
+    };
+    const lowStockHint = (axis, option) => {
+        if (!showLowStock)
+            return undefined;
+        const left = remainingStock(variants, selection, axis.id, option.id);
+        if (left === undefined || left <= 0 || left > 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 (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: scrollbarStyles(colors, "hover"),
+            };
+        }
+        return { display: "flex", flexWrap: "wrap", gap: GAP, pt: "0.25rem" };
+    };
+    return (_jsxs(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) => 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 (_jsxs(Box, { children: [_jsxs(Flex, { align: "baseline", justify: "space-between", gap: 3, mb: 3, children: [_jsxs(Flex, { align: "baseline", gap: 2, minW: 0, children: [_jsx(Text, { as: "span", id: labelId, fontSize: "sm", fontWeight: 600, color: colors.header[900], children: axis.label }), showSelectedLabel && picked ? (_jsx(Text, { as: "span", fontSize: "sm", color: colors.textMuted, noOfLines: 1, children: picked.label })) : null] }), guide ? (_jsxs(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: focusVisibleStyles(colors), children: [_jsx(Ruler, { size: 14, "aria-hidden": true }), guide.label] })) : null] }), _jsx(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) => (_jsx(OptionChip, { 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));
+            }), _jsx(Box, { role: "status", id: statusId, "aria-live": "polite", mt: error ? -2 : 0, children: error ? (_jsxs(Flex, { align: "center", gap: 1.5, color: colors.semanticText.error, fontSize: "sm", fontWeight: 600, children: [_jsx(CircleAlert, { size: 14, "aria-hidden": true }), _jsx(Text, { as: "span", children: error })] })) : null })] }));
+};
+export default VariantSelector;

package/dist/esm/Components/VariantSelector/VariantSelectorProps.js

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

package/dist/esm/Components/VariantSelector/variantSelection.js

@@ -0,0 +1,19 @@
+import { isOptionAvailable } from "../Commerce/commerceVariants.js";
+/** Picks `valueId` on `axisId`, then drops every other pick that no sellable variant can pair with it. */
+export 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 (!isOptionAvailable(variants, next, axis.id, pick))
+            delete next[axis.id];
+    }
+    return next;
+};
+/** Sold out under every combination, so picking it can never lead to a purchasable variant. */
+export const isSoldOutEverywhere = (variants, axisId, valueId) => !isOptionAvailable(variants, {}, axisId, valueId);
+export const sameSelection = (a, b) => {
+    const keys = new Set([...Object.keys(a), ...Object.keys(b)]);
+    return [...keys].every((key) => a[key] === b[key]);
+};

package/dist/esm/Components/WishlistToggle/WishlistToggle.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { Box } from "@chakra-ui/react";
+import { keyframes } from "@emotion/react";
+import { Heart } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { MOTION_EASE, transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { BUTTON_SIZES } from "../../Theme/tokens/primitives/controlSizes.js";
+import { reducedMotionSx, usePrefersReducedMotion } from "../../Theme/chakra/motion.js";
+import { focusVisibleRing } from "../../Theme/chakra/focusRing.styles.js";
+import { resolveFilledSurface } from "../../Theme/tokens/builders/filledSurface.js";
+import { overlayScrim } from "../../Theme/tokens/builders/scrim.js";
+const HIT_PX = { sm: 32, md: 44, lg: 48 };
+const POP_MS = 320;
+const pop = 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 } = useCustomTheme();
+    const reduced = usePrefersReducedMotion();
+    const [inner, setInner] = useState(defaultSelected);
+    const [popKey, setPopKey] = useState(0);
+    const on = selected !== null && selected !== void 0 ? selected : inner;
+    const spec = 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 = resolveFilledSurface(colors.semantic.error, colors);
+    const look = (() => {
+        if (variant === "glass") {
+            return on
+                ? { bg: saved.fill, hoverBg: saved.hoverFill, color: saved.color }
+                : { bg: overlayScrim(colors), hoverBg: 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 (_jsx(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]": focusVisibleRing(colors),
+            "&:hover:not(:disabled) > [data-disc]": { backgroundColor: look.hoverBg },
+            ...(reduced ? {} : { "&:active:not(:disabled) > [data-disc]": { transform: "scale(0.92)" } }),
+        }, children: _jsx(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: transitionFor(["background-color", "color", "transform"]), sx: {
+                ...(variant === "glass" ? { backdropFilter: "blur(8px)", WebkitBackdropFilter: "blur(8px)" } : {}),
+                ...reducedMotionSx(),
+            }, children: _jsx(Box, { as: "span", display: "inline-flex", "data-pop": popping || undefined, animation: popping ? `${pop} ${POP_MS}ms ${MOTION_EASE}` : undefined, children: _jsx(Heart, { size: icon, "aria-hidden": true, fill: on ? "currentColor" : "none", strokeWidth: 2 }) }, popKey) }) }));
+};
+export default WishlistToggle;

package/dist/esm/Components/WishlistToggle/WishlistToggleProps.js

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

package/dist/esm/Theme/assertPalette.js

@@ -3,7 +3,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",
 ];
 export const allPaletteTokensListed = true;
 const NESTED = [

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

@@ -25,6 +25,7 @@ import { withPlaceholderRung, withTableHoverRung } from "../builders/resolvedRun
 import { buildFocusRing, withFocusRing } from "../builders/focusRing.js";
 import { withSurfaceRungs } from "../builders/surfaceRungs.js";
 import { buildSurfaceRaised, withSurfaceRaised } from "../builders/surfaceRaised.js";
+import { buildStar } from "../builders/star.js";
 /** Derived, never hand-written: a copied hex goes stale the moment a canvas moves. */
 export const finalizeLightPalette = (source) => ({
     ...source,
@@ -36,6 +37,7 @@ export const finalizeLightPalette = (source) => ({
     onSemantic: buildOnSemantic(source.semantic, source.white, source.black),
     focusRing: buildFocusRing(source),
     surfaceRaised: buildSurfaceRaised(source),
+    star: buildStar(source.backgroundColor.main),
 });
 export { lavender, meadow, radiant, skyline, slate, emerald, rosewood, storefront, zinc };
 export { lavenderDark, meadowDark, radiantDark, skylineDark, slateDark, emeraldDark, rosewoodDark, storefrontDark, zincDark, };

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

@@ -6,6 +6,7 @@ import { buildMutedText } from "./mutedText.js";
 import { buildSemanticText, buildOnSemantic } from "./semanticText.js";
 import { buildFocusRing } from "./focusRing.js";
 import { buildSurfaceRaised } from "./surfaceRaised.js";
+import { buildStar } from "./star.js";
 // 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];
@@ -203,6 +204,7 @@ export function buildDarkPalette(light) {
         onSemantic: buildOnSemantic(semantic, light.white, light.black),
         focusRing: buildFocusRing({ primary, background, backgroundColor: namedSurfaces }),
         surfaceRaised: buildSurfaceRaised({ backgroundColor: namedSurfaces, background, white }),
+        star: buildStar(namedSurfaces.main),
         sidebar: withSidebarTokens(light),
         boxShadow: {
             primary: buildPrimaryShadowTint(primary[500]),