@wix/headless-stores 0.0.32 → 0.0.34

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

@@ -1,4 +1,39 @@
-import type { V3Product } from "@wix/auto_sdk_stores_products-v-3";
+import { ProductServiceConfig } from "../services/product-service.js";
+import type { V3Product, ProductMedia } from "@wix/auto_sdk_stores_products-v-3";
+import type { PropsWithChildren } from "react";
+/**
+ * Root component that provides the Product service context to its children.
+ * This component sets up the necessary services for rendering and managing a single product's data.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { Product } from '@wix/stores/components';
+ *
+ * function ProductPage() {
+ *   return (
+ *     <Product.Root productServiceConfig={{ product: myProduct }}>
+ *       <div>
+ *         <Product.Name>
+ *           {({ name }) => (
+ *             <h1
+ *               className="text-4xl font-bold text-content-primary mb-4"
+ *               data-testid="product-name"
+ *             >
+ *               {name}
+ *             </h1>
+ *           )}
+ *         </Product.Name>
+ *       </div>
+ *     </Product.Root>
+ *   );
+ * }
+ * ```
+ */
+export declare function Root(props: PropsWithChildren<{
+    productServiceConfig: ProductServiceConfig;
+}>): import("react/jsx-runtime").JSX.Element;
 /**
  * Props for ProductName headless component
  */
@@ -89,3 +124,10 @@ export interface ProductDescriptionRenderProps {
  * ```
  */
 export declare const Description: (props: ProductDescriptionProps) => import("react").ReactNode;
+export interface ProductMediaProps {
+    children: (props: ProductMediaRenderProps) => React.ReactNode;
+}
+export interface ProductMediaRenderProps {
+    media: ProductMedia[];
+}
+export declare const Media: (props: ProductMediaProps) => import("react").ReactNode;

package/cjs/dist/react/Product.js

@@ -1,5 +1,40 @@
-import { useService } from "@wix/services-manager-react";
-import { ProductServiceDefinition } from "../services/product-service.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useService, WixServices } from "@wix/services-manager-react";
+import { ProductServiceDefinition, ProductService, } from "../services/product-service.js";
+import { createServicesMap } from "@wix/services-manager";
+/**
+ * Root component that provides the Product service context to its children.
+ * This component sets up the necessary services for rendering and managing a single product's data.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { Product } from '@wix/stores/components';
+ *
+ * function ProductPage() {
+ *   return (
+ *     <Product.Root productServiceConfig={{ product: myProduct }}>
+ *       <div>
+ *         <Product.Name>
+ *           {({ name }) => (
+ *             <h1
+ *               className="text-4xl font-bold text-content-primary mb-4"
+ *               data-testid="product-name"
+ *             >
+ *               {name}
+ *             </h1>
+ *           )}
+ *         </Product.Name>
+ *       </div>
+ *     </Product.Root>
+ *   );
+ * }
+ * ```
+ */
+export function Root(props) {
+    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(ProductServiceDefinition, ProductService, props.productServiceConfig), children: props.children }));
+}
 /**
  * Headless component for product name display
  *
@@ -67,3 +102,11 @@ export const Description = (props) => {
         plainDescription: plainDescription,
     });
 };
+export const Media = (props) => {
+    const service = useService(ProductServiceDefinition);
+    const product = service.product.get();
+    const media = product.media?.itemsInfo?.items ?? [];
+    return props.children({
+        media,
+    });
+};

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

@@ -1,4 +1,47 @@
+import { SelectedVariantServiceConfig } from "../services/selected-variant-service.js";
+import type { PropsWithChildren } from "react";
 import { type ConnectedOption, type ConnectedOptionChoice, InventoryAvailabilityStatus } from "@wix/auto_sdk_stores_products-v-3";
+/**
+ * Root component that provides the ProductVariantSelector service context to its children.
+ * This component sets up the necessary services for rendering and managing product variant selection.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { ProductVariantSelector } from '@wix/stores/components';
+ *
+ * function VariantSelector() {
+ *   return (
+ *     <ProductVariantSelector.Root selectedVariantServiceConfig={{ fetchInventoryData: true }}>
+ *       <div>
+ *         <ProductVariantSelector.Options>
+ *           {({ options, hasOptions, selectedChoices }) => (
+ *             <div>
+ *               {hasOptions && options.map(option => (
+ *                 <div key={option.id}>
+ *                   <label>{option.name}</label>
+ *                   <select value={selectedChoices[option.id] || ''}>
+ *                     {option.choices?.map(choice => (
+ *                       <option key={choice.id} value={choice.id}>
+ *                         {choice.description}
+ *                       </option>
+ *                     ))}
+ *                   </select>
+ *                 </div>
+ *               ))}
+ *             </div>
+ *           )}
+ *         </ProductVariantSelector.Options>
+ *       </div>
+ *     </ProductVariantSelector.Root>
+ *   );
+ * }
+ * ```
+ */
+export declare function Root(props: PropsWithChildren<{
+    selectedVariantServiceConfig?: SelectedVariantServiceConfig;
+}>): import("react/jsx-runtime").JSX.Element;
 /**
  * Props for Options headless component
  */

