@etus/ui 0.1.0

package/src/components/forms/TimePicker/README.md

@@ -0,0 +1,750 @@
+# TimePicker
+
+## Visao Geral
+
+O **TimePicker** e um componente de selecao de horario do Design System ETUS, usado para permitir que usuarios selecionem um horario especifico atraves de uma interface intuitiva de listas rolaveis. Suporta formatos de 12 e 24 horas, intervalos de minutos personalizados e integracao completa com formularios.
+
+### Casos de Uso
+
+- Agendamento de compromissos e reunioes
+- Definicao de horarios de funcionamento
+- Configuracao de alarmes e lembretes
+- Formularios de reserva
+- Filtros de periodo em dashboards
+
+### Classificacao
+
+**Categoria:** Form
+**Dependencias:** `@radix-ui/react-popover`, `class-variance-authority`, `lucide-react`
+
+---
+
+## Design Specs
+
+### Variantes (`variant`)
+
+| Variante | Uso | Tokens |
+|----------|-----|--------|
+| `default` | Uso padrao | `border-input`, `shadow-xs`, `dark:bg-input/30` |
+| `filled` | Campos preenchidos | `border-transparent`, `bg-muted` |
+| `flushed` | Estilo minimalista | `border-b-input`, sem bordas laterais |
+
+### Tamanhos (`size`)
+
+| Tamanho | Altura | Padding | Uso |
+|---------|--------|---------|-----|
+| `sm` | `h-8` (32px) | `px-2.5 py-1` | Espacos compactos, tabelas |
+| `md` | `h-9` (36px) | `px-3 py-1` | Uso geral |
+| `lg` | `h-10` (40px) | `px-3.5 py-1.5` | Formularios prominentes |
+
+### Estados
+
+| Estado | Classes/Atributos | Comportamento |
+|--------|-------------------|---------------|
+| Default | - | Aparencia base |
+| Open | `data-state="open"` | Popover visivel |
+| Closed | `data-state="closed"` | Popover oculto |
+| Disabled | `disabled:opacity-50` | 50% opacidade, sem pointer events |
+| Invalid | `aria-invalid:ring-destructive/20` | Ring vermelho |
+| Focus | `focus-visible:ring-[3px]` | Ring de 3px com `ring-ring/50` |
+
+### Tokens Utilizados
+
+```css
+/* Cores */
+--input             /* Borda default */
+--muted             /* Fundo filled */
+--muted-foreground  /* Placeholder */
+--ring              /* Focus ring */
+--primary           /* Item selecionado */
+--primary-foreground
+--accent            /* Hover items */
+--accent-foreground
+--destructive       /* Estado invalido */
+
+/* Espacamento */
+gap-2              /* Entre texto e icone */
+
+/* Tipografia */
+text-sm            /* 14px */
+text-base          /* 16px mobile */
+font-normal        /* 400 */
+
+/* Bordas */
+rounded-md         /* var(--radius) */
+
+/* Transicoes */
+transition-[color,box-shadow]
+```
+
+### data-slot
+
+```html
+<div data-slot="time-picker">
+  <button data-slot="time-picker-trigger">...</button>
+  <div data-slot="time-picker-content">...</div>
+</div>
+```
+
+---
+
+## API
+
+### Props
+
+| Prop | Tipo | Padrao | Descricao |
+|------|------|--------|-----------|
+| `value` | `string` | - | Valor controlado no formato "HH:mm" (24h) |
+| `defaultValue` | `string` | - | Valor inicial (nao controlado) no formato "HH:mm" |
+| `placeholder` | `string` | `"Select time"` | Texto quando nenhum horario selecionado |
+| `disabled` | `boolean` | `false` | Desabilita o time picker |
+| `use12Hour` | `boolean` | `false` | Usa formato 12h com seletor AM/PM |
+| `minuteStep` | `number` | `1` | Intervalo de minutos (ex: 15 para 00, 15, 30, 45) |
+| `onChange` | `(time: string \| undefined) => void` | - | Callback quando o horario muda |
+| `onOpenChange` | `(open: boolean) => void` | - | Callback quando o popover abre/fecha |
+| `size` | `"sm" \| "md" \| "lg"` | `"md"` | Tamanho visual do trigger |
+| `variant` | `"default" \| "filled" \| "flushed"` | `"default"` | Variante visual do trigger |
+| `required` | `boolean` | `false` | Campo obrigatorio |
+| `invalid` | `boolean` | `false` | Campo com valor invalido |
+| `id` | `string` | - | ID para associacao com label |
+| `name` | `string` | - | Nome para submissao de formulario |
+| `className` | `string` | - | Classes CSS adicionais |
+
+> Herda todas as props de `React.ComponentProps<"div">` exceto `onChange`, `value` e `defaultValue`
+
+### Callbacks
+
+| Callback | Tipo | Descricao |
+|----------|------|-----------|
+| `onChange` | `(time: string \| undefined) => void` | Disparado quando hora ou minuto muda |
+| `onOpenChange` | `(open: boolean) => void` | Disparado quando popover abre/fecha |
+
+### TypeScript
+
+```typescript
+import type {
+  TimePickerProps,
+  TimePickerSize,
+  TimePickerVariant
+} from "@etus/ui"
+
+// TimePickerProps inclui:
+interface TimePickerProps {
+  value?: string
+  defaultValue?: string
+  placeholder?: string
+  disabled?: boolean
+  use12Hour?: boolean
+  minuteStep?: number
+  onChange?: (time: string | undefined) => void
+  onOpenChange?: (open: boolean) => void
+  size?: TimePickerSize
+  variant?: TimePickerVariant
+  required?: boolean
+  invalid?: boolean
+  id?: string
+  name?: string
+  // ... + props de <div>
+}
+
+// Tipos derivados
+type TimePickerSize = "sm" | "md" | "lg"
+type TimePickerVariant = "default" | "filled" | "flushed"
+```
+
+### Comparativo com Design Systems de Referencia
+
+#### Matriz de Features (12 Design Systems)
+
+| Feature | ETUS | Shadcn | Radix | Chakra | MUI | Mantine | AntD | NextUI | Headless | Ariakit | Fluent | Carbon |
+|---------|:----:|:------:|:-----:|:------:|:---:|:-------:|:----:|:------:|:--------:|:-------:|:------:|:------:|
+| **Variantes** | 3 | - | - | - | 3 | - | - | - | - | - | 2 | - |
+| **Tamanhos** | 3 | - | - | 3 | 3 | 4 | 3 | 3 | - | - | 3 | 2 |
+| **CVA/cva** | Y | - | - | - | - | - | - | - | - | - | - | - |
+| **12/24 hour** | Y | - | - | - | Y | Y | Y | - | - | - | Y | Y |
+| **minuteStep** | Y | - | - | - | Y | Y | Y | - | - | - | Y | Y |
+| **Controlled** | Y | - | - | Y | Y | Y | Y | Y | - | - | Y | Y |
+| **Uncontrolled** | Y | - | - | Y | Y | Y | Y | - | - | - | Y | Y |
+| **Form integration** | Y | - | - | Y | Y | Y | Y | Y | - | - | Y | Y |
+| **data-slot** | Y | Y | - | - | - | - | - | Y | - | - | - | - |
+| **Scroll to selected** | Y | - | - | - | Y | Y | Y | - | - | - | Y | Y |
+| **Keyboard nav** | ~ | - | - | - | Y | Y | Y | - | - | - | Y | Y |
+| **Clear button** | - | - | - | - | Y | Y | Y | - | - | - | Y | - |
+| **Now button** | - | - | - | - | Y | - | Y | - | - | - | - | - |
+
+**Legenda:** Y = Suporte completo | ~ = Parcial | - = Nao disponivel/aplicavel
+
+#### Comparativo de Props por Design System
+
+| Prop | ETUS | MUI | Mantine | AntD | Fluent | Carbon |
+|------|:----:|:---:|:-------:|:----:|:------:|:------:|
+| `value` | Y | Y | Y | Y | Y | Y |
+| `defaultValue` | Y | Y | Y | Y | Y | Y |
+| `onChange` | Y | Y | Y | Y | Y | Y |
+| `disabled` | Y | Y | Y | Y | Y | Y |
+| `use12Hour` | Y | `ampm` | `format` | Y | Y | - |
+| `minuteStep` | Y | `minutesStep` | `step` | Y | `increment` | `step` |
+| `placeholder` | Y | Y | Y | Y | Y | Y |
+| `size` | Y | Y | Y | Y | Y | Y |
+| `variant` | Y | `variant` | `variant` | - | `appearance` | - |
+| `invalid` | Y | `error` | `error` | `status` | - | `invalid` |
+| `required` | Y | Y | Y | Y | Y | Y |
+| `name` | Y | Y | Y | Y | Y | Y |
+| `minTime` | - | Y | Y | Y | Y | - |
+| `maxTime` | - | Y | Y | Y | Y | - |
+| `disabledTime` | - | - | - | Y | - | - |
+
+#### Analise por Categoria
+
+**Headless/Primitivos (maxima flexibilidade):**
+- **Radix UI** - Nao possui TimePicker nativo
+- **Headless UI** - Nao possui TimePicker nativo
+- **Ariakit** - Nao possui TimePicker nativo
+- **React Aria** - `useTimeField` hook disponivel
+
+**Styled/Opinionated (produtividade):**
+- **MUI** - `TimePicker` completo com `@mui/x-date-pickers`
+- **Mantine** - `TimeInput` com mascara e `TimePicker` (v7+)
+- **Ant Design** - `TimePicker` muito completo, panels customizaveis
+
+**Enterprise:**
+- **Fluent UI** - `TimePicker` com incrementos e formato
+- **Carbon** - `TimePicker` basico, foco em formularios
+
+---
+
+## Acessibilidade (A11y)
+
+### ARIA Attributes
+
+| Atributo | Uso |
+|----------|-----|
+| `role="combobox"` | Trigger funciona como combobox |
+| `aria-expanded` | Indica se popover esta aberto |
+| `aria-haspopup="dialog"` | Indica que abre dialog/popover |
+| `aria-required` | Quando `required={true}` |
+| `aria-invalid` | Quando `invalid={true}` |
+| `aria-label` | Descricao do campo |
+| `aria-labelledby` | Referencia ao label |
+| `role="listbox"` | Container de selecao |
+| `role="option"` | Cada item selecionavel |
+| `aria-selected` | Item atualmente selecionado |
+
+### Suporte a Teclado
+
+| Tecla | Acao |
+|-------|------|
+| `Tab` | Move foco para/do trigger |
+| `Enter` / `Space` | Abre/fecha popover |
+| `Arrow Up/Down` | Navega entre opcoes (futuro) |
+| `Escape` | Fecha popover |
+
+### Focus Management
+
+```tsx
+// Focus visible apenas para navegacao por teclado
+focus-visible:border-ring
+focus-visible:ring-ring/50
+focus-visible:ring-[3px]
+```
+
+### Contraste de Cores
+
+Todos os pares de cores seguem WCAG 2.1 AA (minimo 4.5:1):
+
+| Elemento | Foreground | Background | Ratio |
+|----------|------------|------------|-------|
+| Trigger | `--foreground` | `--background` | >= 4.5:1 |
+| Selected item | `--primary-foreground` | `--primary` | >= 4.5:1 |
+| Hover item | `--accent-foreground` | `--accent` | >= 4.5:1 |
+
+### Screen Readers
+
+- Usar `aria-label` para contexto quando nao ha label visivel
+- Valores selecionados sao anunciados
+- Estados (aberto/fechado) sao comunicados
+
+### Reduced Motion
+
+```tsx
+// Items e transicoes respeitam preferencia do usuario
+@media (prefers-reduced-motion: reduce) {
+  scroll-behavior: auto;
+}
+```
+
+### Comparativo A11y (Design Systems)
+
+| Feature | ETUS | React Aria | MUI | Mantine | AntD | Fluent | Carbon |
+|---------|:----:|:----------:|:---:|:-------:|:----:|:------:|:------:|
+| **ARIA automatico** | Y | Y | Y | ~ | ~ | Y | Y |
+| **Focus visible** | Y | Y | Y | Y | Y | Y | Y |
+| **Keyboard nav** | ~ | Y | Y | Y | Y | Y | Y |
+| **aria-invalid** | Y | Y | Y | Y | ~ | Y | Y |
+| **Screen reader** | ~ | Y | Y | ~ | ~ | Y | Y |
+| **Reduced motion** | ~ | Y | Y | Y | - | Y | Y |
+
+---
+
+## Exemplos
+
+### Uso Basico
+
+```tsx
+import { TimePicker } from "@etus/ui"
+
+function Example() {
+  return <TimePicker placeholder="Selecione um horario" />
+}
+```
+
+### Controlado
+
+```tsx
+import { useState } from "react"
+import { TimePicker } from "@etus/ui"
+
+function ControlledExample() {
+  const [time, setTime] = useState<string | undefined>("09:30")
+
+  return (
+    <TimePicker
+      value={time}
+      onChange={setTime}
+      placeholder="Selecione um horario"
+    />
+  )
+}
+```
+
+### Formato 12 Horas
+
+```tsx
+<TimePicker use12Hour placeholder="Select time" />
+```
+
+### Intervalo de Minutos
+
+```tsx
+// Apenas 00, 15, 30, 45
+<TimePicker minuteStep={15} placeholder="Selecione" />
+
+// Apenas 00, 30
+<TimePicker minuteStep={30} placeholder="Meia em meia hora" />
+```
+
+### Variantes
+
+```tsx
+<TimePicker variant="default" placeholder="Default" />
+<TimePicker variant="filled" placeholder="Filled" />
+<TimePicker variant="flushed" placeholder="Flushed" />
+```
+
+### Tamanhos
+
+```tsx
+<TimePicker size="sm" placeholder="Small" />
+<TimePicker size="md" placeholder="Medium" />
+<TimePicker size="lg" placeholder="Large" />
+```
+
+### Estados
+
+```tsx
+// Desabilitado
+<TimePicker disabled placeholder="Desabilitado" />
+
+// Invalido
+<TimePicker invalid placeholder="Horario invalido" />
+
+// Obrigatorio
+<TimePicker required placeholder="Obrigatorio *" />
+```
+
+### Com Label
+
+```tsx
+import { Label } from "@etus/ui"
+
+function LabeledTimePicker() {
+  return (
+    <div className="space-y-2">
+      <Label htmlFor="meeting-time">Horario da reuniao</Label>
+      <TimePicker
+        id="meeting-time"
+        placeholder="Selecione o horario"
+      />
+    </div>
+  )
+}
+```
+
+### Integracao com Formulario
+
+```tsx
+import { useForm } from "react-hook-form"
+import { TimePicker } from "@etus/ui"
+
+interface FormData {
+  appointmentTime: string
+}
+
+function AppointmentForm() {
+  const { handleSubmit, setValue, watch } = useForm<FormData>()
+  const time = watch("appointmentTime")
+
+  const onSubmit = (data: FormData) => {
+    console.log("Appointment at:", data.appointmentTime)
+  }
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <TimePicker
+        name="appointmentTime"
+        value={time}
+        onChange={(t) => setValue("appointmentTime", t || "")}
+        placeholder="Selecione o horario"
+      />
+      <button type="submit">Agendar</button>
+    </form>
+  )
+}
+```
+
+### Com DatePicker (Composicao)
+
+```tsx
+import { DatePicker, TimePicker } from "@etus/ui"
+
+function DateTimePicker() {
+  const [date, setDate] = useState<Date>()
+  const [time, setTime] = useState<string>()
+
+  return (
+    <div className="flex gap-2">
+      <DatePicker value={date} onChange={setDate} />
+      <TimePicker value={time} onChange={setTime} use12Hour />
+    </div>
+  )
+}
+```
+
+### Responsividade
+
+```tsx
+// Tamanho responsivo via className
+<TimePicker
+  className="w-full sm:w-48"
+  size="md"
+  placeholder="Horario"
+/>
+```
+
+---
+
+## Testes
+
+### Testes Unitarios
+
+```tsx
+// TimePicker.test.tsx
+import { render, screen } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { describe, expect, it, vi } from "vitest"
+import { TimePicker } from "./TimePicker"
+
+describe("TimePicker", () => {
+  it("renders with placeholder", () => {
+    render(<TimePicker placeholder="Select time" />)
+    expect(screen.getByRole("combobox")).toHaveTextContent("Select time")
+  })
+
+  it("applies variant classes", () => {
+    render(<TimePicker variant="filled" />)
+    expect(screen.getByRole("combobox")).toHaveClass("bg-muted")
+  })
+
+  it("applies size classes", () => {
+    render(<TimePicker size="lg" />)
+    expect(screen.getByRole("combobox")).toHaveClass("h-10")
+  })
+
+  it("has data-slot attribute", () => {
+    render(<TimePicker />)
+    expect(screen.getByRole("combobox").closest("[data-slot]"))
+      .toHaveAttribute("data-slot", "time-picker")
+  })
+
+  it("renders hidden input with name", () => {
+    render(<TimePicker name="time" defaultValue="09:30" />)
+    const hiddenInput = document.querySelector('input[name="time"]')
+    expect(hiddenInput).toHaveValue("09:30")
+  })
+})
+```
+
+### Testes de Interacao
+
+```tsx
+describe("TimePicker interactions", () => {
+  it("opens popover on click", async () => {
+    const user = userEvent.setup()
+    render(<TimePicker />)
+
+    await user.click(screen.getByRole("combobox"))
+
+    expect(screen.getByRole("listbox")).toBeInTheDocument()
+  })
+
+  it("calls onChange when hour is selected", async () => {
+    const user = userEvent.setup()
+    const handleChange = vi.fn()
+
+    render(<TimePicker onChange={handleChange} />)
+    await user.click(screen.getByRole("combobox"))
+
+    const hourOption = screen.getByRole("option", { name: "09" })
+    await user.click(hourOption)
+
+    expect(handleChange).toHaveBeenCalledWith("09:00")
+  })
+
+  it("does not open when disabled", async () => {
+    const user = userEvent.setup()
+    render(<TimePicker disabled />)
+
+    await user.click(screen.getByRole("combobox"))
+
+    expect(screen.queryByRole("listbox")).not.toBeInTheDocument()
+  })
+
+  it("displays 12-hour format with AM/PM", async () => {
+    const user = userEvent.setup()
+    render(<TimePicker use12Hour />)
+
+    await user.click(screen.getByRole("combobox"))
+
+    expect(screen.getByRole("option", { name: "AM" })).toBeInTheDocument()
+    expect(screen.getByRole("option", { name: "PM" })).toBeInTheDocument()
+  })
+})
+```
+
+### Testes de Acessibilidade
+
+```tsx
+import { axe, toHaveNoViolations } from "jest-axe"
+
+expect.extend(toHaveNoViolations)
+
+describe("TimePicker accessibility", () => {
+  it("has no accessibility violations", async () => {
+    const { container } = render(
+      <TimePicker aria-label="Meeting time" />
+    )
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
+
+  it("has correct ARIA attributes", () => {
+    render(<TimePicker required invalid />)
+    const trigger = screen.getByRole("combobox")
+
+    expect(trigger).toHaveAttribute("aria-required", "true")
+    expect(trigger).toHaveAttribute("aria-invalid", "true")
+    expect(trigger).toHaveAttribute("aria-haspopup", "dialog")
+  })
+
+  it("announces expanded state", async () => {
+    const user = userEvent.setup()
+    render(<TimePicker />)
+    const trigger = screen.getByRole("combobox")
+
+    expect(trigger).toHaveAttribute("aria-expanded", "false")
+
+    await user.click(trigger)
+
+    expect(trigger).toHaveAttribute("aria-expanded", "true")
+  })
+})
+```
+
+### Cenarios Criticos
+
+```tsx
+describe("TimePicker edge cases", () => {
+  it("handles controlled value updates", () => {
+    const { rerender } = render(<TimePicker value="09:00" />)
+    expect(screen.getByRole("combobox")).toHaveTextContent("09:00")
+
+    rerender(<TimePicker value="14:30" />)
+    expect(screen.getByRole("combobox")).toHaveTextContent("14:30")
+  })
+
+  it("converts 12h to 24h format correctly", async () => {
+    const user = userEvent.setup()
+    const handleChange = vi.fn()
+
+    render(<TimePicker use12Hour onChange={handleChange} />)
+    await user.click(screen.getByRole("combobox"))
+
+    // Select 2 PM
+    await user.click(screen.getByRole("option", { name: "2" }))
+    await user.click(screen.getByRole("option", { name: "PM" }))
+
+    expect(handleChange).toHaveBeenCalledWith("14:00")
+  })
+
+  it("respects minuteStep", async () => {
+    const user = userEvent.setup()
+    render(<TimePicker minuteStep={15} />)
+
+    await user.click(screen.getByRole("combobox"))
+
+    const minuteOptions = screen.getAllByRole("option").filter(
+      opt => ["00", "15", "30", "45"].includes(opt.textContent || "")
+    )
+    expect(minuteOptions).toHaveLength(4)
+  })
+})
+```
+
+---
+
+## Roadmap / Features Futuras
+
+Baseado na analise comparativa com design systems de referencia:
+
+### Implementado
+
+- Formato 12/24 horas (`use12Hour`)
+- Intervalos de minutos (`minuteStep`)
+- Variantes visuais (`variant`)
+- Integracao com formularios (`name`)
+- Auto-scroll para item selecionado
+
+### Prioridade Alta
+
+#### `minTime` / `maxTime`
+
+Restricao de horarios disponiveis.
+
+```tsx
+// Proposta de API
+interface TimePickerProps {
+  minTime?: string // "09:00"
+  maxTime?: string // "18:00"
+}
+
+// Uso
+<TimePicker minTime="09:00" maxTime="18:00" />
+```
+
+**Referencias:** MUI, Mantine, AntD, Fluent UI
+
+#### `clearable`
+
+Botao para limpar selecao.
+
+```tsx
+// Proposta de API
+interface TimePickerProps {
+  clearable?: boolean
+}
+
+// Uso
+<TimePicker clearable />
+```
+
+**Referencias:** MUI, Mantine, AntD
+
+### Prioridade Media
+
+#### Navegacao completa por teclado
+
+Arrow keys para navegar entre horas/minutos.
+
+**Referencias:** MUI, AntD, Fluent UI
+
+#### `disabledTimes`
+
+Desabilitar horarios especificos.
+
+```tsx
+// Proposta de API
+interface TimePickerProps {
+  disabledTimes?: (time: string) => boolean
+}
+
+// Uso
+<TimePicker
+  disabledTimes={(time) => time === "12:00"}
+/>
+```
+
+**Referencias:** AntD
+
+### Prioridade Baixa
+
+#### `secondStep`
+
+Suporte a selecao de segundos.
+
+```tsx
+<TimePicker showSeconds secondStep={15} />
+```
+
+**Referencias:** AntD, MUI
+
+#### `nowButton`
+
+Botao para selecionar horario atual.
+
+```tsx
+<TimePicker showNow />
+```
+
+**Referencias:** MUI, AntD
+
+### Decisoes de Design
+
+| Feature | Recomendacao | Justificativa |
+|---------|--------------|---------------|
+| `minTime`/`maxTime` | Implementar | Alta demanda, agendamentos |
+| `clearable` | Implementar | UX comum, facil de adicionar |
+| Keyboard nav | Implementar | Acessibilidade essencial |
+| `disabledTimes` | Avaliar | Complexidade vs necessidade |
+| Segundos | Evitar | Raro em UIs modernas |
+| `nowButton` | Avaliar | Util mas nao essencial |
+
+---
+
+## Referencias
+
+### Design Systems Analisados
+
+| Design System | Documentacao TimePicker | GitHub |
+|---------------|-------------------------|--------|
+| **MUI** | [TimePicker](https://mui.com/x/react-date-pickers/time-picker/) | [mui/mui-x](https://github.com/mui/mui-x) |
+| **Mantine** | [TimeInput](https://mantine.dev/core/time-input/) | [mantinedev/mantine](https://github.com/mantinedev/mantine) |
+| **Ant Design** | [TimePicker](https://ant.design/components/time-picker) | [ant-design/ant-design](https://github.com/ant-design/ant-design) |
+| **Fluent UI** | [TimePicker](https://react.fluentui.dev/?path=/docs/components-timepicker) | [microsoft/fluentui](https://github.com/microsoft/fluentui) |
+| **Carbon** | [TimePicker](https://carbondesignsystem.com/components/time-picker/usage/) | [carbon-design-system/carbon](https://github.com/carbon-design-system/carbon) |
+| **React Aria** | [useTimeField](https://react-spectrum.adobe.com/react-aria/useTimeField.html) | [adobe/react-spectrum](https://github.com/adobe/react-spectrum) |
+| **Chakra UI** | - | [chakra-ui/chakra-ui](https://github.com/chakra-ui/chakra-ui) |
+| **NextUI** | - | [nextui-org/nextui](https://github.com/nextui-org/nextui) |
+
+### Especificacoes e Padroes
+
+- [WAI-ARIA APG - Combobox Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/)
+- [WAI-ARIA APG - Listbox Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/listbox/)
+- [WCAG 2.1 Success Criteria](https://www.w3.org/WAI/WCAG21/quickref/)
+- [MDN - Time Input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time)
+
+### Ferramentas Utilizadas
+
+- [CVA - Class Variance Authority](https://cva.style/docs)
+- [Tailwind CSS](https://tailwindcss.com/docs)
+- [Radix Popover](https://www.radix-ui.com/primitives/docs/components/popover)
+- [Lucide Icons](https://lucide.dev/icons/)