@wix/headless-stores 0.0.81 → 0.0.83

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

@@ -71,6 +71,22 @@ export interface CategoryRawProps {
     /** CSS classes to apply to the default element */
     className?: string;
 }
+/**
+ * Props for CategoryFilter component
+ */
+export interface CategoryFilterProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Custom render function when using asChild */
+    children?: AsChildChildren<{
+        selectedCategory: Category | null;
+        setSelectedCategory: (category: Category | null) => void;
+    }>;
+    /** CSS classes to apply to the default element */
+    className?: string;
+    /** Label for the selected category display */
+    label?: string;
+}
 /**
  * Root container for a single category item.
  * This component sets up the necessary services for managing category state
@@ -195,3 +211,32 @@ export declare const ID: React.ForwardRefExoticComponent<CategoryIDProps & React
  * ```
  */
 export declare const Raw: React.ForwardRefExoticComponent<CategoryRawProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Category filter component that provides category selection functionality.
+ * Provides selected category state and selection controls to custom render functions.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <CategoryFilter className="category-filter" />
+ *
+ * // With custom label
+ * <CategoryFilter label="Current Category:" />
+ *
+ * // Custom rendering with forwardRef
+ * <CategoryFilter asChild>
+ *   {React.forwardRef(({selectedCategory, setSelectedCategory, ...props}, ref) => (
+ *     <div ref={ref} {...props} className="custom-category-filter">
+ *       {selectedCategory && (
+ *         <span>Selected: {selectedCategory.name}</span>
+ *       )}
+ *       <button onClick={() => setSelectedCategory(null)}>
+ *         Clear Selection
+ *       </button>
+ *     </div>
+ *   ))}
+ * </CategoryFilter>
+ * ```
+ */
+export declare const CategoryFilter: React.ForwardRefExoticComponent<CategoryFilterProps & React.RefAttributes<HTMLElement>>;

package/cjs/dist/react/Category.js

@@ -1,7 +1,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { AsChildSlot } from '@wix/headless-utils/react';
-import { CategoryFilter, } from './core/ProductListFilters.js';
+import * as CoreProductListFilters from './core/ProductListFilters.js';
 const CategoryContext = React.createContext(null);
 function useCategoryContext() {
     const context = React.useContext(CategoryContext);
@@ -17,6 +17,7 @@ var TestIds;
     TestIds["categoryLabel"] = "category-label";
     TestIds["categoryId"] = "category-id";
     TestIds["categoryRaw"] = "category-raw";
+    TestIds["categoryFilter"] = "category-filter";
 })(TestIds || (TestIds = {}));
 /**
  * Root container for a single category item.
@@ -38,7 +39,7 @@ var TestIds;
  */
 export function Root(props) {
     const { category, children } = props;
-    return (_jsx(CategoryFilter, { children: ({ selectedCategory, setSelectedCategory }) => {
+    return (_jsx(CoreProductListFilters.CategoryFilter, { children: ({ selectedCategory, setSelectedCategory }) => {
             // Determine if this category is selected by comparing with selectedCategory
             const isSelected = selectedCategory?._id === category._id;
             const contextValue = {
@@ -190,3 +191,42 @@ export const Raw = React.forwardRef((props, ref) => {
     const { category, isSelected } = useCategoryContext();
     return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className || 'sr-only', "data-testid": TestIds.categoryRaw, "data-selected": isSelected ? 'true' : 'false', customElement: children, customElementProps: { category, isSelected }, children: _jsx("span", { children: JSON.stringify(category) }) }));
 });
+/**
+ * Category filter component that provides category selection functionality.
+ * Provides selected category state and selection controls to custom render functions.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <CategoryFilter className="category-filter" />
+ *
+ * // With custom label
+ * <CategoryFilter label="Current Category:" />
+ *
+ * // Custom rendering with forwardRef
+ * <CategoryFilter asChild>
+ *   {React.forwardRef(({selectedCategory, setSelectedCategory, ...props}, ref) => (
+ *     <div ref={ref} {...props} className="custom-category-filter">
+ *       {selectedCategory && (
+ *         <span>Selected: {selectedCategory.name}</span>
+ *       )}
+ *       <button onClick={() => setSelectedCategory(null)}>
+ *         Clear Selection
+ *       </button>
+ *     </div>
+ *   ))}
+ * </CategoryFilter>
+ * ```
+ */
+export const CategoryFilter = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    const label = props.label || 'Selected:';
+    return (_jsx(CoreProductListFilters.CategoryFilter, { children: ({ selectedCategory, setSelectedCategory }) => {
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.categoryFilter, "data-selected": selectedCategory ? 'true' : 'false', customElement: children, customElementProps: {
+                    selectedCategory,
+                    setSelectedCategory,
+                }, children: _jsx("div", { children: selectedCategory && (_jsxs("span", { children: [label, " ", selectedCategory.name] })) }) }));
+        } }));
+});
+CategoryFilter.displayName = 'CategoryFilter';

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

