{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "avatar",
  "title": "Avatar",
  "description": "A person's picture with their initial when there is none (or it fails to load).",
  "dependencies": [
    "@base-ui/react@^1.9.0"
  ],
  "registryDependencies": [
    "https://sproutboat.com/ikada/r/theme.json",
    "https://sproutboat.com/ikada/r/cn.json"
  ],
  "files": [
    {
      "path": "registry/ikada/ui/avatar.tsx",
      "content": "\"use client\";\n\nimport { Avatar as BaseAvatar } from \"@base-ui/react/avatar\";\nimport type { ComponentProps } from \"react\";\nimport { cn, tv } from \"@/components/ikada/lib/cn\";\n\nconst avatarStyles = tv({\n  base: \"relative inline-grid shrink-0 select-none place-items-center overflow-hidden bg-hover font-semibold leading-none text-fg shadow-pill\",\n  variants: {\n    size: {\n      sm: \"size-6 rounded-md text-sb-xs\",\n      md: \"size-8 rounded-lg text-sb-sm\",\n      lg: \"size-12 rounded-xl text-sb-lg\",\n    },\n  },\n  defaultVariants: { size: \"md\" },\n});\n\nexport interface AvatarProps extends Omit<ComponentProps<typeof BaseAvatar.Root>, \"children\" | \"className\"> {\n  /** The picture URL. A missing or broken image falls back to the initial. */\n  src?: string | null;\n  /** Whose avatar it is. Becomes the image alt text; its first letter is the fallback. */\n  name: string;\n  /** 24px (sm), 32px (md, the default) or 48px (lg). */\n  size?: \"sm\" | \"md\" | \"lg\";\n  className?: string;\n}\n\nconst segmenter = typeof Intl !== \"undefined\" && \"Segmenter\" in Intl ? new Intl.Segmenter() : null;\n\n/** First user-perceived character: an emoji or a combining sequence stays whole instead of splitting a surrogate pair. */\nfunction initialOf(name: string): string {\n  const text = name.trim();\n  const first = segmenter ? segmenter.segment(text)[Symbol.iterator]().next().value?.segment : Array.from(text)[0];\n  return first?.toUpperCase() || \"?\";\n}\n\n/** A person's picture with their initial when there is none (or it fails to load). Decorative next to a visible name. */\nexport function Avatar({ src, name, size, className, ref, ...props }: AvatarProps) {\n  return (\n    <BaseAvatar.Root data-slot=\"avatar\" ref={ref} className={cn(avatarStyles({ size }), className)} {...props}>\n      {src ? (\n        <BaseAvatar.Image\n          src={src}\n          alt={`${name} avatar`}\n          className=\"size-full object-cover outline-1 -outline-offset-1 outline-black/10 dark:outline-white/10\"\n        />\n      ) : null}\n      <BaseAvatar.Fallback aria-hidden=\"true\" delay={src ? 400 : 0}>\n        {initialOf(name)}\n      </BaseAvatar.Fallback>\n    </BaseAvatar.Root>\n  );\n}\n",
      "type": "registry:ui",
      "target": "@components/ikada/avatar.tsx"
    }
  ],
  "categories": [
    "data-display"
  ],
  "type": "registry:ui"
}