@wix/headless-stores 0.0.62 → 0.0.64

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { type AsChildProps } from '../utils/index.js';
+import { AsChildChildren } from '@wix/headless-utils/react';
 /**
  * Choice data interface
  */
@@ -67,10 +67,16 @@ export declare const Root: React.ForwardRefExoticComponent<RootProps & React.Ref
 /**
  * Props for Choice Text component
  */
-export interface TextProps extends AsChildProps<{
-    id: string;
-    value: string;
-}> {
+export interface TextProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Custom render function when using asChild */
+    children?: AsChildChildren<{
+        id: string;
+        value: string;
+    }>;
+    /** CSS classes to apply to the default element */
+    className?: string;
 }
 /**
  * Text-based choice button.
@@ -105,11 +111,17 @@ export declare const Text: React.ForwardRefExoticComponent<TextProps & React.Ref
 /**
  * Props for Choice Color component
  */
-export interface ColorProps extends AsChildProps<{
-    colorCode: string;
-    name: string;
-    id: string;
-}> {
+export interface ColorProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Custom render function when using asChild */
+    children?: AsChildChildren<{
+        colorCode: string;
+        name: string;
+        id: string;
+    }>;
+    /** CSS classes to apply to the default element */
+    className?: string;
 }
 /**
  * Color swatch choice.
@@ -148,14 +160,20 @@ export declare const Color: React.ForwardRefExoticComponent<ColorProps & React.R
 /**
  * Props for Choice FreeText component
  */
