voa-ds-core 1.0.4

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

@@ -0,0 +1,435 @@
+import { html } from "lit";
+import "../../Stories/styles/voa-button.external.css";
+/**
+ * Componente Button do Voa Design System.
+ *
+ * Baseado no design do Figma: https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=515-327
+ *
+ * O componente segue o padrão "unstyled" (headless), fornecendo apenas estrutura e lógica.
+ * Todos os estilos visuais são aplicados externamente via CSS Parts API usando design tokens.
+ */
+const meta = {
+    title: "Componentes/Ações/Button",
+    tags: ['autodocs'],
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=515-327',
+        },
+    },
+    render: (args) => html `
+    <voa-button
+      variant="${args.variant}"
+      size="${args.size}"
+      ?disabled="${args.disabled}"
+      ?loading="${args.loading}"
+      label="${args.label}"
+      aria-label="${args.ariaLabel}"
+      @dsClick="${() => console.log('Button clicked')}"
+    >
+      ${args.label}
+    </voa-button>
+  `,
+    argTypes: {
+        label: {
+            control: 'text',
+            description: 'O texto exibido no botão'
+        },
+        variant: {
+            control: 'select',
+            options: ['primary', 'secondary', 'tonal', 'ghost', 'link'],
+            description: 'Variante visual do botão (mapeia as variantes do Figma)'
+        },
+        size: {
+            control: 'select',
+            options: ['sm', 'md', 'lg'],
+            description: 'Tamanho do botão (mapeia os tamanhos do Figma)'
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Se verdadeiro, o botão estará desabilitado'
+        },
+        loading: {
+            control: 'boolean',
+            description: 'Se verdadeiro, o botão estará em estado de carregamento'
+        },
+        ariaLabel: {
+            control: 'text',
+            description: 'Rótulo ARIA para acessibilidade (usado quando o botão não tem texto visível)'
+        }
+    },
+    args: {
+        label: 'Texto',
+        variant: 'primary',
+        size: 'lg',
+        disabled: false,
+        loading: false
+    }
+};
+export default meta;
+// História padrão
+export const Default = {};
+// ============================================
+// Variantes (Type)
+// ============================================
+export const Primary = {
+    args: {
+        variant: 'primary',
+        label: 'Primary Button'
+    }
+};
+export const Secondary = {
+    args: {
+        variant: 'secondary',
+        label: 'Secondary Button'
+    }
+};
+export const Tonal = {
+    args: {
+        variant: 'tonal',
+        label: 'Tonal Button'
+    }
+};
+export const Ghost = {
+    args: {
+        variant: 'ghost',
+        label: 'Ghost Button'
+    }
+};
+export const Link = {
+    args: {
+        variant: 'link',
+        label: 'Link Button'
+    }
+};
+// ============================================
+// Tamanhos (Size)
+// ============================================
+export const Large = {
+    args: {
+        size: 'lg',
+        label: 'Large Button'
+    }
+};
+export const Medium = {
+    args: {
+        size: 'md',
+        label: 'Medium Button'
+    }
+};
+export const Small = {
+    args: {
+        size: 'sm',
+        label: 'Small Button'
+    }
+};
+// ============================================
+// Estados (States)
+// ============================================
+export const Disabled = {
+    args: {
+        disabled: true,
+        label: 'Disabled Button'
+    }
+};
+export const Loading = {
+    args: {
+        loading: true,
+        label: 'Loading Button'
+    }
+};
+export const DisabledSecondary = {
+    args: {
+        variant: 'secondary',
+        disabled: true,
+        label: 'Disabled Secondary'
+    }
+};
+export const DisabledTonal = {
+    args: {
+        variant: 'tonal',
+        disabled: true,
+        label: 'Disabled Tonal'
+    }
+};
+export const DisabledGhost = {
+    args: {
+        variant: 'ghost',
+        disabled: true,
+        label: 'Disabled Ghost'
+    }
+};
+export const DisabledLink = {
+    args: {
+        variant: 'link',
+        disabled: true,
+        label: 'Disabled Link'
+    }
+};
+// ============================================
+// Com Ícones
+// ============================================
+export const WithLeadingIcon = {
+    args: {
+        label: 'Leading Icon'
+    },
+    render: (args) => html `
+    <voa-button
+      variant="${args.variant}"
+      size="${args.size}"
+      ?disabled="${args.disabled}"
+      ?loading="${args.loading}"
+    >
+      <svg slot="icon-leading" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M8 1.5C4.41015 1.5 1.5 4.41015 1.5 8C1.5 11.5899 4.41015 14.5 8 14.5C11.5899 14.5 14.5 11.5899 14.5 8C14.5 4.41015 11.5899 1.5 8 1.5ZM8 13.5C4.96243 13.5 2.5 11.0376 2.5 8C2.5 4.96243 4.96243 2.5 8 2.5C11.0376 2.5 13.5 4.96243 13.5 8C13.5 11.0376 11.0376 13.5 8 13.5Z" fill="currentColor"/>
+        <path d="M8 4.5C7.72386 4.5 7.5 4.72386 7.5 5V7.5H5C4.72386 7.5 4.5 7.72386 4.5 8C4.5 8.27614 4.72386 8.5 5 8.5H7.5V11C7.5 11.2761 7.72386 11.5 8 11.5C8.27614 11.5 8.5 11.2761 8.5 11V8.5H11C11.2761 8.5 11.5 8.27614 11.5 8C11.5 7.72386 11.2761 7.5 11 7.5H8.5V5C8.5 4.72386 8.27614 4.5 8 4.5Z" fill="currentColor"/>
+      </svg>
+      ${args.label}
+    </voa-button>
+  `
+};
+export const WithTrailingIcon = {
+    args: {
+        label: 'Trailing Icon'
+    },
+    render: (args) => html `
+    <voa-button
+      variant="${args.variant}"
+      size="${args.size}"
+      ?disabled="${args.disabled}"
+      ?loading="${args.loading}"
+    >
+      ${args.label}
+      <svg slot="icon-trailing" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M6.5 3.5L11 8L6.5 12.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+    </voa-button>
+  `
+};
+export const WithBothIcons = {
+    args: {
+        label: 'Both Icons'
+    },
+    render: (args) => html `
+    <voa-button
+      variant="${args.variant}"
+      size="${args.size}"
+      ?disabled="${args.disabled}"
+      ?loading="${args.loading}"
+    >
+      <svg slot="icon-leading" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M8 1.5C4.41015 1.5 1.5 4.41015 1.5 8C1.5 11.5899 4.41015 14.5 8 14.5C11.5899 14.5 14.5 11.5899 14.5 8C14.5 4.41015 11.5899 1.5 8 1.5ZM8 13.5C4.96243 13.5 2.5 11.0376 2.5 8C2.5 4.96243 4.96243 2.5 8 2.5C11.0376 2.5 13.5 4.96243 13.5 8C13.5 11.0376 11.0376 13.5 8 13.5Z" fill="currentColor"/>
+        <path d="M8 4.5C7.72386 4.5 7.5 4.72386 7.5 5V7.5H5C4.72386 7.5 4.5 7.72386 4.5 8C4.5 8.27614 4.72386 8.5 5 8.5H7.5V11C7.5 11.2761 7.72386 11.5 8 11.5C8.27614 11.5 8.5 11.2761 8.5 11V8.5H11C11.2761 8.5 11.5 8.27614 11.5 8C11.5 7.72386 11.2761 7.5 11 7.5H8.5V5C8.5 4.72386 8.27614 4.5 8 4.5Z" fill="currentColor"/>
+      </svg>
+      ${args.label}
+      <svg slot="icon-trailing" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M6.5 3.5L11 8L6.5 12.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+    </voa-button>
+  `
+};
+// ============================================
+// Icon Only (Apenas Ícone)
+// ============================================
+export const IconOnly = {
+    args: {
+        label: '',
+        ariaLabel: 'Adicionar item'
+    },
+    render: (args) => html `
+    <voa-button
+      variant="${args.variant}"
+      size="${args.size}"
+      ?disabled="${args.disabled}"
+      ?loading="${args.loading}"
+      aria-label="${args.ariaLabel}"
+    >
+      <svg slot="icon-leading" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M8 1.5C4.41015 1.5 1.5 4.41015 1.5 8C1.5 11.5899 4.41015 14.5 8 14.5C11.5899 14.5 14.5 11.5899 14.5 8C14.5 4.41015 11.5899 1.5 8 1.5ZM8 13.5C4.96243 13.5 2.5 11.0376 2.5 8C2.5 4.96243 4.96243 2.5 8 2.5C11.0376 2.5 13.5 4.96243 13.5 8C13.5 11.0376 11.0376 13.5 8 13.5Z" fill="currentColor"/>
+        <path d="M8 4.5C7.72386 4.5 7.5 4.72386 7.5 5V7.5H5C4.72386 7.5 4.5 7.72386 4.5 8C4.5 8.27614 4.72386 8.5 5 8.5H7.5V11C7.5 11.2761 7.72386 11.5 8 11.5C8.27614 11.5 8.5 11.2761 8.5 11V8.5H11C11.2761 8.5 11.5 8.27614 11.5 8C11.5 7.72386 11.2761 7.5 11 7.5H8.5V5C8.5 4.72386 8.27614 4.5 8 4.5Z" fill="currentColor"/>
+      </svg>
+    </voa-button>
+  `
+};
+// ============================================
+// Usage - Exemplos de Código
+// ============================================
+export const Usage = {
+    parameters: {
+        docs: {
+            description: {
+                story: `
+## Uso do Componente
+
+Este componente pode ser usado em diferentes frameworks. Abaixo estão exemplos de código para cada um:
+
+### HTML (Web Components)
+
+\`\`\`html
+<!-- Button básico -->
+<voa-button variant="primary" size="md">
+  Click me
+</voa-button>
+
+<!-- Button com ícone -->
+<voa-button variant="primary" size="md">
+  <svg slot="icon-leading" ...><!-- seu SVG aqui --></svg>
+  Com ícone
+</voa-button>
+
+<!-- Button desabilitado -->
+<voa-button variant="primary" size="md" disabled>
+  Desabilitado
+</voa-button>
+\`\`\`
+
+### React
+
+\`\`\`tsx
+import { VoaButton } from '@voa-ds/react';
+
+function MyComponent() {
+  return (
+    <>
+      {/* Button básico */}
+      <VoaButton variant="primary" size="md">
+        Click me
+      </VoaButton>
+
+      {/* Button com ícone */}
+      <VoaButton variant="primary" size="md">
+        <svg slot="icon-leading" ...>
+          {/* seu SVG aqui */}
+        </svg>
+        Com ícone
+      </VoaButton>
+
+      {/* Button desabilitado */}
+      <VoaButton variant="primary" size="md" disabled>
+        Desabilitado
+      </VoaButton>
+    </>
+  );
+}
+\`\`\`
+
+### Angular
+
+\`\`\`typescript
+import { VoaButton } from '@voa-ds/angular';
+
+@Component({
+  selector: 'app-example',
+  template: \`
+    <!-- Button básico -->
+    <voa-button variant="primary" size="md">
+      Click me
+    </voa-button>
+
+    <!-- Button com ícone -->
+    <voa-button variant="primary" size="md">
+      <svg slot="icon-leading" ...>
+        <!-- seu SVG aqui -->
+      </svg>
+      Com ícone
+    </voa-button>
+
+    <!-- Button desabilitado -->
+    <voa-button [disabled]="true" variant="primary" size="md">
+      Desabilitado
+    </voa-button>
+  \`
+})
+export class ExampleComponent {}
+\`\`\`
+
+### Vue
+
+\`\`\`vue
+<template>
+  <!-- Button básico -->
+  <VoaButton variant="primary" size="md">
+    Click me
+  </VoaButton>
+
+  <!-- Button com ícone -->
+  <VoaButton variant="primary" size="md">
+    <svg slot="icon-leading" ...>
+      <!-- seu SVG aqui -->
+    </svg>
+    Com ícone
+  </VoaButton>
+
+  <!-- Button desabilitado -->
+  <VoaButton variant="primary" size="md" :disabled="true">
+    Desabilitado
+  </VoaButton>
+</template>
+
+<script setup lang="ts">
+import { VoaButton } from '@voa-ds/vue';
+</script>
+\`\`\`
+
+## Instalação
+
+### HTML
+\`\`\`bash
+# NPM
+npm install @voa-ds/components
+
+# Importar no HTML
+<script type="module" src="https://unpkg.com/@voa-ds/components/dist/voa-ds/voa-ds.esm.js"></script>
+\`\`\`
+
+### React
+\`\`\`bash
+npm install @voa-ds/components @voa-ds/react
+\`\`\`
+
+### Angular
+\`\`\`bash
+npm install @voa-ds/components @voa-ds/angular
+\`\`\`
+
+### Vue
+\`\`\`bash
+npm install @voa-ds/components @voa-ds/vue
+\`\`\`
+        `
+            }
+        }
+    },
+    render: () => {
+        const container = document.createElement('div');
+        container.style.cssText = 'padding: 2rem; max-width: 100%;';
+        const title = document.createElement('h2');
+        title.textContent = 'Uso do Componente';
+        title.style.cssText = 'margin-top: 0; margin-bottom: 1.5rem; font-size: 1.5rem; font-weight: 600;';
+        container.appendChild(title);
+        const description = document.createElement('p');
+        description.textContent = 'Este componente pode ser usado em diferentes frameworks. Abaixo estão exemplos de código para cada um:';
+        description.style.cssText = 'margin-bottom: 2rem; color: #666;';
+        container.appendChild(description);
+        const exampleTitle = document.createElement('h3');
+        exampleTitle.textContent = 'Exemplo Interativo';
+        exampleTitle.style.cssText = 'margin-top: 2rem; margin-bottom: 1rem; font-size: 1.25rem; font-weight: 600;';
+        container.appendChild(exampleTitle);
+        const button = document.createElement('voa-button');
+        button.setAttribute('variant', 'primary');
+        button.setAttribute('size', 'md');
+        button.textContent = 'Click me';
+        button.style.cssText = 'margin-bottom: 2rem;';
+        container.appendChild(button);
+        const note = document.createElement('div');
+        note.style.cssText = 'margin-top: 2rem; padding: 1rem; background: #f5f5f5; border-radius: 4px; border-left: 4px solid #0064cb;';
+        note.innerHTML = '<p style="margin: 0; font-weight: 600; margin-bottom: 0.5rem;">📚 Documentação Completa</p>' +
+            '<p style="margin: 0; color: #666; font-size: 0.9rem;">' +
+            'Para ver exemplos de código completos para HTML, React, Angular e Vue, ' +
+            '<a href="?path=/docs/components-voabutton--docs#usage" style="color: #0064cb; text-decoration: none; font-weight: 600;">clique aqui para ir à página Docs</a>.' +
+            '</p>';
+        container.appendChild(note);
+        return container;
+    }
+};
+//# sourceMappingURL=voa-button.stories.js.map

