@als-tp/als-react-ts-ui
Version:
A comprehensive React TypeScript UI component library built with Base UI by ALSInnovation
77 lines • 2.05 kB
TypeScript
import * as React from "react";
/**
* Avatar size variants
*/
type AvatarSize = "sm" | "md" | "lg" | "xl";
/**
* Avatar variant styles
*/
type AvatarVariant = "circular" | "rounded" | "square";
/**
* Avatar status indicator
*/
type AvatarStatus = "online" | "offline" | "away" | "busy";
/**
* Props for ALSAvatar Root component
*/
interface ALSAvatarRootProps extends React.ComponentPropsWithoutRef<"span"> {
/**
* Size of the avatar
* @default "md"
*/
size?: AvatarSize;
/**
* Visual variant of the avatar
* @default "circular"
*/
variant?: AvatarVariant;
/**
* Status indicator
*/
status?: AvatarStatus;
/**
* Additional className
*/
className?: string;
}
/**
* Props for ALSAvatar Image component
*/
interface ALSAvatarImageProps extends React.ComponentPropsWithoutRef<"img"> {
/**
* Image source URL
*/
src: string;
/**
* Alt text for the image
*/
alt: string;
}
/**
* Props for ALSAvatar Fallback component
*/
interface ALSAvatarFallbackProps extends React.ComponentPropsWithoutRef<"span"> {
/**
* Fallback content (usually initials)
*/
children: React.ReactNode;
}
/**
* ALSAvatar Compound Component
* Displays user profile pictures or initials with various sizes, variants and status indicators
*
* @example
* ```tsx
* <ALSAvatar.Root size="md" variant="circular" status="online">
* <ALSAvatar.Image src="/avatar.jpg" alt="User Name" />
* <ALSAvatar.Fallback>UN</ALSAvatar.Fallback>
* </ALSAvatar.Root>
* ```
*/
export declare const ALSAvatar: {
Root: React.ForwardRefExoticComponent<ALSAvatarRootProps & React.RefAttributes<HTMLSpanElement>>;
Image: React.ForwardRefExoticComponent<ALSAvatarImageProps & React.RefAttributes<HTMLImageElement>>;
Fallback: React.ForwardRefExoticComponent<ALSAvatarFallbackProps & React.RefAttributes<HTMLSpanElement>>;
};
export type { ALSAvatarRootProps, ALSAvatarImageProps, ALSAvatarFallbackProps };
//# sourceMappingURL=index.d.ts.map