import type { ReseeComponent } from '../types/index.js';
import type { IconProps } from './Icon.vue.js';
/**
 * Configurable props of the `IconTextPair` component.
 */
export interface IconTextPairProps {
    /**
     * Text content that the component will display.
     */
    text?: string;
    /**
     * The name of the icon to display at the left of the text content.
     * @see {@link IconProps.name}
     */
    icon?: IconProps['name'];
    /**
     * The name of the icon to display at the right of the text content.
     * @see {@link IconProps.name}
     */
    trailingIcon?: IconProps['name'];
    /**
     * The size of the leading icon.
     * @see {@link IconProps.size}
     */
    iconSize?: IconProps['size'];
    /**
     * The size of the trailing icon.
     * @see {@link IconProps.size}
     */
    trailingIconSize?: IconProps['size'];
    /**
     * The size of the gap between the icon(s) and text.
     *
     * - __wide__   : 0.5rem
     * - __normal__ : 0.25rem
     * - __none__   : 0rem
     */
    spacing?: 'wide' | 'normal' | 'none';
}
/**
 * Available slots in the `IconTextPair` component template.
 */
export interface IconTextPairSlots {
    /**
     * Use the `default` slot in place of the {@link IconTextPairProps.text} property
     * to add additional markup or otherwise customize its display.
     */
    default?: () => unknown;
    /**
     * Use the `leading` slot in place of the {@link IconTextPairProps.icon} property
     * to customize the icon that appears to the left of the component's text or default
     * slot content.
     */
    leading?: (props: {
        slotProps: {
            class?: string;
            name?: string;
            size?: IconProps['size'];
        };
    }) => unknown;
    /**
     * Use the `trailing` slot in place of the {@link IconTextPairProps.trailingIcon}
     * property to customize the icon that appears to the right of the component's text
     * or default slot content.
     */
    trailing?: (props: {
        slotProps: {
            class?: string;
            name?: string;
            size?: IconProps['size'];
        };
    }) => unknown;
}
/**
 * Use the `IconTextPair` component to consistently lay out
 * a piece of text content alongside an icon that is either leading
 * or trailing it.
 *
 * @see {@link IconTextPairProps}
 * @see {@link IconTextPairSlots}
 */
declare const _default: ReseeComponent<IconTextPairProps, IconTextPairSlots>;
export default _default;