{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "avatar",
  "title": "Avatar",
  "description": "An image element with a fallback for representing the user.",
  "dependencies": [
    "@base-ui/react",
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [
    "https://optics.agusmayol.com.ar/r/tooltip.json",
    "https://optics.agusmayol.com.ar/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/optics/avatar.jsx",
      "content": "\"use client\";\n\nimport Image from \"next/image\";\nimport * as React from \"react\";\nimport { Avatar as AvatarPrimitive } from \"@base-ui/react/avatar\";\n\nimport {\n\tTooltip,\n\tTooltipContent,\n\tTooltipTrigger,\n} from \"@/registry/optics/tooltip\";\nimport { cn } from \"@/lib/utils\";\n\nconst AvatarContext = React.createContext({\n\tloaded: false,\n\tsetLoaded: () => {},\n});\n\nfunction Avatar({\n\tclassName = \"\",\n\tsize = \"default\",\n\ttitle,\n\ttooltipSide = \"top\",\n\ttooltipSideOffset = 4,\n\ttooltipAlign = \"center\",\n\ttooltipAlignOffset = 0,\n\tchildren,\n\t...props\n}) {\n\tconst [loaded, setLoaded] = React.useState(false);\n\n\tconst renderAvatar = (triggerProps = {}) => {\n\t\tconst {\n\t\t\tclassName: triggerClassName,\n\t\t\tref: triggerRef,\n\t\t\t...triggerRest\n\t\t} = triggerProps;\n\n\t\treturn (\n\t\t\t<AvatarContext.Provider value={{ loaded, setLoaded }}>\n\t\t\t\t<AvatarPrimitive.Root\n\t\t\t\t\tref={triggerRef}\n\t\t\t\t\tdata-slot=\"avatar\"\n\t\t\t\t\tdata-size={size}\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"ring-background ring-2 size-8 rounded-full after:rounded-full squircle-none data-[size=lg]:size-10 data-[size=sm]:size-6 after:border-border group/avatar isolate relative flex shrink-0 select-none after:absolute after:inset-0 after:border after:mix-blend-darken dark:after:mix-blend-lighten\",\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t\ttriggerClassName,\n\t\t\t\t\t)}\n\t\t\t\t\t{...props}\n\t\t\t\t\t{...triggerRest}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</AvatarPrimitive.Root>\n\t\t\t</AvatarContext.Provider>\n\t\t);\n\t};\n\n\tif (!title) {\n\t\treturn renderAvatar();\n\t}\n\n\treturn (\n\t\t<Tooltip>\n\t\t\t<TooltipTrigger render={renderAvatar} />\n\t\t\t<TooltipContent\n\t\t\t\tside={tooltipSide}\n\t\t\t\tsideOffset={tooltipSideOffset}\n\t\t\t\talign={tooltipAlign}\n\t\t\t\talignOffset={tooltipAlignOffset}\n\t\t\t>\n\t\t\t\t{title}\n\t\t\t</TooltipContent>\n\t\t</Tooltip>\n\t);\n}\n\nfunction AvatarStack({\n\tdata = [],\n\tchildren,\n\twidth = 50,\n\theight = 50,\n\talt = \"\",\n\t...props\n}) {\n\treturn (\n\t\t<div className=\"flex items-center -space-x-2\">\n\t\t\t{data.map((item, index) => (\n\t\t\t\t<Avatar title={item.title} key={index}>\n\t\t\t\t\t<AvatarImage\n\t\t\t\t\t\tsrc={item.image}\n\t\t\t\t\t\twidth={width}\n\t\t\t\t\t\theight={height}\n\t\t\t\t\t\talt={alt}\n\t\t\t\t\t\t{...props}\n\t\t\t\t\t/>\n\t\t\t\t\t<AvatarFallback>{item.fallback}</AvatarFallback>\n\t\t\t\t</Avatar>\n\t\t\t))}\n\t\t</div>\n\t);\n}\n\nfunction AvatarImage({\n\tclassName = \"\",\n\twidth = 50,\n\theight = 50,\n\talt = \"\",\n\t...props\n}) {\n\tconst { setLoaded } = React.useContext(AvatarContext);\n\n\treturn (\n\t\t<Image\n\t\t\tdata-slot=\"avatar-image\"\n\t\t\tclassName={cn(\n\t\t\t\t\"aspect-square size-full rounded-full squircle-none object-cover absolute inset-0 z-10 bg-background\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\twidth={width}\n\t\t\theight={height}\n\t\t\talt={alt}\n\t\t\tonLoadingComplete={() => setLoaded(true)}\n\t\t\tonError={() => setLoaded(false)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction AvatarFallback({ className = \"\", ...props }) {\n\tconst { loaded } = React.useContext(AvatarContext);\n\n\treturn (\n\t\t<AvatarPrimitive.Fallback\n\t\t\tdata-slot=\"avatar-fallback\"\n\t\t\tclassName={cn(\n\t\t\t\t\"bg-muted text-muted-foreground rounded-full squircle-none absolute inset-0 grid place-items-center text-sm group-data-[size=sm]/avatar:text-xs z-0 transition-opacity\",\n\t\t\t\tloaded && \"opacity-0\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction AvatarBadge({ className = \"\", ...props }) {\n\treturn (\n\t\t<span\n\t\t\tdata-slot=\"avatar-badge\"\n\t\t\tclassName={cn(\n\t\t\t\t\"bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-30 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none squircle-none\",\n\t\t\t\t\"group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden\",\n\t\t\t\t\"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2\",\n\t\t\t\t\"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction AvatarGroup({ className = \"\", ...props }) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"avatar-group\"\n\t\t\tclassName={cn(\"group/avatar-group flex -space-x-2\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction AvatarGroupCount({ className = \"\", ...props }) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"avatar-group-count\"\n\t\t\tclassName={cn(\n\t\t\t\t\"bg-muted text-muted-foreground size-8 rounded-full squircle-none text-xs/relaxed group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3 ring-background relative flex shrink-0 items-center justify-center ring-2\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nAvatar.displayName = \"Avatar\";\nAvatarStack.displayName = \"AvatarStack\";\nAvatarImage.displayName = \"AvatarImage\";\nAvatarFallback.displayName = \"AvatarFallback\";\nAvatarGroup.displayName = \"AvatarGroup\";\nAvatarGroupCount.displayName = \"AvatarGroupCount\";\nAvatarBadge.displayName = \"AvatarBadge\";\n\nexport {\n\tAvatar,\n\tAvatarStack,\n\tAvatarImage,\n\tAvatarFallback,\n\tAvatarGroup,\n\tAvatarGroupCount,\n\tAvatarBadge,\n};\n",
      "type": "registry:component",
      "target": "components/optics/avatar.jsx"
    }
  ],
  "type": "registry:component"
}