@zag-js/avatar/dist/avatar.types.d.ts

Core logic for the avatar widget implemented as a state machine

import { Machine, Service } from '@zag-js/core';
import { CommonProperties, DirectionProperty, PropTypes } from '@zag-js/types';

type LoadStatus = "error" | "loaded";
interface StatusChangeDetails {
    status: LoadStatus;
}
type ElementIds = Partial<{
    root: string;
    image: string;
    fallback: string;
}>;
interface AvatarProps extends CommonProperties, DirectionProperty {
    /**
     * Functional called when the image loading status changes.
     */
    onStatusChange?: ((details: StatusChangeDetails) => void) | undefined;
    /**
     * The ids of the elements in the avatar. Useful for composition.
     */
    ids?: ElementIds | undefined;
}
interface AvatarSchema {
    props: AvatarProps;
    context: any;
    initial: "loading";
    effect: "trackImageRemoval" | "trackSrcChange";
    action: "invokeOnLoad" | "invokeOnError" | "checkImageStatus";
    event: {
        type: "img.loaded";
        src?: string | undefined;
    } | {
        type: "img.error";
        src?: string | undefined;
    } | {
        type: "img.unmount";
    } | {
        type: "src.change";
    };
    state: "loading" | "error" | "loaded";
}
type AvatarService = Service<AvatarSchema>;
type AvatarMachine = Machine<AvatarSchema>;
interface AvatarApi<T extends PropTypes = PropTypes> {
    /**
     * Whether the image is loaded.
     */
    loaded: boolean;
    /**
     * Function to set new src.
     */
    setSrc: (src: string) => void;
    /**
     * Function to set loaded state.
     */
    setLoaded: VoidFunction;
    /**
     * Function to set error state.
     */
    setError: VoidFunction;
    getRootProps: () => T["element"];
    getImageProps: () => T["img"];
    getFallbackProps: () => T["element"];
}

export type { AvatarApi, AvatarMachine, AvatarProps, AvatarSchema, AvatarService, ElementIds, LoadStatus, StatusChangeDetails };