package/cjs/dist/react/ProductVariantSelector.js

@@ -1,6 +1,49 @@
-import { useService } from "@wix/services-manager-react";
-import { SelectedVariantServiceDefinition } from "../services/selected-variant-service.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useService, WixServices } from "@wix/services-manager-react";
+import { SelectedVariantServiceDefinition, SelectedVariantService, } from "../services/selected-variant-service.js";
+import { createServicesMap } from "@wix/services-manager";
 import { InventoryAvailabilityStatus, } from "@wix/auto_sdk_stores_products-v-3";
+/**
+ * Root component that provides the ProductVariantSelector service context to its children.
+ * This component sets up the necessary services for rendering and managing product variant selection.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { ProductVariantSelector } from '@wix/stores/components';
+ *
+ * function VariantSelector() {
+ *   return (
+ *     <ProductVariantSelector.Root selectedVariantServiceConfig={{ fetchInventoryData: true }}>
+ *       <div>
+ *         <ProductVariantSelector.Options>
+ *           {({ options, hasOptions, selectedChoices }) => (
+ *             <div>
+ *               {hasOptions && options.map(option => (
+ *                 <div key={option.id}>
+ *                   <label>{option.name}</label>
+ *                   <select value={selectedChoices[option.id] || ''}>
+ *                     {option.choices?.map(choice => (
+ *                       <option key={choice.id} value={choice.id}>
+ *                         {choice.description}
+ *                       </option>
+ *                     ))}
+ *                   </select>
+ *                 </div>
+ *               ))}
+ *             </div>
+ *           )}
+ *         </ProductVariantSelector.Options>
+ *       </div>
+ *     </ProductVariantSelector.Root>
+ *   );
+ * }
+ * ```
+ */
+export function Root(props) {
+    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(SelectedVariantServiceDefinition, SelectedVariantService, props.selectedVariantServiceConfig), children: props.children }));
+}
 /**
  * Headless component for all product options
  *

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

@@ -10,6 +10,7 @@ export interface RootProps {
  * Root component that provides the ProductsList service context to its children.
  * This component sets up the necessary services for managing products list state.
  *
+ * @order 1
  * @component
  * @example
  * ```tsx
@@ -19,8 +20,10 @@ export interface RootProps {
  *   return (
  *     <ProductsList.Root
  *       productsListConfig={{
- *         collectionId: 'my-collection-id',
- *         filters: { price: { min: 10, max: 100 } }
+ *         products: myProducts,
+ *         searchOptions: { query: { search: 'searchTerm' } },
+ *         pagingMetadata: { count: 10, hasNext: true },
+ *         aggregations: {}
  *       }}
  *     >
  *       <ProductsList.Grid>

package/cjs/dist/react/ProductsList.js

@@ -7,6 +7,7 @@ import { ProductService, ProductServiceDefinition, } from "@wix/headless-stores/
  * Root component that provides the ProductsList service context to its children.
  * This component sets up the necessary services for managing products list state.
  *
+ * @order 1
  * @component
  * @example
  * ```tsx
@@ -16,8 +17,10 @@ import { ProductService, ProductServiceDefinition, } from "@wix/headless-stores/
  *   return (
  *     <ProductsList.Root
  *       productsListConfig={{
- *         collectionId: 'my-collection-id',
- *         filters: { price: { min: 10, max: 100 } }
+ *         products: myProducts,
+ *         searchOptions: { query: { search: 'searchTerm' } },
+ *         pagingMetadata: { count: 10, hasNext: true },
+ *         aggregations: {}
  *       }}
  *     >
  *       <ProductsList.Grid>
@@ -108,7 +111,6 @@ export function Loading(props) {
     }
     return null;
 }
-;
 /**
  * Component that renders content when there's an error loading products.
  * Only displays its children when an error has occurred.

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

@@ -1,5 +1,57 @@
 import React from "react";
+import { RelatedProductsServiceConfig } from "../services/related-products-service.js";
+import type { PropsWithChildren } from "react";
 import { type V3Product } from "@wix/auto_sdk_stores_products-v-3";
+/**
+ * Root component that provides the RelatedProducts service context to its children.
+ * This component sets up the necessary services for rendering and managing related products functionality.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { RelatedProducts } from '@wix/stores/components';
+ *
+ * function RecommendedSection({ currentProductId }) {
+ *   return (
+ *     <RelatedProducts.Root relatedProductsServiceConfig={{ productId: currentProductId }}>
+ *       <div>
+ *         <h3>You might also like</h3>
+ *         <RelatedProducts.List>
+ *           {({ products, isLoading, error, hasProducts, refresh }) => (
+ *             <div>
+ *               {isLoading && <div>Loading related products...</div>}
+ *               {error && <div>Error: {error}</div>}
+ *               {hasProducts && (
+ *                 <div className="products-grid">
+ *                   {products.map(product => (
+ *                     <RelatedProducts.Item key={product.id} product={product}>
+ *                       {({ title, image, price, available, description, onQuickAdd }) => (
+ *                         <div className={`related-product ${!available ? 'unavailable' : ''}`}>
+ *                           {image && <img src={image} alt={title} />}
+ *                           <h4>{title}</h4>
+ *                           <div className="price">{price}</div>
+ *                           <button onClick={onQuickAdd} disabled={!available}>
+ *                             Quick Add
+ *                           </button>
+ *                         </div>
+ *                       )}
+ *                     </RelatedProducts.Item>
+ *                   ))}
+ *                 </div>
+ *               )}
+ *             </div>
+ *           )}
+ *         </RelatedProducts.List>
+ *       </div>
+ *     </RelatedProducts.Root>
+ *   );
+ * }
+ * ```
+ */
+export declare function Root(props: PropsWithChildren<{
+    relatedProductsServiceConfig: RelatedProductsServiceConfig;
+}>): import("react/jsx-runtime").JSX.Element;
 /**
  * Props for List headless component
  */

