{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "avatar",
  "title": "Avatar",
  "description": "A hand-drawn circle border around a profile image or initials fallback.",
  "dependencies": [
    "roughjs"
  ],
  "registryDependencies": [
    "https://www.bydefaulthuman.fun/r/use-rough.json",
    "utils",
    "https://www.bydefaulthuman.fun/r/crumble-theme.json",
    "https://www.bydefaulthuman.fun/r/rough-lib.json"
  ],
  "files": [
    {
      "path": "registry/new-york/ui/avatar.tsx",
      "content": "\"use client\";\n\nimport { useCallback, useContext, useEffect } from \"react\";\nimport { useRough } from \"@/hooks/use-rough\";\nimport { cn } from \"@/lib/utils\";\nimport {\n  CrumbleContext,\n  randomSeed,\n  resolveRoughVars,\n  type CrumbleColorProps,\n  type CrumbleTheme,\n} from \"@/lib/rough\";\n\nexport interface AvatarProps extends CrumbleColorProps {\n  animateOnHover?: boolean;\n  className?: string;\n  fallback?: string;\n  id?: string;\n  size?: number;\n  src?: string;\n  theme?: CrumbleTheme;\n}\n\nexport interface AvatarGroupProps {\n  avatars: AvatarProps[];\n  className?: string;\n  fill?: string;\n  max?: number;\n  size?: number;\n  stroke?: string;\n  strokeMuted?: string;\n  theme?: CrumbleTheme;\n}\n\nfunction AvatarCircle({\n  animateOnHover = true,\n  className,\n  fallback,\n  fill,\n  id,\n  size = 40,\n  src,\n  stroke,\n  strokeMuted,\n  theme: themeProp,\n}: AvatarProps) {\n  const stableId = id ?? `avatar-${fallback ?? \"user\"}`;\n  const roughStyle = resolveRoughVars({ stroke, strokeMuted, fill });\n  const {\n    animateOnHover: animateFromContext,\n    drawCircle,\n    svgRef,\n  } = useRough({\n    stableId,\n    theme: themeProp,\n    variant: \"border\",\n  });\n\n  const draw = useCallback(\n    (reseed = false) => {\n      const svg = svgRef.current;\n      if (!svg) return;\n\n      svg.replaceChildren();\n      svg.setAttribute(\"width\", String(size));\n      svg.setAttribute(\"height\", String(size));\n      svg.setAttribute(\"viewBox\", `0 0 ${size} ${size}`);\n\n      const circle = drawCircle(size / 2, size / 2, size - 3, {\n        fill: \"none\",\n        seed: reseed ? randomSeed() : undefined,\n        stroke: \"var(--cr-stroke)\",\n      });\n      if (circle) svg.appendChild(circle);\n    },\n    [drawCircle, size, svgRef],\n  );\n\n  useEffect(() => {\n    const id = requestAnimationFrame(() => draw());\n    return () => cancelAnimationFrame(id);\n  }, [draw]);\n\n  return (\n    <div\n      className={cn(\n        \"relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full\",\n        className,\n      )}\n      style={{ ...roughStyle, width: size, height: size }}\n      onMouseEnter={() => {\n        if (animateOnHover && animateFromContext) draw(true);\n      }}\n      onMouseLeave={() => {\n        if (animateOnHover && animateFromContext) draw(false);\n      }}\n    >\n      {src ? (\n        <img\n          src={src}\n          alt={fallback ?? \"avatar\"}\n          className=\"h-full w-full object-cover\"\n          style={{ borderRadius: \"50%\" }}\n        />\n      ) : (\n        <span className=\"text-sm font-medium text-foreground select-none\">\n          {fallback?.slice(0, 2).toUpperCase() ?? \"?\"}\n        </span>\n      )}\n      <svg\n        ref={svgRef}\n        aria-hidden=\"true\"\n        className=\"pointer-events-none absolute inset-0 overflow-visible\"\n        style={{ width: size, height: size }}\n      />\n    </div>\n  );\n}\n\nexport function Avatar(props: AvatarProps) {\n  return <AvatarCircle {...props} />;\n}\n\nexport function AvatarGroup({\n  avatars,\n  className,\n  fill,\n  max = 4,\n  size = 40,\n  stroke,\n  strokeMuted,\n  theme: themeProp,\n}: AvatarGroupProps) {\n  const { theme: contextTheme } = useContext(CrumbleContext);\n  const theme = themeProp ?? contextTheme;\n  const visible = avatars.slice(0, max);\n  const overflow = avatars.length - max;\n  const overlap = Math.round(size * 0.3);\n  const roughStyle = resolveRoughVars({ stroke, strokeMuted, fill });\n\n  return (\n    <div\n      className={cn(\"flex items-center\", className)}\n      style={{ ...roughStyle, gap: 0 }}\n    >\n      {visible.map((avatar, i) => (\n        <div key={i} style={{ marginLeft: i === 0 ? 0 : -overlap, zIndex: i }}>\n          <AvatarCircle {...avatar} size={size} theme={theme} />\n        </div>\n      ))}\n      {overflow > 0 ? (\n        <div\n          className=\"relative inline-flex shrink-0 items-center justify-center rounded-full bg-muted\"\n          style={{\n            width: size,\n            height: size,\n            marginLeft: -overlap,\n            zIndex: visible.length,\n          }}\n        >\n          <span className=\"text-xs font-medium text-muted-foreground\">\n            +{overflow}\n          </span>\n        </div>\n      ) : null}\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/crumble/ui/avatar.tsx"
    }
  ],
  "type": "registry:ui"
}