{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "avatar",
  "type": "registry:ui",
  "title": "Avatar",
  "description": "A person or workspace picture that falls back to initials while loading or when the image fails.",
  "dependencies": [
    "@radix-ui/react-avatar@^1.3.1",
    "tailwind-variants@^1.0.0"
  ],
  "registryDependencies": [
    "https://junco.madebytobi.com/r/junco-theme.json",
    "https://junco.madebytobi.com/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/junco/ui/avatar.tsx",
      "type": "registry:ui",
      "content": "import * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"@/lib/utils\";\nimport * as AvatarPrimitive from \"@radix-ui/react-avatar\";\n\nexport const avatarVariants = tv({\n  slots: {\n    root: \"relative inline-flex shrink-0 overflow-hidden rounded-pill border border-border bg-muted align-middle\",\n    image: \"size-full object-cover\",\n    fallback: \"grid size-full place-items-center font-medium text-muted-foreground select-none\",\n  },\n  variants: {\n    size: {\n      xs: { root: \"size-6\", fallback: \"text-[10px]\" },\n      sm: { root: \"size-8\", fallback: \"text-xs\" },\n      md: { root: \"size-10\", fallback: \"text-sm\" },\n      lg: { root: \"size-12\", fallback: \"text-base\" },\n    },\n    shape: {\n      circle: {},\n      square: { root: \"rounded-card\" },\n    },\n  },\n  defaultVariants: { size: \"md\", shape: \"circle\" },\n});\n\n/** \"Ada Lovelace\" -> \"AL\", \"tobi\" -> \"T\". */\nexport function initials(name: string): string {\n  const parts = name.trim().split(/\\s+/).filter(Boolean);\n  const first = parts[0]?.[0] ?? \"\";\n  const last = parts.length > 1 ? (parts[parts.length - 1]?.[0] ?? \"\") : \"\";\n  return (first + last).toUpperCase();\n}\n\nexport interface AvatarProps\n  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,\n    VariantProps<typeof avatarVariants> {\n  src?: string;\n  /** The person's name. Used as the image alt text and for fallback initials. */\n  name?: string;\n  /** Shown while the image loads or when it fails. Defaults to the name's initials. */\n  fallback?: React.ReactNode;\n  classNames?: { root?: string; image?: string; fallback?: string };\n}\n\n/** A person or workspace picture that falls back to initials while loading or when the image fails. */\nexport const Avatar = React.forwardRef<React.ElementRef<typeof AvatarPrimitive.Root>, AvatarProps>(\n  ({ className, classNames, size, shape, src, name, fallback, ...props }, ref) => {\n    const styles = avatarVariants({ size, shape });\n    return (\n      <AvatarPrimitive.Root\n        ref={ref}\n        className={styles.root({ className: cn(classNames?.root, className) })}\n        {...props}\n      >\n        {src && <AvatarPrimitive.Image src={src} alt={name ?? \"\"} className={styles.image({ className: classNames?.image })} />}\n        <AvatarPrimitive.Fallback\n          className={styles.fallback({ className: classNames?.fallback })}\n          role={name ? \"img\" : undefined}\n          aria-label={name}\n        >\n          {fallback ?? (name ? <span aria-hidden>{initials(name)}</span> : null)}\n        </AvatarPrimitive.Fallback>\n      </AvatarPrimitive.Root>\n    );\n  },\n);\nAvatar.displayName = \"Avatar\";\n"
    }
  ],
  "docs": "Docs and examples: https://junco.madebytobi.com/docs/components/avatar",
  "meta": {
    "hash": "c27af57118ba098c",
    "source": "packages/react/src/components/avatar.tsx",
    "exports": [
      "avatarVariants",
      "initials",
      "AvatarProps",
      "Avatar"
    ],
    "props": {
      "Avatar": {
        "extends": "React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>, VariantProps<typeof avatarVariants>",
        "props": [
          {
            "name": "src",
            "optional": true,
            "type": "string"
          },
          {
            "name": "name",
            "optional": true,
            "type": "string",
            "description": "The person's name. Used as the image alt text and for fallback initials."
          },
          {
            "name": "fallback",
            "optional": true,
            "type": "React.ReactNode",
            "description": "Shown while the image loads or when it fails. Defaults to the name's initials."
          },
          {
            "name": "classNames",
            "optional": true,
            "type": "{ root?: string; image?: string; fallback?: string }"
          }
        ]
      }
    },
    "variants": {
      "variants": {
        "size": [
          "xs",
          "sm",
          "md",
          "lg"
        ],
        "shape": [
          "circle",
          "square"
        ]
      },
      "defaultVariants": {
        "size": "md",
        "shape": "circle"
      }
    },
    "docsUrl": "https://junco.madebytobi.com/docs/components/avatar"
  }
}