infinity-ui-elements
Version:
A React TypeScript component library with Tailwind CSS design system
65 lines • 2.06 kB
TypeScript
import * as React from "react";
import { type VariantProps } from "class-variance-authority";
type AvatarColor = "a1" | "a2" | "a3" | "a4" | "a5";
type AvatarAppearance = "default" | "inverse";
declare const avatarVariants: (props?: ({
color?: "a1" | "a2" | "a3" | "a4" | "a5" | null | undefined;
size?: "medium" | "small" | "xlarge" | null | undefined;
} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof avatarVariants> {
/**
* The color variant of the avatar
*/
color?: AvatarColor;
/**
* Whether to invert the background/text colors
*/
appearance?: AvatarAppearance;
/**
* The size of the avatar
*/
size?: "small" | "medium" | "xlarge";
/**
* The initials or text to display in the avatar
*/
children?: React.ReactNode;
/**
* Image source for the avatar (takes precedence over children)
*/
src?: string;
/**
* Alt text for the avatar image
*/
alt?: string;
/**
* Whether to show a status indicator
*/
showStatus?: boolean;
/**
* The color of the status indicator
*/
statusColor?: "positive" | "negative" | "notice" | "info" | "neutral";
/**
* Custom icon or content for the status indicator
*/
statusIcon?: React.ReactNode;
/**
* Optional text label to display next to the avatar
*/
label?: string;
/**
* Optional trailing component (icon or other element) to display after the label
*/
trailingComponent?: React.ReactNode;
/**
* Custom class name for the avatar
*/
className?: string;
/**
* Custom class name for the container (when label or trailingComponent is provided)
*/
containerClassName?: string;
}
declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLDivElement>>;
export { Avatar, avatarVariants };
//# sourceMappingURL=Avatar.d.ts.map