import React from 'react';
import { categories } from '@wix/categories';
import { AsChildChildren } from '@wix/headless-utils/react';
export type Category = categories.Category;
/**
 * Props for the `Category.Root` component.
 */
export interface CategoryRootProps {
    /**
     * The category data to display.
     */
    category: Category;
    /**
     * Child components to render within the category context.
     *
     * Use any of `Category.Trigger`, `Category.Label`, `Category.ID`, and `Category.Raw`
     * to display the category data. These children have access to the category
     * context and can render the category in different ways.
     */
    children: React.ReactNode;
}
/**
 * Props for the `Category.Trigger` component.
 */
export interface CategoryTriggerProps {
    /**
     * 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:
     * - `category` (`Category`): The category data object.
     *   - `_id` (`string`): Unique identifier for the category.
     *   - `name` (`string`): The category name.
     *   - `numberOfProducts` (`number`): Count of products in the category.
     *   - `childCount` (`number`): Count of child categories.
     * - `isSelected` (`boolean`): Whether this category is currently selected.
     * - `onSelect` (`() => void`): Function to toggle the category selection.
     * - `setIsSelected` (`(isSelected: boolean) => void`): Function to explicitly set the selection state.
     *
     * **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<{
        category: Category;
        isSelected: boolean;
        onSelect: () => void;
        setIsSelected: (isSelected: boolean) => void;
    }>;
    /**
     * Callback fired when the category is selected or deselected.
     *
     * Receives the category object that was interacted with.
     */
    onSelect?: (category: Category) => void;
    /**
     * CSS class name applied to the default element.
     *
     * The element has a `data-selected` attribute with value `"true"` when
     * selected, `"false"` otherwise. For conditional styling, target with `data-[selected=true]:` or
     * `data-[selected=false]:`.
     */
    className?: string;
}
/**
 * Props for the `Category.Label` component.
 */
export interface CategoryLabelProps {
    /**
     * 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;
    /**
     * 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:
     * - `name` (`string`): The category name.
     * - `category` (`Category`): The category data object.
     *   - `_id` (`string`): Unique identifier for the category.
     *   - `name` (`string`): The category name.
     *   - `numberOfProducts` (`number`): Count of products in the category.
     *   - `childCount` (`number`): Count of child categories.
     *
     * **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<{
        name: string;
        category: Category;
    }>;
    /**
     * CSS class name applied to the default element.
     *
     * The element has a `data-selected` attribute with value `"true"` when
     * selected, `"false"` otherwise. For conditional styling, target with `data-[selected=true]:` or
     * `data-[selected=false]:`.
     */
    className?: string;
}
/**
 * Props for the `Category.ID` component.
 */
export interface CategoryIDProps {
    /**
     * 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;
    /**
     * 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:
     * - `id` (`string`): The category ID.
     * - `category` (`Category`): The category data object.
     *   - `_id` (`string`): Unique identifier for the category.
     *   - `name` (`string`): The category name.
     *   - `numberOfProducts` (`number`): Count of products in the category.
     *   - `childCount` (`number`): Count of child categories.
     *
     * **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<{
        id: string;
        category: Category;
    }>;
    /**
     * CSS class name applied to the default element. Defaults to `sr-only`,
     * visually hidden but accessible to screen readers.
     *
     * The element has a `data-selected` attribute with value `"true"` when
     * selected, `"false"` otherwise. For conditional styling, target with `data-[selected=true]:` or
     * `data-[selected=false]:`.
     */
    className?: string;
}
/**
 * Props for the `Category.Raw` component.
 */
export interface CategoryRawProps {
    /**
     * 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;
    /**
     * 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:
     * - `category` (`Category`): The category data object.
     *   - `_id` (`string`): Unique identifier for the category.
     *   - `name` (`string`): The category name.
     *   - `numberOfProducts` (`number`): Count of products in the category.
     *   - `childCount` (`number`): Count of child categories.
     * - `isSelected` (`boolean`): Whether this category is currently selected.
     *
     * **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<{
        category: Category;
        isSelected: boolean;
    }>;
    /**
     * CSS class name applied to the default element. Defaults to `sr-only`,
     * visually hidden but accessible to screen readers.
     *
     * The element has a `data-selected` attribute with value `"true"` when
     * selected, `"false"` otherwise. For conditional styling, target with `data-[selected=true]:` or
     * `data-[selected=false]:`.
     */
    className?: string;
}
/**
 * Props for the `CategoryFilter` component.
 */
