voa-ds-core 1.0.3

package/dist/collection/components/voa-input-addon/voa-input-addon.stories.js

@@ -0,0 +1,380 @@
+import { html } from "lit";
+import "../../Stories/styles/voa-input-addon.external.css";
+/**
+ * Componente Input-Addon do Voa Design System.
+ *
+ * Baseado no design do Figma: https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=438-2157
+ *
+ * Usado como elemento auxiliar em inputs, podendo ser inserido nos slots prefix ou suffix.
+ */
+const meta = {
+    title: "Componentes/Formulários/Input Addon",
+    tags: ['autodocs'],
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=438-2157&t=eEPGXVkQRijr3FMg-4',
+        },
+    },
+    render: (args) => html `
+    <voa-input-addon
+      variant=${args.variant}
+      prepend-content=${args.prependContent || ''}
+      country-code=${args.countryCode || ''}
+      button-label=${args.buttonLabel || ''}
+      currency=${args.currency || ''}
+      currency-name=${args.currencyName || ''}
+      shortcut=${args.shortcut || ''}
+      .platform=${args.platform}
+    ></voa-input-addon>
+  `,
+    argTypes: {
+        variant: {
+            control: 'select',
+            options: ['label', 'select', 'flags', 'button', 'clear', 'shortcut', 'currency-pre', 'currency-post'],
+            description: 'Variante do addon',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'label' },
+            },
+        },
+        prependContent: {
+            control: 'text',
+            description: 'Texto do label/prepend (para variantes label, select)',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'http://' },
+            },
+        },
+        countryCode: {
+            control: 'text',
+            description: 'Código do país (para variante flags)',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'BR +55' },
+            },
+        },
+        buttonLabel: {
+            control: 'text',
+            description: 'Text do botão (para variante button)',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'Procurar...' },
+            },
+        },
+        currency: {
+            control: 'text',
+            description: 'Símbolo da moeda (para variante currency-pre)',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'R$' },
+            },
+        },
+        currencyName: {
+            control: 'text',
+            description: 'Nome da moeda (para variante currency-post)',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'Real' },
+            },
+        },
+        shortcut: {
+            control: 'text',
+            description: 'Tecla do atalho (para variante shortcut)',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'S' },
+            },
+        },
+        platform: {
+            control: 'select',
+            options: ['mac', 'win'],
+            description: 'Plataforma do atalho (para variante shortcut)',
+            table: {
+                type: { summary: "'mac' | 'win'" },
+                defaultValue: { summary: "'mac'" },
+            },
+        },
+    },
+    args: {
+        variant: 'label',
+        prependContent: 'http://',
+    },
+};
+export default meta;
+export const Playground = {};
+// ============================================
+// Variantes
+// ============================================
+export const Label = {
+    args: {
+        variant: 'label',
+        prependContent: 'http://',
+    },
+};
+export const Select = {
+    args: {
+        variant: 'select',
+        prependContent: 'http://',
+    },
+};
+export const Flags = {
+    args: {
+        variant: 'flags',
+        countryCode: 'BR +55',
+    },
+};
+export const Button = {
+    args: {
+        variant: 'button',
+        buttonLabel: 'Procurar...',
+    },
+};
+export const Clear = {
+    args: {
+        variant: 'clear',
+    },
+};
+export const Shortcut = {
+    args: {
+        variant: 'shortcut',
+        shortcut: 'S',
+        platform: 'mac',
+    },
+};
+export const CurrencyPre = {
+    args: {
+        variant: 'currency-pre',
+        currency: 'R$',
+    },
+};
+export const CurrencyPost = {
+    args: {
+        variant: 'currency-post',
+        currencyName: 'Real',
+    },
+};
+// ============================================
+// Exemplos de uso com diferentes valores
+// ============================================
+export const LabelVariations = {
+    render: () => html `
+    <div style="display: flex; flex-direction: column; gap: 16px;">
+      <voa-input-addon variant="label" prepend-content="http://"></voa-input-addon>
+      <voa-input-addon variant="label" prepend-content="https://"></voa-input-addon>
+      <voa-input-addon variant="label" prepend-content="www."></voa-input-addon>
+      <voa-input-addon variant="label" prepend-content="@"></voa-input-addon>
+    </div>
+  `,
+};
+export const CountryCodes = {
+    render: () => html `
+    <div style="display: flex; flex-direction: column; gap: 16px;">
+      <voa-input-addon variant="flags" country-code="BR +55"></voa-input-addon>
+      <voa-input-addon variant="flags" country-code="US +1"></voa-input-addon>
+      <voa-input-addon variant="flags" country-code="UK +44"></voa-input-addon>
+      <voa-input-addon variant="flags" country-code="FR +33"></voa-input-addon>
+    </div>
+  `,
+};
+export const Shortcuts = {
+    render: () => html `
+    <div style="display: flex; flex-direction: column; gap: 16px;">
+      <voa-input-addon variant="shortcut" shortcut="S" .platform=${'mac'}></voa-input-addon>
+      <voa-input-addon variant="shortcut" shortcut="K" .platform=${'mac'}></voa-input-addon>
+      <voa-input-addon variant="shortcut" shortcut="S" .platform=${'win'}></voa-input-addon>
+    </div>
+  `,
+};
+// ============================================
+// Usage - Exemplos de Código
+// ============================================
+export const Usage = {
+    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. Veja a documentação completa na aba Docs.</p>
+      
+      <h3 style="margin-top: 2rem; margin-bottom: 1rem; font-size: 1.25rem; font-weight: 600;">Exemplo Interativo</h3>
+      <voa-input-addon variant="label" prepend-content="http://" style="margin-bottom: 2rem;"></voa-input-addon>
+      
+      <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-voainputaddon--docs#usage" style="color: #0064cb; text-decoration: none; font-weight: 600;">clique aqui para ir à página Docs</a>.
+        </p>
+      </div>
+    </div>
+  `,
+    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
+<!-- Input Addon com label -->
+<voa-input-addon 
+  variant="label"
+  prepend-content="http://"
+></voa-input-addon>
+
+<!-- Input Addon com botão -->
+<voa-input-addon 
+  variant="button"
+  button-label="Procurar"
+  ondsClick={(e) => console.log('Clicked', e)}
+></voa-input-addon>
+
+<!-- Input Addon com atalho -->
+<voa-input-addon 
+  variant="shortcut"
+  shortcut="S"
+  platform="mac"
+></voa-input-addon>
+\`\`\`
+
+### React
+
+\`\`\`tsx
+import { VoaInputAddon } from '@voa-ds/react';
+
+function MyComponent() {
+  const handleClick = (e: CustomEvent) => {
+    console.log('Clicked', e);
+  };
+
+  return (
+    <>
+      {/* Input Addon com label */}
+      <VoaInputAddon
+        variant="label"
+        prependContent="http://"
+      />
+
+      {/* Input Addon com botão */}
+      <VoaInputAddon
+        variant="button"
+        buttonLabel="Procurar"
+        onDsClick={handleClick}
+      />
+
+      {/* Input Addon com atalho */}
+      <VoaInputAddon
+        variant="shortcut"
+        shortcut="S"
+        platform="mac"
+      />
+    </>
+  );
+}
+\`\`\`
+
+### Angular
+
+\`\`\`typescript
+import { VoaInputAddon } from '@voa-ds/angular';
+
+@Component({
+  selector: 'app-example',
+  template: \`
+    <!-- Input Addon com label -->
+    <voa-input-addon
+      [variant]="'label'"
+      [prependContent]="'http://'"
+    ></voa-input-addon>
+
+    <!-- Input Addon com botão -->
+    <voa-input-addon
+      [variant]="'button'"
+      [buttonLabel]="'Procurar'"
+      (dsClick)="handleClick($event)"
+    ></voa-input-addon>
+
+    <!-- Input Addon com atalho -->
+    <voa-input-addon
+      [variant]="'shortcut'"
+      [shortcut]="'S'"
+      [platform]="'mac'"
+    ></voa-input-addon>
+  \`
+})
+export class ExampleComponent {
+  handleClick(event: CustomEvent) {
+    console.log('Clicked', event);
+  }
+}
+\`\`\`
+
+### Vue
+
+\`\`\`vue
+<template>
+  <div>
+    <!-- Input Addon com label -->
+    <VoaInputAddon
+      variant="label"
+      prepend-content="http://"
+    />
+
+    <!-- Input Addon com botão -->
+    <VoaInputAddon
+      variant="button"
+      button-label="Procurar"
+      @dsClick="handleClick"
+    />
+
+    <!-- Input Addon com atalho -->
+    <VoaInputAddon
+      variant="shortcut"
+      shortcut="S"
+      platform="mac"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { VoaInputAddon } from '@voa-ds/vue';
+
+const handleClick = (event: CustomEvent) => {
+  console.log('Clicked', event);
+};
+</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
+\`\`\`
+        `
+            }
+        }
+    }
+};
+//# sourceMappingURL=voa-input-addon.stories.js.map

