pixelize-design-library 2.4.2 → 3.0.0

package/dist/Components/PriceBlock/PriceBlockProps.d.ts

@@ -0,0 +1,45 @@
+import type { PriceFormat } from "../Commerce/commerceTypes";
+import type { UnitPrice } from "../../Utils/price";
+/** Price typography scale: sm for cards, md for rows and sticky bars, lg for the product page. */
+export type PriceBlockSize = "sm" | "md" | "lg";
+/** Cross-axis alignment of the price lines inside the block. */
+export type PriceBlockAlign = "start" | "center" | "end";
+/** Visually-hidden and visible copy; override every string for another language. */
+export interface PriceBlockLabels {
+    /** Screen-reader prefix before the selling price. */
+    price: string;
+    /** Screen-reader prefix inside the struck MRP. */
+    originalPrice: string;
+    /** Visible discount text, given the whole-number percentage. */
+    off: (percent: number) => string;
+    /** Visible savings text, given the already-formatted amount. */
+    save: (amount: string) => string;
+}
+/** Selling price with struck MRP, discount, tax note and unit price; every figure comes from `Utils/price` helpers. */
+export interface PriceBlockProps extends PriceFormat {
+    /** Selling price; ignored when `priceRange` is set. */
+    price?: number;
+    /** Original list price; the strike and discount only render when it is above `price`. */
+    mrp?: number;
+    /** Shows "min – max" instead of a single price, e.g. for a product whose variants differ; hides the MRP and discount. */
+    priceRange?: {
+        /** Lowest price, formatted first; equal to `max` shows a single price. */
+        min: number;
+        /** Highest price, formatted after the dash. */
+        max: number;
+    };
+    /** Typography scale; defaults to "md". */
+    size?: PriceBlockSize;
+    /** Alignment of the lines; defaults to "start". */
+    align?: PriceBlockAlign;
+    /** Adds a "You save ₹1,500" line under the price; needs `mrp`. */
+    showSavings?: boolean;
+    /** Muted line under the price, e.g. "Inclusive of all taxes". */
+    taxNote?: string;
+    /** A `unitPrice()` result (null renders nothing), or a ready-made string; rendered as "₹169.80 / 100 g". */
+    unitPrice?: UnitPrice | string | null;
+    /** Overrides the default English copy; unset keys keep their default. */
+    labels?: Partial<PriceBlockLabels>;
+    /** Test id on the block's root. */
+    "data-testid"?: string;
+}

package/dist/Components/PriceBlock/PriceBlockProps.js

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

package/dist/Components/Primitives/Primitives.d.ts

@@ -1,6 +1,3 @@
-export { Box, Flex, Stack, VStack, HStack, Grid, GridItem, SimpleGrid, Wrap, WrapItem, Center, Spacer, Container, Divider, Text, Heading, Link, Image, Icon, Avatar, AvatarGroup, Badge, Spinner, Alert, AlertIcon, AlertTitle, AlertDescription, Portal, Collapse, Show, Hide, List, ListItem, ListIcon, OrderedList, UnorderedList, Tabs, TabList, Tab, TabPanels, TabPanel, Popover, PopoverTrigger, PopoverContent, PopoverBody, PopoverHeader, PopoverFooter, PopoverArrow, PopoverCloseButton, FormControl, FormLabel, FormErrorMessage, FormHelperText, IconButton, TableContainer, Thead, Tbody, Tfoot, Tr, Th, Td, Menu, MenuButton, MenuList, MenuItem, MenuGroup, MenuDivider, MenuOptionGroup, MenuItemOption, Accordion, AccordionItem, AccordionButton, AccordionPanel, AccordionIcon, SliderTrack, SliderFilledTrack, SliderThumb, SliderMark, ChakraProvider, extendTheme, useDisclosure, useMediaQuery, useToken, useBreakpointValue, } from "@chakra-ui/react";
-export { Table as TableRoot, Slider as RangeSlider } from "@chakra-ui/react";
-export type { BoxProps, FlexProps, StackProps, TextProps, HeadingProps, GridProps, GridItemProps, SimpleGridProps, AvatarProps, BadgeProps, IconProps, LinkProps, ImageProps, SpinnerProps, DividerProps, ContainerProps, IconButtonProps, FormControlProps, FormLabelProps, TabsProps, PopoverProps, ListProps, AlertProps, MenuProps, AccordionProps, } from "@chakra-ui/react";
-export { Input, Textarea, Progress, Radio, RadioGroup, Skeleton, ModalOverlay, ModalContent, ModalCloseButton, CardBody, } from "@chakra-ui/react";
-export { Card as ChakraCard, Select as ChakraSelect, Modal as ChakraModal, ModalBody as ChakraModalBody, ModalHeader as ChakraModalHeader, ModalFooter as ChakraModalFooter, } from "@chakra-ui/react";
-export type { InputProps, TextareaProps, ProgressProps, RadioProps, SkeletonProps as ChakraSkeletonProps, SelectProps as ChakraSelectProps, ModalProps as ChakraModalProps, CardProps as ChakraCardProps, } from "@chakra-ui/react";
+export { Box, Flex, Stack, VStack, HStack, Grid, GridItem, SimpleGrid, Wrap, WrapItem, Center, Spacer, Container, Divider, Text, Heading, Link, Image, Icon, Badge, Alert, AlertIcon, AlertTitle, AlertDescription, Portal, Collapse, Show, Hide, List, ListItem, ListIcon, OrderedList, UnorderedList, Popover, PopoverTrigger, PopoverContent, PopoverBody, PopoverHeader, PopoverFooter, PopoverArrow, PopoverCloseButton, FormControl, FormLabel, FormErrorMessage, FormHelperText, TableContainer, Thead, Tbody, Tfoot, Tr, Th, Td, Menu, MenuButton, MenuList, MenuItem, MenuGroup, MenuDivider, MenuOptionGroup, MenuItemOption, ChakraProvider, extendTheme, useDisclosure, useMediaQuery, useToken, useBreakpointValue, } from "@chakra-ui/react";
+export { Table as TableRoot } from "@chakra-ui/react";
+export type { BoxProps, FlexProps, StackProps, TextProps, HeadingProps, GridProps, GridItemProps, SimpleGridProps, BadgeProps, IconProps, LinkProps, ImageProps, DividerProps, ContainerProps, FormControlProps, FormLabelProps, PopoverProps, ListProps, AlertProps, MenuProps, } from "@chakra-ui/react";

package/dist/Components/Primitives/Primitives.js

