carbon-components-svelte/src/UserAvatar/UserAvatar.svelte.d.ts

Svelte implementation of the Carbon Design System

import { SvelteComponentTyped } from "svelte";
import type { SvelteHTMLElements } from "svelte/elements";

/** Custom avatar content via the default slot overrides the computed image, icon, and initials. */
type $RestProps = SvelteHTMLElements["div"];

type $Props<Icon = any> = {
  /**
   * Specify the size of the avatar.
   * Defaults to `"md"`, or to the `size` of a parent `UserAvatarGroup`.
   * @default undefined
   */
  size?: "sm" | "md" | "lg" | "xl";

  /**
   * Specify the background color rendered behind the initials or icon.
   * Set to `"auto"` to pick a stable color from `name` (or `initials`).
   * @default "gray"
   */
  backgroundColor?: "auto" | "red" | "magenta" | "purple" | "blue" | "cyan" | "teal" | "green" | "gray" | "cool-gray" | "warm-gray";

  /**
   * Specify the user's full name. Initials are derived from the name when `initials` is not set.
   * @default undefined
   */
  name?: string;

  /**
   * Specify the initials to display. Takes priority over initials derived from `name`.
   * @default undefined
   */
  initials?: string;

  /**
   * Specify an image source to render a photo.
   * Takes priority over the icon and initials.
   * @default undefined
   */
  image?: string;

  /**
   * Specify alternative text for the image.
   * @default undefined
   */
  imageDescription?: string;

  /**
   * Specify the icon to render. Falls back to a default user icon.
   * @default undefined
   */
  icon?: Icon;

  /**
   * Specify the tooltip text. When set, the avatar is wrapped in a tooltip.
   * @default undefined
   */
  tooltipText?: string;

  /**
   * Set the alignment of the tooltip relative to the avatar.
   * @default "center"
   */
  align?: "start" | "center" | "end";

  /**
   * Set the direction of the tooltip relative to the avatar.
   * @default "bottom"
   */
  direction?: "top" | "bottom";

  /**
   * Set to `false` to render the tooltip inline instead of in a floating portal.
   * The portal prevents the tooltip from being clipped by the avatar's `overflow: hidden`
   * frame or an `overflow: hidden` container such as a `Modal`.
   * @default true
   */
  portalTooltip?: boolean;

  /**
   * Obtain a reference to the avatar HTML element.
   * @default null
   */
  ref?: null | HTMLSpanElement;

  children?: (this: void) => void;

  [key: `data-${string}`]: unknown;
};

export type UserAvatarProps<Icon = any> = Omit<$RestProps, keyof $Props<Icon>> & $Props<Icon>;

export default class UserAvatar<Icon = any> extends SvelteComponentTyped<
  UserAvatarProps<Icon>,
  {
    click: WindowEventMap["click"];
    mouseenter: WindowEventMap["mouseenter"];
    mouseleave: WindowEventMap["mouseleave"];
    mouseover: WindowEventMap["mouseover"];
  },
  { default: Record<string, never> }
> {}