-export interface FreeTextProps extends AsChildProps<{
-    minCharCount?: number;
-    maxCharCount?: number;
-    defaultAddedPrice?: string | null;
-    title?: string;
-    value?: string;
-    onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
-}>, Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'children'> {
+export interface FreeTextProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'children'> {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Custom render function when using asChild */
+    children?: AsChildChildren<{
+        minCharCount?: number;
+        maxCharCount?: number;
+        defaultAddedPrice?: string | null;
+        title?: string;
+        value?: string;
+        onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    }>;
+    /** CSS classes to apply to the default element */
+    className?: string;
 }
 /**
  * Provides a free text input for variant selection.

package/cjs/dist/react/Choice.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import { renderAsChild } from '../utils/index.js';
 import { FreeText as FreeTextPrimitive } from './core/ProductModifiers.js';
+import { AsChildSlot } from '@wix/headless-utils/react';
 var TestIds;
 (function (TestIds) {
     TestIds["choiceRoot"] = "choice-root";
@@ -91,24 +91,7 @@ export const Text = React.forwardRef((props, ref) => {
     if (!isVisible)
         return null;
     const choiceId = choice?.choiceId || '';
-    const attributes = {
-        'data-testid': TestIds.choiceText,
-        'data-selected': isSelected ? 'true' : 'false',
-        disabled: !isInStock && !isPreOrderEnabled,
-        onClick: select,
-    };
-    if (asChild) {
-        const rendered = renderAsChild({
-            children,
-            props: { id: choiceId, value },
-            ref,
-            content: value,
-            attributes,
-        });
-        if (rendered)
-            return rendered;
-    }
-    return (_jsx("button", { className: className, ...attributes, ref: ref, children: value }));
+    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.choiceText, "data-selected": isSelected ? 'true' : 'false', disabled: !isInStock && !isPreOrderEnabled, onClick: select, customElement: children, customElementProps: { id: choiceId, value }, content: value, children: _jsx("button", { children: value }) }));
 });
 /**
  * Color swatch choice.
@@ -157,28 +140,11 @@ export const Color = React.forwardRef((props, ref) => {
     if (!isVisible)
         return null;
     const { colorCode, choiceId } = choice;
-    const attributes = {
-        'data-testid': TestIds.choiceColor,
-        'data-selected': isSelected ? 'true' : 'false',
-        disabled: !isInStock && !isPreOrderEnabled,
-        onClick: select,
-    };
-    if (asChild) {
-        const rendered = renderAsChild({
-            children,
-            props: {
-                colorCode: colorCode || '',
-                name: value,
-                id: choiceId || '',
-            },
-            ref,
-            content: null,
-            attributes,
-        });
-        if (rendered)
-            return rendered;
-    }
-    return (_jsx("button", { className: className, ...attributes, ref: ref, style: { backgroundColor: colorCode }, title: value }));
+    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.choiceColor, "data-selected": isSelected ? 'true' : 'false', disabled: !isInStock && !isPreOrderEnabled, onClick: select, customElement: children, customElementProps: {
+            colorCode: colorCode || '',
+            name: value,
+            id: choiceId || '',
+        }, children: _jsx("button", { style: { backgroundColor: colorCode }, title: value }) }));
 });
 /**
  * Provides a free text input for variant selection.
@@ -226,10 +192,6 @@ export const FreeText = React.forwardRef((props, ref) => {
     // Don't render if not visible (handled by ProductVariantSelector in Root)
     if (!isVisible)
         return null;
-    const attributes = {
-        'data-testid': TestIds.choiceFreetext,
-        'data-selected': isSelected ? 'true' : 'false',
-    };
     return (_jsx(FreeTextPrimitive, { modifier: choice, children: ({ value, setText, placeholder, maxChars }) => {
             const handleChange = (e) => {
                 setText(e.target.value);
@@ -237,23 +199,12 @@ export const FreeText = React.forwardRef((props, ref) => {
                     onValueChange(e.target.value);
                 }
             };
-            if (asChild) {
-                const rendered = renderAsChild({
-                    children,
-                    props: {
-                        minCharCount: choice?.minCharCount,
-                        maxCharCount: choice?.maxCharCount,
-                        defaultAddedPrice: choice?.addedPrice || undefined,
-                        title: choice?.name || undefined,
-                        onChange: handleChange,
-                    },
-                    ref,
-                    content: null,
-                    attributes,
-                });
-                if (rendered)
-                    return rendered;
-            }
-            return (_jsx("textarea", { ref: ref, className: className, placeholder: placeholder, rows: 3, value: value, maxLength: maxChars, ...attributes, onChange: handleChange }));
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.choiceFreetext, "data-selected": isSelected ? 'true' : 'false', customElement: children, customElementProps: {
+                    minCharCount: choice?.minCharCount,
+                    maxCharCount: choice?.maxCharCount,
+                    defaultAddedPrice: choice?.addedPrice || undefined,
+                    title: choice?.name || undefined,
+                    onChange: handleChange,
+                }, children: _jsx("textarea", { placeholder: placeholder, rows: 3, value: value, maxLength: maxChars, onChange: handleChange }) }));
         } }));
 });

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { type AsChildProps } from '../utils/index.js';
+import { AsChildChildren } from '@wix/headless-utils/react';
 export interface Option {
     name: string;
     choices?: any[];
@@ -10,11 +10,17 @@ export interface Option {
 /**
  * Root props with asChild support
  */
-export interface RootProps extends AsChildProps<{
-    option: Option;
-    onValueChange?: (value: string) => void;
-    allowedTypes?: ('color' | 'text' | 'free-text')[];
-}> {
+export interface RootProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Custom render function when using asChild */
+    children?: AsChildChildren<{
+        option: Option;
+        onValueChange?: (value: string) => void;
+        allowedTypes?: ('color' | 'text' | 'free-text')[];
+    }>;
+    /** CSS classes to apply to the default element */
+    className?: string;
     option: Option;
     onValueChange?: (value: string) => void;
     allowedTypes?: ('color' | 'text' | 'free-text')[];
@@ -105,9 +111,15 @@ export declare const OptionContext: React.Context<any>;
 /**
  * Props for Option Name component
  */
-export interface NameProps extends AsChildProps<{
-    name: string;
-}> {
+export interface NameProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Custom render function when using asChild */
+    children?: AsChildChildren<{
+        name: string;
+    }>;
+    /** CSS classes to apply to the default element */
+    className?: string;
 }
 /**
  * Displays the option name.
@@ -136,9 +148,15 @@ export declare const Name: React.ForwardRefExoticComponent<NameProps & React.Ref
 /**
  * Props for Option MandatoryIndicator component
  */
-export interface MandatoryIndicatorProps extends AsChildProps<{
-    mandatory: boolean;
-}> {
+export interface MandatoryIndicatorProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Custom render function when using asChild */
+    children?: AsChildChildren<{
+        mandatory: boolean;
+    }>;
+    /** CSS classes to apply to the default element */
+    className?: string;
 }
 /**
  * Displays the mandatory indicator (asterisk) when the option is required.

package/cjs/dist/react/Option.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import React from 'react';
-import { renderAsChild } from '../utils/index.js';
 import * as Choice from './Choice.js';
 import * as ProductModifiersPrimitive from './core/ProductModifiers.js';
 import * as ProductVariantSelectorPrimitive from './core/ProductVariantSelector.js';
+import { AsChildSlot } from '@wix/headless-utils/react';
 var TestIds;
 (function (TestIds) {
     TestIds["optionRoot"] = "option-root";
@@ -93,7 +93,7 @@ var TestIds;
  * ```
  */
 export const Root = React.forwardRef((props, ref) => {
-    const { asChild, children, option, onValueChange, allowedTypes } = props;
+    const { asChild, children, option, onValueChange, allowedTypes, className } = props;
     // Determine the option type based on the option name and available choices
     const getOptionType = () => {
         if (option.type === 'FREE_TEXT') {
@@ -113,23 +113,7 @@ export const Root = React.forwardRef((props, ref) => {
         allowedTypes,
         mandatory: option?.mandatory || false,
     };
-    const attributes = {
-        'data-testid': TestIds.optionRoot,
-        'data-type': optionType,
-    };
-    const content = (_jsx(OptionContext.Provider, { value: contextValue, children: typeof children === 'function' ? null : children }));
-    if (asChild) {
-        const rendered = renderAsChild({
-            children,
-            props: { option, onValueChange, allowedTypes },
-            ref,
-            content,
-            attributes,
-        });
-        if (rendered)
-            return rendered;
-    }
-    return (_jsx("div", { ...attributes, ref: ref, children: content }));
+    return (_jsx(OptionContext.Provider, { value: contextValue, children: _jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.optionRoot, "data-type": optionType, customElement: children, customElementProps: { option, onValueChange, allowedTypes }, children: _jsx("div", { children: React.isValidElement(children) ? children : null }) }) }));
 });
 // Create a context to pass option data down
 export const OptionContext = React.createContext(null);
@@ -162,21 +146,7 @@ export const Name = React.forwardRef((props, ref) => {
     if (!optionData)
         return null;
     const name = optionData.name || '';
-    const attributes = {
-        'data-testid': TestIds.optionName,
-    };
-    if (asChild) {
-        const rendered = renderAsChild({
-            children,
-            props: { name },
-            ref,
-            content: name,
-            attributes,
-        });
-        if (rendered)
-            return rendered;
-    }
-    return (_jsx("div", { className: className, ...attributes, ref: ref, children: name }));
+    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.optionName, customElement: children, customElementProps: { name }, content: name, children: _jsx("div", { children: name }) }));
 });
 /**
  * Displays the mandatory indicator (asterisk) when the option is required.
@@ -205,21 +175,7 @@ export const MandatoryIndicator = React.forwardRef((props, ref) => {
     // Don't render anything if not mandatory
     if (!mandatory)
         return null;
-    const attributes = {
-        'data-testid': TestIds.optionMandatoryIndicator,
-    };
-    if (asChild) {
-        const rendered = renderAsChild({
-            children,
-            props: { mandatory },
-            ref,
-            content: '*',
-            attributes,
-        });
-        if (rendered)
-            return rendered;
-    }
-    return (_jsx("span", { className: className, ...attributes, ref: ref, children: "*" }));
+    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.optionMandatoryIndicator, customElement: children, customElementProps: { mandatory }, content: '*', children: _jsx("span", { children: "*" }) }));
 });
 /**
  * Container for the list items with empty state support.

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

@@ -289,9 +289,9 @@ export interface RibbonProps {
     /** Whether to render as a child component */
     asChild?: boolean;
     /** Custom render function when using asChild */
