{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "avatar", "title": "Avatar", "description": "Compact icon avatar for visually identifying a person, group, channel, or conversation type.", "type": "registry:ui", "meta": { "library": "@ds-mo/ui", "distribution": "npm", "storybook": "https://zainadeel.github.io/compomo/?path=/story/avatar", "source": "src/wc/components/Avatar/Avatar.tsx", "intentStatus": "complete", "intent": { "audience": "general", "status": "stable", "summary": "Compact icon avatar for visually identifying a person, group, channel, or conversation type.", "useWhen": [ "A list or message composition needs a consistent circular identity marker represented by an icon at md, sm, or xs control density." ], "avoidWhen": [ "The identity has a supplied photograph, initials, presence state, or editable profile behavior; those variants are not part of this primitive." ], "commonlyComposedWith": [ "component:ds-conversation-list-item", "component:ds-message" ], "accessibility": [ "Provide label only when the icon communicates meaning that surrounding text does not already convey.", "Omit label when the owning row or message already provides an equivalent accessible name.", "Treat primary and secondary as general icon hierarchy; an owning product may map that hierarchy to states such as unread and read, but Avatar does not own those states." ], "responsiveBehavior": [ "The selected size stays fixed across viewports: md is a 32px circle with a 20px icon, sm is 24px with 16px, and xs is 16px with 12px." ], "references": [ { "label": "Storybook examples", "path": "src/wc/components/Avatar/Avatar.stories.ts" } ] }, "api": { "props": { "icon": { "type": "string", "resolvedType": "string", "attribute": "icon", "default": "''", "required": false, "mutable": false, "description": "Canonical IcoMo icon name displayed inside the avatar." }, "iconColor": { "type": "IconColor", "resolvedType": "\"ai\" | \"bold-ai\" | \"bold-brand\" | \"bold-caution\" | \"bold-negative\" | \"bold-neutral\" | \"bold-positive\" | \"bold-warning\" | \"brand\" | \"caution\" | \"faint-ai\" | \"faint-brand\" | \"faint-caution\" | \"faint-negative\" | \"faint-neutral\" | \"faint-positive\" | \"faint-warning\" | \"guide\" | \"inherit\" | \"medium-ai\" | \"medium-brand\" | \"medium-caution\" | \"medium-negative\" | \"medium-neutral\" | \"medium-positive\" | \"medium-warning\" | \"negative\" | \"neutral\" | \"on-bold\" | \"on-strong\" | \"positive\" | \"primary\" | \"quaternary\" | \"secondary\" | \"strong-ai\" | \"strong-brand\" | \"strong-caution\" | \"strong-negative\" | \"strong-neutral\" | \"strong-positive\" | \"strong-warning\" | \"tertiary\" | \"warning\" | `var(--${string})`", "attribute": "icon-color", "default": "'secondary'", "required": false, "mutable": false, "description": "Semantic icon hierarchy. Use primary for stronger emphasis; secondary is the default." }, "label": { "type": "string | undefined", "resolvedType": "string | undefined", "attribute": "label", "required": false, "mutable": false, "description": "Optional accessible label. Omit when the surrounding content already conveys the meaning." }, "size": { "type": "AvatarSize", "resolvedType": "\"md\" | \"sm\" | \"xs\"", "attribute": "size", "default": "'md'", "required": false, "mutable": false, "description": "Circle and icon density. Maps to 32/20, 24/16, or 16/12 px." } }, "events": [], "methods": [], "slots": [] }, "props": { "icon": { "type": "string", "resolvedType": "string", "attribute": "icon", "default": "''", "required": false, "mutable": false, "description": "Canonical IcoMo icon name displayed inside the avatar." }, "iconColor": { "type": "IconColor", "resolvedType": "\"ai\" | \"bold-ai\" | \"bold-brand\" | \"bold-caution\" | \"bold-negative\" | \"bold-neutral\" | \"bold-positive\" | \"bold-warning\" | \"brand\" | \"caution\" | \"faint-ai\" | \"faint-brand\" | \"faint-caution\" | \"faint-negative\" | \"faint-neutral\" | \"faint-positive\" | \"faint-warning\" | \"guide\" | \"inherit\" | \"medium-ai\" | \"medium-brand\" | \"medium-caution\" | \"medium-negative\" | \"medium-neutral\" | \"medium-positive\" | \"medium-warning\" | \"negative\" | \"neutral\" | \"on-bold\" | \"on-strong\" | \"positive\" | \"primary\" | \"quaternary\" | \"secondary\" | \"strong-ai\" | \"strong-brand\" | \"strong-caution\" | \"strong-negative\" | \"strong-neutral\" | \"strong-positive\" | \"strong-warning\" | \"tertiary\" | \"warning\" | `var(--${string})`", "attribute": "icon-color", "default": "'secondary'", "required": false, "mutable": false, "description": "Semantic icon hierarchy. Use primary for stronger emphasis; secondary is the default." }, "label": { "type": "string | undefined", "resolvedType": "string | undefined", "attribute": "label", "required": false, "mutable": false, "description": "Optional accessible label. Omit when the surrounding content already conveys the meaning." }, "size": { "type": "AvatarSize", "resolvedType": "\"md\" | \"sm\" | \"xs\"", "attribute": "size", "default": "'md'", "required": false, "mutable": false, "description": "Circle and icon density. Maps to 32/20, 24/16, or 16/12 px." } }, "events": [], "methods": [], "slots": [], "exports": { "customElement": "ds-avatar", "react": "DsAvatar", "vue": "DsAvatar", "angular": "DsAvatar" }, "consumption": { "install": "npm install @ds-mo/ui @ds-mo/tokens @ds-mo/icons", "cssSetup": "import '@ds-mo/tokens';\nimport '@ds-mo/tokens/reset';\nimport '@ds-mo/tokens/globals';", "customElements": { "import": "import '@ds-mo/ui/dist/components/ds-avatar.js';", "example": "" }, "react": { "import": "import { DsAvatar } from '@ds-mo/ui/react';", "example": "" }, "vue": { "import": "import { DsAvatar } from '@ds-mo/ui/vue';", "example": "" }, "angular": { "import": "import { DsAvatar } from '@ds-mo/ui/angular/ds-avatar';", "example": "" }, "peerDependencies": { "required": [ "@ds-mo/tokens ^6.5.0", "@ds-mo/icons ^7.0.0" ], "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters." } } }, "dependencies": [ "@ds-mo/ui", "@ds-mo/tokens", "@ds-mo/icons" ], "registryDependencies": [ "icon" ], "files": [ { "path": "src/wc/components/Avatar/Avatar.css", "content": "@import '../../utils/control-density.css';\n\n:host {\n display: inline-flex;\n flex-shrink: 0;\n width: var(--ds-control-height);\n height: var(--ds-control-height);\n}\n\n:host(.avatar--md) {\n --_avatar-stroke: var(--dimension-stroke-width-015);\n}\n\n:host(.avatar--sm) {\n --_avatar-stroke: var(--dimension-stroke-width-012);\n}\n\n:host(.avatar--xs) {\n --_avatar-stroke: calc(var(--dimension-stroke-width-base) * 3 / 32);\n}\n\n.avatar {\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n border-radius: var(--dimension-radius-half);\n box-shadow: inset 0 0 0 var(--_avatar-stroke) var(--color-foreground-quaternary);\n}\n", "type": "registry:ui" }, { "path": "src/wc/components/Avatar/Avatar.tsx", "content": "import { Component, h, Host, Prop } from '@stencil/core';\nimport type { IconColor } from '../Icon/Icon';\n\nexport type AvatarSize = 'md' | 'sm' | 'xs';\n\n@Component({\n tag: 'ds-avatar',\n styleUrl: 'Avatar.css',\n scoped: true,\n})\nexport class Avatar {\n /** Canonical IcoMo icon name displayed inside the avatar. */\n @Prop() icon: string = '';\n\n /** Semantic icon hierarchy. Use primary for stronger emphasis; secondary is the default. */\n @Prop() iconColor: IconColor = 'secondary';\n\n /** Circle and icon density. Maps to 32/20, 24/16, or 16/12 px. */\n @Prop() size: AvatarSize = 'md';\n\n /** Optional accessible label. Omit when the surrounding content already conveys the meaning. */\n @Prop() label: string | undefined;\n\n render() {\n return (\n \n \n \n \n \n );\n }\n}\n", "type": "registry:ui" } ] }