import { Sort as SortPrimitive, GenericListTotalsRenderProps, GenericListLoadMoreRenderProps, ListVariant, GenericListRepeaterRenderProps } from '@wix/headless-components/react';
import React from 'react';
import type { ProductsListServiceConfig } from '../services/products-list-service.js';
import { productsV3 } from '@wix/stores';
import { AsChildChildren } from '@wix/headless-utils/react';
/**
 * Props for the `ProductList.Root` component.
 */
export interface ProductListRootProps {
    /**
     * Child components to render within the product list context.
     *
     * Use `ProductList.Products`, `ProductList.Sort`, `ProductList.TotalsDisplayed`,
     * `ProductList.LoadMoreTrigger`, and other ProductList components to build the list UI.
     */
    children: React.ReactNode;
    /**
     * A specific products array to use for this component.
     *
     * Use this when you want to specify which products to show. For example, to display featured products only.
     * When using this prop, loading states, pagination, filtering, and sorting aren't available.
     * To show products from the site with these features, use `productsListConfig` instead.
     */
    products?: productsV3.V3Product[];
    /**
     * Configuration object for the products list service.
     *
     * Obtained by calling `loadProductsListServiceConfig()`, which fetches products from the site based on provided search options.
     * When provided, enables reactive updates, loading states, pagination, filtering, and sorting.
     */
    productsListConfig?: ProductsListServiceConfig;
    /**
     * CSS class name applied to the root container element.
     */
    className?: string;
    /**
     * Layout variant for the product list.
     *
     * Controls how items are displayed. For example, in a grid or list.
     */
    variant?: ListVariant;
}
/**
 * Root component that provides the ProductList service context for rendering product lists.
 *
 * Requires `productsListConfig` from `loadProductsListServiceConfig()`.
 *
 * ### Component hierarchy
 *
 * ```tsx
 * <ProductList.Root productsListConfig={productsListConfig}>
 *   <ProductList.Error />
 *   <ProductList.TotalsDisplayed />
 *   <ProductList.Sort />
 *   <ProductList.FilterResetTrigger />
 *   <ProductList.Products>
 *     <ProductList.ProductRepeater>  // Wraps children in Product.Root
 *       ...  // See Product hierarchy
 *     </ProductList.ProductRepeater>
 *   </ProductList.Products>
 *   <ProductList.LoadMoreTrigger />
 *   <ProductList.Raw />
 *     ...  // See CategoryList hierarchy
 * </ProductList.Root>
 * ```
 *
 * @order 1
 * @component
 * @example Basic usage with service config
 * ```tsx
 * // import { ProductList, Product } from '@wix/stores/components';
 * // import { loadProductsListServiceConfig } from '@wix/headless-stores/services';
 * //
 * // Call loadProductsListServiceConfig() to obtain a productsListConfig
 *
 * // Default styling
 * <ProductList.Root productsListConfig={yourProductsListConfig}>
 *   <ProductList.Products>
 *     <ProductList.ProductRepeater>
 *       <Product.Name />
 *       <Product.Price />
 *     </ProductList.ProductRepeater>
 *   </ProductList.Products>
 * </ProductList.Root>
 * ```
 *
 * @example Basic usage with products array
 * ```tsx
 * // import { ProductList, Product } from '@wix/stores/components';
 * //
 * // You must pass an array of products to the `products` prop
 *
 * // Default styling
 * <ProductList.Root products={yourProducts}>
 *   <ProductList.Products>
 *     <ProductList.ProductRepeater>
 *       <Product.Name />
 *       <Product.Price />
 *     </ProductList.ProductRepeater>
 *   </ProductList.Products>
 * </ProductList.Root>
 * ```
 *
 * @example With category filtering
 * ```tsx
 * // import { ProductList, Product, CategoryList, Category } from '@wix/stores/components';
 * // import { loadProductsListServiceConfig, loadCategoriesListServiceConfig } from '@wix/headless-stores/services';
 * //
 * // Call loadProductsListServiceConfig() and loadCategoriesListServiceConfig() to obtain configs
 *
 * // CategoryList inside ProductList.Root enables filtering products by category
 * <ProductList.Root productsListConfig={yourProductsListConfig}>
 *   <CategoryList.Root categoriesListConfig={yourCategoriesListConfig}>
 *     <CategoryList.Loading>Loading categories...</CategoryList.Loading>
 *     <CategoryList.CategoryRepeater>
 *       <Category.Trigger />
 *     </CategoryList.CategoryRepeater>
 *   </CategoryList.Root>
 *
 *   <ProductList.Products>
 *     <ProductList.ProductRepeater>
 *       <Product.Name />
 *       <Product.Price />
 *     </ProductList.ProductRepeater>
 *   </ProductList.Products>
 * </ProductList.Root>
 * ```
 */
