DatePicker

import { DatePicker } from "@compa11y/react";

import { useState } from "react";
import { DatePicker, Button, Text } from "@compa11y/react";

// Single date
function BirthdayPicker() {
  const [date, setDate] = useState<Date>();

  return (
    <div>
      <Text as="label" size="sm" weight="semibold">Birthday</Text>
      <DatePicker value={date} onValueChange={setDate}>
        <DatePicker.Input placeholder="DD/MM/YYYY" />
        <DatePicker.Trigger>
          <Button variant="ghost" size="sm">Pick date</Button>
        </DatePicker.Trigger>
        <DatePicker.Calendar />
      </DatePicker>
    </div>
  );
}

// Date range
function BookingDateRange() {
  const [range, setRange] = useState<[Date, Date]>();

  return (
    <DatePicker
      mode="range"
      value={range}
      onValueChange={setRange}
      minDate={new Date()}
    >
      <DatePicker.RangeInputs />
      <DatePicker.Calendar />
    </DatePicker>
  );
}