@@ -1,8 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FormControl = exports.PopoverCloseButton = exports.PopoverArrow = exports.PopoverFooter = exports.PopoverHeader = exports.PopoverBody = exports.PopoverContent = exports.PopoverTrigger = exports.Popover = exports.TabPanel = exports.TabPanels = exports.Tab = exports.TabList = exports.Tabs = exports.UnorderedList = exports.OrderedList = exports.ListIcon = exports.ListItem = exports.List = exports.Hide = exports.Show = exports.Collapse = exports.Portal = exports.AlertDescription = exports.AlertTitle = exports.AlertIcon = exports.Alert = exports.Spinner = exports.Badge = exports.AvatarGroup = exports.Avatar = exports.Icon = exports.Image = exports.Link = exports.Heading = exports.Text = exports.Divider = exports.Container = exports.Spacer = exports.Center = exports.WrapItem = exports.Wrap = exports.SimpleGrid = exports.GridItem = exports.Grid = exports.HStack = exports.VStack = exports.Stack = exports.Flex = exports.Box = void 0;
-exports.ChakraModalBody = exports.ChakraModal = exports.ChakraSelect = exports.ChakraCard = exports.CardBody = exports.ModalCloseButton = exports.ModalContent = exports.ModalOverlay = exports.Skeleton = exports.RadioGroup = exports.Radio = exports.Progress = exports.Textarea = exports.Input = exports.RangeSlider = exports.TableRoot = exports.useBreakpointValue = exports.useToken = exports.useMediaQuery = exports.useDisclosure = exports.extendTheme = exports.ChakraProvider = exports.SliderMark = exports.SliderThumb = exports.SliderFilledTrack = exports.SliderTrack = exports.AccordionIcon = exports.AccordionPanel = exports.AccordionButton = exports.AccordionItem = exports.Accordion = exports.MenuItemOption = exports.MenuOptionGroup = exports.MenuDivider = exports.MenuGroup = exports.MenuItem = exports.MenuList = exports.MenuButton = exports.Menu = exports.Td = exports.Th = exports.Tr = exports.Tfoot = exports.Tbody = exports.Thead = exports.TableContainer = exports.IconButton = exports.FormHelperText = exports.FormErrorMessage = exports.FormLabel = void 0;
-exports.ChakraModalFooter = exports.ChakraModalHeader = void 0;
+exports.Tr = exports.Tfoot = exports.Tbody = exports.Thead = exports.TableContainer = exports.FormHelperText = exports.FormErrorMessage = exports.FormLabel = exports.FormControl = exports.PopoverCloseButton = exports.PopoverArrow = exports.PopoverFooter = exports.PopoverHeader = exports.PopoverBody = exports.PopoverContent = exports.PopoverTrigger = exports.Popover = exports.UnorderedList = exports.OrderedList = exports.ListIcon = exports.ListItem = exports.List = exports.Hide = exports.Show = exports.Collapse = exports.Portal = exports.AlertDescription = exports.AlertTitle = exports.AlertIcon = exports.Alert = exports.Badge = exports.Icon = exports.Image = exports.Link = exports.Heading = exports.Text = exports.Divider = exports.Container = exports.Spacer = exports.Center = exports.WrapItem = exports.Wrap = exports.SimpleGrid = exports.GridItem = exports.Grid = exports.HStack = exports.VStack = exports.Stack = exports.Flex = exports.Box = void 0;
+exports.TableRoot = exports.useBreakpointValue = exports.useToken = exports.useMediaQuery = exports.useDisclosure = exports.extendTheme = exports.ChakraProvider = exports.MenuItemOption = exports.MenuOptionGroup = exports.MenuDivider = exports.MenuGroup = exports.MenuItem = exports.MenuList = exports.MenuButton = exports.Menu = exports.Td = exports.Th = void 0;
 var react_1 = require("@chakra-ui/react");
 Object.defineProperty(exports, "Box", { enumerable: true, get: function () { return react_1.Box; } });
 Object.defineProperty(exports, "Flex", { enumerable: true, get: function () { return react_1.Flex; } });