@@ -4,7 +4,6 @@ import React from 'react';
 import type { ProductsListServiceConfig } from '../services/products-list-service.js';
 import { productsV3 } from '@wix/stores';
 import { AsChildChildren } from '@wix/headless-utils/react';
-export { Filter, ResetTrigger as FilterResetTrigger, } from './core/ProductListFilters.js';
 /**
  * Props for the ProductList root component following the documented API
  */
@@ -284,3 +283,103 @@ export interface SortProps {
  * @see {@link SortPrimitive.Root} for the primitive sort component
  */
 export declare const Sort: React.ForwardRefExoticComponent<SortProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for ProductList Filter component
+ */
+export interface FilterProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Child components that will have access to filter functionality */
+    children: React.ReactNode;
+    /** CSS classes to apply to the default element */
+    className?: string;
+}
+export declare const Filter: {
+    Root: React.ForwardRefExoticComponent<FilterProps & React.RefAttributes<HTMLElement>>;
+};
+/**
+ * Props for ProductList FilterResetTrigger component
+ */
+export interface FilterResetTriggerProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Custom render function when using asChild */
+    children?: AsChildChildren<{
+        resetFilters: () => void;
+        isFiltered: boolean;
+    }>;
+    /** CSS classes to apply to the default element */
+    className?: string;
+    /** Label for the button */
+    label?: string;
+}
+/**
+ * Reset trigger component for clearing all applied filters.
+ * Provides reset functionality and filter state to custom render functions.
+ * Only renders when filters are applied.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <ProductList.FilterResetTrigger className="reset-filters-btn" />
+ *
+ * // With custom label
+ * <ProductList.FilterResetTrigger label="Clear Filters" />
+ *
+ * // Custom rendering with forwardRef
+ * <ProductList.FilterResetTrigger asChild>
+ *   {React.forwardRef(({resetFilters, isFiltered, ...props}, ref) => (
+ *     <button
+ *       ref={ref}
+ *       {...props}
+ *       onClick={resetFilters}
+ *       disabled={!isFiltered}
+ *       className="custom-reset-button disabled:opacity-50"
+ *     >
+ *       Reset All Filters
+ *     </button>
+ *   ))}
+ * </ProductList.FilterResetTrigger>
+ * ```
+ */
+export declare const FilterResetTrigger: React.ForwardRefExoticComponent<FilterResetTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Props for ProductList Error component
+ */
+export interface ErrorProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Custom render function when using asChild */
+    children?: AsChildChildren<{
+        error: string | null;
+    }>;
+    /** CSS classes to apply to the default element */
+    className?: string;
+}
+/**
+ * Error component that displays product list errors.
+ * Provides error data to custom render functions.
+ * Only renders when there's an error.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <ProductList.Error className="error-message" />
+ *
+ * // Custom rendering with forwardRef
+ * <ProductList.Error asChild>
+ *   {React.forwardRef(({error, ...props}, ref) => (
+ *     <div
+ *       ref={ref}
+ *       {...props}
+ *       className="custom-error-container"
+ *     >
+ *       Error: {error}
+ *     </div>
+ *   ))}
+ * </ProductList.Error>
+ * ```
+ */
+export declare const Error: React.ForwardRefExoticComponent<ErrorProps & React.RefAttributes<HTMLElement>>;

package/cjs/dist/react/ProductList.js

@@ -6,9 +6,9 @@ import { ProductsListServiceDefinition } from '../services/products-list-service
 import * as CoreProductList from './core/ProductList.js';
 import * as CoreProductListPagination from './core/ProductListPagination.js';
 import { ProductListSort as ProductListSortPrimitive } from './core/ProductListSort.js';
+import * as CoreProductListFilters from './core/ProductListFilters.js';
 import * as Product from './Product.js';
 import { AsChildSlot } from '@wix/headless-utils/react';
