# EventDate

> Componentes / Eventos · Estado: **Em andamento** — Implementado e utilizável, mas ainda sem a validação completa de acessibilidade.

Data e duração de um evento numa linha: ícone de calendário, a data em pt-BR no fuso de São Paulo ("5 de dezembro às 09:00") num `<time>` com o valor de máquina, e a duração com ícone de relógio.

- Função: Eventos
- Também chamado de: data do evento, quando, data e hora
- Mora em: `app/components/molecules/EventDate.tsx`
- Página: [https://phorte-design-system.vercel.app/styleguide/peca/EventDate](https://phorte-design-system.vercel.app/styleguide/peca/EventDate)
- Ficha no Storybook: [components-complex-eventdate](https://main--69b4847d498a9bd8659db9ba.chromatic.com/?path=/docs/components-complex-eventdate--docs)
- Prévia ao vivo, sozinha: [https://phorte-design-system.vercel.app/previa/EventDate/0](https://phorte-design-system.vercel.app/previa/EventDate/0)
- Todas as peças: [https://phorte-design-system.vercel.app/llms.txt](https://phorte-design-system.vercel.app/llms.txt)

## Como usar no código

```tsx
import { EventDate } from '@/app/components/molecules/EventDate';

<EventDate date={…}>…</EventDate>
```

O `…` marca as props obrigatórias — ver *Propriedades*.

## Uso

### Variantes na ficha

1. [Padrão](https://phorte-design-system.vercel.app/previa/EventDate/0)
2. [Sem Duracao](https://phorte-design-system.vercel.app/previa/EventDate/1)
3. [Datas do catálogo](https://phorte-design-system.vercel.app/previa/EventDate/2)
4. [A definir](https://phorte-design-system.vercel.app/previa/EventDate/3)

Junto do título de um evento — no cartão, na página do evento, na programação.

### Quando não usar

Para uma sequência de marcos com ano, use o TimelineItem. Para a previsão de início de uma turma, o TurmaCard já traz a dela.

### Faça

- Passe `date` em ISO (`2026-12-05T09:00-03:00`), só o dia (`2026-12-05`) ou um `Date` (E72): é o que vai no `dateTime`.
- Escreva a duração como a pessoa lê ("16h", "2 dias").

### Evite

- Data em texto livre ("5 de dezembro") quando a data exata existe: ela aparece como veio, mas o `<time>` fica sem `dateTime` e a máquina não a lê.

### Anatomia

1. **Calendário** — Ícone vermelho de 14px, decorativo.
2. **Data** — `<time dateTime>` com dia, mês por extenso e hora — sem a hora quando a data vem só com o dia (E72).
3. **Duração** — Ponto separador, ícone de relógio e o texto.

### Estados

| Estado | O que muda |
| --- | --- |
| Com duração | Data, separador e duração. |
| Sem duração | Só a data. |

### Comportamento

| Situação | O que acontece |
| --- | --- |
| Data em ISO | Formata em pt-BR, **sempre no fuso de São Paulo** (E72): 01:30 UTC do dia 13 é "12 de outubro, 22:30" — conferido no teste da ficha. Sem o fuso, servidor e navegador divergiam (erro de hidratação). |
| Só o dia (`2026-10-12`) | "12 de outubro", sem hora — conferido no teste da ficha. |
| Data que o `Date` não entende | Mostra o texto como veio ("A definir"), sem `dateTime` no `<time>` — ficha "A definir". |

### Relacionados

- [EventCard](https://phorte-design-system.vercel.app/styleguide/md/EventCard.md) — O cartão de evento.
- [EventSpeaker](https://phorte-design-system.vercel.app/styleguide/md/EventSpeaker.md) — Quem fala no evento.

## Especificação

### Propriedades

| Prop | Tipo | Padrão | Obrigatória | Descrição |
| --- | --- | --- | --- | --- |
| `date` | `string \| Date` | — | sim | ISO ("2026-10-12T19:00:00-03:00"), só o dia ("2026-10-12"), um `Date`, ou texto livre ("A definir"). |
| `duration` | `string` | — | não |  |

Aceita também: `React.HTMLAttributes<HTMLDivElement>`.

### Tokens de cor

| Token | Valor | Usado como |
| --- | --- | --- |
| `--border` | #E5E5E5 | `bg-border` |
| `--muted-foreground` | #595959 | `text-muted-foreground` |
| `--primary` | #D42B2B | `text-primary` |

## Acessibilidade

### Leitor de tela

- Os ícones e o separador são `aria-hidden`; o leitor lê a data e a duração.
- O `<time dateTime>` dá a data exata a quem a lê por máquina (agenda, buscador).

### O que sustenta o estado

Usa os padrões: estatico. Falta ouvir com leitor de tela: estatico.

## Status e recursos

| Tipo | Recurso | Status |
| --- | --- | --- |
| Código | `app/components/molecules/EventDate.tsx` | Disponível |
| Ficha | https://main--69b4847d498a9bd8659db9ba.chromatic.com/?path=/docs/components-complex-eventdate--docs | Disponível |
| Teste de acessibilidade | axe em `npm run test` | No gate de todo commit |
| Leitor de tela | Passada da E33 | Falta ouvir |
| Design | Figma | Desativado até a Fase 2 |

### Histórico

- `fdd10ff` 2026-09-29 — ESTADO: E109 concluida, roteiro final fechado; proximo o merge na main
- Histórico completo no GitHub: https://github.com/srbunnie/Pos-Phorte-Design-System/commits/main/app/components/molecules/EventDate.tsx