export interface CategoryFilterProps {
    /**
     * 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:
     * - `selectedCategory` (`Category | null`): The currently selected category, or `null` if none.
     *   - `_id` (`string`): Unique identifier for the category.
     *   - `name` (`string`): The category name.
     *   - `numberOfProducts` (`number`): Count of products in the category.
     *   - `childCount` (`number`): Count of child categories.
     * - `setSelectedCategory` (`(category: Category | null) => void`): Function to set the selected category, or `null` to clear.
     *
     * **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<{
        selectedCategory: Category | null;
        setSelectedCategory: (category: Category | null) => void;
    }>;
    /**
     * CSS class name applied to the default element.
     *
     * The element has a `data-selected` attribute with value `"true"` when
     * a category is selected, `"false"` otherwise. For conditional styling, target with `data-[selected=true]:`
     * or `data-[selected=false]:`.
     */
    className?: string;
    /**
     * Label text displayed before the selected category name.
     *
     * Default: `"Selected"`
     */
    label?: string;
}
/**
 * Root container that provides category context to child components.
 *
 * This component integrates with the product list filtering system, allowing
 * category selection to filter products automatically within a
 * `ProductList.Root` context.
 *
 * > **Note:** When using `CategoryList.CategoryRepeater`, you don't need to use
 * `Category.Root` directly as it's provided automatically by the repeater.
 * Use `Category.Root` only when displaying a standalone category outside of
 * a `CategoryList` context, such as in a featured category section.
 *
 * ### Component hierarchy
 *
 * ```tsx
 * <Category.Root category={category}>
 *   <Category.Trigger />
 *   <Category.Label />
 *   <Category.ID />
 *   <Category.Raw />
 * </Category.Root>
 * ```
 *
 * @order 1
 * @component
 * @example Basic usage with CategoryList.CategoryRepeater
 * ```tsx
 * // import { Category, CategoryList } from '@wix/stores/components';
 * // import { loadCategoriesListServiceConfig } from '@wix/headless-stores/services';
 * //
 * // CategoryList.CategoryRepeater automatically provides Category.Root
 * //
 * // Call loadCategoriesListServiceConfig() to obtain a categoriesListConfig
 *
 * // Default styling
 * <CategoryList.Root categoriesListConfig={yourCategoriesListConfig}>
 *   <CategoryList.CategoryRepeater>
 *     <Category.Trigger />
 *     <Category.Label />
 *   </CategoryList.CategoryRepeater>
 * </CategoryList.Root>
 * ```
 *
 * @example Basic usage with Category.Root
 * ```tsx
 * // import { Category } from '@wix/stores/components';
 * //
 * // You must pass a category object to the `category` prop
 *
 * // Default styling
 * <Category.Root category={yourCategory}>
 *   <Category.Trigger />
 *   <Category.Label />
 * </Category.Root>
 * ```
 */
export declare const Root: React.ForwardRefExoticComponent<CategoryRootProps & React.RefAttributes<HTMLElement>>;
/**
 * Interactive element for selecting or triggering category actions.
 * Provides category data and selection state to custom render functions.
 *
 * Renders a button that toggles the category selection state when clicked.
 * When a category is selected, clicking the trigger again will deselect it.
 * The selection state is managed through the parent `Category.Root` context.
 * Selecting a category filters the product list to show only products in
 * that category.
 *
 * By default, renders a `<button>` element displaying the category name.
 *
 * @component
 * @example Basic usage
 * ```tsx
 * // import { Category } from '@wix/stores/components';
 * //
 * // Category.Trigger must be wrapped in CategoryList.CategoryRepeater or Category.Root
 *
 * // Default styling
 * <Category.Trigger />
 *
 * // Custom styling and data attributes
 * <Category.Trigger className="your-trigger-classname data-[selected=true]:your-selected-style" />
 * ```
 *
 * @example Custom rendering with `asChild`
 * ```tsx
 * // import { Category } from '@wix/stores/components';
 * //
 * // Category.Trigger must be wrapped in CategoryList.CategoryRepeater or Category.Root
 *
 * // asChild with React element - Syntax demonstration for alternative element type
 * <Category.Trigger asChild>
 *   <div className="your-button-classname" />
 * </Category.Trigger>
 *
 * // asChild with render function - Shows product count and selection indicator
 * <Category.Trigger asChild>
 *   {React.forwardRef(({ category, isSelected, onSelect, ...props }, ref) => (
 *     <button ref={ref} {...props} onClick={onSelect} className="your-button-classname">
 *       {category.name} ({category.numberOfProducts} products)
 *       {isSelected && ' ✓'}
 *     </button>
 *   ))}
 * </Category.Trigger>
 *
 * // asChild with render object - Shows product count and selection indicator
 * <Category.Trigger asChild>
 *   {{
 *     render: ({ category, isSelected, onSelect, ...props }, ref) => (
 *       <button ref={ref} {...props} onClick={onSelect} className="your-button-classname">
 *         {category.name} ({category.numberOfProducts} products)
 *         {isSelected && ' ✓'}
 *       </button>
 *     )
 *   }}
 * </Category.Trigger>
 * ```
 */