package/cjs/dist/react/RelatedProducts.js

@@ -1,8 +1,60 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import { useService } from "@wix/services-manager-react";
-import { RelatedProductsServiceDefinition } from "../services/related-products-service.js";
+import { useService, WixServices } from "@wix/services-manager-react";
+import { RelatedProductsServiceDefinition, RelatedProductsService, } from "../services/related-products-service.js";
+import { createServicesMap } from "@wix/services-manager";
 import { SignalsServiceDefinition } from "@wix/services-definitions/core-services/signals";
 import { InventoryAvailabilityStatus, } from "@wix/auto_sdk_stores_products-v-3";
+/**
+ * Root component that provides the RelatedProducts service context to its children.
+ * This component sets up the necessary services for rendering and managing related products functionality.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { RelatedProducts } from '@wix/stores/components';
+ *
+ * function RecommendedSection({ currentProductId }) {
+ *   return (
+ *     <RelatedProducts.Root relatedProductsServiceConfig={{ productId: currentProductId }}>
+ *       <div>
+ *         <h3>You might also like</h3>
+ *         <RelatedProducts.List>
+ *           {({ products, isLoading, error, hasProducts, refresh }) => (
+ *             <div>
+ *               {isLoading && <div>Loading related products...</div>}
+ *               {error && <div>Error: {error}</div>}
+ *               {hasProducts && (
+ *                 <div className="products-grid">
+ *                   {products.map(product => (
+ *                     <RelatedProducts.Item key={product.id} product={product}>
+ *                       {({ title, image, price, available, description, onQuickAdd }) => (
+ *                         <div className={`related-product ${!available ? 'unavailable' : ''}`}>
+ *                           {image && <img src={image} alt={title} />}
+ *                           <h4>{title}</h4>
+ *                           <div className="price">{price}</div>
+ *                           <button onClick={onQuickAdd} disabled={!available}>
+ *                             Quick Add
+ *                           </button>
+ *                         </div>
+ *                       )}
+ *                     </RelatedProducts.Item>
+ *                   ))}
+ *                 </div>
+ *               )}
+ *             </div>
+ *           )}
+ *         </RelatedProducts.List>
+ *       </div>
+ *     </RelatedProducts.Root>
+ *   );
+ * }
+ * ```
+ */
+export function Root(props) {
+    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(RelatedProductsServiceDefinition, RelatedProductsService, props.relatedProductsServiceConfig), children: props.children }));
+}
 /**
  * Headless component for displaying related products list
  *

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

@@ -1,3 +1,41 @@
+import { SelectedVariantServiceConfig } from "../services/selected-variant-service.js";
+import type { PropsWithChildren } from "react";
+/**
+ * Root component that provides the SelectedVariant service context to its children.
+ * This component sets up the necessary services for rendering and managing selected variant data.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { SelectedVariant } from '@wix/stores/components';
+ *
+ * function ProductVariantDisplay() {
+ *   return (
+ *     <SelectedVariant.Root selectedVariantServiceConfig={{ fetchInventoryData: true }}>
+ *       <div>
+ *         <SelectedVariant.Price>
+ *           {({ price, compareAtPrice, currency }) => (
+ *             <div className="price-display">
+ *               <span className="current-price">{price}</span>
+ *               {compareAtPrice && (
+ *                 <span className="compare-price">
+ *                   <s>{compareAtPrice}</s>
+ *                 </span>
+ *               )}
+ *               <span className="currency">{currency}</span>
+ *             </div>
+ *           )}
+ *         </SelectedVariant.Price>
+ *       </div>
+ *     </SelectedVariant.Root>
+ *   );
+ * }
+ * ```
+ */
+export declare function Root(props: PropsWithChildren<{
+    selectedVariantServiceConfig?: SelectedVariantServiceConfig;
+}>): import("react/jsx-runtime").JSX.Element;
 /**
  * Props for ProductDetails headless component
  */