-    children?: React.ReactNode | React.ForwardRefRenderFunction<HTMLElement, {
+    children?: AsChildChildren<{
         ribbon: string | null;
-    }> | React.ForwardRefExoticComponent<any>;
+    }>;
     /** CSS classes to apply to the default element */
     className?: string;
 }
@@ -327,10 +327,10 @@ export interface StockProps {
     /** Whether to render as a child component */
     asChild?: boolean;
     /** Custom render function when using asChild */
-    children?: React.ReactNode | React.ForwardRefRenderFunction<HTMLElement, {
+    children?: AsChildChildren<{
         status: 'in-stock' | 'limited-stock' | 'out-of-stock';
         label: string;
-    }> | React.ForwardRefExoticComponent<any>;
+    }>;
     /** CSS classes to apply to the default element */
     className?: string;
     /** Custom labels for different stock states */

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

@@ -52,6 +52,10 @@ function buildSearchFilterData(availableOptions, availableInventoryStatuses, ava
                     ? name.toLowerCase()
                     : name;
             },
+            valueBgColorFormatter: (value) => {
+                const choice = option.choices.find((c) => c.id === value);
+                return choice?.colorCode || null;
+            },
         })),
         // Inventory status - use actual search field name
         {

package/cjs/dist/services/products-list-service.js

@@ -323,15 +323,7 @@ export const ProductListService = implementService.withConfig()(ProductsListServ
             }
             try {
                 isLoadingSignal.set(true);
-                const affectiveSearchOptions = searchOptions.cursorPaging?.cursor
-                    ? {
-                        cursorPaging: {
-                            cursor: searchOptions.cursorPaging.cursor,
-                            limit: searchOptions.cursorPaging.limit,
-                        },
-                    }
-                    : searchOptions;
-                const result = await fetchProducts(affectiveSearchOptions);
+                const result = await fetchProducts(searchOptions);
                 productsSignal.set(result.products ?? []);
                 pagingMetadataSignal.set(result.pagingMetadata);
             }
@@ -344,6 +336,29 @@ export const ProductListService = implementService.withConfig()(ProductsListServ
         });
     }
     firstRun = false;