export declare const Trigger: React.ForwardRefExoticComponent<CategoryTriggerProps & React.RefAttributes<HTMLButtonElement>>;
/**
 * Displays the category name or label.
 * Provides category name and full category data to custom render functions.
 *
 * By default, renders a `<span>` element containing the category name.
 *
 * @component
 * @example Basic usage
 * ```tsx
 * // import { Category } from '@wix/stores/components';
 * //
 * // Category.Label must be wrapped in CategoryList.CategoryRepeater or Category.Root
 *
 * // Default styling
 * <Category.Label />
 *
 * // Custom styling and data attributes
 * <Category.Label className="your-label-classname data-[selected=true]:your-selected-style" />
 * ```
 *
 * @example Custom rendering with `asChild`
 * ```tsx
 * // import { Category } from '@wix/stores/components';
 * //
 * // Category.Label must be wrapped in CategoryList.CategoryRepeater or Category.Root
 *
 * // asChild with React element - Syntax demonstration for alternative element type
 * <Category.Label asChild>
 *   <p className="your-label-classname" />
 * </Category.Label>
 *
 * // asChild with render function - Shows product count
 * <Category.Label asChild>
 *   {React.forwardRef(({ name, category, ...props }, ref) => (
 *     <span ref={ref} {...props} className="your-label-classname">
 *       {name} ({category.numberOfProducts} products)
 *     </span>
 *   ))}
 * </Category.Label>
 *
 * // asChild with render object - Shows product count
 * <Category.Label asChild>
 *   {{
 *     render: ({ name, category, ...props }, ref) => (
 *       <span ref={ref} {...props} className="your-label-classname">
 *         {name} ({category.numberOfProducts} products)
 *       </span>
 *     )
 *   }}
 * </Category.Label>
 * ```
 */
export declare const Label: React.ForwardRefExoticComponent<CategoryLabelProps & React.RefAttributes<HTMLElement>>;
/**
 * Provides access to the category ID for advanced use cases.
 * Typically used for tracking, analytics, or hidden form fields.
 *
 * By default, renders a visually hidden `<span>` element (using the`sr-only` class)
 * to keep the ID accessible to screen readers without affecting the visual layout.
 *
 * @component
 * @example Basic usage
 * ```tsx
 * // import { Category } from '@wix/stores/components';
 * //
 * // Category.ID must be wrapped in CategoryList.CategoryRepeater or Category.Root
 *
 * // For this component, default styling is the sr-only class
 * <Category.ID />
 *
 * // Custom styling and data attributes
 * <Category.ID className="your-id-classname data-[selected=true]:your-selected-style" />
 * ```
 *
 * @example Custom rendering with `asChild`
 * ```tsx
 * // import { Category } from '@wix/stores/components';
 * //
 * // Category.ID must be wrapped in CategoryList.CategoryRepeater or Category.Root
 *
 * // asChild with React element - Syntax demonstration for alternative element type
 * <Category.ID asChild>
 *   <p className="your-id-classname" />
 * </Category.ID>
 *
 * // asChild with render function - Adds data attribute for tracking
 * <Category.ID asChild>
 *   {React.forwardRef(({ id, category, ...props }, ref) => (
 *     <span ref={ref} {...props} data-category-id={id} className="your-id-classname">
 *       Category ID: {id}
 *     </span>
 *   ))}
 * </Category.ID>
 *
 * // asChild with render object - Adds data attribute for tracking
 * <Category.ID asChild>
 *   {{
 *     render: ({ id, category, ...props }, ref) => (
 *       <span ref={ref} {...props} data-category-id={id} className="your-id-classname">
 *         Category ID: {id}
 *       </span>
 *     )
 *   }}
 * </Category.ID>
 * ```
 */
