@wix/headless-stores 0.0.80 → 0.0.82

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/Product.d.ts

@@ -833,6 +833,20 @@ export interface ProductQuantityRawSubComponentProps {
  * ```
  */
 export declare const ProductQuantityRaw: React.ForwardRefExoticComponent<ProductQuantityRawSubComponentProps & React.RefAttributes<HTMLElement>>;
+export interface ProductVariantSelectorResetProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Custom render function when using asChild */
+    children?: AsChildChildren<{
+        reset: () => void;
+        hasSelections: boolean;
+    }>;
+    /** CSS classes to apply to the default element */
+    className?: string;
+    /** Label for the reset button */
+    label?: string;
+}
+export declare const ProductVariantSelectorReset: React.ForwardRefExoticComponent<ProductVariantSelectorResetProps & React.RefAttributes<HTMLButtonElement>>;
 /**
  * Add to cart action button component following the documented API.
  * Automatically integrates with the selected variant and handles loading states.

package/cjs/dist/react/Product.js

@@ -46,6 +46,7 @@ var TestIds;
     TestIds["productStock"] = "product-stock";
     TestIds["productVariants"] = "product-variants";
     TestIds["productVariantOptions"] = "product-variant-options";
+    TestIds["productVariantSelectorReset"] = "product-variant-selector-reset";
     TestIds["productVariantOption"] = "product-variant-option";
     TestIds["productVariant"] = "product-variant";
     TestIds["productVariantSku"] = "product-variant-sku";
@@ -859,6 +860,16 @@ export const ProductQuantityRaw = React.forwardRef((props, ref) => {
             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) => {
+            if (!renderProps.hasSelections) {
+                return null;
+            }
+            const label = props.label || 'Reset Selections';
+            return (_jsx(AsChildSlot, { ref: ref, customElement: children, asChild: asChild, className: className, "data-testid": TestIds.productVariantSelectorReset, customElementProps: renderProps, children: _jsx("button", { onClick: renderProps.reset, children: label }) }));
+        } }));
+});
 /**
  * Add to cart action button component following the documented API.
  * Automatically integrates with the selected variant and handles loading states.

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,64 @@ 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>>;

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,8 @@ 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 || (TestIds = {}));
 /**
  * Root component that provides the ProductList service context for rendering product lists.
@@ -266,3 +268,85 @@ 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';

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/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/Product.d.ts

@@ -833,6 +833,20 @@ export interface ProductQuantityRawSubComponentProps {
  * ```
  */
 export declare const ProductQuantityRaw: React.ForwardRefExoticComponent<ProductQuantityRawSubComponentProps & React.RefAttributes<HTMLElement>>;
+export interface ProductVariantSelectorResetProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Custom render function when using asChild */
+    children?: AsChildChildren<{
+        reset: () => void;
+        hasSelections: boolean;
+    }>;
+    /** CSS classes to apply to the default element */
+    className?: string;
+    /** Label for the reset button */
+    label?: string;
+}
+export declare const ProductVariantSelectorReset: React.ForwardRefExoticComponent<ProductVariantSelectorResetProps & React.RefAttributes<HTMLButtonElement>>;
 /**
  * Add to cart action button component following the documented API.
  * Automatically integrates with the selected variant and handles loading states.

package/dist/react/Product.js

@@ -46,6 +46,7 @@ var TestIds;
     TestIds["productStock"] = "product-stock";
     TestIds["productVariants"] = "product-variants";
     TestIds["productVariantOptions"] = "product-variant-options";
+    TestIds["productVariantSelectorReset"] = "product-variant-selector-reset";
     TestIds["productVariantOption"] = "product-variant-option";
     TestIds["productVariant"] = "product-variant";
     TestIds["productVariantSku"] = "product-variant-sku";
@@ -859,6 +860,16 @@ export const ProductQuantityRaw = React.forwardRef((props, ref) => {
             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) => {
+            if (!renderProps.hasSelections) {
+                return null;
+            }
+            const label = props.label || 'Reset Selections';
+            return (_jsx(AsChildSlot, { ref: ref, customElement: children, asChild: asChild, className: className, "data-testid": TestIds.productVariantSelectorReset, customElementProps: renderProps, children: _jsx("button", { onClick: renderProps.reset, children: label }) }));
+        } }));
+});
 /**
  * Add to cart action button component following the documented API.
  * Automatically integrates with the selected variant and handles loading states.

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,64 @@ 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>>;

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,8 @@ 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 || (TestIds = {}));
 /**
  * Root component that provides the ProductList service context for rendering product lists.
@@ -266,3 +268,85 @@ 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';

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/package.json

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