Date picker

<div
  data-part="date-picker-root"
  id="date-picker-1"
>
  <div class="max-w-xs mb-2">
    <label
      class="block"
      for="date-picker:date-picker-1:input"
      id="appointment-date-label"
    >Appointment date</label>
    <div id="appointment-date-hint" class="text-gray-50">mm/dd/yyyy</div>
  </div>
  <div class="flex max-w-mobile-lg relative">
    <input
      data-part="date-picker-input"
      type="text"
      placeholder="MM/DD/YYYY"
      class="p-2 w-full h-10 border border-gray-60 focus:outline-offset-0 focus:outline-4 focus:outline-blue-40v data-[invalid]:ring-4 placeholder:invisible"
      aria-describedby="appointment-date-hint"
      aria-labelledby="appointment-date-label"
    />
    <button
      data-part="date-picker-trigger"
      class="cursor-pointer w-12 bg-transparent hover:bg-gray-10! data-[state=open]:bg-gray-5 active:bg-gray-30 focus:outline-4 focus:outline-blue-40v focus:-outline-offset-4 flex items-center justify-center"
      aria-label="Toggle calendar"
    >
      <span class="icon-[material-symbols--calendar-today] size-7"></span>
    </button>
    <div
      data-part="date-picker-content"
      class="bg-gray-5 w-mobile absolute top-10 right-0 not-data-[state=open]:hidden"
    >
      <div data-part="date-picker-day">
        <div class="flex w-full justify-between">
          <div class="flex">
            <button
              data-part="date-picker-nav-prev"
              data-unit="year"
              class="size-10 flex items-center justify-center hover:bg-gray-10 cursor-pointer focus:outline-4 focus:outline-blue-40v focus:-outline-offset-4 disabled:cursor-not-allowed disabled:opacity-0"
            >
              <span class="icon-[material-symbols--keyboard-double-arrow-left] size-6"></span>
            </button>
            <button
              data-part="date-picker-nav-prev"
              data-unit="month"
              class="size-10 flex items-center justify-center hover:bg-gray-10 cursor-pointer focus:outline-4 focus:outline-blue-40v focus:-outline-offset-4 disabled:cursor-not-allowed disabled:opacity-0"
            >
              <span class="icon-[material-symbols--keyboard-arrow-left] size-6"></span>
            </button>
          </div>
          <div class="flex grow-1 justify-center">
            <button
              data-part="date-view-trigger"
              data-value="month"
              class="h-10 px-1 flex items-center hover:bg-gray-10 cursor-pointer focus:outline-4 focus:outline-blue-40v focus:-outline-offset-4"
            ></button>
            <button
              data-part="date-view-trigger"
              data-value="year"
              class="h-10 px-1 flex items-center hover:bg-gray-10 cursor-pointer focus:outline-4 focus:outline-blue-40v focus:-outline-offset-4"
            ></button>
          </div>
          <div class="flex">
            <button
              data-part="date-picker-nav-next"
              data-unit="month"
              class="size-10 flex items-center justify-center hover:bg-gray-10 cursor-pointer focus:outline-4 focus:outline-blue-40v focus:-outline-offset-4 disabled:cursor-not-allowed disabled:opacity-0"
            >
              <span class="icon-[material-symbols--keyboard-arrow-right] size-6"></span>
            </button>
            <button
              data-part="date-picker-nav-next"
              data-unit="year"
              class="size-10 flex items-center justify-center hover:bg-gray-10 cursor-pointer focus:outline-4 focus:outline-blue-40v focus:-outline-offset-4 disabled:cursor-not-allowed disabled:opacity-0"
            >
              <span class="icon-[material-symbols--keyboard-double-arrow-right] size-6"></span>
            </button>
          </div>
        </div>
        <table class="w-full">
          <thead>
            <tr>
              <th
                data-part="date-picker-day-header"
                class="text-center py-1.5 font-normal"
              ></th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                <button
                  data-part="date-picker-date-button"
                  class="w-full py-1.5 hover:bg-gray-10 cursor-pointer text-center data-[month-context=prev]:text-gray-warm-60 data-[month-context=next]:text-gray-warm-60 data-[focus]:outline-2 data-[focus]:outline-blue-warm-80v data-[focus]:-outline-offset-2 focus:outline-4! focus:outline-blue-40v! focus:-outline-offset-4! data-[range-start]:bg-blue-warm-60v data-[range-start]:text-white data-[range-start]:rounded-s-sm data-[range-end]:bg-blue-warm-60v data-[range-end]:text-white data-[range-end]:rounded-e-sm data-[in-range]:bg-blue-warm-10v data-[in-range]:text-ink data-[range-hover]:bg-blue-warm-10v active:bg-gray-30 data-selected:active:bg-blue-warm-70v disabled:cursor-not-allowed disabled:opacity-60 disabled:text-black/30 disabled:hover:bg-transparent"
                ></button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div
        data-part="date-picker-month"
        class="py-5 px-1.5"
      >
        <table class="w-full">
          <tbody>
            <tr>
              <td class="w-1/3">
                <button
                  data-part="date-picker-month-button"
                  class="size-full text-center py-2.5 hover:bg-gray-10 cursor-pointer data-[focus]:outline-2 data-[focus]:outline-blue-warm-80v data-[focus]:-outline-offset-2 data-[selected]:bg-blue-warm-60v data-[selected]:text-white focus:outline-4! focus:outline-blue-40v! focus:-outline-offset-4! leading-none disabled:cursor-not-allowed disabled:opacity-60 disabled:text-black/30 disabled:hover:bg-transparent"
                ></button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div
        data-part="date-picker-year"
        class="py-5 px-1.5"
      >
        <div class="flex items-center">
          <button
            data-part="date-picker-nav-prev"
            data-unit="decade"
            class="hover:bg-gray-10 cursor-pointer text-center h-26 w-16 shrink-0"
          >
            <span class="icon-[material-symbols--keyboard-arrow-left] size-8"></span>
          </button>
          <table class="w-full">
            <tbody>
              <tr>
                <td class="w-1/4">
                  <button
                    data-part="date-picker-year-button"
                    class="size-full text-center py-2.5 hover:bg-gray-10 cursor-pointer data-[focus]:outline-2 data-[focus]:outline-blue-warm-80v data-[focus]:-outline-offset-2 data-[selected]:bg-blue-warm-60v data-[selected]:text-white focus:outline-4! focus:outline-blue-40v! focus:-outline-offset-4! leading-none disabled:cursor-not-allowed disabled:opacity-60 disabled:text-black/30 disabled:hover:bg-transparent"
                  ></button>
                </td>
              </tr>
            </tbody>
          </table>
          <button
            data-part="date-picker-nav-next"
            data-unit="decade"
            class="hover:bg-gray-10 cursor-pointer text-center h-26 w-16 shrink-0"
          >
            <span class="icon-[material-symbols--keyboard-arrow-right] size-8"></span>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>