+    const loadMoreCursor = async (count) => {
+        const affectiveSearchOptions = {
+            cursorPaging: {
+                cursor: pagingMetadataSignal.get().cursors?.next,
+                limit: DEFAULT_QUERY_LIMIT || count,
+            },
+        };
+        try {
+            isLoadingSignal.set(true);
+            const result = await fetchProducts(affectiveSearchOptions);
+            productsSignal.set([
+                ...productsSignal.get(),
+                ...(result.products ?? []),
+            ]);
+            pagingMetadataSignal.set(result.pagingMetadata);
+        }
+        catch (error) {
+            errorSignal.set(error instanceof Error ? error.message : 'Unknown error');
+        }
+        finally {
+            isLoadingSignal.set(false);
+        }
+    };
     return {
         products: productsSignal,
         searchOptions: searchOptionsSignal,
@@ -391,14 +406,7 @@ export const ProductListService = implementService.withConfig()(ProductsListServ
         isLoading: isLoadingSignal,
         error: errorSignal,
         loadMore: (count) => {
-            const currentOptions = searchOptionsSignal.peek();
-            searchOptionsSignal.set({
-                ...currentOptions,
-                cursorPaging: {
-                    cursor: pagingMetadataSignal.get().cursors?.next,
-                    limit: currentOptions.cursorPaging?.limit ?? 0 + count,
-                },
-            });
+            loadMoreCursor(count);
         },
         hasMoreProducts: signalsService.computed(() => pagingMetadataSignal.get().hasNext ?? false),
     };

package/dist/react/Choice.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { type AsChildProps } from '../utils/index.js';
+import { AsChildChildren } from '@wix/headless-utils/react';
 /**
  * Choice data interface
  */
@@ -67,10 +67,16 @@ export declare const Root: React.ForwardRefExoticComponent<RootProps & React.Ref
 /**
  * Props for Choice Text component
  */
-export interface TextProps extends AsChildProps<{
-    id: string;
-    value: string;
-}> {
+export interface TextProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Custom render function when using asChild */
+    children?: AsChildChildren<{
+        id: string;
+        value: string;
+    }>;
+    /** CSS classes to apply to the default element */
+    className?: string;
 }
 /**
  * Text-based choice button.
@@ -105,11 +111,17 @@ export declare const Text: React.ForwardRefExoticComponent<TextProps & React.Ref
 /**
  * Props for Choice Color component
  */
-export interface ColorProps extends AsChildProps<{
-    colorCode: string;
-    name: string;
-    id: string;
-}> {
+export interface ColorProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Custom render function when using asChild */
+    children?: AsChildChildren<{
+        colorCode: string;
+        name: string;
+        id: string;
+    }>;
+    /** CSS classes to apply to the default element */
+    className?: string;
 }
 /**
  * Color swatch choice.
@@ -148,14 +160,20 @@ export declare const Color: React.ForwardRefExoticComponent<ColorProps & React.R
 /**
  * Props for Choice FreeText component
  */
-export interface FreeTextProps extends AsChildProps<{
-    minCharCount?: number;
-    maxCharCount?: number;
-    defaultAddedPrice?: string | null;
-    title?: string;
-    value?: string;
-    onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
-}>, Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'children'> {
+export interface FreeTextProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'children'> {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Custom render function when using asChild */
+    children?: AsChildChildren<{
+        minCharCount?: number;
+        maxCharCount?: number;
+        defaultAddedPrice?: string | null;
+        title?: string;
+        value?: string;
+        onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    }>;
+    /** CSS classes to apply to the default element */
+    className?: string;
 }
 /**
  * Provides a free text input for variant selection.

package/dist/react/Choice.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import { renderAsChild } from '../utils/index.js';
 import { FreeText as FreeTextPrimitive } from './core/ProductModifiers.js';
+import { AsChildSlot } from '@wix/headless-utils/react';
 var TestIds;
 (function (TestIds) {
     TestIds["choiceRoot"] = "choice-root";
@@ -91,24 +91,7 @@ export const Text = React.forwardRef((props, ref) => {
     if (!isVisible)
         return null;
     const choiceId = choice?.choiceId || '';
-    const attributes = {
-        'data-testid': TestIds.choiceText,
-        'data-selected': isSelected ? 'true' : 'false',
-        disabled: !isInStock && !isPreOrderEnabled,
-        onClick: select,
-    };
-    if (asChild) {
-        const rendered = renderAsChild({
-            children,
-            props: { id: choiceId, value },
-            ref,
-            content: value,
-            attributes,
-        });
-        if (rendered)
-            return rendered;
-    }
-    return (_jsx("button", { className: className, ...attributes, ref: ref, children: value }));
+    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.choiceText, "data-selected": isSelected ? 'true' : 'false', disabled: !isInStock && !isPreOrderEnabled, onClick: select, customElement: children, customElementProps: { id: choiceId, value }, content: value, children: _jsx("button", { children: value }) }));
 });
 /**
  * Color swatch choice.
@@ -157,28 +140,11 @@ export const Color = React.forwardRef((props, ref) => {
     if (!isVisible)
         return null;
     const { colorCode, choiceId } = choice;
-    const attributes = {
-        'data-testid': TestIds.choiceColor,
-        'data-selected': isSelected ? 'true' : 'false',
-        disabled: !isInStock && !isPreOrderEnabled,
-        onClick: select,
-    };
-    if (asChild) {
-        const rendered = renderAsChild({
-            children,
-            props: {
-                colorCode: colorCode || '',
-                name: value,
-                id: choiceId || '',
-            },
-            ref,
-            content: null,
-            attributes,
-        });
-        if (rendered)
-            return rendered;
-    }
-    return (_jsx("button", { className: className, ...attributes, ref: ref, style: { backgroundColor: colorCode }, title: value }));
+    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.choiceColor, "data-selected": isSelected ? 'true' : 'false', disabled: !isInStock && !isPreOrderEnabled, onClick: select, customElement: children, customElementProps: {
+            colorCode: colorCode || '',
+            name: value,
+            id: choiceId || '',
+        }, children: _jsx("button", { style: { backgroundColor: colorCode }, title: value }) }));
 });
 /**
  * Provides a free text input for variant selection.
@@ -226,10 +192,6 @@ export const FreeText = React.forwardRef((props, ref) => {
     // Don't render if not visible (handled by ProductVariantSelector in Root)
     if (!isVisible)
         return null;
-    const attributes = {
-        'data-testid': TestIds.choiceFreetext,
-        'data-selected': isSelected ? 'true' : 'false',
-    };
     return (_jsx(FreeTextPrimitive, { modifier: choice, children: ({ value, setText, placeholder, maxChars }) => {
             const handleChange = (e) => {
                 setText(e.target.value);
@@ -237,23 +199,12 @@ export const FreeText = React.forwardRef((props, ref) => {
                     onValueChange(e.target.value);
                 }
             };
-            if (asChild) {
-                const rendered = renderAsChild({
-                    children,
-                    props: {
-                        minCharCount: choice?.minCharCount,
-                        maxCharCount: choice?.maxCharCount,
-                        defaultAddedPrice: choice?.addedPrice || undefined,
-                        title: choice?.name || undefined,
-                        onChange: handleChange,
-                    },
-                    ref,
-                    content: null,
-                    attributes,
-                });
-                if (rendered)
-                    return rendered;
-            }
-            return (_jsx("textarea", { ref: ref, className: className, placeholder: placeholder, rows: 3, value: value, maxLength: maxChars, ...attributes, onChange: handleChange }));
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.choiceFreetext, "data-selected": isSelected ? 'true' : 'false', customElement: children, customElementProps: {
+                    minCharCount: choice?.minCharCount,
+                    maxCharCount: choice?.maxCharCount,
+                    defaultAddedPrice: choice?.addedPrice || undefined,
+                    title: choice?.name || undefined,
+                    onChange: handleChange,
+                }, children: _jsx("textarea", { placeholder: placeholder, rows: 3, value: value, maxLength: maxChars, onChange: handleChange }) }));
         } }));
 });

package/dist/react/Option.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { type AsChildProps } from '../utils/index.js';
+import { AsChildChildren } from '@wix/headless-utils/react';
 export interface Option {
     name: string;
     choices?: any[];
@@ -10,11 +10,17 @@ export interface Option {
 /**
  * Root props with asChild support
  */
-export interface RootProps extends AsChildProps<{
-    option: Option;
-    onValueChange?: (value: string) => void;
-    allowedTypes?: ('color' | 'text' | 'free-text')[];
-}> {
+export interface RootProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Custom render function when using asChild */
+    children?: AsChildChildren<{
+        option: Option;
+        onValueChange?: (value: string) => void;
+        allowedTypes?: ('color' | 'text' | 'free-text')[];
+    }>;
+    /** CSS classes to apply to the default element */
+    className?: string;
     option: Option;
     onValueChange?: (value: string) => void;
     allowedTypes?: ('color' | 'text' | 'free-text')[];
@@ -105,9 +111,15 @@ export declare const OptionContext: React.Context<any>;
 /**
  * Props for Option Name component
  */
-export interface NameProps extends AsChildProps<{
-    name: string;
-}> {
+export interface NameProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Custom render function when using asChild */
+    children?: AsChildChildren<{
+        name: string;
+    }>;
+    /** CSS classes to apply to the default element */
+    className?: string;
 }
 /**
  * Displays the option name.
@@ -136,9 +148,15 @@ export declare const Name: React.ForwardRefExoticComponent<NameProps & React.Ref
 /**
  * Props for Option MandatoryIndicator component
  */
-export interface MandatoryIndicatorProps extends AsChildProps<{
-    mandatory: boolean;
-}> {
+export interface MandatoryIndicatorProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Custom render function when using asChild */
+    children?: AsChildChildren<{
+        mandatory: boolean;
+    }>;
+    /** CSS classes to apply to the default element */
+    className?: string;
 }
 /**
  * Displays the mandatory indicator (asterisk) when the option is required.

package/dist/react/Option.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import React from 'react';
-import { renderAsChild } from '../utils/index.js';
 import * as Choice from './Choice.js';
 import * as ProductModifiersPrimitive from './core/ProductModifiers.js';
 import * as ProductVariantSelectorPrimitive from './core/ProductVariantSelector.js';
+import { AsChildSlot } from '@wix/headless-utils/react';
 var TestIds;
 (function (TestIds) {
     TestIds["optionRoot"] = "option-root";
@@ -93,7 +93,7 @@ var TestIds;
  * ```
  */
 export const Root = React.forwardRef((props, ref) => {
-    const { asChild, children, option, onValueChange, allowedTypes } = props;
+    const { asChild, children, option, onValueChange, allowedTypes, className } = props;
     // Determine the option type based on the option name and available choices
     const getOptionType = () => {
         if (option.type === 'FREE_TEXT') {
@@ -113,23 +113,7 @@ export const Root = React.forwardRef((props, ref) => {
         allowedTypes,
         mandatory: option?.mandatory || false,
     };
-    const attributes = {
-        'data-testid': TestIds.optionRoot,
-        'data-type': optionType,
-    };
-    const content = (_jsx(OptionContext.Provider, { value: contextValue, children: typeof children === 'function' ? null : children }));
-    if (asChild) {
-        const rendered = renderAsChild({
-            children,
-            props: { option, onValueChange, allowedTypes },
-            ref,
-            content,
-            attributes,
-        });
-        if (rendered)
-            return rendered;
-    }
-    return (_jsx("div", { ...attributes, ref: ref, children: content }));
+    return (_jsx(OptionContext.Provider, { value: contextValue, children: _jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.optionRoot, "data-type": optionType, customElement: children, customElementProps: { option, onValueChange, allowedTypes }, children: _jsx("div", { children: React.isValidElement(children) ? children : null }) }) }));
 });
 // Create a context to pass option data down
 export const OptionContext = React.createContext(null);
@@ -162,21 +146,7 @@ export const Name = React.forwardRef((props, ref) => {
     if (!optionData)
         return null;
     const name = optionData.name || '';
-    const attributes = {
-        'data-testid': TestIds.optionName,
-    };
-    if (asChild) {
-        const rendered = renderAsChild({
-            children,
-            props: { name },
-            ref,
-            content: name,
-            attributes,
-        });
-        if (rendered)
-            return rendered;
-    }
-    return (_jsx("div", { className: className, ...attributes, ref: ref, children: name }));
+    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.optionName, customElement: children, customElementProps: { name }, content: name, children: _jsx("div", { children: name }) }));
 });
 /**
  * Displays the mandatory indicator (asterisk) when the option is required.
@@ -205,21 +175,7 @@ export const MandatoryIndicator = React.forwardRef((props, ref) => {
     // Don't render anything if not mandatory
     if (!mandatory)
         return null;
-    const attributes = {
-        'data-testid': TestIds.optionMandatoryIndicator,
-    };
-    if (asChild) {
-        const rendered = renderAsChild({
-            children,
-            props: { mandatory },
-            ref,
-            content: '*',
-            attributes,
-        });
-        if (rendered)
-            return rendered;
-    }
-    return (_jsx("span", { className: className, ...attributes, ref: ref, children: "*" }));
+    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.optionMandatoryIndicator, customElement: children, customElementProps: { mandatory }, content: '*', children: _jsx("span", { children: "*" }) }));
 });
 /**
  * Container for the list items with empty state support.

package/dist/react/Product.d.ts

@@ -289,9 +289,9 @@ export interface RibbonProps {
     /** Whether to render as a child component */
     asChild?: boolean;
     /** Custom render function when using asChild */
-    children?: React.ReactNode | React.ForwardRefRenderFunction<HTMLElement, {
+    children?: AsChildChildren<{
         ribbon: string | null;
-    }> | React.ForwardRefExoticComponent<any>;
+    }>;
     /** CSS classes to apply to the default element */
     className?: string;
 }
