@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-variants').ClassValue | {
            base?: import('tailwind-variants').ClassValue;
        };
        sm: import('tailwind-variants').ClassValue | {
            base?: import('tailwind-variants').ClassValue;
        };
        md: import('tailwind-variants').ClassValue | {
            base?: import('tailwind-variants').ClassValue;
        };
        lg: import('tailwind-variants').ClassValue | {
            base?: import('tailwind-variants').ClassValue;
        };
        xl: import('tailwind-variants').ClassValue | {
            base?: import('tailwind-variants').ClassValue;
        };
    };
    variant: {
        circle: import('tailwind-variants').ClassValue | {
            base?: import('tailwind-variants').ClassValue;
        };
        square: import('tailwind-variants').ClassValue | {
            base?: import('tailwind-variants').ClassValue;
        };
    };
    color: {
        teal: import('tailwind-variants').ClassValue | {
            base?: import('tailwind-variants').ClassValue;
        };
        plum: import('tailwind-variants').ClassValue | {
            base?: import('tailwind-variants').ClassValue;
        };
        purple: import('tailwind-variants').ClassValue | {
            base?: import('tailwind-variants').ClassValue;
        };
        orange: import('tailwind-variants').ClassValue | {
            base?: import('tailwind-variants').ClassValue;
        };
        neutral: import('tailwind-variants').ClassValue | {
            base?: import('tailwind-variants').ClassValue;
        };
        warning: import('tailwind-variants').ClassValue | {
            base?: import('tailwind-variants').ClassValue;
        };
        success: import('tailwind-variants').ClassValue | {
            base?: import('tailwind-variants').ClassValue;
        };
        info: import('tailwind-variants').ClassValue | {
            base?: import('tailwind-variants').ClassValue;
        };
        danger: import('tailwind-variants').ClassValue | {
            base?: import('tailwind-variants').ClassValue;
        };
        promo: import('tailwind-variants').ClassValue | {
            base?: import('tailwind-variants').ClassValue;
        };
        primary: import('tailwind-variants').ClassValue | {
            base?: import('tailwind-variants').ClassValue;
        };
    };
}, undefined, "uy:inline-block uy:relative uy:shrink-0", {
    size: {
        xs: "uy:size-200";
        sm: "uy:size-300";
        md: "uy:size-400";
        lg: "uy:size-500";
        xl: "uy:size-[56px]";
    };
    variant: {
        circle: "uy:rounded-circle";
        square: "uy:aspect-square";
    };
    color: {
        teal: "uy:bg-surface-decorative-teal-lowest uy:text-content-decorative-teal-high";
        plum: "uy:bg-surface-decorative-plum-lowest uy:text-content-decorative-plum";
        purple: "uy:bg-surface-decorative-purple-lowest uy:text-content-decorative-purple";
        orange: "uy:bg-surface-decorative-orange-lowest uy:text-content-decorative-orange";
        neutral: "uy:bg-surface-neutral-lowest uy:text-content-neutral";
        warning: "uy:bg-surface-warning-low uy:text-content-warning-high";
        success: "uy:bg-surface-success-low uy:text-content-success-high";
        info: "uy:bg-surface-info-low uy:text-content-info-high";
        danger: "uy:bg-surface-danger-low uy:text-content-danger-high";
        promo: "uy:bg-surface-promo-low uy:text-content-promo-high";
        primary: "uy:bg-surface-primary-lowest uy:text-content-primary-high";
    };
}, undefined, import('tailwind-variants').TVReturnType<{
    size: {
        xs: "uy:size-200";
        sm: "uy:size-300";
        md: "uy:size-400";
        lg: "uy:size-500";
        xl: "uy:size-[56px]";
    };
    variant: {
        circle: "uy:rounded-circle";
        square: "uy:aspect-square";
    };
    color: {
        teal: "uy:bg-surface-decorative-teal-lowest uy:text-content-decorative-teal-high";
        plum: "uy:bg-surface-decorative-plum-lowest uy:text-content-decorative-plum";
        purple: "uy:bg-surface-decorative-purple-lowest uy:text-content-decorative-purple";
        orange: "uy:bg-surface-decorative-orange-lowest uy:text-content-decorative-orange";
        neutral: "uy:bg-surface-neutral-lowest uy:text-content-neutral";
        warning: "uy:bg-surface-warning-low uy:text-content-warning-high";
        success: "uy:bg-surface-success-low uy:text-content-success-high";
        info: "uy:bg-surface-info-low uy:text-content-info-high";
        danger: "uy:bg-surface-danger-low uy:text-content-danger-high";
        promo: "uy:bg-surface-promo-low uy:text-content-promo-high";
        primary: "uy:bg-surface-primary-lowest uy:text-content-primary-high";
    };
}, undefined, undefined, {
    size: {
        xs: "uy:size-200";
        sm: "uy:size-300";
        md: "uy:size-400";
        lg: "uy:size-500";
        xl: "uy:size-[56px]";
    };
    variant: {
        circle: "uy:rounded-circle";
        square: "uy:aspect-square";
    };
    color: {
        teal: "uy:bg-surface-decorative-teal-lowest uy:text-content-decorative-teal-high";
        plum: "uy:bg-surface-decorative-plum-lowest uy:text-content-decorative-plum";
        purple: "uy:bg-surface-decorative-purple-lowest uy:text-content-decorative-purple";
        orange: "uy:bg-surface-decorative-orange-lowest uy:text-content-decorative-orange";
        neutral: "uy:bg-surface-neutral-lowest uy:text-content-neutral";
        warning: "uy:bg-surface-warning-low uy:text-content-warning-high";
        success: "uy:bg-surface-success-low uy:text-content-success-high";
        info: "uy:bg-surface-info-low uy:text-content-info-high";
        danger: "uy:bg-surface-danger-low uy:text-content-danger-high";
        promo: "uy:bg-surface-promo-low uy:text-content-promo-high";
        primary: "uy:bg-surface-primary-lowest uy:text-content-primary-high";
    };
}, undefined, import('tailwind-variants').TVReturnTypeLike<{
    size: {
        xs: "uy:size-200";
        sm: "uy:size-300";
        md: "uy:size-400";
        lg: "uy:size-500";
        xl: "uy:size-[56px]";
    };
    variant: {
        circle: "uy:rounded-circle";
        square: "uy:aspect-square";
    };
    color: {
        teal: "uy:bg-surface-decorative-teal-lowest uy:text-content-decorative-teal-high";
        plum: "uy:bg-surface-decorative-plum-lowest uy:text-content-decorative-plum";
        purple: "uy:bg-surface-decorative-purple-lowest uy:text-content-decorative-purple";
        orange: "uy:bg-surface-decorative-orange-lowest uy:text-content-decorative-orange";
        neutral: "uy:bg-surface-neutral-lowest uy:text-content-neutral";
        warning: "uy:bg-surface-warning-low uy:text-content-warning-high";
        success: "uy:bg-surface-success-low uy:text-content-success-high";
        info: "uy:bg-surface-info-low uy:text-content-info-high";
        danger: "uy:bg-surface-danger-low uy:text-content-danger-high";
        promo: "uy:bg-surface-promo-low uy:text-content-promo-high";
        primary: "uy:bg-surface-primary-lowest uy:text-content-primary-high";
    };
}, undefined>>>;
type AvatarAccessibleName = {
    'aria-label': string;
    'aria-labelledby'?: string;
} | {
    'aria-label'?: string;
    'aria-labelledby': string;
};
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'];
    /** 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;
} & AvatarAccessibleName>;
/**
 * 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
 * - Use `aria-description` when a short additional description helps screen reader users
 * - Use `aria-labelledby` and `aria-describedby` to associate the avatar with visible text that identifies the represented person or entity
 * - The avatar has `role="img"` by default and should not be used as an interactive element directly; wrap it in a button or Actionable when it triggers an action
 * @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<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
export { Avatar };