{"v":0,"docs":{"introdução--documentação":{"id":"introdução--documentação","name":"Documentação","path":"./src/docs/Introducao.mdx","title":"Introdução","content":"import { Meta } from '@storybook/addon-docs/blocks'\n\n<Meta title=\"Introdução\" />\n\n# idPlugger UI\n\nBiblioteca React de componentes para hotsites de campanhas promocionais. Um mesmo componente assume a identidade de\nqualquer marca por CSS custom properties (`--color-brand-*`), sem mudar o código.\n\nRequer React e React DOM 18 ou superior. Pacote: `@handsondigital/idplugger-ui`.\n\n## O que há aqui\n\n- **34 componentes** (`import { AppButton } from '@handsondigital/idplugger-ui'`) e **1.806 ícones**\n  (`@handsondigital/idplugger-ui/icons`, Material Icons, tree-shakeable).\n- **12 blocos** (Header, Hero, Footer, Login, Recuperar senha, Confirmação, Números da sorte, Banner de cookies,\n  Como participar, Cadastro de cupom, Produtos participantes e FAQ): seções prontas que **não fazem parte do pacote**;\n  copie o código para o hotsite e adapte.\n- **Organização:** a barra lateral agrupa os componentes por nível de composição (Foundations, Layout, Atoms,\n  Molecules e Organisms) e traz os blocos em **Blocos**.\n- **Tema:** use a barra de ferramentas para trocar a marca, o modo de cor e a densidade.\n\n## Estilos\n\nImporte nesta ordem:\n\n1. `tokens.css`: variáveis de cor, tamanho e tipografia.\n2. Um preset de marca (opcional): `themes/idplugger.css` ou `themes/campaign-orange.css` (ver **Theming**).\n3. `fonts.css` (opcional): Poppins e VAG Rundschrift D, as fontes da identidade idPlugger. Outras marcas não importam\n   e definem `--font-brand-heading` e `--font-brand-body`. Sem `fonts.css`, nenhum arquivo de fonte é pedido.\n4. O CSS dos componentes, por uma destas formas:\n   - **CSS completo:** `style.css` (sem camada; sem Tailwind ou com Tailwind 3) ou `style.layer.css` (dentro de\n     `@layer idplugger-ui`, para Tailwind 4 com `@layer theme, base, idplugger-ui, components, utilities;`).\n   - **CSS por componente:** `css/<Componente>.css` (ou `css/layer/<Componente>.css`), um por componente usado; a base\n     e as dependências vêm por `@import`. Não misture com `style.css` nem com `style.layer.css`. Peças compostas usam o\n     arquivo do componente pai (`AppTabs.css` cobre `AppTabList`, `AppTab` e `AppTabPanel`; `AppTable.css` cobre as\n     peças da tabela; `AppCard.css` cobre `AppCardMedia`, `AppCardBody` e `AppCardFooter`).\n\n```css\n@import '@handsondigital/idplugger-ui/tokens.css';\n@import '@handsondigital/idplugger-ui/fonts.css'; /* opcional */\n@import '@handsondigital/idplugger-ui/style.css';\n```\n\nTamanhos gzip aproximados (sem fontes): `style.css` 10,9 kB; só o CSS usado, de 3,1 kB (landing com Botão, Container e\nGrid) a 8,4 kB (hotsite completo típico, 18 componentes). `fonts.css` pesa 0,3 kB, e os arquivos woff2 (~55 kB) só são\nbaixados quando a fonte é usada.\n\nMarca, modo de cor e densidade são atributos por escopo: `data-brand`, `data-theme` (`light` ou `dark`) e\n`data-density`. Veja **Theming** e **Foundations**.\n","summary":"# idPlugger UI Biblioteca React de componentes para hotsites de campanhas promocionais. Um..."},"theming--documentação":{"id":"theming--documentação","name":"Documentação","path":"./src/docs/Theming.mdx","title":"Theming","content":"import { Meta } from '@storybook/addon-docs/blocks'\n\n<Meta title=\"Theming\" />\n\n# Theming e multi-brand\n\nUm componente é implementado uma vez e assume a identidade de cada marca por CSS custom properties.\n\n## Como funciona hoje\n\n1. Importe `@handsondigital/idplugger-ui/tokens.css` e o CSS dos componentes (`style.css`, `style.layer.css` ou `css/<Componente>.css`; ver **Introdução**).\n2. Sobrescreva o contrato da marca no `:root` do hotsite:\n\n```css\n:root {\n  --color-brand-primary: #0057b8;\n  --color-brand-primary-foreground: #ffffff;\n  --color-brand-primary-disabled: #9cbde3;\n  --color-brand-secondary: #e6f0fb;\n  --color-brand-secondary-fg: #003a7a;\n  --color-brand-secondary-hover: #cfe1f6;\n  --font-brand-heading: 'Minha Fonte', sans-serif;\n  --font-brand-body: 'Minha Fonte', sans-serif;\n  --radius-brand: 0.25rem;\n}\n```\n\n3. Modo de cor e densidade são atributos independentes: `data-theme=\"dark\"` e `data-density=\"medium\"`.\n\n## Contrato da marca\n\nUma marca é o conjunto das variáveis `--color-brand-*`, `--font-brand-*` e `--radius-brand`. Os valores padrão são os\nda idPlugger; o que a marca não redefine continua com o valor da idPlugger. Hover, pressionado, foco e desabilitado\nderivam destas cores: não sobrescreva os tokens `--button-*` e `--input-*` para trocar de marca.\n\n### Deve definir (identidade)\n\nSem estas variáveis, a marca herda o rosa da idPlugger. Todo fundo de marca tem o seu par de texto, escolhido pela marca\npara ter contraste de pelo menos 4,5:1.\n\n| Variável | Papel | idPlugger |\n|---|---|---|\n| `--color-brand-primary` | Ação principal (botão primário, foco, borda do campo focado) | `#EC2474` |\n| `--color-brand-primary-foreground` | Texto e ícone sobre a primária | `#FFFFFF` |\n| `--color-brand-primary-disabled` | Fundo do botão primário desabilitado | `#EB9EBD` |\n| `--color-brand-secondary` | Fundo da ação secundária e da aparência `soft` | `#F6DAE5` |\n| `--color-brand-secondary-fg` | Texto sobre a secundária; texto de `ghost`, `link` e `outline` secundários | `#AE1C57` |\n| `--color-brand-secondary-hover` | Fundo da secundária no hover | `#EFBCD1` |\n\n### Pode definir (neutros, status e apoio)\n\nOs padrões servem para qualquer marca; redefina só se o design da marca pedir.\n\n| Variável | Papel | idPlugger |\n|---|---|---|\n| `--color-brand-bg` / `--color-brand-text` | Fundo e texto principais | `#FFFFFF` / `#101828` |\n| `--color-brand-surface-muted` | Superfície sutil (hover neutro, campo desabilitado) | `#F9FAFB` |\n| `--color-brand-border` / `--color-brand-border-hover` | Bordas de campos, tags e botões neutros | `#D0D5DD` / `#667085` |\n| `--color-brand-success` / `-info` / `-warning` / `-danger` | Status (botões, toast, erro de campo) | `#34C759` / `#007AFF` / `#FFCC00` / `#D92D20` |\n| `--color-brand-<status>-foreground` | Texto sobre o fundo do status | branco; `#101828` no warning |\n| `--color-brand-accent` / `--color-brand-navy` | Apoio e fundos escuros | `#AE1C57` / `#0A223C` |\n| `--font-brand-heading` / `--font-brand-body` | Famílias de títulos e de texto | VAG Rundschrift D / Poppins |\n| `--radius-brand` | Raio de botões, campos e toast | `0.5rem` |\n\n## Marca e modo por escopo\n\nA marca e o modo valem para a subárvore do elemento que tem `data-brand` ou `data-theme`. Os tokens semânticos e de\ncomponente são recalculados nesses elementos, então uma seção pode ter outra marca ou outro modo:\n\n```html\n<section data-brand=\"minha-campanha\" style=\"--color-brand-primary: #c2410c\">…</section>\n<aside data-theme=\"dark\">…</aside>\n```\n\nSem um desses atributos, sobrescrever `--color-brand-*` num elemento não recalcula hover, pressionado nem foco.\n\n## Presets de marca\n\nCada preset é um CSS com `[data-brand=\"<nome>\"] { --color-brand-*: … }`, sem JavaScript e sem recompilar a biblioteca.\nImporte depois do `tokens.css` (mesma especificidade do `:root`: vence quem vem por último) e marque o elemento:\n\n```css\n@import '@handsondigital/idplugger-ui/tokens.css';\n@import '@handsondigital/idplugger-ui/themes/campaign-orange.css';\n@import '@handsondigital/idplugger-ui/style.css';\n```\n\n```html\n<html data-brand=\"campaign-orange\">…</html>\n```\n\n| Preset | Uso |\n|---|---|\n| `themes/idplugger.css` | A marca padrão; serve para voltar à idPlugger dentro de outra marca |\n| `themes/campaign-orange.css` | Demonstração de campanha (laranja, raio menor); ponto de partida para uma marca nova |\n\nUma marca/campanha nova pode declarar o próprio `[data-brand=\"minha-campanha\"] { … }` no CSS do hotsite, com as variáveis da\nseção **Deve definir**. Na barra de ferramentas do Storybook, troque a marca para ver os componentes em cada preset.\n\n## Modo escuro\n\n`data-theme=\"dark\"` vale para a subárvore, inclusive dentro de uma marca aninhada; `data-theme=\"light\"` volta ao claro.\nO modo escuro não segue o sistema operacional sozinho: defina o atributo (por exemplo, a partir de\n`matchMedia('(prefers-color-scheme: dark)')`) se o hotsite quiser acompanhar o sistema. Os valores escuros vêm dos tokens semânticos.\n\n## Densidade\n\n`data-density=\"medium|large|extra-large\"` (padrão `regular`) vale para a subárvore. Hoje só o `AppButton` lê a\ndensidade: o gap entre texto e ícone (8, 8, 12 e 12px) e o ícone (16, 16, 16 e 24px) crescem com ela, mas nunca ficam\nabaixo do que o tamanho `sm`–`2xl` pede (ícone de 20px, 24px no `2xl`). Altura e padding seguem o tamanho. Veja\n**Theming/Densidade**.\n\n## Contraste\n\nA story **Theming/Contraste** apresenta os pares de texto e fundo de cada marca e modo, com as cores resolvidas pelo\nnavegador. O mínimo para texto normal é 4,5:1. Os pares nas cores da marca (botões primário e secundário, badge primário)\naparecem com aviso quando ficam abaixo desse valor. Os demais pares são definidos pela biblioteca.\n\nA cor da marca não precisa mudar: se o branco não chega a 4,5:1 sobre ela, escolha um texto escuro em\n`--color-brand-primary-foreground`. Bordas de campo, anéis de foco e ícones não entram nessa tabela de texto.\n\n## Camadas de tokens\n\nPrimitivo (`--color-gray-500`, `--size-4`) → marca (`--color-brand-*`, o contrato acima) → semântico (intenção:\n`--color-surface`, `--color-foreground*`, `--color-border*`, `--color-focus-*`, `--color-action-<tom>*`,\n`--color-feedback-<status>*`) → componente (`--button-*`, `--input-*`, `--pagination-*`, `--tag-*`, `--toast-*`,\n`--app-modal-*`). Os componentes só leem tokens de componente e semânticos. Para trocar a marca, sobrescreva a camada\nde marca; para ajustar um componente sem mudar a marca, sobrescreva o token dele.\n","summary":"# Theming e multi-brand Um componente é implementado uma vez e assume a identidade de cada..."},"foundations-cores--documentação":{"id":"foundations-cores--documentação","name":"Documentação","path":"./src/docs/foundations/Cores.mdx","title":"Foundations/Cores","content":"import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs/blocks'\n\n<Meta title=\"Foundations/Cores\" />\n\nexport const scales = ['red', 'orange', 'yellow', 'green', 'mint', 'teal', 'cyan', 'blue', 'indigo', 'purple', 'gray']\nexport const steps = ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900']\nexport const neutralSteps = ['0', '10', '20', '30', '40', '50', '60', '70', '80', '90', '100', '200', '300', '400', '500', '600', '700', '800', '900']\nexport const swatches = (name, list) => Object.fromEntries(list.map((step) => [step, `var(--color-${name}-${step})`]))\n\n# Cores\n\nTodas as cores são CSS custom properties de `@handsondigital/idplugger-ui/tokens.css`. As amostras abaixo leem as\nvariáveis do tema ativo: troque a marca ou o modo na barra de ferramentas e elas acompanham.\n\n## Marca (contrato da marca)\n\nEstas são as variáveis que uma marca sobrescreve (ver **Theming**). Cada fundo de marca tem o seu par de texto.\n\n<ColorPalette>\n  <ColorItem title=\"Primária\" subtitle=\"--color-brand-primary / -foreground / -disabled\" colors={{ base: 'var(--color-brand-primary)', texto: 'var(--color-brand-primary-foreground)', desabilitado: 'var(--color-brand-primary-disabled)' }} />\n  <ColorItem title=\"Secundária\" subtitle=\"--color-brand-secondary / -fg / -hover\" colors={{ fundo: 'var(--color-brand-secondary)', texto: 'var(--color-brand-secondary-fg)', hover: 'var(--color-brand-secondary-hover)' }} />\n  <ColorItem title=\"Destaque\" subtitle=\"--color-brand-accent\" colors={{ base: 'var(--color-brand-accent)' }} />\n  <ColorItem title=\"Texto e fundo\" subtitle=\"--color-brand-text / -bg / -surface-muted\" colors={{ texto: 'var(--color-brand-text)', fundo: 'var(--color-brand-bg)', superfície: 'var(--color-brand-surface-muted)' }} />\n  <ColorItem title=\"Bordas\" subtitle=\"--color-brand-border / -border-hover\" colors={{ borda: 'var(--color-brand-border)', hover: 'var(--color-brand-border-hover)' }} />\n  <ColorItem title=\"Status\" subtitle=\"--color-brand-success / info / warning / danger\" colors={{ success: 'var(--color-brand-success)', info: 'var(--color-brand-info)', warning: 'var(--color-brand-warning)', danger: 'var(--color-brand-danger)' }} />\n  <ColorItem title=\"Navy\" subtitle=\"--color-brand-navy\" colors={{ base: 'var(--color-brand-navy)' }} />\n</ColorPalette>\n\n## Semânticas (intenção de uso)\n\nDerivam da marca e mudam com o modo de cor (`data-theme`). São o que os componentes e o CSS próprio do hotsite devem\nusar para superfície, texto e borda.\n\n<ColorPalette>\n  <ColorItem title=\"Superfície\" subtitle=\"--color-surface / -muted / -strong\" colors={{ surface: 'var(--color-surface)', muted: 'var(--color-surface-muted)', strong: 'var(--color-surface-strong)' }} />\n  <ColorItem title=\"Texto\" subtitle=\"--color-foreground / -strong / -soft / -muted / -subtle / -faint / -disabled\" colors={{ foreground: 'var(--color-foreground)', strong: 'var(--color-foreground-strong)', soft: 'var(--color-foreground-soft)', muted: 'var(--color-foreground-muted)', subtle: 'var(--color-foreground-subtle)', faint: 'var(--color-foreground-faint)', disabled: 'var(--color-foreground-disabled)' }} />\n  <ColorItem title=\"Borda\" subtitle=\"--color-border / -strong / -subtle / -faint\" colors={{ border: 'var(--color-border)', strong: 'var(--color-border-strong)', subtle: 'var(--color-border-subtle)', faint: 'var(--color-border-faint)' }} />\n  <ColorItem title=\"Ação primária\" subtitle=\"--color-action-primary / -hover / -active / -disabled / -foreground\" colors={{ base: 'var(--color-action-primary)', hover: 'var(--color-action-primary-hover)', active: 'var(--color-action-primary-active)', disabled: 'var(--color-action-primary-disabled)', texto: 'var(--color-action-primary-foreground)' }} />\n  <ColorItem title=\"Feedback\" subtitle=\"--color-feedback-<status> / -bg / -fg / -border\" colors={{ success: 'var(--color-feedback-success-fg)', info: 'var(--color-feedback-info-fg)', warning: 'var(--color-feedback-warning-fg)', danger: 'var(--color-feedback-danger-fg)' }} />\n</ColorPalette>\n\n**Quando usar:** em CSS próprio do hotsite, prefira os tokens semânticos e de componente aos hex e às escalas.\n**Quando não usar:** não use as escalas abaixo para cores de ação ou de texto em componentes: elas não mudam com a\nmarca nem com o modo.\n\n## Escalas de cores\n\n<ColorPalette>\n  {scales.map((name) => (\n    <ColorItem key={name} title={name} subtitle={`--color-${name}-50…900`} colors={swatches(name, steps)} />\n  ))}\n  <ColorItem title=\"neutral\" subtitle=\"--color-neutral-0…900\" colors={swatches('neutral', neutralSteps)} />\n</ColorPalette>\n","summary":"export const scales = ['red', 'orange', 'yellow', 'green', 'mint', 'teal', 'cyan', 'blue',..."},"foundations-espaçamento-e-raio--documentação":{"id":"foundations-espaçamento-e-raio--documentação","name":"Documentação","path":"./src/docs/foundations/Espacamento.mdx","title":"Foundations/Espaçamento e raio","content":"import { Meta } from '@storybook/addon-docs/blocks'\n\n<Meta title=\"Foundations/Espaçamento e raio\" />\n\nexport const sizes = [['1', 4], ['1half', 6], ['2', 8], ['2half', 10], ['3', 12], ['4', 16], ['5', 20], ['6', 24], ['7', 28], ['8', 32]]\n\n# Espaçamento e raio\n\nEscala `--size-*` (base de 4px):\n\n<table>\n  <thead>\n    <tr><th>Token</th><th>Valor</th><th></th></tr>\n  </thead>\n  <tbody>\n    {sizes.map(([name, px]) => (\n      <tr key={name}>\n        <td><code>--size-{name}</code></td>\n        <td>{px}px</td>\n        <td><span style={{ display: 'block', width: `var(--size-${name})`, height: 12, background: 'var(--color-brand-primary)', borderRadius: 2 }} /></td>\n      </tr>\n    ))}\n  </tbody>\n</table>\n\nRaio padrão: `--radius-brand` (8px), usado por botões, campos e toasts. `data-density` ajusta o gap e o ícone do `AppButton`, respeitando o mínimo do tamanho escolhido.\n","summary":"export const sizes = [['1', 4], ['1half', 6], ['2', 8], ['2half', 10], ['3', 12], ['4', 16..."},"foundations-tipografia--documentação":{"id":"foundations-tipografia--documentação","name":"Documentação","path":"./src/docs/foundations/Tipografia.mdx","title":"Foundations/Tipografia","content":"import { Meta, Typeset } from '@storybook/addon-docs/blocks'\n\n<Meta title=\"Foundations/Tipografia\" />\n\n# Tipografia\n\nDuas famílias, ambas distribuídas em `@handsondigital/idplugger-ui/fonts.css` (import opcional, ver **Introdução**): **VAG Rundschrift D** nos títulos `h1` a `h5`\n(`--font-brand-heading`, peso único) e **Poppins** no restante (`--font-brand-body`, 400 a 700). Uma marca troca as\nfamílias sobrescrevendo essas duas variáveis, sem importar `fonts.css`, e carrega as próprias fontes.\n\n## Títulos (VAG Rundschrift D)\n\nTamanhos desktop; `h1` a `h4` diminuem abaixo de 768px (40, 30, 28 e 24px).\n\n<Typeset fontFamily=\"var(--font-brand-heading)\" fontSizes={[60, 50, 40, 30, 24]} fontWeight={400} sampleText=\"Concorra a prêmios incríveis\" />\n\n## Texto (Poppins)\n\n`h6` 20 · `body-large` 18 · `body` 16 · `footnote` 14 · `caption` 13 · `small` 12, line-height 1,5, pesos 400 e 500.\n\n<Typeset fontFamily=\"var(--font-brand-body)\" fontSizes={[20, 18, 16, 14, 13, 12]} fontWeight={400} sampleText=\"Cadastre suas notas fiscais e receba números da sorte.\" />\n\nUse o componente `Typography` (Foundations/Typography) em vez de estilizar textos à mão.\n","summary":"# Tipografia Duas famílias, ambas distribuídas em `@handsondigital/idplugger-ui/fonts.css`..."}}}