-export { Filter, ResetTrigger as FilterResetTrigger, } from './core/ProductListFilters.js';
 var TestIds;
 (function (TestIds) {
     TestIds["productListRoot"] = "product-list-root";
@@ -17,6 +17,9 @@ var TestIds;
     TestIds["productListLoadMore"] = "product-list-load-more";
     TestIds["productListTotalsDisplayed"] = "product-list-totals-displayed";
     TestIds["productListSort"] = "product-list-sort";
+    TestIds["productListFilter"] = "product-list-filter";
+    TestIds["productListFilterResetTrigger"] = "product-list-filter-reset-trigger";
+    TestIds["productListError"] = "product-list-error";
 })(TestIds || (TestIds = {}));
 /**
  * Root component that provides the ProductList service context for rendering product lists.
@@ -266,3 +269,122 @@ export const Sort = React.forwardRef(({ children, className, as, asChild }, ref)
                 }, sortOptions: sortOptions, as: as, className: className, "data-testid": TestIds.productListSort }));
         } }));
 });
+/**
+ * Filter component that provides comprehensive filtering functionality for product lists.
+ * This component acts as a provider that integrates with the ProductList service.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <ProductList.Filter.Root className="filter-container">
+ *   <Filter.FilterOptions>
+ *     <Filter.FilterOptionRepeater>
+ *       <Filter.FilterOption.Label />
+ *       <Filter.FilterOption.MultiFilter />
+ *     </Filter.FilterOptionRepeater>
+ *   </Filter.FilterOptions>
+ * </ProductList.Filter.Root>
+ *
+ * // With custom container using asChild
+ * <ProductList.Filter.Root asChild>
+ *   <aside className="filter-sidebar">
+ *     <Filter.FilterOptions>
+ *       <Filter.FilterOptionRepeater>
+ *         <Filter.FilterOption.Label />
+ *         <Filter.FilterOption.MultiFilter />
+ *       </Filter.FilterOptionRepeater>
+ *     </Filter.FilterOptions>
+ *   </aside>
+ * </ProductList.Filter.Root>
+ * ```
+ */
+const FilterRoot = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    return (_jsx(CoreProductListFilters.FilterRoot, { asChild: asChild, className: className, children: _jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productListFilter, customElement: children, children: _jsx("div", { children: children }) }) }));
+});
+FilterRoot.displayName = 'ProductList.Filter';
+export const Filter = {
+    Root: FilterRoot,
+};
+/**
+ * Reset trigger component for clearing all applied filters.
+ * Provides reset functionality and filter state to custom render functions.
+ * Only renders when filters are applied.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <ProductList.FilterResetTrigger className="reset-filters-btn" />
+ *
+ * // With custom label
+ * <ProductList.FilterResetTrigger label="Clear Filters" />
+ *
+ * // Custom rendering with forwardRef
+ * <ProductList.FilterResetTrigger asChild>
+ *   {React.forwardRef(({resetFilters, isFiltered, ...props}, ref) => (
+ *     <button
+ *       ref={ref}
+ *       {...props}
+ *       onClick={resetFilters}
+ *       disabled={!isFiltered}
+ *       className="custom-reset-button disabled:opacity-50"
+ *     >
+ *       Reset All Filters
+ *     </button>
+ *   ))}
+ * </ProductList.FilterResetTrigger>
+ * ```
+ */
+export const FilterResetTrigger = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    const label = props.label || 'Reset All Filters';
+    return (_jsx(CoreProductListFilters.ResetTrigger, { children: ({ resetFilters, isFiltered }) => {
+            if (!isFiltered) {
+                return null;
+            }
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, onClick: resetFilters, disabled: !isFiltered, "data-testid": TestIds.productListFilterResetTrigger, "data-filtered": isFiltered ? 'true' : 'false', customElement: children, customElementProps: {
+                    resetFilters,
+                    isFiltered,
+                }, content: label, children: _jsx("button", { disabled: !isFiltered, children: label }) }));
+        } }));
+});
+FilterResetTrigger.displayName = 'ProductList.FilterResetTrigger';
+/**
+ * Error component that displays product list errors.
+ * Provides error data to custom render functions.
+ * Only renders when there's an error.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <ProductList.Error className="error-message" />
+ *
+ * // Custom rendering with forwardRef
+ * <ProductList.Error asChild>
+ *   {React.forwardRef(({error, ...props}, ref) => (
+ *     <div
+ *       ref={ref}
+ *       {...props}
+ *       className="custom-error-container"
+ *     >
+ *       Error: {error}
+ *     </div>
+ *   ))}
+ * </ProductList.Error>
+ * ```
+ */
+export const Error = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    return (_jsx(CoreProductList.Error, { children: ({ error }) => {
+            if (!error) {
+                return null;
+            }
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productListError, "data-error": error, customElement: children, customElementProps: {
+                    error,
+                }, content: error, children: _jsx("div", { className: "text-status-error text-sm sm:text-base", children: error }) }));
+        } }));
+});
+Error.displayName = 'ProductList.Error';

