"use client"
import * as React from "react"
import { Calendar } from "@/components/ui/calendar"

export function MeuCalendario() {
  const [date, setDate] = React.useState<Date | undefined>(new Date())

  return (
    <Calendar
      mode="single"
      selected={date}
      onSelect={setDate}
    />
  )
}

"use client"
import * as React from "react"
import { Calendar } from "@/components/ui/calendar"
import type { DateRange } from "react-day-picker"

export function CalendarioRange() {
  const [range, setRange] = React.useState<DateRange>({ from: undefined })

  return (
    <Calendar
      mode="range"
      selected={range}
      onSelect={(r) => setRange(r ?? { from: undefined })}
    />
  )
}

<Calendar
  mode="single"
  selected={date}
  onSelect={setDate}
  disabled={(date) => date < new Date()}
/>

<Calendar
  mode="single"
  captionLayout="dropdown"
  selected={date}
  onSelect={setDate}
/>