voa-ds-core 1.0.4

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

@@ -0,0 +1,457 @@
+import { html } from "lit-html";
+export default {
+    title: "Documentação/Como Usar",
+};
+const Template = () => html `
+  <style>
+    .guia-container {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      line-height: 1.7;
+      max-width: 1000px;
+      margin: 0 auto;
+      padding: 30px;
+      color: #2d3748;
+    }
+
+    .guia-container h1 {
+      font-size: 2.5rem;
+      margin-bottom: 10px;
+      color: #1a202c;
+    }
+
+    .guia-container h2 {
+      font-size: 1.8rem;
+      margin-top: 40px;
+      margin-bottom: 15px;
+      color: #2d3748;
+      border-bottom: 3px solid #3182ce;
+      padding-bottom: 10px;
+    }
+
+    .guia-container h3 {
+      font-size: 1.4rem;
+      margin-top: 30px;
+      margin-bottom: 12px;
+      color: #4a5568;
+    }
+
+    .guia-container h4 {
+      font-size: 1.1rem;
+      margin-top: 20px;
+      margin-bottom: 8px;
+      color: #718096;
+    }
+
+    .guia-container pre {
+      background-color: #2d3748;
+      color: #f7fafc;
+      padding: 20px;
+      border-radius: 8px;
+      overflow-x: auto;
+      font-size: 14px;
+      line-height: 1.5;
+      margin: 15px 0;
+    }
+
+    .guia-container code {
+      font-family: 'Fira Code', 'Courier New', monospace;
+    }
+
+    .guia-container ul {
+      margin: 15px 0;
+      padding-left: 25px;
+    }
+
+    .guia-container li {
+      margin: 8px 0;
+    }
+
+    .alert-box {
+      background: #ebf8ff;
+      border-left: 4px solid #3182ce;
+      padding: 15px 20px;
+      margin: 20px 0;
+      border-radius: 4px;
+    }
+
+    .warning-box {
+      background: #fffaf0;
+      border-left: 4px solid #ed8936;
+      padding: 15px 20px;
+      margin: 20px 0;
+      border-radius: 4px;
+    }
+
+    .success-box {
+      background: #f0fff4;
+      border-left: 4px solid #48bb78;
+      padding: 15px 20px;
+      margin: 20px 0;
+      border-radius: 4px;
+    }
+
+    .variants-table {
+      width: 100%;
+      border-collapse: collapse;
+      margin: 15px 0;
+    }
+
+    .variants-table th,
+    .variants-table td {
+      padding: 12px;
+      text-align: left;
+      border-bottom: 1px solid #e2e8f0;
+    }
+
+    .variants-table th {
+      background: #edf2f7;
+      font-weight: 600;
+    }
+  </style>
+
+  <div class="guia-container">
+    <h1>Como Usar o VOA Design System</h1>
+    <p>Guia rápido e direto pra você sair usando os componentes.</p>
+
+    <div class="alert-box">
+      <strong>Atenção:</strong> Precisa estar conectado na VPN da empresa pra instalar os pacotes!
+    </div>
+
+    <h2>Instalação</h2>
+
+    <h3>React</h3>
+    <pre><code>npm install @voa-ds/react</code></pre>
+
+    <h3>Angular</h3>
+    <pre><code>npm install @voa-ds/angular</code></pre>
+
+    <h3>Vue</h3>
+    <pre><code>npm install @voa-ds/vue</code></pre>
+
+    <hr style="margin: 50px 0; border: none; border-top: 1px solid #e2e8f0;">
+
+    <h2>Exemplos Práticos</h2>
+
+    <h3>React</h3>
+
+    <h4>Botão</h4>
+    <pre><code>import { VoaButton } from '@voa-ds/react';
+
+function MeuComponente() {
+  return (
+    &lt;VoaButton
+      variant="primary"
+      size="md"
+      onClick={() => alert('Clicou!')}
+    &gt;
+      Salvar
+    &lt;/VoaButton&gt;
+  );
+}</code></pre>
+
+    <table class="variants-table">
+      <thead>
+        <tr>
+          <th>Variantes</th>
+          <th>Quando usar</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td><code>primary</code></td>
+          <td>Ação principal da tela</td>
+        </tr>
+        <tr>
+          <td><code>secondary</code></td>
+          <td>Ação secundária</td>
+        </tr>
+        <tr>
+          <td><code>tonal</code></td>
+          <td>Botão com fundo suave</td>
+        </tr>
+        <tr>
+          <td><code>ghost</code></td>
+          <td>Botão transparente</td>
+        </tr>
+        <tr>
+          <td><code>link</code></td>
+          <td>Parece um link</td>
+        </tr>
+      </tbody>
+    </table>
+
+    <h4>Input</h4>
+    <pre><code>import { VoaInput } from '@voa-ds/react';
+import { useState } from 'react';
+
+function Formulario() {
+  const [nome, setNome] = useState('');
+
+  return (
+    &lt;VoaInput
+      label="Nome completo"
+      placeholder="Digite seu nome"
+      value={nome}
+      onDsChange={(e) => setNome(e.detail)}
+      required
+    /&gt;
+  );
+}</code></pre>
+
+    <div class="warning-box">
+      <strong>Importante:</strong> O valor vem em <code>event.detail</code>, não em <code>event.target.value</code>
+    </div>
+
+    <h4>Input com Erro</h4>
+    <pre><code>&lt;VoaInput
+  label="Email"
+  type="email"
+  error
+  helperText="Email inválido"
+/&gt;</code></pre>
+
+    <h4>Select</h4>
+    <pre><code>import { VoaSelect, VoaOption } from '@voa-ds/react';
+
+function Dropdown() {
+  return (
+    &lt;VoaSelect label="Escolha uma opção"&gt;
+      &lt;VoaOption value="1"&gt;Opção 1&lt;/VoaOption&gt;
+      &lt;VoaOption value="2"&gt;Opção 2&lt;/VoaOption&gt;
+      &lt;VoaOption value="3"&gt;Opção 3&lt;/VoaOption&gt;
+    &lt;/VoaSelect&gt;
+  );
+}</code></pre>
+
+    <h4>Checkbox</h4>
+    <pre><code>import { VoaCheckbox } from '@voa-ds/react';
+import { useState } from 'react';
+
+function MinhaLista() {
+  const [aceito, setAceito] = useState(false);
+
+  return (
+    &lt;VoaCheckbox
+      checked={aceito}
+      onDsChange={(e) => setAceito(e.detail)}
+    &gt;
+      Aceito os termos de uso
+    &lt;/VoaCheckbox&gt;
+  );
+}</code></pre>
+
+    <h4>Alert</h4>
+    <pre><code>import { VoaAlert } from '@voa-ds/react';
+
+function Notificacao() {
+  return (
+    &lt;VoaAlert variant="success"&gt;
+      Dados salvos com sucesso!
+    &lt;/VoaAlert&gt;
+  );
+}</code></pre>
+
+    <h3>Angular</h3>
+
+    <h4>Setup no Módulo</h4>
+    <pre><code>// app.module.ts
+import { VoaButton, VoaInput } from '@voa-ds/angular';
+
+@NgModule({
+  declarations: [VoaButton, VoaInput],
+  // ...
+})</code></pre>
+
+    <h4>Usando no Template</h4>
+    <pre><code>&lt;voa-button
+  variant="primary"
+  size="md"
+  (dsClick)="salvar()"&gt;
+  Salvar
+&lt;/voa-button&gt;
+
+&lt;voa-input
+  label="Nome completo"
+  placeholder="Digite seu nome"
+  [value]="nome"
+  (dsChange)="nome = $event.detail"
+  required&gt;
+&lt;/voa-input&gt;</code></pre>
+
+    <h4>No Componente</h4>
+    <pre><code>export class MeuComponente {
+  nome: string = '';
+
+  salvar() {
+    console.log('Nome:', this.nome);
+  }
+}</code></pre>
+
+    <h3>Vue</h3>
+
+    <h4>Botão</h4>
+    <pre><code>&lt;template&gt;
+  &lt;VoaButton
+    variant="primary"
+    size="md"
+    @dsClick="salvar"&gt;
+    Salvar
+  &lt;/VoaButton&gt;
+&lt;/template&gt;
+
+&lt;script&gt;
+import { VoaButton } from '@voa-ds/vue';
+
+export default {
+  components: { VoaButton },
+  methods: {
+    salvar() {
+      console.log('Salvando...');
+    }
+  }
+}
+&lt;/script&gt;</code></pre>
+
+    <h4>Input</h4>
+    <pre><code>&lt;template&gt;
+  &lt;VoaInput
+    label="Nome completo"
+    placeholder="Digite seu nome"
+    :value="nome"
+    @dsChange="nome = $event.detail"
+    required
+  /&gt;
+&lt;/template&gt;
+
+&lt;script&gt;
+import { VoaInput } from '@voa-ds/vue';
+
+export default {
+  components: { VoaInput },
+  data() {
+    return {
+      nome: ''
+    }
+  }
+}
+&lt;/script&gt;</code></pre>
+
+    <hr style="margin: 50px 0; border: none; border-top: 1px solid #e2e8f0;">
+
+    <h2>Eventos</h2>
+
+    <div class="success-box">
+      Todos os eventos dos componentes usam o prefixo <code>ds</code>
+    </div>
+
+    <table class="variants-table">
+      <thead>
+        <tr>
+          <th>Evento</th>
+          <th>Quando dispara</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td><code>dsClick</code></td>
+          <td>Quando clica no componente</td>
+        </tr>
+        <tr>
+          <td><code>dsChange</code></td>
+          <td>Quando o valor muda (após perder foco)</td>
+        </tr>
+        <tr>
+          <td><code>dsInput</code></td>
+          <td>Enquanto está digitando</td>
+        </tr>
+        <tr>
+          <td><code>dsFocus</code></td>
+          <td>Quando ganha o foco</td>
+        </tr>
+        <tr>
+          <td><code>dsBlur</code></td>
+          <td>Quando perde o foco</td>
+        </tr>
+      </tbody>
+    </table>
+
+    <h4>Como pegar o valor dos eventos:</h4>
+    <pre><code>// React
+&lt;VoaInput onDsChange={(e) => console.log(e.detail)} /&gt;
+
+// Angular
+&lt;voa-input (dsChange)="handleChange($event.detail)"&gt;&lt;/voa-input&gt;
+
+// Vue
+&lt;VoaInput @dsChange="valor = $event.detail" /&gt;</code></pre>
+
+    <hr style="margin: 50px 0; border: none; border-top: 1px solid #e2e8f0;">
+
+    <h2>Componentes Disponíveis</h2>
+
+    <ul>
+      <li><strong>VoaButton</strong> - Botões de vários tipos</li>
+      <li><strong>VoaInput</strong> - Campos de texto</li>
+      <li><strong>VoaTextArea</strong> - Área de texto grande</li>
+      <li><strong>VoaCheckbox</strong> - Caixas de seleção</li>
+      <li><strong>VoaRadio</strong> - Botões de rádio</li>
+      <li><strong>VoaSelect / VoaOption</strong> - Dropdown</li>
+      <li><strong>VoaSwitch</strong> - Interruptor on/off</li>
+      <li><strong>VoaCard</strong> - Cards</li>
+      <li><strong>VoaAlert</strong> - Alertas</li>
+      <li><strong>VoaBadge</strong> - Badges/etiquetas</li>
+      <li><strong>VoaTag</strong> - Tags</li>
+      <li><strong>VoaAvatar</strong> - Avatar de usuário</li>
+      <li><strong>VoaPagination</strong> - Paginação</li>
+      <li><strong>VoaBreadcrumbs</strong> - Navegação</li>
+      <li><strong>VoaAccordion</strong> - Acordeão</li>
+      <li><strong>VoaTab / VoaTabItem</strong> - Abas</li>
+      <li><strong>VoaTooltip</strong> - Dicas</li>
+    </ul>
+
+    <hr style="margin: 50px 0; border: none; border-top: 1px solid #e2e8f0;">
+
+    <h2>Problemas Comuns</h2>
+
+    <h4>Não consigo instalar</h4>
+    <ul>
+      <li>Verifica se tá na VPN</li>
+      <li>Verifica se tem o <code>.npmrc</code> configurado</li>
+    </ul>
+
+    <h4>Componente não aparece</h4>
+    <ul>
+      <li>Verifica se importou certo</li>
+      <li>Em Angular, verifica se declarou no module</li>
+      <li>Olha o console do navegador</li>
+    </ul>
+
+    <h4>Eventos não funcionam</h4>
+    <ul>
+      <li>Lembra do prefixo <code>ds</code>: <code>dsClick</code>, <code>dsChange</code></li>
+      <li>O valor vem em <code>event.detail</code></li>
+    </ul>
+
+    <hr style="margin: 50px 0; border: none; border-top: 1px solid #e2e8f0;">
+
+    <h2>Dicas</h2>
+
+    <div class="success-box">
+      <ul style="margin: 0; padding-left: 20px;">
+        <li>Sempre use VPN pra instalar</li>
+        <li>Tamanhos padrão: <code>sm</code>, <code>md</code>, <code>lg</code></li>
+        <li>Estados visuais: <code>error</code>, <code>valid</code>, <code>warning</code>, <code>disabled</code></li>
+        <li>Veja o Storybook pra ver todos os componentes em ação</li>
+        <li>Cada componente tem um README com mais detalhes</li>
+      </ul>
+    </div>
+
+    <hr style="margin: 50px 0; border: none; border-top: 1px solid #e2e8f0;">
+
+    <div style="text-align: center; color: #718096; padding: 20px;">
+      <p>Precisa de ajuda? Veja o Storybook ou procura o time!</p>
+    </div>
+  </div>
+`;
+export const Default = Template.bind({});
+//# sourceMappingURL=ComoUsar.stories.js.map

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

