voa-ds-core 1.0.3

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

@@ -0,0 +1,377 @@
+import { html } from "lit";
+import "./voa-checkbox.default-theme.css";
+import "../../Stories/styles/voa-checkbox.external.css";
+const meta = {
+    title: "Componentes/Formulários/Checkbox",
+    tags: ['autodocs'],
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=429-677',
+        },
+        docs: {
+            description: {
+                component: `
+Este componente é "unstyled" e pode ser estilizado usando CSS Custom Properties (de \`@voa-ds/tokens\`)
+direcionando os seguintes seletores CSS \`::part()\`:
+
+- \`base\`: O elemento raiz do checkbox (elemento <label>)
+- \`input\`: O elemento nativo de input checkbox (visualmente oculto, mas acessível)
+- \`indicator\`: O indicador visual do checkbox (caixa customizada)
+- \`label\`: O wrapper do texto do label
+
+**Exemplo de estilização:**
+
+\`\`\`css
+@import '@voa-ds/tokens/global.css';
+
+voa-checkbox::part(indicator) {
+  width: 20px;
+  height: 20px;
+  border-radius: var(--radius-sm);
+  background-color: var(--structure-colors-bg-base);
+  border: 1px solid var(--structure-colors-border-color);
+}
+\`\`\`
+        `
+            }
+        }
+    },
+    render: (args) => {
+        return html `
+      <voa-checkbox
+        .state=${args.state}
+        .disabled=${args.disabled}
+        .showLabel=${args.showLabel}
+        .name=${args.name || ''}
+        .value=${args.value || 'on'}
+        @dsChange=${args.onDsChange}
+      >
+        ${args.label}
+      </voa-checkbox>
+    `;
+    },
+    argTypes: {
+        state: {
+            control: 'select',
+            options: ['inactive', 'active', 'indeterminate'],
+            description: 'Estado atual do checkbox (mapeia as variantes do Figma)',
+            table: {
+                type: { summary: '"active" | "inactive" | "indeterminate"' },
+                defaultValue: { summary: 'inactive' },
+            },
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Se o checkbox está desabilitado',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        showLabel: {
+            control: 'boolean',
+            description: 'Se o label deve ser exibido',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'true' },
+            },
+        },
+        name: {
+            control: 'text',
+            description: 'Nome do checkbox para formulários',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        value: {
+            control: 'text',
+            description: 'Valor do checkbox para formulários',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        label: {
+            control: 'text',
+            description: 'Conteúdo do label do checkbox',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        onDsChange: {
+            action: 'dsChange',
+            description: 'Emitido quando o estado do checkbox muda (segue o padrão ds*)',
+            table: {
+                type: { summary: 'CustomEvent<"active" | "inactive" | "indeterminate">' },
+            },
+        },
+    },
+    args: {
+        state: 'inactive',
+        disabled: false,
+        showLabel: true,
+        label: 'Checkbox label',
+    },
+};
+export default meta;
+// Story padrão
+export const Default = {};
+// Checkbox ativo
+export const Active = {
+    args: {
+        state: 'active',
+        label: 'Checkbox ativo',
+    },
+};
+// Checkbox indeterminado
+export const Indeterminate = {
+    args: {
+        state: 'indeterminate',
+        label: 'Checkbox indeterminado',
+    },
+};
+// Checkbox desabilitado
+export const Disabled = {
+    args: {
+        disabled: true,
+        label: 'Checkbox desabilitado',
+    },
+};
+// Checkbox sem label
+export const WithoutLabel = {
+    args: {
+        showLabel: false,
+        label: '',
+    },
+};
+// Checkbox com nome e valor
+export const WithNameAndValue = {
+    args: {
+        name: 'checkbox-name',
+        value: 'checkbox-value',
+        label: 'Checkbox com nome e valor',
+    },
+};
+// ============================================
+// 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
+<!-- Checkbox básico -->
+<voa-checkbox 
+  state="active"
+  label="Aceito os termos"
+  ondsChange={(e) => console.log('Changed', e.detail)}
+></voa-checkbox>
+
+<!-- Checkbox desabilitado -->
+<voa-checkbox 
+  state="inactive"
+  label="Opção desabilitada"
+  disabled
+></voa-checkbox>
+
+<!-- Checkbox indeterminado -->
+<voa-checkbox 
+  state="indeterminate"
+  label="Selecionar todos"
+></voa-checkbox>
+\`\`\`
+
+### React
+
+\`\`\`tsx
+import { VoaCheckbox } from '@voa-ds/react';
+import { useState } from 'react';
+
+function MyComponent() {
+  const [checked, setChecked] = useState(false);
+
+  const handleChange = (e: CustomEvent<'active' | 'inactive' | 'indeterminate'>) => {
+    setChecked(e.detail === 'active');
+    console.log('Changed', e.detail);
+  };
+
+  return (
+    <>
+      {/* Checkbox básico */}
+      <VoaCheckbox
+        state={checked ? 'active' : 'inactive'}
+        label="Aceito os termos"
+        onDsChange={handleChange}
+      />
+
+      {/* Checkbox desabilitado */}
+      <VoaCheckbox
+        state="inactive"
+        label="Opção desabilitada"
+        disabled
+      />
+
+      {/* Checkbox indeterminado */}
+      <VoaCheckbox
+        state="indeterminate"
+        label="Selecionar todos"
+      />
+    </>
+  );
+}
+\`\`\`
+
+### Angular
+
+\`\`\`typescript
+import { VoaCheckbox } from '@voa-ds/angular';
+
+@Component({
+  selector: 'app-example',
+  template: \`
+    <!-- Checkbox básico -->
+    <voa-checkbox
+      [state]="checked ? 'active' : 'inactive'"
+      [label]="'Aceito os termos'"
+      (dsChange)="handleChange($event)"
+    ></voa-checkbox>
+
+    <!-- Checkbox desabilitado -->
+    <voa-checkbox
+      [state]="'inactive'"
+      [label]="'Opção desabilitada'"
+      [disabled]="true"
+    ></voa-checkbox>
+
+    <!-- Checkbox indeterminado -->
+    <voa-checkbox
+      [state]="'indeterminate'"
+      [label]="'Selecionar todos'"
+    ></voa-checkbox>
+  \`
+})
+export class ExampleComponent {
+  checked = false;
+
+  handleChange(event: CustomEvent<'active' | 'inactive' | 'indeterminate'>) {
+    this.checked = event.detail === 'active';
+    console.log('Changed', event.detail);
+  }
+}
+\`\`\`
+
+### Vue
+
+\`\`\`vue
+<template>
+  <div>
+    <!-- Checkbox básico -->
+    <VoaCheckbox
+      :state="checked ? 'active' : 'inactive'"
+      label="Aceito os termos"
+      @dsChange="handleChange"
+    />
+
+    <!-- Checkbox desabilitado -->
+    <VoaCheckbox
+      state="inactive"
+      label="Opção desabilitada"
+      :disabled="true"
+    />
+
+    <!-- Checkbox indeterminado -->
+    <VoaCheckbox
+      state="indeterminate"
+      label="Selecionar todos"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { VoaCheckbox } from '@voa-ds/vue';
+
+const checked = ref(false);
+
+const handleChange = (event: CustomEvent<'active' | 'inactive' | 'indeterminate'>) => {
+  checked.value = event.detail === 'active';
+  console.log('Changed', event.detail);
+};
+</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: () => {
+        // Criar container que inclui o componente e a documentação
+        const container = document.createElement('div');
+        container.style.cssText = 'padding: 2rem; max-width: 100%;';
+        // Adicionar título
+        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);
+        // Adicionar descrição
+        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);
+        // Adicionar componente de exemplo
+        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 el = document.createElement('voa-checkbox');
+        el.state = 'active';
+        el.label = 'Exemplo de Uso';
+        el.style.cssText = 'margin-bottom: 2rem;';
+        container.appendChild(el);
+        // Adicionar nota sobre documentação completa
+        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-voacheckbox--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-checkbox.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"voa-checkbox.stories.js","sourceRoot":"","sources":["../../../src/components/voa-checkbox/voa-checkbox.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryObj } from '@storybook/web-components';\r\nimport { html } from 'lit';\r\nimport './voa-checkbox.default-theme.css';\r\nimport '../../Stories/styles/voa-checkbox.external.css';\r\n\r\n/**\r\n * Componente Checkbox do Voa Design System.\r\n * \r\n * Baseado no design do Figma: https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=429-677\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\ninterface CheckboxArgs {\r\n  state: 'active' | 'inactive' | 'indeterminate';\r\n  disabled: boolean;\r\n  showLabel: boolean;\r\n  name?: string;\r\n  value?: string;\r\n  label?: string;\r\n  onDsChange?: (e: CustomEvent) => void;\r\n}\r\n\r\nconst meta = {\r\n  title: \"Componentes/Formulários/Checkbox\",\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=429-677',\r\n    },\r\n    docs: {\r\n      description: {\r\n        component: `\r\nEste componente é \"unstyled\" e pode ser estilizado usando CSS Custom Properties (de \\`@voa-ds/tokens\\`)\r\ndirecionando os seguintes seletores CSS \\`::part()\\`:\r\n\r\n- \\`base\\`: O elemento raiz do checkbox (elemento <label>)\r\n- \\`input\\`: O elemento nativo de input checkbox (visualmente oculto, mas acessível)\r\n- \\`indicator\\`: O indicador visual do checkbox (caixa customizada)\r\n- \\`label\\`: O wrapper do texto do label\r\n\r\n**Exemplo de estilização:**\r\n\r\n\\`\\`\\`css\r\n@import '@voa-ds/tokens/global.css';\r\n\r\nvoa-checkbox::part(indicator) {\r\n  width: 20px;\r\n  height: 20px;\r\n  border-radius: var(--radius-sm);\r\n  background-color: var(--structure-colors-bg-base);\r\n  border: 1px solid var(--structure-colors-border-color);\r\n}\r\n\\`\\`\\`\r\n        `\r\n      }\r\n    }\r\n  },\r\n  render: (args: CheckboxArgs) => {\r\n    return html`\r\n      <voa-checkbox\r\n        .state=${args.state}\r\n        .disabled=${args.disabled}\r\n        .showLabel=${args.showLabel}\r\n        .name=${args.name || ''}\r\n        .value=${args.value || 'on'}\r\n        @dsChange=${args.onDsChange}\r\n      >\r\n        ${args.label}\r\n      </voa-checkbox>\r\n    `;\r\n  },\r\n  argTypes: {\r\n    state: {\r\n      control: 'select',\r\n      options: ['inactive', 'active', 'indeterminate'],\r\n      description: 'Estado atual do checkbox (mapeia as variantes do Figma)',\r\n      table: {\r\n        type: { summary: '\"active\" | \"inactive\" | \"indeterminate\"' },\r\n        defaultValue: { summary: 'inactive' },\r\n      },\r\n    },\r\n    disabled: {\r\n      control: 'boolean',\r\n      description: 'Se o checkbox está desabilitado',\r\n      table: {\r\n        type: { summary: 'boolean' },\r\n        defaultValue: { summary: 'false' },\r\n      },\r\n    },\r\n    showLabel: {\r\n      control: 'boolean',\r\n      description: 'Se o label deve ser exibido',\r\n      table: {\r\n        type: { summary: 'boolean' },\r\n        defaultValue: { summary: 'true' },\r\n      },\r\n    },\r\n    name: {\r\n      control: 'text',\r\n      description: 'Nome do checkbox para formulários',\r\n      table: {\r\n        type: { summary: 'string' },\r\n      },\r\n    },\r\n    value: {\r\n      control: 'text',\r\n      description: 'Valor do checkbox para formulários',\r\n      table: {\r\n        type: { summary: 'string' },\r\n      },\r\n    },\r\n    label: {\r\n      control: 'text',\r\n      description: 'Conteúdo do label do checkbox',\r\n      table: {\r\n        type: { summary: 'string' },\r\n      },\r\n    },\r\n    onDsChange: {\r\n      action: 'dsChange',\r\n      description: 'Emitido quando o estado do checkbox muda (segue o padrão ds*)',\r\n      table: {\r\n        type: { summary: 'CustomEvent<\"active\" | \"inactive\" | \"indeterminate\">' },\r\n      },\r\n    },\r\n  },\r\n  args: {\r\n    state: 'inactive',\r\n    disabled: false,\r\n    showLabel: true,\r\n    label: 'Checkbox label',\r\n  },\r\n} satisfies Meta<CheckboxArgs>;\r\n\r\nexport default meta;\r\ntype Story = StoryObj<CheckboxArgs>;\r\n\r\n// Story padrão\r\nexport const Default: Story = {};\r\n\r\n// Checkbox ativo\r\nexport const Active: Story = {\r\n  args: {\r\n    state: 'active',\r\n    label: 'Checkbox ativo',\r\n  },\r\n};\r\n\r\n// Checkbox indeterminado\r\nexport const Indeterminate: Story = {\r\n  args: {\r\n    state: 'indeterminate',\r\n    label: 'Checkbox indeterminado',\r\n  },\r\n};\r\n\r\n// Checkbox desabilitado\r\nexport const Disabled: Story = {\r\n  args: {\r\n    disabled: true,\r\n    label: 'Checkbox desabilitado',\r\n  },\r\n};\r\n\r\n// Checkbox sem label\r\nexport const WithoutLabel: Story = {\r\n  args: {\r\n    showLabel: false,\r\n    label: '',\r\n  },\r\n};\r\n\r\n// Checkbox com nome e valor\r\nexport const WithNameAndValue: Story = {\r\n  args: {\r\n    name: 'checkbox-name',\r\n    value: 'checkbox-value',\r\n    label: 'Checkbox com nome e valor',\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<!-- Checkbox básico -->\r\n<voa-checkbox \r\n  state=\"active\"\r\n  label=\"Aceito os termos\"\r\n  ondsChange={(e) => console.log('Changed', e.detail)}\r\n></voa-checkbox>\r\n\r\n<!-- Checkbox desabilitado -->\r\n<voa-checkbox \r\n  state=\"inactive\"\r\n  label=\"Opção desabilitada\"\r\n  disabled\r\n></voa-checkbox>\r\n\r\n<!-- Checkbox indeterminado -->\r\n<voa-checkbox \r\n  state=\"indeterminate\"\r\n  label=\"Selecionar todos\"\r\n></voa-checkbox>\r\n\\`\\`\\`\r\n\r\n### React\r\n\r\n\\`\\`\\`tsx\r\nimport { VoaCheckbox } from '@voa-ds/react';\r\nimport { useState } from 'react';\r\n\r\nfunction MyComponent() {\r\n  const [checked, setChecked] = useState(false);\r\n\r\n  const handleChange = (e: CustomEvent<'active' | 'inactive' | 'indeterminate'>) => {\r\n    setChecked(e.detail === 'active');\r\n    console.log('Changed', e.detail);\r\n  };\r\n\r\n  return (\r\n    <>\r\n      {/* Checkbox básico */}\r\n      <VoaCheckbox\r\n        state={checked ? 'active' : 'inactive'}\r\n        label=\"Aceito os termos\"\r\n        onDsChange={handleChange}\r\n      />\r\n\r\n      {/* Checkbox desabilitado */}\r\n      <VoaCheckbox\r\n        state=\"inactive\"\r\n        label=\"Opção desabilitada\"\r\n        disabled\r\n      />\r\n\r\n      {/* Checkbox indeterminado */}\r\n      <VoaCheckbox\r\n        state=\"indeterminate\"\r\n        label=\"Selecionar todos\"\r\n      />\r\n    </>\r\n  );\r\n}\r\n\\`\\`\\`\r\n\r\n### Angular\r\n\r\n\\`\\`\\`typescript\r\nimport { VoaCheckbox } from '@voa-ds/angular';\r\n\r\n@Component({\r\n  selector: 'app-example',\r\n  template: \\`\r\n    <!-- Checkbox básico -->\r\n    <voa-checkbox\r\n      [state]=\"checked ? 'active' : 'inactive'\"\r\n      [label]=\"'Aceito os termos'\"\r\n      (dsChange)=\"handleChange($event)\"\r\n    ></voa-checkbox>\r\n\r\n    <!-- Checkbox desabilitado -->\r\n    <voa-checkbox\r\n      [state]=\"'inactive'\"\r\n      [label]=\"'Opção desabilitada'\"\r\n      [disabled]=\"true\"\r\n    ></voa-checkbox>\r\n\r\n    <!-- Checkbox indeterminado -->\r\n    <voa-checkbox\r\n      [state]=\"'indeterminate'\"\r\n      [label]=\"'Selecionar todos'\"\r\n    ></voa-checkbox>\r\n  \\`\r\n})\r\nexport class ExampleComponent {\r\n  checked = false;\r\n\r\n  handleChange(event: CustomEvent<'active' | 'inactive' | 'indeterminate'>) {\r\n    this.checked = event.detail === 'active';\r\n    console.log('Changed', event.detail);\r\n  }\r\n}\r\n\\`\\`\\`\r\n\r\n### Vue\r\n\r\n\\`\\`\\`vue\r\n<template>\r\n  <div>\r\n    <!-- Checkbox básico -->\r\n    <VoaCheckbox\r\n      :state=\"checked ? 'active' : 'inactive'\"\r\n      label=\"Aceito os termos\"\r\n      @dsChange=\"handleChange\"\r\n    />\r\n\r\n    <!-- Checkbox desabilitado -->\r\n    <VoaCheckbox\r\n      state=\"inactive\"\r\n      label=\"Opção desabilitada\"\r\n      :disabled=\"true\"\r\n    />\r\n\r\n    <!-- Checkbox indeterminado -->\r\n    <VoaCheckbox\r\n      state=\"indeterminate\"\r\n      label=\"Selecionar todos\"\r\n    />\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref } from 'vue';\r\nimport { VoaCheckbox } from '@voa-ds/vue';\r\n\r\nconst checked = ref(false);\r\n\r\nconst handleChange = (event: CustomEvent<'active' | 'inactive' | 'indeterminate'>) => {\r\n  checked.value = event.detail === 'active';\r\n  console.log('Changed', event.detail);\r\n};\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    // Criar container que inclui o componente e a documentação\r\n    const container = document.createElement('div');\r\n    container.style.cssText = 'padding: 2rem; max-width: 100%;';\r\n    \r\n    // Adicionar título\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    // Adicionar descrição\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    // Adicionar componente de exemplo\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 el = document.createElement('voa-checkbox');\r\n    (el as any).state = 'active';\r\n    (el as any).label = 'Exemplo de Uso';\r\n    el.style.cssText = 'margin-bottom: 2rem;';\r\n    container.appendChild(el);\r\n    \r\n    // Adicionar nota sobre documentação completa\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 = `\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;\">\r\n        Para ver exemplos de código completos para HTML, React, Angular e Vue, \r\n        <a href=\"?path=/docs/components-voacheckbox--docs#usage\" style=\"color: #0064cb; text-decoration: none; font-weight: 600;\">clique aqui para ir à página Docs</a>.\r\n      </p>\r\n    `;\r\n    container.appendChild(note);\r\n    \r\n    return container;\r\n  }\r\n}; "]}

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

