{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "avatar",
  "title": "Avatar",
  "description": "Avatars with tinted initials, presence dots and fanning groups.",
  "dependencies": [
    "class-variance-authority",
    "radix-ui"
  ],
  "registryDependencies": [
    "utils",
    "https://ui.cuelark.com/r/theme.json"
  ],
  "files": [
    {
      "path": "src/registry/cuelark/ui/avatar.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Avatar as AvatarPrimitive } from \"radix-ui\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst avatarVariants = cva(\"relative flex shrink-0 overflow-visible select-none\", {\n  variants: {\n    size: { xs: \"size-6 text-[0.625rem]\", sm: \"size-8 text-xs\", md: \"size-10 text-sm\", lg: \"size-14 text-base\", xl: \"size-20 text-xl\" },\n    shape: { circle: \"rounded-full\", square: \"rounded-lg\" },\n  },\n  defaultVariants: { size: \"md\", shape: \"circle\" },\n});\n\ntype AvatarProps = React.ComponentProps<typeof AvatarPrimitive.Root> &\n  VariantProps<typeof avatarVariants> & {\n    /** A presence dot at the bottom-right corner. */\n    status?: \"online\" | \"away\" | \"busy\" | \"offline\";\n  };\n\nconst statusColor = { online: \"bg-success\", away: \"bg-warning\", busy: \"bg-destructive\", offline: \"bg-muted-foreground\" };\n\nfunction Avatar({ className, size, shape, status, children, ...props }: AvatarProps) {\n  return (\n    <AvatarPrimitive.Root data-slot=\"avatar\" data-shape={shape ?? \"circle\"} className={cn(avatarVariants({ size, shape }), className)} {...props}>\n      {children}\n      {status && (\n        <span\n          data-slot=\"avatar-status\"\n          role=\"img\"\n          aria-label={status}\n          className={cn(\"absolute end-0 bottom-0 size-[28%] min-h-2 min-w-2 rounded-full ring-2 ring-background\", statusColor[status])}\n        />\n      )}\n    </AvatarPrimitive.Root>\n  );\n}\n\nfunction AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>) {\n  return <AvatarPrimitive.Image data-slot=\"avatar-image\" className={cn(\"aspect-square size-full rounded-[inherit] object-cover\", className)} {...props} />;\n}\n\n/** Shows `name`'s initials (deterministically tinted) while the image loads or if it fails. */\nfunction AvatarFallback({ className, name, children, ...props }: React.ComponentProps<typeof AvatarPrimitive.Fallback> & { name?: string }) {\n  const initials = name\n    ?.split(/\\s+/)\n    .filter(Boolean)\n    .slice(0, 2)\n    .map((w) => w[0]!.toUpperCase())\n    .join(\"\");\n  const hue = name ? [...name].reduce((h, c) => (h * 31 + c.charCodeAt(0)) % 360, 7) : 263;\n  return (\n    <AvatarPrimitive.Fallback\n      data-slot=\"avatar-fallback\"\n      className={cn(\"flex size-full items-center justify-center rounded-[inherit] font-medium ring-1 ring-inset ring-black/5\", className)}\n      style={{ background: `oklch(0.93 0.05 ${hue})`, color: `oklch(0.4 0.12 ${hue})` }}\n      {...props}\n    >\n      {children ?? initials}\n    </AvatarPrimitive.Fallback>\n  );\n}\n\n/** Overlapping avatars that fan apart on hover; extra people collapse into a \"+N\" tile. */\nfunction AvatarGroup({ className, max, children, ...props }: React.ComponentProps<\"div\"> & { max?: number }) {\n  const items = React.Children.toArray(children);\n  const shown = max ? items.slice(0, max) : items;\n  const rest = items.length - shown.length;\n  return (\n    <div\n      data-slot=\"avatar-group\"\n      className={cn(\n        \"group/avatars flex items-center *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background *:data-[slot=avatar]:transition-[margin] *:data-[slot=avatar]:duration-300 *:data-[slot=avatar]:ease-cue *:data-[slot=avatar]:not-first:-ms-2.5 hover:*:data-[slot=avatar]:not-first:-ms-1\",\n        className,\n      )}\n      {...props}\n    >\n      {shown}\n      {rest > 0 && (\n        <span data-slot=\"avatar\" className=\"relative z-0 flex size-10 shrink-0 items-center justify-center rounded-full bg-muted font-mono text-xs text-muted-foreground ring-2 ring-background\">\n          +{rest}\n        </span>\n      )}\n    </div>\n  );\n}\n\nexport { Avatar, AvatarImage, AvatarFallback, AvatarGroup };\nexport type { AvatarProps };\n",
      "type": "registry:ui"
    }
  ],
  "docs": "Docs and examples: https://ui.cuelark.com/components/avatar",
  "categories": [
    "display"
  ],
  "type": "registry:ui"
}