export declare const ID: React.ForwardRefExoticComponent<CategoryIDProps & React.RefAttributes<HTMLElement>>;
/**
 * Provides access to the full category data for advanced use cases.
 * Useful for custom implementations that need access to all category properties
 * such as slug, description, image, or metadata.
 *
 * By default, renders a visually hidden `<span>` with the category JSON.
 *
 * @component
 * @example Basic usage
 * ```tsx
 * // import { Category } from '@wix/stores/components';
 * //
 * // Category.Raw must be wrapped in CategoryList.CategoryRepeater or Category.Root
 *
 * // For this component, default styling is the sr-only class
 * <Category.Raw />
 *
 * // Custom styling and data attributes
 * <Category.Raw className="your-raw-classname data-[selected=true]:your-selected-style" />
 * ```
 *
 * @example Custom rendering with `asChild`
 * ```tsx
 * // import { Category } from '@wix/stores/components';
 * //
 * // Category.Raw must be wrapped in CategoryList.CategoryRepeater or Category.Root
 *
 * // asChild with React element - Syntax demonstration for alternative element type
 * <Category.Raw asChild>
 *   <div className="your-raw-classname" />
 * </Category.Raw>
 *
 * // asChild with render function - Formats category as JSON with data attribute
 * <Category.Raw asChild>
 *   {React.forwardRef(({ category, isSelected, ...props }, ref) => (
 *     <div ref={ref} {...props} data-category-id={category._id} className="your-raw-classname">
 *       <pre>{JSON.stringify(category, null, 2)}</pre>
 *     </div>
 *   ))}
 * </Category.Raw>
 *
 * // asChild with render object - Formats category as JSON with data attribute
 * <Category.Raw asChild>
 *   {{
 *     render: ({ category, isSelected, ...props}, ref) => (
 *       <div ref={ref} {...props} data-category-id={category._id} className="your-raw-classname">
 *         <pre>{JSON.stringify(category, null, 2)}</pre>
 *       </div>
 *     )
 *   }}
 * </Category.Raw>
 * ```
 */
export declare const Raw: React.ForwardRefExoticComponent<CategoryRawProps & React.RefAttributes<HTMLElement>>;
/**
 * Displays the currently selected category and allows clearing the selection.
 * Selecting a category filters the product list to show only products in that category.
 *
 * By default, renders a `<div>` showing the selected category name with a
 * configurable label.
 *
 * @component
 * @example Basic usage
 * ```tsx
 * // import { CategoryFilter } from '@wix/stores/components';
 * //
 * // CategoryFilter must be wrapped in ProductList.Root
 *
 * // Default styling
 * <CategoryFilter />
 *
 * // Custom styling and data attributes
 * <CategoryFilter className="your-filter-classname data-[selected=true]:your-selected-style" />
 * ```
 *
 * @example With custom label
 * ```tsx
 * // import { CategoryFilter } from '@wix/stores/components';
 * //
 * // CategoryFilter must be wrapped in ProductList.Root
 *
 * // With custom label
 * <CategoryFilter label="Current Category:" />
 *
 * // With custom label and custom styling
 * <CategoryFilter label="Current Category:" className="your-filter-classname" />
 * ```
 *
 * @example Custom rendering with `asChild`
 * ```tsx
 * // import { CategoryFilter } from '@wix/stores/components';
 * //
 * // CategoryFilter must be wrapped in ProductList.Root
 *
 * // asChild with React element - Syntax demonstration for alternative element type
 * <CategoryFilter asChild>
 *   <section className="your-filter-classname" />
 * </CategoryFilter>
 *
 * // asChild with render function - Shows clear button when category selected
 * <CategoryFilter asChild>
 *   {React.forwardRef(({ selectedCategory, setSelectedCategory, ...props }, ref) => (
 *     <div ref={ref} {...props} className="your-filter-classname">
 *       {selectedCategory && (
 *         <>
 *           <span>Selected: {selectedCategory.name}</span>
 *           <button onClick={() => setSelectedCategory(null)}>Clear Selection</button>
 *         </>
 *       )}
 *     </div>
 *   ))}
 * </CategoryFilter>
 *
 * // asChild with render object - Shows clear button when category selected
 * <CategoryFilter asChild>
 *   {{
 *     render: ({ selectedCategory, setSelectedCategory, ...props }, ref) => (
 *       <div ref={ref} {...props} className="your-filter-classname">
 *         {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>>;