@@ -0,0 +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    &lt;VoaButton\r\n      variant=\"primary\"\r\n      size=\"md\"\r\n      onClick={() => alert('Clicou!')}\r\n    &gt;\r\n      Salvar\r\n    &lt;/VoaButton&gt;\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    &lt;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    /&gt;\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>&lt;VoaInput\r\n  label=\"Email\"\r\n  type=\"email\"\r\n  error\r\n  helperText=\"Email inválido\"\r\n/&gt;</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    &lt;VoaSelect label=\"Escolha uma opção\"&gt;\r\n      &lt;VoaOption value=\"1\"&gt;Opção 1&lt;/VoaOption&gt;\r\n      &lt;VoaOption value=\"2\"&gt;Opção 2&lt;/VoaOption&gt;\r\n      &lt;VoaOption value=\"3\"&gt;Opção 3&lt;/VoaOption&gt;\r\n    &lt;/VoaSelect&gt;\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    &lt;VoaCheckbox\r\n      checked={aceito}\r\n      onDsChange={(e) => setAceito(e.detail)}\r\n    &gt;\r\n      Aceito os termos de uso\r\n    &lt;/VoaCheckbox&gt;\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    &lt;VoaAlert variant=\"success\"&gt;\r\n      Dados salvos com sucesso!\r\n    &lt;/VoaAlert&gt;\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>&lt;voa-button\r\n  variant=\"primary\"\r\n  size=\"md\"\r\n  (dsClick)=\"salvar()\"&gt;\r\n  Salvar\r\n&lt;/voa-button&gt;\r\n\r\n&lt;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&gt;\r\n&lt;/voa-input&gt;</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>&lt;template&gt;\r\n  &lt;VoaButton\r\n    variant=\"primary\"\r\n    size=\"md\"\r\n    @dsClick=\"salvar\"&gt;\r\n    Salvar\r\n  &lt;/VoaButton&gt;\r\n&lt;/template&gt;\r\n\r\n&lt;script&gt;\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&lt;/script&gt;</code></pre>\r\n\r\n    <h4>Input</h4>\r\n    <pre><code>&lt;template&gt;\r\n  &lt;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  /&gt;\r\n&lt;/template&gt;\r\n\r\n&lt;script&gt;\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&lt;/script&gt;</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&lt;VoaInput onDsChange={(e) => console.log(e.detail)} /&gt;\r\n\r\n// Angular\r\n&lt;voa-input (dsChange)=\"handleChange($event.detail)\"&gt;&lt;/voa-input&gt;\r\n\r\n// Vue\r\n&lt;VoaInput @dsChange=\"valor = $event.detail\" /&gt;</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/GetStarted/GetStarted.stories.js

