Размеры

У DatePicker и DateRangePicker есть проп size с тремя пресетами: s, m, l. По умолчанию — m.

Выбери пресет — справа сразу видно, как меняется высота, шрифт и отступы.

<DatePicker size="m" label="Дата" />

Тот же проп есть и у DateRangePicker:

<DateRangePicker size="s" label="Период" />

Что меняется

Размер — это набор CSS-токенов, которые подменяются модификатором-классом .daterly--s / .daterly--l (для m остаются базовые значения):

В размере s плавающий лейбл не используется — он зашит над полем (помещать его внутрь 32px невозможно без визуального компромисса).

Кастомизация

Если хочется размер «между» — переопредели токены для нужного скоупа:

.compact .daterly {
  --daterly-height: 36px;
  --daterly-font-size: 15px;
  --daterly-padding-h: 10px;
}

Это работает поверх любого size и не требует форка класса-модификатора.

Попап календаря

Размер влияет и на класс попапа — .daterly__popover--s, .daterly__popover--m, .daterly__popover--l. По умолчанию визуально это одинаковые попапы; модификатор есть на случай, если ты хочешь подогнать отступ/размер дней под высоту инпута:

.daterly__popover--s {
  --rdp-day-width: 32px;
  --rdp-day-height: 32px;
}