voa-ds-core 1.0.3

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

@@ -0,0 +1,581 @@
+import { html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+import "../../Stories/styles/voa-option.external.css";
+/**
+ * **Option Component**
+ *
+ * Acts as a Radio Button. Should be used within a group logic.
+ *
+ * This is a standalone radio option component that manages its own checked state
+ * and syncs with the Native Form API via ElementInternals.
+ *
+ * Baseado no design do Figma:
+ * https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=442-9725
+ */
+const meta = {
+    title: "Componentes/Dados/Option",
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component: `
+**Option Component - Radio Button Pattern**
+
+Acts as a Radio Button. Should be used within a group logic.
+
+## CSS Parts
+- \`base\`: Root container
+- \`indicator\`: The outer circle
+- \`indicator-dot\`: The inner selected circle
+- \`label\`: Label text
+
+## Features
+- Manages internal checked state
+- Syncs with Native Form API
+- Delegated focus for accessibility
+- Keyboard support (Space, Enter)
+- Support for labels and slots
+        `
+            }
+        },
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=442-9725',
+        },
+    },
+    render: (args) => html `
+    <voa-option
+      ?checked=${args.checked}
+      ?disabled=${args.disabled}
+      .label=${ifDefined(args.label)}
+      .name=${ifDefined(args.name)}
+      .value=${ifDefined(args.value)}
+      @dsChange=${args.onDsChange}
+    ></voa-option>
+  `,
+    argTypes: {
+        checked: {
+            control: 'boolean',
+            description: 'If true, this option is selected'
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'If true, this option is disabled'
+        },
+        label: {
+            control: 'text',
+            description: 'The label text displayed next to the radio indicator'
+        },
+        name: {
+            control: 'text',
+            description: 'The name attribute for the radio group'
+        },
+        value: {
+            control: 'text',
+            description: 'The value returned when this option is selected'
+        },
+        onDsChange: {
+            action: 'dsChange',
+            description: 'Emitted when the user selects this option'
+        },
+    },
+    args: {
+        checked: false,
+        disabled: false,
+        label: 'Option Item',
+        name: 'demo-group',
+        value: 'opt-1'
+    },
+};
+export default meta;
+/**
+ * Default unchecked option with label
+ */
+export const Default = {};
+/**
+ * Checked option
+ */
+export const Checked = {
+    args: {
+        checked: true,
+    },
+};
+/**
+ * Disabled option
+ */
+export const Disabled = {
+    args: {
+        disabled: true,
+    },
+};
+/**
+ * Disabled and checked
+ */
+export const DisabledChecked = {
+    args: {
+        disabled: true,
+        checked: true,
+    },
+};
+/**
+ * Without label
+ */
+export const WithoutLabel = {
+    args: {
+        label: '',
+    },
+};
+/**
+ * Interactive radio group demo
+ */
+export const RadioGroupDemo = {
+    render: () => html `
+    <div style="display: flex; flex-direction: column; gap: 10px;">
+      <p style="margin-top: 0; font-weight: 600;">Select a plan:</p>
+      <voa-option name="plan" value="basic" label="Basic Plan"></voa-option>
+      <voa-option name="plan" value="pro" label="Pro Plan (Recommended)" ?checked=${true}></voa-option>
+      <voa-option name="plan" value="enterprise" label="Enterprise"></voa-option>
+    </div>
+    <script>
+      // Simple logic to mock radio group behavior for the demo
+      const container = document.currentScript.previousElementSibling;
+      const options = container.querySelectorAll('voa-option');
+      
+      options.forEach(opt => {
+        opt.addEventListener('dsChange', (e) => {
+          // Uncheck others
+          options.forEach(other => {
+            if (other !== opt) other.checked = false;
+          });
+        });
+      });
+    </script>
+  `
+};
+/**
+ * All visual states grid
+ */
+export const AllStates = {
+    render: () => html `
+    <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem;">
+      <!-- With Label Column -->
+      <div>
+        <h3 style="margin-top: 0;">With Label</h3>
+        <div style="display: flex; flex-direction: column; gap: 1.5rem;">
+          <div>
+            <p style="margin: 0 0 8px 0; font-size: 0.875rem; color: #666;">Default</p>
+            <voa-option name="with-label" value="default" label="Option"></voa-option>
+          </div>
+          <div>
+            <p style="margin: 0 0 8px 0; font-size: 0.875rem; color: #666;">Checked</p>
+            <voa-option name="with-label" value="checked" label="Option" ?checked=${true}></voa-option>
+          </div>
+          <div>
+            <p style="margin: 0 0 8px 0; font-size: 0.875rem; color: #666;">Disabled</p>
+            <voa-option name="with-label" value="disabled" label="Option" ?disabled=${true}></voa-option>
+          </div>
+          <div>
+            <p style="margin: 0 0 8px 0; font-size: 0.875rem; color: #666;">Disabled & Checked</p>
+            <voa-option name="with-label" value="disabled-checked" label="Option" ?disabled=${true} ?checked=${true}></voa-option>
+          </div>
+        </div>
+      </div>
+
+      <!-- Without Label Column -->
+      <div>
+        <h3 style="margin-top: 0;">Without Label</h3>
+        <div style="display: flex; flex-direction: column; gap: 1.5rem;">
+          <div>
+            <p style="margin: 0 0 8px 0; font-size: 0.875rem; color: #666;">Default</p>
+            <voa-option name="no-label" value="default"></voa-option>
+          </div>
+          <div>
+            <p style="margin: 0 0 8px 0; font-size: 0.875rem; color: #666;">Checked</p>
+            <voa-option name="no-label" value="checked" ?checked=${true}></voa-option>
+          </div>
+          <div>
+            <p style="margin: 0 0 8px 0; font-size: 0.875rem; color: #666;">Disabled</p>
+            <voa-option name="no-label" value="disabled" ?disabled=${true}></voa-option>
+          </div>
+          <div>
+            <p style="margin: 0 0 8px 0; font-size: 0.875rem; color: #666;">Disabled & Checked</p>
+            <voa-option name="no-label" value="disabled-checked" ?disabled=${true} ?checked=${true}></voa-option>
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+};
+/**
+ * Todas as variantes do Figma organizadas em grid
+ * Estados: default, hover, focused, disabled × Active: checked/unchecked × Label: com/sem
+ */
+export const AllVariants = {
+    render: () => html `
+    <div style="display: grid; grid-template-columns: repeat(2, auto); gap: 24px; align-items: start;">
+      <div style="display:flex;flex-direction:column;gap:16px;">
+        <h4 style="margin:0 0 8px 0">Com Label</h4>
+        <voa-option name="variants-with-label" value="default-unchecked" label="Opção"></voa-option>
+        <voa-option name="variants-with-label" value="default-checked" label="Opção" ?checked=${true}></voa-option>
+        <voa-option name="variants-with-label" value="hover-unchecked" label="Opção" style="cursor:pointer"></voa-option>
+        <voa-option name="variants-with-label" value="hover-checked" label="Opção" ?checked=${true} style="cursor:pointer"></voa-option>
+        <voa-option name="variants-with-label" value="focused-unchecked" label="Opção" tabindex="0"></voa-option>
+        <voa-option name="variants-with-label" value="focused-checked" label="Opção" ?checked=${true} tabindex="0"></voa-option>
+        <voa-option name="variants-with-label" value="disabled-unchecked" label="Opção" ?disabled=${true}></voa-option>
+        <voa-option name="variants-with-label" value="disabled-checked" label="Opção" ?checked=${true} ?disabled=${true}></voa-option>
+      </div>
+      <div style="display:flex;flex-direction:column;gap:16px;">
+        <h4 style="margin:0 0 8px 0">Sem Label</h4>
+        <voa-option name="variants-no-label" value="default-unchecked"></voa-option>
+        <voa-option name="variants-no-label" value="default-checked" ?checked=${true}></voa-option>
+        <voa-option name="variants-no-label" value="hover-unchecked" style="cursor:pointer"></voa-option>
+        <voa-option name="variants-no-label" value="hover-checked" ?checked=${true} style="cursor:pointer"></voa-option>
+        <voa-option name="variants-no-label" value="focused-unchecked" tabindex="0"></voa-option>
+        <voa-option name="variants-no-label" value="focused-checked" ?checked=${true} tabindex="0"></voa-option>
+        <voa-option name="variants-no-label" value="disabled-unchecked" ?disabled=${true}></voa-option>
+        <voa-option name="variants-no-label" value="disabled-checked" ?checked=${true} ?disabled=${true}></voa-option>
+      </div>
+    </div>
+  `,
+};
+/**
+ * Grupo de opções interativas
+ */
+export const Group = {
+    render: () => {
+        const container = document.createElement('div');
+        container.style.display = 'flex';
+        container.style.flexDirection = 'column';
+        container.style.gap = '12px';
+        const option1 = document.createElement('voa-option');
+        option1.name = 'group';
+        option1.value = 'opcao1';
+        option1.label = 'Primeira opção';
+        const option2 = document.createElement('voa-option');
+        option2.name = 'group';
+        option2.value = 'opcao2';
+        option2.label = 'Segunda opção';
+        option2.checked = true;
+        const option3 = document.createElement('voa-option');
+        option3.name = 'group';
+        option3.value = 'opcao3';
+        option3.label = 'Terceira opção';
+        const option4 = document.createElement('voa-option');
+        option4.name = 'group';
+        option4.value = 'opcao4';
+        option4.label = 'Opção desabilitada';
+        option4.disabled = true;
+        container.appendChild(option1);
+        container.appendChild(option2);
+        container.appendChild(option3);
+        container.appendChild(option4);
+        return container;
+    },
+};
+/**
+ * Estados visuais organizados
+ */
+export const VisualStates = {
+    render: () => {
+        const container = document.createElement('div');
+        container.style.display = 'grid';
+        container.style.gridTemplateColumns = 'repeat(4, auto)';
+        container.style.gap = '16px';
+        container.style.alignItems = 'center';
+        // Headers
+        const headers = ['Default', 'Hover', 'Focused', 'Disabled'];
+        headers.forEach((header) => {
+            const headerEl = document.createElement('h4');
+            headerEl.style.margin = '0';
+            headerEl.textContent = header;
+            container.appendChild(headerEl);
+        });
+        // Unchecked row
+        const defaultUnchecked = document.createElement('voa-option');
+        defaultUnchecked.name = 'visual-states';
+        defaultUnchecked.value = 'default-unchecked';
+        defaultUnchecked.label = 'Opção';
+        const hoverUnchecked = document.createElement('voa-option');
+        hoverUnchecked.name = 'visual-states';
+        hoverUnchecked.value = 'hover-unchecked';
+        hoverUnchecked.label = 'Opção';
+        hoverUnchecked.style.cursor = 'pointer';
+        const focusedUnchecked = document.createElement('voa-option');
+        focusedUnchecked.name = 'visual-states';
+        focusedUnchecked.value = 'focused-unchecked';
+        focusedUnchecked.label = 'Opção';
+        focusedUnchecked.setAttribute('tabindex', '0');
+        const disabledUnchecked = document.createElement('voa-option');
+        disabledUnchecked.name = 'visual-states';
+        disabledUnchecked.value = 'disabled-unchecked';
+        disabledUnchecked.label = 'Opção';
+        disabledUnchecked.disabled = true;
+        container.appendChild(defaultUnchecked);
+        container.appendChild(hoverUnchecked);
+        container.appendChild(focusedUnchecked);
+        container.appendChild(disabledUnchecked);
+        // Checked row
+        const defaultChecked = document.createElement('voa-option');
+        defaultChecked.name = 'visual-states-checked';
+        defaultChecked.value = 'default-checked';
+        defaultChecked.label = 'Opção';
+        defaultChecked.checked = true;
+        const hoverChecked = document.createElement('voa-option');
+        hoverChecked.name = 'visual-states-checked';
+        hoverChecked.value = 'hover-checked';
+        hoverChecked.label = 'Opção';
+        hoverChecked.checked = true;
+        hoverChecked.style.cursor = 'pointer';
+        const focusedChecked = document.createElement('voa-option');
+        focusedChecked.name = 'visual-states-checked';
+        focusedChecked.value = 'focused-checked';
+        focusedChecked.label = 'Opção';
+        focusedChecked.checked = true;
+        focusedChecked.setAttribute('tabindex', '0');
+        const disabledChecked = document.createElement('voa-option');
+        disabledChecked.name = 'visual-states-checked';
+        disabledChecked.value = 'disabled-checked';
+        disabledChecked.label = 'Opção';
+        disabledChecked.checked = true;
+        disabledChecked.disabled = true;
+        container.appendChild(defaultChecked);
+        container.appendChild(hoverChecked);
+        container.appendChild(focusedChecked);
+        container.appendChild(disabledChecked);
+        return container;
+    },
+};
+// ============================================
+// 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
+<!-- Opção básica -->
+<voa-option 
+  name="opcao"
+  value="opcao1"
+  label="Opção 1"
+  checked
+  onoptionChange={(e) => console.log('Changed', e.detail)}
+></voa-option>
+
+<!-- Grupo de opções -->
+<voa-option name="opcao" value="opcao1" label="Opção 1" checked></voa-option>
+<voa-option name="opcao" value="opcao2" label="Opção 2"></voa-option>
+<voa-option name="opcao" value="opcao3" label="Opção 3"></voa-option>
+\`\`\`
+
+### React
+
+\`\`\`tsx
+import { VoaOption } from '@voa-ds/react';
+import { useState } from 'react';
+
+function MyComponent() {
+  const [selected, setSelected] = useState('opcao1');
+
+  const handleChange = (e: CustomEvent<{ checked: boolean; value: string; name: string }>) => {
+    if (e.detail.checked) {
+      setSelected(e.detail.value);
+    }
+    console.log('Changed', e.detail);
+  };
+
+  return (
+    <>
+      {/* Grupo de opções */}
+      <VoaOption
+        name="opcao"
+        value="opcao1"
+        label="Opção 1"
+        checked={selected === 'opcao1'}
+        onOptionChange={handleChange}
+      />
+      <VoaOption
+        name="opcao"
+        value="opcao2"
+        label="Opção 2"
+        checked={selected === 'opcao2'}
+        onOptionChange={handleChange}
+      />
+      <VoaOption
+        name="opcao"
+        value="opcao3"
+        label="Opção 3"
+        checked={selected === 'opcao3'}
+        onOptionChange={handleChange}
+      />
+    </>
+  );
+}
+\`\`\`
+
+### Angular
+
+\`\`\`typescript
+import { VoaOption } from '@voa-ds/angular';
+
+@Component({
+  selector: 'app-example',
+  template: \`
+    <!-- Grupo de opções -->
+    <voa-option
+      [name]="'opcao'"
+      [value]="'opcao1'"
+      [label]="'Opção 1'"
+      [checked]="selected === 'opcao1'"
+      (optionChange)="handleChange($event)"
+    ></voa-option>
+    <voa-option
+      [name]="'opcao'"
+      [value]="'opcao2'"
+      [label]="'Opção 2'"
+      [checked]="selected === 'opcao2'"
+      (optionChange)="handleChange($event)"
+    ></voa-option>
+    <voa-option
+      [name]="'opcao'"
+      [value]="'opcao3'"
+      [label]="'Opção 3'"
+      [checked]="selected === 'opcao3'"
+      (optionChange)="handleChange($event)"
+    ></voa-option>
+  \`
+})
+export class ExampleComponent {
+  selected = 'opcao1';
+
+  handleChange(event: CustomEvent<{ checked: boolean; value: string; name: string }>) {
+    if (event.detail.checked) {
+      this.selected = event.detail.value;
+    }
+    console.log('Changed', event.detail);
+  }
+}
+\`\`\`
+
+### Vue
+
+\`\`\`vue
+<template>
+  <div>
+    <!-- Grupo de opções -->
+    <VoaOption
+      name="opcao"
+      value="opcao1"
+      label="Opção 1"
+      :checked="selected === 'opcao1'"
+      @optionChange="handleChange"
+    />
+    <VoaOption
+      name="opcao"
+      value="opcao2"
+      label="Opção 2"
+      :checked="selected === 'opcao2'"
+      @optionChange="handleChange"
+    />
+    <VoaOption
+      name="opcao"
+      value="opcao3"
+      label="Opção 3"
+      :checked="selected === 'opcao3'"
+      @optionChange="handleChange"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { VoaOption } from '@voa-ds/vue';
+
+const selected = ref('opcao1');
+
+const handleChange = (event: CustomEvent<{ checked: boolean; value: string; name: string }>) => {
+  if (event.detail.checked) {
+    selected.value = event.detail.value;
+  }
+  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-option');
+        el.name = 'example';
+        el.value = 'opcao1';
+        el.label = 'Exemplo de Uso';
+        el.checked = true;
+        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-voaoption--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-option.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"voa-option.stories.js","sourceRoot":"","sources":["../../../src/components/voa-option/voa-option.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-option.external.css';\r\n\r\ninterface OptionArgs {\r\n  checked: boolean;\r\n  disabled: boolean;\r\n  label: string;\r\n  name: string;\r\n  value: string;\r\n  onDsChange?: (e: CustomEvent) => void;\r\n}\r\n\r\n/**\r\n * **Option Component**\r\n * \r\n * Acts as a Radio Button. Should be used within a group logic.\r\n * \r\n * This is a standalone radio option component that manages its own checked state\r\n * and syncs with the Native Form API via ElementInternals.\r\n * \r\n * Baseado no design do Figma:\r\n * https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=442-9725\r\n */\r\nconst meta = {\r\n  title: \"Componentes/Dados/Option\",\r\n  tags: ['autodocs'],\r\n  parameters: {\r\n    docs: {\r\n      description: {\r\n        component: `\r\n**Option Component - Radio Button Pattern**\r\n\r\nActs as a Radio Button. Should be used within a group logic.\r\n\r\n## CSS Parts\r\n- \\`base\\`: Root container\r\n- \\`indicator\\`: The outer circle\r\n- \\`indicator-dot\\`: The inner selected circle\r\n- \\`label\\`: Label text\r\n\r\n## Features\r\n- Manages internal checked state\r\n- Syncs with Native Form API\r\n- Delegated focus for accessibility\r\n- Keyboard support (Space, Enter)\r\n- Support for labels and slots\r\n        `\r\n      }\r\n    },\r\n    design: {\r\n      type: 'figma',\r\n      url: 'https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=442-9725',\r\n    },\r\n  },\r\n  render: (args: OptionArgs) => html`\r\n    <voa-option\r\n      ?checked=${args.checked}\r\n      ?disabled=${args.disabled}\r\n      .label=${ifDefined(args.label)}\r\n      .name=${ifDefined(args.name)}\r\n      .value=${ifDefined(args.value)}\r\n      @dsChange=${args.onDsChange}\r\n    ></voa-option>\r\n  `,\r\n  argTypes: {\r\n    checked: { \r\n      control: 'boolean',\r\n      description: 'If true, this option is selected'\r\n    },\r\n    disabled: { \r\n      control: 'boolean',\r\n      description: 'If true, this option is disabled'\r\n    },\r\n    label: { \r\n      control: 'text',\r\n      description: 'The label text displayed next to the radio indicator'\r\n    },\r\n    name: { \r\n      control: 'text',\r\n      description: 'The name attribute for the radio group'\r\n    },\r\n    value: { \r\n      control: 'text',\r\n      description: 'The value returned when this option is selected'\r\n    },\r\n    onDsChange: { \r\n      action: 'dsChange',\r\n      description: 'Emitted when the user selects this option'\r\n    },\r\n  },\r\n  args: {\r\n    checked: false,\r\n    disabled: false,\r\n    label: 'Option Item',\r\n    name: 'demo-group',\r\n    value: 'opt-1'\r\n  },\r\n} satisfies Meta<OptionArgs>;\r\n\r\nexport default meta;\r\ntype Story = StoryObj<OptionArgs>;\r\n\r\n/**\r\n * Default unchecked option with label\r\n */\r\nexport const Default: Story = {};\r\n\r\n/**\r\n * Checked option\r\n */\r\nexport const Checked: Story = {\r\n  args: {\r\n    checked: true,\r\n  },\r\n};\r\n\r\n/**\r\n * Disabled option\r\n */\r\nexport const Disabled: Story = {\r\n  args: {\r\n    disabled: true,\r\n  },\r\n};\r\n\r\n/**\r\n * Disabled and checked\r\n */\r\nexport const DisabledChecked: Story = {\r\n  args: {\r\n    disabled: true,\r\n    checked: true,\r\n  },\r\n};\r\n\r\n/**\r\n * Without label\r\n */\r\nexport const WithoutLabel: Story = {\r\n  args: {\r\n    label: '',\r\n  },\r\n};\r\n\r\n/**\r\n * Interactive radio group demo\r\n */\r\nexport const RadioGroupDemo: Story = {\r\n  render: () => html`\r\n    <div style=\"display: flex; flex-direction: column; gap: 10px;\">\r\n      <p style=\"margin-top: 0; font-weight: 600;\">Select a plan:</p>\r\n      <voa-option name=\"plan\" value=\"basic\" label=\"Basic Plan\"></voa-option>\r\n      <voa-option name=\"plan\" value=\"pro\" label=\"Pro Plan (Recommended)\" ?checked=${true}></voa-option>\r\n      <voa-option name=\"plan\" value=\"enterprise\" label=\"Enterprise\"></voa-option>\r\n    </div>\r\n    <script>\r\n      // Simple logic to mock radio group behavior for the demo\r\n      const container = document.currentScript.previousElementSibling;\r\n      const options = container.querySelectorAll('voa-option');\r\n      \r\n      options.forEach(opt => {\r\n        opt.addEventListener('dsChange', (e) => {\r\n          // Uncheck others\r\n          options.forEach(other => {\r\n            if (other !== opt) other.checked = false;\r\n          });\r\n        });\r\n      });\r\n    </script>\r\n  `\r\n};\r\n\r\n/**\r\n * All visual states grid\r\n */\r\nexport const AllStates: Story = {\r\n  render: () => html`\r\n    <div style=\"display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem;\">\r\n      <!-- With Label Column -->\r\n      <div>\r\n        <h3 style=\"margin-top: 0;\">With Label</h3>\r\n        <div style=\"display: flex; flex-direction: column; gap: 1.5rem;\">\r\n          <div>\r\n            <p style=\"margin: 0 0 8px 0; font-size: 0.875rem; color: #666;\">Default</p>\r\n            <voa-option name=\"with-label\" value=\"default\" label=\"Option\"></voa-option>\r\n          </div>\r\n          <div>\r\n            <p style=\"margin: 0 0 8px 0; font-size: 0.875rem; color: #666;\">Checked</p>\r\n            <voa-option name=\"with-label\" value=\"checked\" label=\"Option\" ?checked=${true}></voa-option>\r\n          </div>\r\n          <div>\r\n            <p style=\"margin: 0 0 8px 0; font-size: 0.875rem; color: #666;\">Disabled</p>\r\n            <voa-option name=\"with-label\" value=\"disabled\" label=\"Option\" ?disabled=${true}></voa-option>\r\n          </div>\r\n          <div>\r\n            <p style=\"margin: 0 0 8px 0; font-size: 0.875rem; color: #666;\">Disabled & Checked</p>\r\n            <voa-option name=\"with-label\" value=\"disabled-checked\" label=\"Option\" ?disabled=${true} ?checked=${true}></voa-option>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Without Label Column -->\r\n      <div>\r\n        <h3 style=\"margin-top: 0;\">Without Label</h3>\r\n        <div style=\"display: flex; flex-direction: column; gap: 1.5rem;\">\r\n          <div>\r\n            <p style=\"margin: 0 0 8px 0; font-size: 0.875rem; color: #666;\">Default</p>\r\n            <voa-option name=\"no-label\" value=\"default\"></voa-option>\r\n          </div>\r\n          <div>\r\n            <p style=\"margin: 0 0 8px 0; font-size: 0.875rem; color: #666;\">Checked</p>\r\n            <voa-option name=\"no-label\" value=\"checked\" ?checked=${true}></voa-option>\r\n          </div>\r\n          <div>\r\n            <p style=\"margin: 0 0 8px 0; font-size: 0.875rem; color: #666;\">Disabled</p>\r\n            <voa-option name=\"no-label\" value=\"disabled\" ?disabled=${true}></voa-option>\r\n          </div>\r\n          <div>\r\n            <p style=\"margin: 0 0 8px 0; font-size: 0.875rem; color: #666;\">Disabled & Checked</p>\r\n            <voa-option name=\"no-label\" value=\"disabled-checked\" ?disabled=${true} ?checked=${true}></voa-option>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  `,\r\n};\r\n\r\n/**\r\n * Todas as variantes do Figma organizadas em grid\r\n * Estados: default, hover, focused, disabled × Active: checked/unchecked × Label: com/sem\r\n */\r\nexport const AllVariants: Story = {\r\n  render: () => html`\r\n    <div style=\"display: grid; grid-template-columns: repeat(2, auto); gap: 24px; align-items: start;\">\r\n      <div style=\"display:flex;flex-direction:column;gap:16px;\">\r\n        <h4 style=\"margin:0 0 8px 0\">Com Label</h4>\r\n        <voa-option name=\"variants-with-label\" value=\"default-unchecked\" label=\"Opção\"></voa-option>\r\n        <voa-option name=\"variants-with-label\" value=\"default-checked\" label=\"Opção\" ?checked=${true}></voa-option>\r\n        <voa-option name=\"variants-with-label\" value=\"hover-unchecked\" label=\"Opção\" style=\"cursor:pointer\"></voa-option>\r\n        <voa-option name=\"variants-with-label\" value=\"hover-checked\" label=\"Opção\" ?checked=${true} style=\"cursor:pointer\"></voa-option>\r\n        <voa-option name=\"variants-with-label\" value=\"focused-unchecked\" label=\"Opção\" tabindex=\"0\"></voa-option>\r\n        <voa-option name=\"variants-with-label\" value=\"focused-checked\" label=\"Opção\" ?checked=${true} tabindex=\"0\"></voa-option>\r\n        <voa-option name=\"variants-with-label\" value=\"disabled-unchecked\" label=\"Opção\" ?disabled=${true}></voa-option>\r\n        <voa-option name=\"variants-with-label\" value=\"disabled-checked\" label=\"Opção\" ?checked=${true} ?disabled=${true}></voa-option>\r\n      </div>\r\n      <div style=\"display:flex;flex-direction:column;gap:16px;\">\r\n        <h4 style=\"margin:0 0 8px 0\">Sem Label</h4>\r\n        <voa-option name=\"variants-no-label\" value=\"default-unchecked\"></voa-option>\r\n        <voa-option name=\"variants-no-label\" value=\"default-checked\" ?checked=${true}></voa-option>\r\n        <voa-option name=\"variants-no-label\" value=\"hover-unchecked\" style=\"cursor:pointer\"></voa-option>\r\n        <voa-option name=\"variants-no-label\" value=\"hover-checked\" ?checked=${true} style=\"cursor:pointer\"></voa-option>\r\n        <voa-option name=\"variants-no-label\" value=\"focused-unchecked\" tabindex=\"0\"></voa-option>\r\n        <voa-option name=\"variants-no-label\" value=\"focused-checked\" ?checked=${true} tabindex=\"0\"></voa-option>\r\n        <voa-option name=\"variants-no-label\" value=\"disabled-unchecked\" ?disabled=${true}></voa-option>\r\n        <voa-option name=\"variants-no-label\" value=\"disabled-checked\" ?checked=${true} ?disabled=${true}></voa-option>\r\n      </div>\r\n    </div>\r\n  `,\r\n};\r\n\r\n/**\r\n * Grupo de opções interativas\r\n */\r\nexport const Group: Story = {\r\n  render: () => {\r\n    const container = document.createElement('div');\r\n    container.style.display = 'flex';\r\n    container.style.flexDirection = 'column';\r\n    container.style.gap = '12px';\r\n    \r\n    const option1 = document.createElement('voa-option') as any;\r\n    option1.name = 'group';\r\n    option1.value = 'opcao1';\r\n    option1.label = 'Primeira opção';\r\n    \r\n    const option2 = document.createElement('voa-option') as any;\r\n    option2.name = 'group';\r\n    option2.value = 'opcao2';\r\n    option2.label = 'Segunda opção';\r\n    option2.checked = true;\r\n    \r\n    const option3 = document.createElement('voa-option') as any;\r\n    option3.name = 'group';\r\n    option3.value = 'opcao3';\r\n    option3.label = 'Terceira opção';\r\n    \r\n    const option4 = document.createElement('voa-option') as any;\r\n    option4.name = 'group';\r\n    option4.value = 'opcao4';\r\n    option4.label = 'Opção desabilitada';\r\n    option4.disabled = true;\r\n    \r\n    container.appendChild(option1);\r\n    container.appendChild(option2);\r\n    container.appendChild(option3);\r\n    container.appendChild(option4);\r\n    \r\n    return container;\r\n  },\r\n};\r\n\r\n/**\r\n * Estados visuais organizados\r\n */\r\nexport const VisualStates: Story = {\r\n  render: () => {\r\n    const container = document.createElement('div');\r\n    container.style.display = 'grid';\r\n    container.style.gridTemplateColumns = 'repeat(4, auto)';\r\n    container.style.gap = '16px';\r\n    container.style.alignItems = 'center';\r\n    \r\n    // Headers\r\n    const headers = ['Default', 'Hover', 'Focused', 'Disabled'];\r\n    headers.forEach((header) => {\r\n      const headerEl = document.createElement('h4');\r\n      headerEl.style.margin = '0';\r\n      headerEl.textContent = header;\r\n      container.appendChild(headerEl);\r\n    });\r\n    \r\n    // Unchecked row\r\n    const defaultUnchecked = document.createElement('voa-option') as any;\r\n    defaultUnchecked.name = 'visual-states';\r\n    defaultUnchecked.value = 'default-unchecked';\r\n    defaultUnchecked.label = 'Opção';\r\n    \r\n    const hoverUnchecked = document.createElement('voa-option') as any;\r\n    hoverUnchecked.name = 'visual-states';\r\n    hoverUnchecked.value = 'hover-unchecked';\r\n    hoverUnchecked.label = 'Opção';\r\n    hoverUnchecked.style.cursor = 'pointer';\r\n    \r\n    const focusedUnchecked = document.createElement('voa-option') as any;\r\n    focusedUnchecked.name = 'visual-states';\r\n    focusedUnchecked.value = 'focused-unchecked';\r\n    focusedUnchecked.label = 'Opção';\r\n    focusedUnchecked.setAttribute('tabindex', '0');\r\n    \r\n    const disabledUnchecked = document.createElement('voa-option') as any;\r\n    disabledUnchecked.name = 'visual-states';\r\n    disabledUnchecked.value = 'disabled-unchecked';\r\n    disabledUnchecked.label = 'Opção';\r\n    disabledUnchecked.disabled = true;\r\n    \r\n    container.appendChild(defaultUnchecked);\r\n    container.appendChild(hoverUnchecked);\r\n    container.appendChild(focusedUnchecked);\r\n    container.appendChild(disabledUnchecked);\r\n    \r\n    // Checked row\r\n    const defaultChecked = document.createElement('voa-option') as any;\r\n    defaultChecked.name = 'visual-states-checked';\r\n    defaultChecked.value = 'default-checked';\r\n    defaultChecked.label = 'Opção';\r\n    defaultChecked.checked = true;\r\n    \r\n    const hoverChecked = document.createElement('voa-option') as any;\r\n    hoverChecked.name = 'visual-states-checked';\r\n    hoverChecked.value = 'hover-checked';\r\n    hoverChecked.label = 'Opção';\r\n    hoverChecked.checked = true;\r\n    hoverChecked.style.cursor = 'pointer';\r\n    \r\n    const focusedChecked = document.createElement('voa-option') as any;\r\n    focusedChecked.name = 'visual-states-checked';\r\n    focusedChecked.value = 'focused-checked';\r\n    focusedChecked.label = 'Opção';\r\n    focusedChecked.checked = true;\r\n    focusedChecked.setAttribute('tabindex', '0');\r\n    \r\n    const disabledChecked = document.createElement('voa-option') as any;\r\n    disabledChecked.name = 'visual-states-checked';\r\n    disabledChecked.value = 'disabled-checked';\r\n    disabledChecked.label = 'Opção';\r\n    disabledChecked.checked = true;\r\n    disabledChecked.disabled = true;\r\n    \r\n    container.appendChild(defaultChecked);\r\n    container.appendChild(hoverChecked);\r\n    container.appendChild(focusedChecked);\r\n    container.appendChild(disabledChecked);\r\n    \r\n    return container;\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<!-- Opção básica -->\r\n<voa-option \r\n  name=\"opcao\"\r\n  value=\"opcao1\"\r\n  label=\"Opção 1\"\r\n  checked\r\n  onoptionChange={(e) => console.log('Changed', e.detail)}\r\n></voa-option>\r\n\r\n<!-- Grupo de opções -->\r\n<voa-option name=\"opcao\" value=\"opcao1\" label=\"Opção 1\" checked></voa-option>\r\n<voa-option name=\"opcao\" value=\"opcao2\" label=\"Opção 2\"></voa-option>\r\n<voa-option name=\"opcao\" value=\"opcao3\" label=\"Opção 3\"></voa-option>\r\n\\`\\`\\`\r\n\r\n### React\r\n\r\n\\`\\`\\`tsx\r\nimport { VoaOption } from '@voa-ds/react';\r\nimport { useState } from 'react';\r\n\r\nfunction MyComponent() {\r\n  const [selected, setSelected] = useState('opcao1');\r\n\r\n  const handleChange = (e: CustomEvent<{ checked: boolean; value: string; name: string }>) => {\r\n    if (e.detail.checked) {\r\n      setSelected(e.detail.value);\r\n    }\r\n    console.log('Changed', e.detail);\r\n  };\r\n\r\n  return (\r\n    <>\r\n      {/* Grupo de opções */}\r\n      <VoaOption\r\n        name=\"opcao\"\r\n        value=\"opcao1\"\r\n        label=\"Opção 1\"\r\n        checked={selected === 'opcao1'}\r\n        onOptionChange={handleChange}\r\n      />\r\n      <VoaOption\r\n        name=\"opcao\"\r\n        value=\"opcao2\"\r\n        label=\"Opção 2\"\r\n        checked={selected === 'opcao2'}\r\n        onOptionChange={handleChange}\r\n      />\r\n      <VoaOption\r\n        name=\"opcao\"\r\n        value=\"opcao3\"\r\n        label=\"Opção 3\"\r\n        checked={selected === 'opcao3'}\r\n        onOptionChange={handleChange}\r\n      />\r\n    </>\r\n  );\r\n}\r\n\\`\\`\\`\r\n\r\n### Angular\r\n\r\n\\`\\`\\`typescript\r\nimport { VoaOption } from '@voa-ds/angular';\r\n\r\n@Component({\r\n  selector: 'app-example',\r\n  template: \\`\r\n    <!-- Grupo de opções -->\r\n    <voa-option\r\n      [name]=\"'opcao'\"\r\n      [value]=\"'opcao1'\"\r\n      [label]=\"'Opção 1'\"\r\n      [checked]=\"selected === 'opcao1'\"\r\n      (optionChange)=\"handleChange($event)\"\r\n    ></voa-option>\r\n    <voa-option\r\n      [name]=\"'opcao'\"\r\n      [value]=\"'opcao2'\"\r\n      [label]=\"'Opção 2'\"\r\n      [checked]=\"selected === 'opcao2'\"\r\n      (optionChange)=\"handleChange($event)\"\r\n    ></voa-option>\r\n    <voa-option\r\n      [name]=\"'opcao'\"\r\n      [value]=\"'opcao3'\"\r\n      [label]=\"'Opção 3'\"\r\n      [checked]=\"selected === 'opcao3'\"\r\n      (optionChange)=\"handleChange($event)\"\r\n    ></voa-option>\r\n  \\`\r\n})\r\nexport class ExampleComponent {\r\n  selected = 'opcao1';\r\n\r\n  handleChange(event: CustomEvent<{ checked: boolean; value: string; name: string }>) {\r\n    if (event.detail.checked) {\r\n      this.selected = event.detail.value;\r\n    }\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    <!-- Grupo de opções -->\r\n    <VoaOption\r\n      name=\"opcao\"\r\n      value=\"opcao1\"\r\n      label=\"Opção 1\"\r\n      :checked=\"selected === 'opcao1'\"\r\n      @optionChange=\"handleChange\"\r\n    />\r\n    <VoaOption\r\n      name=\"opcao\"\r\n      value=\"opcao2\"\r\n      label=\"Opção 2\"\r\n      :checked=\"selected === 'opcao2'\"\r\n      @optionChange=\"handleChange\"\r\n    />\r\n    <VoaOption\r\n      name=\"opcao\"\r\n      value=\"opcao3\"\r\n      label=\"Opção 3\"\r\n      :checked=\"selected === 'opcao3'\"\r\n      @optionChange=\"handleChange\"\r\n    />\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref } from 'vue';\r\nimport { VoaOption } from '@voa-ds/vue';\r\n\r\nconst selected = ref('opcao1');\r\n\r\nconst handleChange = (event: CustomEvent<{ checked: boolean; value: string; name: string }>) => {\r\n  if (event.detail.checked) {\r\n    selected.value = event.detail.value;\r\n  }\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-option') as any;\r\n    el.name = 'example';\r\n    el.value = 'opcao1';\r\n    el.label = 'Exemplo de Uso';\r\n    el.checked = true;\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-voaoption--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};\r\n\r\n"]}