package/cjs/dist/react/core/ProductListFilters.d.ts

@@ -135,4 +135,4 @@ export interface FilterProps {
  * @see {@link FilterPrimitive.Root} for the primitive filter component
  * @see {@link ResetTrigger} for filter reset functionality
  */
-export declare const Filter: React.ForwardRefExoticComponent<FilterProps & React.RefAttributes<HTMLDivElement>>;
+export declare const FilterRoot: React.ForwardRefExoticComponent<FilterProps & React.RefAttributes<HTMLDivElement>>;

package/cjs/dist/react/core/ProductListFilters.js

@@ -233,10 +233,10 @@ function AllFilters(props) {
  * @see {@link FilterPrimitive.Root} for the primitive filter component
  * @see {@link ResetTrigger} for filter reset functionality
  */
-export const Filter = React.forwardRef(({ children, className, asChild }, ref) => {
+export const FilterRoot = React.forwardRef(({ children, className, asChild }, ref) => {
     const Comp = asChild ? Slot : 'div';
     return (_jsx(AllFilters, { children: ({ searchFilter }) => {
             return (_jsx(FilterPrimitive.Root, { value: searchFilter.filterValue, onChange: searchFilter.updateFilter, filterOptions: searchFilter.filterOptions, children: _jsx(Comp, { className: className, ref: ref, children: children }) }));
         } }));
 });
-Filter.displayName = 'ProductList.Filter';
+FilterRoot.displayName = 'ProductList.Filter';

package/cjs/dist/react/core/SelectedVariant.js

@@ -3,7 +3,7 @@ import { useService, WixServices } from '@wix/services-manager-react';
 import { SelectedVariantServiceDefinition, SelectedVariantService, } from '../../services/selected-variant-service.js';
 import { ProductModifiersServiceDefinition } from '../../services/product-modifiers-service.js';
 import { createServicesMap } from '@wix/services-manager';
-import { CheckoutCore } from '@wix/headless-ecom/react';
+import { Commerce } from '@wix/headless-ecom/react';
 import { CheckoutServiceDefinition, CurrentCartServiceDefinition, } from '@wix/headless-ecom/services';
 /**
  * Root component that provides the SelectedVariant service context to its children.
@@ -255,7 +255,7 @@ export function Actions(props) {
         error,
     };
     if (checkoutService) {
-        return (_jsx(CheckoutCore.Trigger, { children: ({ createCheckout, isLoading: checkoutLoading, error: checkoutError, }) => props.children({
+        return (_jsx(Commerce.CheckoutTrigger, { children: ({ createCheckout, isLoading: checkoutLoading, error: checkoutError, }) => props.children({
                 ...commonProps,
                 isLoading: isLoading || checkoutLoading,
                 error: error || checkoutError,

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

@@ -1,10 +1,3 @@
-export * as CategoryListCore from './core/CategoryList.js';
-export * as ProductCore from './core/Product.js';
-export * as ProductModifiers from './core/ProductModifiers.js';
-export * as ProductListCore from './core/ProductList.js';
-export * as ProductListPagination from './core/ProductListPagination.js';
-export * as ProductVariantSelector from './core/ProductVariantSelector.js';
-export * as SelectedVariant from './core/SelectedVariant.js';
 export * as Product from './Product.js';
 export * as ProductList from './ProductList.js';
 export * as Option from './Option.js';

package/cjs/dist/react/index.js

@@ -1,10 +1,3 @@
-export * as CategoryListCore from './core/CategoryList.js';
-export * as ProductCore from './core/Product.js';
-export * as ProductModifiers from './core/ProductModifiers.js';
-export * as ProductListCore from './core/ProductList.js';
-export * as ProductListPagination from './core/ProductListPagination.js';
-export * as ProductVariantSelector from './core/ProductVariantSelector.js';
-export * as SelectedVariant from './core/SelectedVariant.js';
 export * as Product from './Product.js';
 export * as ProductList from './ProductList.js';
 export * as Option from './Option.js';

package/dist/react/Category.d.ts

@@ -71,6 +71,22 @@ export interface CategoryRawProps {
     /** CSS classes to apply to the default element */
     className?: string;
 }
+/**
+ * Props for CategoryFilter component
+ */
+export interface CategoryFilterProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Custom render function when using asChild */
+    children?: AsChildChildren<{
+        selectedCategory: Category | null;
+        setSelectedCategory: (category: Category | null) => void;
+    }>;
+    /** CSS classes to apply to the default element */
+    className?: string;
+    /** Label for the selected category display */
+    label?: string;
+}
 /**
  * Root container for a single category item.
  * This component sets up the necessary services for managing category state
@@ -195,3 +211,32 @@ export declare const ID: React.ForwardRefExoticComponent<CategoryIDProps & React
  * ```
  */
 export declare const Raw: React.ForwardRefExoticComponent<CategoryRawProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Category filter component that provides category selection functionality.
+ * Provides selected category state and selection controls to custom render functions.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <CategoryFilter className="category-filter" />
+ *
+ * // With custom label
+ * <CategoryFilter label="Current Category:" />
+ *
+ * // Custom rendering with forwardRef
+ * <CategoryFilter asChild>
+ *   {React.forwardRef(({selectedCategory, setSelectedCategory, ...props}, ref) => (
+ *     <div ref={ref} {...props} className="custom-category-filter">
+ *       {selectedCategory && (
+ *         <span>Selected: {selectedCategory.name}</span>
+ *       )}
+ *       <button onClick={() => setSelectedCategory(null)}>
+ *         Clear Selection
+ *       </button>
+ *     </div>
+ *   ))}
+ * </CategoryFilter>
+ * ```
+ */
+export declare const CategoryFilter: React.ForwardRefExoticComponent<CategoryFilterProps & React.RefAttributes<HTMLElement>>;

package/dist/react/Category.js

@@ -1,7 +1,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { AsChildSlot } from '@wix/headless-utils/react';
-import { CategoryFilter, } from './core/ProductListFilters.js';
+import * as CoreProductListFilters from './core/ProductListFilters.js';
 const CategoryContext = React.createContext(null);
 function useCategoryContext() {
     const context = React.useContext(CategoryContext);
@@ -17,6 +17,7 @@ var TestIds;
     TestIds["categoryLabel"] = "category-label";
     TestIds["categoryId"] = "category-id";
     TestIds["categoryRaw"] = "category-raw";
+    TestIds["categoryFilter"] = "category-filter";
 })(TestIds || (TestIds = {}));
 /**
  * Root container for a single category item.
@@ -38,7 +39,7 @@ var TestIds;
  */
 export function Root(props) {
     const { category, children } = props;
-    return (_jsx(CategoryFilter, { children: ({ selectedCategory, setSelectedCategory }) => {
+    return (_jsx(CoreProductListFilters.CategoryFilter, { children: ({ selectedCategory, setSelectedCategory }) => {
             // Determine if this category is selected by comparing with selectedCategory
             const isSelected = selectedCategory?._id === category._id;
             const contextValue = {
@@ -190,3 +191,42 @@ export const Raw = React.forwardRef((props, ref) => {
     const { category, isSelected } = useCategoryContext();
     return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className || 'sr-only', "data-testid": TestIds.categoryRaw, "data-selected": isSelected ? 'true' : 'false', customElement: children, customElementProps: { category, isSelected }, children: _jsx("span", { children: JSON.stringify(category) }) }));
 });
+/**
+ * Category filter component that provides category selection functionality.
+ * Provides selected category state and selection controls to custom render functions.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <CategoryFilter className="category-filter" />
+ *
+ * // With custom label
+ * <CategoryFilter label="Current Category:" />
+ *
+ * // Custom rendering with forwardRef
+ * <CategoryFilter asChild>
+ *   {React.forwardRef(({selectedCategory, setSelectedCategory, ...props}, ref) => (
+ *     <div ref={ref} {...props} className="custom-category-filter">
+ *       {selectedCategory && (
+ *         <span>Selected: {selectedCategory.name}</span>
+ *       )}
+ *       <button onClick={() => setSelectedCategory(null)}>
+ *         Clear Selection
+ *       </button>
+ *     </div>
+ *   ))}
+ * </CategoryFilter>
+ * ```
+ */
+export const CategoryFilter = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    const label = props.label || 'Selected:';
+    return (_jsx(CoreProductListFilters.CategoryFilter, { children: ({ selectedCategory, setSelectedCategory }) => {
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.categoryFilter, "data-selected": selectedCategory ? 'true' : 'false', customElement: children, customElementProps: {
+                    selectedCategory,
+                    setSelectedCategory,
+                }, children: _jsx("div", { children: selectedCategory && (_jsxs("span", { children: [label, " ", selectedCategory.name] })) }) }));
+        } }));
+});
+CategoryFilter.displayName = 'CategoryFilter';

