@payfit/unity-components/dist/esm/components/avatar/Avatar.d.ts

import { VariantProps } from '@payfit/unity-themes';
import { PropsWithChildren } from 'react';
import * as React from 'react';
declare const avatarRoot: import('tailwind-variants').TVReturnType<{} | {
    size: {
        xs: import('tailwind-merge').ClassNameValue | {
            base?: import('tailwind-merge').ClassNameValue;
        };
        sm: import('tailwind-merge').ClassNameValue | {
            base?: import('tailwind-merge').ClassNameValue;
        };
        md: import('tailwind-merge').ClassNameValue | {
            base?: import('tailwind-merge').ClassNameValue;
        };
        lg: import('tailwind-merge').ClassNameValue | {
            base?: import('tailwind-merge').ClassNameValue;
        };
        xl: import('tailwind-merge').ClassNameValue | {
            base?: import('tailwind-merge').ClassNameValue;
        };
    };
    variant: {
        circle: import('tailwind-merge').ClassNameValue | {
            base?: import('tailwind-merge').ClassNameValue;
        };
        square: import('tailwind-merge').ClassNameValue | {
            base?: import('tailwind-merge').ClassNameValue;
        };
    };
    color: {
        teal: import('tailwind-merge').ClassNameValue | {
            base?: import('tailwind-merge').ClassNameValue;
        };
        plum: import('tailwind-merge').ClassNameValue | {
            base?: import('tailwind-merge').ClassNameValue;
        };
        purple: import('tailwind-merge').ClassNameValue | {
            base?: import('tailwind-merge').ClassNameValue;
        };
        orange: import('tailwind-merge').ClassNameValue | {
            base?: import('tailwind-merge').ClassNameValue;
        };
        neutral: import('tailwind-merge').ClassNameValue | {
            base?: import('tailwind-merge').ClassNameValue;
        };
        warning: import('tailwind-merge').ClassNameValue | {
            base?: import('tailwind-merge').ClassNameValue;
        };
        success: import('tailwind-merge').ClassNameValue | {
            base?: import('tailwind-merge').ClassNameValue;
        };
        info: import('tailwind-merge').ClassNameValue | {
            base?: import('tailwind-merge').ClassNameValue;
        };
        danger: import('tailwind-merge').ClassNameValue | {
            base?: import('tailwind-merge').ClassNameValue;
        };
        promo: import('tailwind-merge').ClassNameValue | {
            base?: import('tailwind-merge').ClassNameValue;
        };
        primary: import('tailwind-merge').ClassNameValue | {
            base?: import('tailwind-merge').ClassNameValue;
        };
    };
}, undefined, "uy:inline-block uy:relative uy:shrink-0", {
    size: {
        xs: string;
        sm: string;
        md: string;
        lg: string;
        xl: string;
    };
    variant: {
        circle: string;
        square: string;
    };
    color: {
        teal: string;
        plum: string;
        purple: string;
        orange: string;
        neutral: string;
        warning: string;
        success: string;
        info: string;
        danger: string;
        promo: string;
        primary: string;
    };
}, undefined, import('tailwind-variants').TVReturnType<{
    size: {
        xs: string;
        sm: string;
        md: string;
        lg: string;
        xl: string;
    };
    variant: {
        circle: string;
        square: string;
    };
    color: {
        teal: string;
        plum: string;
        purple: string;
        orange: string;
        neutral: string;
        warning: string;
        success: string;
        info: string;
        danger: string;
        promo: string;
        primary: string;
    };
}, undefined, undefined, {
    size: {
        xs: string;
        sm: string;
        md: string;
        lg: string;
        xl: string;
    };
    variant: {
        circle: string;
        square: string;
    };
    color: {
        teal: string;
        plum: string;
        purple: string;
        orange: string;
        neutral: string;
        warning: string;
        success: string;
        info: string;
        danger: string;
        promo: string;
        primary: string;
    };
}, undefined, import('tailwind-variants').TVReturnType<{
    size: {
        xs: string;
        sm: string;
        md: string;
        lg: string;
        xl: string;
    };
    variant: {
        circle: string;
        square: string;
    };
    color: {
        teal: string;
        plum: string;
        purple: string;
        orange: string;
        neutral: string;
        warning: string;
        success: string;
        info: string;
        danger: string;
        promo: string;
        primary: string;
    };
}, undefined, undefined, unknown, unknown, undefined>>>;
export type AvatarProps = PropsWithChildren<{
    /** Additional class names to apply to the avatar */
    className?: string;
    /** The avatar's variant. One of: circle or square */
    variant?: VariantProps<typeof avatarRoot>['variant'];
    /** Size of the avatar. One of: xs, sm, md, lg, xl */
    size?: VariantProps<typeof avatarRoot>['size'];
    /** Color variant for icon avatars. One of: teal, plum, purple, orange, neutral, warning, success, info, danger, promo, primary */
    color?: VariantProps<typeof avatarRoot>['color'];
    /** Accessible label for the avatar */
    'aria-label': string;
    /** ID of the element that labels the avatar */
    'aria-labelledby'?: string;
    /** ID of the element that describes the avatar */
    'aria-describedby'?: string;
    /** Additional details for the avatar */
    'aria-details'?: string;
    /** Indicates if the avatar is hidden from assistive technologies */
    'aria-hidden'?: boolean;
}>;
/**
 * The Avatar component displays visual or text content for representing people or entities.
 * It supports images, initials, placeholders, and icons with customizable colors and sizes.
 * @param {AvatarProps} props - Props for the Avatar component
 * @example
 * ```tsx
 * import { Avatar, AvatarImage, AvatarFallback, AvatarIcon } from '@payfit/unity-components'
 *
 * // Avatar with image and fallback
 * function Example() {
 *   return (
 *     <Avatar size="lg" variant="circle" aria-label="John Doe">
 *       <AvatarImage src="/images/avatar.jpg" alt="John Doe" />
 *       <AvatarFallback variant="initials">JD</AvatarFallback>
 *     </Avatar>
 *   )
 * }
 *
 * // Avatar with icon and color
 * function IconExample() {
 *   return (
 *     <Avatar size="lg" color="teal" variant="circle" aria-label="Vacation">
 *       <AvatarIcon src="PalmFilled" alt="Palm tree" />
 *     </Avatar>
 *   )
 * }
 * ```
 * @remarks
 * - Use the `circle` variant for representing people
 * - Use the `square` variant for representing companies or organizations
 * - The `color` prop applies background and text color variants for icon avatars
 * - Always provide an `aria-label` or `aria-labelledby` for accessibility
 * @see {@link AvatarProps} for all available props
 * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/avatar GitHub}
 * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library?node-id=19-3741 Figma}
 * @see Design docs in {@link https://www.payfit.design/24f360409/p/69c10a-avatar Payfit.design}
 * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/component-reference-avatar unity-components.payfit.io}
 */
declare const Avatar: React.ForwardRefExoticComponent<{
    /** Additional class names to apply to the avatar */
    className?: string;
    /** The avatar's variant. One of: circle or square */
    variant?: VariantProps<typeof avatarRoot>["variant"];
    /** Size of the avatar. One of: xs, sm, md, lg, xl */
    size?: VariantProps<typeof avatarRoot>["size"];
    /** Color variant for icon avatars. One of: teal, plum, purple, orange, neutral, warning, success, info, danger, promo, primary */
    color?: VariantProps<typeof avatarRoot>["color"];
    /** Accessible label for the avatar */
    'aria-label': string;
    /** ID of the element that labels the avatar */
    'aria-labelledby'?: string;
    /** ID of the element that describes the avatar */
    'aria-describedby'?: string;
    /** Additional details for the avatar */
    'aria-details'?: string;
    /** Indicates if the avatar is hidden from assistive technologies */
    'aria-hidden'?: boolean;
} & {
    children?: React.ReactNode | undefined;
} & React.RefAttributes<HTMLSpanElement>>;
export { Avatar };