lsoft-ui 0.0.1

package/dist/stories/Londrisoft/Components/Accordion/CustomAccordionItem.stories.js

@@ -0,0 +1,759 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { Accordion } from "@chakra-ui/react";
+import { BACKGROUND_OPTIONS, COLOR_OPTIONS } from "../../../options";
+import { CustomAccordionItem } from "../../../../components/Accordion/CustomAccordionItem";
+const meta = {
+    title: "Londrisoft/Components/accordion/Accordion-Item",
+    component: CustomAccordionItem,
+    tags: ["autodocs"],
+    args: {
+        title: "Título do Accordion",
+        label: "Seção",
+        children: _jsx(_Fragment, { children: "Conte\u00FAdo do item do accordion." }),
+        bgColor: "background.secondary",
+        hoverColor: "background.primary",
+        expandedColor: "background.brand",
+        expandedTextColor: "white",
+    },
+    argTypes: {
+        title: {
+            control: "text",
+            description: "Título exibido no cabeçalho do item.",
+            table: { category: "Content" },
+        },
+        label: {
+            control: "text",
+            description: "Texto opcional exibido acima do título.",
+            table: { category: "Content" },
+        },
+        bgColor: {
+            control: "select",
+            options: BACKGROUND_OPTIONS,
+            description: "Cor de fundo padrão do botão.",
+            table: { category: "Styling" },
+        },
+        hoverColor: {
+            control: "select",
+            options: BACKGROUND_OPTIONS,
+            description: "Cor de fundo ao passar o mouse sobre o botão.",
+            table: { category: "Styling" },
+        },
+        expandedColor: {
+            control: "select",
+            options: BACKGROUND_OPTIONS,
+            description: "Cor de fundo quando o item está expandido.",
+            table: { category: "Styling" },
+        },
+        expandedTextColor: {
+            control: "select",
+            options: COLOR_OPTIONS,
+            description: "Cor do texto e do ícone quando expandido.",
+            table: { category: "Styling" },
+        },
+        children: {
+            table: { disable: true },
+        },
+    },
+    parameters: {
+        docs: {
+            description: {
+                component: "Item de Accordion customizado, com título, label opcional, cores configuráveis para estados normal, hover e expandido, e conteúdo interno livre.",
+            },
+        },
+        backgrounds: {
+            default: "light",
+            values: [
+                { name: "light", value: "#ffffff" },
+                { name: "dark", value: "#000000" },
+            ],
+        },
+        a11y: {
+            element: "button[aria-expanded]",
+        },
+    },
+};
+export default meta;
+/** 🎯 Item padrão dentro de um Accordion */
+export const Default = {
+    render: (args) => (_jsx(Accordion, { allowMultiple: true, children: _jsx(CustomAccordionItem, Object.assign({}, args)) })),
+    parameters: {
+        docs: {
+            source: {
+                code: `
+import React from 'react';
+import { Accordion } from '@chakra-ui/react';
+import { CustomAccordionItem } from './CustomAccordionItem';
+
+// Accordion item básico
+const BasicAccordionItem = () => {
+    return (
+        <Accordion allowMultiple>
+            <CustomAccordionItem title="Título do Accordion">
+                Conteúdo do item do accordion.
+            </CustomAccordionItem>
+        </Accordion>
+    );
+};
+
+// Accordion item com conteúdo estruturado
+const AccordionItemWithStructuredContent = () => {
+    return (
+        <Accordion allowMultiple>
+            <CustomAccordionItem title="Informações do Usuário">
+                <div style={{ padding: '16px' }}>
+                    <h4>Dados Pessoais</h4>
+                    <p><strong>Nome:</strong> João Silva</p>
+                    <p><strong>Email:</strong> joao@email.com</p>
+                    <p><strong>Telefone:</strong> (11) 99999-9999</p>
+                    <p><strong>Cargo:</strong> Desenvolvedor</p>
+                </div>
+            </CustomAccordionItem>
+        </Accordion>
+    );
+};
+
+// Accordion item com lista
+const AccordionItemWithList = () => {
+    return (
+        <Accordion allowMultiple>
+            <CustomAccordionItem title="Configurações do Sistema">
+                <div style={{ padding: '16px' }}>
+                    <h4>Configurações Gerais</h4>
+                    <ul>
+                        <li>Idioma: Português (Brasil)</li>
+                        <li>Fuso horário: GMT-3</li>
+                        <li>Formato de data: DD/MM/AAAA</li>
+                        <li>Formato de moeda: R$</li>
+                    </ul>
+                </div>
+            </CustomAccordionItem>
+        </Accordion>
+    );
+};
+
+// Accordion item com formulário
+const AccordionItemWithForm = () => {
+    return (
+        <Accordion allowMultiple>
+            <CustomAccordionItem title="Editar Perfil">
+                <div style={{ padding: '16px' }}>
+                    <form>
+                        <div style={{ marginBottom: '12px' }}>
+                            <label>Nome:</label>
+                            <input type="text" style={{ width: '100%', padding: '8px', marginTop: '4px' }} />
+                        </div>
+                        <div style={{ marginBottom: '12px' }}>
+                            <label>Email:</label>
+                            <input type="email" style={{ width: '100%', padding: '8px', marginTop: '4px' }} />
+                        </div>
+                        <div style={{ marginBottom: '12px' }}>
+                            <label>Telefone:</label>
+                            <input type="tel" style={{ width: '100%', padding: '8px', marginTop: '4px' }} />
+                        </div>
+                        <button type="submit" style={{ padding: '8px 16px', backgroundColor: '#3182ce', color: 'white', border: 'none', borderRadius: '4px' }}>
+                            Salvar
+                        </button>
+                    </form>
+                </div>
+            </CustomAccordionItem>
+        </Accordion>
+    );
+};
+
+// Accordion item com conteúdo rico
+const AccordionItemWithRichContent = () => {
+    return (
+        <Accordion allowMultiple>
+            <CustomAccordionItem title="Relatório Detalhado">
+                <div style={{ padding: '16px' }}>
+                    <h4>Análise de Performance</h4>
+                    <div style={{ display: 'flex', gap: '16px', marginBottom: '16px' }}>
+                        <div style={{ flex: 1, padding: '12px', backgroundColor: '#f7fafc', borderRadius: '6px' }}>
+                            <strong>Usuários Ativos</strong>
+                            <p style={{ fontSize: '24px', margin: '8px 0', color: '#3182ce' }}>1,234</p>
+                        </div>
+                        <div style={{ flex: 1, padding: '12px', backgroundColor: '#f7fafc', borderRadius: '6px' }}>
+                            <strong>Taxa de Conversão</strong>
+                            <p style={{ fontSize: '24px', margin: '8px 0', color: '#38a169' }}>15.7%</p>
+                        </div>
+                        <div style={{ flex: 1, padding: '12px', backgroundColor: '#f7fafc', borderRadius: '6px' }}>
+                            <strong>Receita Mensal</strong>
+                            <p style={{ fontSize: '24px', margin: '8px 0', color: '#d69e2e' }}>R$ 45.6k</p>
+                        </div>
+                    </div>
+                    <p>Este relatório mostra o desempenho do sistema nos últimos 30 dias.</p>
+                </div>
+            </CustomAccordionItem>
+        </Accordion>
+    );
+};
+                `,
+                language: "tsx",
+            },
+        },
+    },
+};
+/** 🖌️ Com label e cores customizadas */
+export const WithLabelAndCustomColors = {
+    args: {
+        title: "Accordion Personalizado",
+        label: "Informações",
+        bgColor: "background.primary",
+        hoverColor: "background.secondary",
+        expandedColor: "border.primary",
+        expandedTextColor: "neutral.800",
+        children: _jsx(_Fragment, { children: "Este item tem label e cores customizadas ao expandir." }),
+    },
+    render: (args) => (_jsx(Accordion, { allowMultiple: true, children: _jsx(CustomAccordionItem, Object.assign({}, args)) })),
+    parameters: {
+        docs: {
+            source: {
+                code: `
+import React from 'react';
+import { Accordion } from '@chakra-ui/react';
+import { CustomAccordionItem } from './CustomAccordionItem';
+
+// Accordion item com label e cores customizadas
+const AccordionItemWithLabelAndCustomColors = () => {
+    return (
+        <Accordion allowMultiple>
+            <CustomAccordionItem 
+                title="Accordion Personalizado"
+                label="Informações"
+                bgColor="background.primary"
+                hoverColor="background.secondary"
+                expandedColor="border.primary"
+                expandedTextColor="neutral.800"
+            >
+                Este item tem label e cores customizadas ao expandir.
+            </CustomAccordionItem>
+        </Accordion>
+    );
+};
+
+// Accordion item com diferentes estilos de cores
+const AccordionItemWithDifferentColorStyles = () => {
+    return (
+        <Accordion allowMultiple>
+            <CustomAccordionItem 
+                title="Item com Cores Primárias"
+                label="Estilo 1"
+                bgColor="background.primary"
+                hoverColor="background.secondary"
+                expandedColor="border.primary"
+                expandedTextColor="neutral.800"
+            >
+                <div style={{ padding: '16px' }}>
+                    <h4>Conteúdo com Cores Primárias</h4>
+                    <p>Este item usa as cores primárias do design system.</p>
+                </div>
+            </CustomAccordionItem>
+            
+            <CustomAccordionItem 
+                title="Item com Cores Secundárias"
+                label="Estilo 2"
+                bgColor="background.secondary"
+                hoverColor="background.primary"
+                expandedColor="background.brand"
+                expandedTextColor="white"
+            >
+                <div style={{ padding: '16px' }}>
+                    <h4>Conteúdo com Cores Secundárias</h4>
+                    <p>Este item usa as cores secundárias do design system.</p>
+                </div>
+            </CustomAccordionItem>
+        </Accordion>
+    );
+};
+
+// Accordion item com label informativo
+const AccordionItemWithInformativeLabel = () => {
+    return (
+        <Accordion allowMultiple>
+            <CustomAccordionItem 
+                title="Configurações Avançadas"
+                label="Recomendado para usuários experientes"
+                bgColor="background.primary"
+                hoverColor="background.secondary"
+                expandedColor="border.primary"
+                expandedTextColor="neutral.800"
+            >
+                <div style={{ padding: '16px' }}>
+                    <h4>Configurações do Sistema</h4>
+                    <ul>
+                        <li>Modo desenvolvedor: Desativado</li>
+                        <li>Logs detalhados: Ativado</li>
+                        <li>Cache avançado: Configurado</li>
+                        <li>Otimizações: Habilitadas</li>
+                    </ul>
+                </div>
+            </CustomAccordionItem>
+        </Accordion>
+    );
+};
+
+// Accordion item com label de status
+const AccordionItemWithStatusLabel = () => {
+    return (
+        <Accordion allowMultiple>
+            <CustomAccordionItem 
+                title="Relatório de Vendas"
+                label="Atualizado há 2 horas"
+                bgColor="background.primary"
+                hoverColor="background.secondary"
+                expandedColor="border.primary"
+                expandedTextColor="neutral.800"
+            >
+                <div style={{ padding: '16px' }}>
+                    <h4>Dados de Vendas</h4>
+                    <div style={{ display: 'flex', gap: '16px', marginBottom: '16px' }}>
+                        <div style={{ flex: 1, padding: '12px', backgroundColor: '#f7fafc', borderRadius: '6px' }}>
+                            <strong>Vendas Hoje</strong>
+                            <p style={{ fontSize: '20px', margin: '8px 0', color: '#3182ce' }}>R$ 12.450</p>
+                        </div>
+                        <div style={{ flex: 1, padding: '12px', backgroundColor: '#f7fafc', borderRadius: '6px' }}>
+                            <strong>Meta Mensal</strong>
+                            <p style={{ fontSize: '20px', margin: '8px 0', color: '#38a169' }}>85%</p>
+                        </div>
+                    </div>
+                </div>
+            </CustomAccordionItem>
+        </Accordion>
+    );
+};
+
+// Accordion item com label de prioridade
+const AccordionItemWithPriorityLabel = () => {
+    return (
+        <Accordion allowMultiple>
+            <CustomAccordionItem 
+                title="Tarefa Crítica"
+                label="Alta Prioridade"
+                bgColor="background.primary"
+                hoverColor="background.secondary"
+                expandedColor="border.primary"
+                expandedTextColor="neutral.800"
+            >
+                <div style={{ padding: '16px' }}>
+                    <h4>Detalhes da Tarefa</h4>
+                    <p><strong>Descrição:</strong> Corrigir bug crítico no sistema de pagamento</p>
+                    <p><strong>Responsável:</strong> João Silva</p>
+                    <p><strong>Prazo:</strong> Hoje às 18:00</p>
+                    <p><strong>Status:</strong> Em andamento</p>
+                </div>
+            </CustomAccordionItem>
+        </Accordion>
+    );
+};
+                `,
+                language: "tsx",
+            },
+        },
+    },
+};
+/** 🚫 Sem label */
+export const WithoutLabel = {
+    args: {
+        title: "Sem Label",
+        label: undefined,
+        bgColor: "background.brand",
+        hoverColor: "background.primary",
+        expandedColor: "border.primary",
+        expandedTextColor: "white",
+        children: _jsx(_Fragment, { children: "Accordion sem label e com cor de fundo diferente." }),
+    },
+    render: (args) => (_jsx(Accordion, { allowMultiple: true, children: _jsx(CustomAccordionItem, Object.assign({}, args)) })),
+    parameters: {
+        docs: {
+            source: {
+                code: `
+import React from 'react';
+import { Accordion } from '@chakra-ui/react';
+import { CustomAccordionItem } from './CustomAccordionItem';
+
+// Accordion item sem label
+const AccordionItemWithoutLabel = () => {
+    return (
+        <Accordion allowMultiple>
+            <CustomAccordionItem 
+                title="Sem Label"
+                label={undefined}
+                bgColor="background.brand"
+                hoverColor="background.primary"
+                expandedColor="border.primary"
+                expandedTextColor="white"
+            >
+                Accordion sem label e com cor de fundo diferente.
+            </CustomAccordionItem>
+        </Accordion>
+    );
+};
+
+// Accordion items com e sem label
+const AccordionItemsWithAndWithoutLabel = () => {
+    return (
+        <Accordion allowMultiple>
+            <CustomAccordionItem 
+                title="Item com Label"
+                label="Informações"
+                bgColor="background.primary"
+                hoverColor="background.secondary"
+                expandedColor="border.primary"
+                expandedTextColor="neutral.800"
+            >
+                <div style={{ padding: '16px' }}>
+                    <h4>Item com Label</h4>
+                    <p>Este item possui um label informativo acima do título.</p>
+                </div>
+            </CustomAccordionItem>
+            
+            <CustomAccordionItem 
+                title="Item sem Label"
+                label={undefined}
+                bgColor="background.brand"
+                hoverColor="background.primary"
+                expandedColor="border.primary"
+                expandedTextColor="white"
+            >
+                <div style={{ padding: '16px' }}>
+                    <h4>Item sem Label</h4>
+                    <p>Este item não possui label, apenas o título.</p>
+                </div>
+            </CustomAccordionItem>
+        </Accordion>
+    );
+};
+
+// Accordion item simples sem label
+const SimpleAccordionItemWithoutLabel = () => {
+    return (
+        <Accordion allowMultiple>
+            <CustomAccordionItem 
+                title="Configurações"
+                bgColor="background.brand"
+                hoverColor="background.primary"
+                expandedColor="border.primary"
+                expandedTextColor="white"
+            >
+                <div style={{ padding: '16px' }}>
+                    <h4>Configurações do Sistema</h4>
+                    <ul>
+                        <li>Idioma: Português</li>
+                        <li>Fuso horário: GMT-3</li>
+                        <li>Notificações: Ativadas</li>
+                        <li>Modo escuro: Desativado</li>
+                    </ul>
+                </div>
+            </CustomAccordionItem>
+        </Accordion>
+    );
+};
+
+// Accordion item sem label com cores diferentes
+const AccordionItemWithoutLabelWithDifferentColors = () => {
+    return (
+        <Accordion allowMultiple>
+            <CustomAccordionItem 
+                title="Relatório Simples"
+                bgColor="background.secondary"
+                hoverColor="background.primary"
+                expandedColor="background.brand"
+                expandedTextColor="white"
+            >
+                <div style={{ padding: '16px' }}>
+                    <h4>Dados do Relatório</h4>
+                    <p><strong>Total de vendas:</strong> R$ 45.678</p>
+                    <p><strong>Número de pedidos:</strong> 234</p>
+                    <p><strong>Taxa de conversão:</strong> 12.5%</p>
+                </div>
+            </CustomAccordionItem>
+        </Accordion>
+    );
+};
+
+// Accordion item sem label para formulário
+const AccordionItemWithoutLabelForForm = () => {
+    return (
+        <Accordion allowMultiple>
+            <CustomAccordionItem 
+                title="Editar Dados"
+                bgColor="background.brand"
+                hoverColor="background.primary"
+                expandedColor="border.primary"
+                expandedTextColor="white"
+            >
+                <div style={{ padding: '16px' }}>
+                    <form>
+                        <div style={{ marginBottom: '12px' }}>
+                            <label>Nome:</label>
+                            <input type="text" style={{ width: '100%', padding: '8px', marginTop: '4px' }} />
+                        </div>
+                        <div style={{ marginBottom: '12px' }}>
+                            <label>Email:</label>
+                            <input type="email" style={{ width: '100%', padding: '8px', marginTop: '4px' }} />
+                        </div>
+                        <div style={{ marginBottom: '12px' }}>
+                            <label>Telefone:</label>
+                            <input type="tel" style={{ width: '100%', padding: '8px', marginTop: '4px' }} />
+                        </div>
+                        <button type="submit" style={{ padding: '8px 16px', backgroundColor: '#3182ce', color: 'white', border: 'none', borderRadius: '4px' }}>
+                            Salvar Alterações
+                        </button>
+                    </form>
+                </div>
+            </CustomAccordionItem>
+        </Accordion>
+    );
+};
+                `,
+                language: "tsx",
+            },
+        },
+    },
+};
+/** 📜 Conteúdo longo */
+export const LongContent = {
+    args: {
+        title: "Conteúdo Longo",
+        label: "Detalhes",
+        children: (_jsx(_Fragment, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." })),
+        bgColor: "background.secondary",
+        hoverColor: "background.primary",
+        expandedColor: "background.brand",
+        expandedTextColor: "white",
+    },
+    render: (args) => (_jsx(Accordion, { allowMultiple: true, children: _jsx(CustomAccordionItem, Object.assign({}, args)) })),
+    parameters: {
+        docs: {
+            source: {
+                code: `
+import React from 'react';
+import { Accordion } from '@chakra-ui/react';
+import { CustomAccordionItem } from './CustomAccordionItem';
+
+// Accordion item com conteúdo longo
+const AccordionItemWithLongContent = () => {
+    return (
+        <Accordion allowMultiple>
+            <CustomAccordionItem 
+                title="Conteúdo Longo"
+                label="Detalhes"
+                bgColor="background.secondary"
+                hoverColor="background.primary"
+                expandedColor="background.brand"
+                expandedTextColor="white"
+            >
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
+                tempor incididunt ut labore et dolore magna aliqua.
+            </CustomAccordionItem>
+        </Accordion>
+    );
+};
+
+// Accordion item com artigo longo
+const AccordionItemWithLongArticle = () => {
+    return (
+        <Accordion allowMultiple>
+            <CustomAccordionItem 
+                title="Artigo Completo"
+                label="Leitura"
+                bgColor="background.secondary"
+                hoverColor="background.primary"
+                expandedColor="background.brand"
+                expandedTextColor="white"
+            >
+                <div style={{ padding: '16px' }}>
+                    <h4>Introdução</h4>
+                    <p>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
+                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                    </p>
+                    
+                    <h4>Desenvolvimento</h4>
+                    <p>
+                        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
+                        eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+                        sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                    
+                    <h4>Conclusão</h4>
+                    <p>
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
+                        doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
+                        veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+                    </p>
+                </div>
+            </CustomAccordionItem>
+        </Accordion>
+    );
+};
+
+// Accordion item com documentação técnica
+const AccordionItemWithTechnicalDocumentation = () => {
+    return (
+        <Accordion allowMultiple>
+            <CustomAccordionItem 
+                title="Documentação da API"
+                label="Técnico"
+                bgColor="background.secondary"
+                hoverColor="background.primary"
+                expandedColor="background.brand"
+                expandedTextColor="white"
+            >
+                <div style={{ padding: '16px' }}>
+                    <h4>Visão Geral</h4>
+                    <p>
+                        Esta API fornece endpoints para gerenciamento de usuários, produtos e pedidos.
+                        Todos os endpoints retornam respostas em formato JSON e utilizam autenticação
+                        baseada em tokens JWT.
+                    </p>
+                    
+                    <h4>Autenticação</h4>
+                    <p>
+                        Para acessar os endpoints protegidos, inclua o token JWT no header Authorization:
+                        <code>Authorization: Bearer &lt;seu-token&gt;</code>
+                    </p>
+                    
+                    <h4>Endpoints Principais</h4>
+                    <ul>
+                        <li><strong>GET /users</strong> - Lista todos os usuários</li>
+                        <li><strong>POST /users</strong> - Cria um novo usuário</li>
+                        <li><strong>PUT /users/:id</strong> - Atualiza um usuário</li>
+                        <li><strong>DELETE /users/:id</strong> - Remove um usuário</li>
+                    </ul>
+                    
+                    <h4>Códigos de Status</h4>
+                    <ul>
+                        <li><strong>200</strong> - Sucesso</li>
+                        <li><strong>201</strong> - Criado com sucesso</li>
+                        <li><strong>400</strong> - Requisição inválida</li>
+                        <li><strong>401</strong> - Não autorizado</li>
+                        <li><strong>404</strong> - Não encontrado</li>
+                        <li><strong>500</strong> - Erro interno do servidor</li>
+                    </ul>
+                </div>
+            </CustomAccordionItem>
+        </Accordion>
+    );
+};
+
+// Accordion item com relatório detalhado
+const AccordionItemWithDetailedReport = () => {
+    return (
+        <Accordion allowMultiple>
+            <CustomAccordionItem 
+                title="Relatório Anual 2024"
+                label="Completo"
+                bgColor="background.secondary"
+                hoverColor="background.primary"
+                expandedColor="background.brand"
+                expandedTextColor="white"
+            >
+                <div style={{ padding: '16px' }}>
+                    <h4>Resumo Executivo</h4>
+                    <p>
+                        O ano de 2024 foi marcado por crescimento significativo em todas as áreas
+                        do negócio. A empresa alcançou metas importantes e expandiu sua presença
+                        no mercado nacional e internacional.
+                    </p>
+                    
+                    <h4>Resultados Financeiros</h4>
+                    <div style={{ display: 'flex', gap: '16px', marginBottom: '16px' }}>
+                        <div style={{ flex: 1, padding: '12px', backgroundColor: '#f7fafc', borderRadius: '6px' }}>
+                            <strong>Receita Total</strong>
+                            <p style={{ fontSize: '20px', margin: '8px 0', color: '#3182ce' }}>R$ 2.5M</p>
+                        </div>
+                        <div style={{ flex: 1, padding: '12px', backgroundColor: '#f7fafc', borderRadius: '6px' }}>
+                            <strong>Crescimento</strong>
+                            <p style={{ fontSize: '20px', margin: '8px 0', color: '#38a169' }}>+45%</p>
+                        </div>
+                        <div style={{ flex: 1, padding: '12px', backgroundColor: '#f7fafc', borderRadius: '6px' }}>
+                            <strong>Lucro Líquido</strong>
+                            <p style={{ fontSize: '20px', margin: '8px 0', color: '#d69e2e' }}>R$ 450k</p>
+                        </div>
+                    </div>
+                    
+                    <h4>Principais Conquistas</h4>
+                    <ul>
+                        <li>Expansão para 3 novos mercados</li>
+                        <li>Lançamento de 5 novos produtos</li>
+                        <li>Aumento de 60% na base de clientes</li>
+                        <li>Melhoria de 30% na satisfação do cliente</li>
+                        <li>Redução de 25% nos custos operacionais</li>
+                    </ul>
+                    
+                    <h4>Desafios e Oportunidades</h4>
+                    <p>
+                        Apesar dos resultados positivos, identificamos desafios importantes
+                        que precisam ser abordados em 2025, incluindo a necessidade de
+                        modernização da infraestrutura tecnológica e expansão da equipe.
+                    </p>
+                </div>
+            </CustomAccordionItem>
+        </Accordion>
+    );
+};
+
+// Accordion item com tutorial passo a passo
+const AccordionItemWithStepByStepTutorial = () => {
+    return (
+        <Accordion allowMultiple>
+            <CustomAccordionItem 
+                title="Tutorial: Configuração Inicial"
+                label="Guia Completo"
+                bgColor="background.secondary"
+                hoverColor="background.primary"
+                expandedColor="background.brand"
+                expandedTextColor="white"
+            >
+                <div style={{ padding: '16px' }}>
+                    <h4>Passo 1: Instalação</h4>
+                    <p>
+                        Primeiro, certifique-se de ter o Node.js instalado em sua máquina.
+                        Execute o comando: <code>npm install -g create-react-app</code>
+                    </p>
+                    
+                    <h4>Passo 2: Criação do Projeto</h4>
+                    <p>
+                        Crie um novo projeto React: <code>npx create-react-app meu-projeto</code>
+                        Navegue para o diretório: <code>cd meu-projeto</code>
+                    </p>
+                    
+                    <h4>Passo 3: Instalação de Dependências</h4>
+                    <p>
+                        Instale as dependências necessárias:
+                        <code>npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion</code>
+                    </p>
+                    
+                    <h4>Passo 4: Configuração do Chakra UI</h4>
+                    <p>
+                        Configure o Chakra UI no seu arquivo principal:
+                    </p>
+                    <div style={{ backgroundColor: '#f7fafc', padding: '12px', borderRadius: '6px', overflow: 'auto' }}>
+                        <code>import { '{' } ChakraProvider { '}' } from '@chakra-ui/react'</code><br/>
+                        <code>function App() {'{'}</code><br/>
+                        <code>  return (</code><br/>
+                        <code>    &lt;ChakraProvider&gt;</code><br/>
+                        <code>      {/* Seu conteúdo aqui */}</code><br/>
+                        <code>    &lt;/ChakraProvider&gt;</code><br/>
+                        <code>  )</code><br/>
+                        <code>{'}'}</code>
+                    </div>
+                    
+                    <h4>Passo 5: Teste</h4>
+                    <p>
+                        Execute o projeto: <code>npm start</code>
+                        Abra http://localhost:3000 no seu navegador.
+                    </p>
+                </div>
+            </CustomAccordionItem>
+        </Accordion>
+    );
+};
+                `,
+                language: "tsx",
+            },
+        },
+    },
+};