package/cjs/dist/react/SelectedVariant.js

@@ -1,5 +1,43 @@
-import { useService } from "@wix/services-manager-react";
-import { SelectedVariantServiceDefinition } from "../services/selected-variant-service.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useService, WixServices } from "@wix/services-manager-react";
+import { SelectedVariantServiceDefinition, SelectedVariantService, } from "../services/selected-variant-service.js";
+import { createServicesMap } from "@wix/services-manager";
+/**
+ * Root component that provides the SelectedVariant service context to its children.
+ * This component sets up the necessary services for rendering and managing selected variant data.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { SelectedVariant } from '@wix/stores/components';
+ *
+ * function ProductVariantDisplay() {
+ *   return (
+ *     <SelectedVariant.Root selectedVariantServiceConfig={{ fetchInventoryData: true }}>
+ *       <div>
+ *         <SelectedVariant.Price>
+ *           {({ price, compareAtPrice, currency }) => (
+ *             <div className="price-display">
+ *               <span className="current-price">{price}</span>
+ *               {compareAtPrice && (
+ *                 <span className="compare-price">
+ *                   <s>{compareAtPrice}</s>
+ *                 </span>
+ *               )}
+ *               <span className="currency">{currency}</span>
+ *             </div>
+ *           )}
+ *         </SelectedVariant.Price>
+ *       </div>
+ *     </SelectedVariant.Root>
+ *   );
+ * }
+ * ```
+ */
+export function Root(props) {
+    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(SelectedVariantServiceDefinition, SelectedVariantService, props.selectedVariantServiceConfig), children: props.children }));
+}
 /**
  * Headless component for selected variant details display
  *

package/dist/react/Product.d.ts

@@ -1,4 +1,39 @@
-import type { V3Product } from "@wix/auto_sdk_stores_products-v-3";
+import { ProductServiceConfig } from "../services/product-service.js";
+import type { V3Product, ProductMedia } from "@wix/auto_sdk_stores_products-v-3";
+import type { PropsWithChildren } from "react";
+/**
+ * Root component that provides the Product service context to its children.
+ * This component sets up the necessary services for rendering and managing a single product's data.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { Product } from '@wix/stores/components';
+ *
+ * function ProductPage() {
+ *   return (
+ *     <Product.Root productServiceConfig={{ product: myProduct }}>
+ *       <div>
+ *         <Product.Name>
+ *           {({ name }) => (
+ *             <h1
+ *               className="text-4xl font-bold text-content-primary mb-4"
+ *               data-testid="product-name"
+ *             >
+ *               {name}
+ *             </h1>
+ *           )}
+ *         </Product.Name>
+ *       </div>
+ *     </Product.Root>
+ *   );
+ * }
+ * ```
+ */
+export declare function Root(props: PropsWithChildren<{
+    productServiceConfig: ProductServiceConfig;
+}>): import("react/jsx-runtime").JSX.Element;
 /**
  * Props for ProductName headless component
  */