@@ -23,10 +22,7 @@ Object.defineProperty(exports, "Heading", { enumerable: true, get: function () {
 Object.defineProperty(exports, "Link", { enumerable: true, get: function () { return react_1.Link; } });
 Object.defineProperty(exports, "Image", { enumerable: true, get: function () { return react_1.Image; } });
 Object.defineProperty(exports, "Icon", { enumerable: true, get: function () { return react_1.Icon; } });
-Object.defineProperty(exports, "Avatar", { enumerable: true, get: function () { return react_1.Avatar; } });
-Object.defineProperty(exports, "AvatarGroup", { enumerable: true, get: function () { return react_1.AvatarGroup; } });
 Object.defineProperty(exports, "Badge", { enumerable: true, get: function () { return react_1.Badge; } });
-Object.defineProperty(exports, "Spinner", { enumerable: true, get: function () { return react_1.Spinner; } });
 Object.defineProperty(exports, "Alert", { enumerable: true, get: function () { return react_1.Alert; } });
 Object.defineProperty(exports, "AlertIcon", { enumerable: true, get: function () { return react_1.AlertIcon; } });
 Object.defineProperty(exports, "AlertTitle", { enumerable: true, get: function () { return react_1.AlertTitle; } });
@@ -40,11 +36,6 @@ Object.defineProperty(exports, "ListItem", { enumerable: true, get: function ()
 Object.defineProperty(exports, "ListIcon", { enumerable: true, get: function () { return react_1.ListIcon; } });
 Object.defineProperty(exports, "OrderedList", { enumerable: true, get: function () { return react_1.OrderedList; } });
 Object.defineProperty(exports, "UnorderedList", { enumerable: true, get: function () { return react_1.UnorderedList; } });
-Object.defineProperty(exports, "Tabs", { enumerable: true, get: function () { return react_1.Tabs; } });
-Object.defineProperty(exports, "TabList", { enumerable: true, get: function () { return react_1.TabList; } });
-Object.defineProperty(exports, "Tab", { enumerable: true, get: function () { return react_1.Tab; } });
-Object.defineProperty(exports, "TabPanels", { enumerable: true, get: function () { return react_1.TabPanels; } });
-Object.defineProperty(exports, "TabPanel", { enumerable: true, get: function () { return react_1.TabPanel; } });
 Object.defineProperty(exports, "Popover", { enumerable: true, get: function () { return react_1.Popover; } });
 Object.defineProperty(exports, "PopoverTrigger", { enumerable: true, get: function () { return react_1.PopoverTrigger; } });
 Object.defineProperty(exports, "PopoverContent", { enumerable: true, get: function () { return react_1.PopoverContent; } });
@@ -57,7 +48,6 @@ Object.defineProperty(exports, "FormControl", { enumerable: true, get: function
 Object.defineProperty(exports, "FormLabel", { enumerable: true, get: function () { return react_1.FormLabel; } });
 Object.defineProperty(exports, "FormErrorMessage", { enumerable: true, get: function () { return react_1.FormErrorMessage; } });
 Object.defineProperty(exports, "FormHelperText", { enumerable: true, get: function () { return react_1.FormHelperText; } });
-Object.defineProperty(exports, "IconButton", { enumerable: true, get: function () { return react_1.IconButton; } });
 Object.defineProperty(exports, "TableContainer", { enumerable: true, get: function () { return react_1.TableContainer; } });
 Object.defineProperty(exports, "Thead", { enumerable: true, get: function () { return react_1.Thead; } });
 Object.defineProperty(exports, "Tbody", { enumerable: true, get: function () { return react_1.Tbody; } });
@@ -73,41 +63,12 @@ Object.defineProperty(exports, "MenuGroup", { enumerable: true, get: function ()
 Object.defineProperty(exports, "MenuDivider", { enumerable: true, get: function () { return react_1.MenuDivider; } });
 Object.defineProperty(exports, "MenuOptionGroup", { enumerable: true, get: function () { return react_1.MenuOptionGroup; } });
 Object.defineProperty(exports, "MenuItemOption", { enumerable: true, get: function () { return react_1.MenuItemOption; } });
-Object.defineProperty(exports, "Accordion", { enumerable: true, get: function () { return react_1.Accordion; } });
-Object.defineProperty(exports, "AccordionItem", { enumerable: true, get: function () { return react_1.AccordionItem; } });
-Object.defineProperty(exports, "AccordionButton", { enumerable: true, get: function () { return react_1.AccordionButton; } });
-Object.defineProperty(exports, "AccordionPanel", { enumerable: true, get: function () { return react_1.AccordionPanel; } });
-Object.defineProperty(exports, "AccordionIcon", { enumerable: true, get: function () { return react_1.AccordionIcon; } });
-Object.defineProperty(exports, "SliderTrack", { enumerable: true, get: function () { return react_1.SliderTrack; } });
-Object.defineProperty(exports, "SliderFilledTrack", { enumerable: true, get: function () { return react_1.SliderFilledTrack; } });
-Object.defineProperty(exports, "SliderThumb", { enumerable: true, get: function () { return react_1.SliderThumb; } });
-Object.defineProperty(exports, "SliderMark", { enumerable: true, get: function () { return react_1.SliderMark; } });
 Object.defineProperty(exports, "ChakraProvider", { enumerable: true, get: function () { return react_1.ChakraProvider; } });
 Object.defineProperty(exports, "extendTheme", { enumerable: true, get: function () { return react_1.extendTheme; } });
 Object.defineProperty(exports, "useDisclosure", { enumerable: true, get: function () { return react_1.useDisclosure; } });
 Object.defineProperty(exports, "useMediaQuery", { enumerable: true, get: function () { return react_1.useMediaQuery; } });
 Object.defineProperty(exports, "useToken", { enumerable: true, get: function () { return react_1.useToken; } });
 Object.defineProperty(exports, "useBreakpointValue", { enumerable: true, get: function () { return react_1.useBreakpointValue; } });
-// Renamed: the library's own Table and Slider own these names.
+// Renamed: the library's own Table owns this name.
 var react_2 = require("@chakra-ui/react");
 Object.defineProperty(exports, "TableRoot", { enumerable: true, get: function () { return react_2.Table; } });
-Object.defineProperty(exports, "RangeSlider", { enumerable: true, get: function () { return react_2.Slider; } });
-var react_3 = require("@chakra-ui/react");
-Object.defineProperty(exports, "Input", { enumerable: true, get: function () { return react_3.Input; } });
-Object.defineProperty(exports, "Textarea", { enumerable: true, get: function () { return react_3.Textarea; } });
-Object.defineProperty(exports, "Progress", { enumerable: true, get: function () { return react_3.Progress; } });
-Object.defineProperty(exports, "Radio", { enumerable: true, get: function () { return react_3.Radio; } });
-Object.defineProperty(exports, "RadioGroup", { enumerable: true, get: function () { return react_3.RadioGroup; } });
-Object.defineProperty(exports, "Skeleton", { enumerable: true, get: function () { return react_3.Skeleton; } });
-Object.defineProperty(exports, "ModalOverlay", { enumerable: true, get: function () { return react_3.ModalOverlay; } });
-Object.defineProperty(exports, "ModalContent", { enumerable: true, get: function () { return react_3.ModalContent; } });
-Object.defineProperty(exports, "ModalCloseButton", { enumerable: true, get: function () { return react_3.ModalCloseButton; } });
-Object.defineProperty(exports, "CardBody", { enumerable: true, get: function () { return react_3.CardBody; } });
-// Prefixed because the library ships its own component under each of these names.
-var react_4 = require("@chakra-ui/react");
-Object.defineProperty(exports, "ChakraCard", { enumerable: true, get: function () { return react_4.Card; } });
-Object.defineProperty(exports, "ChakraSelect", { enumerable: true, get: function () { return react_4.Select; } });
-Object.defineProperty(exports, "ChakraModal", { enumerable: true, get: function () { return react_4.Modal; } });
-Object.defineProperty(exports, "ChakraModalBody", { enumerable: true, get: function () { return react_4.ModalBody; } });
-Object.defineProperty(exports, "ChakraModalHeader", { enumerable: true, get: function () { return react_4.ModalHeader; } });
-Object.defineProperty(exports, "ChakraModalFooter", { enumerable: true, get: function () { return react_4.ModalFooter; } });

package/dist/Components/ProductBadges/ProductBadges.d.ts

@@ -0,0 +1,4 @@
+import type { ProductBadgesProps } from "./ProductBadgesProps";
+/** Stack of corner badges (sale, new, low stock…) built from `ProductBadge[]`; filled chips resolve ink per brand and mode. */
+declare const ProductBadges: ({ badges, max, size, variant, orientation, "data-testid": testId, }: ProductBadgesProps) => import("react/jsx-runtime").JSX.Element | null;
+export default ProductBadges;

package/dist/Components/ProductBadges/ProductBadges.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const typography_1 = require("../../Theme/tokens/primitives/typography");
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
+const scrim_1 = require("../../Theme/tokens/builders/scrim");
+const statusTone_1 = require("../../Theme/tokens/builders/statusTone");
+const scaleFor = (colors, tone) => {
+    switch (tone) {
+        case "accent":
+            return colors.primary;
+        case "neutral":
+            return colors.gray;
+        case "success":
+            return colors.semantic.success;
+        case "warning":
+            return colors.semantic.warning;
+        case "danger":
+            return colors.semantic.error;
+        case "info":
+            return colors.semantic.info;
+    }
+};
+const SIZE = {
+    sm: { h: "1.25rem", font: "0.6875rem", px: 1.5 },
+    md: { h: "1.5rem", font: "0.75rem", px: 2 },
+};
+const lookFor = (colors, tone, variant) => {
+    if (variant === "glass") {
+        const dot = tone === "inverse" || tone === "neutral" ? undefined : (0, filledSurface_1.resolveFilledSurface)(scaleFor(colors, tone), colors).fill;
+        return { bg: (0, scrim_1.overlayScrim)(colors), color: colors.white, dot };
+    }
+    if (tone === "inverse") {
+        return variant === "soft"
+            ? { bg: colors.background[100], color: colors.header[900] }
+            : { bg: colors.header[900], color: colors.background[50] };
+    }
+    const scale = scaleFor(colors, tone);
+    if (variant === "soft") {
+        const soft = (0, statusTone_1.resolveStatusTone)(scale, (0, accentText_1.isDarkCanvas)(colors.backgroundColor.main) ? "dark" : "light");
+        return { bg: soft.bg, color: soft.fg };
+    }
+    const filled = (0, filledSurface_1.resolveFilledSurface)(scale, colors);
+    return { bg: filled.fill, color: filled.color };
+};
+/** Stack of corner badges (sale, new, low stock…) built from `ProductBadge[]`; filled chips resolve ink per brand and mode. */
+const ProductBadges = ({ badges, max = 2, size = "sm", variant = "solid", orientation = "vertical", "data-testid": testId, }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const shown = badges.slice(0, Math.max(0, max));
+    if (shown.length === 0)
+        return null;
+    const s = SIZE[size];
+    return ((0, jsx_runtime_1.jsx)(react_1.Flex, { as: "ul", role: "list", listStyleType: "none", m: 0, p: 0, direction: orientation === "vertical" ? "column" : "row", align: "flex-start", wrap: orientation === "vertical" ? "nowrap" : "wrap", gap: 1.5, maxW: "100%", "data-testid": testId, children: shown.map((badge, i) => {
+            var _a, _b;
+            const look = lookFor(colors, (_a = badge.tone) !== null && _a !== void 0 ? _a : "neutral", variant);
+            return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "li", "data-tone": (_b = badge.tone) !== null && _b !== void 0 ? _b : "neutral", "data-variant": variant, align: "center", gap: 1, h: s.h, px: s.px, maxW: "100%", borderRadius: "md", bg: look.bg, color: look.color, sx: variant === "glass" ? { backdropFilter: "blur(8px)", WebkitBackdropFilter: "blur(8px)" } : undefined, children: [look.dot && (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", "aria-hidden": true, boxSize: "6px", flexShrink: 0, borderRadius: "full", bg: look.dot }), (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: s.font, fontWeight: 600, lineHeight: 1, letterSpacing: "0.01em", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", sx: typography_1.NUMERIC_TEXT, children: badge.label })] }, `${badge.label}-${i}`));
+        }) }));
+};
+exports.default = ProductBadges;

package/dist/Components/ProductBadges/ProductBadgesProps.d.ts

@@ -0,0 +1,21 @@
+import type { ProductBadge } from "../Commerce/commerceTypes";
+/** Chip height: sm 20 px for compact cards, md 24 px for roomier cards and the product page. */
+export type ProductBadgeSize = "sm" | "md";
+/** solid: filled; soft: tinted; glass: translucent dark chip that stays legible over any photo. */
+export type ProductBadgeVariant = "solid" | "soft" | "glass";
+/** Stacking direction of the chips. */
+export type ProductBadgesOrientation = "vertical" | "horizontal";
+/** Corner badges for a product card or gallery; renders nothing for an empty list. */
+export interface ProductBadgesProps {
+    /** Badges in priority order; the first `max` are shown, the rest are dropped. */
+    badges: ProductBadge[];
+    /** How many badges to show; a card carries at most two. */
+    max?: number;
+    /** Chip height; defaults to `sm`. */
+    size?: ProductBadgeSize;
+    /** Chip style; defaults to `solid`. Use `glass` over photos. */
+    variant?: ProductBadgeVariant;
+    /** Stack direction; defaults to `vertical`, `horizontal` wraps onto new rows. */
+    orientation?: ProductBadgesOrientation;
+    "data-testid"?: string;
+}

package/dist/Components/ProductBadges/ProductBadgesProps.js

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

package/dist/Components/ProductCard/ProductCard.d.ts

@@ -1,3 +1,4 @@
-import { ProductCardProps } from "./ProductCardProps";
-declare const ProductCard: ({ id, label, productImage, rating, reviews, tags, options, button, batch, onAddToCart, onNotifyMe, onClick, onOptionChange, addToCart, goToCart, OnGoToCart, size, notifyMe, isQtyEditable, displayRating, }: ProductCardProps) => import("react/jsx-runtime").JSX.Element;
+import type { ProductCardProps } from "./ProductCardProps";
+/** Chromeless product card: tonal media well, brand, title, rating, price and one action; the whole card is one link target. */
+declare const ProductCard: (props: ProductCardProps) => import("react/jsx-runtime").JSX.Element;
 export default ProductCard;

package/dist/Components/ProductCard/ProductCard.js

@@ -6,62 +6,118 @@ 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 ProductTags_1 = __importDefault(require("./ProductTags"));
-const ProductPrice_1 = __importDefault(require("./ProductPrice"));
-const Button_1 = __importDefault(require("../Button/Button"));
-const ProductLabel_1 = __importDefault(require("./ProductLabel"));
-const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const lucide_react_1 = require("lucide-react");
-const ProductReview_1 = __importDefault(require("./ProductReview"));
-const ProductCard = ({ id, label, productImage, rating, reviews, tags, options, button, batch, onAddToCart, onNotifyMe, onClick, onOptionChange, addToCart, goToCart, OnGoToCart, size = "sm", notifyMe, isQtyEditable = false, displayRating = true, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    const [hover, setHover] = (0, react_1.useState)(false);
-    const theme = (0, useCustomTheme_1.useCustomTheme)();
-    const [selectedOption, setSelectedOption] = (0, react_1.useState)(options === null || options === void 0 ? void 0 : options[0]);
-    const [qty, setQty] = (0, react_1.useState)(1);
-    const handleOptionSelect = (option) => {
-        setSelectedOption(option);
-        onOptionChange === null || onOptionChange === void 0 ? void 0 : onOptionChange(option);
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const motion_2 = require("../../Theme/chakra/motion");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const PriceBlock_1 = __importDefault(require("../PriceBlock/PriceBlock"));
+const ProductBadges_1 = __importDefault(require("../ProductBadges/ProductBadges"));
+const Rating_1 = __importDefault(require("../Rating/Rating"));
+const StockStatus_1 = __importDefault(require("../StockStatus/StockStatus"));
+const WishlistToggle_1 = __importDefault(require("../WishlistToggle/WishlistToggle"));
+const optionInk_1 = require("../OptionChip/optionInk");
+const cardLabels_1 = require("./cardLabels");
+const useMatchMedia_1 = require("../../Hooks/useMatchMedia");
+const cardMetrics_1 = require("./cardMetrics");
+const productCardModel_1 = require("./productCardModel");
+const ProductCardAction_1 = __importDefault(require("./ProductCardAction"));
+const ProductCardMedia_1 = __importDefault(require("./ProductCardMedia"));
+const ProductCardSkeleton_1 = __importDefault(require("./ProductCardSkeleton"));
+const ProductCardSwatches_1 = __importDefault(require("./ProductCardSwatches"));
+const QuickAddSheet_1 = __importDefault(require("./QuickAddSheet"));
+const NO_AXES = [];
+const NO_VARIANTS = [];
+/** Chromeless product card: tonal media well, brand, title, rating, price and one action; the whole card is one link target. */
+const ProductCard = (props) => {
+    var _a, _b;
+    const { title, brand, media, alt, price, mrp, unitPrice, rating, ratingCount, badges, axes = NO_AXES, variants = NO_VARIANTS, mediaIdsByOption, swatchLimit = productCardModel_1.DEFAULT_SWATCH_LIMIT, stock, outOfStock, href, linkAs, linkProps, onPress, layout = "grid", density = "comfortable", aspectRatio = "4/5", action: actionOverride, quantity, onQuantityChange, onAdd, quickAddPresentation, quickAddDrawerProps, onRemove, onNotify, wishlisted, onWishlistChange, selected = false, isLoading = false, mediaOverlay, meta, actions, labels, currency, locale, "data-testid": testId, } = props;
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const reduced = (0, motion_2.usePrefersReducedMotion)();
+    const titleId = (0, react_1.useId)();
+    const [sheetOpen, setSheetOpen] = (0, react_1.useState)(false);
+    const [sheetMounted, setSheetMounted] = (0, react_1.useState)(false);
+    const [picked, setPicked] = (0, react_1.useState)(null);
+    const [previewed, setPreviewed] = (0, react_1.useState)(null);
+    const [innerQuantity, setInnerQuantity] = (0, react_1.useState)(0);
+    const [pressed, setPressed] = (0, react_1.useState)(false);
+    const canHover = (0, useMatchMedia_1.useMatchMedia)(cardMetrics_1.FINE_POINTER_QUERY, true);
+    if (isLoading)
+        return (0, jsx_runtime_1.jsx)(ProductCardSkeleton_1.default, { layout: layout, density: density, aspectRatio: aspectRatio, "data-testid": testId });
+    const copy = { ...cardLabels_1.DEFAULT_LABELS, ...labels };
+    const m = cardMetrics_1.DENSITY[density];
+    const horizontal = layout === "list";
+    const rail = layout === "rail";
+    const soldOut = (0, productCardModel_1.isSoldOut)(outOfStock, stock, variants);
+    const sole = (0, productCardModel_1.soleVariantOf)(axes, variants);
+    const action = (0, productCardModel_1.deriveAction)(actionOverride, soldOut, axes);
+    const left = soldOut ? undefined : (0, productCardModel_1.lowStockCount)(stock, sole);
+    const bagged = quantity !== null && quantity !== void 0 ? quantity : innerQuantity;
+    const maxQuantity = (() => {
+        const count = stock !== null && stock !== void 0 ? stock : sole === null || sole === void 0 ? void 0 : sole.stock;
+        return count !== undefined && count > 0 ? count : undefined;
+    })();
+    const swatchAxis = (0, productCardModel_1.swatchAxisOf)(axes);
+    const activeId = (_a = previewed !== null && previewed !== void 0 ? previewed : picked) !== null && _a !== void 0 ? _a : (_b = swatchAxis === null || swatchAxis === void 0 ? void 0 : swatchAxis.values[0]) === null || _b === void 0 ? void 0 : _b.id;
+    const frames = (0, productCardModel_1.framesFor)(media, mediaIdsByOption, swatchAxis === null || swatchAxis === void 0 ? void 0 : swatchAxis.id, activeId);
+    const priced = (0, productCardModel_1.variantsFor)(variants, swatchAxis === null || swatchAxis === void 0 ? void 0 : swatchAxis.id, picked !== null && picked !== void 0 ? picked : undefined);
+    const range = sole ? undefined : (0, productCardModel_1.rangeOf)(priced);
+    const soldOutValues = new Set(swatchAxis ? swatchAxis.values.filter((value) => (0, productCardModel_1.valueSoldOut)(variants, swatchAxis.id, value.id)).map((value) => value.id) : []);
+    const interactive = !!href || !!linkAs || !!onPress;
+    const LinkTag = href || linkAs ? (linkAs !== null && linkAs !== void 0 ? linkAs : "a") : "button";
+    const linkExtras = href || linkAs ? { href, ...linkProps } : { type: "button" };
+    const add = () => {
+        if (quantity === undefined)
+            setInnerQuantity(1);
+        onAdd === null || onAdd === void 0 ? void 0 : onAdd(sole === null || sole === void 0 ? void 0 : sole.id, 1);
     };
-    const handleIncrement = (e) => {
-        e.stopPropagation();
-        if ((selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) && qty < selectedOption.stocks) {
-            setQty((prev) => prev + 1);
+    const press = () => {
+        if (action === "notify")
+            onNotify === null || onNotify === void 0 ? void 0 : onNotify();
+        else if (action === "options") {
+            setSheetMounted(true);
+            setSheetOpen(true);
         }
+        else
+            add();
     };
-    const handleDecrement = (e) => {
-        e.stopPropagation();
-        if (qty > 1) {
-            setQty((prev) => prev - 1);
-        }
+    const changeQuantity = (next) => {
+        if (quantity === undefined)
+            setInnerQuantity(next);
+        onQuantityChange === null || onQuantityChange === void 0 ? void 0 : onQuantityChange(next);
     };
-    const sizeStyles = {
-        xs: { cardWidth: "16.25rem", imgHeight: "11.25rem", padding: 3 },
-        sm: { cardWidth: "18rem", imgHeight: "13rem", padding: 4 },
-        md: { cardWidth: "20rem", imgHeight: "15rem", padding: 5 },
-        lg: { cardWidth: "22rem", imgHeight: "17rem", padding: 6 },
+    const remove = () => {
+        changeQuantity(0);
+        onRemove === null || onRemove === void 0 ? void 0 : onRemove();
     };
-    const { cardWidth, imgHeight, padding } = sizeStyles[size];
-    const imageList = (_a = productImage === null || productImage === void 0 ? void 0 : productImage.filter((img) => img.isImage !== false)) !== null && _a !== void 0 ? _a : [];
-    const isSizeType = (s) => s === "xs" || s === "sm" || s === "md" || s === "lg";
-    const safeSize = isSizeType(size) ? size : "md";
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { borderWidth: "0.063rem", borderRadius: "lg", overflow: "hidden", w: "full", maxW: cardWidth, h: "full", display: "flex", flexDirection: "column", position: "relative", bg: theme.colors.background[50], boxShadow: "lg", children: [imageList.length > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Box, { onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), h: imgHeight, w: "full", overflow: "hidden", onClick: onClick, cursor: "pointer", children: [(0, jsx_runtime_1.jsx)(react_2.Image, { src: hover && ((_b = imageList === null || imageList === void 0 ? void 0 : imageList[1]) === null || _b === void 0 ? void 0 : _b.imageUrl) ? imageList[1].imageUrl : (_c = imageList === null || imageList === void 0 ? void 0 : imageList[0]) === null || _c === void 0 ? void 0 : _c.imageUrl, alt: label, w: "full", h: "full", transform: hover ? "scale(1.06)" : "scale(1)", transition: "transform 0.7s cubic-bezier(0.16, 1, 0.3, 1)" }), batch && ((0, jsx_runtime_1.jsx)(react_2.Badge, { colorScheme: batch.color || "green", position: "absolute", top: 2, right: 2, fontSize: {
-                            xs: "xs",
-                            sm: "sm",
-                            md: "md",
-                            lg: "lg",
-                        }[size], px: {
-                            xs: 1,
-                            sm: 2,
-                            md: 3,
-                            lg: 4,
-                        }[size], py: {
-                            xs: 0.5,
-                            sm: 1,
-                            md: 1.5,
-                            lg: 2,
-                        }[size], children: batch.label }))] })), (0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 2, align: "start", p: padding, flex: "1", w: "full", children: [(0, jsx_runtime_1.jsx)(react_2.Box, { onClick: onClick, cursor: "pointer", children: (0, jsx_runtime_1.jsx)(ProductLabel_1.default, { label: label, size: size }) }), tags && (0, jsx_runtime_1.jsx)(ProductTags_1.default, { tags: tags, size: size }), options && ((0, jsx_runtime_1.jsx)(ProductPrice_1.default, { options: options, size: size, onSelect: handleOptionSelect, rightSlot: (displayRating && ((rating !== undefined && rating !== null) || (reviews !== undefined && reviews !== null)))
-                            ? (0, jsx_runtime_1.jsx)(ProductReview_1.default, { rating: rating, reviewCount: reviews })
-                            : undefined })), (0, jsx_runtime_1.jsxs)(react_2.VStack, { w: "full", align: "stretch", spacing: 2, mt: "auto", children: [typeof (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) === "number" && ((_d = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _d !== void 0 ? _d : 0) <= 0 && ((0, jsx_runtime_1.jsx)(Button_1.default, { colorScheme: "gray", size: safeSize, width: "100%", isDisabled: true, children: "Out of Stock" })), addToCart && (((_e = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _e !== void 0 ? _e : 1) > 0) && isQtyEditable && ((0, jsx_runtime_1.jsx)(react_2.HStack, { w: "full", justify: "space-between", children: (0, jsx_runtime_1.jsxs)(react_2.HStack, { children: [(0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Minus, { size: 16 }), "aria-label": "Decrease quantity", size: "xs", onClick: handleDecrement, isDisabled: qty <= 1, isRound: true, variant: "outline", colorScheme: "red" }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontWeight: "bold", w: 8, textAlign: "center", children: qty }), (0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 16 }), "aria-label": "Increase quantity", size: "xs", onClick: handleIncrement, isDisabled: qty >= ((_f = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _f !== void 0 ? _f : 1), isRound: true, variant: "outline", colorScheme: "red" })] }) })), (button === null || button === void 0 ? void 0 : button.onClick) && ((0, jsx_runtime_1.jsx)(Button_1.default, { colorScheme: "red", size: safeSize, width: "100%", onClick: button === null || button === void 0 ? void 0 : button.onClick, children: (_g = button.label) !== null && _g !== void 0 ? _g : "Add to Cart" })), addToCart && (((_h = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _h !== void 0 ? _h : 1) > 0) && ((0, jsx_runtime_1.jsx)(Button_1.default, { width: "100%", size: safeSize, onClick: () => (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.var_id) !== undefined && (onAddToCart === null || onAddToCart === void 0 ? void 0 : onAddToCart(id, selectedOption.var_id, qty)), colorScheme: "red", children: "Add to Cart" })), addToCart && (((_j = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _j !== void 0 ? _j : 1) <= 0) && notifyMe && ((0, jsx_runtime_1.jsx)(Button_1.default, { width: "100%", size: safeSize, onClick: () => (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.var_id) !== undefined && (onNotifyMe === null || onNotifyMe === void 0 ? void 0 : onNotifyMe(id, selectedOption.var_id)), colorScheme: "red", variant: "outline", children: "Notify Me" })), goToCart && ((0, jsx_runtime_1.jsx)(Button_1.default, { width: "100%", size: safeSize, onClick: OnGoToCart, colorScheme: "red", children: "Go to Cart" }))] })] })] }));
+    const defaultControl = ((0, jsx_runtime_1.jsx)(ProductCardAction_1.default, { kind: action, title: title, labels: copy, placement: horizontal ? "inline" : "media", inset: m.actionInset, hoverBar: density === "spacious" && !horizontal, quantity: action === "notify" ? 0 : bagged, maxQuantity: maxQuantity, onPress: press, onQuantityChange: changeQuantity, onRemove: remove }));
+    const slotted = horizontal ? ((0, jsx_runtime_1.jsx)(react_2.Box, { "data-control": true, position: "relative", zIndex: 2, children: actions })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { "data-control": true, position: "absolute", right: m.actionInset, bottom: m.actionInset, zIndex: 2, children: actions }));
+    const control = actions ? slotted : defaultControl;
+    const wishlist = ((0, jsx_runtime_1.jsx)(WishlistToggle_1.default, { variant: horizontal ? "soft" : "glass", size: "md", label: copy.save(title), selected: wishlisted, onSelectedChange: onWishlistChange }));
+    const hoverFrame = previewed === null && canHover ? frames[1] : undefined;
+    const pressable = interactive && !reduced;
+    const ink = (0, optionInk_1.optionInk)(colors).selected;
+    const metaLine = meta !== null && meta !== void 0 ? meta : (left !== undefined ? (0, jsx_runtime_1.jsx)(StockStatus_1.default, { status: "low-stock", count: left, size: "sm" }) : null);
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { as: "article", "aria-labelledby": titleId, "data-testid": testId, "data-layout": layout, "data-density": density, "data-soldout": soldOut || undefined, "data-selected": selected || undefined, "data-pressed": pressed || undefined, onPointerDown: (event) => setPressed(!event.target.closest("[data-control]")), onPointerUp: () => setPressed(false), onPointerLeave: () => setPressed(false), onPointerCancel: () => setPressed(false), position: "relative", display: "flex", flexDirection: horizontal ? "row" : "column", gap: horizontal ? 3 : 0, flexGrow: rail ? 0 : 1, flexShrink: rail ? 0 : 1, w: rail ? m.railWidth : "100%", minW: 0, cursor: interactive ? "pointer" : "default", transition: (0, motion_1.transitionFor)(["transform"]), sx: {
+            ...(rail ? { scrollSnapAlign: "start" } : {}),
+            ...(0, motion_2.reducedMotionSx)(),
+            ...(pressable ? { "&[data-pressed]": { transform: "scale(0.98)" } } : {}),
+            [cardMetrics_1.FINE_POINTER]: {
+                "&:hover [data-hover-frame], &:focus-within [data-hover-frame]": { opacity: 1 },
+                "&:hover [data-bar], &:focus-within [data-bar]": { opacity: 1, transform: "none" },
+                ...(reduced ? {} : { "&:hover [data-primary]": { transform: "scale(1.03)" } }),
+            },
+        }, children: [(0, jsx_runtime_1.jsxs)(ProductCardMedia_1.default, { primary: frames[0], hover: hoverFrame, title: title, alt: alt, aspectRatio: aspectRatio, dimmed: soldOut, selected: selected, fallbackText: copy.imageUnavailable, width: horizontal ? m.listMedia : undefined, children: [!soldOut && badges && badges.length > 0 ? ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: m.badgeInset, insetStart: m.badgeInset, zIndex: 2, maxW: "calc(100% - 3.5rem)", pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(ProductBadges_1.default, { badges: badges, max: 2, size: "sm", variant: "solid" }) })) : null, !horizontal ? ((0, jsx_runtime_1.jsx)(react_2.Box, { "data-control": true, position: "absolute", top: m.wishlistInset, insetEnd: m.wishlistInset, zIndex: 2, children: wishlist })) : null, selected ? ((0, jsx_runtime_1.jsx)(react_2.Box, { "aria-hidden": true, position: "absolute", bottom: m.actionInset, insetStart: m.actionInset, zIndex: 2, display: "inline-flex", alignItems: "center", justifyContent: "center", boxSize: "1.5rem", borderRadius: "full", bg: ink.fill, color: ink.ink, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 14, strokeWidth: 3 }) })) : null, mediaOverlay ? ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", inset: 0, zIndex: 2, pointerEvents: "none", sx: { "& > *": { pointerEvents: "auto" } }, children: mediaOverlay })) : null, !horizontal ? control : null] }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", flex: 1, minW: 0, gap: m.bodyGap, pt: horizontal ? 0 : m.bodyTop, children: [brand ? ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", fontSize: m.brand.size, lineHeight: `${m.brand.line}px`, fontWeight: 500, color: colors.textMuted, noOfLines: 1, children: brand })) : null, (0, jsx_runtime_1.jsx)(react_2.Text, { as: "h3", id: titleId, m: 0, fontSize: m.title.size, lineHeight: `${m.title.line}px`, fontWeight: 500, color: colors.header[900], noOfLines: cardMetrics_1.TITLE_LINES, minH: horizontal ? undefined : `${m.title.line * cardMetrics_1.TITLE_LINES}px`, children: interactive ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: LinkTag, ...linkExtras, "data-card-link": true, onClick: onPress, color: "inherit", textAlign: "start", textDecoration: "none", cursor: "pointer", sx: {
+                                font: "inherit",
+                                background: "none",
+                                border: 0,
+                                p: 0,
+                                outline: "none",
+                                "&::after": { content: '""', position: "absolute", inset: 0, zIndex: 1, borderRadius: cardMetrics_1.MEDIA_RADIUS },
+                                "&:focus-visible::after": (0, focusRing_styles_1.focusVisibleRing)(colors),
+                            }, children: title })) : (title) }), selected ? (0, jsx_runtime_1.jsx)(react_2.VisuallyHidden, { children: copy.selected }) : null, rating !== undefined && rating > 0 ? ((0, jsx_runtime_1.jsx)(Rating_1.default, { value: rating, count: ratingCount, size: "xs", compactCount: true })) : horizontal ? null : ((0, jsx_runtime_1.jsx)(react_2.Box, { minH: "1rem", "aria-hidden": true })), (0, jsx_runtime_1.jsx)(PriceBlock_1.default, { size: m.price, price: price, mrp: soldOut ? undefined : mrp, priceRange: range, unitPrice: unitPrice, currency: currency, locale: locale }), soldOut ? (0, jsx_runtime_1.jsx)(StockStatus_1.default, { status: "out-of-stock", message: copy.soldOut, size: "sm" }) : null, metaLine, swatchAxis && activeId ? ((0, jsx_runtime_1.jsx)(ProductCardSwatches_1.default, { axis: swatchAxis, limit: swatchLimit, dot: m.dot, activeId: activeId, soldOutIds: soldOutValues, labels: copy, onPreview: setPreviewed, onPick: setPicked })) : null, horizontal ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { "data-control": true, position: "relative", zIndex: 2, mt: "auto", pt: 2, align: "center", justify: "space-between", gap: 1, children: [wishlist, control] })) : null] }), action === "options" && sheetMounted ? ((0, jsx_runtime_1.jsx)(QuickAddSheet_1.default, { isOpen: sheetOpen, onClose: () => setSheetOpen(false), title: title, brand: brand, media: frames[0], axes: axes, variants: variants, defaultSelection: swatchAxis && picked ? { [swatchAxis.id]: picked } : undefined, currency: currency, locale: locale, presentation: quickAddPresentation, drawerContentProps: quickAddDrawerProps, onConfirm: (variant, count) => {
+                    onAdd === null || onAdd === void 0 ? void 0 : onAdd(variant.id, count);
+                    setSheetOpen(false);
+                } })) : null] }));
 };
 exports.default = ProductCard;