@@ -327,10 +327,10 @@ export interface StockProps {
     /** Whether to render as a child component */
     asChild?: boolean;
     /** Custom render function when using asChild */
-    children?: React.ReactNode | React.ForwardRefRenderFunction<HTMLElement, {
+    children?: AsChildChildren<{
         status: 'in-stock' | 'limited-stock' | 'out-of-stock';
         label: string;
-    }> | React.ForwardRefExoticComponent<any>;
+    }>;
     /** CSS classes to apply to the default element */
     className?: string;
     /** Custom labels for different stock states */

package/dist/react/core/ProductListFilters.js

@@ -52,6 +52,10 @@ function buildSearchFilterData(availableOptions, availableInventoryStatuses, ava
                     ? name.toLowerCase()
                     : name;
             },
+            valueBgColorFormatter: (value) => {
+                const choice = option.choices.find((c) => c.id === value);
+                return choice?.colorCode || null;
+            },
         })),
         // Inventory status - use actual search field name
         {

package/dist/services/products-list-service.js

@@ -323,15 +323,7 @@ export const ProductListService = implementService.withConfig()(ProductsListServ
             }
             try {
                 isLoadingSignal.set(true);
-                const affectiveSearchOptions = searchOptions.cursorPaging?.cursor
-                    ? {
-                        cursorPaging: {
-                            cursor: searchOptions.cursorPaging.cursor,
-                            limit: searchOptions.cursorPaging.limit,
-                        },
-                    }
-                    : searchOptions;
-                const result = await fetchProducts(affectiveSearchOptions);
+                const result = await fetchProducts(searchOptions);
                 productsSignal.set(result.products ?? []);
                 pagingMetadataSignal.set(result.pagingMetadata);
             }
@@ -344,6 +336,29 @@ export const ProductListService = implementService.withConfig()(ProductsListServ
         });
     }
     firstRun = false;