@@ -89,3 +124,10 @@ export interface ProductDescriptionRenderProps {
  * ```
  */
 export declare const Description: (props: ProductDescriptionProps) => import("react").ReactNode;
+export interface ProductMediaProps {
+    children: (props: ProductMediaRenderProps) => React.ReactNode;
+}
+export interface ProductMediaRenderProps {
+    media: ProductMedia[];
+}
+export declare const Media: (props: ProductMediaProps) => import("react").ReactNode;

package/dist/react/Product.js

@@ -1,5 +1,40 @@
-import { useService } from "@wix/services-manager-react";
-import { ProductServiceDefinition } from "../services/product-service.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useService, WixServices } from "@wix/services-manager-react";
+import { ProductServiceDefinition, ProductService, } from "../services/product-service.js";
+import { createServicesMap } from "@wix/services-manager";
+/**
+ * Root component that provides the Product service context to its children.
+ * This component sets up the necessary services for rendering and managing a single product's data.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { Product } from '@wix/stores/components';
+ *
+ * function ProductPage() {
+ *   return (
+ *     <Product.Root productServiceConfig={{ product: myProduct }}>
+ *       <div>
+ *         <Product.Name>
+ *           {({ name }) => (
+ *             <h1
+ *               className="text-4xl font-bold text-content-primary mb-4"
+ *               data-testid="product-name"
+ *             >
+ *               {name}
+ *             </h1>
+ *           )}
+ *         </Product.Name>
+ *       </div>
+ *     </Product.Root>
+ *   );
+ * }
+ * ```
+ */
+export function Root(props) {
+    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(ProductServiceDefinition, ProductService, props.productServiceConfig), children: props.children }));
+}
 /**
  * Headless component for product name display
  *
@@ -67,3 +102,11 @@ export const Description = (props) => {
         plainDescription: plainDescription,
     });
 };
+export const Media = (props) => {
+    const service = useService(ProductServiceDefinition);
+    const product = service.product.get();
+    const media = product.media?.itemsInfo?.items ?? [];
+    return props.children({
+        media,
+    });
+};

package/dist/react/ProductVariantSelector.d.ts

@@ -1,4 +1,47 @@
+import { SelectedVariantServiceConfig } from "../services/selected-variant-service.js";
+import type { PropsWithChildren } from "react";
 import { type ConnectedOption, type ConnectedOptionChoice, InventoryAvailabilityStatus } from "@wix/auto_sdk_stores_products-v-3";
+/**
+ * Root component that provides the ProductVariantSelector service context to its children.
+ * This component sets up the necessary services for rendering and managing product variant selection.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { ProductVariantSelector } from '@wix/stores/components';
+ *
+ * function VariantSelector() {
+ *   return (
+ *     <ProductVariantSelector.Root selectedVariantServiceConfig={{ fetchInventoryData: true }}>
+ *       <div>
+ *         <ProductVariantSelector.Options>
+ *           {({ options, hasOptions, selectedChoices }) => (
+ *             <div>
+ *               {hasOptions && options.map(option => (
+ *                 <div key={option.id}>
+ *                   <label>{option.name}</label>
+ *                   <select value={selectedChoices[option.id] || ''}>
+ *                     {option.choices?.map(choice => (
+ *                       <option key={choice.id} value={choice.id}>
+ *                         {choice.description}
+ *                       </option>
+ *                     ))}
+ *                   </select>
+ *                 </div>
+ *               ))}
+ *             </div>
+ *           )}
+ *         </ProductVariantSelector.Options>
+ *       </div>
+ *     </ProductVariantSelector.Root>
+ *   );
+ * }
+ * ```
+ */
+export declare function Root(props: PropsWithChildren<{
+    selectedVariantServiceConfig?: SelectedVariantServiceConfig;
+}>): import("react/jsx-runtime").JSX.Element;
 /**
  * Props for Options headless component
  */

