import React from 'react';
import type { Label } from '../services/types.js';
import type { AsChildChildren, AsChildRenderFunction } from '@wix/headless-utils/react';
export interface LabelRootProps {
    label?: Label;
    children: React.ReactNode;
}
/**
 * Root component that provides label context to its children.
 *
 * @warning Do not use this component directly if it's inside a repeater.
 * Use the repeater component (e.g., Item.LabelsRepeater) instead, which will
 * automatically render this Root component for each label.
 */
export declare const Root: (props: LabelRootProps) => import("react/jsx-runtime").JSX.Element | null;
export interface LabelNameProps {
    /** 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 label name with customizable rendering following the documented API.
 *
 * @component
 * @example
 * ```tsx
 * // Default usage
 * <Label.Name className="text-xs" />
 *
 * // asChild with primitive
 * <Label.Name asChild>
 *   <span className="text-xs" />
 * </Label.Name>
 *
 * // asChild with react component
 * <Label.Name asChild>
 *   {React.forwardRef(({name, ...props}, ref) => (
 *     <span ref={ref} {...props} className="text-xs">
 *       {name}
 *     </span>
 *   ))}
 * </Label.Name>
 * ```
 */
export declare const Name: React.ForwardRefExoticComponent<LabelNameProps & React.RefAttributes<HTMLElement>>;
export interface LabelIconProps {
    /** Whether to render as a child component */
    asChild?: boolean;
    /**
     * Custom render function when using asChild.
     * Receives an object with:
     * - hasIcon: boolean - whether the label has an icon
     * - icon: string | null - the icon URL
     * - altText: string - the alt text for the icon
     */
    children?: AsChildRenderFunction<{
        hasIcon: boolean;
        icon: string | null;
        altText: string;
    }>;
    /** CSS classes to apply to the default element */
    className?: string;
}
/**
 * Displays the label icon with customizable rendering following the documented API.
 * Provides the actual icon element when available.
 *
 * @component
 * @example
 * ```tsx
 * // Default usage
 * <Label.Icon className="w-4 h-4 object-contain" />
 *
 * // asChild with primitive
 * <Label.Icon asChild>
 *   <img className="w-4 h-4 object-contain" />
 * </Label.Icon>
 *
 * // asChild with custom component
 * <Label.Icon asChild>
 *   {React.forwardRef(({hasIcon, icon, altText, ...props}, ref) => (
 *     <div ref={ref} {...props} className="w-4 h-4">
 *       {hasIcon && <img src={icon} alt={altText} />}
 *     </div>
 *   ))}
 * </Label.Icon>
 *
 * // Custom render function
 * <Label.Icon>
 *   {({ hasIcon, icon, altText }) => (
 *     <div className="w-4 h-4 flex-shrink-0">
 *       {hasIcon && (
 *         <WixMediaImage media={{ image: icon }} alt={altText} width={16} height={16} />
 *       )}
 *     </div>
 *   )}
 * </Label.Icon>
 * ```
 */
export declare const Icon: React.ForwardRefExoticComponent<LabelIconProps & React.RefAttributes<HTMLImageElement>>;
/**
 * Label namespace containing all label components
 * following the compound component pattern: LabelComponent.Root, LabelComponent.Name, LabelComponent.Icon
 */
export declare const LabelComponent: {
    /** Label root component */
    readonly Root: (props: LabelRootProps) => import("react/jsx-runtime").JSX.Element | null;
    /** Label name component */
    readonly Name: React.ForwardRefExoticComponent<LabelNameProps & React.RefAttributes<HTMLElement>>;
    /** Label icon component */
    readonly Icon: React.ForwardRefExoticComponent<LabelIconProps & React.RefAttributes<HTMLImageElement>>;
};