voa-ds-core 1.0.3

package/dist/collection/components/voa-avatar/voa-avatar.js

@@ -0,0 +1,221 @@
+import { Host, h } from "@stencil/core";
+/**
+ * Componente Avatar do Voa Design System, baseado no design do Figma.
+ * Suporta exibição de ícone, iniciais ou imagem de perfil.
+ *
+ * O componente segue o padrão "unstyled" - apenas estrutura e lógica.
+ * Estilos visuais devem ser aplicados externamente via CSS Parts API usando design tokens.
+ *
+ * @part base - O elemento raiz do avatar (container circular)
+ * @part image - O elemento de imagem (quando type="photo" e src é fornecido)
+ * @part initials - O wrapper do texto de iniciais (quando type="initials")
+ * @part icon - O wrapper do ícone SVG padrão (quando type="icon")
+ */
+export class VoaAvatar {
+    constructor() {
+        /**
+         * Tipo de avatar a ser exibido.
+         * - 'icon': Exibe um ícone de usuário padrão
+         * - 'photo': Exibe uma imagem (requer prop src)
+         * - 'initials': Exibe iniciais de texto (requer prop initials)
+         */
+        this.type = 'icon';
+        /**
+         * Tamanho do avatar.
+         * Mapeado do Figma: xs (16px), sm (24px), md (32px), lg (48px), xl (56px)
+         */
+        this.size = 'md';
+    }
+    /**
+     * Método para acessibilidade WCAG 2.2 AA.
+     * Delega foco ao elemento interno do avatar.
+     */
+    async setFocus() {
+        var _a;
+        const focusable = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('[part="base"]');
+        if (focusable) {
+            focusable.focus();
+        }
+    }
+    getAriaLabel() {
+        if (this.alt) {
+            return this.alt;
+        }
+        if (this.type === 'initials' && this.initials) {
+            return `Avatar com iniciais ${this.initials}`;
+        }
+        if (this.type === 'photo' && this.src) {
+            return 'Avatar com foto de perfil';
+        }
+        return 'Avatar de usuário';
+    }
+    renderContent() {
+        switch (this.type) {
+            case 'photo':
+                if (this.src) {
+                    return h("img", { part: "image", src: this.src, alt: this.alt || 'Avatar' });
+                }
+                // Fallback para icon se src não fornecido
+                return this.renderIcon();
+            case 'initials':
+                if (this.initials) {
+                    return h("span", { class: "avatar-initials", part: "initials" }, this.initials);
+                }
+                // Fallback para icon se initials não fornecido
+                return this.renderIcon();
+            case 'icon':
+            default:
+                return this.renderIcon();
+        }
+    }
+    renderIcon() {
+        return (h("svg", { class: "avatar-icon", part: "icon", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true" }, h("path", { d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" })));
+    }
+    render() {
+        return (h(Host, { key: '3da67acafc6bd4af69d45ae6ee662e2e2bc3aa10', role: "img", "aria-label": this.getAriaLabel() }, h("div", { key: '32391b690e317f36d4a8b5cc4ad9956c70cea493', part: "base", class: {
+                'voa-avatar': true,
+                [`voa-avatar--${this.size}`]: true,
+                [`voa-avatar--${this.type}`]: true,
+            } }, this.renderContent())));
+    }
+    static get is() { return "voa-avatar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["voa-avatar.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["voa-avatar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'icon' | 'photo' | 'initials'",
+                    "resolved": "\"icon\" | \"initials\" | \"photo\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tipo de avatar a ser exibido.\r\n- 'icon': Exibe um \u00EDcone de usu\u00E1rio padr\u00E3o\r\n- 'photo': Exibe uma imagem (requer prop src)\r\n- 'initials': Exibe iniciais de texto (requer prop initials)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'icon'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
+                    "resolved": "\"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tamanho do avatar.\r\nMapeado do Figma: xs (16px), sm (24px), md (32px), lg (48px), xl (56px)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "initials": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "As iniciais a serem exibidas quando type=\"initials\"."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "initials"
+            },
+            "src": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "URL da imagem do avatar quando type=\"photo\"."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "src"
+            },
+            "alt": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Texto alternativo para a imagem do avatar."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "alt"
+            }
+        };
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "M\u00E9todo para acessibilidade WCAG 2.2 AA.\r\nDelega foco ao elemento interno do avatar.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=voa-avatar.js.map

