📄️ Accordion
O componente Accordion permite organizar conteúdo em seções expansíveis e recolhíveis, melhorando a experiência do usuário ao navegar por grandes quantidades de informação.
📄️ Alert
O componente Alert exibe mensagens importantes para o usuário, fornecendo feedback visual através de diferentes tipos e estilos que comunicam contexto específico.
📄️ Badge
O Badge é um componente visual usado para exibir notificações, contadores ou rótulos informativos de forma destacada. Ele pode mostrar números (com limite de 99+) ou texto curto.
📄️ Breadcrumb
O Breadcrumb é um componente de navegação que mostra a localização atual do usuário dentro da hierarquia do site, fornecendo um caminho de navegação claro e facilitando o retorno a níveis anteriores.
📄️ Button
O componente Button é usado para acionar uma ação ou evento, como submeter um formulário, abrir um diálogo, cancelar uma ação ou executar uma operação de delete.
📄️ CardGroup
O CardGroup é um componente usado para agrupar informações relacionadas em um layout organizado. Ele suporta diferentes variantes (minimal e header) e pode incluir título, subtítulo, contador, tag de destaque e uma ação clicável com contador opcional.
📄️ CardListItem
O CardListItem é um componente usado para exibir itens em listas organizadas, oferecendo uma estrutura consistente com título, descrição, ícones, tags e estados interativos. É ideal para listas de produtos, configurações, contatos ou qualquer conteúdo estruturado.
📄️ Carousel
O componente Carousel permite exibir uma série de conteúdos de forma horizontal com navegação por setas e indicadores. É construído sobre a biblioteca react-slick e oferece suporte a múltiplas colunas, scroll infinito e reprodução automática.
📄️ Checkbox
O componente Checkbox é usado para permitir que os usuários selecionem uma ou múltiplas opções de um conjunto de escolhas. É ideal para formulários, configurações e listas de tarefas.
📄️ Chips
O componente Chips é usado para permitir que os usuários filtrem conteúdo, façam seleções ou visualizem tags. É ideal para interfaces de filtros, seleção de categorias e organização de conteúdo.
📄️ InternalContextualHero
Componente de destaque utilizado para exibir mensagens personalizadas baseadas na jornada do usuário. Permite combinar título, descrição, lista de itens, botões de ação e uma imagem opcional. Suporta diferentes variantes visuais (type) e posições de imagem (imagePosition).
📄️ CrossSellCard
O componente CrossSellCard é usado para promover produtos, serviços ou ações relacionadas, incentivando o usuário a explorar ofertas adicionais ou realizar conversões.
📄️ ContextualMenu
O componente ContextualMenu é um menu overlay que aparece em resposta a uma ação do usuário, fornecendo uma lista de opções contextuais. Ideal para ações secundárias, filtros ou menus de navegação em dispositivos móveis.
📄️ DateRange
O DateRange é um componente para seleção de intervalos de datas, ideal para reservas, filtros de relatórios, períodos de trabalho e campanhas. Oferece uma interface intuitiva para seleção de data inicial e final.
📄️ DatePicker
O DatePicker é um componente para seleção de datas únicas, ideal para campos como data de nascimento, agendamentos, prazos e vencimentos. Oferece uma interface intuitiva com calendário e suporte a internacionalização.
📄️ Divider
O componente Divider cria uma linha horizontal de separação visual entre seções de conteúdo, melhorando a organização e legibilidade da interface.
📄️ DotPagination
O componente DotPagination é usado para navegação entre seções de conteúdo, especialmente em carrosséis, slideshows e wizards. Oferece uma interface visual simples com pontos clicáveis que indicam o progresso e permitem navegação direta.
📄️ DoughnutChart
O componente DoughnutChart cria gráficos de rosca interativos e informativos para exibir dados proporcionais. É construído sobre Chart.js e react-chartjs-2, oferecendo visualizações elegantes com legendas personalizáveis e valores centrais opcionais.
📄️ Drawer
O componente Drawer é um painel lateral que desliza para dentro da tela, ideal para navegação secundária, filtros, formulários ou qualquer conteúdo que precisa ser acessível sem sair do contexto principal. Oferece flexibilidade de posicionamento e tamanhos para diferentes casos de uso.
📄️ IconButton
O componente IconButton é um botão circular que exibe apenas um ícone. É ideal para ações secundárias, controles de interface e navegação compacta. Suporta diferentes tamanhos, estados e pode ser usado como link.
📄️ Input
O componente Input é um campo de entrada fundamental que permite aos usuários inserir dados textuais em formulários. Suporta diversos tipos de entrada, validação, estados visuais e elementos decorativos como ícones e símbolos de moeda.
📄️ Link
O componente Link é um elemento de navegação que fornece estrutura consistente e acessibilidade adequada para links internos e externos. Suporta diferentes variantes de cor, tamanhos e ícones opcionais.
📄️ List
Container para organizar itens de lista, especialmente TransactionListItem. Fornece a estrutura base para listas de transações, notificações e outros itens que seguem o padrão de design do Ocean.
📄️ ListAction
O componente ListAction é um item de lista interativo que combina conteúdo textual com ações do usuário. Ideal para listas de configurações, menus de opções, navegação entre telas e exibição de informações acionáveis.
📄️ ListReadOnly
O componente ListReadOnly é um item de lista não interativo que exibe conteúdo textual de forma organizada. Ideal para exibição de informações estáticas, resumos de dados, listas de detalhes e visualização de informações não acionáveis.
📄️ ListExpandable
O componente ListExpandable é um item de lista interativo que permite expandir e colapsar conteúdo adicional. Ideal para listas de transações, detalhes de pedidos, informações adicionais ou qualquer conteúdo que precise ser ocultado inicialmente.
📄️ ListSettings
O componente ListSettings é um item de lista interativo que combina exibição de informações com ações de configuração. Ideal para telas de configurações, ajustes de preferências e gerenciamento de opções que requerem ações como botões ou toggles.
📄️ Modal
O componente Modal é uma janela sobreposta que aparece sobre o conteúdo principal da aplicação. É ideal para exibir conteúdo importante que requer atenção imediata do usuário, como confirmações, formulários, ou informações detalhadas sem sair do contexto atual.
📄️ Progress
O componente Progress exibe um indicador de carregamento animado para informar ao usuário que uma operação está em andamento. Suporta dois modos: indeterminado (animação contínua) e determinado (exibe porcentagem).
📄️ Radio
O componente Radio é um elemento de seleção única que permite ao usuário escolher uma opção de um grupo de alternativas mutuamente exclusivas. É ideal para formulários que requerem uma única seleção entre múltiplas opções.
📄️ Search
O componente Search é um campo de entrada especializado para buscas que inclui um ícone de lupa e um botão de limpar opcional. É ideal para funcionalidades de busca em listas, catálogos e navegação.
📄️ Select
Campo de seleção que permite ao usuário escolher uma opção a partir de uma lista predefinida de valores.
📄️ SelectAutocomplete
Campo de seleção com funcionalidade de autocomplete que permite ao usuário filtrar opções digitando no campo de entrada.
📄️ SettingsListItem
O componente SettingsListItem é usado para exibir itens de configuração de forma organizada, com suporte a botões de ação, tags de status, estados visuais e mensagens de erro. Ideal para telas de configurações, preferências e painéis de controle.
📄️ Shortcut
O componente Shortcut é usado para criar atalhos de navegação rápida com ícones, labels e descrições opcionais.
📄️ Snackbar
O componente Snackbar exibe notificações temporárias na interface do usuário, fornecendo feedback sobre ações ou eventos importantes.
📄️ Stepper
O componente Stepper é usado para entrada de valores numéricos com botões de incremento e decremento, ideal para quantidade de itens, configurações numéricas e controles precisos.
📄️ Steps
O componente Steps exibe um indicador visual de progresso em processos multi-etapas, mostrando o passo atual e o total de passos.
📄️ SubHeader
O componente SubHeader é usado para criar cabeçalhos secundários com título, ícone e subtítulo opcionais, ideal para organizar seções de conteúdo.
📄️ Switch
O Switch é um componente de toggle que permite ao usuário alternar entre dois estados (ligado/desligado). É ideal para configurações, preferências e controles de ativação/desativação.
📄️ TextArea
O componente TextArea é usado para entrada de texto de múltiplas linhas, ideal para comentários, descrições, mensagens e outros conteúdos extensos.
📄️ TextListItem
Um componente versátil para exibir informações em lista com suporte a seleção, ações e customização visual.
📄️ ListSelectable
Componente de lista avançado que suporta seleção (checkbox/radio), indicadores visuais (badges, tags) e diferentes estados de exibição. Oferece dois tipos de layout: texto com divisor (text) ou card com borda (card).
📄️ TokenInput
Campo de entrada especializado para códigos de verificação, tokens de autenticação, PINs e outros tipos de entrada de código sequencial.
📄️ Tooltip
O Tooltip é um componente que exibe informações adicionais quando o usuário passa o mouse sobre um elemento ou o foca. É ideal para fornecer contexto, explicações ou informações complementares sem ocupar espaço permanente na interface.
📄️ TopBar
O TopBar é um componente de navegação superior que fornece contexto da página atual, ações de navegação e controles adicionais. É ideal para aplicações móveis e web, oferecendo uma experiência de navegação consistente e intuitiva.
📄️ TransactionListItem
Componente para exibir itens de lista com informações estruturadas em níveis hierárquicos. Ideal para transações financeiras, notificações e outros dados que precisam ser apresentados de forma organizada.
📄️ TransactionListExpandable
O componente TransactionListExpandable é uma variação do ListExpandable otimizada para exibir transações financeiras com suporte a valores, indicadores e dados adicionais, permitindo expandir para mostrar detalhes ou ações relacionadas.
📄️ Typography
O componente Typography fornece um conjunto consistente de estilos tipográficos para toda a aplicação, garantindo hierarquia visual clara e boa legibilidade.
📄️ UnorderedListItem
O componente UnorderedListItem é usado para criar itens de lista não ordenada com ícones e textos descritivos. Ideal para listas de recursos, benefícios, itens de navegação ou qualquer conteúdo que precise de estruturação visual clara.
📄️ WebNotification
O WebNotification é um componente de notificação que aparece na parte inferior da tela, ideal para feedback de ações do usuário, alertas importantes e informações temporárias. Oferece diferentes tipos visuais e suporte a ações interativas.