npm - @etus/ui - Versions diffs - 0.1.1 → 0.1.2 - Mend

@etus/ui 0.1.1 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1080) hide show

package/src/components/forms/DatePicker/README.md DELETED Viewed

@@ -1,821 +0,0 @@
-# DatePicker
-## Visao Geral
-O **DatePicker** e um componente de selecao de data do Design System ETUS, que combina um trigger de input com um calendario popup. Construido sobre os componentes `Calendar` e `Popover`, oferece uma experiencia de selecao de data acessivel e personalizavel.
-### Casos de Uso
-- Selecao de datas em formularios
-- Filtros de data em dashboards e relatorios
-- Agendamento e reservas
-- Campos de nascimento e validade
-- Intervalos de datas (com componente DateRangePicker)
-### Classificacao
-**Categoria:** Organism
-**Dependencias:** `@radix-ui/react-popover`, `react-day-picker`, `date-fns`, `lucide-react`
----
-## Design Specs
-### Variantes (`variant`)
-| Variante | Uso | Tokens |
-|----------|-----|--------|
-| `default` | Uso padrao em formularios | `border-input`, `shadow-xs`, `dark:bg-input/30` |
-| `filled` | Destaque visual | `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` | Espacos compactos, tabelas |
-| `md` | `h-9` (36px) | `px-3` | Uso geral |
-| `lg` | `h-10` (40px) | `px-3.5` | Formularios destacados |
-### Estados
-| Estado | Classes/Atributos | Comportamento |
-|--------|-------------------|---------------|
-| Default | - | Aparencia base |
-| Hover | - | Feedback visual (herdado do estilo base) |
-| Focus | `focus-visible:ring-[3px]` | Ring de 3px com `ring-ring/50` |
-| Open | `data-state="open"` | Calendario visivel |
-| Disabled | `disabled:opacity-50` | 50% opacidade, sem pointer events |
-| Invalid | `aria-invalid:ring-destructive/20` | Ring vermelho |
-| Placeholder | `text-muted-foreground` | Texto esmaecido |
-### Tokens Utilizados
-```css
-/* Cores */
---input             /* Borda default */
---muted             /* Fundo filled */
---muted-foreground  /* Placeholder */
---ring              /* Focus ring */
---destructive       /* Estado invalido */
-/* Espacamento */
-gap-2               /* Entre texto e icone */
-/* Tipografia */
-text-sm             /* Size sm */
-text-base           /* Size md/lg mobile */
-md:text-sm          /* Size md desktop */
-font-normal         /* Peso do texto */
-/* Bordas */
-rounded-md          /* var(--radius) */
-/* Transicoes */
-transition-[color,box-shadow]
-```
-### data-slot
-```html
-<div data-slot="date-picker">
-  <button data-slot="date-picker-trigger">...</button>
-  <div data-slot="date-picker-calendar">...</div>
-</div>
-```
----
-## API
-### Props
-| Prop | Tipo | Padrao | Descricao |
-|------|------|--------|-----------|
-| `value` | `Date` | - | Data selecionada (controlado) |
-| `defaultValue` | `Date` | - | Data inicial (nao controlado) |
-| `placeholder` | `string` | `"Select date"` | Texto quando nenhuma data selecionada |
-| `disabled` | `boolean` | `false` | Desabilita o componente |
-| `minDate` | `Date` | - | Data minima selecionavel |
-| `maxDate` | `Date` | - | Data maxima selecionavel |
-| `format` | `string` | `"PPP"` | Formato de exibicao (date-fns) |
-| `onChange` | `(date: Date \| undefined) => void` | - | Callback quando data muda |
-| `onOpenChange` | `(open: boolean) => void` | - | Callback quando popover abre/fecha |
-| `size` | `"sm" \| "md" \| "lg"` | `"md"` | Tamanho do trigger |
-| `variant` | `"default" \| "filled" \| "flushed"` | `"default"` | Estilo visual |
-| `required` | `boolean` | `false` | Campo obrigatorio |
-| `invalid` | `boolean` | `false` | Estado de erro |
-| `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` | `(date: Date \| undefined) => void` | Disparado ao selecionar uma data |
-| `onOpenChange` | `(open: boolean) => void` | Disparado ao abrir/fechar o calendario |
-### TypeScript
-```typescript
-import type { DatePickerProps, DatePickerSize, DatePickerVariant } from "@etus/ui"
-// DatePickerProps inclui:
-interface DatePickerProps {
-  value?: Date
-  defaultValue?: Date
-  placeholder?: string
-  disabled?: boolean
-  minDate?: Date
-  maxDate?: Date
-  format?: string
-  onChange?: (date: Date | undefined) => void
-  onOpenChange?: (open: boolean) => void
-  size?: DatePickerSize
-  variant?: DatePickerVariant
-  required?: boolean
-  invalid?: boolean
-  id?: string
-  name?: string
-}
-// Tipos derivados
-type DatePickerSize = "sm" | "md" | "lg"
-type DatePickerVariant = "default" | "filled" | "flushed"
-```
-### Formatos de Data (date-fns)
-| Formato | Exemplo | Uso |
-|---------|---------|-----|
-| `"PPP"` | "January 1, 2024" | Padrao, formato longo |
-| `"PP"` | "Jan 1, 2024" | Medio |
-| `"P"` | "01/01/2024" | Curto numerico |
-| `"yyyy-MM-dd"` | "2024-01-01" | ISO |
-| `"dd/MM/yyyy"` | "01/01/2024" | Brasil |
-| `"MMMM d, yyyy"` | "January 1, 2024" | Customizado |
-### 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 |
-|---------|:----:|:------:|:-----:|:------:|:---:|:-------:|:----:|:------:|:--------:|:-------:|:------:|:------:|
-| **Single date** | ✓ | ✓ | - | ✓ | ✓ | ✓ | ✓ | ✓ | - | - | ✓ | ✓ |
-| **Date range** | - | ✓ | - | - | ✓ | ✓ | ✓ | ✓ | - | - | ✓ | ✓ |
-| **Time picker** | - | - | - | - | ✓ | ✓ | ✓ | - | - | - | ✓ | ✓ |
-| **Min/Max date** | ✓ | ✓ | - | ✓ | ✓ | ✓ | ✓ | ✓ | - | - | ✓ | ✓ |
-| **Format customization** | ✓ | ✓ | - | ✓ | ✓ | ✓ | ✓ | ✓ | - | - | ✓ | ✓ |
-| **Locale support** | ~ | ~ | - | ✓ | ✓ | ✓ | ✓ | ✓ | - | - | ✓ | ✓ |
-| **Keyboard nav** | ✓ | ✓ | - | ✓ | ✓ | ✓ | ✓ | ✓ | - | - | ✓ | ✓ |
-| **Controlled/Uncontrolled** | ✓ | ✓ | - | ✓ | ✓ | ✓ | ✓ | ✓ | - | - | ✓ | ✓ |
-| **Form integration** | ✓ | ✓ | - | ✓ | ✓ | ✓ | ✓ | ✓ | - | - | ✓ | ✓ |
-| **Variants** | 3 | 1 | - | - | 3 | 4 | - | 4 | - | - | 3 | 2 |
-| **Sizes** | 3 | 1 | - | 3 | 3 | 4 | 3 | 3 | - | - | 3 | 2 |
-#### Comparativo de Props por Design System
-| Prop | ETUS | Chakra | MUI | Mantine | AntD | NextUI | Fluent |
-|------|:----:|:------:|:---:|:-------:|:----:|:------:|:------:|
-| `value` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
-| `defaultValue` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
-| `onChange` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
-| `minDate` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
-| `maxDate` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
-| `disabled` | ✓ | `isDisabled` | ✓ | ✓ | ✓ | `isDisabled` | ✓ |
-| `format` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
-| `placeholder` | ✓ | ✓ | - | ✓ | ✓ | ✓ | ✓ |
-| `locale` | - | ✓ | ✓ | ✓ | ✓ | - | ✓ |
-| `clearable` | - | - | ✓ | ✓ | ✓ | - | - |
-| `showToday` | - | - | - | - | ✓ | - | ✓ |
-| `disabledDates` | - | - | ✓ | ✓ | ✓ | - | ✓ |
----
-## Acessibilidade (A11y)
-### ARIA Attributes
-| Atributo | Uso |
-|----------|-----|
-| `role="combobox"` | Indica trigger de selecao |
-| `aria-expanded` | Estado aberto/fechado do popup |
-| `aria-haspopup="dialog"` | Indica que abre um dialog |
-| `aria-required` | Quando `required={true}` |
-| `aria-invalid` | Quando `invalid={true}` |
-| `aria-label` | Label acessivel alternativo |
-| `aria-labelledby` | Referencia a label externo |
-### Suporte a Teclado
-| Tecla | Acao |
-|-------|------|
-| `Tab` | Move foco para/do trigger |
-| `Enter` / `Space` | Abre/fecha o calendario |
-| `Escape` | Fecha o calendario |
-| `Arrow Keys` | Navega entre dias no calendario |
-| `Page Up/Down` | Navega entre meses |
-| `Home` / `End` | Vai para inicio/fim do mes |
-### Focus Management
-```tsx
-// Focus visible apenas para navegacao por teclado
-focus-visible:border-ring
-focus-visible:ring-ring/50
-focus-visible:ring-[3px]
-// Initial focus no calendario quando abre
-<Calendar initialFocus />
-```
-### Contraste de Cores
-Todos os pares de cores seguem WCAG 2.1 AA (minimo 4.5:1):
-| Estado | Foreground | Background | Ratio |
-|--------|------------|------------|-------|
-| Default | texto | `--background` | >= 4.5:1 |
-| Placeholder | `--muted-foreground` | `--background` | >= 4.5:1 |
-| Invalid | `--destructive` | `--background` | >= 4.5:1 |
-### Screen Readers
-- O trigger anuncia o estado e a data selecionada
-- Mudancas de mes sao anunciadas
-- Datas desabilitadas sao indicadas
-- Usar `aria-label` quando nao houver label visivel
-### Reduced Motion
-```tsx
-// Respeitar preferencia do usuario
-@media (prefers-reduced-motion: reduce) {
-  transition: none;
-}
-```
-### Comparativo A11y (12 Design Systems)
-| Feature | ETUS | React Aria | Radix | Ariakit | Headless | Chakra | MUI | Mantine | AntD | NextUI | Fluent | Carbon |
-|---------|:----:|:----------:|:-----:|:-------:|:--------:|:------:|:---:|:-------:|:----:|:------:|:------:|:------:|
-| **ARIA automatico** | ✓ | ✓ | ✓ | ✓ | ✓ | ~ | ~ | ~ | ~ | ~ | ✓ | ✓ |
-| **Focus visible** | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
-| **Focus trap** | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | - | ✓ | ✓ | ✓ |
-| **Keyboard nav** | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
-| **Live regions** | - | ✓ | - | ✓ | - | - | ✓ | - | - | - | ✓ | ✓ |
-| **Reduced motion** | ~ | ✓ | - | - | - | ✓ | ✓ | ✓ | - | ✓ | ✓ | ✓ |
-**Legenda:** ✓ = Suporte completo | ~ = Parcial/Manual | - = Nao suportado
----
-## Exemplos
-### Uso Basico
-```tsx
-import { DatePicker } from "@etus/ui"
-function Example() {
-  return <DatePicker placeholder="Selecione uma data" />
-}
-```
-### Controlado
-```tsx
-import { useState } from "react"
-import { DatePicker } from "@etus/ui"
-function ControlledExample() {
-  const [date, setDate] = useState<Date>()
-  return (
-    <DatePicker
-      value={date}
-      onChange={setDate}
-      placeholder="Selecione uma data"
-    />
-  )
-}
-```
-### Com Valor Padrao
-```tsx
-import { DatePicker } from "@etus/ui"
-function DefaultValueExample() {
-  return (
-    <DatePicker
-      defaultValue={new Date(2024, 0, 15)}
-      placeholder="Selecione uma data"
-    />
-  )
-}
-```
-### Variantes
-```tsx
-<DatePicker variant="default" placeholder="Default" />
-<DatePicker variant="filled" placeholder="Filled" />
-<DatePicker variant="flushed" placeholder="Flushed" />
-```
-### Tamanhos
-```tsx
-<DatePicker size="sm" placeholder="Small" />
-<DatePicker size="md" placeholder="Medium" />
-<DatePicker size="lg" placeholder="Large" />
-```
-### Com Limites de Data
-```tsx
-import { DatePicker } from "@etus/ui"
-function DateRangeExample() {
-  const today = new Date()
-  const nextMonth = new Date(today)
-  nextMonth.setMonth(nextMonth.getMonth() + 1)
-  return (
-    <DatePicker
-      minDate={today}
-      maxDate={nextMonth}
-      placeholder="Selecione (proximo mes)"
-    />
-  )
-}
-```
-### Formato Customizado
-```tsx
-// Formato brasileiro
-<DatePicker format="dd/MM/yyyy" placeholder="DD/MM/AAAA" />
-// Formato ISO
-<DatePicker format="yyyy-MM-dd" placeholder="AAAA-MM-DD" />
-// Formato curto
-<DatePicker format="PP" placeholder="Jan 1, 2024" />
-```
-### Estados
-```tsx
-// Disabled
-<DatePicker disabled placeholder="Desabilitado" />
-// Required
-<DatePicker required placeholder="Obrigatorio *" />
-// Invalid
-<DatePicker invalid placeholder="Data invalida" />
-```
-### Com Label
-```tsx
-import { Label } from "@etus/ui"
-import { DatePicker } from "@etus/ui"
-function LabelExample() {
-  return (
-    <div className="space-y-2">
-      <Label htmlFor="birth-date">Data de Nascimento</Label>
-      <DatePicker
-        id="birth-date"
-        placeholder="Selecione sua data de nascimento"
-      />
-    </div>
-  )
-}
-```
-### Integracao com Formulario
-```tsx
-import { useForm, Controller } from "react-hook-form"
-import { DatePicker } from "@etus/ui"
-import { Button } from "@etus/ui"
-interface FormData {
-  eventDate: Date
-}
-function FormExample() {
-  const { control, handleSubmit } = useForm<FormData>()
-  const onSubmit = (data: FormData) => {
-    console.log("Data selecionada:", data.eventDate)
-  }
-  return (
-    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
-      <Controller
-        control={control}
-        name="eventDate"
-        rules={{ required: "Data e obrigatoria" }}
-        render={({ field, fieldState }) => (
-          <DatePicker
-            value={field.value}
-            onChange={field.onChange}
-            invalid={!!fieldState.error}
-            placeholder="Data do evento"
-          />
-        )}
-      />
-      <Button type="submit">Salvar</Button>
-    </form>
-  )
-}
-```
-### Submissao de Formulario (input hidden)
-```tsx
-import { DatePicker } from "@etus/ui"
-function FormSubmitExample() {
-  return (
-    <form action="/api/submit" method="POST">
-      <DatePicker
-        name="selected_date"
-        placeholder="Selecione uma data"
-      />
-      <button type="submit">Enviar</button>
-    </form>
-  )
-}
-// O valor e enviado como ISO string no input hidden
-```
-### Callback de Abertura
-```tsx
-import { DatePicker } from "@etus/ui"
-function OpenChangeExample() {
-  const handleOpenChange = (open: boolean) => {
-    console.log(open ? "Calendario aberto" : "Calendario fechado")
-  }
-  return (
-    <DatePicker
-      onOpenChange={handleOpenChange}
-      placeholder="Monitora abertura"
-    />
-  )
-}
-```
----
-## Testes
-### Testes Unitarios
-```tsx
-// DatePicker.test.tsx
-import { render, screen } from "@testing-library/react"
-import userEvent from "@testing-library/user-event"
-import { describe, expect, it, vi } from "vitest"
-import { DatePicker } from "./DatePicker"
-describe("DatePicker", () => {
-  it("renders with placeholder", () => {
-    render(<DatePicker placeholder="Select date" />)
-    expect(screen.getByRole("combobox")).toHaveTextContent("Select date")
-  })
-  it("applies variant classes", () => {
-    render(<DatePicker variant="filled" />)
-    expect(screen.getByRole("combobox")).toHaveClass("bg-muted")
-  })
-  it("applies size classes", () => {
-    render(<DatePicker size="lg" />)
-    expect(screen.getByRole("combobox")).toHaveClass("h-10")
-  })
-  it("has data-slot attribute", () => {
-    render(<DatePicker />)
-    expect(screen.getByRole("combobox").closest("[data-slot]"))
-      .toHaveAttribute("data-slot", "date-picker")
-  })
-  it("displays formatted date when value is set", () => {
-    const date = new Date(2024, 0, 15)
-    render(<DatePicker value={date} format="PP" />)
-    expect(screen.getByRole("combobox")).toHaveTextContent("Jan 15, 2024")
-  })
-})
-```
-### Testes de Interacao
-```tsx
-describe("DatePicker interactions", () => {
-  it("opens calendar on click", async () => {
-    const user = userEvent.setup()
-    render(<DatePicker />)
-    await user.click(screen.getByRole("combobox"))
-    expect(screen.getByRole("dialog")).toBeInTheDocument()
-  })
-  it("calls onChange when date is selected", async () => {
-    const user = userEvent.setup()
-    const handleChange = vi.fn()
-    render(<DatePicker onChange={handleChange} />)
-    await user.click(screen.getByRole("combobox"))
-    await user.click(screen.getByRole("gridcell", { name: "15" }))
-    expect(handleChange).toHaveBeenCalledWith(expect.any(Date))
-  })
-  it("closes calendar after selection", async () => {
-    const user = userEvent.setup()
-    render(<DatePicker />)
-    await user.click(screen.getByRole("combobox"))
-    await user.click(screen.getByRole("gridcell", { name: "15" }))
-    expect(screen.queryByRole("dialog")).not.toBeInTheDocument()
-  })
-  it("does not open when disabled", async () => {
-    const user = userEvent.setup()
-    render(<DatePicker disabled />)
-    await user.click(screen.getByRole("combobox"))
-    expect(screen.queryByRole("dialog")).not.toBeInTheDocument()
-  })
-  it("respects minDate restriction", async () => {
-    const user = userEvent.setup()
-    const today = new Date()
-    const yesterday = new Date(today)
-    yesterday.setDate(yesterday.getDate() - 1)
-    render(<DatePicker minDate={today} defaultValue={today} />)
-    await user.click(screen.getByRole("combobox"))
-    // Yesterday should be disabled
-    const yesterdayCell = screen.getByRole("gridcell", {
-      name: yesterday.getDate().toString()
-    })
-    expect(yesterdayCell).toHaveAttribute("aria-disabled", "true")
-  })
-})
-```
-### Testes de Acessibilidade
-```tsx
-import { axe, toHaveNoViolations } from "jest-axe"
-expect.extend(toHaveNoViolations)
-describe("DatePicker accessibility", () => {
-  it("has no accessibility violations", async () => {
-    const { container } = render(<DatePicker aria-label="Select date" />)
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-  })
-  it("has proper ARIA attributes", () => {
-    render(<DatePicker required invalid />)
-    const trigger = screen.getByRole("combobox")
-    expect(trigger).toHaveAttribute("aria-haspopup", "dialog")
-    expect(trigger).toHaveAttribute("aria-expanded", "false")
-    expect(trigger).toHaveAttribute("aria-required", "true")
-    expect(trigger).toHaveAttribute("aria-invalid", "true")
-  })
-  it("updates aria-expanded when opened", async () => {
-    const user = userEvent.setup()
-    render(<DatePicker />)
-    const trigger = screen.getByRole("combobox")
-    expect(trigger).toHaveAttribute("aria-expanded", "false")
-    await user.click(trigger)
-    expect(trigger).toHaveAttribute("aria-expanded", "true")
-  })
-  it("can be navigated with keyboard", async () => {
-    const user = userEvent.setup()
-    render(<DatePicker />)
-    screen.getByRole("combobox").focus()
-    await user.keyboard("{Enter}")
-    expect(screen.getByRole("dialog")).toBeInTheDocument()
-    await user.keyboard("{Escape}")
-    expect(screen.queryByRole("dialog")).not.toBeInTheDocument()
-  })
-})
-```
-### Testes de Formulario
-```tsx
-describe("DatePicker form integration", () => {
-  it("renders hidden input with name", () => {
-    render(<DatePicker name="date_field" />)
-    expect(document.querySelector('input[name="date_field"]')).toBeInTheDocument()
-  })
-  it("hidden input contains ISO date value", () => {
-    const date = new Date(2024, 0, 15)
-    render(<DatePicker name="date_field" value={date} />)
-    const hiddenInput = document.querySelector('input[name="date_field"]')
-    expect(hiddenInput).toHaveValue(date.toISOString())
-  })
-  it("hidden input is empty when no date selected", () => {
-    render(<DatePicker name="date_field" />)
-    const hiddenInput = document.querySelector('input[name="date_field"]')
-    expect(hiddenInput).toHaveValue("")
-  })
-})
-```
----
-## Roadmap / Features Futuras
-Baseado na analise comparativa com 14 design systems, as seguintes features sao candidatas para implementacao futura:
-### Prioridade Alta
-#### `DateRangePicker`
-Componente para selecao de intervalo de datas.
-```tsx
-// Proposta de API
-interface DateRangePickerProps {
-  value?: { from: Date; to: Date }
-  onChange?: (range: { from: Date; to: Date } | undefined) => void
-  presets?: Array<{ label: string; range: { from: Date; to: Date } }>
-}
-// Uso
-<DateRangePicker
-  value={dateRange}
-  onChange={setDateRange}
-  presets={[
-    { label: "Ultimos 7 dias", range: { from: subDays(new Date(), 7), to: new Date() } },
-    { label: "Este mes", range: { from: startOfMonth(new Date()), to: new Date() } }
-  ]}
-/>
-```
-**Referencias:** Shadcn, MUI, Mantine, AntD
-#### `locale`
-Suporte a internacionalizacao.
-```tsx
-// Proposta de API
-<DatePicker locale={ptBR} />
-```
-**Referencias:** Chakra, MUI, Mantine, AntD
-### Prioridade Media
-#### `clearable`
-Botao para limpar a data selecionada.
-```tsx
-// Proposta de API
-<DatePicker clearable onClear={() => console.log("cleared")} />
-```
-**Referencias:** MUI, Mantine, AntD
-#### `disabledDates`
-Funcao para desabilitar datas especificas.
-```tsx
-// Proposta de API
-<DatePicker
-  disabledDates={(date) => date.getDay() === 0 || date.getDay() === 6}
-/>
-```
-**Referencias:** MUI, Mantine, AntD
-#### `showToday`
-Botao para selecionar data atual.
-```tsx
-// Proposta de API
-<DatePicker showToday />
-```
-**Referencias:** AntD, Fluent UI
-### Prioridade Baixa
-#### `DateTimePicker`
-Selecao combinada de data e hora.
-```tsx
-// Proposta de API
-<DateTimePicker
-  value={dateTime}
-  onChange={setDateTime}
-  timeFormat="HH:mm"
-/>
-```
-**Referencias:** MUI, Mantine, AntD
-#### `presets`
-Opcoes pre-definidas de data.
-```tsx
-// Proposta de API
-<DatePicker
-  presets={[
-    { label: "Hoje", value: new Date() },
-    { label: "Amanha", value: addDays(new Date(), 1) }
-  ]}
-/>
-```
-**Referencias:** Shadcn
-### Decisoes de Design
-| Feature | Recomendacao | Justificativa |
-|---------|--------------|---------------|
-| `DateRangePicker` | Implementar | Alta demanda para filtros |
-| `locale` | Implementar | Essencial para i18n |
-| `clearable` | Implementar | UX padrao |
-| `disabledDates` | Implementar | Flexibilidade |
-| `showToday` | Avaliar | Uso especifico |
-| `DateTimePicker` | Componente separado | Complexidade |
-| `presets` | Avaliar | Pode ser composicao |
----
-## Referencias
-### Design Systems Analisados
-| Design System | Documentacao DatePicker | GitHub |
-|---------------|------------------------|--------|
-| **Shadcn/ui** | [Date Picker](https://ui.shadcn.com/docs/components/date-picker) | [shadcn-ui/ui](https://github.com/shadcn-ui/ui) |
-| **React Aria** | [DatePicker](https://react-spectrum.adobe.com/react-aria/DatePicker.html) | [adobe/react-spectrum](https://github.com/adobe/react-spectrum) |
-| **Chakra UI** | [Date Picker](https://www.chakra-ui.com/docs/components/date-picker) | [chakra-ui/chakra-ui](https://github.com/chakra-ui/chakra-ui) |
-| **MUI** | [Date Picker](https://mui.com/x/react-date-pickers/date-picker/) | [mui/material-ui](https://github.com/mui/material-ui) |
-| **Mantine** | [DatePicker](https://mantine.dev/dates/date-picker/) | [mantinedev/mantine](https://github.com/mantinedev/mantine) |
-| **Ant Design** | [DatePicker](https://ant.design/components/date-picker) | [ant-design/ant-design](https://github.com/ant-design/ant-design) |
-| **NextUI** | [Date Picker](https://nextui.org/docs/components/date-picker) | [nextui-org/nextui](https://github.com/nextui-org/nextui) |
-| **Fluent UI** | [DatePicker](https://react.fluentui.dev/?path=/docs/components-datepicker--default) | [microsoft/fluentui](https://github.com/microsoft/fluentui) |
-| **Carbon** | [Date Picker](https://carbondesignsystem.com/components/date-picker/usage/) | [carbon-design-system/carbon](https://github.com/carbon-design-system/carbon) |
-| **Blueprint** | [DatePicker](https://blueprintjs.com/docs/#datetime/datepicker) | [palantir/blueprint](https://github.com/palantir/blueprint) |
-| **PrimeReact** | [Calendar](https://primereact.org/calendar/) | [primefaces/primereact](https://github.com/primefaces/primereact) |
-### Especificacoes e Padroes
-- [WAI-ARIA APG - Date Picker Dialog](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog/)
-- [WCAG 2.1 Success Criteria](https://www.w3.org/WAI/WCAG21/quickref/)
-- [date-fns Format](https://date-fns.org/docs/format)
-- [react-day-picker](https://react-day-picker.js.org/)
-### Ferramentas Utilizadas
-- [CVA - Class Variance Authority](https://cva.style/docs)
-- [Tailwind CSS](https://tailwindcss.com/docs)
-- [date-fns](https://date-fns.org/)
-- [Radix Popover](https://www.radix-ui.com/primitives/docs/components/popover)
-- [Lucide Icons](https://lucide.dev/icons/)