voa-ds-core 1.0.3

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

@@ -0,0 +1,581 @@
+import { html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+import "../../Stories/styles/voa-select.external.css";
+/**
+ * Componente Select do Voa Design System.
+ * * Baseado no design do Figma: https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=607-1011&m=dev
+ * * 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/Formulários/Select",
+    tags: ['autodocs'],
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=607-1011&m=dev',
+        },
+        actions: {
+            handles: ['dsChange'], // Tells Storybook to listen to this custom event
+        },
+    },
+    // Mapping args to Lit template
+    render: (args) => html `
+    <voa-select
+      .type=${ifDefined(args.type)}
+      .label=${ifDefined(args.label)}
+      ?showLabel=${args.showLabel}
+      ?info=${args.info}
+      .infoMessage=${ifDefined(args.infoMessage)}
+      ?error=${args.error}
+      .errorMessage=${ifDefined(args.errorMessage)}
+      .placeholder=${ifDefined(args.placeholder)}
+      ?disabled=${args.disabled}
+      .options=${ifDefined(args.options)}
+      .value=${ifDefined(args.value)}
+      @dsChange=${args.onDsChange}
+    >
+      ${args.hasIcon
+        ? html `<svg slot="icon" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 12C13.1 12 14 11.1 14 10C14 8.9 13.1 8 12 8C10.9 8 10 8.9 10 10C10 11.1 10.9 12 12 12ZM12 14C10.67 14 8 14.67 8 16V18H16V16C16 14.67 13.33 14 12 14Z" fill="currentColor"/></svg>`
+        : ''}
+    </voa-select>
+  `,
+    argTypes: {
+        type: {
+            control: 'select',
+            options: ['simple', 'multi'],
+            description: 'Tipo de seleção: simple (única) ou multi (múltipla)',
+        },
+        // Map the event to an action in the UI
+        onDsChange: { action: 'dsChange' },
+        label: { control: 'text' },
+        showLabel: { control: 'boolean' },
+        info: { control: 'boolean' },
+        infoMessage: { control: 'text' },
+        error: { control: 'boolean' },
+        errorMessage: { control: 'text' },
+        placeholder: { control: 'text' },
+        disabled: { control: 'boolean' },
+        hasIcon: { control: 'boolean' },
+        value: { control: 'object' },
+        options: { control: 'object' }
+    },
+    args: {
+        type: 'simple',
+        label: 'Nome do campo',
+        showLabel: true,
+        info: false,
+        infoMessage: 'Informação adicional',
+        error: false,
+        errorMessage: 'Mensagem',
+        placeholder: 'Placeholder',
+        disabled: false,
+        hasIcon: false,
+        options: [
+            { value: '1', label: 'Opção 1' },
+            { value: '2', label: 'Opção 2' },
+            { value: '3', label: 'Opção 3' },
+        ],
+    },
+};
+export default meta;
+// ============================================
+// Simple Select - Estados
+// ============================================
+export const SimpleDefault = {
+    args: {
+        type: 'simple',
+        options: [
+            { value: '1', label: 'Opção 1' },
+            { value: '2', label: 'Opção 2' },
+            { value: '3', label: 'Opção 3' },
+        ],
+    },
+};
+export const SimpleSelected = {
+    args: Object.assign(Object.assign({}, SimpleDefault.args), { value: '1' }),
+};
+export const SimpleFilled = {
+    args: Object.assign(Object.assign({}, SimpleDefault.args), { value: '2', options: [
+            { value: '1', label: 'Opção 1' },
+            { value: '2', label: 'Input' },
+            { value: '3', label: 'Opção 3' },
+        ] }),
+};
+export const SimpleFocused = {
+    args: Object.assign({}, SimpleDefault.args),
+    parameters: {
+        docs: {
+            description: {
+                story: 'Clique no campo para ver o estado de foco (borda azul + shadow interno)',
+            },
+        },
+    },
+};
+export const SimpleDisabled = {
+    args: Object.assign(Object.assign({}, SimpleDefault.args), { disabled: true }),
+};
+// ============================================
+// Multi Select - Estados
+// ============================================
+const multiOptions = [
+    { id: '1', label: 'Item 1' },
+    { id: '2', label: 'Item 2' },
+    { id: '3', label: 'Item 3' },
+];
+export const MultiDefault = {
+    args: {
+        type: 'multi',
+        options: multiOptions,
+    },
+};
+export const MultiSelected = {
+    args: {
+        type: 'multi',
+        value: ['1'],
+        options: [
+            { id: '1', label: 'Item 1', selected: true },
+            { id: '2', label: 'Item 2' },
+            { id: '3', label: 'Item 3' },
+        ],
+    },
+};
+export const MultiFilled = {
+    args: {
+        type: 'multi',
+        value: ['1', '2'],
+        options: [
+            { id: '1', label: 'Item 1', selected: true },
+            { id: '2', label: 'Item 2', selected: true },
+            { id: '3', label: 'Item 3' },
+        ],
+    },
+};
+export const MultiFocused = {
+    args: {
+        type: 'multi',
+        options: multiOptions,
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Clique no campo para ver o estado de foco (borda azul + shadow interno)',
+            },
+        },
+    },
+};
+export const MultiDisabled = {
+    args: {
+        type: 'multi',
+        disabled: true,
+        options: multiOptions,
+    },
+};
+// ============================================
+// Variantes Visuais
+// ============================================
+export const WithIcon = {
+    args: Object.assign(Object.assign({}, SimpleDefault.args), { hasIcon: true }),
+};
+export const MultiWithIcon = {
+    args: Object.assign(Object.assign({}, MultiDefault.args), { hasIcon: true }),
+};
+export const WithInfo = {
+    args: Object.assign(Object.assign({}, SimpleDefault.args), { info: true, infoMessage: 'Informação adicional importante' }),
+};
+export const WithError = {
+    args: Object.assign(Object.assign({}, SimpleDefault.args), { error: true, errorMessage: 'Este campo é obrigatório' }),
+};
+export const MultiWithError = {
+    args: Object.assign(Object.assign({}, MultiDefault.args), { error: true, errorMessage: 'Selecione pelo menos uma opção' }),
+};
+// ============================================
+// Todas as Variantes (Grid)
+// ============================================
+export const AllStates = {
+    render: () => {
+        const states = [
+            { name: 'Simple Default', type: 'simple', value: undefined },
+            { name: 'Simple Selected', type: 'simple', value: '1' },
+            { name: 'Simple Filled', type: 'simple', value: '2' },
+            { name: 'Simple Focused', type: 'simple', value: undefined },
+            { name: 'Simple Disabled', type: 'simple', value: undefined, disabled: true },
+            { name: 'Multi Default', type: 'multi', value: undefined },
+            { name: 'Multi Selected', type: 'multi', value: ['1'] },
+            { name: 'Multi Filled', type: 'multi', value: ['1', '2'] },
+            { name: 'Multi Focused', type: 'multi', value: undefined },
+            { name: 'Multi Disabled', type: 'multi', value: undefined, disabled: true },
+        ];
+        return html `
+      <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; width: 100%; max-width: 900px;">
+        ${states.map(state => {
+            // Determine options based on type
+            const options = state.type === 'simple'
+                ? [{ value: '1', label: 'Opção 1' }, { value: '2', label: 'Input' }, { value: '3', label: 'Opção 3' }]
+                : [{ id: '1', label: 'Item 1' }, { id: '2', label: 'Item 2' }, { id: '3', label: 'Item 3' }];
+            return html `
+             <div>
+               <p style="margin-bottom: 8px; font-weight: 600; font-size: 14px;">${state.name}</p>
+               <voa-select
+                 .type=${state.type}
+                 label="Nome do campo"
+                 placeholder="Placeholder"
+                 ?disabled=${state.disabled}
+                 .options=${options}
+                 .value=${state.value}
+               ></voa-select>
+             </div>
+           `;
+        })}
+      </div>
+    `;
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Grid mostrando todos os estados do componente Select renderizados via Lit.',
+            },
+        },
+    },
+};
+// ============================================
+// Usage - Exemplos de Código
+// ============================================
+export const Usage = {
+    parameters: {
+        docs: {
+            source: { state: 'open' }, // Forces the code view to be open by default in 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
+<!-- Select simples -->
+<voa-select 
+  label="Selecione uma opção" 
+  type="simple" 
+  placeholder="Escolha..."
+  ondsChange={(e) => console.log('Selected:', e.detail)}
+></voa-select>
+
+<script>
+  const select = document.querySelector('voa-select');
+  select.options = [
+    { value: '1', label: 'Opção 1' },
+    { value: '2', label: 'Opção 2' },
+    { value: '3', label: 'Opção 3' }
+  ];
+</script>
+
+<!-- Multi Select -->
+<voa-select 
+  label="Selecione múltiplas opções" 
+  type="multi" 
+  placeholder="Escolha..."
+></voa-select>
+
+<script>
+  const multiSelect = document.querySelector('voa-select[type="multi"]');
+  multiSelect.options = [
+    { id: '1', label: 'Item 1' },
+    { id: '2', label: 'Item 2' },
+    { id: '3', label: 'Item 3' }
+  ];
+</script>
+
+<!-- Select com erro -->
+<voa-select 
+  label="Campo obrigatório" 
+  type="simple" 
+  error
+  error-message="Este campo é obrigatório"
+></voa-select>
+
+<!-- Select desabilitado -->
+<voa-select 
+  label="Campo desabilitado" 
+  type="simple" 
+  disabled
+></voa-select>
+\`\`\`
+
+### React
+
+\`\`\`tsx
+import { VoaSelect } from '@voa-ds/react';
+import { useState } from 'react';
+
+function MyComponent() {
+  const [value, setValue] = useState<string | undefined>();
+  const [multiValue, setMultiValue] = useState<string[]>([]);
+
+  const simpleOptions = [
+    { value: '1', label: 'Opção 1' },
+    { value: '2', label: 'Opção 2' },
+    { value: '3', label: 'Opção 3' }
+  ];
+
+  const multiOptions = [
+    { id: '1', label: 'Item 1' },
+    { id: '2', label: 'Item 2' },
+    { id: '3', label: 'Item 3' }
+  ];
+
+  return (
+    <>
+      {/* Select simples */}
+      <VoaSelect
+        label="Selecione uma opção"
+        type="simple"
+        placeholder="Escolha..."
+        options={simpleOptions}
+        value={value}
+        onDsChange={(e) => setValue(e.detail)}
+      />
+
+      {/* Multi Select */}
+      <VoaSelect
+        label="Selecione múltiplas opções"
+        type="multi"
+        placeholder="Escolha..."
+        options={multiOptions}
+        value={multiValue}
+        onDsChange={(e) => setMultiValue(e.detail)}
+      />
+
+      {/* Select com erro */}
+      <VoaSelect
+        label="Campo obrigatório"
+        type="simple"
+        options={simpleOptions}
+        error
+        errorMessage="Este campo é obrigatório"
+      />
+
+      {/* Select desabilitado */}
+      <VoaSelect
+        label="Campo desabilitado"
+        type="simple"
+        options={simpleOptions}
+        disabled
+      />
+    </>
+  );
+}
+\`\`\`
+
+### Angular
+
+\`\`\`typescript
+import { VoaSelect } from '@voa-ds/angular';
+
+@Component({
+  selector: 'app-example',
+  template: \`
+    <!-- Select simples -->
+    <voa-select
+      [label]="'Selecione uma opção'"
+      [type]="'simple'"
+      [placeholder]="'Escolha...'"
+      [options]="simpleOptions"
+      [value]="value"
+      (dsChange)="handleChange($event)"
+    ></voa-select>
+
+    <!-- Multi Select -->
+    <voa-select
+      [label]="'Selecione múltiplas opções'"
+      [type]="'multi'"
+      [placeholder]="'Escolha...'"
+      [options]="multiOptions"
+      [value]="multiValue"
+      (dsChange)="handleMultiChange($event)"
+    ></voa-select>
+
+    <!-- Select com erro -->
+    <voa-select
+      [label]="'Campo obrigatório'"
+      [type]="'simple'"
+      [options]="simpleOptions"
+      [error]="true"
+      [errorMessage]="'Este campo é obrigatório'"
+    ></voa-select>
+
+    <!-- Select desabilitado -->
+    <voa-select
+      [label]="'Campo desabilitado'"
+      [type]="'simple'"
+      [options]="simpleOptions"
+      [disabled]="true"
+    ></voa-select>
+  \`
+})
+export class ExampleComponent {
+  value: string | undefined;
+  multiValue: string[] = [];
+
+  simpleOptions = [
+    { value: '1', label: 'Opção 1' },
+    { value: '2', label: 'Opção 2' },
+    { value: '3', label: 'Opção 3' }
+  ];
+
+  multiOptions = [
+    { id: '1', label: 'Item 1' },
+    { id: '2', label: 'Item 2' },
+    { id: '3', label: 'Item 3' }
+  ];
+
+  handleChange(event: CustomEvent) {
+    this.value = event.detail;
+    console.log('Selected:', event.detail);
+  }
+
+  handleMultiChange(event: CustomEvent) {
+    this.multiValue = event.detail;
+    console.log('Selected:', event.detail);
+  }
+}
+\`\`\`
+
+### Vue
+
+\`\`\`vue
+<template>
+  <div>
+    <!-- Select simples -->
+    <VoaSelect
+      label="Selecione uma opção"
+      type="simple"
+      placeholder="Escolha..."
+      :options="simpleOptions"
+      :value="value"
+      @dsChange="handleChange"
+    />
+
+    <!-- Multi Select -->
+    <VoaSelect
+      label="Selecione múltiplas opções"
+      type="multi"
+      placeholder="Escolha..."
+      :options="multiOptions"
+      :value="multiValue"
+      @dsChange="handleMultiChange"
+    />
+
+    <!-- Select com erro -->
+    <VoaSelect
+      label="Campo obrigatório"
+      type="simple"
+      :options="simpleOptions"
+      :error="true"
+      error-message="Este campo é obrigatório"
+    />
+
+    <!-- Select desabilitado -->
+    <VoaSelect
+      label="Campo desabilitado"
+      type="simple"
+      :options="simpleOptions"
+      :disabled="true"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { VoaSelect } from '@voa-ds/vue';
+
+const value = ref<string | undefined>();
+const multiValue = ref<string[]>([]);
+
+const simpleOptions = [
+  { value: '1', label: 'Opção 1' },
+  { value: '2', label: 'Opção 2' },
+  { value: '3', label: 'Opção 3' }
+];
+
+const multiOptions = [
+  { id: '1', label: 'Item 1' },
+  { id: '2', label: 'Item 2' },
+  { id: '3', label: 'Item 3' }
+];
+
+const handleChange = (event: CustomEvent) => {
+  value.value = event.detail;
+  console.log('Selected:', event.detail);
+};
+
+const handleMultiChange = (event: CustomEvent) => {
+  multiValue.value = event.detail;
+  console.log('Selected:', 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: () => html `
+    <div style="padding: 2rem; max-width: 100%;">
+      <h2 style="margin-top: 0; margin-bottom: 1.5rem; font-size: 1.5rem; font-weight: 600;">
+        Uso do Componente
+      </h2>
+      
+      <p style="margin-bottom: 2rem; color: #666;">
+        Este componente pode ser usado em diferentes frameworks. Abaixo estão exemplos de código para cada um:
+      </p>
+
+      <h3 style="margin-top: 2rem; margin-bottom: 1rem; font-size: 1.25rem; font-weight: 600;">
+        Exemplo Interativo
+      </h3>
+
+      <voa-select
+        label="Exemplo de Uso"
+        placeholder="Escolha..."
+        type="simple"
+        .options=${[{ value: 'op1', label: 'Opção 1' }, { value: 'op2', label: 'Opção 2' }]}
+        style="margin-bottom: 2rem;"
+      ></voa-select>
+      
+      <div style="margin-top: 2rem; padding: 1rem; background: #f5f5f5; border-radius: 4px; border-left: 4px solid #0064cb;">
+        <p style="margin: 0; font-weight: 600; margin-bottom: 0.5rem;">📚 Documentação Completa</p>
+        <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-voaselect--docs#usage" style="color: #0064cb; text-decoration: none; font-weight: 600;">clique aqui para ir à página Docs</a>.
+        </p>
+      </div>
+    </div>
+  `
+};
+//# sourceMappingURL=voa-select.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"voa-select.stories.js","sourceRoot":"","sources":["../../../src/components/voa-select/voa-select.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryObj } from '@storybook/web-components';\r\nimport { html } from 'lit';\r\nimport { ifDefined } from 'lit/directives/if-defined.js';\r\nimport '../../Stories/styles/voa-select.external.css';\r\n\r\n/**\r\n * Componente Select do Voa Design System.\r\n * * Baseado no design do Figma: https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=607-1011&m=dev\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/Formulários/Select\",\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=607-1011&m=dev',\r\n    },\r\n    actions: {\r\n      handles: ['dsChange'], // Tells Storybook to listen to this custom event\r\n    },\r\n  },\r\n  // Mapping args to Lit template\r\n  render: (args: any) => html`\r\n    <voa-select\r\n      .type=${ifDefined(args.type)}\r\n      .label=${ifDefined(args.label)}\r\n      ?showLabel=${args.showLabel}\r\n      ?info=${args.info}\r\n      .infoMessage=${ifDefined(args.infoMessage)}\r\n      ?error=${args.error}\r\n      .errorMessage=${ifDefined(args.errorMessage)}\r\n      .placeholder=${ifDefined(args.placeholder)}\r\n      ?disabled=${args.disabled}\r\n      .options=${ifDefined(args.options)}\r\n      .value=${ifDefined(args.value)}\r\n      @dsChange=${args.onDsChange}\r\n    >\r\n      ${args.hasIcon \r\n        ? html`<svg slot=\"icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M12 12C13.1 12 14 11.1 14 10C14 8.9 13.1 8 12 8C10.9 8 10 8.9 10 10C10 11.1 10.9 12 12 12ZM12 14C10.67 14 8 14.67 8 16V18H16V16C16 14.67 13.33 14 12 14Z\" fill=\"currentColor\"/></svg>` \r\n        : ''}\r\n    </voa-select>\r\n  `,\r\n  argTypes: {\r\n    type: {\r\n      control: 'select',\r\n      options: ['simple', 'multi'],\r\n      description: 'Tipo de seleção: simple (única) ou multi (múltipla)',\r\n    },\r\n    // Map the event to an action in the UI\r\n    onDsChange: { action: 'dsChange' },\r\n    label: { control: 'text' },\r\n    showLabel: { control: 'boolean' },\r\n    info: { control: 'boolean' },\r\n    infoMessage: { control: 'text' },\r\n    error: { control: 'boolean' },\r\n    errorMessage: { control: 'text' },\r\n    placeholder: { control: 'text' },\r\n    disabled: { control: 'boolean' },\r\n    hasIcon: { control: 'boolean' },\r\n    value: { control: 'object' }, \r\n    options: { control: 'object' }\r\n  },\r\n  args: {\r\n    type: 'simple',\r\n    label: 'Nome do campo',\r\n    showLabel: true,\r\n    info: false,\r\n    infoMessage: 'Informação adicional',\r\n    error: false,\r\n    errorMessage: 'Mensagem',\r\n    placeholder: 'Placeholder',\r\n    disabled: false,\r\n    hasIcon: false,\r\n    options: [\r\n      { value: '1', label: 'Opção 1' },\r\n      { value: '2', label: 'Opção 2' },\r\n      { value: '3', label: 'Opção 3' },\r\n    ],\r\n  },\r\n} satisfies Meta;\r\n\r\nexport default meta;\r\n\r\ntype Story = StoryObj;\r\n\r\n// ============================================\r\n// Simple Select - Estados\r\n// ============================================\r\n\r\nexport const SimpleDefault: Story = {\r\n  args: {\r\n    type: 'simple',\r\n    options: [\r\n      { value: '1', label: 'Opção 1' },\r\n      { value: '2', label: 'Opção 2' },\r\n      { value: '3', label: 'Opção 3' },\r\n    ],\r\n  },\r\n};\r\n\r\nexport const SimpleSelected: Story = {\r\n  args: {\r\n    ...SimpleDefault.args,\r\n    value: '1',\r\n  },\r\n};\r\n\r\nexport const SimpleFilled: Story = {\r\n  args: {\r\n    ...SimpleDefault.args,\r\n    value: '2',\r\n    options: [\r\n      { value: '1', label: 'Opção 1' },\r\n      { value: '2', label: 'Input' },\r\n      { value: '3', label: 'Opção 3' },\r\n    ],\r\n  },\r\n};\r\n\r\nexport const SimpleFocused: Story = {\r\n  args: { ...SimpleDefault.args },\r\n  parameters: {\r\n    docs: {\r\n      description: {\r\n        story: 'Clique no campo para ver o estado de foco (borda azul + shadow interno)',\r\n      },\r\n    },\r\n  },\r\n};\r\n\r\nexport const SimpleDisabled: Story = {\r\n  args: {\r\n    ...SimpleDefault.args,\r\n    disabled: true,\r\n  },\r\n};\r\n\r\n// ============================================\r\n// Multi Select - Estados\r\n// ============================================\r\n\r\nconst multiOptions = [\r\n  { id: '1', label: 'Item 1' },\r\n  { id: '2', label: 'Item 2' },\r\n  { id: '3', label: 'Item 3' },\r\n];\r\n\r\nexport const MultiDefault: Story = {\r\n  args: {\r\n    type: 'multi',\r\n    options: multiOptions,\r\n  },\r\n};\r\n\r\nexport const MultiSelected: Story = {\r\n  args: {\r\n    type: 'multi',\r\n    value: ['1'],\r\n    options: [\r\n      { id: '1', label: 'Item 1', selected: true },\r\n      { id: '2', label: 'Item 2' },\r\n      { id: '3', label: 'Item 3' },\r\n    ],\r\n  },\r\n};\r\n\r\nexport const MultiFilled: Story = {\r\n  args: {\r\n    type: 'multi',\r\n    value: ['1', '2'],\r\n    options: [\r\n      { id: '1', label: 'Item 1', selected: true },\r\n      { id: '2', label: 'Item 2', selected: true },\r\n      { id: '3', label: 'Item 3' },\r\n    ],\r\n  },\r\n};\r\n\r\nexport const MultiFocused: Story = {\r\n  args: {\r\n    type: 'multi',\r\n    options: multiOptions,\r\n  },\r\n  parameters: {\r\n    docs: {\r\n      description: {\r\n        story: 'Clique no campo para ver o estado de foco (borda azul + shadow interno)',\r\n      },\r\n    },\r\n  },\r\n};\r\n\r\nexport const MultiDisabled: Story = {\r\n  args: {\r\n    type: 'multi',\r\n    disabled: true,\r\n    options: multiOptions,\r\n  },\r\n};\r\n\r\n// ============================================\r\n// Variantes Visuais\r\n// ============================================\r\n\r\nexport const WithIcon: Story = {\r\n  args: {\r\n    ...SimpleDefault.args,\r\n    hasIcon: true,\r\n  },\r\n};\r\n\r\nexport const MultiWithIcon: Story = {\r\n  args: {\r\n    ...MultiDefault.args,\r\n    hasIcon: true,\r\n  },\r\n};\r\n\r\nexport const WithInfo: Story = {\r\n  args: {\r\n    ...SimpleDefault.args,\r\n    info: true,\r\n    infoMessage: 'Informação adicional importante',\r\n  },\r\n};\r\n\r\nexport const WithError: Story = {\r\n  args: {\r\n    ...SimpleDefault.args,\r\n    error: true,\r\n    errorMessage: 'Este campo é obrigatório',\r\n  },\r\n};\r\n\r\nexport const MultiWithError: Story = {\r\n  args: {\r\n    ...MultiDefault.args,\r\n    error: true,\r\n    errorMessage: 'Selecione pelo menos uma opção',\r\n  },\r\n};\r\n\r\n// ============================================\r\n// Todas as Variantes (Grid)\r\n// ============================================\r\n\r\nexport const AllStates: Story = {\r\n  render: () => {\r\n    const states = [\r\n      { name: 'Simple Default', type: 'simple', value: undefined },\r\n      { name: 'Simple Selected', type: 'simple', value: '1' },\r\n      { name: 'Simple Filled', type: 'simple', value: '2' },\r\n      { name: 'Simple Focused', type: 'simple', value: undefined },\r\n      { name: 'Simple Disabled', type: 'simple', value: undefined, disabled: true },\r\n      { name: 'Multi Default', type: 'multi', value: undefined },\r\n      { name: 'Multi Selected', type: 'multi', value: ['1'] },\r\n      { name: 'Multi Filled', type: 'multi', value: ['1', '2'] },\r\n      { name: 'Multi Focused', type: 'multi', value: undefined },\r\n      { name: 'Multi Disabled', type: 'multi', value: undefined, disabled: true },\r\n    ];\r\n\r\n    return html`\r\n      <div style=\"display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; width: 100%; max-width: 900px;\">\r\n        ${states.map(state => {\r\n           // Determine options based on type\r\n           const options = state.type === 'simple' \r\n             ? [{ value: '1', label: 'Opção 1' }, { value: '2', label: 'Input' }, { value: '3', label: 'Opção 3' }]\r\n             : [{ id: '1', label: 'Item 1' }, { id: '2', label: 'Item 2' }, { id: '3', label: 'Item 3' }];\r\n\r\n           return html`\r\n             <div>\r\n               <p style=\"margin-bottom: 8px; font-weight: 600; font-size: 14px;\">${state.name}</p>\r\n               <voa-select\r\n                 .type=${state.type}\r\n                 label=\"Nome do campo\"\r\n                 placeholder=\"Placeholder\"\r\n                 ?disabled=${state.disabled}\r\n                 .options=${options}\r\n                 .value=${state.value}\r\n               ></voa-select>\r\n             </div>\r\n           `;\r\n        })}\r\n      </div>\r\n    `;\r\n  },\r\n  parameters: {\r\n    docs: {\r\n      description: {\r\n        story: 'Grid mostrando todos os estados do componente Select renderizados via Lit.',\r\n      },\r\n    },\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      source: { state: 'open' }, // Forces the code view to be open by default in 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<!-- Select simples -->\r\n<voa-select \r\n  label=\"Selecione uma opção\" \r\n  type=\"simple\" \r\n  placeholder=\"Escolha...\"\r\n  ondsChange={(e) => console.log('Selected:', e.detail)}\r\n></voa-select>\r\n\r\n<script>\r\n  const select = document.querySelector('voa-select');\r\n  select.options = [\r\n    { value: '1', label: 'Opção 1' },\r\n    { value: '2', label: 'Opção 2' },\r\n    { value: '3', label: 'Opção 3' }\r\n  ];\r\n</script>\r\n\r\n<!-- Multi Select -->\r\n<voa-select \r\n  label=\"Selecione múltiplas opções\" \r\n  type=\"multi\" \r\n  placeholder=\"Escolha...\"\r\n></voa-select>\r\n\r\n<script>\r\n  const multiSelect = document.querySelector('voa-select[type=\"multi\"]');\r\n  multiSelect.options = [\r\n    { id: '1', label: 'Item 1' },\r\n    { id: '2', label: 'Item 2' },\r\n    { id: '3', label: 'Item 3' }\r\n  ];\r\n</script>\r\n\r\n<!-- Select com erro -->\r\n<voa-select \r\n  label=\"Campo obrigatório\" \r\n  type=\"simple\" \r\n  error\r\n  error-message=\"Este campo é obrigatório\"\r\n></voa-select>\r\n\r\n<!-- Select desabilitado -->\r\n<voa-select \r\n  label=\"Campo desabilitado\" \r\n  type=\"simple\" \r\n  disabled\r\n></voa-select>\r\n\\`\\`\\`\r\n\r\n### React\r\n\r\n\\`\\`\\`tsx\r\nimport { VoaSelect } from '@voa-ds/react';\r\nimport { useState } from 'react';\r\n\r\nfunction MyComponent() {\r\n  const [value, setValue] = useState<string | undefined>();\r\n  const [multiValue, setMultiValue] = useState<string[]>([]);\r\n\r\n  const simpleOptions = [\r\n    { value: '1', label: 'Opção 1' },\r\n    { value: '2', label: 'Opção 2' },\r\n    { value: '3', label: 'Opção 3' }\r\n  ];\r\n\r\n  const multiOptions = [\r\n    { id: '1', label: 'Item 1' },\r\n    { id: '2', label: 'Item 2' },\r\n    { id: '3', label: 'Item 3' }\r\n  ];\r\n\r\n  return (\r\n    <>\r\n      {/* Select simples */}\r\n      <VoaSelect\r\n        label=\"Selecione uma opção\"\r\n        type=\"simple\"\r\n        placeholder=\"Escolha...\"\r\n        options={simpleOptions}\r\n        value={value}\r\n        onDsChange={(e) => setValue(e.detail)}\r\n      />\r\n\r\n      {/* Multi Select */}\r\n      <VoaSelect\r\n        label=\"Selecione múltiplas opções\"\r\n        type=\"multi\"\r\n        placeholder=\"Escolha...\"\r\n        options={multiOptions}\r\n        value={multiValue}\r\n        onDsChange={(e) => setMultiValue(e.detail)}\r\n      />\r\n\r\n      {/* Select com erro */}\r\n      <VoaSelect\r\n        label=\"Campo obrigatório\"\r\n        type=\"simple\"\r\n        options={simpleOptions}\r\n        error\r\n        errorMessage=\"Este campo é obrigatório\"\r\n      />\r\n\r\n      {/* Select desabilitado */}\r\n      <VoaSelect\r\n        label=\"Campo desabilitado\"\r\n        type=\"simple\"\r\n        options={simpleOptions}\r\n        disabled\r\n      />\r\n    </>\r\n  );\r\n}\r\n\\`\\`\\`\r\n\r\n### Angular\r\n\r\n\\`\\`\\`typescript\r\nimport { VoaSelect } from '@voa-ds/angular';\r\n\r\n@Component({\r\n  selector: 'app-example',\r\n  template: \\`\r\n    <!-- Select simples -->\r\n    <voa-select\r\n      [label]=\"'Selecione uma opção'\"\r\n      [type]=\"'simple'\"\r\n      [placeholder]=\"'Escolha...'\"\r\n      [options]=\"simpleOptions\"\r\n      [value]=\"value\"\r\n      (dsChange)=\"handleChange($event)\"\r\n    ></voa-select>\r\n\r\n    <!-- Multi Select -->\r\n    <voa-select\r\n      [label]=\"'Selecione múltiplas opções'\"\r\n      [type]=\"'multi'\"\r\n      [placeholder]=\"'Escolha...'\"\r\n      [options]=\"multiOptions\"\r\n      [value]=\"multiValue\"\r\n      (dsChange)=\"handleMultiChange($event)\"\r\n    ></voa-select>\r\n\r\n    <!-- Select com erro -->\r\n    <voa-select\r\n      [label]=\"'Campo obrigatório'\"\r\n      [type]=\"'simple'\"\r\n      [options]=\"simpleOptions\"\r\n      [error]=\"true\"\r\n      [errorMessage]=\"'Este campo é obrigatório'\"\r\n    ></voa-select>\r\n\r\n    <!-- Select desabilitado -->\r\n    <voa-select\r\n      [label]=\"'Campo desabilitado'\"\r\n      [type]=\"'simple'\"\r\n      [options]=\"simpleOptions\"\r\n      [disabled]=\"true\"\r\n    ></voa-select>\r\n  \\`\r\n})\r\nexport class ExampleComponent {\r\n  value: string | undefined;\r\n  multiValue: string[] = [];\r\n\r\n  simpleOptions = [\r\n    { value: '1', label: 'Opção 1' },\r\n    { value: '2', label: 'Opção 2' },\r\n    { value: '3', label: 'Opção 3' }\r\n  ];\r\n\r\n  multiOptions = [\r\n    { id: '1', label: 'Item 1' },\r\n    { id: '2', label: 'Item 2' },\r\n    { id: '3', label: 'Item 3' }\r\n  ];\r\n\r\n  handleChange(event: CustomEvent) {\r\n    this.value = event.detail;\r\n    console.log('Selected:', event.detail);\r\n  }\r\n\r\n  handleMultiChange(event: CustomEvent) {\r\n    this.multiValue = event.detail;\r\n    console.log('Selected:', 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    <!-- Select simples -->\r\n    <VoaSelect\r\n      label=\"Selecione uma opção\"\r\n      type=\"simple\"\r\n      placeholder=\"Escolha...\"\r\n      :options=\"simpleOptions\"\r\n      :value=\"value\"\r\n      @dsChange=\"handleChange\"\r\n    />\r\n\r\n    <!-- Multi Select -->\r\n    <VoaSelect\r\n      label=\"Selecione múltiplas opções\"\r\n      type=\"multi\"\r\n      placeholder=\"Escolha...\"\r\n      :options=\"multiOptions\"\r\n      :value=\"multiValue\"\r\n      @dsChange=\"handleMultiChange\"\r\n    />\r\n\r\n    <!-- Select com erro -->\r\n    <VoaSelect\r\n      label=\"Campo obrigatório\"\r\n      type=\"simple\"\r\n      :options=\"simpleOptions\"\r\n      :error=\"true\"\r\n      error-message=\"Este campo é obrigatório\"\r\n    />\r\n\r\n    <!-- Select desabilitado -->\r\n    <VoaSelect\r\n      label=\"Campo desabilitado\"\r\n      type=\"simple\"\r\n      :options=\"simpleOptions\"\r\n      :disabled=\"true\"\r\n    />\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref } from 'vue';\r\nimport { VoaSelect } from '@voa-ds/vue';\r\n\r\nconst value = ref<string | undefined>();\r\nconst multiValue = ref<string[]>([]);\r\n\r\nconst simpleOptions = [\r\n  { value: '1', label: 'Opção 1' },\r\n  { value: '2', label: 'Opção 2' },\r\n  { value: '3', label: 'Opção 3' }\r\n];\r\n\r\nconst multiOptions = [\r\n  { id: '1', label: 'Item 1' },\r\n  { id: '2', label: 'Item 2' },\r\n  { id: '3', label: 'Item 3' }\r\n];\r\n\r\nconst handleChange = (event: CustomEvent) => {\r\n  value.value = event.detail;\r\n  console.log('Selected:', event.detail);\r\n};\r\n\r\nconst handleMultiChange = (event: CustomEvent) => {\r\n  multiValue.value = event.detail;\r\n  console.log('Selected:', 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: () => html`\r\n    <div style=\"padding: 2rem; max-width: 100%;\">\r\n      <h2 style=\"margin-top: 0; margin-bottom: 1.5rem; font-size: 1.5rem; font-weight: 600;\">\r\n        Uso do Componente\r\n      </h2>\r\n      \r\n      <p style=\"margin-bottom: 2rem; color: #666;\">\r\n        Este componente pode ser usado em diferentes frameworks. Abaixo estão exemplos de código para cada um:\r\n      </p>\r\n\r\n      <h3 style=\"margin-top: 2rem; margin-bottom: 1rem; font-size: 1.25rem; font-weight: 600;\">\r\n        Exemplo Interativo\r\n      </h3>\r\n\r\n      <voa-select\r\n        label=\"Exemplo de Uso\"\r\n        placeholder=\"Escolha...\"\r\n        type=\"simple\"\r\n        .options=${[{ value: 'op1', label: 'Opção 1' }, { value: 'op2', label: 'Opção 2' }]}\r\n        style=\"margin-bottom: 2rem;\"\r\n      ></voa-select>\r\n      \r\n      <div style=\"margin-top: 2rem; padding: 1rem; background: #f5f5f5; border-radius: 4px; border-left: 4px solid #0064cb;\">\r\n        <p style=\"margin: 0; font-weight: 600; margin-bottom: 0.5rem;\">📚 Documentação Completa</p>\r\n        <p style=\"margin: 0; color: #666; font-size: 0.9rem;\">\r\n          Para ver exemplos de código completos para HTML, React, Angular e Vue, \r\n          <a href=\"?path=/docs/components-voaselect--docs#usage\" style=\"color: #0064cb; text-decoration: none; font-weight: 600;\">clique aqui para ir à página Docs</a>.\r\n        </p>\r\n      </div>\r\n    </div>\r\n  `\r\n};"]}

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

@@ -0,0 +1,30 @@
+.skeleton{
+    border-radius: 2px;
+    display: inline-block;
+    line-height: 100%;
+    width: 100%;
+    background-color: #fff;
+    background-size: 1000px 1000px;
+    background-image: linear-gradient(
+        100deg,
+        #e8e8e8 20%,
+        #fafafa 50%,
+        #e8e8e8 60%
+    );
+    animation: placeholderShimmer 1.5s linear infinite forwards;
+}
+
+.skeleton--circle{
+    border-radius: 50%;
+}
+
+@keyframes placeholderShimmer{
+    0%{
+        background-position: -500px 0;
+    }
+    
+    100%{
+        background-position: 500px 0;
+    }
+
+}