import React from 'react';
import { type SelectedOption } from '../services/selected-option-service.js';
import { AsChildChildren } from '@wix/headless-utils/react';
export interface SelectedOptionRootProps {
    children: React.ReactNode;
    option: SelectedOption;
}
/**
 * Root component for a selected option that provides the SelectedOption service context to its children
 *
 * @example
 * ```tsx
 * <SelectedOption.Root option={selectedOption}>
 *   <SelectedOption.Text />
 *   <SelectedOption.Color />
 * </SelectedOption.Root>
 * ```
 */
export declare const Root: {
    (props: SelectedOptionRootProps): React.ReactNode;
    displayName: string;
};
/**
 * Props for SelectedOption Text component
 */
export interface SelectedOptionTextProps {
    /** Whether to render as a child component */
    asChild?: boolean;
    /** Custom render function when using asChild */
    children?: AsChildChildren<{
        name: string;
        value: string;
    }>;
    /** CSS classes to apply to the default element */
    className?: string;
}
/**
 * Displays text-based selected option.
 *
 * @component
 * @example
 * ```tsx
 * // Default usage
 * <SelectedOption.Text className="text-sm text-content-secondary" />
 *
 * // Custom rendering with forwardRef
 * <SelectedOption.Text asChild>
 *   {React.forwardRef(({name, value, ...props}, ref) => (
 *     <span ref={ref} {...props} className="text-sm text-content-secondary">
 *       {name}: {value}
 *     </span>
 *   ))}
 * </SelectedOption.Text>
 * ```
 */
export declare const Text: React.ForwardRefExoticComponent<SelectedOptionTextProps & React.RefAttributes<HTMLElement>>;
/**
 * Props for SelectedOption Color component
 */
export interface SelectedOptionColorProps {
    /** Whether to render as a child component */
    asChild?: boolean;
    /** Custom render function when using asChild */
    children?: AsChildChildren<{
        name: string;
        colorCode: string;
    }>;
    /** CSS classes to apply to the default element */
    className?: string;
}
/**
 * Displays color-based selected option.
 *
 * @component
 * @example
 * ```tsx
 * // Default usage - renders "OptionName: ColorName"
 * <SelectedOption.Color className="text-sm text-content-secondary" />
 *
 * // Custom rendering with forwardRef - provides name and colorCode for custom display
 * <SelectedOption.Color asChild>
 *   {React.forwardRef(({name, colorCode, ...props}, ref) => (
 *     <div ref={ref} {...props} className="flex items-center gap-2 text-sm text-content-secondary">
 *       <div
 *         className="w-4 h-4 rounded-full border"
 *         style={{ backgroundColor: colorCode }}
 *       />
 *       <span>{name}</span>
 *     </div>
 *   ))}
 * </SelectedOption.Color>
 * ```
 */
export declare const Color: React.ForwardRefExoticComponent<SelectedOptionColorProps & React.RefAttributes<HTMLElement>>;