export declare const Root: React.ForwardRefExoticComponent<ProductListRootProps & React.RefAttributes<HTMLElement>>;
/**
 * Props for the `ProductList.Raw` component.
 */
export interface RawProps {
    /**
     * Render function that receives product list data.
     *
     * Your function receives:
     * - `totalProducts` (`number`): Total number of products matching the current query.
     * - `displayedProducts` (`number`): Number of products currently displayed.
     * - `isFiltered` (`boolean`): Whether filters are currently applied.
     */
    children: ((props: {
        totalProducts: number;
        displayedProducts: number;
        isFiltered: boolean;
    }) => React.ReactNode) | React.ReactNode;
}
/**
 * Provides direct access to product list data via a render function.
 *
 * Use this for custom displays of list metadata (totals, filter status).
 *
 * @component
 * @example Basic usage
 * ```tsx
 * // import { ProductList } from '@wix/stores/components';
 * //
 * // ProductList.Raw must be wrapped in ProductList.Root
 *
 * // With render function
 * <ProductList.Raw>
 *   {({ totalProducts, displayedProducts, isFiltered }) => (
 *     <div className="your-raw-classname">
 *       Showing {displayedProducts} of {totalProducts} products
 *       {isFiltered && <span className="your-filtered-indicator-classname">(Filtered)</span>}
 *     </div>
 *   )}
 * </ProductList.Raw>
 * ```
 */
export declare const Raw: React.ForwardRefExoticComponent<RawProps & React.RefAttributes<HTMLElement>>;
/**
 * Props for the `ProductList.Products` component.
 */
export interface ProductsProps {
    /**
     * Child components to render within the products container.
     */
    children: React.ReactNode;
    /**
     * Content to display when no products are available.
     *
     * Only rendered when the product list is empty after loading completes.
     */
    emptyState?: React.ReactNode;
    /**
     * Whether to enable infinite scroll loading.
     *
     * Default: `true`
     */
    infiniteScroll?: boolean;
    /**
     * Number of products to display per page.
     *
     * Default: `100`
     */
    pageSize?: number;
    /**
     * CSS class name applied to the products container element.
     */
    className?: string;
}
/**
 * Container for the product list with empty state support.
 *
 * @component
 * @example Basic usage
 * ```tsx
 * // import { ProductList, Product } from '@wix/stores/components';
 * //
 * // ProductList.Products must be wrapped in ProductList.Root
 *
 * // Default styling
 * <ProductList.Products emptyState={<div>No products found</div>}>
 *   <ProductList.ProductRepeater>
 *     <Product.Name />
 *     <Product.Price />
 *   </ProductList.ProductRepeater>
 * </ProductList.Products>
 * ```
 */
export declare const Products: React.ForwardRefExoticComponent<ProductsProps & React.RefAttributes<HTMLElement>>;
/**
 * Render props for ProductRepeater asChild pattern.
 */
export type ProductRepeaterRenderProps = GenericListRepeaterRenderProps<productsV3.V3Product>;
/**
 * Props for the `ProductList.ProductRepeater` component.
 */