package/dist/Components/ProductCard/ProductCardAction.d.ts

@@ -0,0 +1,17 @@
+import type { ProductCardAction as ActionKind, ProductCardLabels } from "./ProductCardProps";
+type ProductCardActionProps = {
+    kind: ActionKind;
+    title: string;
+    labels: ProductCardLabels;
+    placement: "media" | "inline";
+    inset: string;
+    hoverBar: boolean;
+    quantity: number;
+    maxQuantity?: number;
+    onPress: () => void;
+    onQuantityChange: (quantity: number) => void;
+    onRemove: () => void;
+};
+/** The card's one control: glass circle (or hover bar), notify pill, or the stepper it morphs into. */
+declare const ProductCardAction: ({ kind, title, labels, placement, inset, hoverBar, quantity, maxQuantity, onPress, onQuantityChange, onRemove, }: ProductCardActionProps) => import("react/jsx-runtime").JSX.Element;
+export default ProductCardAction;

package/dist/Components/ProductCard/ProductCardAction.js

@@ -0,0 +1,66 @@
+"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 react_2 = 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 scrim_1 = require("../../Theme/tokens/builders/scrim");
+const motion_2 = require("../../Theme/chakra/motion");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const QuantityStepper_1 = __importDefault(require("../QuantityStepper/QuantityStepper"));
+const cardMetrics_1 = require("./cardMetrics");
+const tonalHover_1 = require("../CheckoutKit/tonalHover");
+const morphIn = (0, react_2.keyframes) `
+  0% { opacity: 0; transform: scale(0.85); }
+  100% { opacity: 1; transform: scale(1); }
+`;
+const DISC = "2.25rem";
+const BAR_HEIGHT = "2.5rem";
+/** The card's one control: glass circle (or hover bar), notify pill, or the stepper it morphs into. */
+const ProductCardAction = ({ kind, title, labels, placement, inset, hoverBar, quantity, maxQuantity, onPress, onQuantityChange, onRemove, }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const reduced = (0, motion_2.usePrefersReducedMotion)();
+    const onMedia = placement === "media";
+    const place = onMedia
+        ? { position: "absolute", right: inset, bottom: inset, zIndex: 2 }
+        : { position: "relative", zIndex: 2 };
+    if (quantity > 0) {
+        return ((0, jsx_runtime_1.jsx)(react_1.Box, { "data-control": true, "data-stepper": true, ...place, display: "inline-flex", borderRadius: "full", bg: onMedia ? colors.surfaceRaised : colors.transparent, boxShadow: onMedia ? "sm" : "none", animation: reduced ? undefined : `${morphIn} ${motion_1.MOTION_MS.enter}ms ${motion_1.MOTION_EASE}`, children: (0, jsx_runtime_1.jsx)(QuantityStepper_1.default, { size: "sm", value: quantity, min: 1, max: maxQuantity, removable: true, itemLabel: title, onValueChange: onQuantityChange, onRemove: onRemove }) }));
+    }
+    const isNotify = kind === "notify";
+    const name = isNotify ? labels.notifyMeFor(title) : kind === "options" ? labels.chooseOptions(title) : labels.addToBag(title);
+    const barText = kind === "options" ? labels.chooseOptionsText : labels.addToBagText;
+    const bar = onMedia && hoverBar && !isNotify;
+    const look = onMedia
+        ? { bg: (0, scrim_1.overlayScrim)(colors), hoverBg: (0, scrim_1.overlayScrim)(colors), color: colors.white }
+        : { bg: colors.background[100], hoverBg: (0, tonalHover_1.tonalHover)(colors), color: colors.header[900] };
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { as: "button", type: "button", "data-control": true, "data-bar": bar || undefined, "data-action": kind, "aria-label": name, onClick: onPress, ...place, display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 1.5, h: DISC, minW: DISC, px: isNotify ? 3 : 0, borderRadius: "full", bg: look.bg, color: look.color, cursor: "pointer", transition: (0, motion_1.transitionFor)(["background-color", "opacity", "transform"], "base"), _hover: { bg: look.hoverBg }, _active: reduced ? undefined : { transform: "scale(0.9)" }, sx: {
+            outline: "none",
+            ...(onMedia ? { backdropFilter: "blur(8px)", WebkitBackdropFilter: "blur(8px)" } : {}),
+            ...(0, focusRing_styles_1.focusVisibleStyles)(colors),
+            ...(0, motion_2.reducedMotionSx)({ "&:active": { transform: "none" } }),
+            "&::before": { content: '""', position: "absolute", inset: "-0.25rem" },
+            "& [data-label]": { display: isNotify ? "inline" : "none" },
+            ...(bar
+                ? {
+                    [cardMetrics_1.FINE_POINTER]: {
+                        left: inset,
+                        right: "auto",
+                        width: `calc(100% - 2 * ${inset})`,
+                        height: BAR_HEIGHT,
+                        borderRadius: "lg",
+                        opacity: 0,
+                        transform: reduced ? "none" : "translateY(0.5rem)",
+                        "& [data-label]": { display: "inline" },
+                        "&:focus-visible": { opacity: 1, transform: "none" },
+                    },
+                }
+                : {}),
+        }, children: [isNotify ? (0, jsx_runtime_1.jsx)(lucide_react_1.Bell, { size: 16, "aria-hidden": true }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 18, strokeWidth: 2.25, "aria-hidden": true }), (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", "data-label": true, fontSize: "xs-plus", fontWeight: 600, lineHeight: 1, whiteSpace: "nowrap", children: isNotify ? labels.notifyMe : barText })] }));
+};
+exports.default = ProductCardAction;

package/dist/Components/ProductCard/ProductCardGrid.d.ts

@@ -0,0 +1,4 @@
+import type { ProductCardGridProps } from "./ProductCardProps";
+/** List of cards on one grid: 12 px columns and 24 px rows on a phone, 24 and 32 from lg (override with `gap`), rows level in height. */
+declare const ProductCardGrid: ({ children, columns, gap, columnGap, rowGap, "aria-label": ariaLabel, "data-testid": testId }: ProductCardGridProps) => import("react/jsx-runtime").JSX.Element;
+export default ProductCardGrid;

package/dist/Components/ProductCard/ProductCardGrid.js

@@ -0,0 +1,20 @@
+"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 DEFAULT_COLUMNS = { base: 2, sm: 2, md: 3, lg: 4, xl: 5 };
+const template = (columns) => `repeat(${columns}, minmax(0, 1fr))`;
+/** List of cards on one grid: 12 px columns and 24 px rows on a phone, 24 and 32 from lg (override with `gap`), rows level in height. */
+const ProductCardGrid = ({ children, columns, gap, columnGap, rowGap, "aria-label": ariaLabel, "data-testid": testId }) => {
+    var _a, _b;
+    const cols = { ...DEFAULT_COLUMNS, ...columns };
+    return ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "ul", role: "list", "aria-label": ariaLabel, "data-testid": testId, listStyleType: "none", m: 0, p: 0, display: "grid", alignItems: "stretch", columnGap: (_a = columnGap !== null && columnGap !== void 0 ? columnGap : gap) !== null && _a !== void 0 ? _a : { base: "0.75rem", lg: "1.5rem" }, rowGap: (_b = rowGap !== null && rowGap !== void 0 ? rowGap : gap) !== null && _b !== void 0 ? _b : { base: "1.5rem", lg: "2rem" }, gridTemplateColumns: {
+            base: template(cols.base),
+            sm: template(cols.sm),
+            md: template(cols.md),
+            lg: template(cols.lg),
+            xl: template(cols.xl),
+        }, children: react_1.Children.toArray(children).map((child, index) => ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "li", display: "flex", minW: 0, children: (0, jsx_runtime_1.jsx)(react_2.Box, { display: "flex", flexDirection: "column", flex: 1, minW: 0, children: child }) }, index))) }));
+};
+exports.default = ProductCardGrid;

package/dist/Components/ProductCard/ProductCardMedia.d.ts

@@ -0,0 +1,18 @@
+import { type ReactNode } from "react";
+import type { ProductMedia } from "../Commerce/commerceTypes";
+import type { ProductCardAspectRatio } from "./ProductCardProps";
+type ProductCardMediaProps = {
+    primary: ProductMedia | undefined;
+    hover: ProductMedia | undefined;
+    title: string;
+    alt?: string;
+    aspectRatio: ProductCardAspectRatio;
+    dimmed: boolean;
+    selected: boolean;
+    fallbackText: string;
+    width?: string;
+    children?: ReactNode;
+};
+/** Tonal media well: cover-fitted primary frame, optional hover frame, broken-image tile; overlays are children. */
+declare const ProductCardMedia: ({ primary, hover, title, alt, aspectRatio, dimmed, selected, fallbackText, width, children, }: ProductCardMediaProps) => import("react/jsx-runtime").JSX.Element;
+export default ProductCardMedia;