{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "avatar",
  "title": "avatar",
  "dependencies": [
    "@radix-ui/react-avatar@^1",
    "class-variance-authority@^0.7"
  ],
  "registryDependencies": [
    "@dwellir/dwellir-theme",
    "@dwellir/utils"
  ],
  "files": [
    {
      "path": "components/ui/avatar.tsx",
      "content": "'use client';\n\nimport * as AvatarPrimitive from '@radix-ui/react-avatar';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type { ComponentProps } from 'react';\nimport { cn } from '@/lib/utils';\n\n/* The size sets the circle and the initials' type; the fallback inherits it. */\nconst avatarVariants = cva('group/avatar relative flex shrink-0 rounded-full select-none', {\n  variants: {\n    size: {\n      /* Beside a name in a table row or a list. */\n      sm: 'size-6 text-xs',\n      /* The account button in an app header. */\n      md: 'size-8 text-sm',\n      /* A profile or team member card. */\n      lg: 'size-12 text-base',\n    },\n  },\n  defaultVariants: { size: 'md' },\n});\n\ntype AvatarSize = NonNullable<VariantProps<typeof avatarVariants>['size']>;\n\nfunction Avatar({\n  className,\n  size,\n  ...props\n}: ComponentProps<typeof AvatarPrimitive.Root> & {\n  /* default is upstream's name for md. */\n  size?: AvatarSize | 'default' | null;\n}) {\n  const shown = size === 'default' || size == null ? 'md' : size;\n  return (\n    <AvatarPrimitive.Root\n      data-slot=\"avatar\"\n      data-size={shown}\n      className={cn(avatarVariants({ size: shown }), className)}\n      {...props}\n    />\n  );\n}\n\n/*\n * The root does not clip, so a badge can sit on its edge: the image and the\n * fallback round themselves. Give the image the person's name as alt.\n */\nfunction AvatarImage({ className, ...props }: ComponentProps<typeof AvatarPrimitive.Image>) {\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\n/* The initials, while the image loads or when there is none: the badge's accent tint. */\nfunction AvatarFallback({ className, ...props }: ComponentProps<typeof AvatarPrimitive.Fallback>) {\n  return (\n    <AvatarPrimitive.Fallback\n      data-slot=\"avatar-fallback\"\n      className={cn(\n        'flex size-full items-center justify-center rounded-full bg-accent font-label font-bold text-accent-foreground uppercase',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/*\n * A mark on the avatar's corner, such as a presence or a role icon. The ink\n * keeps 3:1 against the ground; the ring parts it from the photo. The small\n * avatar hides the icon and keeps the mark.\n */\nfunction AvatarBadge({ className, ...props }: 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-accent-ink text-background ring-2 ring-background select-none',\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.5 group-data-[size=lg]/avatar:[&>svg]:size-2.5',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/*\n * Avatars that overlap, such as a team. The ring parts each one from the next;\n * the ground under a fallback keeps its tint from showing the avatar behind.\n */\nfunction AvatarGroup({ className, ...props }: 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]:bg-background *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/* The last circle of a group: how many more people, such as +3. Its size follows the avatars'. */\nfunction AvatarGroupCount({ className, ...props }: 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-card font-label text-sm font-bold text-muted-foreground ring-2 ring-background [&>svg]:size-4',\n        'group-has-data-[size=sm]/avatar-group:size-6 group-has-data-[size=sm]/avatar-group:text-xs group-has-data-[size=sm]/avatar-group:[&>svg]:size-3',\n        'group-has-data-[size=lg]/avatar-group:size-12 group-has-data-[size=lg]/avatar-group:text-base group-has-data-[size=lg]/avatar-group:[&>svg]:size-5',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Avatar,\n  AvatarBadge,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n  avatarVariants,\n};\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}