export interface ProductRepeaterProps {
    /**
     * Child components to render for each product.
     *
     * Children are automatically wrapped in `Product.Root`, so you can use
     * `Product.Root` child components directly.
     *
     * When using `asChild`, pass a React element, render function, or render object.
     *
     * **React element:**  This must be an element that can have children, such as <h1 /> or <span />. Your element receives the default element's props automatically.
     *
     * **Render function:** Your function receives:
     * - `items` (`productsV3.V3Product[]`): Array of products in the list.
     *   - `_id` (`string`): Unique product identifier.
     *   - `name` (`string`): Product name.
     *   - `slug` (`string`): URL-friendly product slug.
     *   - `description` (`string`): Product description.
     *   - `price` (`object`): Price information with `amount` and `currency`.
     *   - `media` (`object`): Product media with `mainMedia` and `items`.
     * - `variant` (`'grid' | 'list'`): The display variant.
     * - `itemWrapper` (`(props) => React.ReactNode`): Function to wrap each product item.
     */
    children: React.ReactNode | ((props: ProductRepeaterRenderProps, ref: React.Ref<HTMLElement>) => React.ReactNode);
    /**
     * When `true`, replaces the default wrapper with your custom element.
     *
     * Use this when you need a different element type or custom structure.
     * See the `children` prop for usage details.
     *
     * Default: `false`
     */
    asChild?: boolean;
}
/**
 * Repeater that renders children for each product in the list.
 *
 * These children are automatically wrapped in `Product.Root`, so you can use
 * `Product.Root` child components directly.
 *
 * @component
 * @example Standard usage
 * ```tsx
 * // import { ProductList, Product } from '@wix/stores/components';
 * //
 * // ProductList.ProductRepeater must be wrapped in ProductList.Products
 *
 * // Product.Root is provided automatically
 * <ProductList.ProductRepeater>
 *   <Product.Name />
 *   <Product.Price />
 * </ProductList.ProductRepeater>
 * ```
 *
 * @example Custom rendering with `asChild`
 * ```tsx
 * // import { ProductList, Product } from '@wix/stores/components';
 * //
 * // ProductList.ProductRepeater must be wrapped in ProductList.Products
 *
 * // asChild with render function
 * <ProductList.ProductRepeater asChild>
 *   {({ items, variant, itemWrapper }) => (
 *     <GalleryWrapper
 *       items={items}
 *       variant={variant}
 *       itemRenderer={(item, index) =>
 *         itemWrapper({ item, index, children: <>
 *           <Product.Name />
 *           <Product.Price />
 *         </> })
 *       }
 *     />
 *   )}
 * </ProductList.ProductRepeater>
 * ```
 */
export declare const ProductRepeater: React.ForwardRefExoticComponent<ProductRepeaterProps & React.RefAttributes<HTMLElement>>;
/**
 * Props for the `ProductList.LoadMoreTrigger` component.
 */
export interface LoadMoreTriggerProps {
    /**
     * When using `asChild`, pass a React element, render function, or render object.
     *
     * **React element:**  This must be an element that can have children, such as <h1 /> or <span />. Your element receives the default element's props automatically.
     *
     * **Render function:** Your function receives:
     * - `isLoading` (`boolean`): Whether more products are currently loading.
     * - `hasMore` (`boolean`): Whether there are more products to load.
     * - `loadMore` (`() => void`): Function to load the next page.
     */
    children?: React.ReactNode | React.ForwardRefRenderFunction<HTMLButtonElement, GenericListLoadMoreRenderProps>;
    /**
     * When `true`, replaces the default `<button>` with your custom element.
     *
     * Use this when you need a different element type or custom structure.
     * See the `children` prop for usage details.
     *
     * Default: `false`
     */
    asChild?: boolean;
    /**
     * CSS class name applied to the default element.
     */
    className?: string;
    /**
     * Text label displayed inside the button.
     *
     * Default: `"Load More"`
     */
    label?: string;
    /**
     * Content to display while loading more products.
     */
    loadingState?: React.ReactNode;
}
/**
 * Button to load more products.
 *
 * Not rendered when `infiniteScroll` is `false` or there are no more products to load.
 *
 * @component
 * @example Basic usage
 * ```tsx
 * // import { ProductList } from '@wix/stores/components';
 * //
 * // ProductList.LoadMoreTrigger must be wrapped in ProductList.Root
 *
 * // Default styling
 * <ProductList.LoadMoreTrigger />
 *
 * // Custom styling
 * <ProductList.LoadMoreTrigger className="your-button-classname" />
 * ```
 *
 * @example Custom rendering with `asChild`
 * ```tsx
 * // import { ProductList } from '@wix/stores/components';
 * //
 * // ProductList.LoadMoreTrigger must be wrapped in ProductList.Root
 *
 * // asChild with React element - Syntax demonstration for alternative element type
 * <ProductList.LoadMoreTrigger asChild>
 *   <a href="#load-more" className="your-button-classname">Load More</a>
 * </ProductList.LoadMoreTrigger>
 *
 * // asChild with render function - Shows loading state
 * <ProductList.LoadMoreTrigger asChild>
 *   {React.forwardRef(({ isLoading, hasMore, loadMore, ...props }, ref) => (
 *     <button ref={ref} {...props} onClick={loadMore} disabled={isLoading || !hasMore} className="your-button-classname">
 *       {isLoading ? 'Loading...' : 'Load More'}
 *     </button>
 *   ))}
 * </ProductList.LoadMoreTrigger>
 * ```
 */
