voa-ds-core 1.0.11 → 1.0.13

package/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components';
+export { Components, JSX } from './components';

package/dist/types/types/index.d.ts

@@ -0,0 +1 @@
+export * from '../components';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "voa-ds-core",
-  "version": "1.0.11",
+  "version": "1.0.13",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
   "types": "dist/types/index.d.ts",
@@ -25,10 +25,13 @@
     }
   },
   "scripts": {
-    "build": "stencil build --prod --docs && node convert-markdown-to-mdx.js",
+    "build": "stencil build --prod --docs && node convert-markdown-to-mdx.js && node scripts/build-styles.js",
     "dev": "stencil build --watch --serve"
   },
   "dependencies": {
     "@stencil/core": "^4.0.0"
+  },
+  "publishConfig": {
+    "registry": "https://proget-npm.aguiabranca.com.br/npm/npm-private/"
   }
 }

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

@@ -1,414 +0,0 @@
-import { html } from "lit-html";
-export default {
-    title: "Documentação/Importando Estilos CSS",
-};
-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;
-    }
-
-    .error-box {
-      background: #fff5f5;
-      border-left: 4px solid #f56565;
-      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;
-    }
-
-    .code-inline {
-      background: #edf2f7;
-      padding: 2px 6px;
-      border-radius: 3px;
-      font-family: monospace;
-      font-size: 0.9em;
-    }
-  </style>
-
-  <div class="guia-container">
-    <h1>Como Importar os Estilos CSS</h1>
-    <p>
-      Se você está usando os componentes mas eles aparecem sem estilização,
-      provavelmente o CSS não está sendo carregado. Veja como resolver.
-    </p>
-
-    <div class="error-box">
-      <strong>Problema Comum:</strong> Componentes aparecem sem cores, espaçamento ou qualquer estilo visual.
-    </div>
-
-    <h2>Importação Automática (Recomendado)</h2>
-
-    <div class="success-box">
-      Os estilos são importados automaticamente quando você importa qualquer componente dos pacotes wrapper.
-    </div>
-
-    <h3>React</h3>
-    <pre><code>import { VoaButton } from 'voa-ds-react';
-
-function App() {
-  return &lt;VoaButton&gt;Clique aqui&lt;/VoaButton&gt;;
-}
-
-// Os estilos já estão incluídos!</code></pre>
-
-    <h3>Angular</h3>
-    <p>No Angular, você precisa adicionar o CSS no arquivo <span class="code-inline">angular.json</span>:</p>
-    <pre><code>{
-  "projects": {
-    "seu-projeto": {
-      "architect": {
-        "build": {
-          "options": {
-            "styles": [
-              "node_modules/voa-ds-core/dist/voa/voa.css",
-              "src/styles.css"
-            ]
-          }
-        }
-      }
-    }
-  }
-}</code></pre>
-
-    <h3>Vue</h3>
-    <pre><code>&lt;template&gt;
-  &lt;VoaButton&gt;Clique aqui&lt;/VoaButton&gt;
-&lt;/template&gt;
-
-&lt;script&gt;
-import { VoaButton } from 'voa-ds-vue';
-
-export default {
-  components: { VoaButton }
-}
-// Os estilos já estão incluídos!
-&lt;/script&gt;</code></pre>
-
-    <hr style="margin: 50px 0; border: none; border-top: 1px solid #e2e8f0;">
-
-    <h2>Importação Manual</h2>
-
-    <p>Se os estilos não estiverem sendo aplicados automaticamente, você pode importá-los manualmente.</p>
-
-    <h3>Opção 1: Importar do Pacote Wrapper</h3>
-    <pre><code>// React
-import 'voa-ds-react/styles';
-
-// Angular
-import 'voa-ds-angular/styles';
-
-// Vue
-import 'voa-ds-vue/styles';</code></pre>
-
-    <h3>Opção 2: Importar Direto do Core</h3>
-    <pre><code>import 'voa-ds-core/dist/voa/voa.css';</code></pre>
-
-    <h3>Opção 3: Adicionar no HTML (Apenas para Testes)</h3>
-    <pre><code>&lt;link rel="stylesheet" href="node_modules/voa-ds-core/dist/voa/voa.css"&gt;</code></pre>
-
-    <div class="warning-box">
-      <strong>Atenção:</strong> A Opção 3 não é recomendada para produção, use apenas para testes rápidos.
-    </div>
-
-    <hr style="margin: 50px 0; border: none; border-top: 1px solid #e2e8f0;">
-
-    <h2>Configuração de Bundlers</h2>
-
-    <h3>Vite (React/Vue)</h3>
-    <div class="success-box">
-      Vite processa CSS automaticamente. Não é necessária configuração adicional.
-    </div>
-    <pre><code>// vite.config.ts ou vite.config.js
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react'; // ou vue
-
-export default defineConfig({
-  plugins: [react()]
-  // Pronto! Não precisa configurar mais nada
-});</code></pre>
-
-    <h3>Webpack (React/Angular)</h3>
-    <p>Certifique-se de ter o <span class="code-inline">css-loader</span> e <span class="code-inline">style-loader</span> configurados:</p>
-    <pre><code>// webpack.config.js
-module.exports = {
-  module: {
-    rules: [
-      {
-        test: /\\.css$/,
-        use: ['style-loader', 'css-loader']
-      }
-    ]
-  }
-};</code></pre>
-
-    <p>Se não tiver instalado:</p>
-    <pre><code>npm install --save-dev css-loader style-loader</code></pre>
-
-    <h3>Create React App</h3>
-    <div class="success-box">
-      O CRA já processa CSS automaticamente. Não é necessária configuração adicional.
-    </div>
-
-    <h3>Next.js</h3>
-    <p>Importe no arquivo <span class="code-inline">_app.tsx</span> ou <span class="code-inline">_app.jsx</span>:</p>
-    <pre><code>// pages/_app.tsx
-import 'voa-ds-react/styles';
-// ou
-import 'voa-ds-core/dist/voa/voa.css';
-
-function MyApp({ Component, pageProps }) {
-  return &lt;Component {...pageProps} /&gt;;
-}
-
-export default MyApp;</code></pre>
-
-    <h3>Angular CLI</h3>
-    <p>Adicione os estilos no <span class="code-inline">angular.json</span>:</p>
-    <pre><code>{
-  "projects": {
-    "seu-projeto": {
-      "architect": {
-        "build": {
-          "options": {
-            "styles": [
-              "node_modules/voa-ds-core/dist/voa/voa.css",
-              "src/styles.css"
-            ]
-          }
-        }
-      }
-    }
-  }
-}</code></pre>
-
-    <h3>Nuxt.js (Vue)</h3>
-    <p>Adicione no arquivo <span class="code-inline">nuxt.config.js</span>:</p>
-    <pre><code>export default {
-  css: [
-    'voa-ds-core/dist/voa/voa.css'
-  ]
-}</code></pre>
-
-    <p>Para Nuxt 3:</p>
-    <pre><code>export default defineNuxtConfig({
-  css: [
-    'voa-ds-core/dist/voa/voa.css'
-  ]
-})</code></pre>
-
-    <hr style="margin: 50px 0; border: none; border-top: 1px solid #e2e8f0;">
-
-    <h2>Verificando se os Estilos Estão Carregados</h2>
-
-    <h3>Método 1: DevTools - Network</h3>
-    <ol>
-      <li>Abra o DevTools do navegador (F12)</li>
-      <li>Vá na aba <strong>Network</strong></li>
-      <li>Filtre por <strong>CSS</strong></li>
-      <li>Recarregue a página</li>
-      <li>Verifique se o arquivo <span class="code-inline">voa.css</span> está sendo carregado</li>
-    </ol>
-
-    <h3>Método 2: Inspecionar Elemento</h3>
-    <ol>
-      <li>Clique com botão direito em um componente</li>
-      <li>Selecione <strong>Inspecionar</strong></li>
-      <li>Verifique se as classes CSS estão aplicadas</li>
-      <li>Veja se os estilos aparecem no painel direito</li>
-    </ol>
-
-    <div class="alert-box">
-      Se você vir classes como <span class="code-inline">voa-button</span>, <span class="code-inline">primary</span>, etc.,
-      mas sem estilos aplicados, o CSS não está carregando.
-    </div>
-
-    <hr style="margin: 50px 0; border: none; border-top: 1px solid #e2e8f0;">
-
-    <h2>Problemas Comuns e Soluções</h2>
-
-    <h3>Componentes aparecem sem estilo</h3>
-    <div class="warning-box">
-      <strong>Solução:</strong>
-      <ul style="margin: 10px 0 0 0; padding-left: 20px;">
-        <li>Verifique se o CSS está sendo importado</li>
-        <li>Confirme que o bundler está processando arquivos CSS</li>
-        <li>Tente importar manualmente: <span class="code-inline">import 'voa-ds-core/dist/voa/voa.css'</span></li>
-      </ul>
-    </div>
-
-    <h3>Erro: "Cannot find module 'voa-ds-core/styles'"</h3>
-    <div class="warning-box">
-      <strong>Solução:</strong> Use o caminho completo em vez disso:
-      <pre style="margin-top: 10px;"><code>import 'voa-ds-core/dist/voa/voa.css';</code></pre>
-    </div>
-
-    <h3>Em Angular, os estilos não aparecem</h3>
-    <div class="warning-box">
-      <strong>Solução:</strong>
-      <ul style="margin: 10px 0 0 0; padding-left: 20px;">
-        <li>Certifique-se de adicionar o CSS no <span class="code-inline">angular.json</span></li>
-        <li>Reinicie o servidor de desenvolvimento após alterar o <span class="code-inline">angular.json</span></li>
-        <li>Verifique se o caminho está correto: <span class="code-inline">node_modules/voa-ds-core/dist/voa/voa.css</span></li>
-      </ul>
-    </div>
-
-    <h3>Estilos funcionam localmente mas não em produção</h3>
-    <div class="warning-box">
-      <strong>Solução:</strong>
-      <ul style="margin: 10px 0 0 0; padding-left: 20px;">
-        <li>Verifique se o CSS está incluído no build de produção</li>
-        <li>Confirme que o arquivo CSS está sendo copiado para a pasta de distribuição</li>
-        <li>Verifique se o Content Security Policy (CSP) não está bloqueando estilos inline</li>
-      </ul>
-    </div>
-
-    <hr style="margin: 50px 0; border: none; border-top: 1px solid #e2e8f0;">
-
-    <h2>Resumo Rápido</h2>
-
-    <table class="variants-table">
-      <thead>
-        <tr>
-          <th>Framework</th>
-          <th>Configuração Necessária</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td><strong>React (Vite/CRA)</strong></td>
-          <td>Importação automática funciona</td>
-        </tr>
-        <tr>
-          <td><strong>React (Next.js)</strong></td>
-          <td>Importar em <span class="code-inline">_app.tsx</span></td>
-        </tr>
-        <tr>
-          <td><strong>Angular</strong></td>
-          <td>Adicionar CSS no <span class="code-inline">angular.json</span></td>
-        </tr>
-        <tr>
-          <td><strong>Vue (Vite)</strong></td>
-          <td>Importação automática funciona</td>
-        </tr>
-        <tr>
-          <td><strong>Vue (Nuxt)</strong></td>
-          <td>Adicionar no <span class="code-inline">nuxt.config.js</span></td>
-        </tr>
-      </tbody>
-    </table>
-
-    <div class="success-box">
-      <strong>Dica Final:</strong> Na dúvida, sempre pode importar manualmente:
-      <pre style="margin-top: 10px;"><code>import 'voa-ds-core/dist/voa/voa.css';</code></pre>
-      Isso funciona em todos os frameworks!
-    </div>
-
-    <hr style="margin: 50px 0; border: none; border-top: 1px solid #e2e8f0;">
-
-    <div style="text-align: center; color: #718096; padding: 20px;">
-      <p>Ainda com problemas? Verifique a configuração do seu bundler ou procure o time!</p>
-    </div>
-  </div>
-`;
-export const Default = Template.bind({});
-//# sourceMappingURL=ImportandoEstilos.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ImportandoEstilos.stories.js","sourceRoot":"","sources":["../../../src/components/GetStarted/ImportandoEstilos.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,eAAe;IACb,KAAK,EAAE,qCAAqC;CACrC,CAAC;AAEV,MAAM,QAAQ,GAAY,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuZnC,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/Importando Estilos CSS\",\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    .error-box {\r\n      background: #fff5f5;\r\n      border-left: 4px solid #f56565;\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\r\n    .code-inline {\r\n      background: #edf2f7;\r\n      padding: 2px 6px;\r\n      border-radius: 3px;\r\n      font-family: monospace;\r\n      font-size: 0.9em;\r\n    }\r\n  </style>\r\n\r\n  <div class=\"guia-container\">\r\n    <h1>Como Importar os Estilos CSS</h1>\r\n    <p>\r\n      Se você está usando os componentes mas eles aparecem sem estilização,\r\n      provavelmente o CSS não está sendo carregado. Veja como resolver.\r\n    </p>\r\n\r\n    <div class=\"error-box\">\r\n      <strong>Problema Comum:</strong> Componentes aparecem sem cores, espaçamento ou qualquer estilo visual.\r\n    </div>\r\n\r\n    <h2>Importação Automática (Recomendado)</h2>\r\n\r\n    <div class=\"success-box\">\r\n      Os estilos são importados automaticamente quando você importa qualquer componente dos pacotes wrapper.\r\n    </div>\r\n\r\n    <h3>React</h3>\r\n    <pre><code>import { VoaButton } from 'voa-ds-react';\r\n\r\nfunction App() {\r\n  return &lt;VoaButton&gt;Clique aqui&lt;/VoaButton&gt;;\r\n}\r\n\r\n// Os estilos já estão incluídos!</code></pre>\r\n\r\n    <h3>Angular</h3>\r\n    <p>No Angular, você precisa adicionar o CSS no arquivo <span class=\"code-inline\">angular.json</span>:</p>\r\n    <pre><code>{\r\n  \"projects\": {\r\n    \"seu-projeto\": {\r\n      \"architect\": {\r\n        \"build\": {\r\n          \"options\": {\r\n            \"styles\": [\r\n              \"node_modules/voa-ds-core/dist/voa/voa.css\",\r\n              \"src/styles.css\"\r\n            ]\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n}</code></pre>\r\n\r\n    <h3>Vue</h3>\r\n    <pre><code>&lt;template&gt;\r\n  &lt;VoaButton&gt;Clique aqui&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}\r\n// Os estilos já estão incluídos!\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>Importação Manual</h2>\r\n\r\n    <p>Se os estilos não estiverem sendo aplicados automaticamente, você pode importá-los manualmente.</p>\r\n\r\n    <h3>Opção 1: Importar do Pacote Wrapper</h3>\r\n    <pre><code>// React\r\nimport 'voa-ds-react/styles';\r\n\r\n// Angular\r\nimport 'voa-ds-angular/styles';\r\n\r\n// Vue\r\nimport 'voa-ds-vue/styles';</code></pre>\r\n\r\n    <h3>Opção 2: Importar Direto do Core</h3>\r\n    <pre><code>import 'voa-ds-core/dist/voa/voa.css';</code></pre>\r\n\r\n    <h3>Opção 3: Adicionar no HTML (Apenas para Testes)</h3>\r\n    <pre><code>&lt;link rel=\"stylesheet\" href=\"node_modules/voa-ds-core/dist/voa/voa.css\"&gt;</code></pre>\r\n\r\n    <div class=\"warning-box\">\r\n      <strong>Atenção:</strong> A Opção 3 não é recomendada para produção, use apenas para testes rápidos.\r\n    </div>\r\n\r\n    <hr style=\"margin: 50px 0; border: none; border-top: 1px solid #e2e8f0;\">\r\n\r\n    <h2>Configuração de Bundlers</h2>\r\n\r\n    <h3>Vite (React/Vue)</h3>\r\n    <div class=\"success-box\">\r\n      Vite processa CSS automaticamente. Não é necessária configuração adicional.\r\n    </div>\r\n    <pre><code>// vite.config.ts ou vite.config.js\r\nimport { defineConfig } from 'vite';\r\nimport react from '@vitejs/plugin-react'; // ou vue\r\n\r\nexport default defineConfig({\r\n  plugins: [react()]\r\n  // Pronto! Não precisa configurar mais nada\r\n});</code></pre>\r\n\r\n    <h3>Webpack (React/Angular)</h3>\r\n    <p>Certifique-se de ter o <span class=\"code-inline\">css-loader</span> e <span class=\"code-inline\">style-loader</span> configurados:</p>\r\n    <pre><code>// webpack.config.js\r\nmodule.exports = {\r\n  module: {\r\n    rules: [\r\n      {\r\n        test: /\\\\.css$/,\r\n        use: ['style-loader', 'css-loader']\r\n      }\r\n    ]\r\n  }\r\n};</code></pre>\r\n\r\n    <p>Se não tiver instalado:</p>\r\n    <pre><code>npm install --save-dev css-loader style-loader</code></pre>\r\n\r\n    <h3>Create React App</h3>\r\n    <div class=\"success-box\">\r\n      O CRA já processa CSS automaticamente. Não é necessária configuração adicional.\r\n    </div>\r\n\r\n    <h3>Next.js</h3>\r\n    <p>Importe no arquivo <span class=\"code-inline\">_app.tsx</span> ou <span class=\"code-inline\">_app.jsx</span>:</p>\r\n    <pre><code>// pages/_app.tsx\r\nimport 'voa-ds-react/styles';\r\n// ou\r\nimport 'voa-ds-core/dist/voa/voa.css';\r\n\r\nfunction MyApp({ Component, pageProps }) {\r\n  return &lt;Component {...pageProps} /&gt;;\r\n}\r\n\r\nexport default MyApp;</code></pre>\r\n\r\n    <h3>Angular CLI</h3>\r\n    <p>Adicione os estilos no <span class=\"code-inline\">angular.json</span>:</p>\r\n    <pre><code>{\r\n  \"projects\": {\r\n    \"seu-projeto\": {\r\n      \"architect\": {\r\n        \"build\": {\r\n          \"options\": {\r\n            \"styles\": [\r\n              \"node_modules/voa-ds-core/dist/voa/voa.css\",\r\n              \"src/styles.css\"\r\n            ]\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n}</code></pre>\r\n\r\n    <h3>Nuxt.js (Vue)</h3>\r\n    <p>Adicione no arquivo <span class=\"code-inline\">nuxt.config.js</span>:</p>\r\n    <pre><code>export default {\r\n  css: [\r\n    'voa-ds-core/dist/voa/voa.css'\r\n  ]\r\n}</code></pre>\r\n\r\n    <p>Para Nuxt 3:</p>\r\n    <pre><code>export default defineNuxtConfig({\r\n  css: [\r\n    'voa-ds-core/dist/voa/voa.css'\r\n  ]\r\n})</code></pre>\r\n\r\n    <hr style=\"margin: 50px 0; border: none; border-top: 1px solid #e2e8f0;\">\r\n\r\n    <h2>Verificando se os Estilos Estão Carregados</h2>\r\n\r\n    <h3>Método 1: DevTools - Network</h3>\r\n    <ol>\r\n      <li>Abra o DevTools do navegador (F12)</li>\r\n      <li>Vá na aba <strong>Network</strong></li>\r\n      <li>Filtre por <strong>CSS</strong></li>\r\n      <li>Recarregue a página</li>\r\n      <li>Verifique se o arquivo <span class=\"code-inline\">voa.css</span> está sendo carregado</li>\r\n    </ol>\r\n\r\n    <h3>Método 2: Inspecionar Elemento</h3>\r\n    <ol>\r\n      <li>Clique com botão direito em um componente</li>\r\n      <li>Selecione <strong>Inspecionar</strong></li>\r\n      <li>Verifique se as classes CSS estão aplicadas</li>\r\n      <li>Veja se os estilos aparecem no painel direito</li>\r\n    </ol>\r\n\r\n    <div class=\"alert-box\">\r\n      Se você vir classes como <span class=\"code-inline\">voa-button</span>, <span class=\"code-inline\">primary</span>, etc.,\r\n      mas sem estilos aplicados, o CSS não está carregando.\r\n    </div>\r\n\r\n    <hr style=\"margin: 50px 0; border: none; border-top: 1px solid #e2e8f0;\">\r\n\r\n    <h2>Problemas Comuns e Soluções</h2>\r\n\r\n    <h3>Componentes aparecem sem estilo</h3>\r\n    <div class=\"warning-box\">\r\n      <strong>Solução:</strong>\r\n      <ul style=\"margin: 10px 0 0 0; padding-left: 20px;\">\r\n        <li>Verifique se o CSS está sendo importado</li>\r\n        <li>Confirme que o bundler está processando arquivos CSS</li>\r\n        <li>Tente importar manualmente: <span class=\"code-inline\">import 'voa-ds-core/dist/voa/voa.css'</span></li>\r\n      </ul>\r\n    </div>\r\n\r\n    <h3>Erro: \"Cannot find module 'voa-ds-core/styles'\"</h3>\r\n    <div class=\"warning-box\">\r\n      <strong>Solução:</strong> Use o caminho completo em vez disso:\r\n      <pre style=\"margin-top: 10px;\"><code>import 'voa-ds-core/dist/voa/voa.css';</code></pre>\r\n    </div>\r\n\r\n    <h3>Em Angular, os estilos não aparecem</h3>\r\n    <div class=\"warning-box\">\r\n      <strong>Solução:</strong>\r\n      <ul style=\"margin: 10px 0 0 0; padding-left: 20px;\">\r\n        <li>Certifique-se de adicionar o CSS no <span class=\"code-inline\">angular.json</span></li>\r\n        <li>Reinicie o servidor de desenvolvimento após alterar o <span class=\"code-inline\">angular.json</span></li>\r\n        <li>Verifique se o caminho está correto: <span class=\"code-inline\">node_modules/voa-ds-core/dist/voa/voa.css</span></li>\r\n      </ul>\r\n    </div>\r\n\r\n    <h3>Estilos funcionam localmente mas não em produção</h3>\r\n    <div class=\"warning-box\">\r\n      <strong>Solução:</strong>\r\n      <ul style=\"margin: 10px 0 0 0; padding-left: 20px;\">\r\n        <li>Verifique se o CSS está incluído no build de produção</li>\r\n        <li>Confirme que o arquivo CSS está sendo copiado para a pasta de distribuição</li>\r\n        <li>Verifique se o Content Security Policy (CSP) não está bloqueando estilos inline</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    <h2>Resumo Rápido</h2>\r\n\r\n    <table class=\"variants-table\">\r\n      <thead>\r\n        <tr>\r\n          <th>Framework</th>\r\n          <th>Configuração Necessária</th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        <tr>\r\n          <td><strong>React (Vite/CRA)</strong></td>\r\n          <td>Importação automática funciona</td>\r\n        </tr>\r\n        <tr>\r\n          <td><strong>React (Next.js)</strong></td>\r\n          <td>Importar em <span class=\"code-inline\">_app.tsx</span></td>\r\n        </tr>\r\n        <tr>\r\n          <td><strong>Angular</strong></td>\r\n          <td>Adicionar CSS no <span class=\"code-inline\">angular.json</span></td>\r\n        </tr>\r\n        <tr>\r\n          <td><strong>Vue (Vite)</strong></td>\r\n          <td>Importação automática funciona</td>\r\n        </tr>\r\n        <tr>\r\n          <td><strong>Vue (Nuxt)</strong></td>\r\n          <td>Adicionar no <span class=\"code-inline\">nuxt.config.js</span></td>\r\n        </tr>\r\n      </tbody>\r\n    </table>\r\n\r\n    <div class=\"success-box\">\r\n      <strong>Dica Final:</strong> Na dúvida, sempre pode importar manualmente:\r\n      <pre style=\"margin-top: 10px;\"><code>import 'voa-ds-core/dist/voa/voa.css';</code></pre>\r\n      Isso funciona em todos os frameworks!\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>Ainda com problemas? Verifique a configuração do seu bundler ou procure o time!</p>\r\n    </div>\r\n  </div>\r\n`;\r\n\r\nexport const Default = Template.bind({});\r\n"]}