package/dist/react/ProductVariantSelector.js

@@ -1,6 +1,49 @@
-import { useService } from "@wix/services-manager-react";
-import { SelectedVariantServiceDefinition } from "../services/selected-variant-service.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useService, WixServices } from "@wix/services-manager-react";
+import { SelectedVariantServiceDefinition, SelectedVariantService, } from "../services/selected-variant-service.js";
+import { createServicesMap } from "@wix/services-manager";
 import { InventoryAvailabilityStatus, } from "@wix/auto_sdk_stores_products-v-3";
+/**
+ * Root component that provides the ProductVariantSelector service context to its children.
+ * This component sets up the necessary services for rendering and managing product variant selection.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { ProductVariantSelector } from '@wix/stores/components';
+ *
+ * function VariantSelector() {
+ *   return (
+ *     <ProductVariantSelector.Root selectedVariantServiceConfig={{ fetchInventoryData: true }}>
+ *       <div>
+ *         <ProductVariantSelector.Options>
+ *           {({ options, hasOptions, selectedChoices }) => (
+ *             <div>
+ *               {hasOptions && options.map(option => (
+ *                 <div key={option.id}>
+ *                   <label>{option.name}</label>
+ *                   <select value={selectedChoices[option.id] || ''}>
+ *                     {option.choices?.map(choice => (
+ *                       <option key={choice.id} value={choice.id}>
+ *                         {choice.description}
+ *                       </option>
+ *                     ))}
+ *                   </select>
+ *                 </div>
+ *               ))}
+ *             </div>
+ *           )}
+ *         </ProductVariantSelector.Options>
+ *       </div>
+ *     </ProductVariantSelector.Root>
+ *   );
+ * }
+ * ```
+ */
+export function Root(props) {
+    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(SelectedVariantServiceDefinition, SelectedVariantService, props.selectedVariantServiceConfig), children: props.children }));
+}
 /**
  * Headless component for all product options
  *

package/dist/react/ProductsList.d.ts

@@ -10,6 +10,7 @@ export interface RootProps {
  * Root component that provides the ProductsList service context to its children.
  * This component sets up the necessary services for managing products list state.
  *
+ * @order 1
  * @component
  * @example
  * ```tsx
@@ -19,8 +20,10 @@ export interface RootProps {
  *   return (
  *     <ProductsList.Root
  *       productsListConfig={{
- *         collectionId: 'my-collection-id',
- *         filters: { price: { min: 10, max: 100 } }
+ *         products: myProducts,
+ *         searchOptions: { query: { search: 'searchTerm' } },
+ *         pagingMetadata: { count: 10, hasNext: true },
+ *         aggregations: {}
  *       }}
  *     >
  *       <ProductsList.Grid>

package/dist/react/ProductsList.js

@@ -7,6 +7,7 @@ import { ProductService, ProductServiceDefinition, } from "@wix/headless-stores/
  * Root component that provides the ProductsList service context to its children.
  * This component sets up the necessary services for managing products list state.
  *
+ * @order 1
  * @component
  * @example
  * ```tsx
@@ -16,8 +17,10 @@ import { ProductService, ProductServiceDefinition, } from "@wix/headless-stores/
  *   return (
  *     <ProductsList.Root
  *       productsListConfig={{
- *         collectionId: 'my-collection-id',
- *         filters: { price: { min: 10, max: 100 } }
+ *         products: myProducts,
+ *         searchOptions: { query: { search: 'searchTerm' } },
+ *         pagingMetadata: { count: 10, hasNext: true },
+ *         aggregations: {}
  *       }}
  *     >
  *       <ProductsList.Grid>
@@ -108,7 +111,6 @@ export function Loading(props) {
     }
     return null;
 }
-;
 /**
  * Component that renders content when there's an error loading products.
  * Only displays its children when an error has occurred.

package/dist/react/RelatedProducts.d.ts

@@ -1,5 +1,57 @@
 import React from "react";
+import { RelatedProductsServiceConfig } from "../services/related-products-service.js";
+import type { PropsWithChildren } from "react";
 import { type V3Product } from "@wix/auto_sdk_stores_products-v-3";
+/**
+ * Root component that provides the RelatedProducts service context to its children.
+ * This component sets up the necessary services for rendering and managing related products functionality.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { RelatedProducts } from '@wix/stores/components';
+ *
+ * function RecommendedSection({ currentProductId }) {
+ *   return (
+ *     <RelatedProducts.Root relatedProductsServiceConfig={{ productId: currentProductId }}>
+ *       <div>
+ *         <h3>You might also like</h3>
+ *         <RelatedProducts.List>
+ *           {({ products, isLoading, error, hasProducts, refresh }) => (
+ *             <div>
+ *               {isLoading && <div>Loading related products...</div>}
+ *               {error && <div>Error: {error}</div>}
+ *               {hasProducts && (
+ *                 <div className="products-grid">
+ *                   {products.map(product => (
+ *                     <RelatedProducts.Item key={product.id} product={product}>
+ *                       {({ title, image, price, available, description, onQuickAdd }) => (
+ *                         <div className={`related-product ${!available ? 'unavailable' : ''}`}>
+ *                           {image && <img src={image} alt={title} />}
+ *                           <h4>{title}</h4>
+ *                           <div className="price">{price}</div>
+ *                           <button onClick={onQuickAdd} disabled={!available}>
+ *                             Quick Add
+ *                           </button>
+ *                         </div>
+ *                       )}
+ *                     </RelatedProducts.Item>
+ *                   ))}
+ *                 </div>
+ *               )}
+ *             </div>
+ *           )}
+ *         </RelatedProducts.List>
+ *       </div>
+ *     </RelatedProducts.Root>
+ *   );
+ * }
+ * ```
+ */
+export declare function Root(props: PropsWithChildren<{
+    relatedProductsServiceConfig: RelatedProductsServiceConfig;
+}>): import("react/jsx-runtime").JSX.Element;
 /**
  * Props for List headless component
  */