package/dist/collection/components/voa-button/voa-button.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"voa-button.stories.js","sourceRoot":"","sources":["../../../src/components/voa-button/voa-button.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-button.external.css';\r\n\r\n/**\r\n * Componente Button do Voa Design System.\r\n * \r\n * Baseado no design do Figma: https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=515-327\r\n * \r\n * O componente segue o padrão \"unstyled\" (headless), fornecendo apenas estrutura e lógica.\r\n * Todos os estilos visuais são aplicados externamente via CSS Parts API usando design tokens.\r\n */\r\nconst meta = {\r\n  title: \"Componentes/Ações/Button\",\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=515-327',\r\n    },\r\n  },\r\n  render: (args) => html`\r\n    <voa-button\r\n      variant=\"${args.variant}\"\r\n      size=\"${args.size}\"\r\n      ?disabled=\"${args.disabled}\"\r\n      ?loading=\"${args.loading}\"\r\n      label=\"${args.label}\"\r\n      aria-label=\"${args.ariaLabel}\"\r\n      @dsClick=\"${() => console.log('Button clicked')}\"\r\n    >\r\n      ${args.label}\r\n    </voa-button>\r\n  `,\r\n  argTypes: {\r\n    label: { \r\n      control: 'text',\r\n      description: 'O texto exibido no botão'\r\n    },\r\n    variant: { \r\n      control: 'select',\r\n      options: ['primary', 'secondary', 'tonal', 'ghost', 'link'],\r\n      description: 'Variante visual do botão (mapeia as variantes do Figma)'\r\n    },\r\n    size: {\r\n      control: 'select',\r\n      options: ['sm', 'md', 'lg'],\r\n      description: 'Tamanho do botão (mapeia os tamanhos do Figma)'\r\n    },\r\n    disabled: { \r\n      control: 'boolean',\r\n      description: 'Se verdadeiro, o botão estará desabilitado'\r\n    },\r\n    loading: {\r\n      control: 'boolean',\r\n      description: 'Se verdadeiro, o botão estará em estado de carregamento'\r\n    },\r\n    ariaLabel: {\r\n      control: 'text',\r\n      description: 'Rótulo ARIA para acessibilidade (usado quando o botão não tem texto visível)'\r\n    }\r\n  },\r\n  args: {\r\n    label: 'Texto',\r\n    variant: 'primary',\r\n    size: 'lg',\r\n    disabled: false,\r\n    loading: false\r\n  }\r\n} satisfies Meta;\r\n\r\nexport default meta;\r\n\r\ntype Story = StoryObj;\r\n\r\n// História padrão\r\nexport const Default: Story = {};\r\n\r\n// ============================================\r\n// Variantes (Type)\r\n// ============================================\r\n\r\nexport const Primary: Story = {\r\n  args: {\r\n    variant: 'primary',\r\n    label: 'Primary Button'\r\n  }\r\n};\r\n\r\nexport const Secondary: Story = {\r\n  args: {\r\n    variant: 'secondary',\r\n    label: 'Secondary Button'\r\n  }\r\n};\r\n\r\nexport const Tonal: Story = {\r\n  args: {\r\n    variant: 'tonal',\r\n    label: 'Tonal Button'\r\n  }\r\n};\r\n\r\nexport const Ghost: Story = {\r\n  args: {\r\n    variant: 'ghost',\r\n    label: 'Ghost Button'\r\n  }\r\n};\r\n\r\nexport const Link: Story = {\r\n  args: {\r\n    variant: 'link',\r\n    label: 'Link Button'\r\n  }\r\n};\r\n\r\n// ============================================\r\n// Tamanhos (Size)\r\n// ============================================\r\n\r\nexport const Large: Story = {\r\n  args: {\r\n    size: 'lg',\r\n    label: 'Large Button'\r\n  }\r\n};\r\n\r\nexport const Medium: Story = {\r\n  args: {\r\n    size: 'md',\r\n    label: 'Medium Button'\r\n  }\r\n};\r\n\r\nexport const Small: Story = {\r\n  args: {\r\n    size: 'sm',\r\n    label: 'Small Button'\r\n  }\r\n};\r\n\r\n// ============================================\r\n// Estados (States)\r\n// ============================================\r\n\r\nexport const Disabled: Story = {\r\n  args: {\r\n    disabled: true,\r\n    label: 'Disabled Button'\r\n  }\r\n};\r\n\r\nexport const Loading: Story = {\r\n  args: {\r\n    loading: true,\r\n    label: 'Loading Button'\r\n  }\r\n};\r\n\r\nexport const DisabledSecondary: Story = {\r\n  args: {\r\n    variant: 'secondary',\r\n    disabled: true,\r\n    label: 'Disabled Secondary'\r\n  }\r\n};\r\n\r\nexport const DisabledTonal: Story = {\r\n  args: {\r\n    variant: 'tonal',\r\n    disabled: true,\r\n    label: 'Disabled Tonal'\r\n  }\r\n};\r\n\r\nexport const DisabledGhost: Story = {\r\n  args: {\r\n    variant: 'ghost',\r\n    disabled: true,\r\n    label: 'Disabled Ghost'\r\n  }\r\n};\r\n\r\nexport const DisabledLink: Story = {\r\n  args: {\r\n    variant: 'link',\r\n    disabled: true,\r\n    label: 'Disabled Link'\r\n  }\r\n};\r\n\r\n// ============================================\r\n// Com Ícones\r\n// ============================================\r\n\r\nexport const WithLeadingIcon: Story = {\r\n  args: {\r\n    label: 'Leading Icon'\r\n  },\r\n  render: (args) => html`\r\n    <voa-button\r\n      variant=\"${args.variant}\"\r\n      size=\"${args.size}\"\r\n      ?disabled=\"${args.disabled}\"\r\n      ?loading=\"${args.loading}\"\r\n    >\r\n      <svg slot=\"icon-leading\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n        <path d=\"M8 1.5C4.41015 1.5 1.5 4.41015 1.5 8C1.5 11.5899 4.41015 14.5 8 14.5C11.5899 14.5 14.5 11.5899 14.5 8C14.5 4.41015 11.5899 1.5 8 1.5ZM8 13.5C4.96243 13.5 2.5 11.0376 2.5 8C2.5 4.96243 4.96243 2.5 8 2.5C11.0376 2.5 13.5 4.96243 13.5 8C13.5 11.0376 11.0376 13.5 8 13.5Z\" fill=\"currentColor\"/>\r\n        <path d=\"M8 4.5C7.72386 4.5 7.5 4.72386 7.5 5V7.5H5C4.72386 7.5 4.5 7.72386 4.5 8C4.5 8.27614 4.72386 8.5 5 8.5H7.5V11C7.5 11.2761 7.72386 11.5 8 11.5C8.27614 11.5 8.5 11.2761 8.5 11V8.5H11C11.2761 8.5 11.5 8.27614 11.5 8C11.5 7.72386 11.2761 7.5 11 7.5H8.5V5C8.5 4.72386 8.27614 4.5 8 4.5Z\" fill=\"currentColor\"/>\r\n      </svg>\r\n      ${args.label}\r\n    </voa-button>\r\n  `\r\n};\r\n\r\nexport const WithTrailingIcon: Story = {\r\n  args: {\r\n    label: 'Trailing Icon'\r\n  },\r\n  render: (args) => html`\r\n    <voa-button\r\n      variant=\"${args.variant}\"\r\n      size=\"${args.size}\"\r\n      ?disabled=\"${args.disabled}\"\r\n      ?loading=\"${args.loading}\"\r\n    >\r\n      ${args.label}\r\n      <svg slot=\"icon-trailing\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n        <path d=\"M6.5 3.5L11 8L6.5 12.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      </svg>\r\n    </voa-button>\r\n  `\r\n};\r\n\r\nexport const WithBothIcons: Story = {\r\n  args: {\r\n    label: 'Both Icons'\r\n  },\r\n  render: (args) => html`\r\n    <voa-button\r\n      variant=\"${args.variant}\"\r\n      size=\"${args.size}\"\r\n      ?disabled=\"${args.disabled}\"\r\n      ?loading=\"${args.loading}\"\r\n    >\r\n      <svg slot=\"icon-leading\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n        <path d=\"M8 1.5C4.41015 1.5 1.5 4.41015 1.5 8C1.5 11.5899 4.41015 14.5 8 14.5C11.5899 14.5 14.5 11.5899 14.5 8C14.5 4.41015 11.5899 1.5 8 1.5ZM8 13.5C4.96243 13.5 2.5 11.0376 2.5 8C2.5 4.96243 4.96243 2.5 8 2.5C11.0376 2.5 13.5 4.96243 13.5 8C13.5 11.0376 11.0376 13.5 8 13.5Z\" fill=\"currentColor\"/>\r\n        <path d=\"M8 4.5C7.72386 4.5 7.5 4.72386 7.5 5V7.5H5C4.72386 7.5 4.5 7.72386 4.5 8C4.5 8.27614 4.72386 8.5 5 8.5H7.5V11C7.5 11.2761 7.72386 11.5 8 11.5C8.27614 11.5 8.5 11.2761 8.5 11V8.5H11C11.2761 8.5 11.5 8.27614 11.5 8C11.5 7.72386 11.2761 7.5 11 7.5H8.5V5C8.5 4.72386 8.27614 4.5 8 4.5Z\" fill=\"currentColor\"/>\r\n      </svg>\r\n      ${args.label}\r\n      <svg slot=\"icon-trailing\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n        <path d=\"M6.5 3.5L11 8L6.5 12.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      </svg>\r\n    </voa-button>\r\n  `\r\n};\r\n\r\n// ============================================\r\n// Icon Only (Apenas Ícone)\r\n// ============================================\r\n\r\nexport const IconOnly: Story = {\r\n  args: {\r\n    label: '',\r\n    ariaLabel: 'Adicionar item'\r\n  },\r\n  render: (args) => html`\r\n    <voa-button\r\n      variant=\"${args.variant}\"\r\n      size=\"${args.size}\"\r\n      ?disabled=\"${args.disabled}\"\r\n      ?loading=\"${args.loading}\"\r\n      aria-label=\"${args.ariaLabel}\"\r\n    >\r\n      <svg slot=\"icon-leading\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n        <path d=\"M8 1.5C4.41015 1.5 1.5 4.41015 1.5 8C1.5 11.5899 4.41015 14.5 8 14.5C11.5899 14.5 14.5 11.5899 14.5 8C14.5 4.41015 11.5899 1.5 8 1.5ZM8 13.5C4.96243 13.5 2.5 11.0376 2.5 8C2.5 4.96243 4.96243 2.5 8 2.5C11.0376 2.5 13.5 4.96243 13.5 8C13.5 11.0376 11.0376 13.5 8 13.5Z\" fill=\"currentColor\"/>\r\n        <path d=\"M8 4.5C7.72386 4.5 7.5 4.72386 7.5 5V7.5H5C4.72386 7.5 4.5 7.72386 4.5 8C4.5 8.27614 4.72386 8.5 5 8.5H7.5V11C7.5 11.2761 7.72386 11.5 8 11.5C8.27614 11.5 8.5 11.2761 8.5 11V8.5H11C11.2761 8.5 11.5 8.27614 11.5 8C11.5 7.72386 11.2761 7.5 11 7.5H8.5V5C8.5 4.72386 8.27614 4.5 8 4.5Z\" fill=\"currentColor\"/>\r\n      </svg>\r\n    </voa-button>\r\n  `\r\n};\r\n\r\n// ============================================\r\n// Usage - Exemplos de Código\r\n// ============================================\r\n\r\nexport const Usage: Story = {\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<!-- Button básico -->\r\n<voa-button variant=\"primary\" size=\"md\">\r\n  Click me\r\n</voa-button>\r\n\r\n<!-- Button com ícone -->\r\n<voa-button variant=\"primary\" size=\"md\">\r\n  <svg slot=\"icon-leading\" ...><!-- seu SVG aqui --></svg>\r\n  Com ícone\r\n</voa-button>\r\n\r\n<!-- Button desabilitado -->\r\n<voa-button variant=\"primary\" size=\"md\" disabled>\r\n  Desabilitado\r\n</voa-button>\r\n\\`\\`\\`\r\n\r\n### React\r\n\r\n\\`\\`\\`tsx\r\nimport { VoaButton } from '@voa-ds/react';\r\n\r\nfunction MyComponent() {\r\n  return (\r\n    <>\r\n      {/* Button básico */}\r\n      <VoaButton variant=\"primary\" size=\"md\">\r\n        Click me\r\n      </VoaButton>\r\n\r\n      {/* Button com ícone */}\r\n      <VoaButton variant=\"primary\" size=\"md\">\r\n        <svg slot=\"icon-leading\" ...>\r\n          {/* seu SVG aqui */}\r\n        </svg>\r\n        Com ícone\r\n      </VoaButton>\r\n\r\n      {/* Button desabilitado */}\r\n      <VoaButton variant=\"primary\" size=\"md\" disabled>\r\n        Desabilitado\r\n      </VoaButton>\r\n    </>\r\n  );\r\n}\r\n\\`\\`\\`\r\n\r\n### Angular\r\n\r\n\\`\\`\\`typescript\r\nimport { VoaButton } from '@voa-ds/angular';\r\n\r\n@Component({\r\n  selector: 'app-example',\r\n  template: \\`\r\n    <!-- Button básico -->\r\n    <voa-button variant=\"primary\" size=\"md\">\r\n      Click me\r\n    </voa-button>\r\n\r\n    <!-- Button com ícone -->\r\n    <voa-button variant=\"primary\" size=\"md\">\r\n      <svg slot=\"icon-leading\" ...>\r\n        <!-- seu SVG aqui -->\r\n      </svg>\r\n      Com ícone\r\n    </voa-button>\r\n\r\n    <!-- Button desabilitado -->\r\n    <voa-button [disabled]=\"true\" variant=\"primary\" size=\"md\">\r\n      Desabilitado\r\n    </voa-button>\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  <!-- Button básico -->\r\n  <VoaButton variant=\"primary\" size=\"md\">\r\n    Click me\r\n  </VoaButton>\r\n\r\n  <!-- Button com ícone -->\r\n  <VoaButton variant=\"primary\" size=\"md\">\r\n    <svg slot=\"icon-leading\" ...>\r\n      <!-- seu SVG aqui -->\r\n    </svg>\r\n    Com ícone\r\n  </VoaButton>\r\n\r\n  <!-- Button desabilitado -->\r\n  <VoaButton variant=\"primary\" size=\"md\" :disabled=\"true\">\r\n    Desabilitado\r\n  </VoaButton>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { VoaButton } 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: () => {\r\n    const container = document.createElement('div');\r\n    container.style.cssText = 'padding: 2rem; max-width: 100%;';\r\n    \r\n    const title = document.createElement('h2');\r\n    title.textContent = 'Uso do Componente';\r\n    title.style.cssText = 'margin-top: 0; margin-bottom: 1.5rem; font-size: 1.5rem; font-weight: 600;';\r\n    container.appendChild(title);\r\n    \r\n    const description = document.createElement('p');\r\n    description.textContent = 'Este componente pode ser usado em diferentes frameworks. Abaixo estão exemplos de código para cada um:';\r\n    description.style.cssText = 'margin-bottom: 2rem; color: #666;';\r\n    container.appendChild(description);\r\n    \r\n    const exampleTitle = document.createElement('h3');\r\n    exampleTitle.textContent = 'Exemplo Interativo';\r\n    exampleTitle.style.cssText = 'margin-top: 2rem; margin-bottom: 1rem; font-size: 1.25rem; font-weight: 600;';\r\n    container.appendChild(exampleTitle);\r\n    \r\n    const button = document.createElement('voa-button');\r\n    button.setAttribute('variant', 'primary');\r\n    button.setAttribute('size', 'md');\r\n    button.textContent = 'Click me';\r\n    button.style.cssText = 'margin-bottom: 2rem;';\r\n    container.appendChild(button);\r\n    \r\n    const note = document.createElement('div');\r\n    note.style.cssText = 'margin-top: 2rem; padding: 1rem; background: #f5f5f5; border-radius: 4px; border-left: 4px solid #0064cb;';\r\n    note.innerHTML = '<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;\">' +\r\n      'Para ver exemplos de código completos para HTML, React, Angular e Vue, ' +\r\n      '<a href=\"?path=/docs/components-voabutton--docs#usage\" style=\"color: #0064cb; text-decoration: none; font-weight: 600;\">clique aqui para ir à página Docs</a>.' +\r\n      '</p>';\r\n    container.appendChild(note);\r\n    \r\n    return container;\r\n  }\r\n};\r\n"]}

