Date Selector (Seleção de Data)
O componente Date Selector no Acronos Design System é uma solução interativa para seleção de datas, com variações que incluem a funcionalidade de seleção de tempo. Ele se adapta aos temas claro e escuro, oferecendo uma experiência consistente em diferentes contextos.
Variações
1. Date Selector com Horas
Combina a seleção de data com a configuração de horas e minutos.
Suporte ao formato de 12h com alternância entre AM/PM.
Ideal para cenários que exigem agendamentos ou marcação de eventos com horário específico.
2. Date Selector Comum
Permite a escolha apenas da data (dia, mês e ano).
Simples e direto, para casos em que o tempo não é necessário.
Plataformas Disponíveis
Desktop
Mobile (compatibilidade planejada para telas menores com adaptação de layout).
Estilos e Espaçamentos
Tipografia
Fonte padrão do design system, com destaque claro para a data e hora selecionadas.
Cores
Tema Claro: Fundo branco com texto e bordas em cinza escuro.
Tema Escuro: Fundo preto com texto em branco e detalhes em vermelho para realce.
Realce da data e hora selecionadas em tons de destaque.
Espaçamento
Espaçamento interno (padding) consistente para maior conforto visual.
Margens ajustáveis para integração com outros elementos da interface.
Estados Disponíveis
Default
Aparência padrão para o estado inicial, sem seleção.
Hover
Realce visual ao passar o mouse sobre as opções de data e hora.
Focus
Indicação clara ao navegar com teclado ou selecionar o campo.
Selecionado
Destaque para a data e/ou horário escolhidos.
Desabilitado
Visual cinza opaco para indicar que o componente está inativo.
Acessibilidade
Navegação por Teclado
Suporte para navegação entre dias e ajuste de horas/minutos com teclas direcionais.
Leitores de Tela
Feedback claro para cada ação, como seleção de data e ajuste de tempo.
Descrições para indicar o formato de 12h ou 24h, se configurado.
Validações e Feedback
Mensagens de erro exibidas quando:
Nenhuma data ou horário foi selecionado em campos obrigatórios.
Datas ou horários inválidos foram inseridos.
Mensagens de validação seguem o padrão de linguagem clara e objetiva do sistema.
Exemplos de Uso
Com Horas
Agendamento de reuniões ou eventos com horários definidos.
Sistema de reservas ou check-ins/check-outs.
Comum
Seleção de datas para filtro em relatórios ou dashboards.
Escolha de datas em formulários simples, como aniversários.