@procore/core-react
Version:
React library of Procore Design Guidelines
48 lines (35 loc) • 3.08 kB
TypeScript
import React from 'react';
import type { AvatarIconProps, AvatarLabelProps, AvatarPortraitProps, AvatarProps, AvatarRef, AvatarRoles, AvatarRoleType, BaseAvatarProps } from './Avatar.types';
declare function AvatarInner({ as, clickable, disabled, href, size, children, onBlur, onFocus, rel, role, target, ...props }: AvatarProps<AvatarRoleType>, ref: AvatarRef<AvatarRoleType>): React.JSX.Element;
export declare const Icon: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & AvatarIconProps & React.RefAttributes<HTMLDivElement>>;
export declare const Label: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & AvatarLabelProps & React.RefAttributes<HTMLDivElement>>;
export declare const Portrait: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & AvatarPortraitProps & React.RefAttributes<HTMLDivElement>>;
/**
We use avatars to visually represent our users, places, and things in the app.
These can be in the form of rich media or representative illustrations.
@since 10.19.0
@see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-avatar--demo)
@see [Design Guidelines](https://design.procore.com/avatar)
@a11y Avatar's need a `aria-label` and can be enhanced with `role` for interaction. If decorative only, add `aria-hidden`. The inaccessible `clickable` prop is for UI only
*/
export declare const NextAvatar: (<Role extends AvatarRoles>(props: AvatarProps<Role>) => ReturnType<typeof AvatarInner>) & {
Icon: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & AvatarIconProps & React.RefAttributes<HTMLDivElement>>;
Label: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & AvatarLabelProps & React.RefAttributes<HTMLDivElement>>;
Portrait: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & AvatarPortraitProps & React.RefAttributes<HTMLDivElement>>;
};
/**
We use avatars to visually represent our users, places, and things in the app.
These can be in the form of rich media or representative illustrations.
@since 10.19.0
@see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-avatar--demo)
@see [Design Guidelines](https://design.procore.com/avatar)
@a11y Avatar's need a `aria-label` and can be enhanced with `role` for interaction. If decorative only, add `aria-hidden`. The inaccessible `clickable` prop is for UI only
*/
export declare const Avatar: (<Role extends AvatarRoles>(props: AvatarProps<Role> | (BaseAvatarProps & {
ref?: React.ComponentPropsWithRef<'div'>['ref'];
})) => ReturnType<typeof AvatarInner>) & {
Icon: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & AvatarIconProps & React.RefAttributes<HTMLDivElement>>;
Label: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & AvatarLabelProps & React.RefAttributes<HTMLDivElement>>;
Portrait: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & AvatarPortraitProps & React.RefAttributes<HTMLDivElement>>;
};
export {};