+    const loadMoreCursor = async (count) => {
+        const affectiveSearchOptions = {
+            cursorPaging: {
+                cursor: pagingMetadataSignal.get().cursors?.next,
+                limit: DEFAULT_QUERY_LIMIT || count,
+            },
+        };
+        try {
+            isLoadingSignal.set(true);
+            const result = await fetchProducts(affectiveSearchOptions);
+            productsSignal.set([
+                ...productsSignal.get(),
+                ...(result.products ?? []),
+            ]);
+            pagingMetadataSignal.set(result.pagingMetadata);
+        }
+        catch (error) {
+            errorSignal.set(error instanceof Error ? error.message : 'Unknown error');
+        }
+        finally {
+            isLoadingSignal.set(false);
+        }
+    };
     return {
         products: productsSignal,
         searchOptions: searchOptionsSignal,
@@ -391,14 +406,7 @@ export const ProductListService = implementService.withConfig()(ProductsListServ
         isLoading: isLoadingSignal,
         error: errorSignal,
         loadMore: (count) => {
-            const currentOptions = searchOptionsSignal.peek();
-            searchOptionsSignal.set({
-                ...currentOptions,
-                cursorPaging: {
-                    cursor: pagingMetadataSignal.get().cursors?.next,
-                    limit: currentOptions.cursorPaging?.limit ?? 0 + count,
-                },
-            });
+            loadMoreCursor(count);
         },
         hasMoreProducts: signalsService.computed(() => pagingMetadataSignal.get().hasNext ?? false),
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/headless-stores",
-  "version": "0.0.62",
+  "version": "0.0.64",
   "type": "module",
   "scripts": {
     "prebuild": "cd ../media && yarn build && cd ../ecom && yarn build",
@@ -62,10 +62,10 @@
     "@wix/auto_sdk_stores_read-only-variants-v-3": "^1.0.23",
     "@wix/ecom": "^1.0.1278",
     "@wix/essentials": "^0.1.24",
-    "@wix/headless-components": "0.0.3",
-    "@wix/headless-ecom": "0.0.17",
-    "@wix/headless-media": "^0.0.11",
-    "@wix/headless-utils": "^0.0.2",
+    "@wix/headless-components": "workspace:*",
+    "@wix/headless-ecom": "workspace:*",
+    "@wix/headless-media": "workspace:*",
+    "@wix/headless-utils": "workspace:*",
     "@wix/redirects": "^1.0.83",
     "@wix/services-definitions": "^0.1.4",
     "@wix/services-manager-react": "^0.1.26"