@vtex/faststore 0.0.1

package/dist/matter/product-list/product-list.js

@@ -0,0 +1,342 @@
+"use client";
+import { defineComponent } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+import { useStorefrontContext } from "../../sdk/context/storefront-context.js";
+import { Button } from "../../particles/button/button.js";
+import { Image } from "../../particles/image/image.js";
+import { Badge } from "../../particles/badge/badge.js";
+import { Container } from "../../particles/container/container.js";
+import { Text } from "../../particles/text/text.js";
+import { createContext, useContext, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/matter/product-list/product-list.tsx
+const ProductListConfigContext = createContext({
+	usePriceWithTaxes: false,
+	taxesLabel: "Tax included"
+});
+function useProductListConfig() {
+	return useContext(ProductListConfigContext);
+}
+function formatPrice(value, locale, currency) {
+	return new Intl.NumberFormat(locale, {
+		style: "currency",
+		currency
+	}).format(value);
+}
+function taxRate(item) {
+	if (item.taxPercentage != null) return item.taxPercentage;
+	if (item.tax != null && item.price > 0) return item.tax / item.price;
+	return 0;
+}
+function priceWithTaxes(base, item) {
+	return base * (1 + taxRate(item));
+}
+const ProductListProductsContext = createContext([]);
+const ProductListItemContext = createContext(null);
+function useProductListItem() {
+	const item = useContext(ProductListItemContext);
+	if (!item) throw new Error("ProductCard components must be used inside ProductListGrid.");
+	return item;
+}
+const ProductListRootDefinition = defineComponent({
+	name: "ProductListRoot",
+	importPath: "@vtex/faststore/components",
+	component: ProductListRoot,
+	editor: {
+		label: "Product List Root",
+		category: "commerce"
+	},
+	schema: {
+		usePriceWithTaxes: {
+			type: "boolean",
+			default: false,
+			label: "Use Price With Taxes"
+		},
+		taxesLabel: {
+			type: "string",
+			default: "Tax included",
+			label: "Taxes Label"
+		}
+	},
+	guideline: "Top-level wrapper for the product list; compose as ProductListRoot > ProductListGrid > ProductCard* children. Set usePriceWithTaxes to render tax-inclusive card prices and compose ProductCardTaxLabel to show the taxesLabel."
+});
+const ProductListGridDefinition = defineComponent({
+	name: "ProductListGrid",
+	importPath: "@vtex/faststore/components",
+	component: ProductListGrid,
+	editor: {
+		label: "Product List Grid",
+		category: "commerce"
+	},
+	schema: {},
+	guideline: "Repeating grid that renders the ProductCard* template for each product; must be a direct child of ProductListRoot."
+});
+const ProductCardDefinition = defineComponent({
+	name: "ProductCard",
+	importPath: "@vtex/faststore/components",
+	component: ProductCard,
+	editor: {
+		label: "Product Card",
+		category: "commerce"
+	},
+	schema: { bordered: {
+		type: "boolean",
+		default: true,
+		label: "Bordered"
+	} },
+	guideline: "Optional card wrapper for the ProductCard* parts; always emits data-fs-product-card and data-fs-product-card-bordered (true/false, from the bordered toggle), and adds data-fs-product-card-out-of-stock when the product is unavailable (derived from availability, no prop). The border look is a swatch keyed off data-fs-product-card-bordered. Renders all children unchanged. Must be inside ProductListGrid / ProductShelfItems."
+});
+const ProductCardImageDefinition = defineComponent({
+	name: "ProductCardImage",
+	importPath: "@vtex/faststore/components",
+	component: ProductCardImage,
+	editor: {
+		label: "Product Card Image",
+		category: "commerce"
+	},
+	schema: {
+		objectFit: {
+			type: [
+				"contain",
+				"cover",
+				"fill",
+				"none"
+			],
+			default: "cover",
+			label: "Object Fit"
+		},
+		aspectRatio: {
+			type: "string",
+			label: "Aspect Ratio"
+		}
+	},
+	guideline: "Renders the product image with a configurable aspectRatio (e.g. 1/1, 3/4, 16/9) and objectFit. Alt text comes from the catalog. Must be inside ProductListGrid."
+});
+const ProductCardNameDefinition = defineComponent({
+	name: "ProductCardName",
+	importPath: "@vtex/faststore/components",
+	component: ProductCardName,
+	editor: {
+		label: "Product Card Name",
+		category: "commerce"
+	},
+	schema: {},
+	guideline: "Renders the product name. Must be inside ProductListGrid."
+});
+const ProductCardPriceDefinition = defineComponent({
+	name: "ProductCardPrice",
+	importPath: "@vtex/faststore/components",
+	component: ProductCardPrice,
+	editor: {
+		label: "Product Card Price",
+		category: "commerce"
+	},
+	schema: {},
+	guideline: "Displays the selling price formatted from the active storefront context; renders tax-inclusive when usePriceWithTaxes is enabled. Must be inside ProductListGrid."
+});
+const ProductCardListPriceDefinition = defineComponent({
+	name: "ProductCardListPrice",
+	importPath: "@vtex/faststore/components",
+	component: ProductCardListPrice,
+	editor: {
+		label: "Product Card List Price",
+		category: "commerce"
+	},
+	schema: {},
+	guideline: "Displays the original (strikethrough) list price when it exceeds the selling price; renders tax-inclusive when usePriceWithTaxes is enabled. Must be inside ProductListGrid."
+});
+const ProductCardTaxLabelDefinition = defineComponent({
+	name: "ProductCardTaxLabel",
+	importPath: "@vtex/faststore/components",
+	component: ProductCardTaxLabel,
+	editor: {
+		label: "Product Card Tax Label",
+		category: "commerce"
+	},
+	schema: {},
+	guideline: "Tax label (e.g. \"Tax included\") shown beside the price. Renders only when the ProductListRoot/ProductShelfRoot config usePriceWithTaxes is enabled (state-driven, no toggle); the text comes from the taxesLabel config. Compose it to place the label, omit it to hide it. Must be inside ProductListGrid / ProductShelfItems."
+});
+const ProductCardDiscountDefinition = defineComponent({
+	name: "ProductCardDiscount",
+	importPath: "@vtex/faststore/components",
+	component: ProductCardDiscount,
+	editor: {
+		label: "Product Card Discount",
+		category: "commerce"
+	},
+	schema: { format: {
+		type: ["percentage", "absolute"],
+		default: "percentage",
+		label: "Discount Format"
+	} },
+	guideline: "Discount badge for the current product; auto-computes the markdown from listPrice vs price and renders only when a discount exists. Compose it to show the badge, omit it to hide it (no toggle). Must be inside ProductListGrid / ProductShelfItems."
+});
+const ProductCardAddToCartDefinition = defineComponent({
+	name: "ProductCardAddToCart",
+	importPath: "@vtex/faststore/components",
+	component: ProductCardAddToCart,
+	editor: {
+		label: "Product Card Add to Cart",
+		category: "commerce"
+	},
+	schema: {},
+	actions: { cart: ["addItem"] },
+	guideline: "Add-to-cart button for the current product card; must be inside ProductListGrid."
+});
+function ProductListRoot({ usePriceWithTaxes = false, taxesLabel = "Tax included", products = [], className, children, ...props }) {
+	const config = useMemo(() => ({
+		usePriceWithTaxes,
+		taxesLabel
+	}), [usePriceWithTaxes, taxesLabel]);
+	return /* @__PURE__ */ jsx(ProductListConfigContext, {
+		value: config,
+		children: /* @__PURE__ */ jsx(ProductListProductsContext, {
+			value: products,
+			children: /* @__PURE__ */ jsx(Container, {
+				...props,
+				className,
+				"data-fs-product-list-root": "",
+				children
+			})
+		})
+	});
+}
+function ProductListGrid({ className, children, ...props }) {
+	const products = useContext(ProductListProductsContext);
+	return /* @__PURE__ */ jsx(Container, {
+		...props,
+		className,
+		"data-fs-product-list-grid": "",
+		children: products.map((product) => /* @__PURE__ */ jsx(ProductListItemContext, {
+			value: product,
+			children
+		}, product.id))
+	});
+}
+function ProductCard({ className, children, bordered = true, ...props }) {
+	const item = useProductListItem();
+	const outOfStock = item.availableForSale === false || item.availableQuantity === 0;
+	return /* @__PURE__ */ jsx(Container, {
+		...props,
+		className,
+		"data-fs-product-card": "",
+		"data-fs-product-card-bordered": String(bordered),
+		"data-fs-product-card-out-of-stock": outOfStock ? "" : void 0,
+		children
+	});
+}
+function ProductCardImage({ className, objectFit = "cover", aspectRatio, ...props }) {
+	const item = useProductListItem();
+	return /* @__PURE__ */ jsx(Image, {
+		...props,
+		src: item.image.src,
+		alt: item.image.alt,
+		aspectRatio,
+		className,
+		style: {
+			objectFit,
+			...props.style
+		},
+		"data-fs-product-card-image": ""
+	});
+}
+function ProductCardName({ className, children, ...props }) {
+	const item = useProductListItem();
+	return /* @__PURE__ */ jsx(Text, {
+		...props,
+		as: "span",
+		className,
+		"data-fs-product-card-name": "",
+		children: children ?? item.name
+	});
+}
+function ProductCardPrice({ className, children, ...props }) {
+	const item = useProductListItem();
+	const { usePriceWithTaxes } = useProductListConfig();
+	const { locale, currency } = useStorefrontContext();
+	const value = usePriceWithTaxes ? priceWithTaxes(item.price, item) : item.price;
+	return /* @__PURE__ */ jsx(Text, {
+		...props,
+		as: "span",
+		className,
+		"data-fs-product-card-price": "",
+		children: children ?? formatPrice(value, locale, item.currency ?? currency)
+	});
+}
+function ProductCardListPrice({ className, children, ...props }) {
+	const item = useProductListItem();
+	const { usePriceWithTaxes } = useProductListConfig();
+	const { locale, currency } = useStorefrontContext();
+	if (!item.listPrice || item.listPrice <= item.price) return null;
+	const value = usePriceWithTaxes ? priceWithTaxes(item.listPrice, item) : item.listPrice;
+	return /* @__PURE__ */ jsx(Text, {
+		...props,
+		as: "span",
+		className,
+		"data-fs-product-card-list-price": "",
+		children: children ?? formatPrice(value, locale, item.currency ?? currency)
+	});
+}
+function ProductCardTaxLabel({ className, children, ...props }) {
+	const { usePriceWithTaxes, taxesLabel } = useProductListConfig();
+	if (!usePriceWithTaxes) return null;
+	return /* @__PURE__ */ jsx(Text, {
+		...props,
+		as: "span",
+		className,
+		"data-fs-product-card-tax-label": "",
+		children: children ?? taxesLabel
+	});
+}
+function ProductCardDiscount({ className, children, format = "percentage", ...props }) {
+	const item = useProductListItem();
+	const { usePriceWithTaxes } = useProductListConfig();
+	const { locale, currency } = useStorefrontContext();
+	const { listPrice, price } = item;
+	if (!listPrice || listPrice <= price) return null;
+	const amountOff = listPrice - price;
+	const percentOff = Math.round(amountOff / listPrice * 100);
+	const tier = percentOff >= 30 ? "high" : percentOff >= 15 ? "medium" : "low";
+	const displayedAmountOff = usePriceWithTaxes ? priceWithTaxes(amountOff, item) : amountOff;
+	const label = format === "absolute" ? `-${formatPrice(displayedAmountOff, locale, item.currency ?? currency)}` : `-${percentOff}%`;
+	return /* @__PURE__ */ jsx(Badge, {
+		...props,
+		className,
+		"data-fs-product-card-discount": "",
+		"data-fs-product-card-discount-tier": tier,
+		children: children ?? label
+	});
+}
+function ProductCardAddToCart({ className, children, onClick, $actions, ...props }) {
+	const item = useProductListItem();
+	function handleClick(e) {
+		$actions?.cart?.addItem?.({
+			variantId: item.id,
+			seller: "1"
+		});
+		onClick?.(e);
+	}
+	return /* @__PURE__ */ jsx(Button, {
+		...props,
+		className,
+		onClick: handleClick,
+		"data-fs-product-card-add-to-cart": "",
+		children
+	});
+}
+const ProductList = {
+	Root: ProductListRoot,
+	Grid: ProductListGrid,
+	Card: ProductCard,
+	CardImage: ProductCardImage,
+	CardName: ProductCardName,
+	CardPrice: ProductCardPrice,
+	CardListPrice: ProductCardListPrice,
+	CardTaxLabel: ProductCardTaxLabel,
+	CardDiscount: ProductCardDiscount,
+	CardAddToCart: ProductCardAddToCart
+};
+//#endregion
+export { ProductCard, ProductCardAddToCart, ProductCardAddToCartDefinition, ProductCardDefinition, ProductCardDiscount, ProductCardDiscountDefinition, ProductCardImage, ProductCardImageDefinition, ProductCardListPrice, ProductCardListPriceDefinition, ProductCardName, ProductCardNameDefinition, ProductCardPrice, ProductCardPriceDefinition, ProductCardTaxLabel, ProductCardTaxLabelDefinition, ProductList, ProductListConfigContext, ProductListGrid, ProductListGridDefinition, ProductListItemContext, ProductListRoot, ProductListRootDefinition };
+
+//# sourceMappingURL=product-list.js.map

package/dist/matter/product-list/product-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"product-list.js","names":[],"sources":["../../../src/matter/product-list/product-list.tsx"],"sourcesContent":["'use client';\n\nimport { defineComponent } from '@vtex/fs-core';\nimport { type ComponentPropsWithRef, createContext, useContext, useMemo } from 'react';\nimport { Badge } from '../../particles/badge/badge.js';\nimport { Button } from '../../particles/button/button.js';\nimport { Container } from '../../particles/container/container.js';\nimport { Image } from '../../particles/image/image.js';\nimport { Text } from '../../particles/text/text.js';\nimport type { ComponentActions } from '../../sdk/actions/types.js';\nimport { useStorefrontContext } from '../../sdk/context/storefront-context.js';\n\n// ---------------------------------------------------------------------------\n// Product list config context (tax display)\n// ---------------------------------------------------------------------------\n\ntype ProductListConfig = {\n  usePriceWithTaxes: boolean;\n  taxesLabel: string;\n};\n\nexport const ProductListConfigContext = createContext<ProductListConfig>({\n  usePriceWithTaxes: false,\n  taxesLabel: 'Tax included',\n});\n\nfunction useProductListConfig(): ProductListConfig {\n  return useContext(ProductListConfigContext);\n}\n\nfunction formatPrice(value: number, locale: string, currency: string): string {\n  return new Intl.NumberFormat(locale, { style: 'currency', currency }).format(value);\n}\n\n// Tax rate for the item: the explicit `taxPercentage` (e.g. 0.18) wins; otherwise it is derived\n// from the absolute tax amount over the price. Missing/zero-price data yields 0 (no change).\nfunction taxRate(item: ProductListItem): number {\n  if (item.taxPercentage != null) {\n    return item.taxPercentage;\n  }\n  if (item.tax != null && item.price > 0) {\n    return item.tax / item.price;\n  }\n  return 0;\n}\n\nfunction priceWithTaxes(base: number, item: ProductListItem): number {\n  return base * (1 + taxRate(item));\n}\n\n// ---------------------------------------------------------------------------\n// Product list item types\n// ---------------------------------------------------------------------------\n\nexport type ProductListItemImage = {\n  src: string;\n  alt: string;\n};\n\nexport type ProductListItem = {\n  id: string;\n  name: string;\n  image: ProductListItemImage;\n  price: number;\n  listPrice?: number;\n  variant?: string;\n  slug?: string;\n  // Widened for the Product Shelf (T2): fields the card parts T3–T7 read straight off the\n  // per-item context. Optional so the plain-`products` ProductListRoot (PLP) stays valid.\n  spotPrice?: number;\n  tax?: number;\n  taxPercentage?: number | null;\n  availableForSale?: boolean;\n  availableQuantity?: number;\n  currency?: string;\n};\n\n// ---------------------------------------------------------------------------\n// Products context (provided by Root, consumed by Grid)\n// ---------------------------------------------------------------------------\n\nconst ProductListProductsContext = createContext<ProductListItem[]>([]);\n\n// ---------------------------------------------------------------------------\n// Item context (provided by Grid per product)\n// ---------------------------------------------------------------------------\n\nexport const ProductListItemContext = createContext<ProductListItem | null>(null);\n\nfunction useProductListItem(): ProductListItem {\n  const item = useContext(ProductListItemContext);\n  if (!item) {\n    throw new Error('ProductCard components must be used inside ProductListGrid.');\n  }\n  return item;\n}\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\nexport type ProductListRootProps = ComponentPropsWithRef<'div'> & {\n  products?: ProductListItem[];\n  /** When true, card prices render tax-inclusive (from the item's tax data). Default false. */\n  usePriceWithTaxes?: boolean;\n  /** Text for the tax label part when tax display is on. Default `'Tax included'`. */\n  taxesLabel?: string;\n};\n\nexport type ProductListGridProps = ComponentPropsWithRef<'div'>;\n\nexport type ProductCardProps = ComponentPropsWithRef<'div'> & {\n  /** Toggles the card border. Reflects onto data-fs-product-card-bordered; a swatch draws the border. Default true. */\n  bordered?: boolean;\n};\n\nexport type ProductCardImageProps = ComponentPropsWithRef<'img'> & {\n  objectFit?: 'contain' | 'cover' | 'fill' | 'none';\n  /** CSS `aspect-ratio` (e.g. `'1/1'`, `'3/4'`, `'16/9'`); lays out the image box, orthogonal to `objectFit`. */\n  aspectRatio?: string;\n};\n\nexport type ProductCardNameProps = ComponentPropsWithRef<'span'>;\n\nexport type ProductCardPriceProps = ComponentPropsWithRef<'span'>;\n\nexport type ProductCardListPriceProps = ComponentPropsWithRef<'span'>;\n\nexport type ProductCardTaxLabelProps = ComponentPropsWithRef<'span'>;\n\nexport type ProductCardDiscountProps = ComponentPropsWithRef<'span'> & {\n  format?: 'percentage' | 'absolute';\n};\n\nexport type ProductCardAddToCartProps = ComponentPropsWithRef<'button'> & {\n  /** Injected by the compiler from `actions: { cart: ['addItem'] }`; the cart write surface. */\n  $actions?: ComponentActions;\n};\n\n// ---------------------------------------------------------------------------\n// Definitions\n// ---------------------------------------------------------------------------\n\nexport const ProductListRootDefinition = defineComponent<ProductListRootProps>({\n  name: 'ProductListRoot',\n  importPath: '@vtex/faststore/components',\n  component: ProductListRoot,\n  editor: { label: 'Product List Root', category: 'commerce' },\n  schema: {\n    usePriceWithTaxes: { type: 'boolean', default: false, label: 'Use Price With Taxes' },\n    taxesLabel: { type: 'string', default: 'Tax included', label: 'Taxes Label' },\n  },\n  guideline:\n    'Top-level wrapper for the product list; compose as ProductListRoot > ProductListGrid > ProductCard* children. Set usePriceWithTaxes to render tax-inclusive card prices and compose ProductCardTaxLabel to show the taxesLabel.',\n});\n\nexport const ProductListGridDefinition = defineComponent<ProductListGridProps>({\n  name: 'ProductListGrid',\n  importPath: '@vtex/faststore/components',\n  component: ProductListGrid,\n  editor: { label: 'Product List Grid', category: 'commerce' },\n  schema: {},\n  guideline:\n    'Repeating grid that renders the ProductCard* template for each product; must be a direct child of ProductListRoot.',\n});\n\nexport const ProductCardDefinition = defineComponent<ProductCardProps>({\n  name: 'ProductCard',\n  importPath: '@vtex/faststore/components',\n  component: ProductCard,\n  editor: { label: 'Product Card', category: 'commerce' },\n  schema: {\n    bordered: { type: 'boolean', default: true, label: 'Bordered' },\n  },\n  guideline:\n    'Optional card wrapper for the ProductCard* parts; always emits data-fs-product-card and data-fs-product-card-bordered (true/false, from the bordered toggle), and adds data-fs-product-card-out-of-stock when the product is unavailable (derived from availability, no prop). The border look is a swatch keyed off data-fs-product-card-bordered. Renders all children unchanged. Must be inside ProductListGrid / ProductShelfItems.',\n});\n\nexport const ProductCardImageDefinition = defineComponent<ProductCardImageProps>({\n  name: 'ProductCardImage',\n  importPath: '@vtex/faststore/components',\n  component: ProductCardImage,\n  editor: { label: 'Product Card Image', category: 'commerce' },\n  schema: {\n    objectFit: { type: ['contain', 'cover', 'fill', 'none'] as const, default: 'cover', label: 'Object Fit' },\n    aspectRatio: { type: 'string', label: 'Aspect Ratio' },\n  },\n  guideline:\n    'Renders the product image with a configurable aspectRatio (e.g. 1/1, 3/4, 16/9) and objectFit. Alt text comes from the catalog. Must be inside ProductListGrid.',\n});\n\nexport const ProductCardNameDefinition = defineComponent<ProductCardNameProps>({\n  name: 'ProductCardName',\n  importPath: '@vtex/faststore/components',\n  component: ProductCardName,\n  editor: { label: 'Product Card Name', category: 'commerce' },\n  schema: {},\n  guideline: 'Renders the product name. Must be inside ProductListGrid.',\n});\n\nexport const ProductCardPriceDefinition = defineComponent<ProductCardPriceProps>({\n  name: 'ProductCardPrice',\n  importPath: '@vtex/faststore/components',\n  component: ProductCardPrice,\n  editor: { label: 'Product Card Price', category: 'commerce' },\n  schema: {},\n  guideline:\n    'Displays the selling price formatted from the active storefront context; renders tax-inclusive when usePriceWithTaxes is enabled. Must be inside ProductListGrid.',\n});\n\nexport const ProductCardListPriceDefinition = defineComponent<ProductCardListPriceProps>({\n  name: 'ProductCardListPrice',\n  importPath: '@vtex/faststore/components',\n  component: ProductCardListPrice,\n  editor: { label: 'Product Card List Price', category: 'commerce' },\n  schema: {},\n  guideline:\n    'Displays the original (strikethrough) list price when it exceeds the selling price; renders tax-inclusive when usePriceWithTaxes is enabled. Must be inside ProductListGrid.',\n});\n\nexport const ProductCardTaxLabelDefinition = defineComponent<ProductCardTaxLabelProps>({\n  name: 'ProductCardTaxLabel',\n  importPath: '@vtex/faststore/components',\n  component: ProductCardTaxLabel,\n  editor: { label: 'Product Card Tax Label', category: 'commerce' },\n  schema: {},\n  guideline:\n    'Tax label (e.g. \"Tax included\") shown beside the price. Renders only when the ProductListRoot/ProductShelfRoot config usePriceWithTaxes is enabled (state-driven, no toggle); the text comes from the taxesLabel config. Compose it to place the label, omit it to hide it. Must be inside ProductListGrid / ProductShelfItems.',\n});\n\nexport const ProductCardDiscountDefinition = defineComponent<ProductCardDiscountProps>({\n  name: 'ProductCardDiscount',\n  importPath: '@vtex/faststore/components',\n  component: ProductCardDiscount,\n  editor: { label: 'Product Card Discount', category: 'commerce' },\n  schema: {\n    format: { type: ['percentage', 'absolute'] as const, default: 'percentage', label: 'Discount Format' },\n  },\n  guideline:\n    'Discount badge for the current product; auto-computes the markdown from listPrice vs price and renders only when a discount exists. Compose it to show the badge, omit it to hide it (no toggle). Must be inside ProductListGrid / ProductShelfItems.',\n});\n\nexport const ProductCardAddToCartDefinition = defineComponent<ProductCardAddToCartProps>({\n  name: 'ProductCardAddToCart',\n  importPath: '@vtex/faststore/components',\n  component: ProductCardAddToCart,\n  editor: { label: 'Product Card Add to Cart', category: 'commerce' },\n  schema: {},\n  actions: { cart: ['addItem'] },\n  guideline: 'Add-to-cart button for the current product card; must be inside ProductListGrid.',\n});\n\n// ---------------------------------------------------------------------------\n// Implementations\n// ---------------------------------------------------------------------------\n\nexport function ProductListRoot({\n  usePriceWithTaxes = false,\n  taxesLabel = 'Tax included',\n  products = [],\n  className,\n  children,\n  ...props\n}: ProductListRootProps) {\n  const config = useMemo(() => ({ usePriceWithTaxes, taxesLabel }), [usePriceWithTaxes, taxesLabel]);\n\n  return (\n    <ProductListConfigContext value={config}>\n      <ProductListProductsContext value={products}>\n        <Container {...props} className={className} data-fs-product-list-root=\"\">\n          {children}\n        </Container>\n      </ProductListProductsContext>\n    </ProductListConfigContext>\n  );\n}\n\nexport function ProductListGrid({ className, children, ...props }: ProductListGridProps) {\n  const products = useContext(ProductListProductsContext);\n\n  return (\n    <Container {...props} className={className} data-fs-product-list-grid=\"\">\n      {products.map((product) => (\n        <ProductListItemContext key={product.id} value={product}>\n          {children}\n        </ProductListItemContext>\n      ))}\n    </Container>\n  );\n}\n\nexport function ProductCard({ className, children, bordered = true, ...props }: ProductCardProps) {\n  const item = useProductListItem();\n  const outOfStock = item.availableForSale === false || item.availableQuantity === 0;\n\n  return (\n    <Container\n      {...props}\n      className={className}\n      data-fs-product-card=\"\"\n      data-fs-product-card-bordered={String(bordered)}\n      data-fs-product-card-out-of-stock={outOfStock ? '' : undefined}\n    >\n      {children}\n    </Container>\n  );\n}\n\nexport function ProductCardImage({ className, objectFit = 'cover', aspectRatio, ...props }: ProductCardImageProps) {\n  const item = useProductListItem();\n\n  return (\n    <Image\n      {...props}\n      src={item.image.src}\n      alt={item.image.alt}\n      aspectRatio={aspectRatio}\n      className={className}\n      style={{ objectFit, ...props.style }}\n      data-fs-product-card-image=\"\"\n    />\n  );\n}\n\nexport function ProductCardName({ className, children, ...props }: ProductCardNameProps) {\n  const item = useProductListItem();\n\n  return (\n    <Text {...props} as=\"span\" className={className} data-fs-product-card-name=\"\">\n      {children ?? item.name}\n    </Text>\n  );\n}\n\nexport function ProductCardPrice({ className, children, ...props }: ProductCardPriceProps) {\n  const item = useProductListItem();\n  const { usePriceWithTaxes } = useProductListConfig();\n  const { locale, currency } = useStorefrontContext();\n  const value = usePriceWithTaxes ? priceWithTaxes(item.price, item) : item.price;\n\n  return (\n    <Text {...props} as=\"span\" className={className} data-fs-product-card-price=\"\">\n      {children ?? formatPrice(value, locale, item.currency ?? currency)}\n    </Text>\n  );\n}\n\nexport function ProductCardListPrice({ className, children, ...props }: ProductCardListPriceProps) {\n  const item = useProductListItem();\n  const { usePriceWithTaxes } = useProductListConfig();\n  const { locale, currency } = useStorefrontContext();\n\n  if (!item.listPrice || item.listPrice <= item.price) {\n    return null;\n  }\n\n  const value = usePriceWithTaxes ? priceWithTaxes(item.listPrice, item) : item.listPrice;\n\n  return (\n    <Text {...props} as=\"span\" className={className} data-fs-product-card-list-price=\"\">\n      {children ?? formatPrice(value, locale, item.currency ?? currency)}\n    </Text>\n  );\n}\n\nexport function ProductCardTaxLabel({ className, children, ...props }: ProductCardTaxLabelProps) {\n  const { usePriceWithTaxes, taxesLabel } = useProductListConfig();\n\n  if (!usePriceWithTaxes) {\n    return null;\n  }\n\n  return (\n    <Text {...props} as=\"span\" className={className} data-fs-product-card-tax-label=\"\">\n      {children ?? taxesLabel}\n    </Text>\n  );\n}\n\nexport function ProductCardDiscount({\n  className,\n  children,\n  format = 'percentage',\n  ...props\n}: ProductCardDiscountProps) {\n  const item = useProductListItem();\n  const { usePriceWithTaxes } = useProductListConfig();\n  const { locale, currency } = useStorefrontContext();\n\n  const { listPrice, price } = item;\n  if (!listPrice || listPrice <= price) {\n    return null;\n  }\n\n  const amountOff = listPrice - price;\n  const percentOff = Math.round((amountOff / listPrice) * 100);\n  const tier = percentOff >= 30 ? 'high' : percentOff >= 15 ? 'medium' : 'low';\n  // The percentage is tax-invariant (both prices scale by the same factor), but the absolute amount\n  // must match the displayed prices, which are tax-inclusive when usePriceWithTaxes is enabled.\n  const displayedAmountOff = usePriceWithTaxes ? priceWithTaxes(amountOff, item) : amountOff;\n  const label =\n    format === 'absolute'\n      ? `-${formatPrice(displayedAmountOff, locale, item.currency ?? currency)}`\n      : `-${percentOff}%`;\n\n  return (\n    <Badge {...props} className={className} data-fs-product-card-discount=\"\" data-fs-product-card-discount-tier={tier}>\n      {children ?? label}\n    </Badge>\n  );\n}\n\nexport function ProductCardAddToCart({ className, children, onClick, $actions, ...props }: ProductCardAddToCartProps) {\n  const item = useProductListItem();\n\n  function handleClick(e: React.MouseEvent<HTMLButtonElement>) {\n    void $actions?.cart?.addItem?.({ variantId: item.id, seller: '1' });\n    onClick?.(e);\n  }\n\n  return (\n    <Button {...props} className={className} onClick={handleClick} data-fs-product-card-add-to-cart=\"\">\n      {children}\n    </Button>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Namespace export\n// ---------------------------------------------------------------------------\n\nexport const ProductList = {\n  Root: ProductListRoot,\n  Grid: ProductListGrid,\n  Card: ProductCard,\n  CardImage: ProductCardImage,\n  CardName: ProductCardName,\n  CardPrice: ProductCardPrice,\n  CardListPrice: ProductCardListPrice,\n  CardTaxLabel: ProductCardTaxLabel,\n  CardDiscount: ProductCardDiscount,\n  CardAddToCart: ProductCardAddToCart,\n};\n"],"mappings":"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"}