export declare const LoadMoreTrigger: React.ForwardRefExoticComponent<LoadMoreTriggerProps & React.RefAttributes<HTMLButtonElement>>;
/**
 * Props for the `ProductList.TotalsDisplayed` component.
 */
export interface TotalsDisplayedProps {
    /**
     * When using `asChild`, pass a React element, render function, or render object.
     *
     * **React element:**  This must be an element that can have children, such as <h1 /> or <span />. Your element receives the default element's props automatically.
     *
     * **Render function:** Your function receives:
     * - `displayedItems` (`number`): The number of products currently displayed.
     *
     * **Render object:** You can use a render object in the form `{ render: (props, ref) => ReactNode }` as an alternative to a render function. Receives the same props as the function.
     */
    children?: AsChildChildren<GenericListTotalsRenderProps>;
    /**
     * When `true`, replaces the default `<span>` with your custom element.
     *
     * Use this when you need a different element type or custom structure.
     * See the `children` prop for usage details.
     *
     * Default: `false`
     */
    asChild?: boolean;
    /**
     * CSS class name applied to the default element.
     */
    className?: string;
}
/**
 * Displays the number of products currently shown.
 *
 * @component
 * @example Basic usage
 * ```tsx
 * // import { ProductList } from '@wix/stores/components';
 * //
 * // ProductList.TotalsDisplayed must be wrapped in ProductList.Root
 *
 * // Default styling
 * <ProductList.TotalsDisplayed />
 *
 * // Custom styling
 * <ProductList.TotalsDisplayed className="your-totals-classname" />
 * ```
 *
 * @example Custom rendering with `asChild`
 * ```tsx
 * // import { ProductList } from '@wix/stores/components';
 * //
 * // ProductList.TotalsDisplayed must be wrapped in ProductList.Root
 *
 * // asChild with React element - Syntax demonstration for alternative element type
 * <ProductList.TotalsDisplayed asChild>
 *   <strong className="your-totals-classname" />
 * </ProductList.TotalsDisplayed>
 *
 * // asChild with render function - Adds custom text formatting
 * <ProductList.TotalsDisplayed asChild>
 *   {React.forwardRef(({ displayedItems, ...props }, ref) => (
 *     <span ref={ref} {...props} className="your-totals-classname">
 *       Showing {displayedItems} products
 *     </span>
 *   ))}
 * </ProductList.TotalsDisplayed>
 *
 * // asChild with render object - Adds custom text formatting
 * <ProductList.TotalsDisplayed asChild>
 *   {{
 *     render: ({ displayedItems, ...props }, ref) => (
 *       <span ref={ref} {...props} className="your-totals-classname">
 *         Showing {displayedItems} products
 *       </span>
 *     )
 *   }}
 * </ProductList.TotalsDisplayed>
 * ```
 */
export declare const TotalsDisplayed: React.ForwardRefExoticComponent<TotalsDisplayedProps & React.RefAttributes<HTMLElement>>;
/**
 * Props for the `ProductList.Sort` component.
 */