package/dist/react/RelatedProducts.js

@@ -1,8 +1,60 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import { useService } from "@wix/services-manager-react";
-import { RelatedProductsServiceDefinition } from "../services/related-products-service.js";
+import { useService, WixServices } from "@wix/services-manager-react";
+import { RelatedProductsServiceDefinition, RelatedProductsService, } from "../services/related-products-service.js";
+import { createServicesMap } from "@wix/services-manager";
 import { SignalsServiceDefinition } from "@wix/services-definitions/core-services/signals";
 import { InventoryAvailabilityStatus, } from "@wix/auto_sdk_stores_products-v-3";
+/**
+ * Root component that provides the RelatedProducts service context to its children.
+ * This component sets up the necessary services for rendering and managing related products functionality.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { RelatedProducts } from '@wix/stores/components';
+ *
+ * function RecommendedSection({ currentProductId }) {
+ *   return (
+ *     <RelatedProducts.Root relatedProductsServiceConfig={{ productId: currentProductId }}>
+ *       <div>
+ *         <h3>You might also like</h3>
+ *         <RelatedProducts.List>
+ *           {({ products, isLoading, error, hasProducts, refresh }) => (
+ *             <div>
+ *               {isLoading && <div>Loading related products...</div>}
+ *               {error && <div>Error: {error}</div>}
+ *               {hasProducts && (
+ *                 <div className="products-grid">
+ *                   {products.map(product => (
+ *                     <RelatedProducts.Item key={product.id} product={product}>
+ *                       {({ title, image, price, available, description, onQuickAdd }) => (
+ *                         <div className={`related-product ${!available ? 'unavailable' : ''}`}>
+ *                           {image && <img src={image} alt={title} />}
+ *                           <h4>{title}</h4>
+ *                           <div className="price">{price}</div>
+ *                           <button onClick={onQuickAdd} disabled={!available}>
+ *                             Quick Add
+ *                           </button>
+ *                         </div>
+ *                       )}
+ *                     </RelatedProducts.Item>
+ *                   ))}
+ *                 </div>
+ *               )}
+ *             </div>
+ *           )}
+ *         </RelatedProducts.List>
+ *       </div>
+ *     </RelatedProducts.Root>
+ *   );
+ * }
+ * ```
+ */
+export function Root(props) {
+    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(RelatedProductsServiceDefinition, RelatedProductsService, props.relatedProductsServiceConfig), children: props.children }));
+}
 /**
  * Headless component for displaying related products list
  *

package/dist/react/SelectedVariant.d.ts

@@ -1,3 +1,41 @@
+import { SelectedVariantServiceConfig } from "../services/selected-variant-service.js";
+import type { PropsWithChildren } from "react";
+/**
+ * Root component that provides the SelectedVariant service context to its children.
+ * This component sets up the necessary services for rendering and managing selected variant data.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { SelectedVariant } from '@wix/stores/components';
+ *
+ * function ProductVariantDisplay() {
+ *   return (
+ *     <SelectedVariant.Root selectedVariantServiceConfig={{ fetchInventoryData: true }}>
+ *       <div>
+ *         <SelectedVariant.Price>
+ *           {({ price, compareAtPrice, currency }) => (
+ *             <div className="price-display">
+ *               <span className="current-price">{price}</span>
+ *               {compareAtPrice && (
+ *                 <span className="compare-price">
+ *                   <s>{compareAtPrice}</s>
+ *                 </span>
+ *               )}
+ *               <span className="currency">{currency}</span>
+ *             </div>
+ *           )}
+ *         </SelectedVariant.Price>
+ *       </div>
+ *     </SelectedVariant.Root>
+ *   );
+ * }
+ * ```
+ */
+export declare function Root(props: PropsWithChildren<{
+    selectedVariantServiceConfig?: SelectedVariantServiceConfig;
+}>): import("react/jsx-runtime").JSX.Element;
 /**
  * Props for ProductDetails headless component
  */

