DatePicker

<!-- DateRangePickerWrapper -->
<div class="relative"></div>
 
<!-- DateRangePickerTrigger -->
<button
  class="inline-flex h-10 items-center justify-center gap-2 rounded-md border border-main-border bg-transparent px-3.5 text-sm text-default-text transition-colors duration-200 ease-in-out hover:bg-accent hover:text-accent-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-main active:brightness-90 disabled:pointer-events-none disabled:opacity-50">
  <svg
    stroke="currentColor"
    fill="none"
    stroke-width="2"
    viewBox="0 0 24 24"
    stroke-linecap="round"
    stroke-linejoin="round"
    height="1em"
    width="1em"
    xmlns="http://www.w3.org/2000/svg">
    <path d="M8 2v4"></path>
    <path d="M16 2v4"></path>
    <rect width="18" height="18" x="3" y="4" rx="2"></rect>
    <path d="M3 10h18"></path>
  </svg>
</button>
 
<!-- DateRangePickerContent -->
<div class="absolute left-1/2 z-10 mt-2 -translate-x-1/2 rounded-lg border border-main-border bg-surface p-3"></div>
 
<!-- DateRangePicker -->
<div
  class="custom_scroll_bar relative flex max-h-96 flex-col gap-2 overflow-y-scroll sm:flex-row md:max-h-none md:overflow-auto"></div>
 
<!-- ----------------------------- DateRangePickerNav ----------------------------- -->
<nav></nav>
 
<!-- DateRangePicker PreviousButton -->
<button
  class="absolute left-1 top-0 z-10 inline-flex h-7 w-7 items-center justify-center gap-1 rounded-md border border-main-border bg-transparent p-0 text-sm opacity-50 transition-colors duration-150 hover:bg-accent hover:text-accent-text hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-main active:brightness-90"
  aria-label="Go to the Previous Month"></button>
 
<!-- DateRangePicker NextButton -->
<button
  class="absolute right-1 top-0 z-10 inline-flex h-7 w-7 items-center justify-center gap-1 rounded-md border border-main-border bg-transparent p-0 text-sm opacity-50 transition-colors duration-150 hover:bg-accent hover:text-accent-text hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-main active:brightness-90"
  aria-label="Go to the Next Month"></button>
 
<!-- ---------------------------- DateRangePickerMain ----------------------------- -->
<div></div>
 
<!-- DateRangePickerTitle -->
<div class="flex items-center justify-center py-2">
  <span class="text-sm font-medium" role="status">Date Range Title</span>
</div>
 
<!-- DateRangePickerTable -->
<table role="grid" class="w-full border-collapse space-y-1"></table>
 
<!-- DateRangePickerTableHeader -->
<thead></thead>
 
<!-- DateRangePickerTableHeaderRow -->
<tr class="flex"></tr>
 
<!-- DateRangePickerTableHeaderCell -->
<th class="flex h-9 w-9 items-center justify-center text-[0.8rem] font-normal text-muted-text"></th>
 
<!-- DateRangePickerTableBody -->
<tbody></tbody>
 
<!-- DateRangePickerTableRow -->
<tr class="mt-0.5 flex w-full"></tr>
 
<!-- DateRangePickerTableCell/Default -->
<td></td>
 
<!-- DateRangePickerTableCell/InRange -->
<td class="bg-accent"></td>
 
<!-- DateRangePickerTableCell/DayOutside Right -->
<td class="rounded-r-md bg-accent"></td>
 
<!-- DateRangePickerTableCell/DayOutside Left -->
<td class="rounded-l-md bg-accent"></td>
 
<!-- DateRangePickerTableCellButton/Default -->
<button
  class="relative h-9 w-9 rounded-md p-0 text-center text-sm hover:bg-accent hover:text-accent-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-main active:brightness-90"></button>
 
<!-- DateRangePickerTableCellButton/Muted -->
<button
  class="relative h-9 w-9 rounded-md p-0 text-center text-sm text-muted-text text-muted-text/80 hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-main"></button>
 
<!-- DateRangePickerTableCellButton/Selected -->
<button
  class="relative h-9 w-9 rounded-md bg-primary p-0 text-center text-sm text-primary-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-main"></button>