export interface SortProps {
    /**
     * When using `asChild`, pass a React element, render function, or render object.
     *
     * **React element:**  This must be an element that can have children, such as <h1 /> or <span />. Your element receives the default element's props automatically.
     *
     * **Render function:** Your function receives:
     * - `currentSort` (`productsV3.V3ProductSearch['sort']`): Current sort configuration.
     * - `sortOptions` (`SortOption[]`): Available sort options.
     *   - `fieldName` (`string`): Field name to sort by.
     *   - `order` (`'ASC' | 'DESC'`): Sort order.
     *   - `label` (`string`): Display label for the option.
     * - `setSort` (`(sort) => void`): Function to update the sort configuration.
     *
     * @param props.currentSort - Current sort configuration from Wix Stores API
     * @param props.sortOptions - Available sort options with field names, order, and labels
     * @param props.setSort - Function to update the sort configuration
     */
    children?: (props: {
        currentSort: productsV3.V3ProductSearch['sort'];
        sortOptions: SortPrimitive.SortOption[];
        setSort: (sort: productsV3.V3ProductSearch['sort']) => void;
    }) => React.ReactNode;
    /**
     * When `true`, replaces the default `<select>` with your custom element.
     *
     * Use this when you need a different element type or custom structure.
     * See the `children` prop for usage details.
     *
     * Default: `false`
     */
    asChild?: boolean;
    /**
     * Render mode for the default sort component.
     *
     * - `'select'`: Renders as HTML `<select>` dropdown.
     * - `'list'`: Renders as clickable list of options.
     *
     * Default: `'select'`
     */
    as?: 'select' | 'list';
    /**
     * CSS class name applied to the default element.
     */
    className?: string;
}
/**
 * Sorting controls for the product list.
 *
 * Provides predefined sort options including name (A-Z, Z-A) and price
 * (low to high, high to low).
 *
 * @component
 * @example Basic usage
 * ```tsx
 * // import { ProductList } from '@wix/stores/components';
 * //
 * // ProductList.Sort must be wrapped in ProductList.Root
 *
 * // Default select dropdown
 * <ProductList.Sort />
 *
 * // As list of clickable options
 * <ProductList.Sort as="list" />
 *
 * // Custom styling
 * <ProductList.Sort className="your-sort-classname" />
 * ```
 *
 * @example Custom rendering with `asChild`
 * ```tsx
 * // import { ProductList } from '@wix/stores/components';
 * //
 * // ProductList.Sort must be wrapped in ProductList.Root
 *
 * // asChild with render function
 * <ProductList.Sort asChild>
 *   {({ currentSort, sortOptions, setSort }) => (
 *     <div className="your-sort-classname">
 *       {sortOptions.map((option) => (
 *         <button
 *           key={`${option.fieldName}-${option.order}`}
 *           onClick={() => setSort([{ fieldName: option.fieldName, order: option.order }])}
 *         >
 *           {option.label}
 *         </button>
 *       ))}
 *     </div>
 *   )}
 * </ProductList.Sort>
 * ```
 *
 * @see {@link ProductListSortPrimitive} for the underlying sort logic
 * @see {@link SortPrimitive.Root} for the primitive sort component
 */
export declare const Sort: React.ForwardRefExoticComponent<SortProps & React.RefAttributes<HTMLElement>>;
/**
 * Props for the `ProductList.Filter.Root` component.
 */
export interface FilterProps {
    /**
     * Child components to render within the filter container.
     */
    children: React.ReactNode;
    /**
     * When `true`, replaces the default `<div>` with your custom element.
     *
     * Use this when you need a different element type or custom structure.
     * See the `children` prop for usage details.
     *
     * Default: `false`
     */
    asChild?: boolean;
    /**
     * CSS class name applied to the default element.
     */
    className?: string;
}
export declare const Filter: {
    Root: React.ForwardRefExoticComponent<FilterProps & React.RefAttributes<HTMLElement>>;
};
/**
 * Props for the `ProductList.FilterResetTrigger` component.
 */
export interface FilterResetTriggerProps {
    /**
     * When `true`, replaces the default `<button>` with your custom element.
     *
     * Use this when you need a different element type or custom structure.
     * See the `children` prop for usage details.
     *
     * Default: `false`
     */
    asChild?: boolean;
    /**
     * When using `asChild`, pass a React element, render function, or render object.
     *
     * **React element:**  This must be an element that can have children, such as <h1 /> or <span />. Your element receives the default element's props automatically.
     *
     * **Render function:** Your function receives:
     * - `resetFilters` (`() => void`): Function to clear all applied filters.
     * - `isFiltered` (`boolean`): Whether any filters are currently applied.
     *
     * **Render object:** You can use a render object in the form `{ render: (props, ref) => ReactNode }` as an alternative to a render function. Receives the same props as the function.
     */
    children?: AsChildChildren<{
        resetFilters: () => void;
        isFiltered: boolean;
    }>;
    /**
     * CSS class name applied to the button element.
     *
     * The element has a `data-filtered` attribute with value `"true"` when
     * filters are applied, `"false"` otherwise. For conditional styling, target with `data-[filtered=true]:`
     * or `data-[filtered=false]:`.
     */
    className?: string;
    /**
     * Text label displayed inside the button.
     *
     * Default: `"Reset All Filters"`
     */
    label?: string;
}
/**
 * Button to clear all applied filters.
 *
 * Only renders when filters are currently applied.
 *
 * @component
 * @example Basic usage
 * ```tsx
 * // import { ProductList } from '@wix/stores/components';
 * //
 * // ProductList.FilterResetTrigger must be wrapped in ProductList.Root
 *
 * // Default styling
 * <ProductList.FilterResetTrigger />
 *
 * // Custom styling
 * <ProductList.FilterResetTrigger className="your-button-classname" />
 * ```
 *
 * @example With custom label
 * ```tsx
 * // import { ProductList } from '@wix/stores/components';
 * //
 * // ProductList.FilterResetTrigger must be wrapped in ProductList.Root
 *
 * // With label prop
 * <ProductList.FilterResetTrigger label="Clear Filters" />
 * ```
 *
 * @example Custom rendering with `asChild`
 * ```tsx
 * // import { ProductList } from '@wix/stores/components';
 * //
 * // ProductList.FilterResetTrigger must be wrapped in ProductList.Root
 *
 * // asChild with React element - Syntax demonstration for alternative element type
 * <ProductList.FilterResetTrigger asChild>
 *   <a href="#reset" className="your-button-classname" />
 * </ProductList.FilterResetTrigger>
 *
 * // asChild with render function - Disables button when no filters applied
 * <ProductList.FilterResetTrigger asChild>
 *   {React.forwardRef(({ resetFilters, isFiltered, ...props }, ref) => (
 *     <button
 *       ref={ref}
 *       {...props}
 *       onClick={resetFilters}
 *       disabled={!isFiltered}
 *       className="your-button-classname"
 *     >
 *       Reset All Filters
 *     </button>
 *   ))}
 * </ProductList.FilterResetTrigger>
 *
 * // asChild with render object - Disables button when no filters applied
 * <ProductList.FilterResetTrigger asChild>
 *   {{
 *     render: ({ resetFilters, isFiltered, ...props }, ref) => (
 *       <button
 *         ref={ref}
 *         {...props}
 *         onClick={resetFilters}
 *         disabled={!isFiltered}
 *         className="your-button-classname"
 *       >
 *         Reset All Filters
 *       </button>
 *     )
 *   }}
 * </ProductList.FilterResetTrigger>
 * ```
 */
