/**
 * ServiceList - High-level component for displaying services list
 * Provides components for displaying services list with pagination
 */
import React from 'react';
import { ListVariant, GenericListLoadMoreRenderProps, type FilterRootProps } from '@wix/headless-components/react';
import { AsChildChildren } from '@wix/headless-utils/react';
import type { ServiceListServiceConfig } from '../../services/service-list/service-list.js';
import type { Service as ServiceType } from '@wix/auto_sdk_bookings_services';
export declare const TestIds: {
    readonly serviceListRoot: "service-list-root";
    readonly serviceListServices: "service-list-services";
    readonly serviceListService: "service-list-service";
    readonly serviceListLoadMore: "service-list-load-more";
    readonly serviceListFilter: "service-list-filter";
};
/**
 * Props for the ServiceList root component
 */
export interface ServiceListRootProps {
    children: React.ReactNode;
    serviceListConfig?: ServiceListServiceConfig;
    className?: string;
    variant?: ListVariant;
}
/**
 * Root component that provides the ServiceList service context for rendering services lists.
 *
 * @order 1
 * @component
 * @example
 * ```tsx
 * import { ServiceList } from '@wix/bookings/components';
 *
 * function ServicesPage({ serviceListConfig }) {
 *   return (
 *     <ServiceList.Root serviceListConfig={serviceListConfig}>
 *       <ServiceList.Services emptyState={<div>No services available</div>}>
 *         <ServiceList.ServiceRepeater>
 *           <Service.Name />
 *           <Service.Price />
 *         </ServiceList.ServiceRepeater>
 *       </ServiceList.Services>
 *     </ServiceList.Root>
 *   );
 * }
 * ```
 */
export declare const Root: React.ForwardRefExoticComponent<ServiceListRootProps & React.RefAttributes<HTMLElement>>;
/**
 * Props for ServiceList Services component
 */
export interface ServicesProps {
    children: React.ReactNode;
    /** Content to display when no services are available */
    emptyState?: React.ReactNode;
    /** Content to display when loading and no services are available */
    loadingState?: React.ReactNode;
    /** Content to display when an error occurs and no services are available */
    errorState?: React.ReactNode;
    infiniteScroll?: boolean;
    pageSize?: number;
    className?: string;
}
/**
 * Container for the services list with empty, loading, and error state support.
 * Wraps GenericList.Items. Follows List Container Level pattern.
 *
 * @component
 * @example
 * ```tsx
 * <ServiceList.Services
 *   emptyState={<div>No services found</div>}
 *   loadingState={<div>Loading services...</div>}
 *   errorState={<div>Failed to load services</div>}
 * >
 *   <ServiceList.ServiceRepeater>
 *     <Service.Name />
 *     <Service.Price />
 *   </ServiceList.ServiceRepeater>
 * </ServiceList.Services>
 * ```
 */
export declare const Services: React.ForwardRefExoticComponent<ServicesProps & React.RefAttributes<HTMLElement>>;
/**
 * Function children type for Service.Root component
 * Receives { selected, bookable } props from Service.Root
 */
export type ServiceRootChildren = AsChildChildren<{
    selected: boolean;
    bookable: boolean;
}>;
/**
 * Props for the itemWrapper function in asChild pattern
 * Supports both ReactNode and function children that receive { selected, bookable }
 */
export interface ServiceItemWrapperProps {
    item: ServiceType;
    index?: number;
    /** Children can be ReactNode or a function that receives { selected, bookable } from Service.Root */
    children: React.ReactNode | ServiceRootChildren;
}
/**
 * Render props for ServiceRepeater asChild pattern
 * Provides items array and itemWrapper function for custom rendering
 */
export interface ServiceRepeaterRenderProps {
    items: ServiceType[];
    variant?: ListVariant;
    /** Wraps each item in Service.Root - children can be ReactNode or function receiving { selected, bookable } */
    itemWrapper: (props: ServiceItemWrapperProps) => React.ReactNode;
}
/**
 * Props for ServiceList ServiceRepeater component
 */
