@clutchd/avatar/dist/index.d.ts

A basic avatar component powered by next/image.

import { IImageProps, IImageLoadingStates, IImage, IImageHtmlProps } from '@clutchd/image';
import { Primitive } from '@radix-ui/react-primitive';
import * as React from 'react';

/**
 * Type to define `Avatar` element.
 */
type IAvatar = IAvatarRoot;
/**
 * Type to define `Avatar` props.
 */
interface IAvatarProps {
    /**
     * The `alt` attribute for the underlying `Image`.  Defaults to `An avatar image.`.
     */
    alt?: IAvatarImageProps["alt"];
    /**
     * The `src` attribute for the underlying `Image`.
     */
    src?: IAvatarImageProps["src"];
    /**
     * A `nextjs/image` prop used to optimize the underlying image.
     * @see https://nextjs.org/docs/pages/api-reference/components/image#sizes
     */
    sizes?: IImageProps["sizes"];
}
/**
 * Type to define `Avatar` props with html attributes.
 */
interface IAvatarHtmlProps extends IAvatarProps, React.ComponentPropsWithoutRef<typeof Primitive.span> {
}
/**
 * `Avatar` - An image based component used to render a user's profile picture.
 * @param props `IAvatarProps` used to render this `Avatar`.
 * @returns `Avatar` component.
 */
declare function Avatar({ alt, children, className, src, sizes, ...props }: IAvatarHtmlProps): React.JSX.Element;
declare namespace Avatar {
    var displayName: string;
}

/**
 * Context values for the `Avatar` element.
 */
type AvatarContextValue = {
    loadingState: IImageLoadingStates;
    onLoadingStateChange(state: IImageLoadingStates): void;
};
/**
 * Type to define the `_context` prop for the `Avatar` element.
 */
interface IWithAvatarContext {
    /**
     * TODO: Should this context prop be something handled in core?
     * TODO: Does this scale with deeply nested components using Context?
     * @see https://github.com/facebook/react/issues/23287
     * @see https://github.com/radix-ui/primitives/discussions/1091
     * @see https://codesandbox.io/p/sandbox/stupefied-zhukovsky-etk9m?file=%2Fsrc%2FAlertDialog.js%3A10%2C19
     */
    /**
     * The context utilized by this `Avatar` component tree.  Defaults to `AvatarContext`.
     */
    _context?: React.Context<AvatarContextValue>;
}

/**
 * Type to define `IAvatarFallback` element.
 */
type IAvatarFallback = React.ComponentRef<typeof Primitive.span>;
/**
 * Type to define `AvatarFallback` props.
 */
interface IAvatarFallbackProps extends IWithAvatarContext {
}
/**
 * Type to define `AvatarFallback` props with html attributes.
 */
interface IAvatarFallbackHtmlProps extends IAvatarFallbackProps, React.ComponentPropsWithoutRef<typeof Primitive.span> {
}
/**
 * `AvatarFallback` - A text component used to render a avatar's fallback if an image is not provided to an `Avatar`.
 * @param props `IAvatarProps` used to render this `Avatar`.
 * @returns `AvatarFallback` component.
 */
declare function AvatarFallback({ _context, children, ...props }: IAvatarFallbackHtmlProps): React.JSX.Element | null;
declare namespace AvatarFallback {
    var displayName: string;
}

/**
 * Type to define `AvatarImage` element.
 */
type IAvatarImage = IImage;
/**
 * Type to define `AvatarImage` props.
 */
interface IAvatarImageProps extends IImageProps, IWithAvatarContext {
}
/**
 * Type to define `AvatarImage` props with html attributes.
 */
interface IAvatarImageHtmlProps extends IAvatarImageProps, IImageHtmlProps {
}
/**
 * `Avatar` - An image based component used to render a user's profile picture.
 * @param props `IAvatarProps` used to render this `Avatar`.
 * @returns `Avatar` component.
 */
declare function AvatarImage({ _context, fill, src, ...props }: IAvatarImageHtmlProps): React.JSX.Element | null;
declare namespace AvatarImage {
    var displayName: string;
}

/**
 * Type to define `AvatarRoot` element.
 */
type IAvatarRoot = React.ComponentRef<typeof Primitive.span>;
/**
 * Type to define `AvatarRoot` props.
 */
interface IAvatarRootProps extends IWithAvatarContext {
}
/**
 * Type to define `AvatarRoot` props with html attributes.
 */
interface IAvatarRootHtmlProps extends IAvatarRootProps, React.ComponentPropsWithoutRef<typeof Primitive.span> {
}
/**
 * `AvatarRoot` - An un-opinionated wrapper component for rendering an avatar.
 * @param props `IAvatarRootProps` used to render this `AvatarRoot`.
 * @returns `AvatarRoot` component.
 */
declare function AvatarRoot({ _context, children, ...props }: IAvatarRootHtmlProps): React.JSX.Element;
declare namespace AvatarRoot {
    var displayName: string;
}

export { Avatar, AvatarFallback, AvatarImage, AvatarRoot, type IAvatar, type IAvatarFallback, type IAvatarFallbackHtmlProps, type IAvatarFallbackProps, type IAvatarHtmlProps, type IAvatarImage, type IAvatarImageHtmlProps, type IAvatarImageProps, type IAvatarProps, type IAvatarRoot, type IAvatarRootHtmlProps, type IAvatarRootProps };