npm - voa-ds-core - Versions diffs - 1.0.4 → 1.0.5 - Mend

voa-ds-core 1.0.4 → 1.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/dist/collection/components/GetStarted/ComoUsar.stories.js +32 -3
package/dist/collection/components/GetStarted/ComoUsar.stories.js.map +1 -1
package/dist/collection/components/voa-tag/voa-tag.stories.js +6 -6
package/dist/collection/components/voa-tag/voa-tag.stories.js.map +1 -1
package/dist/collection/index.js +2 -0
package/dist/collection/index.js.map +1 -0
package/dist/styles/voa-components.css +4839 -0
package/dist/types/index.d.ts +2 -0
package/dist/types/types/index.d.ts +1 -0
package/package.json +37 -27

package/dist/collection/components/GetStarted/ComoUsar.stories.js CHANGED Viewed

@@ -119,13 +119,42 @@ const Template = () => html `
     <h2>Instalação</h2>
-    <h3>React</h3>
+    <h3>Configuração do Repositório Privado (.npmrc)</h3>
+    <div class="warning-box">
+      <strong>Importante:</strong> Antes de instalar os pacotes, você precisa configurar o arquivo <code>.npmrc</code> na raiz do seu projeto.
+    </div>
+    <p>
+      Este arquivo faz um <strong>override</strong> da configuração padrão do npm e instrui o gerenciador de pacotes
+      a usar o repositório privado da GAB para baixar todos os pacotes do escopo <code>@voa-ds</code>.
+    </p>
+    <h4>Crie o arquivo .npmrc na raiz do seu projeto:</h4>
+    <pre><code>@voa-ds:registry=https://proget-npm.aguiabranca.com.br/npm/npm-private/
+strict-ssl=false</code></pre>
+    <p><strong>O que esse arquivo faz:</strong></p>
+    <ul>
+      <li>Configura o registro npm privado para todos os pacotes <code>@voa-ds</code></li>
+      <li>Permite a instalação mesmo sem certificado SSL válido (necessário para repositório interno)</li>
+      <li>Não afeta a instalação de outros pacotes npm públicos</li>
+    </ul>
+    <div class="success-box">
+      <strong>Dica:</strong> Se você clonou este repositório, o arquivo <code>.npmrc</code> já deve estar configurado.
+      Caso contrário, crie-o manualmente com o conteúdo acima.
+    </div>
+    <h3>Instalando os Pacotes</h3>
+    <h4>React</h4>
     <pre><code>npm install @voa-ds/react</code></pre>
-    <h3>Angular</h3>
+    <h4>Angular</h4>
     <pre><code>npm install @voa-ds/angular</code></pre>
-    <h3>Vue</h3>
+    <h4>Vue</h4>
     <pre><code>npm install @voa-ds/vue</code></pre>
     <hr style="margin: 50px 0; border: none; border-top: 1px solid #e2e8f0;">

package/dist/collection/components/GetStarted/ComoUsar.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ComoUsar.stories.js","sourceRoot":"","sources":["../../../src/components/GetStarted/ComoUsar.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,eAAe;IACb,KAAK,EAAE,wBAAwB;CACxB,CAAC;AAEV,MAAM,QAAQ,GAAY,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkcnC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { Meta, StoryFn } from \"@storybook/web-components\";\r\nimport { html } from \"lit-html\";\r\n\r\nexport default {\r\n title: \"Documentação/Como Usar\",\r\n} as Meta;\r\n\r\nconst Template: StoryFn = () => html`\r\n <style>\r\n .guia-container {\r\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\r\n line-height: 1.7;\r\n max-width: 1000px;\r\n margin: 0 auto;\r\n padding: 30px;\r\n color: #2d3748;\r\n }\r\n\r\n .guia-container h1 {\r\n font-size: 2.5rem;\r\n margin-bottom: 10px;\r\n color: #1a202c;\r\n }\r\n\r\n .guia-container h2 {\r\n font-size: 1.8rem;\r\n margin-top: 40px;\r\n margin-bottom: 15px;\r\n color: #2d3748;\r\n border-bottom: 3px solid #3182ce;\r\n padding-bottom: 10px;\r\n }\r\n\r\n .guia-container h3 {\r\n font-size: 1.4rem;\r\n margin-top: 30px;\r\n margin-bottom: 12px;\r\n color: #4a5568;\r\n }\r\n\r\n .guia-container h4 {\r\n font-size: 1.1rem;\r\n margin-top: 20px;\r\n margin-bottom: 8px;\r\n color: #718096;\r\n }\r\n\r\n .guia-container pre {\r\n background-color: #2d3748;\r\n color: #f7fafc;\r\n padding: 20px;\r\n border-radius: 8px;\r\n overflow-x: auto;\r\n font-size: 14px;\r\n line-height: 1.5;\r\n margin: 15px 0;\r\n }\r\n\r\n .guia-container code {\r\n font-family: 'Fira Code', 'Courier New', monospace;\r\n }\r\n\r\n .guia-container ul {\r\n margin: 15px 0;\r\n padding-left: 25px;\r\n }\r\n\r\n .guia-container li {\r\n margin: 8px 0;\r\n }\r\n\r\n .alert-box {\r\n background: #ebf8ff;\r\n border-left: 4px solid #3182ce;\r\n padding: 15px 20px;\r\n margin: 20px 0;\r\n border-radius: 4px;\r\n }\r\n\r\n .warning-box {\r\n background: #fffaf0;\r\n border-left: 4px solid #ed8936;\r\n padding: 15px 20px;\r\n margin: 20px 0;\r\n border-radius: 4px;\r\n }\r\n\r\n .success-box {\r\n background: #f0fff4;\r\n border-left: 4px solid #48bb78;\r\n padding: 15px 20px;\r\n margin: 20px 0;\r\n border-radius: 4px;\r\n }\r\n\r\n .variants-table {\r\n width: 100%;\r\n border-collapse: collapse;\r\n margin: 15px 0;\r\n }\r\n\r\n .variants-table th,\r\n .variants-table td {\r\n padding: 12px;\r\n text-align: left;\r\n border-bottom: 1px solid #e2e8f0;\r\n }\r\n\r\n .variants-table th {\r\n background: #edf2f7;\r\n font-weight: 600;\r\n }\r\n </style>\r\n\r\n <div class=\"guia-container\">\r\n <h1>Como Usar o VOA Design System</h1>\r\n <p>Guia rápido e direto pra você sair usando os componentes.</p>\r\n\r\n <div class=\"alert-box\">\r\n <strong>Atenção:</strong> Precisa estar conectado na VPN da empresa pra instalar os pacotes!\r\n </div>\r\n\r\n <h2>Instalação</h2>\r\n\r\n <h3>React</h3>\r\n <pre><code>npm install @voa-ds/react</code></pre>\r\n\r\n <h3>Angular</h3>\r\n <pre><code>npm install @voa-ds/angular</code></pre>\r\n\r\n <h3>Vue</h3>\r\n <pre><code>npm install @voa-ds/vue</code></pre>\r\n\r\n <hr style=\"margin: 50px 0; border: none; border-top: 1px solid #e2e8f0;\">\r\n\r\n <h2>Exemplos Práticos</h2>\r\n\r\n <h3>React</h3>\r\n\r\n <h4>Botão</h4>\r\n <pre><code>import { VoaButton } from '@voa-ds/react';\r\n\r\nfunction MeuComponente() {\r\n return (\r\n <VoaButton\r\n variant=\"primary\"\r\n size=\"md\"\r\n onClick={() => alert('Clicou!')}\r\n >\r\n Salvar\r\n </VoaButton>\r\n );\r\n}</code></pre>\r\n\r\n <table class=\"variants-table\">\r\n <thead>\r\n <tr>\r\n <th>Variantes</th>\r\n <th>Quando usar</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr>\r\n <td><code>primary</code></td>\r\n <td>Ação principal da tela</td>\r\n </tr>\r\n <tr>\r\n <td><code>secondary</code></td>\r\n <td>Ação secundária</td>\r\n </tr>\r\n <tr>\r\n <td><code>tonal</code></td>\r\n <td>Botão com fundo suave</td>\r\n </tr>\r\n <tr>\r\n <td><code>ghost</code></td>\r\n <td>Botão transparente</td>\r\n </tr>\r\n <tr>\r\n <td><code>link</code></td>\r\n <td>Parece um link</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n\r\n <h4>Input</h4>\r\n <pre><code>import { VoaInput } from '@voa-ds/react';\r\nimport { useState } from 'react';\r\n\r\nfunction Formulario() {\r\n const [nome, setNome] = useState('');\r\n\r\n return (\r\n <VoaInput\r\n label=\"Nome completo\"\r\n placeholder=\"Digite seu nome\"\r\n value={nome}\r\n onDsChange={(e) => setNome(e.detail)}\r\n required\r\n />\r\n );\r\n}</code></pre>\r\n\r\n <div class=\"warning-box\">\r\n <strong>Importante:</strong> O valor vem em <code>event.detail</code>, não em <code>event.target.value</code>\r\n </div>\r\n\r\n <h4>Input com Erro</h4>\r\n <pre><code><VoaInput\r\n label=\"Email\"\r\n type=\"email\"\r\n error\r\n helperText=\"Email inválido\"\r\n/></code></pre>\r\n\r\n <h4>Select</h4>\r\n <pre><code>import { VoaSelect, VoaOption } from '@voa-ds/react';\r\n\r\nfunction Dropdown() {\r\n return (\r\n <VoaSelect label=\"Escolha uma opção\">\r\n <VoaOption value=\"1\">Opção 1</VoaOption>\r\n <VoaOption value=\"2\">Opção 2</VoaOption>\r\n <VoaOption value=\"3\">Opção 3</VoaOption>\r\n </VoaSelect>\r\n );\r\n}</code></pre>\r\n\r\n <h4>Checkbox</h4>\r\n <pre><code>import { VoaCheckbox } from '@voa-ds/react';\r\nimport { useState } from 'react';\r\n\r\nfunction MinhaLista() {\r\n const [aceito, setAceito] = useState(false);\r\n\r\n return (\r\n <VoaCheckbox\r\n checked={aceito}\r\n onDsChange={(e) => setAceito(e.detail)}\r\n >\r\n Aceito os termos de uso\r\n </VoaCheckbox>\r\n );\r\n}</code></pre>\r\n\r\n <h4>Alert</h4>\r\n <pre><code>import { VoaAlert } from '@voa-ds/react';\r\n\r\nfunction Notificacao() {\r\n return (\r\n <VoaAlert variant=\"success\">\r\n Dados salvos com sucesso!\r\n </VoaAlert>\r\n );\r\n}</code></pre>\r\n\r\n <h3>Angular</h3>\r\n\r\n <h4>Setup no Módulo</h4>\r\n <pre><code>// app.module.ts\r\nimport { VoaButton, VoaInput } from '@voa-ds/angular';\r\n\r\n@NgModule({\r\n declarations: [VoaButton, VoaInput],\r\n // ...\r\n})</code></pre>\r\n\r\n <h4>Usando no Template</h4>\r\n <pre><code><voa-button\r\n variant=\"primary\"\r\n size=\"md\"\r\n (dsClick)=\"salvar()\">\r\n Salvar\r\n</voa-button>\r\n\r\n<voa-input\r\n label=\"Nome completo\"\r\n placeholder=\"Digite seu nome\"\r\n [value]=\"nome\"\r\n (dsChange)=\"nome = $event.detail\"\r\n required>\r\n</voa-input></code></pre>\r\n\r\n <h4>No Componente</h4>\r\n <pre><code>export class MeuComponente {\r\n nome: string = '';\r\n\r\n salvar() {\r\n console.log('Nome:', this.nome);\r\n }\r\n}</code></pre>\r\n\r\n <h3>Vue</h3>\r\n\r\n <h4>Botão</h4>\r\n <pre><code><template>\r\n <VoaButton\r\n variant=\"primary\"\r\n size=\"md\"\r\n @dsClick=\"salvar\">\r\n Salvar\r\n </VoaButton>\r\n</template>\r\n\r\n<script>\r\nimport { VoaButton } from '@voa-ds/vue';\r\n\r\nexport default {\r\n components: { VoaButton },\r\n methods: {\r\n salvar() {\r\n console.log('Salvando...');\r\n }\r\n }\r\n}\r\n</script></code></pre>\r\n\r\n <h4>Input</h4>\r\n <pre><code><template>\r\n <VoaInput\r\n label=\"Nome completo\"\r\n placeholder=\"Digite seu nome\"\r\n :value=\"nome\"\r\n @dsChange=\"nome = $event.detail\"\r\n required\r\n />\r\n</template>\r\n\r\n<script>\r\nimport { VoaInput } from '@voa-ds/vue';\r\n\r\nexport default {\r\n components: { VoaInput },\r\n data() {\r\n return {\r\n nome: ''\r\n }\r\n }\r\n}\r\n</script></code></pre>\r\n\r\n <hr style=\"margin: 50px 0; border: none; border-top: 1px solid #e2e8f0;\">\r\n\r\n <h2>Eventos</h2>\r\n\r\n <div class=\"success-box\">\r\n Todos os eventos dos componentes usam o prefixo <code>ds</code>\r\n </div>\r\n\r\n <table class=\"variants-table\">\r\n <thead>\r\n <tr>\r\n <th>Evento</th>\r\n <th>Quando dispara</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr>\r\n <td><code>dsClick</code></td>\r\n <td>Quando clica no componente</td>\r\n </tr>\r\n <tr>\r\n <td><code>dsChange</code></td>\r\n <td>Quando o valor muda (após perder foco)</td>\r\n </tr>\r\n <tr>\r\n <td><code>dsInput</code></td>\r\n <td>Enquanto está digitando</td>\r\n </tr>\r\n <tr>\r\n <td><code>dsFocus</code></td>\r\n <td>Quando ganha o foco</td>\r\n </tr>\r\n <tr>\r\n <td><code>dsBlur</code></td>\r\n <td>Quando perde o foco</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n\r\n <h4>Como pegar o valor dos eventos:</h4>\r\n <pre><code>// React\r\n<VoaInput onDsChange={(e) => console.log(e.detail)} />\r\n\r\n// Angular\r\n<voa-input (dsChange)=\"handleChange($event.detail)\"></voa-input>\r\n\r\n// Vue\r\n<VoaInput @dsChange=\"valor = $event.detail\" /></code></pre>\r\n\r\n <hr style=\"margin: 50px 0; border: none; border-top: 1px solid #e2e8f0;\">\r\n\r\n <h2>Componentes Disponíveis</h2>\r\n\r\n <ul>\r\n <li><strong>VoaButton</strong> - Botões de vários tipos</li>\r\n <li><strong>VoaInput</strong> - Campos de texto</li>\r\n <li><strong>VoaTextArea</strong> - Área de texto grande</li>\r\n <li><strong>VoaCheckbox</strong> - Caixas de seleção</li>\r\n <li><strong>VoaRadio</strong> - Botões de rádio</li>\r\n <li><strong>VoaSelect / VoaOption</strong> - Dropdown</li>\r\n <li><strong>VoaSwitch</strong> - Interruptor on/off</li>\r\n <li><strong>VoaCard</strong> - Cards</li>\r\n <li><strong>VoaAlert</strong> - Alertas</li>\r\n <li><strong>VoaBadge</strong> - Badges/etiquetas</li>\r\n <li><strong>VoaTag</strong> - Tags</li>\r\n <li><strong>VoaAvatar</strong> - Avatar de usuário</li>\r\n <li><strong>VoaPagination</strong> - Paginação</li>\r\n <li><strong>VoaBreadcrumbs</strong> - Navegação</li>\r\n <li><strong>VoaAccordion</strong> - Acordeão</li>\r\n <li><strong>VoaTab / VoaTabItem</strong> - Abas</li>\r\n <li><strong>VoaTooltip</strong> - Dicas</li>\r\n </ul>\r\n\r\n <hr style=\"margin: 50px 0; border: none; border-top: 1px solid #e2e8f0;\">\r\n\r\n <h2>Problemas Comuns</h2>\r\n\r\n <h4>Não consigo instalar</h4>\r\n <ul>\r\n <li>Verifica se tá na VPN</li>\r\n <li>Verifica se tem o <code>.npmrc</code> configurado</li>\r\n </ul>\r\n\r\n <h4>Componente não aparece</h4>\r\n <ul>\r\n <li>Verifica se importou certo</li>\r\n <li>Em Angular, verifica se declarou no module</li>\r\n <li>Olha o console do navegador</li>\r\n </ul>\r\n\r\n <h4>Eventos não funcionam</h4>\r\n <ul>\r\n <li>Lembra do prefixo <code>ds</code>: <code>dsClick</code>, <code>dsChange</code></li>\r\n <li>O valor vem em <code>event.detail</code></li>\r\n </ul>\r\n\r\n <hr style=\"margin: 50px 0; border: none; border-top: 1px solid #e2e8f0;\">\r\n\r\n <h2>Dicas</h2>\r\n\r\n <div class=\"success-box\">\r\n <ul style=\"margin: 0; padding-left: 20px;\">\r\n <li>Sempre use VPN pra instalar</li>\r\n <li>Tamanhos padrão: <code>sm</code>, <code>md</code>, <code>lg</code></li>\r\n <li>Estados visuais: <code>error</code>, <code>valid</code>, <code>warning</code>, <code>disabled</code></li>\r\n <li>Veja o Storybook pra ver todos os componentes em ação</li>\r\n <li>Cada componente tem um README com mais detalhes</li>\r\n </ul>\r\n </div>\r\n\r\n <hr style=\"margin: 50px 0; border: none; border-top: 1px solid #e2e8f0;\">\r\n\r\n <div style=\"text-align: center; color: #718096; padding: 20px;\">\r\n <p>Precisa de ajuda? Veja o Storybook ou procura o time!</p>\r\n </div>\r\n </div>\r\n`;\r\n\r\nexport const Default = Template.bind({});\r\n"]}
1	+ {"version":3,"file":"ComoUsar.stories.js","sourceRoot":"","sources":["../../../src/components/GetStarted/ComoUsar.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,eAAe;IACb,KAAK,EAAE,wBAAwB;CACxB,CAAC;AAEV,MAAM,QAAQ,GAAY,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+dnC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { Meta, StoryFn } from \"@storybook/web-components\";\r\nimport { html } from \"lit-html\";\r\n\r\nexport default {\r\n title: \"Documentação/Como Usar\",\r\n} as Meta;\r\n\r\nconst Template: StoryFn = () => html`\r\n <style>\r\n .guia-container {\r\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\r\n line-height: 1.7;\r\n max-width: 1000px;\r\n margin: 0 auto;\r\n padding: 30px;\r\n color: #2d3748;\r\n }\r\n\r\n .guia-container h1 {\r\n font-size: 2.5rem;\r\n margin-bottom: 10px;\r\n color: #1a202c;\r\n }\r\n\r\n .guia-container h2 {\r\n font-size: 1.8rem;\r\n margin-top: 40px;\r\n margin-bottom: 15px;\r\n color: #2d3748;\r\n border-bottom: 3px solid #3182ce;\r\n padding-bottom: 10px;\r\n }\r\n\r\n .guia-container h3 {\r\n font-size: 1.4rem;\r\n margin-top: 30px;\r\n margin-bottom: 12px;\r\n color: #4a5568;\r\n }\r\n\r\n .guia-container h4 {\r\n font-size: 1.1rem;\r\n margin-top: 20px;\r\n margin-bottom: 8px;\r\n color: #718096;\r\n }\r\n\r\n .guia-container pre {\r\n background-color: #2d3748;\r\n color: #f7fafc;\r\n padding: 20px;\r\n border-radius: 8px;\r\n overflow-x: auto;\r\n font-size: 14px;\r\n line-height: 1.5;\r\n margin: 15px 0;\r\n }\r\n\r\n .guia-container code {\r\n font-family: 'Fira Code', 'Courier New', monospace;\r\n }\r\n\r\n .guia-container ul {\r\n margin: 15px 0;\r\n padding-left: 25px;\r\n }\r\n\r\n .guia-container li {\r\n margin: 8px 0;\r\n }\r\n\r\n .alert-box {\r\n background: #ebf8ff;\r\n border-left: 4px solid #3182ce;\r\n padding: 15px 20px;\r\n margin: 20px 0;\r\n border-radius: 4px;\r\n }\r\n\r\n .warning-box {\r\n background: #fffaf0;\r\n border-left: 4px solid #ed8936;\r\n padding: 15px 20px;\r\n margin: 20px 0;\r\n border-radius: 4px;\r\n }\r\n\r\n .success-box {\r\n background: #f0fff4;\r\n border-left: 4px solid #48bb78;\r\n padding: 15px 20px;\r\n margin: 20px 0;\r\n border-radius: 4px;\r\n }\r\n\r\n .variants-table {\r\n width: 100%;\r\n border-collapse: collapse;\r\n margin: 15px 0;\r\n }\r\n\r\n .variants-table th,\r\n .variants-table td {\r\n padding: 12px;\r\n text-align: left;\r\n border-bottom: 1px solid #e2e8f0;\r\n }\r\n\r\n .variants-table th {\r\n background: #edf2f7;\r\n font-weight: 600;\r\n }\r\n </style>\r\n\r\n <div class=\"guia-container\">\r\n <h1>Como Usar o VOA Design System</h1>\r\n <p>Guia rápido e direto pra você sair usando os componentes.</p>\r\n\r\n <div class=\"alert-box\">\r\n <strong>Atenção:</strong> Precisa estar conectado na VPN da empresa pra instalar os pacotes!\r\n </div>\r\n\r\n <h2>Instalação</h2>\r\n\r\n <h3>Configuração do Repositório Privado (.npmrc)</h3>\r\n\r\n <div class=\"warning-box\">\r\n <strong>Importante:</strong> Antes de instalar os pacotes, você precisa configurar o arquivo <code>.npmrc</code> na raiz do seu projeto.\r\n </div>\r\n\r\n <p>\r\n Este arquivo faz um <strong>override</strong> da configuração padrão do npm e instrui o gerenciador de pacotes\r\n a usar o repositório privado da GAB para baixar todos os pacotes do escopo <code>@voa-ds</code>.\r\n </p>\r\n\r\n <h4>Crie o arquivo .npmrc na raiz do seu projeto:</h4>\r\n <pre><code>@voa-ds:registry=https://proget-npm.aguiabranca.com.br/npm/npm-private/\r\nstrict-ssl=false</code></pre>\r\n\r\n <p><strong>O que esse arquivo faz:</strong></p>\r\n <ul>\r\n <li>Configura o registro npm privado para todos os pacotes <code>@voa-ds</code></li>\r\n <li>Permite a instalação mesmo sem certificado SSL válido (necessário para repositório interno)</li>\r\n <li>Não afeta a instalação de outros pacotes npm públicos</li>\r\n </ul>\r\n\r\n <div class=\"success-box\">\r\n <strong>Dica:</strong> Se você clonou este repositório, o arquivo <code>.npmrc</code> já deve estar configurado.\r\n Caso contrário, crie-o manualmente com o conteúdo acima.\r\n </div>\r\n\r\n <h3>Instalando os Pacotes</h3>\r\n\r\n <h4>React</h4>\r\n <pre><code>npm install @voa-ds/react</code></pre>\r\n\r\n <h4>Angular</h4>\r\n <pre><code>npm install @voa-ds/angular</code></pre>\r\n\r\n <h4>Vue</h4>\r\n <pre><code>npm install @voa-ds/vue</code></pre>\r\n\r\n <hr style=\"margin: 50px 0; border: none; border-top: 1px solid #e2e8f0;\">\r\n\r\n <h2>Exemplos Práticos</h2>\r\n\r\n <h3>React</h3>\r\n\r\n <h4>Botão</h4>\r\n <pre><code>import { VoaButton } from '@voa-ds/react';\r\n\r\nfunction MeuComponente() {\r\n return (\r\n <VoaButton\r\n variant=\"primary\"\r\n size=\"md\"\r\n onClick={() => alert('Clicou!')}\r\n >\r\n Salvar\r\n </VoaButton>\r\n );\r\n}</code></pre>\r\n\r\n <table class=\"variants-table\">\r\n <thead>\r\n <tr>\r\n <th>Variantes</th>\r\n <th>Quando usar</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr>\r\n <td><code>primary</code></td>\r\n <td>Ação principal da tela</td>\r\n </tr>\r\n <tr>\r\n <td><code>secondary</code></td>\r\n <td>Ação secundária</td>\r\n </tr>\r\n <tr>\r\n <td><code>tonal</code></td>\r\n <td>Botão com fundo suave</td>\r\n </tr>\r\n <tr>\r\n <td><code>ghost</code></td>\r\n <td>Botão transparente</td>\r\n </tr>\r\n <tr>\r\n <td><code>link</code></td>\r\n <td>Parece um link</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n\r\n <h4>Input</h4>\r\n <pre><code>import { VoaInput } from '@voa-ds/react';\r\nimport { useState } from 'react';\r\n\r\nfunction Formulario() {\r\n const [nome, setNome] = useState('');\r\n\r\n return (\r\n <VoaInput\r\n label=\"Nome completo\"\r\n placeholder=\"Digite seu nome\"\r\n value={nome}\r\n onDsChange={(e) => setNome(e.detail)}\r\n required\r\n />\r\n );\r\n}</code></pre>\r\n\r\n <div class=\"warning-box\">\r\n <strong>Importante:</strong> O valor vem em <code>event.detail</code>, não em <code>event.target.value</code>\r\n </div>\r\n\r\n <h4>Input com Erro</h4>\r\n <pre><code><VoaInput\r\n label=\"Email\"\r\n type=\"email\"\r\n error\r\n helperText=\"Email inválido\"\r\n/></code></pre>\r\n\r\n <h4>Select</h4>\r\n <pre><code>import { VoaSelect, VoaOption } from '@voa-ds/react';\r\n\r\nfunction Dropdown() {\r\n return (\r\n <VoaSelect label=\"Escolha uma opção\">\r\n <VoaOption value=\"1\">Opção 1</VoaOption>\r\n <VoaOption value=\"2\">Opção 2</VoaOption>\r\n <VoaOption value=\"3\">Opção 3</VoaOption>\r\n </VoaSelect>\r\n );\r\n}</code></pre>\r\n\r\n <h4>Checkbox</h4>\r\n <pre><code>import { VoaCheckbox } from '@voa-ds/react';\r\nimport { useState } from 'react';\r\n\r\nfunction MinhaLista() {\r\n const [aceito, setAceito] = useState(false);\r\n\r\n return (\r\n <VoaCheckbox\r\n checked={aceito}\r\n onDsChange={(e) => setAceito(e.detail)}\r\n >\r\n Aceito os termos de uso\r\n </VoaCheckbox>\r\n );\r\n}</code></pre>\r\n\r\n <h4>Alert</h4>\r\n <pre><code>import { VoaAlert } from '@voa-ds/react';\r\n\r\nfunction Notificacao() {\r\n return (\r\n <VoaAlert variant=\"success\">\r\n Dados salvos com sucesso!\r\n </VoaAlert>\r\n );\r\n}</code></pre>\r\n\r\n <h3>Angular</h3>\r\n\r\n <h4>Setup no Módulo</h4>\r\n <pre><code>// app.module.ts\r\nimport { VoaButton, VoaInput } from '@voa-ds/angular';\r\n\r\n@NgModule({\r\n declarations: [VoaButton, VoaInput],\r\n // ...\r\n})</code></pre>\r\n\r\n <h4>Usando no Template</h4>\r\n <pre><code><voa-button\r\n variant=\"primary\"\r\n size=\"md\"\r\n (dsClick)=\"salvar()\">\r\n Salvar\r\n</voa-button>\r\n\r\n<voa-input\r\n label=\"Nome completo\"\r\n placeholder=\"Digite seu nome\"\r\n [value]=\"nome\"\r\n (dsChange)=\"nome = $event.detail\"\r\n required>\r\n</voa-input></code></pre>\r\n\r\n <h4>No Componente</h4>\r\n <pre><code>export class MeuComponente {\r\n nome: string = '';\r\n\r\n salvar() {\r\n console.log('Nome:', this.nome);\r\n }\r\n}</code></pre>\r\n\r\n <h3>Vue</h3>\r\n\r\n <h4>Botão</h4>\r\n <pre><code><template>\r\n <VoaButton\r\n variant=\"primary\"\r\n size=\"md\"\r\n @dsClick=\"salvar\">\r\n Salvar\r\n </VoaButton>\r\n</template>\r\n\r\n<script>\r\nimport { VoaButton } from '@voa-ds/vue';\r\n\r\nexport default {\r\n components: { VoaButton },\r\n methods: {\r\n salvar() {\r\n console.log('Salvando...');\r\n }\r\n }\r\n}\r\n</script></code></pre>\r\n\r\n <h4>Input</h4>\r\n <pre><code><template>\r\n <VoaInput\r\n label=\"Nome completo\"\r\n placeholder=\"Digite seu nome\"\r\n :value=\"nome\"\r\n @dsChange=\"nome = $event.detail\"\r\n required\r\n />\r\n</template>\r\n\r\n<script>\r\nimport { VoaInput } from '@voa-ds/vue';\r\n\r\nexport default {\r\n components: { VoaInput },\r\n data() {\r\n return {\r\n nome: ''\r\n }\r\n }\r\n}\r\n</script></code></pre>\r\n\r\n <hr style=\"margin: 50px 0; border: none; border-top: 1px solid #e2e8f0;\">\r\n\r\n <h2>Eventos</h2>\r\n\r\n <div class=\"success-box\">\r\n Todos os eventos dos componentes usam o prefixo <code>ds</code>\r\n </div>\r\n\r\n <table class=\"variants-table\">\r\n <thead>\r\n <tr>\r\n <th>Evento</th>\r\n <th>Quando dispara</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr>\r\n <td><code>dsClick</code></td>\r\n <td>Quando clica no componente</td>\r\n </tr>\r\n <tr>\r\n <td><code>dsChange</code></td>\r\n <td>Quando o valor muda (após perder foco)</td>\r\n </tr>\r\n <tr>\r\n <td><code>dsInput</code></td>\r\n <td>Enquanto está digitando</td>\r\n </tr>\r\n <tr>\r\n <td><code>dsFocus</code></td>\r\n <td>Quando ganha o foco</td>\r\n </tr>\r\n <tr>\r\n <td><code>dsBlur</code></td>\r\n <td>Quando perde o foco</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n\r\n <h4>Como pegar o valor dos eventos:</h4>\r\n <pre><code>// React\r\n<VoaInput onDsChange={(e) => console.log(e.detail)} />\r\n\r\n// Angular\r\n<voa-input (dsChange)=\"handleChange($event.detail)\"></voa-input>\r\n\r\n// Vue\r\n<VoaInput @dsChange=\"valor = $event.detail\" /></code></pre>\r\n\r\n <hr style=\"margin: 50px 0; border: none; border-top: 1px solid #e2e8f0;\">\r\n\r\n <h2>Componentes Disponíveis</h2>\r\n\r\n <ul>\r\n <li><strong>VoaButton</strong> - Botões de vários tipos</li>\r\n <li><strong>VoaInput</strong> - Campos de texto</li>\r\n <li><strong>VoaTextArea</strong> - Área de texto grande</li>\r\n <li><strong>VoaCheckbox</strong> - Caixas de seleção</li>\r\n <li><strong>VoaRadio</strong> - Botões de rádio</li>\r\n <li><strong>VoaSelect / VoaOption</strong> - Dropdown</li>\r\n <li><strong>VoaSwitch</strong> - Interruptor on/off</li>\r\n <li><strong>VoaCard</strong> - Cards</li>\r\n <li><strong>VoaAlert</strong> - Alertas</li>\r\n <li><strong>VoaBadge</strong> - Badges/etiquetas</li>\r\n <li><strong>VoaTag</strong> - Tags</li>\r\n <li><strong>VoaAvatar</strong> - Avatar de usuário</li>\r\n <li><strong>VoaPagination</strong> - Paginação</li>\r\n <li><strong>VoaBreadcrumbs</strong> - Navegação</li>\r\n <li><strong>VoaAccordion</strong> - Acordeão</li>\r\n <li><strong>VoaTab / VoaTabItem</strong> - Abas</li>\r\n <li><strong>VoaTooltip</strong> - Dicas</li>\r\n </ul>\r\n\r\n <hr style=\"margin: 50px 0; border: none; border-top: 1px solid #e2e8f0;\">\r\n\r\n <h2>Problemas Comuns</h2>\r\n\r\n <h4>Não consigo instalar</h4>\r\n <ul>\r\n <li>Verifica se tá na VPN</li>\r\n <li>Verifica se tem o <code>.npmrc</code> configurado</li>\r\n </ul>\r\n\r\n <h4>Componente não aparece</h4>\r\n <ul>\r\n <li>Verifica se importou certo</li>\r\n <li>Em Angular, verifica se declarou no module</li>\r\n <li>Olha o console do navegador</li>\r\n </ul>\r\n\r\n <h4>Eventos não funcionam</h4>\r\n <ul>\r\n <li>Lembra do prefixo <code>ds</code>: <code>dsClick</code>, <code>dsChange</code></li>\r\n <li>O valor vem em <code>event.detail</code></li>\r\n </ul>\r\n\r\n <hr style=\"margin: 50px 0; border: none; border-top: 1px solid #e2e8f0;\">\r\n\r\n <h2>Dicas</h2>\r\n\r\n <div class=\"success-box\">\r\n <ul style=\"margin: 0; padding-left: 20px;\">\r\n <li>Sempre use VPN pra instalar</li>\r\n <li>Tamanhos padrão: <code>sm</code>, <code>md</code>, <code>lg</code></li>\r\n <li>Estados visuais: <code>error</code>, <code>valid</code>, <code>warning</code>, <code>disabled</code></li>\r\n <li>Veja o Storybook pra ver todos os componentes em ação</li>\r\n <li>Cada componente tem um README com mais detalhes</li>\r\n </ul>\r\n </div>\r\n\r\n <hr style=\"margin: 50px 0; border: none; border-top: 1px solid #e2e8f0;\">\r\n\r\n <div style=\"text-align: center; color: #718096; padding: 20px;\">\r\n <p>Precisa de ajuda? Veja o Storybook ou procura o time!</p>\r\n </div>\r\n </div>\r\n`;\r\n\r\nexport const Default = Template.bind({});\r\n"]}

package/dist/collection/components/voa-tag/voa-tag.stories.js CHANGED Viewed

@@ -145,7 +145,7 @@ export const WithBothIcons = {
 export const Small = {
     args: {
         size: 'sm',
-        label: 'v1.0.0',
+        label: 'v1.0.1',
         shape: 'pill',
     },
 };
@@ -190,7 +190,7 @@ Este componente pode ser usado em diferentes frameworks. Abaixo estão exemplos
 <voa-tag label="Beta Feature" shape="pill"></voa-tag>
 <!-- Tag pequena -->
-<voa-tag label="v1.0.0" size="sm" shape="pill"></voa-tag>
+<voa-tag label="v1.0.1" size="sm" shape="pill"></voa-tag>
 <!-- Tag com ícone à esquerda -->
 <voa-tag variant="icons" label="Approved" icon-left>
@@ -222,7 +222,7 @@ function MyComponent() {
       <VoaTag label="Beta Feature" shape="pill" />
       {/* Tag pequena */}
-      <VoaTag label="v1.0.0" size="sm" shape="pill" />
+      <VoaTag label="v1.0.1" size="sm" shape="pill" />
       {/* Tag com ícone à esquerda */}
       <VoaTag variant="icons" label="Approved" iconLeft>
@@ -257,7 +257,7 @@ import { VoaTag } from '@voa-ds/angular';
     <voa-tag label="Beta Feature" shape="pill"></voa-tag>
     <!-- Tag pequena -->
-    <voa-tag label="v1.0.0" size="sm" shape="pill"></voa-tag>
+    <voa-tag label="v1.0.1" size="sm" shape="pill"></voa-tag>
     <!-- Tag com ícone à esquerda -->
     <voa-tag variant="icons" label="Approved" [iconLeft]="true">
@@ -282,7 +282,7 @@ export class ExampleComponent {}
     <VoaTag label="Beta Feature" shape="pill" />
     <!-- Tag pequena -->
-    <VoaTag label="v1.0.0" size="sm" shape="pill" />
+    <VoaTag label="v1.0.1" size="sm" shape="pill" />
     <!-- Tag com ícone à esquerda -->
     <VoaTag variant="icons" label="Approved" :icon-left="true">
@@ -335,7 +335,7 @@ npm install @voa-ds/components @voa-ds/vue
       <div style="display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 2rem;">
         <voa-tag label="Design System"></voa-tag>
         <voa-tag label="Beta Feature" shape="pill"></voa-tag>
-        <voa-tag label="v1.0.0" size="sm" shape="pill"></voa-tag>
+        <voa-tag label="v1.0.1" size="sm" shape="pill"></voa-tag>
       </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>

package/dist/collection/components/voa-tag/voa-tag.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"voa-tag.stories.js","sourceRoot":"","sources":["../../../src/components/voa-tag/voa-tag.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryObj } from '@storybook/web-components';\r\nimport { html } from 'lit';\r\nimport '../../Stories/styles/voa-tag.external.css';\r\n\r\n/*\r\n VoaTag\r\n * A static component for categorization labels and status indicators.\r\n \r\n CSS Parts:\r\n * - `base`: The main container\r\n * - `label`: Text wrapper\r\n * - `icon-start`: Left icon wrapper\r\n * - `icon-end`: Right icon wrapper\r\n /\r\nconst meta = {\r\n title: \"Componentes/Display/Tag\",\r\n component: 'voa-tag',\r\n tags: ['autodocs'],\r\n parameters: {\r\n design: {\r\n type: 'figma',\r\n url: 'https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=1436-769',\r\n },\r\n },\r\n argTypes: {\r\n label: { control: 'text' },\r\n variant: {\r\n control: 'radio',\r\n options: ['plain', 'icons'],\r\n description: 'Controls layout for icons',\r\n },\r\n shape: {\r\n control: 'radio',\r\n options: ['default', 'pill'],\r\n description: 'Corner radius style',\r\n },\r\n size: {\r\n control: 'radio',\r\n options: ['sm', 'md'],\r\n },\r\n iconLeft: { control: 'boolean' },\r\n iconRight: { control: 'boolean' },\r\n },\r\n args: {\r\n label: 'Design System',\r\n variant: 'plain',\r\n shape: 'default',\r\n size: 'md',\r\n iconLeft: false,\r\n iconRight: false,\r\n },\r\n render: (args) => html`\r\n <voa-tag\r\n .label=${args.label}\r\n .variant=${args.variant}\r\n .shape=${args.shape}\r\n .size=${args.size}\r\n .iconLeft=${args.iconLeft}\r\n .iconRight=${args.iconRight}\r\n >\r\n ${args.variant === 'icons' && args.iconLeft ? html`\r\n <svg slot=\"icon-start\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"100%\" height=\"100%\">\r\n <path d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z\" />\r\n </svg>\r\n ` : ''}\r\n ${args.variant === 'icons' && args.iconRight ? html`\r\n <svg slot=\"icon-end\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"100%\" height=\"100%\">\r\n <path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n </svg>\r\n ` : ''}\r\n </voa-tag>\r\n `,\r\n} satisfies Meta;\r\n\r\nexport default meta;\r\n\r\nexport const Default: StoryObj = {};\r\n\r\nexport const PillShape: StoryObj = {\r\n args: {\r\n shape: 'pill',\r\n label: 'Beta Feature',\r\n },\r\n};\r\n\r\nexport const WithStartIcon: StoryObj = {\r\n args: {\r\n variant: 'icons',\r\n iconLeft: true,\r\n label: 'Approved',\r\n },\r\n render: (args) => html`\r\n <voa-tag\r\n .label=${args.label}\r\n .variant=${args.variant}\r\n .shape=${args.shape}\r\n .size=${args.size}\r\n .iconLeft=${args.iconLeft}\r\n >\r\n <svg slot=\"icon-start\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"100%\" height=\"100%\">\r\n <path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n </svg>\r\n </voa-tag>\r\n `,\r\n};\r\n\r\nexport const WithEndIcon: StoryObj = {\r\n args: {\r\n variant: 'icons',\r\n iconRight: true,\r\n label: 'Filter',\r\n },\r\n render: (args) => html`\r\n <voa-tag\r\n .label=${args.label}\r\n .variant=${args.variant}\r\n .shape=${args.shape}\r\n .size=${args.size}\r\n .iconRight=${args.iconRight}\r\n >\r\n <svg slot=\"icon-end\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"100%\" height=\"100%\">\r\n <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\r\n </svg>\r\n </voa-tag>\r\n `,\r\n};\r\n\r\nexport const WithBothIcons: StoryObj = {\r\n args: {\r\n variant: 'icons',\r\n iconLeft: true,\r\n iconRight: true,\r\n label: 'Complete',\r\n },\r\n render: (args) => html`\r\n <voa-tag\r\n .label=${args.label}\r\n .variant=${args.variant}\r\n .shape=${args.shape}\r\n .size=${args.size}\r\n .iconLeft=${args.iconLeft}\r\n .iconRight=${args.iconRight}\r\n >\r\n <svg slot=\"icon-start\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"100%\" height=\"100%\">\r\n <path d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z\" />\r\n </svg>\r\n <svg slot=\"icon-end\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"100%\" height=\"100%\">\r\n <path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n </svg>\r\n </voa-tag>\r\n `,\r\n};\r\n\r\nexport const Small: StoryObj = {\r\n args: {\r\n size: 'sm',\r\n label: 'v1.0.0',\r\n shape: 'pill',\r\n },\r\n};\r\n\r\nexport const AllVariants: StoryObj = {\r\n render: () => html`\r\n <div style=\"display: flex; flex-wrap: wrap; gap: 16px; align-items: center;\">\r\n <voa-tag label=\"Default MD\"></voa-tag>\r\n <voa-tag label=\"Default SM\" size=\"sm\"></voa-tag>\r\n <voa-tag label=\"Pill MD\" shape=\"pill\"></voa-tag>\r\n <voa-tag label=\"Pill SM\" shape=\"pill\" size=\"sm\"></voa-tag>\r\n <voa-tag variant=\"icons\" label=\"Icons\" ?iconLeft=${true} ?iconRight=${true}>\r\n <voa-tag variant=\"icons\" label=\"Icons\" .iconLeft=${true} .iconRight=${true}>\r\n <svg slot=\"icon-start\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"100%\" height=\"100%\">\r\n <path d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2z\" />\r\n </svg>\r\n <svg slot=\"icon-end\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"100%\" height=\"100%\">\r\n <path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n </svg>\r\n </voa-tag>\r\n </div>\r\n `,\r\n};\r\n\r\n// ============================================\r\n// Usage - Exemplos de Código\r\n// ============================================\r\n\r\nexport const Usage: StoryObj = {\r\n parameters: {\r\n docs: {\r\n description: {\r\n story: `\r\n## Uso do Componente\r\n\r\nEste componente pode ser usado em diferentes frameworks. Abaixo estão exemplos de código para cada um:\r\n\r\n### HTML (Web Components)\r\n\r\n\\`\\`\\`html\r\n<!-- Tag básica -->\r\n<voa-tag label=\"Design System\"></voa-tag>\r\n\r\n<!-- Tag com formato pill -->\r\n<voa-tag label=\"Beta Feature\" shape=\"pill\"></voa-tag>\r\n\r\n<!-- Tag pequena -->\r\n<voa-tag label=\"v1.0.0\" size=\"sm\" shape=\"pill\"></voa-tag>\r\n\r\n<!-- Tag com ícone à esquerda -->\r\n<voa-tag variant=\"icons\" label=\"Approved\" icon-left>\r\n <svg slot=\"icon-start\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"100%\" height=\"100%\">\r\n <path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n </svg>\r\n</voa-tag>\r\n\r\n<!-- Tag com ícone à direita -->\r\n<voa-tag variant=\"icons\" label=\"Filter\" icon-right>\r\n <svg slot=\"icon-end\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"100%\" height=\"100%\">\r\n <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\r\n </svg>\r\n</voa-tag>\r\n\\`\\`\\`\r\n\r\n### React\r\n\r\n\\`\\`\\`tsx\r\nimport { VoaTag } from '@voa-ds/react';\r\n\r\nfunction MyComponent() {\r\n return (\r\n <>\r\n {/ Tag básica /}\r\n <VoaTag label=\"Design System\" />\r\n\r\n {/ Tag com formato pill /}\r\n <VoaTag label=\"Beta Feature\" shape=\"pill\" />\r\n\r\n {/ Tag pequena /}\r\n <VoaTag label=\"v1.0.0\" size=\"sm\" shape=\"pill\" />\r\n\r\n {/ Tag com ícone à esquerda /}\r\n <VoaTag variant=\"icons\" label=\"Approved\" iconLeft>\r\n <svg slot=\"icon-start\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"100%\" height=\"100%\">\r\n <path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n </svg>\r\n </VoaTag>\r\n\r\n {/ Tag com ícone à direita */}\r\n <VoaTag variant=\"icons\" label=\"Filter\" iconRight>\r\n <svg slot=\"icon-end\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"100%\" height=\"100%\">\r\n <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\r\n </svg>\r\n </VoaTag>\r\n </>\r\n );\r\n}\r\n\\`\\`\\`\r\n\r\n### Angular\r\n\r\n\\`\\`\\`typescript\r\nimport { VoaTag } from '@voa-ds/angular';\r\n\r\n@Component({\r\n selector: 'app-example',\r\n template: \\`\r\n <!-- Tag básica -->\r\n <voa-tag label=\"Design System\"></voa-tag>\r\n\r\n <!-- Tag com formato pill -->\r\n <voa-tag label=\"Beta Feature\" shape=\"pill\"></voa-tag>\r\n\r\n <!-- Tag pequena -->\r\n <voa-tag label=\"v1.0.0\" size=\"sm\" shape=\"pill\"></voa-tag>\r\n\r\n <!-- Tag com ícone à esquerda -->\r\n <voa-tag variant=\"icons\" label=\"Approved\" [iconLeft]=\"true\">\r\n <svg slot=\"icon-start\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"100%\" height=\"100%\">\r\n <path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n </svg>\r\n </voa-tag>\r\n \\`\r\n})\r\nexport class ExampleComponent {}\r\n\\`\\`\\`\r\n\r\n### Vue\r\n\r\n\\`\\`\\`vue\r\n<template>\r\n <div>\r\n <!-- Tag básica -->\r\n <VoaTag label=\"Design System\" />\r\n\r\n <!-- Tag com formato pill -->\r\n <VoaTag label=\"Beta Feature\" shape=\"pill\" />\r\n\r\n <!-- Tag pequena -->\r\n <VoaTag label=\"v1.0.0\" size=\"sm\" shape=\"pill\" />\r\n\r\n <!-- Tag com ícone à esquerda -->\r\n <VoaTag variant=\"icons\" label=\"Approved\" :icon-left=\"true\">\r\n <svg slot=\"icon-start\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"100%\" height=\"100%\">\r\n <path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n </svg>\r\n </VoaTag>\r\n </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { VoaTag } from '@voa-ds/vue';\r\n</script>\r\n\\`\\`\\`\r\n\r\n## Instalação\r\n\r\n### HTML\r\n\\`\\`\\`bash\r\n# NPM\r\nnpm install @voa-ds/components\r\n\r\n# Importar no HTML\r\n<script type=\"module\" src=\"https://unpkg.com/@voa-ds/components/dist/voa-ds/voa-ds.esm.js\"></script>\r\n\\`\\`\\`\r\n\r\n### React\r\n\\`\\`\\`bash\r\nnpm install @voa-ds/components @voa-ds/react\r\n\\`\\`\\`\r\n\r\n### Angular\r\n\\`\\`\\`bash\r\nnpm install @voa-ds/components @voa-ds/angular\r\n\\`\\`\\`\r\n\r\n### Vue\r\n\\`\\`\\`bash\r\nnpm install @voa-ds/components @voa-ds/vue\r\n\\`\\`\\`\r\n `\r\n }\r\n }\r\n },\r\n render: () => html`\r\n <div style=\"padding: 2rem; max-width: 100%;\">\r\n <h2 style=\"margin-top: 0; margin-bottom: 1.5rem; font-size: 1.5rem; font-weight: 600;\">Uso do Componente</h2>\r\n <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>\r\n <h3 style=\"margin-top: 2rem; margin-bottom: 1rem; font-size: 1.25rem; font-weight: 600;\">Exemplo Interativo</h3>\r\n <div style=\"display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 2rem;\">\r\n <voa-tag label=\"Design System\"></voa-tag>\r\n <voa-tag label=\"Beta Feature\" shape=\"pill\"></voa-tag>\r\n <voa-tag label=\"v1.0.0\" size=\"sm\" shape=\"pill\"></voa-tag>\r\n </div>\r\n <div style=\"margin-top: 2rem; padding: 1rem; background: #f5f5f5; border-radius: 4px; border-left: 4px solid #0064cb;\">\r\n <p style=\"margin: 0; font-weight: 600; margin-bottom: 0.5rem;\">📚 Documentação Completa</p>\r\n <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-voatag--docs#usage\" style=\"color: #0064cb; text-decoration: none; font-weight: 600;\">clique aqui para ir à página Docs</a>.</p>\r\n </div>\r\n </div>\r\n `\r\n};\r\n"]}
1	+ {"version":3,"file":"voa-tag.stories.js","sourceRoot":"","sources":["../../../src/components/voa-tag/voa-tag.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryObj } from '@storybook/web-components';\r\nimport { html } from 'lit';\r\nimport '../../Stories/styles/voa-tag.external.css';\r\n\r\n/*\r\n VoaTag\r\n * A static component for categorization labels and status indicators.\r\n \r\n CSS Parts:\r\n * - `base`: The main container\r\n * - `label`: Text wrapper\r\n * - `icon-start`: Left icon wrapper\r\n * - `icon-end`: Right icon wrapper\r\n /\r\nconst meta = {\r\n title: \"Componentes/Display/Tag\",\r\n component: 'voa-tag',\r\n tags: ['autodocs'],\r\n parameters: {\r\n design: {\r\n type: 'figma',\r\n url: 'https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=1436-769',\r\n },\r\n },\r\n argTypes: {\r\n label: { control: 'text' },\r\n variant: {\r\n control: 'radio',\r\n options: ['plain', 'icons'],\r\n description: 'Controls layout for icons',\r\n },\r\n shape: {\r\n control: 'radio',\r\n options: ['default', 'pill'],\r\n description: 'Corner radius style',\r\n },\r\n size: {\r\n control: 'radio',\r\n options: ['sm', 'md'],\r\n },\r\n iconLeft: { control: 'boolean' },\r\n iconRight: { control: 'boolean' },\r\n },\r\n args: {\r\n label: 'Design System',\r\n variant: 'plain',\r\n shape: 'default',\r\n size: 'md',\r\n iconLeft: false,\r\n iconRight: false,\r\n },\r\n render: (args) => html`\r\n <voa-tag\r\n .label=${args.label}\r\n .variant=${args.variant}\r\n .shape=${args.shape}\r\n .size=${args.size}\r\n .iconLeft=${args.iconLeft}\r\n .iconRight=${args.iconRight}\r\n >\r\n ${args.variant === 'icons' && args.iconLeft ? html`\r\n <svg slot=\"icon-start\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"100%\" height=\"100%\">\r\n <path d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z\" />\r\n </svg>\r\n ` : ''}\r\n ${args.variant === 'icons' && args.iconRight ? html`\r\n <svg slot=\"icon-end\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"100%\" height=\"100%\">\r\n <path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n </svg>\r\n ` : ''}\r\n </voa-tag>\r\n `,\r\n} satisfies Meta;\r\n\r\nexport default meta;\r\n\r\nexport const Default: StoryObj = {};\r\n\r\nexport const PillShape: StoryObj = {\r\n args: {\r\n shape: 'pill',\r\n label: 'Beta Feature',\r\n },\r\n};\r\n\r\nexport const WithStartIcon: StoryObj = {\r\n args: {\r\n variant: 'icons',\r\n iconLeft: true,\r\n label: 'Approved',\r\n },\r\n render: (args) => html`\r\n <voa-tag\r\n .label=${args.label}\r\n .variant=${args.variant}\r\n .shape=${args.shape}\r\n .size=${args.size}\r\n .iconLeft=${args.iconLeft}\r\n >\r\n <svg slot=\"icon-start\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"100%\" height=\"100%\">\r\n <path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n </svg>\r\n </voa-tag>\r\n `,\r\n};\r\n\r\nexport const WithEndIcon: StoryObj = {\r\n args: {\r\n variant: 'icons',\r\n iconRight: true,\r\n label: 'Filter',\r\n },\r\n render: (args) => html`\r\n <voa-tag\r\n .label=${args.label}\r\n .variant=${args.variant}\r\n .shape=${args.shape}\r\n .size=${args.size}\r\n .iconRight=${args.iconRight}\r\n >\r\n <svg slot=\"icon-end\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"100%\" height=\"100%\">\r\n <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\r\n </svg>\r\n </voa-tag>\r\n `,\r\n};\r\n\r\nexport const WithBothIcons: StoryObj = {\r\n args: {\r\n variant: 'icons',\r\n iconLeft: true,\r\n iconRight: true,\r\n label: 'Complete',\r\n },\r\n render: (args) => html`\r\n <voa-tag\r\n .label=${args.label}\r\n .variant=${args.variant}\r\n .shape=${args.shape}\r\n .size=${args.size}\r\n .iconLeft=${args.iconLeft}\r\n .iconRight=${args.iconRight}\r\n >\r\n <svg slot=\"icon-start\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"100%\" height=\"100%\">\r\n <path d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z\" />\r\n </svg>\r\n <svg slot=\"icon-end\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"100%\" height=\"100%\">\r\n <path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n </svg>\r\n </voa-tag>\r\n `,\r\n};\r\n\r\nexport const Small: StoryObj = {\r\n args: {\r\n size: 'sm',\r\n label: 'v1.0.1',\r\n shape: 'pill',\r\n },\r\n};\r\n\r\nexport const AllVariants: StoryObj = {\r\n render: () => html`\r\n <div style=\"display: flex; flex-wrap: wrap; gap: 16px; align-items: center;\">\r\n <voa-tag label=\"Default MD\"></voa-tag>\r\n <voa-tag label=\"Default SM\" size=\"sm\"></voa-tag>\r\n <voa-tag label=\"Pill MD\" shape=\"pill\"></voa-tag>\r\n <voa-tag label=\"Pill SM\" shape=\"pill\" size=\"sm\"></voa-tag>\r\n <voa-tag variant=\"icons\" label=\"Icons\" ?iconLeft=${true} ?iconRight=${true}>\r\n <voa-tag variant=\"icons\" label=\"Icons\" .iconLeft=${true} .iconRight=${true}>\r\n <svg slot=\"icon-start\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"100%\" height=\"100%\">\r\n <path d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2z\" />\r\n </svg>\r\n <svg slot=\"icon-end\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"100%\" height=\"100%\">\r\n <path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n </svg>\r\n </voa-tag>\r\n </div>\r\n `,\r\n};\r\n\r\n// ============================================\r\n// Usage - Exemplos de Código\r\n// ============================================\r\n\r\nexport const Usage: StoryObj = {\r\n parameters: {\r\n docs: {\r\n description: {\r\n story: `\r\n## Uso do Componente\r\n\r\nEste componente pode ser usado em diferentes frameworks. Abaixo estão exemplos de código para cada um:\r\n\r\n### HTML (Web Components)\r\n\r\n\\`\\`\\`html\r\n<!-- Tag básica -->\r\n<voa-tag label=\"Design System\"></voa-tag>\r\n\r\n<!-- Tag com formato pill -->\r\n<voa-tag label=\"Beta Feature\" shape=\"pill\"></voa-tag>\r\n\r\n<!-- Tag pequena -->\r\n<voa-tag label=\"v1.0.1\" size=\"sm\" shape=\"pill\"></voa-tag>\r\n\r\n<!-- Tag com ícone à esquerda -->\r\n<voa-tag variant=\"icons\" label=\"Approved\" icon-left>\r\n <svg slot=\"icon-start\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"100%\" height=\"100%\">\r\n <path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n </svg>\r\n</voa-tag>\r\n\r\n<!-- Tag com ícone à direita -->\r\n<voa-tag variant=\"icons\" label=\"Filter\" icon-right>\r\n <svg slot=\"icon-end\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"100%\" height=\"100%\">\r\n <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\r\n </svg>\r\n</voa-tag>\r\n\\`\\`\\`\r\n\r\n### React\r\n\r\n\\`\\`\\`tsx\r\nimport { VoaTag } from '@voa-ds/react';\r\n\r\nfunction MyComponent() {\r\n return (\r\n <>\r\n {/ Tag básica /}\r\n <VoaTag label=\"Design System\" />\r\n\r\n {/ Tag com formato pill /}\r\n <VoaTag label=\"Beta Feature\" shape=\"pill\" />\r\n\r\n {/ Tag pequena /}\r\n <VoaTag label=\"v1.0.1\" size=\"sm\" shape=\"pill\" />\r\n\r\n {/ Tag com ícone à esquerda /}\r\n <VoaTag variant=\"icons\" label=\"Approved\" iconLeft>\r\n <svg slot=\"icon-start\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"100%\" height=\"100%\">\r\n <path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n </svg>\r\n </VoaTag>\r\n\r\n {/ Tag com ícone à direita */}\r\n <VoaTag variant=\"icons\" label=\"Filter\" iconRight>\r\n <svg slot=\"icon-end\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"100%\" height=\"100%\">\r\n <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\r\n </svg>\r\n </VoaTag>\r\n </>\r\n );\r\n}\r\n\\`\\`\\`\r\n\r\n### Angular\r\n\r\n\\`\\`\\`typescript\r\nimport { VoaTag } from '@voa-ds/angular';\r\n\r\n@Component({\r\n selector: 'app-example',\r\n template: \\`\r\n <!-- Tag básica -->\r\n <voa-tag label=\"Design System\"></voa-tag>\r\n\r\n <!-- Tag com formato pill -->\r\n <voa-tag label=\"Beta Feature\" shape=\"pill\"></voa-tag>\r\n\r\n <!-- Tag pequena -->\r\n <voa-tag label=\"v1.0.1\" size=\"sm\" shape=\"pill\"></voa-tag>\r\n\r\n <!-- Tag com ícone à esquerda -->\r\n <voa-tag variant=\"icons\" label=\"Approved\" [iconLeft]=\"true\">\r\n <svg slot=\"icon-start\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"100%\" height=\"100%\">\r\n <path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n </svg>\r\n </voa-tag>\r\n \\`\r\n})\r\nexport class ExampleComponent {}\r\n\\`\\`\\`\r\n\r\n### Vue\r\n\r\n\\`\\`\\`vue\r\n<template>\r\n <div>\r\n <!-- Tag básica -->\r\n <VoaTag label=\"Design System\" />\r\n\r\n <!-- Tag com formato pill -->\r\n <VoaTag label=\"Beta Feature\" shape=\"pill\" />\r\n\r\n <!-- Tag pequena -->\r\n <VoaTag label=\"v1.0.1\" size=\"sm\" shape=\"pill\" />\r\n\r\n <!-- Tag com ícone à esquerda -->\r\n <VoaTag variant=\"icons\" label=\"Approved\" :icon-left=\"true\">\r\n <svg slot=\"icon-start\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"100%\" height=\"100%\">\r\n <path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n </svg>\r\n </VoaTag>\r\n </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { VoaTag } from '@voa-ds/vue';\r\n</script>\r\n\\`\\`\\`\r\n\r\n## Instalação\r\n\r\n### HTML\r\n\\`\\`\\`bash\r\n# NPM\r\nnpm install @voa-ds/components\r\n\r\n# Importar no HTML\r\n<script type=\"module\" src=\"https://unpkg.com/@voa-ds/components/dist/voa-ds/voa-ds.esm.js\"></script>\r\n\\`\\`\\`\r\n\r\n### React\r\n\\`\\`\\`bash\r\nnpm install @voa-ds/components @voa-ds/react\r\n\\`\\`\\`\r\n\r\n### Angular\r\n\\`\\`\\`bash\r\nnpm install @voa-ds/components @voa-ds/angular\r\n\\`\\`\\`\r\n\r\n### Vue\r\n\\`\\`\\`bash\r\nnpm install @voa-ds/components @voa-ds/vue\r\n\\`\\`\\`\r\n `\r\n }\r\n }\r\n },\r\n render: () => html`\r\n <div style=\"padding: 2rem; max-width: 100%;\">\r\n <h2 style=\"margin-top: 0; margin-bottom: 1.5rem; font-size: 1.5rem; font-weight: 600;\">Uso do Componente</h2>\r\n <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>\r\n <h3 style=\"margin-top: 2rem; margin-bottom: 1rem; font-size: 1.25rem; font-weight: 600;\">Exemplo Interativo</h3>\r\n <div style=\"display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 2rem;\">\r\n <voa-tag label=\"Design System\"></voa-tag>\r\n <voa-tag label=\"Beta Feature\" shape=\"pill\"></voa-tag>\r\n <voa-tag label=\"v1.0.1\" size=\"sm\" shape=\"pill\"></voa-tag>\r\n </div>\r\n <div style=\"margin-top: 2rem; padding: 1rem; background: #f5f5f5; border-radius: 4px; border-left: 4px solid #0064cb;\">\r\n <p style=\"margin: 0; font-weight: 600; margin-bottom: 0.5rem;\">📚 Documentação Completa</p>\r\n <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-voatag--docs#usage\" style=\"color: #0064cb; text-decoration: none; font-weight: 600;\">clique aqui para ir à página Docs</a>.</p>\r\n </div>\r\n </div>\r\n `\r\n};\r\n"]}

package/dist/collection/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export * from './components';
2	+ //# sourceMappingURL=index.js.map

package/dist/collection/index.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC","sourcesContent":["export * from './components';\nexport { Components, JSX } from './components';\n"]}