package/dist/collection/components/voa-avatar/voa-avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"voa-avatar.js","sourceRoot":"","sources":["../../../src/components/voa-avatar/voa-avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAE1E;;;;;;;;;;;GAWG;AAOH,MAAM,OAAO,SAAS;IANtB;QASE;;;;;WAKG;QACK,SAAI,GAAkC,MAAM,CAAC;QAErD;;;WAGG;QACK,SAAI,GAAqC,IAAI,CAAC;KA2FvD;IA1EC;;;OAGG;IAEH,KAAK,CAAC,QAAQ;;QACZ,MAAM,SAAS,GAAG,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,eAAe,CAAgB,CAAC;QACtF,IAAI,SAAS,EAAE,CAAC;YACd,SAAS,CAAC,KAAK,EAAE,CAAC;QACpB,CAAC;IACH,CAAC;IAEO,YAAY;QAClB,IAAI,IAAI,CAAC,GAAG,EAAE,CAAC;YACb,OAAO,IAAI,CAAC,GAAG,CAAC;QAClB,CAAC;QACD,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAC9C,OAAO,uBAAuB,IAAI,CAAC,QAAQ,EAAE,CAAC;QAChD,CAAC;QACD,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,IAAI,IAAI,CAAC,GAAG,EAAE,CAAC;YACtC,OAAO,2BAA2B,CAAC;QACrC,CAAC;QACD,OAAO,mBAAmB,CAAC;IAC7B,CAAC;IAEO,aAAa;QACnB,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YAClB,KAAK,OAAO;gBACV,IAAI,IAAI,CAAC,GAAG,EAAE,CAAC;oBACb,OAAO,WAAK,IAAI,EAAC,OAAO,EAAC,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,IAAI,QAAQ,GAAI,CAAC;gBACxE,CAAC;gBACD,0CAA0C;gBAC1C,OAAO,IAAI,CAAC,UAAU,EAAE,CAAC;YAE3B,KAAK,UAAU;gBACb,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;oBAClB,OAAO,YAAM,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAC,UAAU,IAAE,IAAI,CAAC,QAAQ,CAAQ,CAAC;gBAC9E,CAAC;gBACD,+CAA+C;gBAC/C,OAAO,IAAI,CAAC,UAAU,EAAE,CAAC;YAE3B,KAAK,MAAM,CAAC;YACZ;gBACE,OAAO,IAAI,CAAC,UAAU,EAAE,CAAC;QAC7B,CAAC;IACH,CAAC;IAEO,UAAU;QAChB,OAAO,CACL,WAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,iBAAa,MAAM;YAC7F,YAAM,CAAC,EAAC,+GAA+G,GAAE,CACrH,CACP,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,KAAK,gBACE,IAAI,CAAC,YAAY,EAAE;YAE/B,4DACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;oBACL,YAAY,EAAE,IAAI;oBAClB,CAAC,eAAe,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;oBAClC,CAAC,eAAe,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;iBACnC,IAEA,IAAI,CAAC,aAAa,EAAE,CACjB,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, Element, Method, h } from '@stencil/core';\r\n\r\n/**\r\n * Componente Avatar do Voa Design System, baseado no design do Figma.\r\n * Suporta exibição de ícone, iniciais ou imagem de perfil.\r\n * \r\n * O componente segue o padrão \"unstyled\" - apenas estrutura e lógica.\r\n * Estilos visuais devem ser aplicados externamente via CSS Parts API usando design tokens.\r\n * \r\n * @part base - O elemento raiz do avatar (container circular)\r\n * @part image - O elemento de imagem (quando type=\"photo\" e src é fornecido)\r\n * @part initials - O wrapper do texto de iniciais (quando type=\"initials\")\r\n * @part icon - O wrapper do ícone SVG padrão (quando type=\"icon\")\r\n */\r\n@Component({\r\n  tag: 'voa-avatar',\r\n  styleUrl: 'voa-avatar.css',\r\n  shadow: true,\r\n  scoped: false, // Permite herdar variáveis CSS do contexto pai\r\n})\r\nexport class VoaAvatar {\r\n  @Element() host: HTMLVoaAvatarElement;\r\n\r\n  /**\r\n   * Tipo de avatar a ser exibido.\r\n   * - 'icon': Exibe um ícone de usuário padrão\r\n   * - 'photo': Exibe uma imagem (requer prop src)\r\n   * - 'initials': Exibe iniciais de texto (requer prop initials)\r\n   */\r\n  @Prop() type: 'icon' | 'photo' | 'initials' = 'icon';\r\n\r\n  /**\r\n   * Tamanho do avatar.\r\n   * Mapeado do Figma: xs (16px), sm (24px), md (32px), lg (48px), xl (56px)\r\n   */\r\n  @Prop() size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md';\r\n\r\n  /**\r\n   * As iniciais a serem exibidas quando type=\"initials\".\r\n   */\r\n  @Prop() initials?: string;\r\n\r\n  /**\r\n   * URL da imagem do avatar quando type=\"photo\".\r\n   */\r\n  @Prop() src?: string;\r\n\r\n  /**\r\n   * Texto alternativo para a imagem do avatar.\r\n   */\r\n  @Prop() alt?: string;\r\n\r\n  /**\r\n   * Método para acessibilidade WCAG 2.2 AA.\r\n   * Delega foco ao elemento interno do avatar.\r\n   */\r\n  @Method()\r\n  async setFocus(): Promise<void> {\r\n    const focusable = this.host.shadowRoot?.querySelector('[part=\"base\"]') as HTMLElement;\r\n    if (focusable) {\r\n      focusable.focus();\r\n    }\r\n  }\r\n\r\n  private getAriaLabel(): string {\r\n    if (this.alt) {\r\n      return this.alt;\r\n    }\r\n    if (this.type === 'initials' && this.initials) {\r\n      return `Avatar com iniciais ${this.initials}`;\r\n    }\r\n    if (this.type === 'photo' && this.src) {\r\n      return 'Avatar com foto de perfil';\r\n    }\r\n    return 'Avatar de usuário';\r\n  }\r\n\r\n  private renderContent() {\r\n    switch (this.type) {\r\n      case 'photo':\r\n        if (this.src) {\r\n          return <img part=\"image\" src={this.src} alt={this.alt || 'Avatar'} />;\r\n        }\r\n        // Fallback para icon se src não fornecido\r\n        return this.renderIcon();\r\n      \r\n      case 'initials':\r\n        if (this.initials) {\r\n          return <span class=\"avatar-initials\" part=\"initials\">{this.initials}</span>;\r\n        }\r\n        // Fallback para icon se initials não fornecido\r\n        return this.renderIcon();\r\n      \r\n      case 'icon':\r\n      default:\r\n        return this.renderIcon();\r\n    }\r\n  }\r\n\r\n  private renderIcon() {\r\n    return (\r\n      <svg class=\"avatar-icon\" part=\"icon\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\r\n        <path d=\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\"/>\r\n      </svg>\r\n    );\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host\r\n        role=\"img\"\r\n        aria-label={this.getAriaLabel()}\r\n      >\r\n        <div\r\n          part=\"base\"\r\n          class={{\r\n            'voa-avatar': true,\r\n            [`voa-avatar--${this.size}`]: true,\r\n            [`voa-avatar--${this.type}`]: true,\r\n          }}\r\n        >\r\n          {this.renderContent()}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n} "]}

