Avatar Group

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 { mergePropsN } from '@base-ui/react/merge-props';import { useRender } from '@base-ui/react/use-render';import { cn } from '@/lib/utils';/** * Displays a group of avatars. * Renders a `<div>` element. * * Documentation: [Caprice UI Avatar Group](https://caprice-ui.com/docs/components/avatar-group) */export namespace Root {  export type Props = useRender.ComponentProps<'div'>;}export function Root({ className, render, ...props }: Root.Props) {  const defaultProps: useRender.ElementProps<'div'> & { 'data-slot'?: string } = {    'data-slot': 'avatar-group',    className: cn('flex items-center -space-x-1.5', className),  };  return useRender({    render,    defaultTagName: 'div',    props: mergePropsN<'div'>([defaultProps, props]),  });}