Standalone Date Picker

import { DatePicker } from '@ark-ui/react/date-picker'
import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react'
import { DayView } from './day-view'

export const Example = () => (
  <DatePicker.Root inline startOfWeek={1} selectionMode="range" numOfMonths={2}>
    <DatePicker.Context>
      {(datePicker) => (
        <div>
          <div>
            <DatePicker.YearSelect />
            <DatePicker.MonthSelect />
            <button type="button" onClick={() => datePicker.selectToday()}>
              Today
            </button>
          </div>
          <div>
            <DatePicker.PrevTrigger>
              <ChevronLeftIcon />
            </DatePicker.PrevTrigger>
            <span>{datePicker.visibleRangeText.start}</span>
            <DatePicker.NextTrigger>
              <ChevronRightIcon />
            </DatePicker.NextTrigger>
            <span>{datePicker.visibleRangeText.end}</span>
          </div>
          <div>
            <DayView monthOffset={0} />
            <DayView monthOffset={1} />
          </div>
          <DatePicker.Control>
            <DatePicker.Input index={0} />
            <span>-</span>
            <DatePicker.Input index={1} />
            <DatePicker.ClearTrigger>Clear</DatePicker.ClearTrigger>
          </DatePicker.Control>
          <div>
            {presets.map((preset) => (
              <DatePicker.PresetTrigger key={preset.value} value={preset.value}>
                {preset.label}
              </DatePicker.PresetTrigger>
            ))}
          </div>
        </div>
      )}
    </DatePicker.Context>
  </DatePicker.Root>
)

const presets = [
  { label: 'Last 3 days', value: 'last3Days' },
  { label: 'Last 7 days', value: 'last7Days' },
  { label: 'Last 14 days', value: 'last14Days' },
  { label: 'Last 30 days', value: 'last30Days' },
  { label: 'Last 90 days', value: 'last90Days' },
] as const