Componentes
Date Range Picker
betaIntervalo de datas, para relatório e filtro de período. Uma data só é papel do Calendar.
Ainda não é estável porque Pendência editorial: oQueE, quandoUsar, quandoNaoUsar; Rota não varrida pelo sensor. Ausência de medição não é aprovação. O contrato de maturidade explica o que cada requisito exige.
@voxmente/ui/components/ui/date-range-picker
Playground
<DateRangePicker value={periodo} onValueChange={setPeriodo} />Uso
Filtro de período pronto — receita de popover mais calendar, não um componente novo do zero. Aparece igual em dashboard, adoção, cobrança e auditoria: sem estado próprio, quem usa decide onde o período mora (URL, filtro de lista).
Vazio
Sem `value`, mostra o `placeholder`. É o estado inicial de qualquer relatório antes de alguém escolher um período.
Um mês por vez
`numberOfMonths={1}` estreita o popover — cabe melhor num painel lateral ou numa tela menor, ao custo de exigir mais cliques para escolher um intervalo longo.
Desabilitado
Mesma regra do Button: o controle continua visível, só perde a interação — nunca some da tela.
Referência da API
Extraída do TypeScript de @voxmente/ui a cada build. Se divergir do código, o código mudou.
DateRangePicker
| Prop | Tipo | Padrão |
|---|---|---|
| align | "center" | "end" | "start" | "start" |
| numberOfMonths | number | 2 |
| onValueChange | ((range: DateRange | undefined) => void) | — |
| placeholder | string | "Selecionar período" |
| size | "md" | "xs" | "sm" | "lg" | "icon-md" | "icon-xs" | "icon-sm" | "icon-lg" | null | — |
| value | DateRange | — |
| variant | "link" | "default" | "outline" | "secondary" | "ghost" | "destructive" | null | — |
Também aceita as props de Base UI e React, incluindo className e os atributos de DOM.
Pendência editorial: o que é, quando usar, quando não usar, acessibilidade, componentes relacionados, exemplo em contexto de produto. A lacuna aparece aqui em vez de ser preenchida com orientação inventada.
Origem do dado
- Demonstrações e playground: componente real de @voxmente/ui
- Referência da API: TypeScript do pacote
- Cor, espaçamento e raio das demonstrações: tokens de theme.css