import React from 'react';
import type { EnhancedModifierGroup } from '../services/types.js';
import { type AsChildChildren } from '@wix/headless-utils/react';
export interface ModifierGroupRootProps {
    modifierGroup?: EnhancedModifierGroup;
    children: React.ReactNode;
}
/**
 * Root component that provides modifier group context to its children.
 *
 * @warning Do not use this component directly if it's inside a repeater.
 * Use the repeater component (e.g., Item.ModifierGroupsRepeater) instead, which will
 * automatically render this Root component for each modifier group.
 */
export declare const Root: (props: ModifierGroupRootProps) => import("react/jsx-runtime").JSX.Element | null;
export interface ModifierGroupNameProps {
    /** 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;
}
export interface ModifierGroupModifiersRepeaterProps {
    children: React.ReactNode;
}
/**
 * Displays the modifier group name with customizable rendering following the documented API.
 *
 * @component
 * @example
 * ```tsx
 * // Default usage
 * <ModifierGroup.Name className="text-sm font-medium" />
 *
 * // asChild with primitive
 * <ModifierGroup.Name asChild>
 *   <h4 className="text-sm font-medium" />
 * </ModifierGroup.Name>
 *
 * // asChild with react component
 * <ModifierGroup.Name asChild>
 *   {React.forwardRef(({name, ...props}, ref) => (
 *     <h4 ref={ref} {...props} className="text-sm font-medium">
 *       {name}
 *     </h4>
 *   ))}
 * </ModifierGroup.Name>
 * ```
 */
export declare const Name: React.ForwardRefExoticComponent<ModifierGroupNameProps & React.RefAttributes<HTMLElement>>;
export declare const ModifiersRepeater: {
    (props: ModifierGroupModifiersRepeaterProps): import("react/jsx-runtime").JSX.Element | null;
    displayName: string;
};
/**
 * ModifierGroup namespace containing all modifier group components
 * following the compound component pattern: ModifierGroupComponent.Root, ModifierGroupComponent.Name, ModifierGroupComponent.ModifiersRepeater
 */
export declare const ModifierGroupComponent: {
    /** ModifierGroup root component */
    readonly Root: (props: ModifierGroupRootProps) => import("react/jsx-runtime").JSX.Element | null;
    /** ModifierGroup name component */
    readonly Name: React.ForwardRefExoticComponent<ModifierGroupNameProps & React.RefAttributes<HTMLElement>>;
    /** ModifierGroup modifiers repeater component */
    readonly ModifiersRepeater: {
        (props: ModifierGroupModifiersRepeaterProps): import("react/jsx-runtime").JSX.Element | null;
        displayName: string;
    };
};