Primitiveselection

Mini Calendar

Stable

Uma tira curta de dias consecutivos em volta de hoje, para escolher uma data que está perto — a entrega dos próximos cinco dias, o turno depois deste. É um date picker sem o calendário: não há grade de mês para abrir e nada alcança uma data longe da que está na tela. Preserva a API do Kibo. Duas peças de estado independentes: qual dia está escolhido e onde a janela está; cada uma pode ser do chamador ou do componente, e nenhuma mexe na outra.

Instalação

npx up-web-ds add mini-calendar

Gera chevron-left, chevron-right para a biblioteca de ícones do projeto (components.json → iconLibrary).

Preview

Basic

A Week

Localized

With Default Value

Controlled

Dia selecionado: quinta-feira, 1 de outubro.

Controlled Window

Dia selecionado: sábado, 3 de outubro. Janela visível: quinta-feira, 1 de outubro a segunda-feira, 5 de outubro.

With Availability

2 vagas

5 vagas

1 vagas

cheio

3 vagas

7 vagas

cheio

Own Arrows

All states

Basic

A Week

Localized

With Default Value

Controlled

Dia selecionado: quinta-feira, 1 de outubro.

Controlled Window

Dia selecionado: sábado, 3 de outubro. Janela visível: quinta-feira, 1 de outubro a segunda-feira, 5 de outubro.

With Availability

2 vagas

5 vagas

1 vagas

cheio

3 vagas

7 vagas

cheio

Own Arrows

Usage

@/components/ui/mini-calendar

import {
  MiniCalendar,
  MiniCalendarDays,
  MiniCalendarNavigation,
} from '@/components/ui/mini-calendar'

Mini Calendar

1
2
3
4
5<MiniCalendar>
  <MiniCalendarNavigation direction="prev" />
  <MiniCalendarDays />
  <MiniCalendarNavigation direction="next" />
</MiniCalendar>

Props

MiniCalendar

Props de MiniCalendar
Prop	Type	Default	Description
days	`number`	`5`	How many consecutive days the strip shows.
defaultStartDate	`Date`	`today`	First day of the strip before the caller takes over.
defaultValue	`Date`	sem valor padrão	The day chosen before the caller takes over.
locale	`Intl.LocalesArgument`	`'en-US'`	Locale that names the months, as `Intl` understands it. The default is upstream's language rather than the reader's, so a strip looks the same wherever it is rendered until somebody says otherwise.
onStartDateChange	`((date: Date \| undefined) => void)`	sem valor padrão	Called with the first day of the strip after an arrow moved it.
onValueChange	`((date: Date \| undefined) => void)`	sem valor padrão	Called with the day that was just chosen.
startDate	`Date`	sem valor padrão	First day of the strip, when the caller owns it.
value	`Date`	sem valor padrão	The chosen day, when the caller owns it.

Estende Omit< HTMLAttributes<HTMLDivElement>, 'defaultValue' >. Aceita também os atributos padrão de um elemento React (277 não listados).

MiniCalendarNavigation

Props de MiniCalendarNavigation
Prop	Type	Default	Description
direction, obrigatória	`"next" \| "prev"`	sem valor padrão	Which way the strip moves: one page of `days` at a time.
asChild	`boolean`	`false`	Render `children` instead of the design system's Button.

Estende ButtonHTMLAttributes<HTMLButtonElement>. Aceita também os atributos padrão de um elemento React (288 não listados).

MiniCalendarDays

Props de MiniCalendarDays
Prop	Type	Default	Description
children	`((date: Date) => ReactNode)`	sem valor padrão	Draws one day. Left out, every day is a `MiniCalendarDay` -- which is what upstream's own usage passes, and what lets a strip be written without a function prop.

Estende Omit< HTMLAttributes<HTMLDivElement>, 'children' >. Aceita também os atributos padrão de um elemento React (277 não listados).

MiniCalendarDay

Props de MiniCalendarDay
Prop	Type	Default	Description
date, obrigatória	`Date`	sem valor padrão	The day this button stands for.
size	`"default" \| "sm" \| "xs" \| "lg" \| "icon" \| "icon-xs" \| "icon-sm" \| "icon-lg" \| null`	sem valor padrão
variant	`"link" \| "destructive" \| "primary" \| "outline" \| "secondary" \| "ghost" \| null`	sem valor padrão
className	`string \| ((state: ButtonState) => string \| undefined)`	sem valor padrão	CSS class applied to the element, or a function that returns a class based on the component's state.
focusableWhenDisabled	`boolean`	`false`	Whether the button should be focusable when disabled.
nativeButton	`boolean`	`true`	Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (for example, `<div>`).
render	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, ButtonState>`	sem valor padrão	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
style	`React.CSSProperties \| ((state: ButtonState) => React.CSSProperties \| undefined)`	sem valor padrão	Style applied to the element, or a function that returns a style object based on the component's state.

Estende ComponentProps<typeof Button>. Aceita também os atributos padrão de um elemento React (285 não listados).

prop obrigatória.

Composition

O MiniCalendar guarda o dia escolhido, a janela e o locale. Dentro dele, um MiniCalendarNavigation de cada lado move a janela uma página inteira por vez, e o MiniCalendarDays desenha os dias entre eles — um MiniCalendarDay por dia, ou o que a função de render devolver.

Composição de MiniCalendar

MiniCalendar

MiniCalendarNavigation
MiniCalendarDays
- MiniCalendarDay

Metadata

Notas de acessibilidade

Verificado em tests/e2e/mini-calendar.spec.ts no Chromium desktop e mobile, em light e dark, com Axe sem violações WCAG 2.2 AA. Teclado: as duas setas e cada dia são botões alcançados por Tab, com anel de foco lido do navegador; Enter escolhe o dia focado e as setas movem uma página inteira de dias. Leitor de tela: as setas têm nome (upstream as entregava com um ícone dentro e nada mais), cada dia é nomeado exatamente pelo que imprime — um único nó de texto sr-only, porque duas linhas de um flex são lidas com ou sem espaço dependendo de quem lê, e a 2.5.3 é sobre o rótulo visível e o nome concordarem —, o dia escolhido carrega aria-pressed e o de hoje aria-current="date", que é o que diz em palavras o que o preenchimento e o tom diziam só em cor. Contraste: o mês do dia escolhido vinha a 70% da tinta sobre o preenchimento primário e não alcançava AA; agora é a tinta inteira, e a hierarquia é o tamanho e o peso. Toque verificado em 375px com emulação de toque: os alvos atingem 24x24, o toque escolhe o dia, e a fileira de dias rola em vez de ser cortada — cinco dias e duas setas são mais largos que um telefone, e a caixa da tira nunca passa do que a segura. Reduced motion verificado em navegador com prefers-reduced-motion: reduce — a tira não tem movimento próprio, nada se desloca ao trocar a janela, e o único movimento por perto é o do Button ao ser pressionado, que já está atrás de motion-safe:.

Classificação

Layer: Primitive
Domínio: Domain-free (compartilhado)
Categoria: selection
Status: Stable

Origem e distribuição

Fonte: kibo registry / mini-calendar
Licença: MIT
URL: https://www.kibo-ui.com/r/mini-calendar.json
Distribuição: Interna

Acessibilidade

Teclado: revisado
Leitor de tela: revisado
Touch: revisado
Reduced motion: revisado

Dependências

Pacotes: Nenhuma
Ícones: chevron-left, chevron-right
Construído sobre: Button
Usado por: Nenhum ainda