package/dist/collection/components/voa-input-addon/voa-input-addon.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"voa-input-addon.stories.js","sourceRoot":"","sources":["../../../src/components/voa-input-addon/voa-input-addon.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryObj } from '@storybook/web-components';\r\nimport { html } from 'lit';\r\nimport '../../Stories/styles/voa-input-addon.external.css';\r\n\r\n/**\r\n * Componente Input-Addon do Voa Design System.\r\n * \r\n * Baseado no design do Figma: https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=438-2157\r\n * \r\n * Usado como elemento auxiliar em inputs, podendo ser inserido nos slots prefix ou suffix.\r\n */\r\nconst meta = {\r\n  title: \"Componentes/Formulários/Input Addon\",\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=438-2157&t=eEPGXVkQRijr3FMg-4',\r\n    },\r\n  },\r\n  render: (args) => html`\r\n    <voa-input-addon\r\n      variant=${args.variant}\r\n      prepend-content=${args.prependContent || ''}\r\n      country-code=${args.countryCode || ''}\r\n      button-label=${args.buttonLabel || ''}\r\n      currency=${args.currency || ''}\r\n      currency-name=${args.currencyName || ''}\r\n      shortcut=${args.shortcut || ''}\r\n      .platform=${args.platform}\r\n    ></voa-input-addon>\r\n  `,\r\n  argTypes: {\r\n    variant: {\r\n      control: 'select',\r\n      options: ['label', 'select', 'flags', 'button', 'clear', 'shortcut', 'currency-pre', 'currency-post'],\r\n      description: 'Variante do addon',\r\n      table: {\r\n        type: { summary: 'string' },\r\n        defaultValue: { summary: 'label' },\r\n      },\r\n    },\r\n    prependContent: {\r\n      control: 'text',\r\n      description: 'Texto do label/prepend (para variantes label, select)',\r\n      table: {\r\n        type: { summary: 'string' },\r\n        defaultValue: { summary: 'http://' },\r\n      },\r\n    },\r\n    countryCode: {\r\n      control: 'text',\r\n      description: 'Código do país (para variante flags)',\r\n      table: {\r\n        type: { summary: 'string' },\r\n        defaultValue: { summary: 'BR +55' },\r\n      },\r\n    },\r\n    buttonLabel: {\r\n      control: 'text',\r\n      description: 'Text do botão (para variante button)',\r\n      table: {\r\n        type: { summary: 'string' },\r\n        defaultValue: { summary: 'Procurar...' },\r\n      },\r\n    },\r\n    currency: {\r\n      control: 'text',\r\n      description: 'Símbolo da moeda (para variante currency-pre)',\r\n      table: {\r\n        type: { summary: 'string' },\r\n        defaultValue: { summary: 'R$' },\r\n      },\r\n    },\r\n    currencyName: {\r\n      control: 'text',\r\n      description: 'Nome da moeda (para variante currency-post)',\r\n      table: {\r\n        type: { summary: 'string' },\r\n        defaultValue: { summary: 'Real' },\r\n      },\r\n    },\r\n    shortcut: {\r\n      control: 'text',\r\n      description: 'Tecla do atalho (para variante shortcut)',\r\n      table: {\r\n        type: { summary: 'string' },\r\n        defaultValue: { summary: 'S' },\r\n      },\r\n    },\r\n    platform: {\r\n      control: 'select',\r\n      options: ['mac', 'win'],\r\n      description: 'Plataforma do atalho (para variante shortcut)',\r\n      table: {\r\n        type: { summary: \"'mac' | 'win'\" },\r\n        defaultValue: { summary: \"'mac'\" },\r\n      },\r\n    },\r\n  },\r\n  args: {\r\n    variant: 'label',\r\n    prependContent: 'http://',\r\n  },\r\n} satisfies Meta;\r\n\r\nexport default meta;\r\ntype Story = StoryObj;\r\n\r\nexport const Playground: Story = {};\r\n\r\n// ============================================\r\n// Variantes\r\n// ============================================\r\n\r\nexport const Label: Story = {\r\n  args: {\r\n    variant: 'label',\r\n    prependContent: 'http://',\r\n  },\r\n};\r\n\r\nexport const Select: Story = {\r\n  args: {\r\n    variant: 'select',\r\n    prependContent: 'http://',\r\n  },\r\n};\r\n\r\nexport const Flags: Story = {\r\n  args: {\r\n    variant: 'flags',\r\n    countryCode: 'BR +55',\r\n  },\r\n};\r\n\r\nexport const Button: Story = {\r\n  args: {\r\n    variant: 'button',\r\n    buttonLabel: 'Procurar...',\r\n  },\r\n};\r\n\r\nexport const Clear: Story = {\r\n  args: {\r\n    variant: 'clear',\r\n  },\r\n};\r\n\r\nexport const Shortcut: Story = {\r\n  args: {\r\n    variant: 'shortcut',\r\n    shortcut: 'S',\r\n    platform: 'mac',\r\n  },\r\n};\r\n\r\nexport const CurrencyPre: Story = {\r\n  args: {\r\n    variant: 'currency-pre',\r\n    currency: 'R$',\r\n  },\r\n};\r\n\r\nexport const CurrencyPost: Story = {\r\n  args: {\r\n    variant: 'currency-post',\r\n    currencyName: 'Real',\r\n  },\r\n};\r\n\r\n// ============================================\r\n// Exemplos de uso com diferentes valores\r\n// ============================================\r\n\r\nexport const LabelVariations: Story = {\r\n  render: () => html`\r\n    <div style=\"display: flex; flex-direction: column; gap: 16px;\">\r\n      <voa-input-addon variant=\"label\" prepend-content=\"http://\"></voa-input-addon>\r\n      <voa-input-addon variant=\"label\" prepend-content=\"https://\"></voa-input-addon>\r\n      <voa-input-addon variant=\"label\" prepend-content=\"www.\"></voa-input-addon>\r\n      <voa-input-addon variant=\"label\" prepend-content=\"@\"></voa-input-addon>\r\n    </div>\r\n  `,\r\n};\r\n\r\nexport const CountryCodes: Story = {\r\n  render: () => html`\r\n    <div style=\"display: flex; flex-direction: column; gap: 16px;\">\r\n      <voa-input-addon variant=\"flags\" country-code=\"BR +55\"></voa-input-addon>\r\n      <voa-input-addon variant=\"flags\" country-code=\"US +1\"></voa-input-addon>\r\n      <voa-input-addon variant=\"flags\" country-code=\"UK +44\"></voa-input-addon>\r\n      <voa-input-addon variant=\"flags\" country-code=\"FR +33\"></voa-input-addon>\r\n    </div>\r\n  `,\r\n};\r\n\r\nexport const Shortcuts: Story = {\r\n  render: () => html`\r\n    <div style=\"display: flex; flex-direction: column; gap: 16px;\">\r\n      <voa-input-addon variant=\"shortcut\" shortcut=\"S\" .platform=${'mac'}></voa-input-addon>\r\n      <voa-input-addon variant=\"shortcut\" shortcut=\"K\" .platform=${'mac'}></voa-input-addon>\r\n      <voa-input-addon variant=\"shortcut\" shortcut=\"S\" .platform=${'win'}></voa-input-addon>\r\n    </div>\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  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;\">Uso do Componente</h2>\r\n      <p style=\"margin-bottom: 2rem; color: #666;\">Este componente pode ser usado em diferentes frameworks. Veja a documentação completa na aba Docs.</p>\r\n      \r\n      <h3 style=\"margin-top: 2rem; margin-bottom: 1rem; font-size: 1.25rem; font-weight: 600;\">Exemplo Interativo</h3>\r\n      <voa-input-addon variant=\"label\" prepend-content=\"http://\" style=\"margin-bottom: 2rem;\"></voa-input-addon>\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-voainputaddon--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  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<!-- Input Addon com label -->\r\n<voa-input-addon \r\n  variant=\"label\"\r\n  prepend-content=\"http://\"\r\n></voa-input-addon>\r\n\r\n<!-- Input Addon com botão -->\r\n<voa-input-addon \r\n  variant=\"button\"\r\n  button-label=\"Procurar\"\r\n  ondsClick={(e) => console.log('Clicked', e)}\r\n></voa-input-addon>\r\n\r\n<!-- Input Addon com atalho -->\r\n<voa-input-addon \r\n  variant=\"shortcut\"\r\n  shortcut=\"S\"\r\n  platform=\"mac\"\r\n></voa-input-addon>\r\n\\`\\`\\`\r\n\r\n### React\r\n\r\n\\`\\`\\`tsx\r\nimport { VoaInputAddon } from '@voa-ds/react';\r\n\r\nfunction MyComponent() {\r\n  const handleClick = (e: CustomEvent) => {\r\n    console.log('Clicked', e);\r\n  };\r\n\r\n  return (\r\n    <>\r\n      {/* Input Addon com label */}\r\n      <VoaInputAddon\r\n        variant=\"label\"\r\n        prependContent=\"http://\"\r\n      />\r\n\r\n      {/* Input Addon com botão */}\r\n      <VoaInputAddon\r\n        variant=\"button\"\r\n        buttonLabel=\"Procurar\"\r\n        onDsClick={handleClick}\r\n      />\r\n\r\n      {/* Input Addon com atalho */}\r\n      <VoaInputAddon\r\n        variant=\"shortcut\"\r\n        shortcut=\"S\"\r\n        platform=\"mac\"\r\n      />\r\n    </>\r\n  );\r\n}\r\n\\`\\`\\`\r\n\r\n### Angular\r\n\r\n\\`\\`\\`typescript\r\nimport { VoaInputAddon } from '@voa-ds/angular';\r\n\r\n@Component({\r\n  selector: 'app-example',\r\n  template: \\`\r\n    <!-- Input Addon com label -->\r\n    <voa-input-addon\r\n      [variant]=\"'label'\"\r\n      [prependContent]=\"'http://'\"\r\n    ></voa-input-addon>\r\n\r\n    <!-- Input Addon com botão -->\r\n    <voa-input-addon\r\n      [variant]=\"'button'\"\r\n      [buttonLabel]=\"'Procurar'\"\r\n      (dsClick)=\"handleClick($event)\"\r\n    ></voa-input-addon>\r\n\r\n    <!-- Input Addon com atalho -->\r\n    <voa-input-addon\r\n      [variant]=\"'shortcut'\"\r\n      [shortcut]=\"'S'\"\r\n      [platform]=\"'mac'\"\r\n    ></voa-input-addon>\r\n  \\`\r\n})\r\nexport class ExampleComponent {\r\n  handleClick(event: CustomEvent) {\r\n    console.log('Clicked', event);\r\n  }\r\n}\r\n\\`\\`\\`\r\n\r\n### Vue\r\n\r\n\\`\\`\\`vue\r\n<template>\r\n  <div>\r\n    <!-- Input Addon com label -->\r\n    <VoaInputAddon\r\n      variant=\"label\"\r\n      prepend-content=\"http://\"\r\n    />\r\n\r\n    <!-- Input Addon com botão -->\r\n    <VoaInputAddon\r\n      variant=\"button\"\r\n      button-label=\"Procurar\"\r\n      @dsClick=\"handleClick\"\r\n    />\r\n\r\n    <!-- Input Addon com atalho -->\r\n    <VoaInputAddon\r\n      variant=\"shortcut\"\r\n      shortcut=\"S\"\r\n      platform=\"mac\"\r\n    />\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { VoaInputAddon } from '@voa-ds/vue';\r\n\r\nconst handleClick = (event: CustomEvent) => {\r\n  console.log('Clicked', event);\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};\r\n\r\n"]}

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

