{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "avatar",
  "title": "Avatar",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-react/components/avatar/avatar.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport * as AvatarPrimitive from '@radix-ui/react-avatar'\nimport { cn } from '@/lib/utils'\nimport { avatarVariants, avatarFallbackVariants } from './avatar.variants'\n\n/* ------------------------------------------------------------------ */\n/* Avatar (Root)                                                       */\n/* ------------------------------------------------------------------ */\n\nexport interface AvatarProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>, 'color'> {\n  size?: 'xs' | 'sm' | 'default' | 'lg' | 'xl' | '2xl'\n  rounded?: 'none' | 'sm' | 'default' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n  color?: 'default' | 'primary' | 'secondary' | 'destructive' | 'success' | 'warning' | 'info' | 'error' | 'muted'\n  variant?: 'default' | 'outlined' | 'soft'\n  tile?: boolean\n  disabled?: boolean\n  loading?: boolean\n}\n\nconst Avatar = React.forwardRef<React.ElementRef<typeof AvatarPrimitive.Root>, AvatarProps>(\n  ({ className, size, rounded, color, variant, tile = false, disabled = false, loading = false, ...props }, ref) => (\n    <AvatarPrimitive.Root\n      ref={ref}\n      data-uipkge=\"\"\n      data-slot=\"avatar\"\n      className={cn(\n        avatarVariants({ size, rounded, color, variant }),\n        tile ? 'rounded-none' : '',\n        disabled ? 'opacity-50 cursor-not-allowed' : '',\n        loading ? 'animate-pulse' : '',\n        className,\n      )}\n      {...props}\n    />\n  ),\n)\nAvatar.displayName = 'Avatar'\n\n/* ------------------------------------------------------------------ */\n/* AvatarImage                                                         */\n/* ------------------------------------------------------------------ */\n\nconst AvatarImage = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Image>,\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>\n>(({ className, ...props }, ref) => (\n  <AvatarPrimitive.Image\n    ref={ref}\n    data-uipkge=\"\"\n    data-slot=\"avatar-image\"\n    className={cn('aspect-square size-full object-cover', className)}\n    {...props}\n  />\n))\nAvatarImage.displayName = 'AvatarImage'\n\n/* ------------------------------------------------------------------ */\n/* AvatarFallback                                                      */\n/* ------------------------------------------------------------------ */\n\nexport interface AvatarFallbackProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>, 'color'> {\n  size?: 'xs' | 'sm' | 'default' | 'lg' | 'xl' | '2xl'\n  color?: 'default' | 'primary' | 'secondary' | 'destructive' | 'success' | 'warning' | 'info' | 'error' | 'muted'\n  text?: string\n}\n\nconst AvatarFallback = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Fallback>,\n  AvatarFallbackProps\n>(({ className, size = 'default', color = 'default', text, children, ...props }, ref) => (\n  <AvatarPrimitive.Fallback\n    ref={ref}\n    data-uipkge=\"\"\n    data-slot=\"avatar-fallback\"\n    className={cn(avatarFallbackVariants({ size, color }), className)}\n    {...props}\n  >\n    {text ?? children}\n  </AvatarPrimitive.Fallback>\n))\nAvatarFallback.displayName = 'AvatarFallback'\n\n/* ------------------------------------------------------------------ */\n/* AvatarGroup — custom layout wrapper (not a Radix primitive)         */\n/* ------------------------------------------------------------------ */\n\nconst overflowSizeClasses: Record<NonNullable<AvatarGroupProps['size']>, string> = {\n  xs: 'size-4 text-[8px]',\n  sm: 'size-6 text-xs',\n  default: 'size-8 text-sm',\n  lg: 'size-12 text-base',\n  xl: 'size-16 text-lg',\n  '2xl': 'size-20 text-xl',\n}\n\nexport interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  max?: number\n  overlap?: boolean\n  size?: 'xs' | 'sm' | 'default' | 'lg' | 'xl' | '2xl'\n  total?: number\n  /** Custom overflow indicator. Receives the hidden count; replaces the\n   *  default `+N` badge when provided. */\n  overflow?: (count: number) => React.ReactNode\n}\n\nconst AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(\n  ({ className, max, overlap = true, size = 'default', total, overflow, children, ...props }, ref) => {\n    const items = React.Children.toArray(children)\n    const count = items.length\n    const showOverflow = max != null && count > max\n    const visible = showOverflow ? items.slice(0, max) : items\n    const overflowCount = count - (max ?? count) + 1\n\n    return (\n      <div\n        ref={ref}\n        data-uipkge=\"\"\n        data-slot=\"avatar-group\"\n        className={cn('flex items-center', overlap ? '-space-x-2' : 'gap-1', className)}\n        {...props}\n      >\n        {visible}\n        {showOverflow ? (\n          <div\n            className={cn(\n              'bg-muted ring-background relative flex shrink-0 overflow-hidden rounded-full ring-2',\n              overflowSizeClasses[size],\n            )}\n          >\n            {overflow ? (\n              overflow(overflowCount)\n            ) : (\n              <span className=\"flex size-full items-center justify-center font-medium\">+{overflowCount}</span>\n            )}\n          </div>\n        ) : null}\n      </div>\n    )\n  },\n)\nAvatarGroup.displayName = 'AvatarGroup'\n\nexport { Avatar, AvatarImage, AvatarFallback, AvatarGroup }\n",
      "type": "registry:ui",
      "target": "~/components/ui/avatar/avatar.tsx"
    },
    {
      "path": "packages/registry-react/components/avatar/avatar.variants.ts",
      "content": "import type { VariantProps } from 'class-variance-authority'\nimport { cva } from 'class-variance-authority'\n\n/**\n * Variant definitions live in their own file (rather than the package\n * `index.ts` or inline in the SFC) so `Avatar.vue` / `AvatarFallback.vue`\n * can `import { avatarVariants } from './avatar.variants'` without\n * creating a circular dependency back through the index. The circular\n * form caused intermittent `$setup.avatarVariants is not a function`\n * errors during dev SSR.\n */\nexport const avatarVariants = cva('relative flex shrink-0 overflow-hidden', {\n  variants: {\n    size: {\n      xs: 'size-4',\n      sm: 'size-6',\n      default: 'size-8',\n      lg: 'size-12',\n      xl: 'size-16',\n      '2xl': 'size-20',\n    },\n    rounded: {\n      none: 'rounded-none',\n      sm: 'rounded-sm',\n      default: 'rounded-full',\n      md: 'rounded-md',\n      lg: 'rounded-lg',\n      xl: 'rounded-xl',\n      '2xl': 'rounded-2xl',\n      '3xl': 'rounded-3xl',\n      full: 'rounded-full',\n    },\n    color: {\n      default: '',\n      primary: 'bg-primary text-primary-foreground',\n      secondary: 'bg-secondary text-secondary-foreground',\n      destructive: 'bg-destructive text-destructive-foreground',\n      success: 'bg-[var(--success)] text-white dark:text-black',\n      warning: 'bg-[var(--warning)] text-black',\n      info: 'bg-[var(--info)] text-white dark:text-black',\n      error: 'bg-destructive text-white dark:text-black',\n      muted: 'bg-muted text-muted-foreground',\n    },\n    variant: {\n      default: '',\n      outlined: 'border-2 border-current',\n      soft: 'bg-opacity-20',\n    },\n  },\n  compoundVariants: [\n    { color: 'primary', variant: 'soft', class: 'bg-primary/20 text-primary' },\n    { color: 'secondary', variant: 'soft', class: 'bg-secondary/20 text-secondary-foreground' },\n    { color: 'destructive', variant: 'soft', class: 'bg-destructive/20 text-destructive' },\n    { color: 'success', variant: 'soft', class: 'bg-[var(--success)]/20 text-[var(--success)]' },\n    { color: 'warning', variant: 'soft', class: 'bg-[var(--warning)]/20 text-[var(--warning)]' },\n    { color: 'info', variant: 'soft', class: 'bg-[var(--info)]/20 text-[var(--info)]' },\n    { color: 'error', variant: 'soft', class: 'bg-destructive/20 text-destructive' },\n  ],\n  defaultVariants: {\n    size: 'default',\n    rounded: 'default',\n    color: 'default',\n  },\n})\n\nexport type AvatarVariants = VariantProps<typeof avatarVariants>\n\nexport const avatarFallbackVariants = cva(\n  'flex size-full items-center justify-center rounded-full bg-muted font-medium',\n  {\n    variants: {\n      size: {\n        xs: 'text-[8px]',\n        sm: 'text-xs',\n        default: 'text-sm',\n        lg: 'text-base',\n        xl: 'text-lg',\n        '2xl': 'text-xl',\n      },\n      color: {\n        default: '',\n        primary: 'bg-primary text-primary-foreground',\n        secondary: 'bg-secondary text-secondary-foreground',\n        destructive: 'bg-destructive text-destructive-foreground',\n        success: 'bg-[var(--success)] text-white dark:text-black',\n        warning: 'bg-[var(--warning)] text-black',\n        info: 'bg-[var(--info)] text-white dark:text-black',\n        error: 'bg-destructive text-white dark:text-black',\n        muted: 'bg-muted text-muted-foreground',\n      },\n    },\n    defaultVariants: {\n      size: 'default',\n      color: 'default',\n    },\n  },\n)\n\nexport type AvatarFallbackVariants = VariantProps<typeof avatarFallbackVariants>\n",
      "type": "registry:ui",
      "target": "~/components/ui/avatar/avatar.variants.ts"
    },
    {
      "path": "packages/registry-react/components/avatar/index.ts",
      "content": "export { Avatar, AvatarImage, AvatarFallback, AvatarGroup, type AvatarProps, type AvatarFallbackProps, type AvatarGroupProps } from './avatar'\n\n// Re-export variant API from the sibling file (kept separate to mirror the\n// Vue registry convention and avoid a component <-> index circular import).\nexport {\n  avatarVariants,\n  avatarFallbackVariants,\n  type AvatarVariants,\n  type AvatarFallbackVariants,\n} from './avatar.variants'\n",
      "type": "registry:ui",
      "target": "~/components/ui/avatar/index.ts"
    }
  ],
  "dependencies": [
    "class-variance-authority",
    "@radix-ui/react-avatar"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "description": "Round or rounded-square user image with a fallback that shows initials or an icon when the image is missing or fails to load. Sizes from xs to 2xl, optional status dot, and a group composition for stacked avatar lists.",
  "categories": [
    "data-display"
  ]
}