export declare const FilterResetTrigger: React.ForwardRefExoticComponent<FilterResetTriggerProps & React.RefAttributes<HTMLButtonElement>>;
/**
 * Props for the `ProductList.Error` component.
 */
export interface ErrorProps {
    /**
     * When `true`, replaces the default `<div>` with your custom element.
     *
     * Use this when you need a different element type or custom structure.
     * See the `children` prop for usage details.
     *
     * Default: `false`
     */
    asChild?: boolean;
    /**
     * When using `asChild`, pass a React element, render function, or render object.
     *
     * **React element:**  This must be an element that can have children, such as <h1 /> or <span />. Your element receives the default element's props automatically.
     *
     * **Render function:** Your function receives:
     * - `error` (`string | null`): The error message, or `null` if no error.
     *
     * **Render object:** You can use a render object in the form `{ render: (props, ref) => ReactNode }` as an alternative to a render function. Receives the same props as the function.
     */
    children?: AsChildChildren<{
        error: string | null;
    }>;
    /**
     * CSS class name applied to the error container element.
     *
     * The element has a `data-error` attribute containing the error message.
     * To style when an error is present, target with `data-[error]:`.
     */
    className?: string;
}
/**
 * Displays product list errors.
 *
 * Only renders when there is an error.
 *
 * @component
 * @example Basic usage
 * ```tsx
 * // import { ProductList } from '@wix/stores/components';
 * //
 * // ProductList.Error must be wrapped in ProductList.Root
 *
 * // Default styling
 * <ProductList.Error />
 *
 * // Custom styling
 * <ProductList.Error className="your-error-classname" />
 * ```
 *
 * @example Custom rendering with `asChild`
 * ```tsx
 * // import { ProductList } from '@wix/stores/components';
 * //
 * // ProductList.Error must be wrapped in ProductList.Root
 *
 * // asChild with React element - Syntax demonstration for alternative element type
 * <ProductList.Error asChild>
 *   <section className="your-error-classname" />
 * </ProductList.Error>
 *
 * // asChild with render function - Adds error label
 * <ProductList.Error asChild>
 *   {React.forwardRef(({ error, ...props }, ref) => (
 *     <div ref={ref} {...props} className="your-error-classname">
 *       Error: {error}
 *     </div>
 *   ))}
 * </ProductList.Error>
 *
 * // asChild with render object - Adds error label
 * <ProductList.Error asChild>
 *   {{
 *     render: ({ error, ...props }, ref) => (
 *       <div ref={ref} {...props} className="your-error-classname">
 *         Error: {error}
 *       </div>
 *     )
 *   }}
 * </ProductList.Error>
 * ```
 */
export declare const Error: React.ForwardRefExoticComponent<ErrorProps & React.RefAttributes<HTMLElement>>;