@arolariu/components
Version:
🎨 70+ beautiful, accessible React components built on Base UI. TypeScript-first, CSS Modules styling, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡
91 lines • 3.31 kB
TypeScript
import { Avatar as BaseAvatar } from "@base-ui/react/avatar";
import * as React from "react";
/**
* Props for the shared avatar root.
*/
interface AvatarProps extends Omit<React.ComponentPropsWithRef<typeof BaseAvatar.Root>, "className"> {
/** Additional CSS classes merged with the avatar root styles. @default undefined */
className?: string;
}
/**
* Props for the shared avatar image.
*/
interface AvatarImageProps extends Omit<React.ComponentPropsWithRef<typeof BaseAvatar.Image>, "className"> {
/** Additional CSS classes merged with the avatar image styles. @default undefined */
className?: string;
}
/**
* Props for the shared avatar fallback.
*/
interface AvatarFallbackProps extends Omit<React.ComponentPropsWithRef<typeof BaseAvatar.Fallback>, "className"> {
/** Additional CSS classes merged with the avatar fallback styles. @default undefined */
className?: string;
}
/**
* Displays a user avatar container with shared sizing and shape styles.
*
* @remarks
* - Renders a `<span>` element by default
* - Built on {@link https://base-ui.com/react/components/avatar | Base UI Avatar}
* - Supports the `render` prop for element composition
* - Styling via CSS Modules with `--ac-*` custom properties
*
* @example Basic usage
* ```tsx
* <Avatar>
* <AvatarImage src="/profile.png" alt="Profile" />
* <AvatarFallback>AO</AvatarFallback>
* </Avatar>
* ```
*
* @see {@link https://base-ui.com/react/components/avatar | Base UI Documentation}
*/
declare const Avatar: React.ForwardRefExoticComponent<Omit<AvatarProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
/**
* Renders the primary avatar image inside the avatar root.
*
* @remarks
* - Renders an `<img>` element by default
* - Built on {@link https://base-ui.com/react/components/avatar | Base UI Avatar}
* - Supports the `render` prop for element composition
* - Styling via CSS Modules with `--ac-*` custom properties
*
* @example Basic usage
* ```tsx
* <AvatarImage src="/profile.png" alt="Profile" />
* ```
*
* @see {@link https://base-ui.com/react/components/avatar | Base UI Documentation}
*/
declare const AvatarImage: React.ForwardRefExoticComponent<Omit<AvatarImageProps, "ref"> & React.RefAttributes<HTMLImageElement>>;
/**
* Renders fallback content when the avatar image is unavailable.
*
* @remarks
* - Renders a `<span>` element by default
* - Built on {@link https://base-ui.com/react/components/avatar | Base UI Avatar}
* - Supports the `render` prop for element composition
* - Styling via CSS Modules with `--ac-*` custom properties
*
* @example Basic usage
* ```tsx
* <AvatarFallback>AO</AvatarFallback>
* ```
*
* @see {@link https://base-ui.com/react/components/avatar | Base UI Documentation}
*/
declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<AvatarFallbackProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
declare namespace Avatar {
type Props = AvatarProps;
type State = BaseAvatar.Root.State;
}
declare namespace AvatarImage {
type Props = AvatarImageProps;
type State = BaseAvatar.Image.State;
}
declare namespace AvatarFallback {
type Props = AvatarFallbackProps;
type State = BaseAvatar.Fallback.State;
}
export { Avatar, AvatarFallback, AvatarImage };
//# sourceMappingURL=avatar.d.ts.map