{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "avatar",
  "type": "registry:ui",
  "title": "Avatar",
  "description": "A postage-stamp or postmark avatar.",
  "categories": [
    "core"
  ],
  "files": [
    {
      "path": "ui/avatar.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Avatar as AvatarPrimitive } from \"radix-ui\";\n\nconst SIZES = { sm: 32, md: 44, lg: 64, xl: 88 } as const;\n\nexport interface AvatarProps extends React.ComponentProps<typeof AvatarPrimitive.Root> {\n  size?: keyof typeof SIZES;\n  /** stamp: perforated postage stamp · postmark: round with an inked ring */\n  shape?: \"stamp\" | \"postmark\";\n}\n\nconst perf = (r: number) =>\n  `radial-gradient(${r}px, #0000 98%, #000) round ${-1.5 * r}px ${-1.5 * r}px / ${3 * r}px ${3 * r}px, linear-gradient(#000 0 0) no-repeat 50% / calc(100% - ${3 * r}px) calc(100% - ${3 * r}px)`;\n\n/** A postage-stamp avatar. Pair with AvatarImage and AvatarFallback. */\nexport function Avatar({ size = \"md\", shape = \"stamp\", className = \"\", style, children, ...props }: AvatarProps) {\n  const px = SIZES[size];\n  if (shape === \"postmark\") {\n    return (\n      <AvatarPrimitive.Root\n        className={`relative inline-flex shrink-0 overflow-hidden rounded-full p-[3px] ${className}`}\n        style={{ width: px, height: px, fontSize: px * 0.4, boxShadow: \"0 0 0 1.5px var(--ink-muted), inset 0 0 0 1px var(--edge)\", ...style }}\n        {...props}\n      >\n        <span className=\"relative flex size-full overflow-hidden rounded-full\">{children}</span>\n      </AvatarPrimitive.Root>\n    );\n  }\n  const r = Math.max(2, Math.round(px / 16));\n  return (\n    <span className={`inline-flex shrink-0 ${className}`} style={{ filter: \"drop-shadow(0 1px 2px rgb(0 0 0 / .25))\" }}>\n      <AvatarPrimitive.Root\n        className=\"relative inline-flex bg-(--paper-raised)\"\n        style={{ width: px, height: px * 1.12, fontSize: px * 0.4, padding: 2 * r, mask: perf(r), WebkitMask: perf(r), ...style }}\n        {...props}\n      >\n        <span className=\"relative flex size-full overflow-hidden\">{children}</span>\n      </AvatarPrimitive.Root>\n    </span>\n  );\n}\n\nexport function AvatarImage({ className = \"\", ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>) {\n  return <AvatarPrimitive.Image className={`size-full object-cover ${className}`} {...props} />;\n}\n\nexport function AvatarFallback({ className = \"\", style, ...props }: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {\n  return (\n    <AvatarPrimitive.Fallback\n      className={`flex size-full items-center justify-center bg-(--pen) text-[0.9em] font-semibold italic text-(--pen-ink) ${className}`}\n      style={{ fontFamily: \"var(--font-display, Georgia, serif)\", ...style }}\n      {...props}\n    />\n  );\n}\n"
    }
  ],
  "dependencies": [
    "radix-ui"
  ]
}