Avatar

import { defineConfig, getSchema, type VariantProps } from 'cva';
import { twMerge } from 'tailwind-merge';

export const { cva, cx: cn } = defineConfig({
  hooks: {
    onComplete: (className: string) => twMerge(className),
  },
});

export type { VariantProps };
export { getSchema };

'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}
    />
  );
}