@@ -0,0 +1,202 @@
+import { html } from "lit-html";
+export default {
+    title: "Documentação/Introdução",
+};
+const Template = () => html `
+  <style>
+    .get-started-container {
+      font-family: var(--font-family-sans, Arial), sans-serif;
+      line-height: 1.6;
+      max-width: 900px;
+      margin: 0 auto;
+      padding: 20px;
+    }
+    
+    pre {
+      background-color: #f5f5f5;
+      padding: 15px;
+      border-radius: 5px;
+      overflow-x: auto;
+      margin: 10px 0;
+    }
+    
+    h2 {
+      margin-top: 40px;
+      color: var(--primary, #333);
+      border-bottom: 2px solid var(--primary-opacity-15, #eee);
+      padding-bottom: 8px;
+    }
+    
+    h3 {
+      margin-top: 24px;
+      color: var(--primary-400, #444);
+    }
+
+    .code-block {
+      margin: 20px 0;
+    }
+
+    .token-example {
+      background: #f8f9fa;
+      padding: 15px;
+      border-radius: 4px;
+      margin: 10px 0;
+    }
+  </style>
+
+  <div class="get-started-container">
+    <h1>VOA Design System</h1>
+    <p>
+      O VOA DS é um Design System completo construído com Web Components, oferecendo suporte nativo para React, Vue e Angular.
+      Com um sistema robusto de tokens e temas, permite a criação de interfaces consistentes e personalizáveis para diferentes marcas.
+    </p>
+
+    <h2>Instalação</h2>
+    <p>Escolha o pacote adequado para seu framework:</p>
+
+    <div class="code-block">
+      <h4>React</h4>
+      <pre><code>npm install @voa-ds/react</code></pre>
+
+      <h4>Angular</h4>
+      <pre><code>npm install @voa-ds/angular</code></pre>
+
+      <h4>Vue</h4>
+      <pre><code>npm install @voa-ds/vue</code></pre>
+    </div>
+
+    <h2>Configuração Inicial</h2>
+    
+    <h3>React</h3>
+    <pre><code>import { ThemeProvider } from '@voa-ds/react';
+
+function App() {
+  return (
+    &lt;ThemeProvider brand="Coi" theme="light"&gt;
+      &lt;YourApp /&gt;
+    &lt;/ThemeProvider&gt;
+  );
+}</code></pre>
+
+    <h3>Angular</h3>
+    <pre><code>// app.module.ts
+import { VoaDsModule } from '@voa-ds/angular';
+
+@NgModule({
+  imports: [VoaDsModule],
+  // ...
+})
+export class AppModule {}
+
+// app.component.ts
+@Component({
+  selector: 'app-root',
+  template: \`
+    &lt;voa-theme-provider brand="Devops" theme="light"&gt;
+      &lt;router-outlet&gt;&lt;/router-outlet&gt;
+    &lt;/voa-theme-provider&gt;
+  \`
+})</code></pre>
+
+    <h3>Vue</h3>
+    <pre><code>&lt;template&gt;
+  &lt;voa-theme-provider :brand="brand" :theme="theme"&gt;
+    &lt;router-view&gt;&lt;/router-view&gt;
+  &lt;/voa-theme-provider&gt;
+&lt;/template&gt;
+
+&lt;script setup&gt;
+import { ref } from 'vue';
+const brand = ref('Godrive');
+const theme = ref('light');
+&lt;/script&gt;</code></pre>
+
+    <h2>Sistema de Tokens</h2>
+    <p>O Design System utiliza um sistema completo de tokens para cores, tipografia, espaçamentos e mais:</p>
+
+    <div class="token-example">
+      <h4>CSS</h4>
+      <pre><code>.meu-componente {
+  /* Cores da Marca */
+  color: var(--primary);
+  background: var(--secondary-100);
+
+  /* Cores Base */
+  border-color: var(--color-neutral-300);
+
+  /* Espaçamento */
+  padding: var(--spacing-4);
+
+  /* Tipografia */
+  font-family: var(--font-family-sans);
+
+  /* Border Radius */
+  border-radius: var(--radius-2);
+}</code></pre>
+    </div>
+
+    <h2>Uso dos Componentes</h2>
+
+    <h3>React</h3>
+    <pre><code>import { VoaButton, VoaAlert } from '@voa-ds/react';
+
+function MyComponent() {
+  return (
+    &lt;div&gt;
+      &lt;VoaButton variant="primary"&gt;
+        Clique Aqui
+      &lt;/VoaButton&gt;
+
+      &lt;VoaAlert type="success"&gt;
+        &lt;span slot="title"&gt;Sucesso!&lt;/span&gt;
+        Operação realizada.
+      &lt;/VoaAlert&gt;
+    &lt;/div&gt;
+  );
+}</code></pre>
+
+    <h3>Angular</h3>
+    <pre><code>&lt;voa-button variant="primary"&gt;
+  Clique Aqui
+&lt;/voa-button&gt;
+
+&lt;voa-alert type="success"&gt;
+  &lt;span slot="title"&gt;Sucesso!&lt;/span&gt;
+  Operação realizada.
+&lt;/voa-alert&gt;</code></pre>
+
+    <h3>Vue</h3>
+    <pre><code>&lt;template&gt;
+  &lt;voa-button variant="primary"&gt;
+    Clique Aqui
+  &lt;/voa-button&gt;
+
+  &lt;voa-alert type="success"&gt;
+    &lt;template #title&gt;Sucesso!&lt;/template&gt;
+    Operação realizada.
+  &lt;/voa-alert&gt;
+&lt;/template&gt;</code></pre>
+
+    <h2>Temas e Marcas</h2>
+    <p>
+      O Design System suporta múltiplas marcas (Coi, Devops, Godrive) e temas (light/dark).
+      Você pode alternar entre eles usando o ThemeProvider ou programaticamente:
+    </p>
+
+    <pre><code>import { themeProvider } from '@voa-ds/core';
+
+// Alterar marca
+themeProvider.setBrand('Coi');
+
+// Alterar tema
+themeProvider.setTheme('dark');</code></pre>
+
+    <h2>Documentação Detalhada</h2>
+    <p>
+      Para mais informações sobre componentes específicos, tokens disponíveis e guias de uso,
+      explore as seções na barra lateral.
+    </p>
+  </div>
+`;
+export const Default = Template.bind({});
+//# sourceMappingURL=GetStarted.stories.js.map