package/dist/matter/product-quantity/product-quantity.d.ts

@@ -0,0 +1,50 @@
+import { ComponentDefinition } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+import { QuantitySelectorMessage, QuantitySelectorRootProps } from "../../particles/quantity-selector/quantity-selector.js";
+import { ReactNode } from "react";
+//#region src/matter/product-quantity/product-quantity.d.ts
+type RawProductQuantityData = {
+  id: string;
+  variants: {
+    edges: Array<{
+      node: {
+        id: string;
+        sellers: Array<{
+          id: string;
+          isDefault: boolean;
+          offer: {
+            availableQuantity: number;
+          } | null;
+        }>;
+      };
+    }>;
+  };
+};
+type ProductQuantityContextValue = {
+  quantity: number;
+  setQuantity: (quantity: number | null) => void;
+  /** Available stock of the selected seller, or null when unknown. Drives the selector `max`. */
+  max: number | null;
+};
+export type ProductQuantityRootProps = Readonly<{
+  $data?: RawProductQuantityData | null;
+  defaultValue?: number;
+  children?: ReactNode;
+}>;
+export type ProductQuantitySelectorProps = Readonly<Omit<QuantitySelectorRootProps, 'value' | 'defaultValue' | 'onQuantityChange' | 'min' | 'max'>>;
+export declare function useProductQuantity(): ProductQuantityContextValue;
+export declare const ProductQuantityRootDefinition: ComponentDefinition<Readonly<{
+  $data?: RawProductQuantityData | null;
+  defaultValue?: number;
+  children?: ReactNode;
+}>>;
+export declare const ProductQuantitySelectorDefinition: ComponentDefinition<Readonly<Omit<QuantitySelectorRootProps, "defaultValue" | "value" | "max" | "min" | "onQuantityChange">>>;
+export declare function ProductQuantityRoot({ $data, defaultValue, children }: ProductQuantityRootProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProductQuantitySelector({ children, ...props }: ProductQuantitySelectorProps): import("react/jsx-runtime").JSX.Element;
+export declare const ProductQuantity: {
+  Root: typeof ProductQuantityRoot;
+  Selector: typeof ProductQuantitySelector;
+  Message: typeof QuantitySelectorMessage;
+};
+//#endregion
+//# sourceMappingURL=product-quantity.d.ts.map

package/dist/matter/product-quantity/product-quantity.js

@@ -0,0 +1,111 @@
+"use client";
+import { defineComponent } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+import { QuantitySelectorMessage, QuantitySelectorRoot } from "../../particles/quantity-selector/quantity-selector.js";
+import { createContext, useCallback, useContext, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/matter/product-quantity/product-quantity.tsx
+const fragment = `
+  fragment ProductQuantityData on Query {
+    productBySlug(slug: $slug) {
+      id
+      variants(first: 1) {
+        edges {
+          node {
+            id
+            sellers {
+              id
+              isDefault
+              offer {
+                availableQuantity
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+const DEFAULT_QUANTITY = 1;
+const ProductQuantityContext = createContext({
+	quantity: DEFAULT_QUANTITY,
+	setQuantity: () => {},
+	max: null
+});
+function useProductQuantity() {
+	return useContext(ProductQuantityContext);
+}
+function transformProductQuantityMax(data) {
+	const variant = data.variants.edges[0]?.node;
+	if (!variant) return null;
+	return (variant.sellers.find((s) => s.isDefault) ?? variant.sellers[0])?.offer?.availableQuantity ?? null;
+}
+const ProductQuantityRootDefinition = defineComponent({
+	name: "ProductQuantityRoot",
+	importPath: "@vtex/faststore/components",
+	component: ProductQuantityRoot,
+	fragment,
+	editor: {
+		label: "Product Quantity",
+		category: "commerce"
+	},
+	schema: { defaultValue: {
+		type: "number",
+		default: 1,
+		label: "Default Quantity"
+	} },
+	providesContext: "product-quantity",
+	guideline: "Headless purchase-quantity boundary for a PDP: holds the selected quantity and exposes the selected seller stock as `max`. Renders no DOM, so place it as high as a single product scope allows (e.g. the PDP page root); BuyButton and ProductQuantitySelector may live in different layout blocks anywhere in its subtree. One provider per product. See product-quantity.md."
+});
+const ProductQuantitySelectorDefinition = defineComponent({
+	name: "ProductQuantitySelector",
+	importPath: "@vtex/faststore/components",
+	component: ProductQuantitySelector,
+	editor: {
+		label: "Product Quantity Selector",
+		category: "commerce"
+	},
+	schema: {},
+	requiresContext: "product-quantity",
+	guideline: "Quantity selector bound to ProductQuantityRoot context. Renders the generic QuantitySelectorRoot wired to the shared quantity state and seller stock (max). Compose as: ProductQuantitySelector > NumberFieldGroup > NumberFieldDecrement + NumberFieldInput + NumberFieldIncrement."
+});
+function ProductQuantityRoot({ $data, defaultValue = DEFAULT_QUANTITY, children }) {
+	const max = $data ? transformProductQuantityMax($data) : null;
+	const [quantity, setQuantity] = useState(defaultValue);
+	const updateQuantity = useCallback((next) => {
+		if (next != null) setQuantity(next);
+	}, []);
+	const value = useMemo(() => ({
+		quantity,
+		setQuantity: updateQuantity,
+		max
+	}), [
+		quantity,
+		updateQuantity,
+		max
+	]);
+	return /* @__PURE__ */ jsx(ProductQuantityContext, {
+		value,
+		children
+	});
+}
+function ProductQuantitySelector({ children, ...props }) {
+	const { quantity, setQuantity, max } = useProductQuantity();
+	return /* @__PURE__ */ jsx(QuantitySelectorRoot, {
+		...props,
+		value: quantity,
+		onQuantityChange: setQuantity,
+		min: 1,
+		max: max ?? void 0,
+		children
+	});
+}
+const ProductQuantity = {
+	Root: ProductQuantityRoot,
+	Selector: ProductQuantitySelector,
+	Message: QuantitySelectorMessage
+};
+//#endregion
+export { ProductQuantity, ProductQuantityRoot, ProductQuantityRootDefinition, ProductQuantitySelector, ProductQuantitySelectorDefinition, useProductQuantity };
+
+//# sourceMappingURL=product-quantity.js.map

package/dist/matter/product-quantity/product-quantity.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"product-quantity.js","names":[],"sources":["../../../src/matter/product-quantity/product-quantity.tsx"],"sourcesContent":["'use client';\n\nimport { defineComponent } from '@vtex/fs-core';\nimport type { ReactNode } from 'react';\nimport { createContext, useCallback, useContext, useMemo, useState } from 'react';\nimport {\n  QuantitySelectorMessage,\n  QuantitySelectorRoot,\n  type QuantitySelectorRootProps,\n} from '../../particles/quantity-selector/quantity-selector.js';\n\n// ---------------------------------------------------------------------------\n// GraphQL Fragment\n// ---------------------------------------------------------------------------\n\nconst fragment = /* GraphQL */ `\n  fragment ProductQuantityData on Query {\n    productBySlug(slug: $slug) {\n      id\n      variants(first: 1) {\n        edges {\n          node {\n            id\n            sellers {\n              id\n              isDefault\n              offer {\n                availableQuantity\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n`;\n\n// ---------------------------------------------------------------------------\n// Raw data types (shape of the fragment result)\n// ---------------------------------------------------------------------------\n\ntype RawProductQuantityData = {\n  id: string;\n  variants: {\n    edges: Array<{\n      node: {\n        id: string;\n        sellers: Array<{\n          id: string;\n          isDefault: boolean;\n          offer: {\n            availableQuantity: number;\n          } | null;\n        }>;\n      };\n    }>;\n  };\n};\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\ntype ProductQuantityContextValue = {\n  quantity: number;\n  setQuantity: (quantity: number | null) => void;\n  /** Available stock of the selected seller, or null when unknown. Drives the selector `max`. */\n  max: number | null;\n};\n\nconst DEFAULT_QUANTITY = 1;\n\nexport type ProductQuantityRootProps = Readonly<{\n  $data?: RawProductQuantityData | null;\n  defaultValue?: number;\n  children?: ReactNode;\n}>;\n\nexport type ProductQuantitySelectorProps = Readonly<\n  Omit<QuantitySelectorRootProps, 'value' | 'defaultValue' | 'onQuantityChange' | 'min' | 'max'>\n>;\n\n// ---------------------------------------------------------------------------\n// Context\n// ---------------------------------------------------------------------------\n\n// Seeded with a safe default so the context never throws: a BuyButton rendered without a\n// ProductQuantityRoot ancestor (e.g. reused standalone) still works and adds quantity 1.\nconst ProductQuantityContext = createContext<ProductQuantityContextValue>({\n  quantity: DEFAULT_QUANTITY,\n  setQuantity: () => {},\n  max: null,\n});\n\nexport function useProductQuantity(): ProductQuantityContextValue {\n  return useContext(ProductQuantityContext);\n}\n\n// ---------------------------------------------------------------------------\n// Transform\n// ---------------------------------------------------------------------------\n\n// Mirrors BuyButton's seller-selection rule so `max` reflects the stock of the seller the\n// BuyButton actually adds to (default seller, else first).\nfunction transformProductQuantityMax(data: RawProductQuantityData): number | null {\n  const variant = data.variants.edges[0]?.node;\n  if (!variant) return null;\n\n  const seller = variant.sellers.find((s) => s.isDefault) ?? variant.sellers[0];\n  return seller?.offer?.availableQuantity ?? null;\n}\n\n// ---------------------------------------------------------------------------\n// Definitions\n// ---------------------------------------------------------------------------\n\nexport const ProductQuantityRootDefinition = defineComponent<ProductQuantityRootProps>({\n  name: 'ProductQuantityRoot',\n  importPath: '@vtex/faststore/components',\n  component: ProductQuantityRoot,\n  fragment,\n  editor: { label: 'Product Quantity', category: 'commerce' },\n  schema: {\n    defaultValue: { type: 'number', default: 1, label: 'Default Quantity' },\n  },\n  providesContext: 'product-quantity',\n  guideline:\n    'Headless purchase-quantity boundary for a PDP: holds the selected quantity and exposes the selected seller stock as `max`. Renders no DOM, so place it as high as a single product scope allows (e.g. the PDP page root); BuyButton and ProductQuantitySelector may live in different layout blocks anywhere in its subtree. One provider per product. See product-quantity.md.',\n});\n\nexport const ProductQuantitySelectorDefinition = defineComponent<ProductQuantitySelectorProps>({\n  name: 'ProductQuantitySelector',\n  importPath: '@vtex/faststore/components',\n  component: ProductQuantitySelector,\n  editor: { label: 'Product Quantity Selector', category: 'commerce' },\n  schema: {},\n  requiresContext: 'product-quantity',\n  guideline:\n    'Quantity selector bound to ProductQuantityRoot context. Renders the generic QuantitySelectorRoot wired to the shared quantity state and seller stock (max). Compose as: ProductQuantitySelector > NumberFieldGroup > NumberFieldDecrement + NumberFieldInput + NumberFieldIncrement.',\n});\n\n// ---------------------------------------------------------------------------\n// Implementations\n// ---------------------------------------------------------------------------\n\nexport function ProductQuantityRoot({ $data, defaultValue = DEFAULT_QUANTITY, children }: ProductQuantityRootProps) {\n  const max = $data ? transformProductQuantityMax($data) : null;\n  const [quantity, setQuantity] = useState<number>(defaultValue);\n\n  // The Base UI NumberField emits null while the input is empty; keep the last valid value so the\n  // quantity sent to the cart is always a positive integer (clamped to [1, max] by the field).\n  const updateQuantity = useCallback((next: number | null) => {\n    if (next != null) setQuantity(next);\n  }, []);\n\n  const value = useMemo<ProductQuantityContextValue>(\n    () => ({ quantity, setQuantity: updateQuantity, max }),\n    [quantity, updateQuantity, max],\n  );\n\n  return <ProductQuantityContext value={value}>{children}</ProductQuantityContext>;\n}\n\nexport function ProductQuantitySelector({ children, ...props }: ProductQuantitySelectorProps) {\n  const { quantity, setQuantity, max } = useProductQuantity();\n\n  return (\n    <QuantitySelectorRoot {...props} value={quantity} onQuantityChange={setQuantity} min={1} max={max ?? undefined}>\n      {children}\n    </QuantitySelectorRoot>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Namespace export\n// ---------------------------------------------------------------------------\n\nexport const ProductQuantity = {\n  Root: ProductQuantityRoot,\n  Selector: ProductQuantitySelector,\n  // Thin alias of the particle part: reads the QuantitySelectorRoot context the Selector renders.\n  Message: QuantitySelectorMessage,\n};\n"],"mappings":";;;;;;;AAeA,MAAM,WAAyB;;;;;;;;;;;;;;;;;;;;;AAuD/B,MAAM,mBAAmB;AAkBzB,MAAM,yBAAyB,cAA2C;CACxE,UAAU;CACV,mBAAmB,CAAC;CACpB,KAAK;AACP,CAAC;AAED,SAAgB,qBAAkD;CAChE,OAAO,WAAW,sBAAsB;AAC1C;AAQA,SAAS,4BAA4B,MAA6C;CAChF,MAAM,UAAU,KAAK,SAAS,MAAM,EAAE,EAAE;CACxC,IAAI,CAAC,SAAS,OAAO;CAGrB,QADe,QAAQ,QAAQ,MAAM,MAAM,EAAE,SAAS,KAAK,QAAQ,QAAQ,GAAA,EAC5D,OAAO,qBAAqB;AAC7C;AAMA,MAAa,gCAAgC,gBAA0C;CACrF,MAAM;CACN,YAAY;CACZ,WAAW;CACX;CACA,QAAQ;EAAE,OAAO;EAAoB,UAAU;CAAW;CAC1D,QAAQ,EACN,cAAc;EAAE,MAAM;EAAU,SAAS;EAAG,OAAO;CAAmB,EACxE;CACA,iBAAiB;CACjB,WACE;AACJ,CAAC;AAED,MAAa,oCAAoC,gBAA8C;CAC7F,MAAM;CACN,YAAY;CACZ,WAAW;CACX,QAAQ;EAAE,OAAO;EAA6B,UAAU;CAAW;CACnE,QAAQ,CAAC;CACT,iBAAiB;CACjB,WACE;AACJ,CAAC;AAMD,SAAgB,oBAAoB,EAAE,OAAO,eAAe,kBAAkB,YAAsC;CAClH,MAAM,MAAM,QAAQ,4BAA4B,KAAK,IAAI;CACzD,MAAM,CAAC,UAAU,eAAe,SAAiB,YAAY;CAI7D,MAAM,iBAAiB,aAAa,SAAwB;EAC1D,IAAI,QAAQ,MAAM,YAAY,IAAI;CACpC,GAAG,CAAC,CAAC;CAEL,MAAM,QAAQ,eACL;EAAE;EAAU,aAAa;EAAgB;CAAI,IACpD;EAAC;EAAU;EAAgB;CAAG,CAChC;CAEA,OAAO,oBAAC,wBAAD;EAA+B;EAAQ;CAAiC,CAAA;AACjF;AAEA,SAAgB,wBAAwB,EAAE,UAAU,GAAG,SAAuC;CAC5F,MAAM,EAAE,UAAU,aAAa,QAAQ,mBAAmB;CAE1D,OACE,oBAAC,sBAAD;EAAsB,GAAI;EAAO,OAAO;EAAU,kBAAkB;EAAa,KAAK;EAAG,KAAK,OAAO,KAAA;EAClG;CACmB,CAAA;AAE1B;AAMA,MAAa,kBAAkB;CAC7B,MAAM;CACN,UAAU;CAEV,SAAS;AACX"}