lsoft-ui 0.0.1

package/dist/stories/Londrisoft/Components/CustomModalNfe.stories.js

@@ -0,0 +1,589 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Button, VStack, Text, Box, HStack } from "@chakra-ui/react";
+import { CustomModalNfe, StatusNFeResumeEnum, } from "../../../components/CustomModalNfe";
+const meta = {
+    title: "Londrisoft/Components/CustomModalNfe",
+    component: CustomModalNfe,
+    tags: ["autodocs"],
+    args: {
+        isOpen: false,
+        onClose: () => { },
+        size: "2xl",
+        nfSelected: {
+            serie: "001",
+            nfnumero: 123456,
+            modelo: 55,
+            dataemissao: "2024-01-15T10:30:00Z",
+            datacancelado: "",
+            clicnpj: "12.345.678/0001-90",
+            agente: 1,
+            nomagente: "João Silva",
+            pedido: 789,
+            totalnota: 1500.75,
+            chave_nfe: "35200112345678000190550000001234567890123456",
+            tpamb: "1",
+            cliemail: "cliente@exemplo.com",
+            mensagem: "",
+            status: "100",
+        },
+    },
+    argTypes: {
+        isOpen: {
+            control: { type: "boolean" },
+            description: "Controla se o modal está aberto ou fechado. Deve ser gerenciado pelo componente pai.",
+            table: { category: "State" },
+        },
+        onClose: {
+            action: "closed",
+            description: "Função callback chamada quando o modal é fechado (clique no X, ESC, overlay, etc.).",
+            table: { category: "Events" },
+        },
+        size: {
+            control: { type: "select", options: ["sm", "md", "lg", "xl", "2xl"] },
+            description: "Tamanho do modal (largura do ModalContent). Padrão: '2xl'.",
+            table: { category: "Appearance" },
+        },
+        nfSelected: {
+            control: "object",
+            description: "Objeto com os dados da nota fiscal a ser exibida. Deve seguir a interface NFeNotaItem.",
+            table: { category: "Content" },
+        },
+        bodyOptions: {
+            control: "text",
+            description: "Conteúdo adicional opcional a ser exibido no corpo do modal. Aceita ReactNode.",
+            table: { category: "Content" },
+        },
+    },
+    parameters: {
+        docs: {
+            description: {
+                component: `
+**CustomModalNfe** é um componente modal especializado para exibição de detalhes de Nota Fiscal Eletrônica (NFe), com suporte a diferentes status e formatação automática de dados.
+
+## Características Principais
+
+- **Especializado em NFe**: Componente específico para exibição de dados de notas fiscais
+- **Status Visuais**: Suporte a 6 status diferentes com cores e ícones específicos
+- **Formatação Automática**: Formatação automática de chave de acesso (44 dígitos)
+- **Cópia de Chave**: Funcionalidade de copiar chave de acesso com feedback visual
+- **Layout Responsivo**: Campos organizados em grid flexível
+- **Acessibilidade**: Implementação completa de ARIA labels e navegação por teclado
+- **Extensível**: Suporte a conteúdo customizado via \`bodyOptions\`
+- **Integração com Toast**: Feedback visual ao copiar chave de acesso
+
+## Casos de Uso Comuns
+
+- **Visualização de NFe**: Exibir detalhes completos de uma nota fiscal
+- **Status de Processamento**: Mostrar status atual da nota (aprovada, cancelada, etc.)
+- **Cópia de Chave**: Permitir copiar chave de acesso para uso externo
+- **Detalhes de Emissão**: Exibir série, número, modelo e data de emissão
+- **Mensagens de Erro**: Exibir mensagens quando a nota contém "Arquivo XML"
+
+## Benefícios de UX
+
+- **Feedback Visual Imediato**: Status claros com cores e ícones
+- **Ações Rápidas**: Cópia de chave com um clique
+- **Informação Organizada**: Layout claro e hierárquico
+- **Acessibilidade**: Suporte completo para usuários com necessidades especiais
+- **Consistência**: Padrão visual uniforme para todas as NFe
+
+## Status Suportados
+
+- **100 (APPROVED)**: Nota fiscal aprovada - verde (alert.success)
+- **101 (CANCELED)**: Nota fiscal cancelada - vermelho (alert.error)
+- **102 (INUTILIZED)**: Nota fiscal inutilizada - vermelho (alert.error)
+- **103 (DENIED)**: Nota fiscal não autorizada - amarelo (alert.warning)
+- **104 (NOT_TRANSMITTED)**: Nota fiscal não transmitida - amarelo (alert.warning)
+- **105 (WITH_ERROR)**: Nota fiscal rejeitada - amarelo (alert.warning)
+        `,
+            },
+        },
+        backgrounds: {
+            default: "light",
+            values: [
+                { name: "light", value: "#ffffff" },
+                { name: "dark", value: "#000000" },
+            ],
+        },
+        a11y: {
+            element: "#root",
+        },
+    },
+};
+export default meta;
+/** 🎯 Default: Exemplo básico do CustomModalNfe */
+export const Default = {
+    name: "Padrão",
+    render: (args) => {
+        const [isOpen, setIsOpen] = useState(false);
+        return (_jsxs(VStack, { spacing: 4, children: [_jsx(Button, { onClick: () => setIsOpen(true), children: "Abrir Modal NFe" }), _jsx(CustomModalNfe, Object.assign({}, args, { isOpen: isOpen, onClose: () => setIsOpen(false) }))] }));
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: `
+**Exemplo básico** do CustomModalNfe com configuração padrão.
+
+**Características:**
+- Modal com tamanho 2xl (padrão)
+- Exibe dados básicos da nota fiscal
+- Status aprovado (100)
+- Chave de acesso formatada
+- Botão de fechar funcional
+
+**Casos de uso:**
+- Visualização rápida de NFe
+- Detalhes de nota aprovada
+- Consulta de informações básicas
+
+**Dicas de implementação:**
+- Gerencie o estado \`isOpen\` no componente pai
+- Forneça todos os dados obrigatórios em \`nfSelected\`
+- Use \`onClose\` para atualizar o estado de abertura
+        `,
+            },
+            source: {
+                code: `
+import React, { useState } from 'react';
+import { CustomModalNfe, StatusNFeResumeEnum, NFeNotaItem } from './CustomModalNfe';
+import { Button } from '@chakra-ui/react';
+
+const BasicModalNfe = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const nfData: NFeNotaItem = {
+    serie: "001",
+    nfnumero: 123456,
+    modelo: 55,
+    dataemissao: "2024-01-15T10:30:00Z",
+    datacancelado: "",
+    clicnpj: "12.345.678/0001-90",
+    agente: 1,
+    nomagente: "João Silva",
+    pedido: 789,
+    totalnota: 1500.75,
+    chave_nfe: "35200112345678000190550000001234567890123456",
+    tpamb: "1",
+    cliemail: "cliente@exemplo.com",
+    mensagem: "",
+    status: "100",
+  };
+
+  return (
+    <>
+      <Button onClick={() => setIsOpen(true)}>Abrir Modal NFe</Button>
+      <CustomModalNfe
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        nfSelected={nfData}
+      />
+    </>
+  );
+};
+        `,
+                language: "tsx",
+            },
+        },
+    },
+};
+/** 📊 Status: Demonstração de diferentes status */
+export const Status = {
+    name: "Status",
+    render: () => {
+        const [isOpen, setIsOpen] = useState(false);
+        const [currentStatus, setCurrentStatus] = useState(StatusNFeResumeEnum.APPROVED);
+        const baseNfData = {
+            serie: "001",
+            nfnumero: 123456,
+            modelo: 55,
+            dataemissao: "2024-01-15T10:30:00Z",
+            datacancelado: "",
+            clicnpj: "12.345.678/0001-90",
+            agente: 1,
+            nomagente: "João Silva",
+            pedido: 789,
+            totalnota: 1500.75,
+            chave_nfe: "35200112345678000190550000001234567890123456",
+            tpamb: "1",
+            cliemail: "cliente@exemplo.com",
+            mensagem: "",
+            status: String(currentStatus),
+        };
+        const statusOptions = [
+            { value: StatusNFeResumeEnum.APPROVED, label: "Aprovada (100)" },
+            { value: StatusNFeResumeEnum.CANCELED, label: "Cancelada (101)" },
+            { value: StatusNFeResumeEnum.INUTILIZED, label: "Inutilizada (102)" },
+            { value: StatusNFeResumeEnum.DENIED, label: "Não Autorizada (103)" },
+            { value: StatusNFeResumeEnum.NOT_TRANSMITTED, label: "Não Transmitida (104)" },
+            { value: StatusNFeResumeEnum.WITH_ERROR, label: "Rejeitada (105)" },
+        ];
+        return (_jsxs(VStack, { spacing: 6, align: "stretch", children: [_jsxs(Box, { children: [_jsx(Text, { fontSize: "lg", fontWeight: "bold", mb: 3, children: "Selecione um Status" }), _jsx(HStack, { spacing: 2, flexWrap: "wrap", children: statusOptions.map((option) => (_jsx(Button, { size: "sm", onClick: () => {
+                                    setCurrentStatus(option.value);
+                                    setIsOpen(true);
+                                }, colorScheme: currentStatus === option.value ? "blue" : "gray", children: option.label }, option.value))) })] }), _jsx(CustomModalNfe, { isOpen: isOpen, onClose: () => setIsOpen(false), nfSelected: baseNfData })] }));
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: `
+**Demonstração** dos diferentes status de NFe e suas representações visuais.
+
+**Status disponíveis:**
+
+1. **Aprovada (100)**
+   - Cor: Verde (alert.success)
+   - Ícone: CheckCircle2Icon
+   - Mensagem: "Nota fiscal aprovada"
+
+2. **Cancelada (101)**
+   - Cor: Vermelho (alert.error)
+   - Ícone: XCircle
+   - Mensagem: "Nota fiscal cancelada"
+
+3. **Inutilizada (102)**
+   - Cor: Vermelho (alert.error)
+   - Ícone: CircleSlash
+   - Mensagem: "Nota fiscal inutilizada"
+
+4. **Não Autorizada (103)**
+   - Cor: Amarelo (alert.warning)
+   - Ícone: XCircle
+   - Mensagem: "Nota fiscal não autorizada"
+
+5. **Não Transmitida (104)**
+   - Cor: Amarelo (alert.warning)
+   - Ícone: XCircle
+   - Mensagem: "Nota fiscal não transmitida"
+
+6. **Rejeitada (105)**
+   - Cor: Amarelo (alert.warning)
+   - Ícone: XCircle
+   - Mensagem: "Nota fiscal rejeitada"
+
+**Casos de uso:**
+- Visualizar status atual da nota
+- Identificar problemas rapidamente
+- Feedback visual imediato
+
+**Dicas de implementação:**
+- Use cores consistentes para facilitar identificação
+- Ícones ajudam na compreensão rápida
+- Mensagens devem ser claras e objetivas
+        `,
+            },
+        },
+    },
+};
+/** 📋 Com Mensagem XML: Exibe textarea quando há mensagem com "Arquivo XML" */
+export const WithXmlMessage = {
+    name: "Com Mensagem XML",
+    render: () => {
+        const [isOpen, setIsOpen] = useState(false);
+        const nfDataWithMessage = {
+            serie: "001",
+            nfnumero: 123456,
+            modelo: 55,
+            dataemissao: "2024-01-15T10:30:00Z",
+            datacancelado: "",
+            clicnpj: "12.345.678/0001-90",
+            agente: 1,
+            nomagente: "João Silva",
+            pedido: 789,
+            totalnota: 1500.75,
+            chave_nfe: "35200112345678000190550000001234567890123456",
+            tpamb: "1",
+            cliemail: "cliente@exemplo.com",
+            mensagem: "Arquivo XML não encontrado ou inválido. Verifique os dados e tente novamente.",
+            status: "105",
+        };
+        return (_jsxs(VStack, { spacing: 4, children: [_jsx(Button, { onClick: () => setIsOpen(true), children: "Abrir Modal com Mensagem XML" }), _jsx(CustomModalNfe, { isOpen: isOpen, onClose: () => setIsOpen(false), nfSelected: nfDataWithMessage })] }));
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: `
+**Demonstração** do comportamento quando a mensagem contém "Arquivo XML".
+
+**Comportamento:**
+- Quando \`mensagem\` contém "Arquivo XML", exibe \`CustomTextarea\` em vez de \`CustomInput\`
+- Textarea permite visualizar mensagens longas
+- Campo de chave de acesso não é exibido quando há mensagem XML
+
+**Casos de uso:**
+- Erros relacionados a arquivo XML
+- Mensagens de validação longas
+- Informações detalhadas sobre problemas
+
+**Dicas de implementação:**
+- Use mensagens claras e descritivas
+- Considere truncamento para mensagens muito longas
+- Forneça contexto suficiente para o usuário resolver o problema
+        `,
+            },
+        },
+    },
+};
+/** 🎨 Com Conteúdo Customizado: Usando bodyOptions */
+export const WithCustomContent = {
+    name: "Com Conteúdo Customizado",
+    render: () => {
+        const [isOpen, setIsOpen] = useState(false);
+        const nfData = {
+            serie: "001",
+            nfnumero: 123456,
+            modelo: 55,
+            dataemissao: "2024-01-15T10:30:00Z",
+            datacancelado: "",
+            clicnpj: "12.345.678/0001-90",
+            agente: 1,
+            nomagente: "João Silva",
+            pedido: 789,
+            totalnota: 1500.75,
+            chave_nfe: "35200112345678000190550000001234567890123456",
+            tpamb: "1",
+            cliemail: "cliente@exemplo.com",
+            mensagem: "",
+            status: "100",
+        };
+        const customBodyContent = (_jsxs(Box, { mt: 4, p: 4, bg: "gray.50", borderRadius: "md", children: [_jsx(Text, { fontSize: "sm", fontWeight: "bold", mb: 2, children: "Informa\u00E7\u00F5es Adicionais" }), _jsxs(VStack, { align: "stretch", spacing: 2, children: [_jsxs(Text, { fontSize: "xs", children: [_jsx("strong", { children: "CNPJ Cliente:" }), " ", nfData.clicnpj] }), _jsxs(Text, { fontSize: "xs", children: [_jsx("strong", { children: "E-mail:" }), " ", nfData.cliemail] }), _jsxs(Text, { fontSize: "xs", children: [_jsx("strong", { children: "Pedido:" }), " ", nfData.pedido] }), _jsxs(Text, { fontSize: "xs", children: [_jsx("strong", { children: "Total:" }), " R$ ", nfData.totalnota.toFixed(2)] })] })] }));
+        return (_jsxs(VStack, { spacing: 4, children: [_jsx(Button, { onClick: () => setIsOpen(true), children: "Abrir Modal com Conte\u00FAdo Customizado" }), _jsx(CustomModalNfe, { isOpen: isOpen, onClose: () => setIsOpen(false), nfSelected: nfData, bodyOptions: customBodyContent })] }));
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: `
+**Demonstração** do uso de \`bodyOptions\` para adicionar conteúdo customizado.
+
+**Funcionalidades:**
+- \`bodyOptions\` permite adicionar qualquer ReactNode após os campos padrão
+- Útil para informações adicionais, ações, ou conteúdo específico
+- Mantém o layout consistente com o resto do modal
+
+**Casos de uso:**
+- Informações adicionais da nota
+- Botões de ação (download, reenvio, etc.)
+- Histórico de eventos
+- Links relacionados
+
+**Dicas de implementação:**
+- Use para informações complementares
+- Mantenha consistência visual
+- Considere responsividade
+- Não abuse - mantenha o modal focado
+        `,
+            },
+        },
+    },
+};
+/** 📏 Tamanhos: Demonstração de diferentes tamanhos */
+export const Sizes = {
+    name: "Tamanhos",
+    render: () => {
+        const [isOpen, setIsOpen] = useState(false);
+        const [currentSize, setCurrentSize] = useState("2xl");
+        const nfData = {
+            serie: "001",
+            nfnumero: 123456,
+            modelo: 55,
+            dataemissao: "2024-01-15T10:30:00Z",
+            datacancelado: "",
+            clicnpj: "12.345.678/0001-90",
+            agente: 1,
+            nomagente: "João Silva",
+            pedido: 789,
+            totalnota: 1500.75,
+            chave_nfe: "35200112345678000190550000001234567890123456",
+            tpamb: "1",
+            cliemail: "cliente@exemplo.com",
+            mensagem: "",
+            status: "100",
+        };
+        const sizes = ["sm", "md", "lg", "xl", "2xl"];
+        return (_jsxs(VStack, { spacing: 6, align: "stretch", children: [_jsxs(Box, { children: [_jsx(Text, { fontSize: "lg", fontWeight: "bold", mb: 3, children: "Selecione um Tamanho" }), _jsx(HStack, { spacing: 2, flexWrap: "wrap", children: sizes.map((size) => (_jsx(Button, { size: "sm", onClick: () => {
+                                    setCurrentSize(size);
+                                    setIsOpen(true);
+                                }, colorScheme: currentSize === size ? "blue" : "gray", children: size.toUpperCase() }, size))) })] }), _jsx(CustomModalNfe, { isOpen: isOpen, onClose: () => setIsOpen(false), nfSelected: nfData, size: currentSize })] }));
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: `
+**Demonstração** dos diferentes tamanhos disponíveis para o modal.
+
+**Tamanhos disponíveis:**
+- **sm**: Pequeno - ideal para informações mínimas
+- **md**: Médio - uso geral
+- **lg**: Grande - mais espaço para conteúdo
+- **xl**: Extra grande - muito espaço
+- **2xl**: Extra extra grande (padrão) - máximo espaço para NFe
+
+**Casos de uso por tamanho:**
+- **sm/md**: Visualização rápida em telas pequenas
+- **lg/xl**: Uso geral em desktop
+- **2xl**: Padrão recomendado para NFe (mais informações)
+
+**Dicas de implementação:**
+- Use 2xl como padrão para NFe (mais informações)
+- Considere responsividade em telas menores
+- Teste em diferentes resoluções
+        `,
+            },
+        },
+    },
+};
+/** 🔍 Casos Extremos: Edge cases e valores inválidos */
+export const EdgeCases = {
+    name: "Casos Extremos",
+    render: () => {
+        const [isOpen, setIsOpen] = useState(false);
+        const [testCase, setTestCase] = useState("short");
+        const testCases = {
+            short: {
+                serie: "1",
+                nfnumero: 1,
+                modelo: 1,
+                dataemissao: "2024-01-01T00:00:00Z",
+                chave_nfe: "12345678901234567890123456789012345678901234",
+                status: "100",
+            },
+            long: {
+                serie: "999",
+                nfnumero: 999999999,
+                modelo: 999,
+                dataemissao: "2024-12-31T23:59:59Z",
+                chave_nfe: "35200112345678000190550000001234567890123456",
+                status: "100",
+            },
+            invalid: {
+                serie: "",
+                nfnumero: 0,
+                modelo: 0,
+                dataemissao: "invalid-date",
+                chave_nfe: "123", // chave inválida (menos de 44 caracteres)
+                status: "999", // status inválido
+            },
+        };
+        const nfData = Object.assign(Object.assign({}, testCases[testCase]), { datacancelado: "", clicnpj: "12.345.678/0001-90", agente: 1, nomagente: "João Silva", pedido: 789, totalnota: 1500.75, tpamb: "1", cliemail: "cliente@exemplo.com", mensagem: "" });
+        return (_jsxs(VStack, { spacing: 6, align: "stretch", children: [_jsxs(Box, { children: [_jsx(Text, { fontSize: "lg", fontWeight: "bold", mb: 3, children: "Teste Casos Extremos" }), _jsxs(HStack, { spacing: 2, flexWrap: "wrap", children: [_jsx(Button, { size: "sm", onClick: () => {
+                                        setTestCase("short");
+                                        setIsOpen(true);
+                                    }, colorScheme: testCase === "short" ? "blue" : "gray", children: "Valores M\u00EDnimos" }), _jsx(Button, { size: "sm", onClick: () => {
+                                        setTestCase("long");
+                                        setIsOpen(true);
+                                    }, colorScheme: testCase === "long" ? "blue" : "gray", children: "Valores M\u00E1ximos" }), _jsx(Button, { size: "sm", onClick: () => {
+                                        setTestCase("invalid");
+                                        setIsOpen(true);
+                                    }, colorScheme: testCase === "invalid" ? "blue" : "gray", children: "Valores Inv\u00E1lidos" })] })] }), _jsx(CustomModalNfe, { isOpen: isOpen, onClose: () => setIsOpen(false), nfSelected: nfData })] }));
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: `
+**Demonstração** de como o modal lida com casos extremos e valores inválidos.
+
+**Casos testados:**
+
+1. **Valores Mínimos:**
+   - Série, número e modelo com valores mínimos
+   - Chave de acesso válida (44 caracteres)
+   - Status válido
+
+2. **Valores Máximos:**
+   - Série, número e modelo com valores máximos
+   - Chave de acesso válida
+   - Data no limite
+
+3. **Valores Inválidos:**
+   - Campos vazios ou zero
+   - Chave de acesso inválida (< 44 caracteres)
+   - Status inválido (999)
+   - Data inválida
+
+**Comportamento esperado:**
+- Chave de acesso com menos de 44 caracteres não é formatada
+- Status inválido usa ícone padrão (XCircle)
+- Campos vazios são exibidos como estão
+- Data inválida pode causar erro na formatação
+
+**Dicas de implementação:**
+- Valide dados antes de passar para o modal
+- Trate casos extremos no componente pai
+- Forneça valores padrão quando apropriado
+        `,
+            },
+        },
+    },
+};
+/** ♿ Acessibilidade: Demonstração de recursos de acessibilidade */
+export const Accessibility = {
+    name: "Acessibilidade",
+    render: () => {
+        const [isOpen, setIsOpen] = useState(false);
+        const nfData = {
+            serie: "001",
+            nfnumero: 123456,
+            modelo: 55,
+            dataemissao: "2024-01-15T10:30:00Z",
+            datacancelado: "",
+            clicnpj: "12.345.678/0001-90",
+            agente: 1,
+            nomagente: "João Silva",
+            pedido: 789,
+            totalnota: 1500.75,
+            chave_nfe: "35200112345678000190550000001234567890123456",
+            tpamb: "1",
+            cliemail: "cliente@exemplo.com",
+            mensagem: "",
+            status: "100",
+        };
+        return (_jsxs(VStack, { spacing: 4, children: [_jsxs(Box, { p: 4, bg: "blue.50", borderRadius: "md", maxW: "600px", children: [_jsx(Text, { fontSize: "sm", fontWeight: "bold", mb: 2, children: "Recursos de Acessibilidade" }), _jsxs(VStack, { align: "stretch", spacing: 2, fontSize: "xs", children: [_jsxs(Text, { children: ["\u2022 ", _jsx("strong", { children: "ARIA labels:" }), " aria-labelledby e aria-describedby configurados"] }), _jsxs(Text, { children: ["\u2022 ", _jsx("strong", { children: "Navega\u00E7\u00E3o por teclado:" }), " ESC fecha o modal, Tab navega entre elementos"] }), _jsxs(Text, { children: ["\u2022 ", _jsx("strong", { children: "Foco:" }), " Retorna ao elemento anterior ao fechar"] }), _jsxs(Text, { children: ["\u2022 ", _jsx("strong", { children: "Bot\u00E3o fechar:" }), " Acess\u00EDvel via teclado (Enter ou Espa\u00E7o)"] }), _jsxs(Text, { children: ["\u2022 ", _jsx("strong", { children: "\u00CDcone copiar:" }), " Acess\u00EDvel via teclado com aria-label"] }), _jsxs(Text, { children: ["\u2022 ", _jsx("strong", { children: "Sem\u00E2ntica:" }), " Uso correto de roles e labels"] })] })] }), _jsx(Button, { onClick: () => setIsOpen(true), children: "Abrir Modal (Teste Acessibilidade)" }), _jsx(CustomModalNfe, { isOpen: isOpen, onClose: () => setIsOpen(false), nfSelected: nfData })] }));
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: `
+**Demonstração** dos recursos de acessibilidade implementados no modal.
+
+**Recursos de Acessibilidade:**
+
+1. **ARIA Labels:**
+   - \`aria-labelledby="modal-nfe-title"\` - vincula título ao modal
+   - \`aria-describedby="modal-nfe-description"\` - vincula descrição ao modal
+   - \`aria-label\` nos botões de ação
+
+2. **Navegação por Teclado:**
+   - **ESC**: Fecha o modal
+   - **Tab**: Navega entre elementos focáveis
+   - **Enter/Espaço**: Ativa botões e ações
+
+3. **Foco:**
+   - Foco automático no primeiro elemento ao abrir
+   - Retorna foco ao elemento anterior ao fechar
+   - Gerenciamento correto de foco durante interações
+
+4. **Semântica:**
+   - Uso correto de \`role="button"\` em elementos clicáveis
+   - \`tabIndex={0}\` em elementos interativos
+   - Labels descritivos para leitores de tela
+
+5. **Leitores de Tela:**
+   - Anúncio correto do título e descrição
+   - Feedback ao copiar chave de acesso
+   - Navegação lógica entre elementos
+
+**Conformidade WCAG:**
+- ✅ Nível A: Contraste, navegação, labels
+- ✅ Nível AA: Foco visível, teclado, semântica
+- ✅ Boas práticas: Feedback, orientação, consistência
+
+**Dicas de implementação:**
+- Teste com leitores de tela (NVDA, JAWS, VoiceOver)
+- Valide com ferramentas de acessibilidade
+- Mantenha labels atualizados
+- Teste navegação apenas por teclado
+        `,
+            },
+        },
+    },
+};

package/dist/stories/Londrisoft/Components/CustomMultSelect.stories.d.ts

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { MultiSelectLikeSelect } from "../../../components/CustomMultSelect";
+declare const meta: Meta<typeof MultiSelectLikeSelect>;
+export default meta;
+type Story = StoryObj<typeof MultiSelectLikeSelect>;
+/** 🎯 Exemplo básico do CustomMultSelect */
+export declare const Default: Story;
+/** 🎨 Exemplo com diferentes tamanhos e configurações */
+export declare const SizesAndConfigurations: Story;
+/** 🏛️ Exemplo com bancos e conversão obrigatória */
+export declare const AllBanks: Story;
+/** 🎯 Exemplo controlado */
+export declare const Controlled: Story;
+/** 🎯 Exemplo com cenários reais */
+export declare const RealWorldScenarios: Story;