export interface ServiceRepeaterProps {
    /**
     * Children can be:
     * - ReactNode: Static content rendered for each service
     * - ServiceRootChildren: Function receiving { selected, bookable } from Service.Root
     * - Function (with asChild=true): Receives { items, itemWrapper } for custom rendering
     */
    children: React.ReactNode | ((props: ServiceRepeaterRenderProps, ref?: React.Ref<HTMLElement>) => React.ReactNode) | ServiceRootChildren;
    /** Whether to render as child component (asChild pattern) */
    asChild?: boolean;
}
/**
 * Repeater component that renders Service.Root for each service.
 * Follows Repeater Level pattern and uses GenericList.Repeater for consistency.
 * Supports asChild pattern for advanced layout components.
 *
 * @component
 * @example
 * ```tsx
 * // Standard usage
 * <ServiceList.ServiceRepeater>
 *   <Service.Name />
 *   <Service.Price />
 * </ServiceList.ServiceRepeater>
 *
 * // AsChild usage with custom wrapper
 * <ServiceList.ServiceRepeater asChild>
 *   {({ items, variant, itemWrapper }) => (
 *     <CustomWrapper
 *       items={items}
 *       variant={variant}
 *       itemRenderer={(item, index) =>
 *         itemWrapper({ item, index, children: <>
 *           <Service.Name />
 *           <Service.Price />
 *         </> })
 *       }
 *     />
 *   )}
 * </ServiceList.ServiceRepeater>
 * ```
 */
export declare const ServiceRepeater: React.ForwardRefExoticComponent<ServiceRepeaterProps & React.RefAttributes<HTMLElement>>;
/**
 * Props for ServiceList LoadMore component
 */
export interface LoadMoreProps {
    /** Custom render function when using asChild */
    children?: React.ReactNode | React.ForwardRefRenderFunction<HTMLButtonElement, GenericListLoadMoreRenderProps>;
    /**
     * Whether to render as a child component.
     * @default false
     */
    asChild?: boolean;
    /**
     * The CSS classes to apply to the button.
     */
    className?: string;
    /**
     * The label to display inside the button.
     */
    label?: string;
    /**
     * The loading state to display inside the button.
     */
    loadingState?: React.ReactNode;
}
/**
 * Displays a button to load more services. Not rendered if infiniteScroll is false or no services are left to load.
 * Follows the architecture rules - does not support asChild as it's a simple trigger component.
 *
 * @component
 * @example
 * ```tsx
 * <ServiceList.Actions.LoadMore asChild>
 *   <button>Load More</button>
 * </ServiceList.Actions.LoadMore>
 * ```
 */
export declare const LoadMore: React.ForwardRefExoticComponent<LoadMoreProps & React.RefAttributes<HTMLButtonElement>>;
/**
 * Actions namespace for ServiceList
 */
export declare const Actions: {
    LoadMore: React.ForwardRefExoticComponent<LoadMoreProps & React.RefAttributes<HTMLButtonElement>>;
};
/**
 * Props for ServiceList Filter component.
 * Extends FilterRootProps but provides value, onChange, and filterOptions automatically.
 */
export interface FilterProps extends Omit<FilterRootProps, 'value' | 'onChange' | 'filterOptions'> {
    /** Child components that will have access to filter functionality */
    children?: FilterRootProps['children'];
}
/**
 * Filter component that provides filtering functionality for service lists.
 * Integrates with ServiceListService for categories and BookingService for location.
 * Delegates asChild behavior to the underlying Filter.Root primitive.
 *
 * @component
 * @example
 * ```tsx
 * import { Filter } from '@wix/headless-components/react';
 *
 * // Pattern 1 - Plain usage (renders with default div wrapper)
 * <ServiceList.Filter className="filter-sidebar">
 *   <Filter.FilterOptions>
 *     <Filter.FilterOptionRepeater>
 *       <Filter.FilterOption.Label />
 *       <Filter.FilterOption.SingleFilter />
 *     </Filter.FilterOptionRepeater>
 *   </Filter.FilterOptions>
 *   <Filter.Filtered>
 *     <Filter.Action.Clear label="Clear Filters" />
 *   </Filter.Filtered>
 * </ServiceList.Filter>
 *
 * // Pattern 2 - asChild with primitive (clones child, passes props)
 * <ServiceList.Filter asChild>
 *   <aside className="sidebar">
 *     <Filter.FilterOptions>
 *       <Filter.FilterOptionRepeater>
 *         <Filter.FilterOption.Label />
 *       </Filter.FilterOptionRepeater>
 *     </Filter.FilterOptions>
 *   </aside>
 * </ServiceList.Filter>
 *
 * // Pattern 3 - asChild with React component (render function receiving props)
 * <ServiceList.Filter asChild>
 *   {React.forwardRef(({ value, onChange, filterOptions, hasFilters, ...props }, ref) => (
 *     <aside ref={ref} {...props} className="custom-sidebar">
 *       {hasFilters && <button onClick={() => onChange({})}>Clear</button>}
 *       <Filter.FilterOptions>...</Filter.FilterOptions>
 *     </aside>
 *   ))}
 * </ServiceList.Filter>
 * ```
 */
export declare const Filter: React.ForwardRefExoticComponent<FilterProps & React.RefAttributes<HTMLDivElement>>;