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

Svelte implementation of the Carbon Design System

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

export type CarbonUserAvatarGroupContext = {
  items: import("svelte/store").Writable<Array<{
        id: string;
        name: string;
        node?: HTMLElement
      }>>;
  max: any;
  size: any;
  activeTooltip: import("svelte/store").Writable<string | null>;
  register: (arg: any) => any;
  unregister: (id: any) => any;
  updateName: (id: any, name: any) => any;
};

/** Render a row of `UserAvatar` children. The group adds the "+N" overflow chip. */
type $RestProps = SvelteHTMLElements["div"];

type $Props = {
  /**
   * Specify the maximum number of avatars to show before collapsing the rest
   * into a "+N" overflow avatar. Set to `0` to show every avatar.
   * @default 5
   */
  max?: number;

  /**
   * Specify the total number of people represented. Defaults to the number of
   * slotted avatars. Set this when you render only a subset (large groups) so
   * the overflow count stays right without mounting every avatar.
   * @default undefined
   */
  total?: number;

  /**
   * Specify the spacing between avatars. Leave unset for the default
   * overlapping (stacked) layout. A positive value spaces the avatars apart,
   * accepting a Carbon layout scale (`0`–`13`) or a CSS length string. A
   * negative length string (for example `"-1rem"`) overlaps them by that
   * amount.
   * @default undefined
   */
  gap?: import("../Stack/Stack.svelte").StackScale | string;

  /**
   * Specify the size of the avatars. Applies to slotted avatars without their
   * own `size`, and to the "+N" overflow chip.
   * @default "md"
   */
  size?: "sm" | "md" | "lg" | "xl";

  /**
   * Specify which end of the stack renders on top when avatars overlap.
   * `"last"` matches the default browser paint order (and most avatar
   * stacks). `"first"` keeps the first avatar most prominent instead.
   * @default "last"
   */
  stackOrder?: "last" | "first";

  /**
   * Specify the tooltip text for the "+N" overflow avatar. Defaults to a
   * comma-separated list of hidden slotted `name` values. Set this when using
   * `total` for people who are not mounted.
   * @default undefined
   */
  overflowTooltipText?: string;

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

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

export type UserAvatarGroupProps = Omit<$RestProps, keyof $Props> & $Props;

export default class UserAvatarGroup extends SvelteComponentTyped<
  UserAvatarGroupProps,
  Record<string, any>,
  { default: Record<string, never> }
> {}