{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "dependencies": [
    "@base-ui/react@1.8.0"
  ],
  "description": "A circular avatar with image, initials and status dot, plus an overlapping group.",
  "docs": "Two steps after installing: import the copied stylesheet once at your app entry — it lands at `styles/liquefy-ui.css` — or `@import` it from your global CSS *before* `tailwindcss`, so Tailwind utilities keep winning over component styles. Then wrap the tree in `<LiquefyProvider>`, which is where every component reads its tokens from. Every copied file already carries its own 'use client' directive. Full documentation: https://liquefy-ui.com/#/docs/installation",
  "files": [
    {
      "content": "'use client'\n\nimport { Avatar } from '@base-ui/react/avatar'\nimport { forwardRef, type HTMLAttributes, type ReactNode } from 'react'\nimport { useLiquidStyles, type LiquidStyleProps } from '@/lib/styles-prop'\n\n// Tracking the image with a single `errored` flag missed the cases that matter:\n// a cached image that is already complete before React attaches `onError`, and\n// a `src` that changes to a broken one after a good one has loaded. Base UI\n// tracks the loading status instead, and swaps the fallback in from that.\n\nexport type LiquidAvatarProps = HTMLAttributes<HTMLSpanElement> & LiquidStyleProps & {\n  alt?: string\n  fallback?: ReactNode\n  name?: string\n  size?: 'sm' | 'md' | 'lg' | 'xl'\n  src?: string\n  tint?: string\n}\n\nconst getInitials = (name: string): string =>\n  name\n    .split(/\\s+/)\n    .filter(Boolean)\n    .slice(0, 2)\n    .map((part) => part[0]?.toUpperCase())\n    .join('')\n\nexport const LiquidAvatar = forwardRef<HTMLSpanElement, LiquidAvatarProps>(({\n  alt,\n  className,\n  fallback,\n  name,\n  size = 'md',\n  src,\n  style,\n  styles,\n  tint,\n  ...props\n}, ref) => {\n  const root = useLiquidStyles('lq-avatar', {\n    className,\n    style,\n    styles,\n    vars: tint ? { '--lq-avatar-tint': tint } : undefined,\n  })\n\n  return (\n    <Avatar.Root\n      className={root.className}\n      data-liquid-size={size}\n      ref={ref}\n      style={root.style}\n      title={name}\n      {...props}\n    >\n      {src && <Avatar.Image alt={alt ?? name ?? ''} src={src} />}\n      <Avatar.Fallback\n        aria-label={name}\n        className=\"lq-avatar__fallback\"\n        role={name ? 'img' : undefined}\n      >\n        {fallback ?? (name ? getInitials(name) : '•')}\n      </Avatar.Fallback>\n    </Avatar.Root>\n  )\n})\n\nLiquidAvatar.displayName = 'LiquidAvatar'\n\nexport type LiquidAvatarGroupProps = HTMLAttributes<HTMLSpanElement> & LiquidStyleProps & {\n  children: ReactNode\n  max?: number\n  size?: LiquidAvatarProps['size']\n  total?: number\n}\n\nexport const LiquidAvatarGroup = forwardRef<HTMLSpanElement, LiquidAvatarGroupProps>(({\n  children,\n  className,\n  max,\n  size = 'md',\n  style,\n  styles,\n  total,\n  ...props\n}, ref) => {\n  const items = Array.isArray(children) ? children : [children]\n  const visible = max ? items.slice(0, max) : items\n  const overflow = (total ?? items.length) - visible.length\n  const root = useLiquidStyles('lq-avatar-group', { className, style, styles })\n\n  return (\n    <span className={root.className} ref={ref} style={root.style} {...props}>\n      {visible}\n      {overflow > 0 && (\n        <span className=\"lq-avatar lq-avatar--overflow\" data-liquid-size={size}>\n          <span className=\"lq-avatar__fallback\">+{overflow}</span>\n        </span>\n      )}\n    </span>\n  )\n})\n\nLiquidAvatarGroup.displayName = 'LiquidAvatarGroup'\n",
      "path": "registry/liquid-avatar.tsx",
      "type": "registry:ui"
    }
  ],
  "name": "liquid-avatar",
  "registryDependencies": [
    "https://liquefy-ui.com/r/liquefy-ui.json",
    "https://liquefy-ui.com/r/styles-prop.json"
  ],
  "title": "LiquidAvatar",
  "type": "registry:ui"
}