package/dist/react/ProductList.d.ts

@@ -4,7 +4,6 @@ import React from 'react';
 import type { ProductsListServiceConfig } from '../services/products-list-service.js';
 import { productsV3 } from '@wix/stores';
 import { AsChildChildren } from '@wix/headless-utils/react';
-export { Filter, ResetTrigger as FilterResetTrigger, } from './core/ProductListFilters.js';
 /**
  * Props for the ProductList root component following the documented API
  */
@@ -284,3 +283,103 @@ export interface SortProps {
  * @see {@link SortPrimitive.Root} for the primitive sort component
  */
 export declare const Sort: React.ForwardRefExoticComponent<SortProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for ProductList Filter component
+ */
+export interface FilterProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Child components that will have access to filter functionality */
+    children: React.ReactNode;
+    /** CSS classes to apply to the default element */
+    className?: string;
+}
+export declare const Filter: {
+    Root: React.ForwardRefExoticComponent<FilterProps & React.RefAttributes<HTMLElement>>;
+};
+/**
+ * Props for ProductList FilterResetTrigger component
+ */
+export interface FilterResetTriggerProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Custom render function when using asChild */
+    children?: AsChildChildren<{
+        resetFilters: () => void;
+        isFiltered: boolean;
+    }>;
+    /** CSS classes to apply to the default element */
+    className?: string;
+    /** Label for the button */
+    label?: string;
+}
+/**
+ * Reset trigger component for clearing all applied filters.
+ * Provides reset functionality and filter state to custom render functions.
+ * Only renders when filters are applied.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <ProductList.FilterResetTrigger className="reset-filters-btn" />
+ *
+ * // With custom label
+ * <ProductList.FilterResetTrigger label="Clear Filters" />
+ *
+ * // Custom rendering with forwardRef
+ * <ProductList.FilterResetTrigger asChild>
+ *   {React.forwardRef(({resetFilters, isFiltered, ...props}, ref) => (
+ *     <button
+ *       ref={ref}
+ *       {...props}
+ *       onClick={resetFilters}
+ *       disabled={!isFiltered}
+ *       className="custom-reset-button disabled:opacity-50"
+ *     >
+ *       Reset All Filters
+ *     </button>
+ *   ))}
+ * </ProductList.FilterResetTrigger>
+ * ```
+ */
+export declare const FilterResetTrigger: React.ForwardRefExoticComponent<FilterResetTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Props for ProductList Error component
+ */
+export interface ErrorProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Custom render function when using asChild */
+    children?: AsChildChildren<{
+        error: string | null;
+    }>;
+    /** CSS classes to apply to the default element */
+    className?: string;
+}
+/**
+ * Error component that displays product list errors.
+ * Provides error data to custom render functions.
+ * Only renders when there's an error.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <ProductList.Error className="error-message" />
+ *
+ * // Custom rendering with forwardRef
+ * <ProductList.Error asChild>
+ *   {React.forwardRef(({error, ...props}, ref) => (
+ *     <div
+ *       ref={ref}
+ *       {...props}
+ *       className="custom-error-container"
+ *     >
+ *       Error: {error}
+ *     </div>
+ *   ))}
+ * </ProductList.Error>
+ * ```
+ */
+export declare const Error: React.ForwardRefExoticComponent<ErrorProps & React.RefAttributes<HTMLElement>>;

