@wix/headless-stores 0.0.95 → 0.0.97

package/cjs/dist/react/Product.js

@@ -6,9 +6,9 @@ import { AsChildSlot } from '@wix/headless-utils/react';
 import { MediaGallery } from '@wix/headless-media/react';
 import { Quantity as QuantityComponent } from '@wix/headless-components/react';
 import * as CoreProduct from './core/Product.js';
-import * as ProductVariantSelector from './core/ProductVariantSelector.js';
-import * as ProductModifiers from './core/ProductModifiers.js';
-import * as SelectedVariant from './core/SelectedVariant.js';
+import * as CoreProductVariantSelector from './core/ProductVariantSelector.js';
+import * as CoreProductModifiers from './core/ProductModifiers.js';
+import * as CoreSelectedVariant from './core/SelectedVariant.js';
 import * as Option from './Option.js';
 import { AsContent } from './types.js';
 import { DataComponentTags } from '../data-component-tags.js';
@@ -89,9 +89,9 @@ var TestIds;
  */
 export const Root = (props) => {
     const { children, product, ...attrs } = props;
-    return (_jsx(AsChildSlot, { "data-testid": TestIds.productRoot, "data-component-tag": DataComponentTags.productRoot, children: _jsx(CoreProduct.Root, { productServiceConfig: { product: props.product }, children: _jsx(MediaGallery.Root, { mediaGalleryServiceConfig: {
-                    media: props.product.media?.itemsInfo?.items ?? [],
-                }, children: _jsx(ProductVariantSelector.Root, { children: _jsx(ProductModifiers.Root, { children: _jsx(SelectedVariant.Root, { children: _jsx(AsChildSlot, { ...attrs, children: children }) }) }) }) }) }) }));
+    return (_jsx(CoreProduct.Root, { productServiceConfig: { product: props.product }, children: _jsx(MediaGallery.Root, { mediaGalleryServiceConfig: {
+                media: props.product.media?.itemsInfo?.items ?? [],
+            }, children: _jsx(CoreProductVariantSelector.Root, { children: _jsx(CoreProductModifiers.Root, { children: _jsx(CoreSelectedVariant.Root, { children: _jsx(AsChildSlot, { "data-testid": TestIds.productRoot, "data-component-tag": DataComponentTags.productRoot, ...attrs, children: children }) }) }) }) }) }));
 };
 Root.displayName = 'Product.Root';
 /**
@@ -202,7 +202,7 @@ export const Description = React.forwardRef((props, ref) => {
  */
 export const Price = React.forwardRef((props, ref) => {
     const { asChild, children, className, ...otherProps } = props;
-    return (_jsx(SelectedVariant.Price, { children: ({ price, compareAtPrice }) => {
+    return (_jsx(CoreSelectedVariant.Price, { children: ({ price, compareAtPrice }) => {
             return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productPrice, "data-discounted": compareAtPrice !== null, customElement: children, customElementProps: {
                     price,
                     formattedPrice: price,
@@ -240,7 +240,7 @@ export const Price = React.forwardRef((props, ref) => {
 export const CompareAtPrice = React.forwardRef((props, ref) => {
     const { asChild, children, className, ...otherProps } = props;
     const testId = TestIds.productCompareAtPrice;
-    return (_jsx(SelectedVariant.Price, { children: ({ compareAtPrice }) => {
+    return (_jsx(CoreSelectedVariant.Price, { children: ({ compareAtPrice }) => {
             // Don't render anything if there's no compare-at price
             if (!compareAtPrice) {
                 return null;
@@ -466,15 +466,15 @@ export const Stock = React.forwardRef((props, ref) => {
  * ```
  */
 export const Variants = React.forwardRef((props, ref) => {
-    const { asChild, children, className } = props;
-    return (_jsx(ProductVariantSelector.Options, { children: ({ hasOptions, options }) => {
+    const { asChild, children, className, ...attributes } = props;
+    return (_jsx(CoreProductVariantSelector.Options, { children: ({ hasOptions, options }) => {
             if (!hasOptions)
                 return null;
             const contextValue = {
                 hasOptions,
                 options,
             };
-            return (_jsx(VariantsContext.Provider, { value: contextValue, children: _jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productVariants, customElement: children, children: _jsx("div", { children: React.isValidElement(children) ? children : null }) }) }));
+            return (_jsx(VariantsContext.Provider, { value: contextValue, children: _jsx(AsChildSlot, { ...attributes, ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productVariants, customElement: children, children: _jsx("div", { children: React.isValidElement(children) ? children : null }) }) }));
         } }));
 });
 /**
@@ -527,7 +527,7 @@ export const VariantOptionRepeater = React.forwardRef((props, _ref) => {
     if (!hasOptions)
         return null;
     return (_jsx(_Fragment, { children: options.map((option) => {
-            return (_jsx(ProductVariantSelector.Option, { option: option, children: (optionData) => (_jsx(Option.Root, { option: {
+            return (_jsx(CoreProductVariantSelector.Option, { option: option, children: (optionData) => (_jsx(Option.Root, { option: {
                         ...optionData,
                         mandatory: false,
                     }, children: children })) }, option._id));
@@ -577,15 +577,15 @@ export const VariantOptionRepeater = React.forwardRef((props, _ref) => {
  * ```
  */
 export const Modifiers = React.forwardRef((props, ref) => {
-    const { asChild, children, className } = props;
-    return (_jsx(ProductModifiers.Modifiers, { children: ({ hasModifiers, modifiers }) => {
+    const { asChild, children, className, ...attributes } = props;
+    return (_jsx(CoreProductModifiers.Modifiers, { children: ({ hasModifiers, modifiers }) => {
             if (!hasModifiers)
                 return null;
             const contextValue = {
                 hasModifiers,
                 modifiers,
             };
-            return (_jsx(ModifiersContext.Provider, { value: contextValue, children: _jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productModifiers, customElement: children, children: _jsx("div", { children: React.isValidElement(children) ? children : null }) }) }));
+            return (_jsx(ModifiersContext.Provider, { value: contextValue, children: _jsx(AsChildSlot, { ...attributes, ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productModifiers, customElement: children, children: _jsx("div", { children: React.isValidElement(children) ? children : null }) }) }));
         } }));
 });
 /**
@@ -640,7 +640,7 @@ export const ModifierOptionRepeater = React.forwardRef((props, _ref) => {
     if (!hasModifiers)
         return null;
     return (_jsx(_Fragment, { children: modifiers.map((modifier) => {
-            return (_jsx(ProductModifiers.Modifier, { modifier: modifier, children: (modifierData) => (_jsx(Option.Root, { option: {
+            return (_jsx(CoreProductModifiers.Modifier, { modifier: modifier, children: (modifierData) => (_jsx(Option.Root, { option: {
                         ...modifierData,
                     }, allowedTypes: allowedTypes, children: children })) }, modifier._id));
         }) }));
@@ -755,7 +755,7 @@ export { ProductMediaGallery as MediaGallery };
  */
 export const ProductQuantity = React.forwardRef((props, ref) => {
     const { asChild, children, className } = props;
-    return (_jsx(ProductVariantSelector.Stock, { children: ({ inStock, isPreOrderEnabled, availableQuantity, selectedQuantity, setSelectedQuantity, }) => {
+    return (_jsx(CoreProductVariantSelector.Stock, { children: ({ inStock, isPreOrderEnabled, availableQuantity, selectedQuantity, setSelectedQuantity, }) => {
             const renderProps = {
                 selectedQuantity,
                 availableQuantity,
@@ -782,7 +782,7 @@ export const ProductQuantity = React.forwardRef((props, ref) => {
  */
 export const ProductQuantityDecrement = React.forwardRef((props, ref) => {
     const { asChild, children, className } = props;
-    return (_jsx(ProductVariantSelector.Stock, { children: ({ selectedQuantity, inStock, isPreOrderEnabled }) => {
+    return (_jsx(CoreProductVariantSelector.Stock, { children: ({ selectedQuantity, inStock, isPreOrderEnabled }) => {
             const disabled = selectedQuantity <= 1 || (!inStock && !isPreOrderEnabled);
             if (asChild && children) {
                 return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productQuantityDecrement, customElement: children, customElementProps: { disabled } }));
@@ -802,7 +802,7 @@ export const ProductQuantityDecrement = React.forwardRef((props, ref) => {
  */
 export const ProductQuantityInput = React.forwardRef((props, ref) => {
     const { asChild, children, className, disabled = true } = props;
-    return (_jsx(ProductVariantSelector.Stock, { children: () => {
+    return (_jsx(CoreProductVariantSelector.Stock, { children: () => {
             if (asChild && children) {
                 return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, disabled: disabled, "data-testid": TestIds.productQuantityInput, customElement: children, customElementProps: {} }));
             }
@@ -822,7 +822,7 @@ export const ProductQuantityInput = React.forwardRef((props, ref) => {
  */
 export const ProductQuantityIncrement = React.forwardRef((props, ref) => {
     const { asChild, children, className } = props;
-    return (_jsx(ProductVariantSelector.Stock, { children: ({ selectedQuantity, availableQuantity, inStock, isPreOrderEnabled, }) => {
+    return (_jsx(CoreProductVariantSelector.Stock, { children: ({ selectedQuantity, availableQuantity, inStock, isPreOrderEnabled, }) => {
             const disabled = (!!availableQuantity && selectedQuantity >= availableQuantity) ||
                 (!inStock && !isPreOrderEnabled);
             if (asChild && children) {
@@ -859,13 +859,13 @@ export const ProductQuantityIncrement = React.forwardRef((props, ref) => {
  */
 export const ProductQuantityRaw = React.forwardRef((props, ref) => {
     const { asChild, children, className } = props;
-    return (_jsx(ProductVariantSelector.Stock, { children: (renderProps) => {
+    return (_jsx(CoreProductVariantSelector.Stock, { children: (renderProps) => {
             return (_jsx(AsChildSlot, { ref: ref, customElement: children, asChild: asChild, className: className, "data-testid": TestIds.productQuantityRaw, customElementProps: renderProps }));
         } }));
 });
 export const ProductVariantSelectorReset = React.forwardRef((props, ref) => {
     const { asChild, children, className } = props;
-    return (_jsx(ProductVariantSelector.Reset, { children: (renderProps) => {
+    return (_jsx(CoreProductVariantSelector.Reset, { children: (renderProps) => {
             if (!renderProps.hasSelections) {
                 return null;
             }
@@ -879,7 +879,7 @@ export const ProductVariantSelectorReset = React.forwardRef((props, ref) => {
  */
 export const ProductActionAddToCart = React.forwardRef((props, ref) => {
     const { asChild, children, className, label, loadingState } = props;
-    return (_jsx(SelectedVariant.Actions, { children: ({ lineItems, canAddToCart, isLoading, addToCart, isPreOrderEnabled, }) => {
+    return (_jsx(CoreSelectedVariant.Actions, { children: ({ lineItems, canAddToCart, isLoading, addToCart, isPreOrderEnabled, }) => {
             if (isPreOrderEnabled) {
                 return null;
             }
@@ -901,7 +901,7 @@ export const ProductActionAddToCart = React.forwardRef((props, ref) => {
  */
 export const ProductActionBuyNow = React.forwardRef((props, ref) => {
     const { asChild, children, className, label, loadingState } = props;
-    return (_jsx(SelectedVariant.Actions, { children: ({ lineItems, canAddToCart, isLoading, buyNow, inStock, isPreOrderEnabled, }) => {
+    return (_jsx(CoreSelectedVariant.Actions, { children: ({ lineItems, canAddToCart, isLoading, buyNow, inStock, isPreOrderEnabled, }) => {
             if (!inStock || isPreOrderEnabled) {
                 return null;
             }
@@ -923,7 +923,7 @@ export const ProductActionBuyNow = React.forwardRef((props, ref) => {
  */
 export const ProductActionPreOrder = React.forwardRef((props, ref) => {
     const { asChild, children, className, label, loadingState } = props;
-    return (_jsx(SelectedVariant.Actions, { children: ({ lineItems, isLoading, addToCart, isPreOrderEnabled }) => {
+    return (_jsx(CoreSelectedVariant.Actions, { children: ({ lineItems, isLoading, addToCart, isPreOrderEnabled }) => {
             if (!isPreOrderEnabled) {
                 return null;
             }
@@ -1038,7 +1038,7 @@ function getStockStatusMessage(inStock, isPreOrderEnabled, availabilityStatus, l
  */
 export const ProductVariantStock = React.forwardRef((props, ref) => {
     const { asChild, children, className, labels } = props;
-    return (_jsx(ProductVariantSelector.Stock, { children: ({ inStock, isPreOrderEnabled, availabilityStatus, currentVariantId, }) => {
+    return (_jsx(CoreProductVariantSelector.Stock, { children: ({ inStock, isPreOrderEnabled, availabilityStatus, currentVariantId, }) => {
             // Only render if we have a current variant selected
             if (!currentVariantId && !availabilityStatus) {
                 return null;
@@ -1085,7 +1085,7 @@ export const ProductVariantStock = React.forwardRef((props, ref) => {
  */
 export const ProductVariantSKU = React.forwardRef((props, ref) => {
     const { asChild, children, className } = props;
-    return (_jsx(SelectedVariant.Details, { children: ({ sku }) => {
+    return (_jsx(CoreSelectedVariant.Details, { children: ({ sku }) => {
             // Don't render anything if there's no SKU
             if (!sku) {
                 return null;
@@ -1119,7 +1119,7 @@ export const ProductVariantSKU = React.forwardRef((props, ref) => {
  */
 export const ProductVariantWeight = React.forwardRef((props, ref) => {
     const { asChild, children, className } = props;
-    return (_jsx(SelectedVariant.Details, { children: ({ weight }) => {
+    return (_jsx(CoreSelectedVariant.Details, { children: ({ weight }) => {
             // Don't render anything if there's no weight
             if (!weight) {
                 return null;

package/cjs/dist/react/ProductList.d.ts

@@ -1,5 +1,5 @@
 import type { V3Product } from '@wix/auto_sdk_stores_products-v-3';
-import { Sort as SortPrimitive, GenericListTotalsRenderProps, GenericListLoadMoreRenderProps } from '@wix/headless-components/react';
+import { Sort as SortPrimitive, GenericListTotalsRenderProps, GenericListLoadMoreRenderProps, ListVariant, GenericListRepeaterRenderProps } from '@wix/headless-components/react';
 import React from 'react';
 import type { ProductsListServiceConfig } from '../services/products-list-service.js';
 import { productsV3 } from '@wix/stores';
@@ -12,6 +12,7 @@ export interface ProductListRootProps {
     products?: V3Product[];
     productsListConfig?: ProductsListServiceConfig;
     className?: string;
+    variant?: ListVariant;
 }
 /**
  * Root component that provides the ProductList service context for rendering product lists.
@@ -91,26 +92,46 @@ export interface ProductsProps {
  * ```
  */
 export declare const Products: React.ForwardRefExoticComponent<ProductsProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Render props for ProductRepeater asChild pattern
+ */
+export type ProductRepeaterRenderProps = GenericListRepeaterRenderProps<V3Product>;
 /**
  * Props for ProductList ProductRepeater component
  */
 export interface ProductRepeaterProps {
-    children: React.ReactNode;
+    children: React.ReactNode | ((props: ProductRepeaterRenderProps, ref: React.Ref<HTMLElement>) => React.ReactNode);
+    /** Whether to render as child component (asChild pattern) */
+    asChild?: boolean;
 }
 /**
  * Repeater component that renders Product.Root for each product.
- * Follows Repeater Level pattern.
- * Note: Repeater components do NOT support asChild as per architecture rules.
+ * Follows Repeater Level pattern and uses GenericList.Repeater for consistency.
+ * Supports asChild pattern for advanced layout components like GalleryWrapper.
  *
  * @component
  * @example
  * ```tsx
+ * // Standard usage
  * <ProductList.ProductRepeater>
  *   <Product.Name />
  *   <Product.Price />
- *   <Product.MediaGallery>
- *     <MediaGallery.Viewport />
- *   </Product.MediaGallery>
+ * </ProductList.ProductRepeater>
+ *
+ * // AsChild usage with GalleryWrapper
+ * <ProductList.ProductRepeater asChild>
+ *   {({ items, variant, itemWrapper }) => (
+ *     <GalleryWrapper
+ *       items={items}
+ *       variant={variant}
+ *       itemRenderer={(item, index) =>
+ *         itemWrapper({ item, index, children: <>
+ *           <Product.Name />
+ *           <Product.Price />
+ *         </> })
+ *       }
+ *     />
+ *   )}
  * </ProductList.ProductRepeater>
  * ```
  */

package/cjs/dist/react/ProductList.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Sort as SortPrimitive, GenericList, } from '@wix/headless-components/react';
 import { useService } from '@wix/services-manager-react';
 import React from 'react';
@@ -45,7 +45,7 @@ var TestIds;
  * ```
  */
 export const Root = React.forwardRef((props, ref) => {
-    const { children, products, productsListConfig, className } = props;
+    const { children, products, productsListConfig, className, variant } = props;
     const serviceConfig = productsListConfig || {
         products: products || [],
         searchOptions: {
@@ -59,20 +59,20 @@ export const Root = React.forwardRef((props, ref) => {
         }, // Empty aggregation data
         customizations: [],
     };
-    return (_jsx(CoreProductList.Root, { productsListConfig: serviceConfig, children: _jsx(RootContent, { children: children, className: className, ref: ref }) }));
+    return (_jsx(CoreProductList.Root, { productsListConfig: serviceConfig, children: _jsx(RootContent, { children: children, className: className, ref: ref, variant: variant }) }));
 });
 Root.displayName = 'ProductList.Root';
 /**
  * Internal component to handle the Root content with service access
  */
 const RootContent = React.forwardRef((props, ref) => {
-    const { children, className } = props;
+    const { children, className, variant } = props;
     const productsListService = useService(ProductsListServiceDefinition);
     const items = productsListService.products.get().map((product) => ({
         ...product,
         id: product._id,
     }));
-    return (_jsx(GenericList.Root, { items: items, loadMore: () => productsListService.loadMore(10), hasMore: productsListService.hasMoreProducts.get(), isLoading: productsListService.isLoading.get(), className: className, ref: ref, "data-component-tag": DataComponentTags.productListRoot, "data-testid": TestIds.productListRoot, children: children }));
+    return (_jsx(GenericList.Root, { items: items, loadMore: () => productsListService.loadMore(10), hasMore: productsListService.hasMoreProducts.get(), isLoading: productsListService.isLoading.get(), className: className, ref: ref, "data-component-tag": DataComponentTags.productListRoot, "data-testid": TestIds.productListRoot, variant: variant, children: children }));
 });
 /**
  * Raw component that provides direct access to product list data.
@@ -124,29 +124,38 @@ export const Products = React.forwardRef((props, ref) => {
 });
 /**
  * Repeater component that renders Product.Root for each product.
- * Follows Repeater Level pattern.
- * Note: Repeater components do NOT support asChild as per architecture rules.
+ * Follows Repeater Level pattern and uses GenericList.Repeater for consistency.
+ * Supports asChild pattern for advanced layout components like GalleryWrapper.
  *
  * @component
  * @example
  * ```tsx
+ * // Standard usage
  * <ProductList.ProductRepeater>
  *   <Product.Name />
  *   <Product.Price />
- *   <Product.MediaGallery>
- *     <MediaGallery.Viewport />
- *   </Product.MediaGallery>
+ * </ProductList.ProductRepeater>
+ *
+ * // AsChild usage with GalleryWrapper
+ * <ProductList.ProductRepeater asChild>
+ *   {({ items, variant, itemWrapper }) => (
+ *     <GalleryWrapper
+ *       items={items}
+ *       variant={variant}
+ *       itemRenderer={(item, index) =>
+ *         itemWrapper({ item, index, children: <>
+ *           <Product.Name />
+ *           <Product.Price />
+ *         </> })
+ *       }
+ *     />
+ *   )}
  * </ProductList.ProductRepeater>
  * ```
  */
-export const ProductRepeater = React.forwardRef((props, _ref) => {
-    const { children } = props;
-    const productsListService = useService(ProductsListServiceDefinition);
-    const products = productsListService.products.get();
-    const hasProducts = products.length > 0;
-    if (!hasProducts)
-        return null;
-    return (_jsx(_Fragment, { children: products.map((product) => (_jsx(Product.Root, { product: product, "data-testid": TestIds.productListItem, "data-product-id": product._id, "data-product-available": true, children: children }, product._id))) }));
+export const ProductRepeater = React.forwardRef((props, ref) => {
+    const { children, asChild } = props;
+    return (_jsx(GenericList.Repeater, { ref: ref, asChild: asChild, itemWrapper: ({ item: product, children }) => (_jsx(Product.Root, { product: product, "data-testid": TestIds.productListItem, "data-product-id": product._id, "data-product-available": true, "data-item-id": product._id, children: children }, product._id)), children: children }));
 });
 /**
  * Displays a button to load more products. Not rendered if infiniteScroll is false or no products are left to load.

package/dist/react/Product.js

@@ -6,9 +6,9 @@ import { AsChildSlot } from '@wix/headless-utils/react';
 import { MediaGallery } from '@wix/headless-media/react';
 import { Quantity as QuantityComponent } from '@wix/headless-components/react';
 import * as CoreProduct from './core/Product.js';
-import * as ProductVariantSelector from './core/ProductVariantSelector.js';
-import * as ProductModifiers from './core/ProductModifiers.js';
-import * as SelectedVariant from './core/SelectedVariant.js';
+import * as CoreProductVariantSelector from './core/ProductVariantSelector.js';
+import * as CoreProductModifiers from './core/ProductModifiers.js';
+import * as CoreSelectedVariant from './core/SelectedVariant.js';
 import * as Option from './Option.js';
 import { AsContent } from './types.js';
 import { DataComponentTags } from '../data-component-tags.js';
@@ -89,9 +89,9 @@ var TestIds;
  */
 export const Root = (props) => {
     const { children, product, ...attrs } = props;
-    return (_jsx(AsChildSlot, { "data-testid": TestIds.productRoot, "data-component-tag": DataComponentTags.productRoot, children: _jsx(CoreProduct.Root, { productServiceConfig: { product: props.product }, children: _jsx(MediaGallery.Root, { mediaGalleryServiceConfig: {
-                    media: props.product.media?.itemsInfo?.items ?? [],
-                }, children: _jsx(ProductVariantSelector.Root, { children: _jsx(ProductModifiers.Root, { children: _jsx(SelectedVariant.Root, { children: _jsx(AsChildSlot, { ...attrs, children: children }) }) }) }) }) }) }));
+    return (_jsx(CoreProduct.Root, { productServiceConfig: { product: props.product }, children: _jsx(MediaGallery.Root, { mediaGalleryServiceConfig: {
+                media: props.product.media?.itemsInfo?.items ?? [],
+            }, children: _jsx(CoreProductVariantSelector.Root, { children: _jsx(CoreProductModifiers.Root, { children: _jsx(CoreSelectedVariant.Root, { children: _jsx(AsChildSlot, { "data-testid": TestIds.productRoot, "data-component-tag": DataComponentTags.productRoot, ...attrs, children: children }) }) }) }) }) }));
 };
 Root.displayName = 'Product.Root';
 /**
@@ -202,7 +202,7 @@ export const Description = React.forwardRef((props, ref) => {
  */
 export const Price = React.forwardRef((props, ref) => {
     const { asChild, children, className, ...otherProps } = props;
-    return (_jsx(SelectedVariant.Price, { children: ({ price, compareAtPrice }) => {
+    return (_jsx(CoreSelectedVariant.Price, { children: ({ price, compareAtPrice }) => {
             return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productPrice, "data-discounted": compareAtPrice !== null, customElement: children, customElementProps: {
                     price,
                     formattedPrice: price,
@@ -240,7 +240,7 @@ export const Price = React.forwardRef((props, ref) => {
 export const CompareAtPrice = React.forwardRef((props, ref) => {
     const { asChild, children, className, ...otherProps } = props;
     const testId = TestIds.productCompareAtPrice;
-    return (_jsx(SelectedVariant.Price, { children: ({ compareAtPrice }) => {
+    return (_jsx(CoreSelectedVariant.Price, { children: ({ compareAtPrice }) => {
             // Don't render anything if there's no compare-at price
             if (!compareAtPrice) {
                 return null;
@@ -466,15 +466,15 @@ export const Stock = React.forwardRef((props, ref) => {
  * ```
  */
 export const Variants = React.forwardRef((props, ref) => {
-    const { asChild, children, className } = props;
-    return (_jsx(ProductVariantSelector.Options, { children: ({ hasOptions, options }) => {
+    const { asChild, children, className, ...attributes } = props;
+    return (_jsx(CoreProductVariantSelector.Options, { children: ({ hasOptions, options }) => {
             if (!hasOptions)
                 return null;
             const contextValue = {
                 hasOptions,
                 options,
             };
-            return (_jsx(VariantsContext.Provider, { value: contextValue, children: _jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productVariants, customElement: children, children: _jsx("div", { children: React.isValidElement(children) ? children : null }) }) }));
+            return (_jsx(VariantsContext.Provider, { value: contextValue, children: _jsx(AsChildSlot, { ...attributes, ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productVariants, customElement: children, children: _jsx("div", { children: React.isValidElement(children) ? children : null }) }) }));
         } }));
 });
 /**
@@ -527,7 +527,7 @@ export const VariantOptionRepeater = React.forwardRef((props, _ref) => {
     if (!hasOptions)
         return null;
     return (_jsx(_Fragment, { children: options.map((option) => {
-            return (_jsx(ProductVariantSelector.Option, { option: option, children: (optionData) => (_jsx(Option.Root, { option: {
+            return (_jsx(CoreProductVariantSelector.Option, { option: option, children: (optionData) => (_jsx(Option.Root, { option: {
                         ...optionData,
                         mandatory: false,
                     }, children: children })) }, option._id));
@@ -577,15 +577,15 @@ export const VariantOptionRepeater = React.forwardRef((props, _ref) => {
  * ```
  */
 export const Modifiers = React.forwardRef((props, ref) => {
-    const { asChild, children, className } = props;
-    return (_jsx(ProductModifiers.Modifiers, { children: ({ hasModifiers, modifiers }) => {
+    const { asChild, children, className, ...attributes } = props;
+    return (_jsx(CoreProductModifiers.Modifiers, { children: ({ hasModifiers, modifiers }) => {
             if (!hasModifiers)
                 return null;
             const contextValue = {
                 hasModifiers,
                 modifiers,
             };
-            return (_jsx(ModifiersContext.Provider, { value: contextValue, children: _jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productModifiers, customElement: children, children: _jsx("div", { children: React.isValidElement(children) ? children : null }) }) }));
+            return (_jsx(ModifiersContext.Provider, { value: contextValue, children: _jsx(AsChildSlot, { ...attributes, ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productModifiers, customElement: children, children: _jsx("div", { children: React.isValidElement(children) ? children : null }) }) }));
         } }));
 });
 /**
@@ -640,7 +640,7 @@ export const ModifierOptionRepeater = React.forwardRef((props, _ref) => {
     if (!hasModifiers)
         return null;
     return (_jsx(_Fragment, { children: modifiers.map((modifier) => {
-            return (_jsx(ProductModifiers.Modifier, { modifier: modifier, children: (modifierData) => (_jsx(Option.Root, { option: {
+            return (_jsx(CoreProductModifiers.Modifier, { modifier: modifier, children: (modifierData) => (_jsx(Option.Root, { option: {
                         ...modifierData,
                     }, allowedTypes: allowedTypes, children: children })) }, modifier._id));
         }) }));
@@ -755,7 +755,7 @@ export { ProductMediaGallery as MediaGallery };
  */
 export const ProductQuantity = React.forwardRef((props, ref) => {
     const { asChild, children, className } = props;
-    return (_jsx(ProductVariantSelector.Stock, { children: ({ inStock, isPreOrderEnabled, availableQuantity, selectedQuantity, setSelectedQuantity, }) => {
+    return (_jsx(CoreProductVariantSelector.Stock, { children: ({ inStock, isPreOrderEnabled, availableQuantity, selectedQuantity, setSelectedQuantity, }) => {
             const renderProps = {
                 selectedQuantity,
                 availableQuantity,
@@ -782,7 +782,7 @@ export const ProductQuantity = React.forwardRef((props, ref) => {
  */
 export const ProductQuantityDecrement = React.forwardRef((props, ref) => {
     const { asChild, children, className } = props;
-    return (_jsx(ProductVariantSelector.Stock, { children: ({ selectedQuantity, inStock, isPreOrderEnabled }) => {
+    return (_jsx(CoreProductVariantSelector.Stock, { children: ({ selectedQuantity, inStock, isPreOrderEnabled }) => {
             const disabled = selectedQuantity <= 1 || (!inStock && !isPreOrderEnabled);
             if (asChild && children) {
                 return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productQuantityDecrement, customElement: children, customElementProps: { disabled } }));
@@ -802,7 +802,7 @@ export const ProductQuantityDecrement = React.forwardRef((props, ref) => {
  */
 export const ProductQuantityInput = React.forwardRef((props, ref) => {
     const { asChild, children, className, disabled = true } = props;
-    return (_jsx(ProductVariantSelector.Stock, { children: () => {
+    return (_jsx(CoreProductVariantSelector.Stock, { children: () => {
             if (asChild && children) {
                 return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, disabled: disabled, "data-testid": TestIds.productQuantityInput, customElement: children, customElementProps: {} }));
             }
@@ -822,7 +822,7 @@ export const ProductQuantityInput = React.forwardRef((props, ref) => {
  */
 export const ProductQuantityIncrement = React.forwardRef((props, ref) => {
     const { asChild, children, className } = props;
-    return (_jsx(ProductVariantSelector.Stock, { children: ({ selectedQuantity, availableQuantity, inStock, isPreOrderEnabled, }) => {
+    return (_jsx(CoreProductVariantSelector.Stock, { children: ({ selectedQuantity, availableQuantity, inStock, isPreOrderEnabled, }) => {
             const disabled = (!!availableQuantity && selectedQuantity >= availableQuantity) ||
                 (!inStock && !isPreOrderEnabled);
             if (asChild && children) {
@@ -859,13 +859,13 @@ export const ProductQuantityIncrement = React.forwardRef((props, ref) => {
  */
 export const ProductQuantityRaw = React.forwardRef((props, ref) => {
     const { asChild, children, className } = props;
-    return (_jsx(ProductVariantSelector.Stock, { children: (renderProps) => {
+    return (_jsx(CoreProductVariantSelector.Stock, { children: (renderProps) => {
             return (_jsx(AsChildSlot, { ref: ref, customElement: children, asChild: asChild, className: className, "data-testid": TestIds.productQuantityRaw, customElementProps: renderProps }));
         } }));
 });
 export const ProductVariantSelectorReset = React.forwardRef((props, ref) => {
     const { asChild, children, className } = props;
-    return (_jsx(ProductVariantSelector.Reset, { children: (renderProps) => {
+    return (_jsx(CoreProductVariantSelector.Reset, { children: (renderProps) => {
             if (!renderProps.hasSelections) {
                 return null;
             }
@@ -879,7 +879,7 @@ export const ProductVariantSelectorReset = React.forwardRef((props, ref) => {
  */
 export const ProductActionAddToCart = React.forwardRef((props, ref) => {
     const { asChild, children, className, label, loadingState } = props;
-    return (_jsx(SelectedVariant.Actions, { children: ({ lineItems, canAddToCart, isLoading, addToCart, isPreOrderEnabled, }) => {
+    return (_jsx(CoreSelectedVariant.Actions, { children: ({ lineItems, canAddToCart, isLoading, addToCart, isPreOrderEnabled, }) => {
             if (isPreOrderEnabled) {
                 return null;
             }
@@ -901,7 +901,7 @@ export const ProductActionAddToCart = React.forwardRef((props, ref) => {
  */
 export const ProductActionBuyNow = React.forwardRef((props, ref) => {
     const { asChild, children, className, label, loadingState } = props;
-    return (_jsx(SelectedVariant.Actions, { children: ({ lineItems, canAddToCart, isLoading, buyNow, inStock, isPreOrderEnabled, }) => {
+    return (_jsx(CoreSelectedVariant.Actions, { children: ({ lineItems, canAddToCart, isLoading, buyNow, inStock, isPreOrderEnabled, }) => {
             if (!inStock || isPreOrderEnabled) {
                 return null;
             }
@@ -923,7 +923,7 @@ export const ProductActionBuyNow = React.forwardRef((props, ref) => {
  */
 export const ProductActionPreOrder = React.forwardRef((props, ref) => {
     const { asChild, children, className, label, loadingState } = props;
-    return (_jsx(SelectedVariant.Actions, { children: ({ lineItems, isLoading, addToCart, isPreOrderEnabled }) => {
+    return (_jsx(CoreSelectedVariant.Actions, { children: ({ lineItems, isLoading, addToCart, isPreOrderEnabled }) => {
             if (!isPreOrderEnabled) {
                 return null;
             }
@@ -1038,7 +1038,7 @@ function getStockStatusMessage(inStock, isPreOrderEnabled, availabilityStatus, l
  */
 export const ProductVariantStock = React.forwardRef((props, ref) => {
     const { asChild, children, className, labels } = props;
-    return (_jsx(ProductVariantSelector.Stock, { children: ({ inStock, isPreOrderEnabled, availabilityStatus, currentVariantId, }) => {
+    return (_jsx(CoreProductVariantSelector.Stock, { children: ({ inStock, isPreOrderEnabled, availabilityStatus, currentVariantId, }) => {
             // Only render if we have a current variant selected
             if (!currentVariantId && !availabilityStatus) {
                 return null;
@@ -1085,7 +1085,7 @@ export const ProductVariantStock = React.forwardRef((props, ref) => {
  */
 export const ProductVariantSKU = React.forwardRef((props, ref) => {
     const { asChild, children, className } = props;
-    return (_jsx(SelectedVariant.Details, { children: ({ sku }) => {
+    return (_jsx(CoreSelectedVariant.Details, { children: ({ sku }) => {
             // Don't render anything if there's no SKU
             if (!sku) {
                 return null;
@@ -1119,7 +1119,7 @@ export const ProductVariantSKU = React.forwardRef((props, ref) => {
  */
 export const ProductVariantWeight = React.forwardRef((props, ref) => {
     const { asChild, children, className } = props;
-    return (_jsx(SelectedVariant.Details, { children: ({ weight }) => {
+    return (_jsx(CoreSelectedVariant.Details, { children: ({ weight }) => {
             // Don't render anything if there's no weight
             if (!weight) {
                 return null;

package/dist/react/ProductList.d.ts

@@ -1,5 +1,5 @@
 import type { V3Product } from '@wix/auto_sdk_stores_products-v-3';
-import { Sort as SortPrimitive, GenericListTotalsRenderProps, GenericListLoadMoreRenderProps } from '@wix/headless-components/react';
+import { Sort as SortPrimitive, GenericListTotalsRenderProps, GenericListLoadMoreRenderProps, ListVariant, GenericListRepeaterRenderProps } from '@wix/headless-components/react';
 import React from 'react';
 import type { ProductsListServiceConfig } from '../services/products-list-service.js';
 import { productsV3 } from '@wix/stores';
@@ -12,6 +12,7 @@ export interface ProductListRootProps {
     products?: V3Product[];
     productsListConfig?: ProductsListServiceConfig;
     className?: string;
+    variant?: ListVariant;
 }
 /**
  * Root component that provides the ProductList service context for rendering product lists.
@@ -91,26 +92,46 @@ export interface ProductsProps {
  * ```
  */
 export declare const Products: React.ForwardRefExoticComponent<ProductsProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Render props for ProductRepeater asChild pattern
+ */
+export type ProductRepeaterRenderProps = GenericListRepeaterRenderProps<V3Product>;
 /**
  * Props for ProductList ProductRepeater component
  */
 export interface ProductRepeaterProps {
-    children: React.ReactNode;
+    children: React.ReactNode | ((props: ProductRepeaterRenderProps, ref: React.Ref<HTMLElement>) => React.ReactNode);
+    /** Whether to render as child component (asChild pattern) */
+    asChild?: boolean;
 }
 /**
  * Repeater component that renders Product.Root for each product.
- * Follows Repeater Level pattern.
- * Note: Repeater components do NOT support asChild as per architecture rules.
+ * Follows Repeater Level pattern and uses GenericList.Repeater for consistency.
+ * Supports asChild pattern for advanced layout components like GalleryWrapper.
  *
  * @component
  * @example
  * ```tsx
+ * // Standard usage
  * <ProductList.ProductRepeater>
  *   <Product.Name />
  *   <Product.Price />
- *   <Product.MediaGallery>
- *     <MediaGallery.Viewport />
- *   </Product.MediaGallery>
+ * </ProductList.ProductRepeater>
+ *
+ * // AsChild usage with GalleryWrapper
+ * <ProductList.ProductRepeater asChild>
+ *   {({ items, variant, itemWrapper }) => (
+ *     <GalleryWrapper
+ *       items={items}
+ *       variant={variant}
+ *       itemRenderer={(item, index) =>
+ *         itemWrapper({ item, index, children: <>
+ *           <Product.Name />
+ *           <Product.Price />
+ *         </> })
+ *       }
+ *     />
+ *   )}
  * </ProductList.ProductRepeater>
  * ```
  */

package/dist/react/ProductList.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Sort as SortPrimitive, GenericList, } from '@wix/headless-components/react';
 import { useService } from '@wix/services-manager-react';
 import React from 'react';
@@ -45,7 +45,7 @@ var TestIds;
  * ```
  */
 export const Root = React.forwardRef((props, ref) => {
-    const { children, products, productsListConfig, className } = props;
+    const { children, products, productsListConfig, className, variant } = props;
     const serviceConfig = productsListConfig || {
         products: products || [],
         searchOptions: {
@@ -59,20 +59,20 @@ export const Root = React.forwardRef((props, ref) => {
         }, // Empty aggregation data
         customizations: [],
     };
-    return (_jsx(CoreProductList.Root, { productsListConfig: serviceConfig, children: _jsx(RootContent, { children: children, className: className, ref: ref }) }));
+    return (_jsx(CoreProductList.Root, { productsListConfig: serviceConfig, children: _jsx(RootContent, { children: children, className: className, ref: ref, variant: variant }) }));
 });
 Root.displayName = 'ProductList.Root';
 /**
  * Internal component to handle the Root content with service access
  */
 const RootContent = React.forwardRef((props, ref) => {
-    const { children, className } = props;
+    const { children, className, variant } = props;
     const productsListService = useService(ProductsListServiceDefinition);
     const items = productsListService.products.get().map((product) => ({
         ...product,
         id: product._id,
     }));
-    return (_jsx(GenericList.Root, { items: items, loadMore: () => productsListService.loadMore(10), hasMore: productsListService.hasMoreProducts.get(), isLoading: productsListService.isLoading.get(), className: className, ref: ref, "data-component-tag": DataComponentTags.productListRoot, "data-testid": TestIds.productListRoot, children: children }));
+    return (_jsx(GenericList.Root, { items: items, loadMore: () => productsListService.loadMore(10), hasMore: productsListService.hasMoreProducts.get(), isLoading: productsListService.isLoading.get(), className: className, ref: ref, "data-component-tag": DataComponentTags.productListRoot, "data-testid": TestIds.productListRoot, variant: variant, children: children }));
 });
 /**
  * Raw component that provides direct access to product list data.
@@ -124,29 +124,38 @@ export const Products = React.forwardRef((props, ref) => {
 });
 /**
  * Repeater component that renders Product.Root for each product.
- * Follows Repeater Level pattern.
- * Note: Repeater components do NOT support asChild as per architecture rules.
+ * Follows Repeater Level pattern and uses GenericList.Repeater for consistency.
+ * Supports asChild pattern for advanced layout components like GalleryWrapper.
  *
  * @component
  * @example
  * ```tsx
+ * // Standard usage
  * <ProductList.ProductRepeater>
  *   <Product.Name />
  *   <Product.Price />
- *   <Product.MediaGallery>
- *     <MediaGallery.Viewport />
- *   </Product.MediaGallery>
+ * </ProductList.ProductRepeater>
+ *
+ * // AsChild usage with GalleryWrapper
+ * <ProductList.ProductRepeater asChild>
+ *   {({ items, variant, itemWrapper }) => (
+ *     <GalleryWrapper
+ *       items={items}
+ *       variant={variant}
+ *       itemRenderer={(item, index) =>
+ *         itemWrapper({ item, index, children: <>
+ *           <Product.Name />
+ *           <Product.Price />
+ *         </> })
+ *       }
+ *     />
+ *   )}
  * </ProductList.ProductRepeater>
  * ```
  */
-export const ProductRepeater = React.forwardRef((props, _ref) => {
-    const { children } = props;
-    const productsListService = useService(ProductsListServiceDefinition);
-    const products = productsListService.products.get();
-    const hasProducts = products.length > 0;
-    if (!hasProducts)
-        return null;
-    return (_jsx(_Fragment, { children: products.map((product) => (_jsx(Product.Root, { product: product, "data-testid": TestIds.productListItem, "data-product-id": product._id, "data-product-available": true, children: children }, product._id))) }));
+export const ProductRepeater = React.forwardRef((props, ref) => {
+    const { children, asChild } = props;
+    return (_jsx(GenericList.Repeater, { ref: ref, asChild: asChild, itemWrapper: ({ item: product, children }) => (_jsx(Product.Root, { product: product, "data-testid": TestIds.productListItem, "data-product-id": product._id, "data-product-available": true, "data-item-id": product._id, children: children }, product._id)), children: children }));
 });
 /**
  * Displays a button to load more products. Not rendered if infiniteScroll is false or no products are left to load.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/headless-stores",
-  "version": "0.0.95",
+  "version": "0.0.97",
   "type": "module",
   "scripts": {
     "prebuild": "cd ../media && yarn build && cd ../ecom && yarn build",
@@ -62,7 +62,7 @@
     "@wix/auto_sdk_stores_read-only-variants-v-3": "^1.0.23",
     "@wix/ecom": "^1.0.1278",
     "@wix/essentials": "^0.1.24",
-    "@wix/headless-ecom": "0.0.31",
+    "@wix/headless-ecom": "0.0.32",
     "@wix/headless-media": "0.0.15",
     "@wix/headless-utils": "0.0.4",
     "@wix/redirects": "^1.0.83",
@@ -70,6 +70,6 @@
     "@wix/services-manager-react": "^0.1.26"
   },
   "peerDependencies": {
-    "@wix/headless-components": "0.0.16"
+    "@wix/headless-components": "0.0.18"
   }
 }