@progress/kendo-themes-html
Version:
A collection of HTML helpers used for developing Kendo UI themes
40 lines (39 loc) • 1.56 kB
TypeScript
import { KendoComponent } from '../_types/component';
export declare const AVATAR_CLASSNAME = "k-avatar";
declare enum avatarType {
TEXT = "text",
IMAGE = "image",
ICON = "icon"
}
declare const states: ("active" | "focus" | "disabled" | "selected" | "hover")[];
declare const options: {
size: ("small" | "medium" | "large" | undefined)[];
rounded: ("small" | "none" | "medium" | "full" | "large" | undefined)[];
fillMode: ("outline" | "solid" | undefined)[];
themeColor: ("base" | "primary" | "secondary" | "tertiary" | undefined)[];
};
export type KendoAvatarOptions = {
size?: (typeof options.size)[number] | null;
rounded?: (typeof options.rounded)[number] | null;
fillMode?: (typeof options.fillMode)[number] | null;
themeColor?: (typeof options.themeColor)[number] | null;
};
export type KendoAvatarProps = KendoAvatarOptions & {
type?: avatarType | string;
border?: boolean;
};
export type KendoAvatarState = {
[K in (typeof states)[number]]?: boolean;
};
/**
* Avatar component - displays user profile images, icons, or initials.
*
* @accessibility
* - When using `type="image"` with an `<img>` child, the image MUST have an `alt` attribute
* - For decorative avatars, use `alt=""`
* - For meaningful avatars, use descriptive alt text: `alt="John Doe's profile picture"`
*
* @wcag 1.1.1 Non-text Content - images must have text alternatives
*/
export declare const Avatar: KendoComponent<KendoAvatarProps & KendoAvatarState & React.HTMLAttributes<HTMLDivElement>>;
export default Avatar;