package/dist/react/ProductList.js

@@ -6,9 +6,9 @@ import { ProductsListServiceDefinition } from '../services/products-list-service
 import * as CoreProductList from './core/ProductList.js';
 import * as CoreProductListPagination from './core/ProductListPagination.js';
 import { ProductListSort as ProductListSortPrimitive } from './core/ProductListSort.js';
+import * as CoreProductListFilters from './core/ProductListFilters.js';
 import * as Product from './Product.js';
 import { AsChildSlot } from '@wix/headless-utils/react';
-export { Filter, ResetTrigger as FilterResetTrigger, } from './core/ProductListFilters.js';
 var TestIds;
 (function (TestIds) {
     TestIds["productListRoot"] = "product-list-root";
@@ -17,6 +17,9 @@ var TestIds;
     TestIds["productListLoadMore"] = "product-list-load-more";
     TestIds["productListTotalsDisplayed"] = "product-list-totals-displayed";
     TestIds["productListSort"] = "product-list-sort";
+    TestIds["productListFilter"] = "product-list-filter";
+    TestIds["productListFilterResetTrigger"] = "product-list-filter-reset-trigger";
+    TestIds["productListError"] = "product-list-error";
 })(TestIds || (TestIds = {}));
 /**
  * Root component that provides the ProductList service context for rendering product lists.
@@ -266,3 +269,122 @@ export const Sort = React.forwardRef(({ children, className, as, asChild }, ref)
                 }, sortOptions: sortOptions, as: as, className: className, "data-testid": TestIds.productListSort }));
         } }));
 });
+/**
+ * Filter component that provides comprehensive filtering functionality for product lists.
+ * This component acts as a provider that integrates with the ProductList service.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <ProductList.Filter.Root className="filter-container">
+ *   <Filter.FilterOptions>
+ *     <Filter.FilterOptionRepeater>
+ *       <Filter.FilterOption.Label />
+ *       <Filter.FilterOption.MultiFilter />
+ *     </Filter.FilterOptionRepeater>
+ *   </Filter.FilterOptions>
+ * </ProductList.Filter.Root>
+ *
+ * // With custom container using asChild
+ * <ProductList.Filter.Root asChild>
+ *   <aside className="filter-sidebar">
+ *     <Filter.FilterOptions>
+ *       <Filter.FilterOptionRepeater>
+ *         <Filter.FilterOption.Label />
+ *         <Filter.FilterOption.MultiFilter />
+ *       </Filter.FilterOptionRepeater>
+ *     </Filter.FilterOptions>
+ *   </aside>
+ * </ProductList.Filter.Root>
+ * ```
+ */
+const FilterRoot = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    return (_jsx(CoreProductListFilters.FilterRoot, { asChild: asChild, className: className, children: _jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productListFilter, customElement: children, children: _jsx("div", { children: children }) }) }));
+});
+FilterRoot.displayName = 'ProductList.Filter';
+export const Filter = {
+    Root: FilterRoot,
+};
+/**
+ * Reset trigger component for clearing all applied filters.
+ * Provides reset functionality and filter state to custom render functions.
+ * Only renders when filters are applied.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <ProductList.FilterResetTrigger className="reset-filters-btn" />
+ *
+ * // With custom label
+ * <ProductList.FilterResetTrigger label="Clear Filters" />
+ *
+ * // Custom rendering with forwardRef
+ * <ProductList.FilterResetTrigger asChild>
+ *   {React.forwardRef(({resetFilters, isFiltered, ...props}, ref) => (
+ *     <button
+ *       ref={ref}
+ *       {...props}
+ *       onClick={resetFilters}
+ *       disabled={!isFiltered}
+ *       className="custom-reset-button disabled:opacity-50"
+ *     >
+ *       Reset All Filters
+ *     </button>
+ *   ))}
+ * </ProductList.FilterResetTrigger>
+ * ```
+ */
+export const FilterResetTrigger = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    const label = props.label || 'Reset All Filters';
+    return (_jsx(CoreProductListFilters.ResetTrigger, { children: ({ resetFilters, isFiltered }) => {
+            if (!isFiltered) {
+                return null;
+            }
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, onClick: resetFilters, disabled: !isFiltered, "data-testid": TestIds.productListFilterResetTrigger, "data-filtered": isFiltered ? 'true' : 'false', customElement: children, customElementProps: {
+                    resetFilters,
+                    isFiltered,
+                }, content: label, children: _jsx("button", { disabled: !isFiltered, children: label }) }));
+        } }));
+});
+FilterResetTrigger.displayName = 'ProductList.FilterResetTrigger';
+/**
+ * Error component that displays product list errors.
+ * Provides error data to custom render functions.
+ * Only renders when there's an error.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <ProductList.Error className="error-message" />
+ *
+ * // Custom rendering with forwardRef
+ * <ProductList.Error asChild>
+ *   {React.forwardRef(({error, ...props}, ref) => (
+ *     <div
+ *       ref={ref}
+ *       {...props}
+ *       className="custom-error-container"
+ *     >
+ *       Error: {error}
+ *     </div>
+ *   ))}
+ * </ProductList.Error>
+ * ```
+ */
+export const Error = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    return (_jsx(CoreProductList.Error, { children: ({ error }) => {
+            if (!error) {
+                return null;
+            }
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productListError, "data-error": error, customElement: children, customElementProps: {
+                    error,
+                }, content: error, children: _jsx("div", { className: "text-status-error text-sm sm:text-base", children: error }) }));
+        } }));
+});
+Error.displayName = 'ProductList.Error';