@@ -0,0 +1,25 @@
+/* 
+ * UNSTYLED PATTERN: This file contains ONLY structural CSS (layout, positioning).
+ * All visual styles (colors, backgrounds, fonts, spacing) must be applied externally
+ * via CSS Parts API (::part() selectors) using design tokens.
+ */
+
+:host {
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+}
+
+.voa-keybinding__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  box-sizing: border-box;
+}
+
+.voa-keybinding__text {
+  display: inline-block;
+  box-sizing: border-box;
+}
+

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

@@ -0,0 +1,87 @@
+import { Host, h } from "@stencil/core";
+/**
+ * Componente Keybinding para exibir atalhos de teclado.
+ *
+ * Baseado no design do Figma, usado como subcomponente do input-addon.
+ * Segue o padrão "unstyled" (headless), fornecendo apenas estrutura e lógica.
+ *
+ * @part base - O elemento raiz do keybinding
+ * @part key-icon - O ícone da tecla modificadora (⌘ ou Ctrl)
+ * @part key-text - O texto da tecla
+ */
+export class VoaKeybinding {
+    constructor() {
+        /**
+         * A tecla do atalho (ex: "S", "K", "Enter")
+         */
+        this.shortcut = 'S';
+        /**
+         * Plataforma do atalho (mac ou win)
+         */
+        this.platform = 'mac';
+    }
+    render() {
+        return (h(Host, { key: 'bb1998ab8ea77847a5dd9acc92066fba2f6dc0f5', part: "base", class: {
+                'voa-keybinding': true,
+                [`voa-keybinding--${this.platform}`]: true,
+            } }, h("div", { key: 'a352156abf152af21b6ee7f94172d7ca923fc593', part: "key-icon", class: "voa-keybinding__icon" }, this.platform === 'mac' ? (h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M12.5 2C13.3284 2 14 2.67157 14 3.5V12.5C14 13.3284 13.3284 14 12.5 14H3.5C2.67157 14 2 13.3284 2 12.5V3.5C2 2.67157 2.67157 2 3.5 2H12.5Z", fill: "currentColor", "fill-opacity": "0.1" }), h("path", { d: "M4 4H12M4 8H12M4 12H8", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round" }))) : (h("svg", { width: "20", height: "10", viewBox: "0 0 20 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("rect", { x: "0", y: "0", width: "20", height: "10", rx: "2", fill: "currentColor", "fill-opacity": "0.1" }), h("text", { x: "10", y: "7", "text-anchor": "middle", "font-size": "8", fill: "currentColor", "font-weight": "600" }, "Ctrl")))), h("span", { key: 'ec6bd9a8adeb308c7ce704ff96ccee00ff8dc84c', part: "key-text", class: "voa-keybinding__text" }, this.shortcut)));
+    }
+    static get is() { return "voa-keybinding"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["voa-keybinding.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["voa-keybinding.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "shortcut": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A tecla do atalho (ex: \"S\", \"K\", \"Enter\")"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "shortcut",
+                "defaultValue": "'S'"
+            },
+            "platform": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'mac' | 'win'",
+                    "resolved": "\"mac\" | \"win\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Plataforma do atalho (mac ou win)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "platform",
+                "defaultValue": "'mac'"
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=voa-keybinding.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"voa-keybinding.js","sourceRoot":"","sources":["../../../src/components/voa-keybinding/voa-keybinding.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAElE;;;;;;;;;GASG;AAOH,MAAM,OAAO,aAAa;IAN1B;QASE;;WAEG;QACK,aAAQ,GAAW,GAAG,CAAC;QAE/B;;WAEG;QACK,aAAQ,GAAkB,KAAK,CAAC;KAyCzC;IAvCC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;gBACL,gBAAgB,EAAE,IAAI;gBACtB,CAAC,mBAAmB,IAAI,CAAC,QAAQ,EAAE,CAAC,EAAE,IAAI;aAC3C;YAED,4DAAK,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,sBAAsB,IAC9C,IAAI,CAAC,QAAQ,KAAK,KAAK,CAAC,CAAC,CAAC,CACzB,WAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B;gBAC5F,YACE,CAAC,EAAC,4IAA4I,EAC9I,IAAI,EAAC,cAAc,kBACN,KAAK,GAClB;gBACF,YACE,CAAC,EAAC,uBAAuB,EACzB,MAAM,EAAC,cAAc,kBACR,KAAK,oBACH,OAAO,GACtB,CACE,CACP,CAAC,CAAC,CAAC,CACF,WAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B;gBAC5F,YAAM,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,EAAC,IAAI,EAAC,cAAc,kBAAc,KAAK,GAAG;gBACzF,YAAM,CAAC,EAAC,IAAI,EAAC,CAAC,EAAC,GAAG,iBAAa,QAAQ,eAAW,GAAG,EAAC,IAAI,EAAC,cAAc,iBAAa,KAAK,WAEpF,CACH,CACP,CACG;YACN,6DAAM,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,sBAAsB,IAC/C,IAAI,CAAC,QAAQ,CACT,CACF,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Element } from '@stencil/core';\r\n\r\n/**\r\n * Componente Keybinding para exibir atalhos de teclado.\r\n * \r\n * Baseado no design do Figma, usado como subcomponente do input-addon.\r\n * Segue o padrão \"unstyled\" (headless), fornecendo apenas estrutura e lógica.\r\n * \r\n * @part base - O elemento raiz do keybinding\r\n * @part key-icon - O ícone da tecla modificadora (⌘ ou Ctrl)\r\n * @part key-text - O texto da tecla\r\n */\r\n@Component({\r\n  tag: 'voa-keybinding',\r\n  styleUrl: 'voa-keybinding.css',\r\n  shadow: true,\r\n  scoped: false,\r\n})\r\nexport class VoaKeybinding {\r\n  @Element() host: HTMLElement;\r\n\r\n  /**\r\n   * A tecla do atalho (ex: \"S\", \"K\", \"Enter\")\r\n   */\r\n  @Prop() shortcut: string = 'S';\r\n\r\n  /**\r\n   * Plataforma do atalho (mac ou win)\r\n   */\r\n  @Prop() platform: 'mac' | 'win' = 'mac';\r\n\r\n  render() {\r\n    return (\r\n      <Host\r\n        part=\"base\"\r\n        class={{\r\n          'voa-keybinding': true,\r\n          [`voa-keybinding--${this.platform}`]: true,\r\n        }}\r\n      >\r\n        <div part=\"key-icon\" class=\"voa-keybinding__icon\">\r\n          {this.platform === 'mac' ? (\r\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n              <path\r\n                d=\"M12.5 2C13.3284 2 14 2.67157 14 3.5V12.5C14 13.3284 13.3284 14 12.5 14H3.5C2.67157 14 2 13.3284 2 12.5V3.5C2 2.67157 2.67157 2 3.5 2H12.5Z\"\r\n                fill=\"currentColor\"\r\n                fill-opacity=\"0.1\"\r\n              />\r\n              <path\r\n                d=\"M4 4H12M4 8H12M4 12H8\"\r\n                stroke=\"currentColor\"\r\n                stroke-width=\"1.5\"\r\n                stroke-linecap=\"round\"\r\n              />\r\n            </svg>\r\n          ) : (\r\n            <svg width=\"20\" height=\"10\" viewBox=\"0 0 20 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n              <rect x=\"0\" y=\"0\" width=\"20\" height=\"10\" rx=\"2\" fill=\"currentColor\" fill-opacity=\"0.1\" />\r\n              <text x=\"10\" y=\"7\" text-anchor=\"middle\" font-size=\"8\" fill=\"currentColor\" font-weight=\"600\">\r\n                Ctrl\r\n              </text>\r\n            </svg>\r\n          )}\r\n        </div>\r\n        <span part=\"key-text\" class=\"voa-keybinding__text\">\r\n          {this.shortcut}\r\n        </span>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n\r\n"]}