{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "mc-avatar",
  "title": "MicroClub Avatar",
  "description": "An avatar component for MicroClub UI",
  "dependencies": [
    "@base-ui/react"
  ],
  "files": [
    {
      "path": "registry/ui/mc-avatar.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { Avatar as AvatarPrimitive } from '@base-ui/react/avatar';\n\nimport { cn } from '@/lib/utils';\n\nfunction McAvatar({\n  className,\n  size = 'default',\n  ...props\n}: AvatarPrimitive.Root.Props & {\n  size?: 'default' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n}) {\n  return (\n    <AvatarPrimitive.Root\n      data-slot=\"avatar\"\n      data-size={size}\n      className={cn(\n        'group/avatar relative flex size-8 shrink-0 rounded-full  select-none ',\n        ' data-[size=xs]:size-6  data-[size=sm]:size-8 data-[size=md]:size-10 data-[size=lg]:size-12  data-[size=xl]:size-14 data-[size=2xl]:size-16 dark:after:mix-blend-lighten',\n        ' ring-1 ring-border ring-inset ',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction McAvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {\n  return (\n    <AvatarPrimitive.Image\n      data-slot=\"avatar-image\"\n      className={cn('aspect-square size-full rounded-full object-cover ', className)}\n      {...props}\n    />\n  );\n}\n\nfunction McAvatarFallback({ className, ...props }: AvatarPrimitive.Fallback.Props) {\n  return (\n    <AvatarPrimitive.Fallback\n      data-slot=\"avatar-fallback\"\n      className={cn(\n        'flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ',\n        ' group-data-[size=xs]/avatar:text-xs group-data-[size=sm]/avatar:text-sm group-data-[size=md]/avatar:text-base group-data-[size=lg]/avatar:text-lg group-data-[size=xl]/avatar:text-xl group-data-[size=2xl]/avatar:text-2xl',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction McAvatarBadge({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"avatar-badge\"\n      className={cn(\n        'absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground ring-2 ring-background select-none empty:bg-success not-empty:bg-transparent overflow-hidden',\n        'group-data-[size=xs]/avatar:size-1.5 group-data-[size=xs]/avatar:[&>svg]:hidden',\n        'group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden',\n        'group-data-[size=md]/avatar:size-2.5 group-data-[size=md]/avatar:[&>svg]:size-2',\n        'group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2',\n        'group-data-[size=xl]/avatar:size-3.5 group-data-[size=xl]/avatar:[&>svg]:size-2.5',\n        'group-data-[size=2xl]/avatar:size-4 group-data-[size=2xl]/avatar:[&>svg]:size-3',\n        'not-empty:group-data-[size=xs]/avatar:size-2.5 group-data-[size=xs]/avatar:[&>svg]:hidden',\n        'not-empty:group-data-[size=sm]/avatar:size-3 group-data-[size=sm]/avatar:[&>svg]:hidden',\n        'not-empty:group-data-[size=md]/avatar:size-3.5 group-data-[size=md]/avatar:[&>svg]:size-2.5',\n        'not-empty:group-data-[size=lg]/avatar:size-4 group-data-[size=lg]/avatar:[&>svg]:size-2.5',\n        'not-empty:group-data-[size=xl]/avatar:size-4.5 group-data-[size=xl]/avatar:[&>svg]:size-3',\n        'not-empty:group-data-[size=2xl]/avatar:size-5 group-data-[size=2xl]/avatar:[&>svg]:size-3.5',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction McAvatarGroup({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"avatar-group\"\n      className={cn(\n        'group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction McAvatarGroupCount({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"avatar-group-count\"\n      className={cn(\n        'relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  McAvatar,\n  McAvatarImage,\n  McAvatarFallback,\n  McAvatarGroup,\n  McAvatarGroupCount,\n  McAvatarBadge,\n};\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}