@@ -0,0 +1,7 @@
+.datepicker {
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  font-size: 14px;
+  width: 100%;
+}

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

@@ -0,0 +1,53 @@
+import { h } from "@stencil/core";
+export class DatePicker {
+    constructor() {
+        this.handleDateChange = (event) => {
+            const input = event.target;
+            this.selectedDate = input.value;
+        };
+    }
+    render() {
+        return (h("input", { key: 'af8981e65381d8526c2ee2c49856d2d15e184054', class: "datepicker", type: "date", value: this.selectedDate, onInput: this.handleDateChange }));
+    }
+    static get is() { return "voa-datepicker"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["datepicker.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["datepicker.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "selectedDate": {}
+        };
+    }
+}
+//# sourceMappingURL=datepicker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"datepicker.js","sourceRoot":"","sources":["../../../src/components/voa-datepicker/datepicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAO1D,MAAM,OAAO,UAAU;IALvB;QASU,qBAAgB,GAAG,CAAC,KAAY,EAAE,EAAE;YAC1C,MAAM,KAAK,GAAG,KAAK,CAAC,MAA0B,CAAC;YAC/C,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,KAAK,CAAC;QAClC,CAAC,CAAC;KAYH;IAVC,MAAM;QACJ,OAAO,CACL,8DACE,KAAK,EAAC,YAAY,EAClB,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,OAAO,EAAE,IAAI,CAAC,gBAAgB,GAC9B,CACH,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, State } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"voa-datepicker\",\r\n  styleUrl: \"datepicker.css\",\r\n  shadow: true,\r\n})\r\nexport class DatePicker {\r\n  @Prop() value: string;\r\n  @State() selectedDate: string;\r\n\r\n  private handleDateChange = (event: Event) => {\r\n    const input = event.target as HTMLInputElement;\r\n    this.selectedDate = input.value;\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <input\r\n        class=\"datepicker\"\r\n        type=\"date\"\r\n        value={this.selectedDate}\r\n        onInput={this.handleDateChange}\r\n      />\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -0,0 +1,23 @@
+import { html } from "lit-html";
+import ReadmeMdx from "./README.mdx";
+export default {
+    title: "Componentes/Formulários/Date Picker",
+    component: "voa-datepicker",
+    argTypes: {
+        value: { control: "date" },
+    },
+    parameters: {
+        docs: {
+            page: ReadmeMdx,
+        },
+    },
+    tags: ["autodocs"],
+};
+const Template = ({ value }) => html `
+  <voa-datepicker value="${value}"></voa-datepicker>
+`;
+export const Default = Template.bind({});
+Default.args = {
+    value: new Date().toISOString().substr(0, 10),
+};
+//# sourceMappingURL=datepicker.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"datepicker.stories.js","sourceRoot":"","sources":["../../../src/components/voa-datepicker/datepicker.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,OAAO,SAAS,MAAM,cAAc,CAAC;AAErC,eAAe;IACb,KAAK,EAAE,qCAAqC;IAC5C,SAAS,EAAE,gBAAgB;IAC3B,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;KAC3B;IACD,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,IAAI,EAAE,SAAS;SAChB;KACF;IACD,IAAI,EAAE,CAAC,UAAU,CAAC;CACX,CAAC;AAEV,MAAM,QAAQ,GAAY,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA;2BAClB,KAAK;CAC/B,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,CAAC;CAC9C,CAAC","sourcesContent":["import { html } from \"lit-html\";\r\nimport { Meta, StoryFn } from \"@storybook/web-components\";\r\nimport ReadmeMdx from \"./README.mdx\";\r\n\r\nexport default {\r\n  title: \"Componentes/Formulários/Date Picker\",\r\n  component: \"voa-datepicker\",\r\n  argTypes: {\r\n    value: { control: \"date\" },\r\n  },\r\n  parameters: {\r\n    docs: {\r\n      page: ReadmeMdx,\r\n    },\r\n  },\r\n  tags: [\"autodocs\"],\r\n} as Meta;\r\n\r\nconst Template: StoryFn = ({ value }) => html`\r\n  <voa-datepicker value=\"${value}\"></voa-datepicker>\r\n`;\r\n\r\nexport const Default = Template.bind({});\r\nDefault.args = {\r\n  value: new Date().toISOString().substr(0, 10),\r\n};\r\n"]}

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