package/dist/collection/components/voa-card/voa-card.css

@@ -0,0 +1,22 @@
+:host {
+  display: block;
+}
+
+[part="base"] {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+[part="header"] {
+  display: block;
+}
+
+[part="body"] {
+  flex: 1;
+  display: block;
+}
+
+[part="footer"] {
+  display: block;
+}

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

@@ -0,0 +1,19 @@
+import { Host, h } from "@stencil/core";
+export class VoaCard {
+    render() {
+        return (h(Host, { key: '568c4d6e50c8fc83eb891224583329f788034d6e' }, h("div", { key: '814f7efd2919c4446e89807d4bdf78849c48871b', part: "base" }, h("div", { key: '0fdc6719a13a4bce82080d7db590ededcb4a01b0', part: "header" }, h("slot", { key: 'f2c80a5a2defb23c1f55a2e8b2a80c7c91513a53', name: "header" })), h("div", { key: '22c8e15f59892e8efe24ff3023ed3850e9a1a186', part: "body" }, h("slot", { key: 'f506952810dfbdbb7ff519633d936261e22f7db7' })), h("div", { key: '6ad21245c020b337c17593d1c9f8abe32fc166de', part: "footer" }, h("slot", { key: 'c427e8ac2ec538ecb3ab75052d453afc5aae2ee5', name: "footer" })))));
+    }
+    static get is() { return "voa-card"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["voa-card.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["voa-card.css"]
+        };
+    }
+}
+//# sourceMappingURL=voa-card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"voa-card.js","sourceRoot":"","sources":["../../../src/components/voa-card/voa-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,OAAO;IAClB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,IAAI,EAAC,MAAM;gBACd,4DAAK,IAAI,EAAC,QAAQ;oBAChB,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB;gBACN,4DAAK,IAAI,EAAC,MAAM;oBACd,8DAAa,CACT;gBACN,4DAAK,IAAI,EAAC,QAAQ;oBAChB,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'voa-card',\r\n  styleUrl: 'voa-card.css',\r\n  shadow: true,\r\n})\r\nexport class VoaCard {\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div part=\"base\">\r\n          <div part=\"header\">\r\n            <slot name=\"header\"></slot>\r\n          </div>\r\n          <div part=\"body\">\r\n            <slot></slot>\r\n          </div>\r\n          <div part=\"footer\">\r\n            <slot name=\"footer\"></slot>\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}