package/dist/react/core/ProductListFilters.d.ts

@@ -135,4 +135,4 @@ export interface FilterProps {
  * @see {@link FilterPrimitive.Root} for the primitive filter component
  * @see {@link ResetTrigger} for filter reset functionality
  */
-export declare const Filter: React.ForwardRefExoticComponent<FilterProps & React.RefAttributes<HTMLDivElement>>;
+export declare const FilterRoot: React.ForwardRefExoticComponent<FilterProps & React.RefAttributes<HTMLDivElement>>;

package/dist/react/core/ProductListFilters.js

@@ -233,10 +233,10 @@ function AllFilters(props) {
  * @see {@link FilterPrimitive.Root} for the primitive filter component
  * @see {@link ResetTrigger} for filter reset functionality
  */
-export const Filter = React.forwardRef(({ children, className, asChild }, ref) => {
+export const FilterRoot = React.forwardRef(({ children, className, asChild }, ref) => {
     const Comp = asChild ? Slot : 'div';
     return (_jsx(AllFilters, { children: ({ searchFilter }) => {
             return (_jsx(FilterPrimitive.Root, { value: searchFilter.filterValue, onChange: searchFilter.updateFilter, filterOptions: searchFilter.filterOptions, children: _jsx(Comp, { className: className, ref: ref, children: children }) }));
         } }));
 });
-Filter.displayName = 'ProductList.Filter';
+FilterRoot.displayName = 'ProductList.Filter';

package/dist/react/core/SelectedVariant.js

@@ -3,7 +3,7 @@ import { useService, WixServices } from '@wix/services-manager-react';
 import { SelectedVariantServiceDefinition, SelectedVariantService, } from '../../services/selected-variant-service.js';
 import { ProductModifiersServiceDefinition } from '../../services/product-modifiers-service.js';
 import { createServicesMap } from '@wix/services-manager';
-import { CheckoutCore } from '@wix/headless-ecom/react';
+import { Commerce } from '@wix/headless-ecom/react';
 import { CheckoutServiceDefinition, CurrentCartServiceDefinition, } from '@wix/headless-ecom/services';
 /**
  * Root component that provides the SelectedVariant service context to its children.
@@ -255,7 +255,7 @@ export function Actions(props) {
         error,
     };
     if (checkoutService) {
-        return (_jsx(CheckoutCore.Trigger, { children: ({ createCheckout, isLoading: checkoutLoading, error: checkoutError, }) => props.children({
+        return (_jsx(Commerce.CheckoutTrigger, { children: ({ createCheckout, isLoading: checkoutLoading, error: checkoutError, }) => props.children({
                 ...commonProps,
                 isLoading: isLoading || checkoutLoading,
                 error: error || checkoutError,

package/dist/react/index.d.ts

@@ -1,10 +1,3 @@
-export * as CategoryListCore from './core/CategoryList.js';
-export * as ProductCore from './core/Product.js';
-export * as ProductModifiers from './core/ProductModifiers.js';
-export * as ProductListCore from './core/ProductList.js';
-export * as ProductListPagination from './core/ProductListPagination.js';
-export * as ProductVariantSelector from './core/ProductVariantSelector.js';
-export * as SelectedVariant from './core/SelectedVariant.js';
 export * as Product from './Product.js';
 export * as ProductList from './ProductList.js';
 export * as Option from './Option.js';

package/dist/react/index.js

@@ -1,10 +1,3 @@
-export * as CategoryListCore from './core/CategoryList.js';
-export * as ProductCore from './core/Product.js';
-export * as ProductModifiers from './core/ProductModifiers.js';
-export * as ProductListCore from './core/ProductList.js';
-export * as ProductListPagination from './core/ProductListPagination.js';
-export * as ProductVariantSelector from './core/ProductVariantSelector.js';
-export * as SelectedVariant from './core/SelectedVariant.js';
 export * as Product from './Product.js';
 export * as ProductList from './ProductList.js';
 export * as Option from './Option.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/headless-stores",
-  "version": "0.0.81",
+  "version": "0.0.83",
   "type": "module",
   "scripts": {
     "prebuild": "cd ../media && yarn build && cd ../ecom && yarn build",
@@ -63,7 +63,7 @@
     "@wix/ecom": "^1.0.1278",
     "@wix/essentials": "^0.1.24",
     "@wix/headless-components": "0.0.12",
-    "@wix/headless-ecom": "0.0.25",
+    "@wix/headless-ecom": "0.0.26",
     "@wix/headless-media": "0.0.11",
     "@wix/headless-utils": "0.0.3",
     "@wix/redirects": "^1.0.83",