@@ -0,0 +1,16 @@
+.drawer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 250px;
+  background-color: #f4f4f4;
+  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.3);
+  overflow-x: hidden;
+  transform: translateX(-100%);
+  transition: transform 0.3s ease-out;
+}
+
+.drawer.open {
+  transform: translateX(0);
+}

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

@@ -0,0 +1,55 @@
+import { h } from "@stencil/core";
+export class Drawer {
+    constructor() {
+        this.open = false;
+        this.isOpen = this.open;
+        this.toggleDrawer = () => {
+            this.isOpen = !this.isOpen;
+        };
+    }
+    render() {
+        return (h("div", { key: '2b4b59e2a98be617133230efa01067350f134ccf' }, h("button", { key: 'd0395e45d627c264bdba585664e63092786bb816', onClick: this.toggleDrawer }, this.isOpen ? "Close Drawer" : "Open Drawer"), h("div", { key: '8e0a68cc3775d47ae2533fc34ffc989e47e59d97', class: `drawer ${this.isOpen ? "open" : ""}` }, h("slot", { key: '6955f3158caf6596a472c7717b5bce0b914934fe' }))));
+    }
+    static get is() { return "voa-drawer"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["drawer.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["drawer.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "open",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isOpen": {}
+        };
+    }
+}
+//# sourceMappingURL=drawer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.js","sourceRoot":"","sources":["../../../src/components/voa-drawer/drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAO1D,MAAM,OAAO,MAAM;IALnB;QAMU,SAAI,GAAY,KAAK,CAAC;QACrB,WAAM,GAAY,IAAI,CAAC,IAAI,CAAC;QAErC,iBAAY,GAAG,GAAG,EAAE;YAClB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;QAC7B,CAAC,CAAC;KAcH;IAZC,MAAM;QACJ,OAAO,CACL;YACE,+DAAQ,OAAO,EAAE,IAAI,CAAC,YAAY,IAC/B,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,aAAa,CACtC;YACT,4DAAK,KAAK,EAAE,UAAU,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE;gBAC/C,8DAAa,CACT,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, State, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"voa-drawer\",\r\n  styleUrl: \"drawer.css\",\r\n  shadow: true,\r\n})\r\nexport class Drawer {\r\n  @Prop() open: boolean = false;\r\n  @State() isOpen: boolean = this.open;\r\n\r\n  toggleDrawer = () => {\r\n    this.isOpen = !this.isOpen;\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <div>\r\n        <button onClick={this.toggleDrawer}>\r\n          {this.isOpen ? \"Close Drawer\" : \"Open Drawer\"}\r\n        </button>\r\n        <div class={`drawer ${this.isOpen ? \"open\" : \"\"}`}>\r\n          <slot></slot>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -0,0 +1,25 @@
+import { html } from "lit-html";
+import ReadmeMdx from "./README.mdx";
+export default {
+    title: "Componentes/Layout/Drawer",
+    component: "voa-drawer",
+    argTypes: {
+        open: { control: "boolean" },
+    },
+    parameters: {
+        docs: {
+            page: ReadmeMdx,
+        },
+    },
+    tags: ["autodocs"],
+};
+const Template = ({ open }) => html `
+  <voa-drawer .open="${open}">
+    <p>Drawer content goes here.</p>
+  </voa-drawer>
+`;
+export const Default = Template.bind({});
+Default.args = {
+    open: false,
+};
+//# sourceMappingURL=drawer.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.stories.js","sourceRoot":"","sources":["../../../src/components/voa-drawer/drawer.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,OAAO,SAAS,MAAM,cAAc,CAAC;AAErC,eAAe;IACb,KAAK,EAAE,2BAA2B;IAClC,SAAS,EAAE,YAAY;IACvB,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KAC7B;IACD,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,IAAI,EAAE,SAAS;SAChB;KACF;IACD,IAAI,EAAE,CAAC,UAAU,CAAC;CACX,CAAC;AAEV,MAAM,QAAQ,GAAY,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA;uBACrB,IAAI;;;CAG1B,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,KAAK;CACZ,CAAC","sourcesContent":["import { html } from \"lit-html\";\r\nimport { Meta, StoryFn } from \"@storybook/web-components\";\r\nimport ReadmeMdx from \"./README.mdx\";\r\n\r\nexport default {\r\n  title: \"Componentes/Layout/Drawer\",\r\n  component: \"voa-drawer\",\r\n  argTypes: {\r\n    open: { control: \"boolean\" },\r\n  },\r\n  parameters: {\r\n    docs: {\r\n      page: ReadmeMdx,\r\n    },\r\n  },\r\n  tags: [\"autodocs\"],\r\n} as Meta;\r\n\r\nconst Template: StoryFn = ({ open }) => html`\r\n  <voa-drawer .open=\"${open}\">\r\n    <p>Drawer content goes here.</p>\r\n  </voa-drawer>\r\n`;\r\n\r\nexport const Default = Template.bind({});\r\nDefault.args = {\r\n  open: false,\r\n};\r\n"]}

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

@@ -0,0 +1,36 @@
+.dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+.dropdown-button {
+  padding: 10px 20px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  background-color: #fff;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.dropdown-list {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  background-color: #fff;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  z-index: 1;
+}
+
+.dropdown-list li {
+  padding: 10px;
+  cursor: pointer;
+}
+
+.dropdown-list li:hover {
+  background-color: #f4f4f4;
+}