package/dist/collection/components/voa-avatar/voa-avatar.stories.js

@@ -0,0 +1,423 @@
+import { html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+import "../../Stories/styles/voa-avatar.external.css";
+const meta = {
+    title: "Componentes/Display/Avatar",
+    tags: ['autodocs'],
+    parameters: {
+        // Link para Figma (OBRIGATÓRIO)
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=397-2809&t=eEPGXVkQRijr3FMg-4',
+        },
+    },
+    render: (args) => html `
+    <voa-avatar
+      type=${ifDefined(args.type)}
+      initials=${ifDefined(args.initials)}
+      src=${ifDefined(args.src)}
+      alt=${ifDefined(args.alt)}
+      size=${ifDefined(args.size)}
+    ></voa-avatar>
+  `,
+    argTypes: {
+        type: {
+            control: 'select',
+            options: ['icon', 'photo', 'initials'],
+            description: 'Tipo de avatar a ser exibido: icon (ícone padrão), photo (imagem), ou initials (iniciais).',
+        },
+        initials: {
+            control: 'text',
+            description: 'As iniciais a serem exibidas quando type="initials".',
+        },
+        src: {
+            control: 'text',
+            description: 'URL da imagem do avatar quando type="photo".',
+        },
+        alt: {
+            control: 'text',
+            description: 'Texto alternativo para a imagem do avatar.',
+        },
+        size: {
+            control: 'select',
+            options: ['xs', 'sm', 'md', 'lg', 'xl'],
+            description: 'Tamanho do avatar. Mapeado do Figma: xs (16px), sm (24px), md (32px), lg (48px), xl (56px).',
+        },
+    },
+    args: {
+        type: 'icon',
+        size: 'md',
+    },
+};
+export default meta;
+// Story base com playground
+export const Playground = {};
+// Avatar padrão com ícone
+export const Icon = {
+    args: {
+        type: 'icon',
+        size: 'md',
+    },
+};
+// Avatar com iniciais
+export const Initials = {
+    args: {
+        type: 'initials',
+        initials: 'AB',
+        size: 'md',
+    },
+};
+// Avatar com imagem
+export const Photo = {
+    args: {
+        type: 'photo',
+        src: 'https://i.pravatar.cc/150?img=1',
+        alt: 'Avatar do usuário',
+        size: 'md',
+    },
+};
+// Diferentes tamanhos - Icon
+export const IconExtraSmall = {
+    args: {
+        type: 'icon',
+        size: 'xs',
+    },
+};
+export const IconSmall = {
+    args: {
+        type: 'icon',
+        size: 'sm',
+    },
+};
+export const IconMedium = {
+    args: {
+        type: 'icon',
+        size: 'md',
+    },
+};
+export const IconLarge = {
+    args: {
+        type: 'icon',
+        size: 'lg',
+    },
+};
+export const IconExtraLarge = {
+    args: {
+        type: 'icon',
+        size: 'xl',
+    },
+};
+// Diferentes tamanhos - Initials
+export const InitialsExtraSmall = {
+    args: {
+        type: 'initials',
+        initials: 'XS',
+        size: 'xs',
+    },
+};
+export const InitialsSmall = {
+    args: {
+        type: 'initials',
+        initials: 'SM',
+        size: 'sm',
+    },
+};
+export const InitialsMedium = {
+    args: {
+        type: 'initials',
+        initials: 'MD',
+        size: 'md',
+    },
+};
+export const InitialsLarge = {
+    args: {
+        type: 'initials',
+        initials: 'LG',
+        size: 'lg',
+    },
+};
+export const InitialsExtraLarge = {
+    args: {
+        type: 'initials',
+        initials: 'XL',
+        size: 'xl',
+    },
+};
+// Diferentes tamanhos - Photo
+export const PhotoExtraSmall = {
+    args: {
+        type: 'photo',
+        src: 'https://i.pravatar.cc/150?img=1',
+        alt: 'Avatar extra small',
+        size: 'xs',
+    },
+};
+export const PhotoSmall = {
+    args: {
+        type: 'photo',
+        src: 'https://i.pravatar.cc/150?img=2',
+        alt: 'Avatar small',
+        size: 'sm',
+    },
+};
+export const PhotoMedium = {
+    args: {
+        type: 'photo',
+        src: 'https://i.pravatar.cc/150?img=3',
+        alt: 'Avatar medium',
+        size: 'md',
+    },
+};
+export const PhotoLarge = {
+    args: {
+        type: 'photo',
+        src: 'https://i.pravatar.cc/150?img=4',
+        alt: 'Avatar large',
+        size: 'lg',
+    },
+};
+export const PhotoExtraLarge = {
+    args: {
+        type: 'photo',
+        src: 'https://i.pravatar.cc/150?img=5',
+        alt: 'Avatar extra large',
+        size: 'xl',
+    },
+};
+// Galeria de tamanhos com imagens
+export const SizeGalleryWithPhotos = {
+    render: () => {
+        const sizes = ['xs', 'sm', 'md', 'lg', 'xl'];
+        const images = [
+            'https://i.pravatar.cc/150?img=1',
+            'https://i.pravatar.cc/150?img=2',
+            'https://i.pravatar.cc/150?img=3',
+            'https://i.pravatar.cc/150?img=4',
+            'https://i.pravatar.cc/150?img=5',
+        ];
+        return html `
+      <div style="display:flex;gap:16px;align-items:center;flex-wrap:wrap">
+        ${sizes.map((size, index) => html `
+          <div style="text-align:center">
+            <div style="margin-bottom:8px;font-size:12px;font-weight:600">${size.toUpperCase()}</div>
+            <voa-avatar type="photo" src="${images[index]}" alt="Avatar ${size}" size="${size}"></voa-avatar>
+          </div>
+        `)}
+      </div>
+    `;
+    },
+};
+// Galeria de tamanhos com iniciais
+export const SizeGalleryWithInitials = {
+    render: () => {
+        const sizes = ['xs', 'sm', 'md', 'lg', 'xl'];
+        const initials = ['XS', 'SM', 'MD', 'LG', 'XL'];
+        return html `
+      <div style="display:flex;gap:16px;align-items:center;flex-wrap:wrap">
+        ${sizes.map((size, index) => html `
+          <div style="text-align:center">
+            <div style="margin-bottom:8px;font-size:12px;font-weight:600">${size.toUpperCase()}</div>
+            <voa-avatar type="initials" initials="${initials[index]}" size="${size}"></voa-avatar>
+          </div>
+        `)}
+      </div>
+    `;
+    },
+};
+// Galeria de tamanhos com ícones
+export const SizeGalleryWithIcons = {
+    render: () => {
+        const sizes = ['xs', 'sm', 'md', 'lg', 'xl'];
+        return html `
+      <div style="display:flex;gap:16px;align-items:center;flex-wrap:wrap">
+        ${sizes.map((size) => html `
+          <div style="text-align:center">
+            <div style="margin-bottom:8px;font-size:12px;font-weight:600">${size.toUpperCase()}</div>
+            <voa-avatar type="icon" size="${size}"></voa-avatar>
+          </div>
+        `)}
+      </div>
+    `;
+    },
+};
+export const Usage = {
+    parameters: {
+        docs: {
+            description: {
+                story: `
+## Uso do Componente
+
+Este componente pode ser usado em diferentes frameworks. Abaixo estão exemplos de código para cada um:
+
+### HTML (Web Components)
+
+\`\`\`html
+<!-- Avatar com ícone padrão -->
+<voa-avatar type="icon" size="md"></voa-avatar>
+
+<!-- Avatar com iniciais -->
+<voa-avatar type="initials" initials="AB" size="md"></voa-avatar>
+
+<!-- Avatar com foto -->
+<voa-avatar 
+  type="photo" 
+  src="https://i.pravatar.cc/150?img=1" 
+  alt="Avatar do usuário"
+  size="md"
+></voa-avatar>
+
+<!-- Diferentes tamanhos -->
+<voa-avatar type="icon" size="xs"></voa-avatar>
+<voa-avatar type="icon" size="sm"></voa-avatar>
+<voa-avatar type="icon" size="md"></voa-avatar>
+<voa-avatar type="icon" size="lg"></voa-avatar>
+<voa-avatar type="icon" size="xl"></voa-avatar>
+\`\`\`
+
+### React
+
+\`\`\`tsx
+import { VoaAvatar } from '@voa-ds/react';
+
+function MyComponent() {
+  return (
+    <>
+      {/* Avatar com ícone padrão */}
+      <VoaAvatar type="icon" size="md" />
+
+      {/* Avatar com iniciais */}
+      <VoaAvatar type="initials" initials="AB" size="md" />
+
+      {/* Avatar com foto */}
+      <VoaAvatar 
+        type="photo" 
+        src="https://i.pravatar.cc/150?img=1" 
+        alt="Avatar do usuário"
+        size="md"
+      />
+
+      {/* Diferentes tamanhos */}
+      <VoaAvatar type="icon" size="xs" />
+      <VoaAvatar type="icon" size="sm" />
+      <VoaAvatar type="icon" size="md" />
+      <VoaAvatar type="icon" size="lg" />
+      <VoaAvatar type="icon" size="xl" />
+    </>
+  );
+}
+\`\`\`
+
+### Angular
+
+\`\`\`typescript
+import { VoaAvatar } from '@voa-ds/angular';
+
+@Component({
+  selector: 'app-example',
+  template: \`
+    <!-- Avatar com ícone padrão -->
+    <voa-avatar type="icon" size="md"></voa-avatar>
+
+    <!-- Avatar com iniciais -->
+    <voa-avatar type="initials" initials="AB" size="md"></voa-avatar>
+
+    <!-- Avatar com foto -->
+    <voa-avatar 
+      type="photo" 
+      [src]="'https://i.pravatar.cc/150?img=1'" 
+      [alt]="'Avatar do usuário'"
+      size="md"
+    ></voa-avatar>
+
+    <!-- Diferentes tamanhos -->
+    <voa-avatar type="icon" size="xs"></voa-avatar>
+    <voa-avatar type="icon" size="sm"></voa-avatar>
+    <voa-avatar type="icon" size="md"></voa-avatar>
+    <voa-avatar type="icon" size="lg"></voa-avatar>
+    <voa-avatar type="icon" size="xl"></voa-avatar>
+  \`
+})
+export class ExampleComponent {}
+\`\`\`
+
+### Vue
+
+\`\`\`vue
+<template>
+  <div>
+    <!-- Avatar com ícone padrão -->
+    <VoaAvatar type="icon" size="md" />
+
+    <!-- Avatar com iniciais -->
+    <VoaAvatar type="initials" initials="AB" size="md" />
+
+    <!-- Avatar com foto -->
+    <VoaAvatar 
+      type="photo" 
+      src="https://i.pravatar.cc/150?img=1" 
+      alt="Avatar do usuário"
+      size="md"
+    />
+
+    <!-- Diferentes tamanhos -->
+    <VoaAvatar type="icon" size="xs" />
+    <VoaAvatar type="icon" size="sm" />
+    <VoaAvatar type="icon" size="md" />
+    <VoaAvatar type="icon" size="lg" />
+    <VoaAvatar type="icon" size="xl" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { VoaAvatar } from '@voa-ds/vue';
+</script>
+\`\`\`
+
+## Instalação
+
+### HTML
+\`\`\`bash
+# NPM
+npm install @voa-ds/components
+
+# Importar no HTML
+<script type="module" src="https://unpkg.com/@voa-ds/components/dist/voa-ds/voa-ds.esm.js"></script>
+\`\`\`
+
+### React
+\`\`\`bash
+npm install @voa-ds/components @voa-ds/react
+\`\`\`
+
+### Angular
+\`\`\`bash
+npm install @voa-ds/components @voa-ds/angular
+\`\`\`
+
+### Vue
+\`\`\`bash
+npm install @voa-ds/components @voa-ds/vue
+\`\`\`
+        `,
+            },
+        },
+    },
+    render: () => html `
+    <div style="padding:2rem;max-width:100%">
+      <h2 style="margin-top:0;margin-bottom:1.5rem;font-size:1.5rem;font-weight:600">Uso do Componente</h2>
+      <p style="margin-bottom:2rem;color:#666">Este componente pode ser usado em diferentes frameworks. Abaixo estão exemplos de código para cada um:</p>
+
+      <h3 style="margin-top:2rem;margin-bottom:1rem;font-size:1.25rem;font-weight:600">Exemplo Interativo</h3>
+      <div style="display:flex;gap:16px;align-items:center;margin-bottom:2rem">
+        <voa-avatar type="icon" size="md"></voa-avatar>
+        <voa-avatar type="initials" initials="AB" size="md"></voa-avatar>
+        <voa-avatar type="photo" src="https://i.pravatar.cc/150?img=1" alt="Avatar" size="md"></voa-avatar>
+      </div>
+      <div style="margin-top:2rem;padding:1rem;background:#f5f5f5;border-radius:4px;border-left:4px solid #0064cb">
+        <p style="margin:0;font-weight:600;margin-bottom:0.5rem">📚 Documentação Completa</p>
+        <p style="margin:0;color:#666;font-size:0.9rem">Para ver exemplos de código completos para HTML, React, Angular e Vue, <a href="?path=/docs/components-voaavatar--docs#usage" style="color:#0064cb;text-decoration:none;font-weight:600">clique aqui para ir à página Docs</a>.</p>
+      </div>
+    </div>
+  `,
+};
+//# sourceMappingURL=voa-avatar.stories.js.map