Avatar

import { defineConfig, type VariantProps } from 'cva';import { twMerge } from 'tailwind-merge';export const {  compose,  cva,  cx: cn,} = defineConfig({  hooks: {    onComplete: (className: string) => twMerge(className),  },});export type { VariantProps };

'use client';import { Avatar as AvatarPrimitive } from '@base-ui/react/avatar';import type * as React from 'react';import { cn } from '@/lib/utils';/** * Displays a user's profile picture, initials, or fallback icon. * Renders a `<span>` element. * * Documentation: [Caprice UI Avatar](https://caprice-ui.com/docs/components/avatar) * * API Reference: [Base UI Avatar](https://base-ui.com/react/components/avatar#root) */export namespace Root {  export type State = AvatarPrimitive.Root.State;  export type Props = React.ComponentProps<typeof AvatarPrimitive.Root>;}export function Root({ className, ...props }: Root.Props) {  return (    <AvatarPrimitive.Root      className={cn(        'relative inline-flex size-8 shrink-0 select-none items-center justify-center overflow-hidden rounded-full bg-background align-middle font-medium text-sm',        className      )}      data-slot="avatar"      {...props}    />  );}/** * The image to be displayed in the avatar. * Renders an `<img>` element. * * Documentation: [Caprice UI Avatar](https://caprice-ui.com/docs/components/avatar) * * API Reference: [Base UI Avatar](https://base-ui.com/react/components/avatar#image) */export namespace Image {  export type Props = React.ComponentProps<typeof AvatarPrimitive.Image>;}export function Image({ className, ...props }: Image.Props) {  return (    <AvatarPrimitive.Image      className={cn('size-full object-cover', className)}      data-slot="avatar-image"      {...props}    />  );}/** * Rendered when the image fails to load or when no image is provided. * Renders a `<span>` element. * * Documentation: [Caprice UI Avatar](https://caprice-ui.com/docs/components/avatar) * * API Reference: [Base UI Avatar](https://base-ui.com/react/components/avatar#fallback) */export namespace Fallback {  export type Props = React.ComponentProps<typeof AvatarPrimitive.Fallback>;}export function Fallback({ className, delay = 2000, ...props }: Fallback.Props) {  return (    <AvatarPrimitive.Fallback      className={cn('flex size-full items-center justify-center rounded-full bg-muted', className)}      data-slot="avatar-fallback"      delay={delay}      {...props}    />  );}