import { EventName } from '@lit/react'; import { default as Component } from '../../components/avatar/avatar.component.js'; import { DdsLoadEvent, DdsErrorEvent } from '../../events/events'; export type { DdsLoadEvent } from '../../events/events'; export type { DdsErrorEvent } from '../../events/events'; /** * `dap-ds-avatar` * @summary Avatar component can be used to display user profile images, initials, or icons. * @element dap-ds-avatar * @title - Avatar * * @slot icon - The icon to display when variant is 'icon'. * @slot fallback - Custom fallback content when image fails to load. * * @event dds-load - Fired when the image loads successfully. * @event dds-error - Fired when the image fails to load. * * @csspart base - The main avatar container. * @csspart img - The avatar image. * @csspart initials - The initials container. * @csspart icon - The icon container. * @csspart fallback - The fallback content container. * @csspart loading - The loading indicator. * * @cssproperty --dds-avatar-border-radius - The border radius of the avatar (default: 50%) * @cssproperty --dds-avatar-background-color - The background color of the avatar (default: var(--dds-neutral-200)) * @cssproperty --dds-avatar-border-width - The border width of the avatar (default: 0) * @cssproperty --dds-avatar-border-color - The color of the avatar's border (default: transparent) * @cssproperty --dds-avatar-border-style - The style of the avatar's border (default: solid) * @cssproperty --dds-avatar-transition - The transition property for the avatar (default: all 0.2s ease-in-out) * @cssproperty --dds-avatar-text-color - The text color for initials (default: var(--dds-text-neutral-strong)) * @cssproperty --dds-avatar-font-weight - The font weight for initials (default: var(--dds-font-weight-bold)) * @cssproperty --dds-avatar-lg-size - Size for large avatars (default: var(--dds-avatar-size-lg)) * @cssproperty --dds-avatar-md-size - Size for medium avatars (default: var(--dds-avatar-size-md)) * @cssproperty --dds-avatar-sm-size - Size for small avatars (default: var(--dds-avatar-size-sm)) * @cssproperty --dds-avatar-xs-size - Size for extra small avatars (default: var(--dds-avatar-size-xs)) * @cssproperty --dds-avatar-xxs-size - Size for extra extra small avatars (default: var(--dds-avatar-size-xxs)) * @cssproperty --dds-avatar-font-size-lg - Font size for large avatars (default: var(--dds-font-2xl)) * @cssproperty --dds-avatar-font-size-md - Font size for medium avatars (default: var(--dds-font-lg)) * @cssproperty --dds-avatar-font-size-sm - Font size for small avatars (default: var(--dds-font-base)) * @cssproperty --dds-avatar-font-size-xs - Font size for extra small avatars (default: var(--dds-font-sm)) * @cssproperty --dds-avatar-font-size-xxs - Font size for extra extra small avatars (default: var(--dds-font-xs)) * @cssproperty --dds-avatar-hover-transform - Transform applied on hover for interactive avatars (default: scale(1.05)) * @cssproperty --dds-avatar-active-transform - Transform applied when active for interactive avatars (default: scale(0.95)) * @cssproperty --dds-avatar-focus-ring - Focus ring style for interactive avatars (default: 0 0 0 2px var(--dds-focus-outer-ring)) * @cssproperty --dds-avatar-loading-background - Background color when loading (default: var(--dds-neutral-100)) * @cssproperty --dds-avatar-error-background - Background color when image fails to load (default: var(--dds-negative-100)) * @cssproperty --dds-avatar-error-color - Text color when image fails to load (default: var(--dds-negative-600)) * * @property { 'xxs' | 'xs' | 'sm' | 'md' | 'lg' } size - The size of the avatar. Default is `md`. * @property {string} sizeMap - Responsive size map (e.g. "md:lg"). */ declare const reactWrapper: import('@lit/react').ReactWebComponent; onDdsError: EventName; }>; export default reactWrapper;