package/dist/react/SelectedVariant.js

@@ -1,5 +1,43 @@
-import { useService } from "@wix/services-manager-react";
-import { SelectedVariantServiceDefinition } from "../services/selected-variant-service.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useService, WixServices } from "@wix/services-manager-react";
+import { SelectedVariantServiceDefinition, SelectedVariantService, } from "../services/selected-variant-service.js";
+import { createServicesMap } from "@wix/services-manager";
+/**
+ * Root component that provides the SelectedVariant service context to its children.
+ * This component sets up the necessary services for rendering and managing selected variant data.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { SelectedVariant } from '@wix/stores/components';
+ *
+ * function ProductVariantDisplay() {
+ *   return (
+ *     <SelectedVariant.Root selectedVariantServiceConfig={{ fetchInventoryData: true }}>
+ *       <div>
+ *         <SelectedVariant.Price>
+ *           {({ price, compareAtPrice, currency }) => (
+ *             <div className="price-display">
+ *               <span className="current-price">{price}</span>
+ *               {compareAtPrice && (
+ *                 <span className="compare-price">
+ *                   <s>{compareAtPrice}</s>
+ *                 </span>
+ *               )}
+ *               <span className="currency">{currency}</span>
+ *             </div>
+ *           )}
+ *         </SelectedVariant.Price>
+ *       </div>
+ *     </SelectedVariant.Root>
+ *   );
+ * }
+ * ```
+ */
+export function Root(props) {
+    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(SelectedVariantServiceDefinition, SelectedVariantService, props.selectedVariantServiceConfig), children: props.children }));
+}
 /**
  * Headless component for selected variant details display
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/headless-stores",
-  "version": "0.0.32",
+  "version": "0.0.34",
   "type": "module",
   "scripts": {
     "prebuild": "cd ../media && yarn build && cd ../ecom && yarn build",