beta-parity-react/ui/Avatar/index.d.ts

Beta Parity React Components

import React from 'react';
import './index.css';
import './variables.css';
declare const sizeAvatarMap: {
    readonly xxs: "xxs";
    readonly xs: "xs";
    readonly sm: "sm";
    readonly md: "md";
    readonly lg: "lg";
    readonly xl: "xl";
};
export type borderStyle = 'default' | 'alternative' | 'none' | 'inherit';
export type AvatarSize = keyof typeof sizeAvatarMap;
/**
 * Props for the Avatar component.
 *
 * Extends properties from the `div` element.
 */
export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
    /**
     * The URL of the image to display.
     *
     * @memberof AvatarProps
     */
    src?: string;
    /**
     * Alt text for the image.
     *
     * @memberof AvatarProps
     */
    alt?: string;
    /**
     * The initials to display when no image is available.
     * If not provided and src fails to load, a placeholder icon will be used.
     *
     * @memberof AvatarProps
     */
    initials?: string;
    /**
     * The size of the avatar.
     *
     * @default 'medium'
     * @memberof AvatarProps
     */
    size?: AvatarSize;
    /**
     * Modifies the padding of the avatar frame (the gap between the avatar and the border).
     *
     * Unit is in pixels.
     *
     * @default 1
     * @memberof AvatarProps
     */
    framePadding?: number;
    /**
     * Whether the avatar should be disabled.
     *
     * @default false
     * @memberof AvatarProps
     */
    disabled?: boolean;
    /**
     * The status to display in the avatar. Can be a dot or a border.
     *
     * @memberof AvatarProps
     */
    status?: {
        /**
         * Type of indicator to show status.
         *
         * @default 'dot'
         */
        type?: 'dot' | 'border';
        /**
         * Color of the status indicator.
         *
         * @default 'gray'
         */
        color?: 'gray' | 'green' | 'red' | 'yellow';
        /**
         * Whether the status indicator should pulse.
         *
         * @default false
         */
        pulse?: boolean;
        /**
         * Border style for the avatar.
         * 'default' uses the border color.
         * 'alternative' uses the alternative border color.
         * 'none' removes the border.
         *
         * @default 'default'
         * @memberof AvatarProps
         */
        borderStyle?: borderStyle;
    };
    /**
     * Custom styles for the wrapper element of the avatar.
     *
     * @memberof AvatarProps
     */
    wrapperProps?: React.HTMLAttributes<HTMLDivElement>;
}
/**
 * **Parity Avatar**.
 *
 * @see {@link https://beta-parity-react.vercel.app/avatar Parity Avatar}
 */
export declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLDivElement>>;
/**
 * Props for the AvatarGroup component.
 */
export interface AvatarGroupProps extends Pick<AvatarProps, 'framePadding'>, React.HTMLAttributes<HTMLDivElement> {
    /**
     * The maximum number of avatars to display before showing a "+X" overflow avatar.
     *
     * @default 5
     * @memberof AvatarGroupProps
     */
    max?: number;
    /**
     * The direction to stack avatars. 'row' stacks horizontally, 'column' stacks vertically.
     *
     * @default 'row'
     * @memberof AvatarGroupProps
     */
    direction?: 'row' | 'column';
    /**
     * The spacing between avatars.
     *
     * @default '-0.5rem'
     * @memberof AvatarGroupProps
     */
    spacing?: string;
    /**
     * Size for all avatars in the group.
     *
     * @default 'medium'
     * @memberof AvatarGroupProps
     */
    size?: AvatarSize;
    /**
     * Border style for all avatars in the group.
     *
     * @default 'default'
     * @memberof AvatarGroupProps
     */
    borderStyle?: borderStyle;
    /**
     * Function to render a custom overflow indicator.
     *
     * @memberof AvatarGroupProps
     */
    renderOverflow?: (overflowCount: number, hiddenAvatars: React.ReactNode[]) => React.ReactNode;
    /**
     * Handler for when the overflow avatar is clicked.
     *
     * @memberof AvatarGroupProps
     */
    onOverflowClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
}
/**
 * **Parity AvatarGroup**.
 *
 * @see {@link https://parity-react.vercel.app/avatar Parity AvatarGroup}
 */
export declare const AvatarGroup: React.ForwardRefExoticComponent<AvatarGroupProps & React.RefAttributes<HTMLDivElement>>;
/**
 * Props for the AvatarTrigger component.
 *
 * Extends properties from the `AvatarProps`.
 */
export interface AvatarTriggerProps extends AvatarProps {
    /**
     * Whether the trigger is active.
     *
     * @default false
     * @memberof AvatarTriggerProps
     */
    active?: boolean;
}
/**
 * **Parity AvatarTrigger**.
 *
 * @see {@link https://parity-react.vercel.app/avatar Parity AvatarTrigger}
 */
export declare const AvatarTrigger: React.ForwardRefExoticComponent<AvatarTriggerProps & React.RefAttributes<HTMLDivElement>>;
export {};
//# sourceMappingURL=index.d.ts.map