{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "avatar",
  "title": "Avatar",
  "description": "A avatar component.",
  "dependencies": [
    "class-variance-authority"
  ],
  "files": [
    {
      "path": "registry/default/avatar/avatar.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Avatar as AvatarBase } from \"@base-ui/react/avatar\";\nimport { cva, VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst avatarVariants = cva(\n  \"bg-muted relative flex shrink-0 overflow-hidden rounded-full\",\n  {\n    variants: {\n      size: {\n        sm: \"size-8 text-sm\",\n        md: \"size-10\",\n        lg: \"size-12 text-lg\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  },\n);\n\nfunction Avatar({\n  className,\n  size,\n  ...props\n}: React.ComponentProps<typeof AvatarBase.Root> &\n  VariantProps<typeof avatarVariants>) {\n  return (\n    <AvatarBase.Root\n      data-slot=\"avatar\"\n      className={cn(avatarVariants({ size }), className)}\n      {...props}\n    />\n  );\n}\n\nfunction AvatarImage({\n  className,\n  ...props\n}: React.ComponentProps<typeof AvatarBase.Image>) {\n  return (\n    <AvatarBase.Image\n      data-slot=\"avatar-image\"\n      className={cn(\n        // Stacked over the fallback. `invisible` (not `hidden`) while loading or\n        // failed, so `keepMounted` + `loading=\"lazy\"` can still intersect and fetch.\n        \"absolute inset-0 size-full object-cover data-error:invisible data-loading:invisible\",\n        // Also hidden while a fallback is mounted (covers pre-hydration SSR, before\n        // data-loading is set): stacked, its anti-aliased edge bleeds past the fallback's.\n        \"[[data-slot=avatar]:has(>[data-slot=avatar-fallback])>&]:invisible\",\n        // data-loading:opacity-0 so a `keepMounted` image fades in from 0, not 1 → 0 → 1.\n        \"transition-opacity duration-200 ease-out data-loading:opacity-0 data-starting-style:opacity-0 motion-reduce:transition-none\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AvatarFallback({\n  className,\n  ...props\n}: React.ComponentProps<typeof AvatarBase.Fallback>) {\n  return (\n    <AvatarBase.Fallback\n      data-slot=\"avatar-fallback\"\n      className={cn(\n        \"bg-muted absolute inset-0 flex size-full items-center justify-center rounded-full select-none\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Avatar, AvatarImage, AvatarFallback };\n",
      "type": "registry:ui",
      "target": "components/ui/cubby-ui/avatar.tsx"
    }
  ],
  "type": "registry:ui"
}