{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "avatar",
  "title": "Avatar",
  "description": "Agents are rounded squares; people are circles.",
  "registryDependencies": [
    "https://creance.pages.dev/r/creance-base.json"
  ],
  "files": [
    {
      "path": "avatar/Avatar.css",
      "content": ".cr-avatar {\n  display: inline-grid;\n  flex: none;\n  place-items: center;\n  width: 34px;\n  height: 34px;\n  border-radius: var(--cr-radius-full);\n  background: var(--cr-color-bg-raised);\n  box-shadow: inset 0 0 0 1px var(--cr-color-border-default);\n  color: var(--cr-color-text-default);\n  font-size: var(--cr-font-size-xs);\n  font-weight: var(--cr-font-weight-semibold);\n  letter-spacing: 0.02em;\n  user-select: none;\n}\n\n/* Agents: a squircle ringed in the tether colour. People: a plain circle. Shape tells them apart. */\n.cr-avatar[data-kind='agent'] {\n  border-radius: var(--cr-radius-md);\n  box-shadow: inset 0 0 0 1px var(--cr-color-border-default);\n  background: var(--cr-color-bg-raised);\n  color: var(--cr-color-text-default);\n}\n\n.cr-avatar[data-size='sm'] {\n  width: 24px;\n  height: 24px;\n}\n\n.cr-avatar[data-kind='agent'][data-size='sm'] {\n  border-radius: var(--cr-radius-sm);\n}\n",
      "type": "registry:file",
      "target": "@components/creance/avatar/Avatar.css"
    },
    {
      "path": "avatar/Avatar.tsx",
      "content": "import { cx } from '@/lib/creance/cx';\nimport './Avatar.css';\n\nexport interface AvatarProps {\n  /** Agent or person name. Used for the initials and the accessible name. */\n  name: string;\n  /** \"agent\" gets a square shape so agents and people are distinguishable without colour. */\n  kind?: 'agent' | 'human';\n  size?: 'sm' | 'md';\n  /** Hide from assistive tech when the name is already shown next to the avatar. */\n  decorative?: boolean;\n  className?: string;\n}\n\nfunction initials(name: string): string {\n  const words = name.trim().split(/[\\s_-]+/).filter(Boolean);\n  const letters = words.length > 1 ? (words[0]?.[0] ?? '') + (words[1]?.[0] ?? '') : name.slice(0, 2);\n  return letters.toUpperCase();\n}\n\nexport function Avatar({ name, kind = 'agent', size = 'md', decorative = false, className }: AvatarProps) {\n  return (\n    <span\n      className={cx('cr-avatar', className)}\n      data-kind={kind}\n      data-size={size}\n      {...(decorative ? { 'aria-hidden': true } : { role: 'img', 'aria-label': name })}\n    >\n      {initials(name)}\n    </span>\n  );\n}\n",
      "type": "registry:ui",
      "target": "@components/creance/avatar/Avatar.tsx"
    }
  ],
  "categories": [
    "atom",
    "data-display"
  ],
  "type": "registry:ui"
}