DatePicker

<div class="ui-date">
  <button type="button" class="ui-date__trigger field-control" role="combobox"
    aria-haspopup="dialog" aria-expanded="false" aria-labelledby="date-label">
    <span class="ui-icon ui-icon--calendar ui-date__calendar" aria-hidden="true"></span>
    <span class="ui-date__value">Jun 15, 2024</span>
    <span class="ui-icon ui-icon--chevron-down ui-date__chevron" aria-hidden="true"></span>
  </button>
</div>
<!-- Panel (portaled when open): .ui-date__panel[role=dialog] with monthbar + grid -->

import { DatePicker } from 'caustica-design/core'
import 'caustica-design/css'

<DatePicker
  value={date}
  onChange={setDate}
  placeholder="Choose date"
  panelLabel="Choose date"
  prevMonthLabel="Previous month"
  nextMonthLabel="Next month"
  clearLabel="Clear date"
  aria-labelledby="date-label"
/>