@olddevs/ui 0.0.0-stage → 4.0.0

package/src/components/date-time/DateRangePicker.tsx

@@ -0,0 +1,349 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import type { DateValue } from "react-aria-components";
+import { cn } from "../../lib/cn.js";
+import { parseDateOrNull, toDateBound, type DateInput } from "../../lib/date.js";
+import { useMessages, useUiLocale } from "../../i18n/useMessages.js";
+import {
+  periodPresets,
+  formatPeriodLength,
+  resolvePeriod,
+  type DateRange,
+  type PeriodPreset,
+  type RelativePeriod,
+} from "../../lib/period.js";
+import { CalendarIcon, CloseIcon } from "../../icons.js";
+import { formatDate } from "./DatePicker.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../overlays/Popover.js";
+import { RangeCalendar } from "./RangeCalendar.js";
+
+export type { DateRange } from "../../lib/period.js";
+
+export interface DateRangePickerProps {
+  /** Выбранный период: пара ISO-дат `{ start, end }`; пусто или неразбираемое значение показывается как «не выбрано». */
+  value?: DateRange | null;
+  /**
+   * Относительный период (пресет), которым задано значение; подсвечивается в колонке пресетов.
+   *
+   * Выбранный относительный период, если период задан пресетом. Когда он
+   * задан, подпись триггера берётся у пресета: «30 дней» честнее пары дат,
+   * которая завтра станет другой.
+   */
+  period?: RelativePeriod | null;
+  /**
+   * Отдаёт и развёрнутые границы, и то, каким пресетом они получены
+   * (`null` — выбраны вручную в календаре). Потребитель сам решает, что
+   * из этого положить в URL; пакет за него не выбирает.
+   */
+  onChange: (range: DateRange, period: RelativePeriod | null) => void;
+  /**
+   * Пресеты периода в колонке слева от календаря; по умолчанию стандартный набор кита.
+   *
+   * Пустой список убирает колонку пресетов целиком.
+   */
+  presets?: readonly PeriodPreset[];
+  /** Зона, в которой считается «сегодня» для пресетов. */
+  timeZone?: string;
+  /**
+   * Очистка периода. Кнопка очистки появляется, только когда обработчик передан.
+   *
+   * Здесь это отдельный проп, а не `clearable` как у `Select`: там очистка
+   * выражается существующим `onChange(null)`, и хватает флага. Тут же
+   * `onChange` отдаёт пару «границы + пресет», и «ничего не выбрано» в неё
+   * не укладывается — потребителю всё равно надо стирать оба своих ключа.
+   */
+  onClear?: () => void;
+  /** Доступное имя кнопки очистки. */
+  clearLabel?: string;
+  /** Текст триггера, пока период не выбран; по умолчанию стандартная подпись кита. */
+  placeholder?: string;
+  /** Блокирует триггер и убирает кнопку очистки. */
+  disabled?: boolean;
+  /**
+   * Самая ранняя доступная дата; пресеты подрезаются по этой границе, а пресет
+   * целиком вне границ не выбирается. ISO-строка `ГГГГ-ММ-ДД`, как и `value`;
+   * объект `@internationalized/date` тоже принимается.
+   */
+  minValue?: DateInput;
+  /** Самая поздняя доступная дата; действует так же, как `minValue`. */
+  maxValue?: DateInput;
+  /**
+   * Отмечает конкретные дни недоступными (занятые даты, праздники): в календаре
+   * их нельзя выбрать. Получает объект календаря; `date.toString()` даёт ISO-день.
+   *
+   * Пресеты это правило не учитывают: они подрезаются только по `minValue` и
+   * `maxValue`.
+   */
+  isDateUnavailable?: (date: DateValue) => boolean;
+  /**
+   * Месяц, на котором открывается календарь, когда период ещё не выбран.
+   * По умолчанию текущий; фиксируется в витрине, иначе снимок менялся бы
+   * каждые сутки.
+   */
+  defaultFocusedValue?: DateInput;
+  /** Локаль подписей дат и календаря; по умолчанию локаль `UiProvider`. */
+  locale?: string;
+  /** Открыта ли панель, когда состоянием управляет потребитель; без него панель открывается сама. */
+  open?: boolean;
+  /** Вызывается при каждом открытии и закрытии панели; работает и с `open`, и без него. */
+  onOpenChange?: (open: boolean) => void;
+  /** Классы на рамку триггера. */
+  triggerClassName?: string;
+  /** Классы на всплывающую панель с пресетами и календарём. */
+  contentClassName?: string;
+}
+
+/**
+ * Диапазон дат: пресеты слева, календарь справа.
+ *
+ * Пресеты — не украшение, а основной путь. В админке период выбирают
+ * повторяющимися окнами («последние 30 дней»), и календарь нужен реже, чем
+ * кажется: до этого компонента в модалке подписчиков вместо него стояли
+ * четыре захардкоженные кнопки, а в кампаниях — наоборот, только календарь.
+ *
+ * Незавершённый выбор наружу не отдаётся: `onChange` зовётся, только когда
+ * есть обе границы. Иначе потребитель на каждый первый клик получал бы
+ * диапазон «с 5 марта по 5 марта» и успевал сходить с ним в сеть.
+ */
+export function DateRangePicker({
+  value,
+  period,
+  onChange,
+  presets,
+  timeZone,
+  onClear,
+  clearLabel,
+  placeholder,
+  disabled,
+  minValue,
+  maxValue,
+  isDateUnavailable,
+  defaultFocusedValue,
+  locale,
+  open: controlledOpen,
+  onOpenChange,
+  triggerClassName,
+  contentClassName,
+}: DateRangePickerProps) {
+  const [internalOpen, setInternalOpen] = useState(false);
+  const months = useTwoMonths();
+
+  const open = controlledOpen ?? internalOpen;
+  // Внутреннее состояние обновляется всегда — как в `Select`: иначе тот, кто
+  // передал только колбэк без `open`, получил бы панель, которая не открывается.
+  const setOpen = (next: boolean) => {
+    setInternalOpen(next);
+    onOpenChange?.(next);
+  };
+
+  /**
+   * Диапазон разбирается один раз и здесь же.
+   *
+   * `parseDate` бросает на любой мусор (`parseDate("ерунда")` — это
+   * `Invalid ISO 8601 date string`), а `value` приходит из URL, где его правят
+   * руками. Раньше разбор стоял прямо в разметке, тремя вызовами: одна кривая
+   * ссылка роняла всё поддерево.
+   *
+   * Защита долго стояла ТОЛЬКО здесь, а комментарий утверждал, что соседний
+   * `DatePicker` на том же вводе показывает плейсхолдер. Это было неверно: он
+   * разбирал значение выражением в JSX-потомке, без всякой защиты. С волны 26
+   * оба зовут `parseDateOrNull` из `lib/date.ts`, и утверждение наконец
+   * соответствует коду.
+   *
+   * Заодно исчезают `value!`: после сужения компилятор сам знает, что дальше
+   * границы есть.
+   */
+  const messages = useMessages();
+  const uiLocale = useUiLocale();
+  const effectiveLocale = locale ?? uiLocale;
+  const activePresets = presets ?? periodPresets(messages);
+  const range = parseRange(value);
+
+  /**
+   * Подрезать диапазон по объявленным границам поля.
+   *
+   * `null`, если окно с границами НЕ ПЕРЕСЕКАЕТСЯ вовсе. Первая версия двигала
+   * концы независимо и могла выдать перевёрнутый диапазон: при `minValue`
+   * первого числа текущего месяца пресет «прошлый месяц» уезжал наружу как
+   * `{start: "2026-09-01", end: "2026-08-31"}` — заведомо невозможное значение,
+   * которое потребитель писал в адрес и в запрос. Тот же файл строкой ниже
+   * объявляет перевёрнутый диапазон «не значением», так что выдавать его
+   * самим тем более нельзя.
+   */
+  const clampRange = (r: DateRange): DateRange | null => {
+    // Границы приводятся к объектам: неразбираемая строка — «не задано», а не
+    // сравнение с мусором.
+    const min = toDateBound(minValue)?.toString();
+    const max = toDateBound(maxValue)?.toString();
+    const start = min && r.start < min ? min : r.start;
+    const end = max && r.end > max ? max : r.end;
+    return start <= end ? { start, end } : null;
+  };
+  const activePreset = period ? activePresets.find((p) => p.period === period) : undefined;
+  const label = activePreset
+    ? activePreset.label
+    : range
+      ? `${formatDate(range.start.toString(), effectiveLocale)} — ${formatDate(range.end.toString(), effectiveLocale)}`
+      : (placeholder ?? messages.dateRangePicker.placeholder);
+
+  const hasValue = Boolean(range || activePreset);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      {/*
+        Устройство то же, что у триггера `Select`, и по той же причине: крестик
+        обязан быть отдельной кнопкой рядом, а не внутри — вложенная
+        интерактивность недопустима в разметке и недостижима с клавиатуры.
+        Поэтому рамку несёт обёртка, а кнопка растянута на её площадь
+        псевдоэлементом.
+      */}
+      <span
+        className={cn(
+          // `leading-5` — тот же объявленный строчный бокс, что у `TextControl`
+          // и триггера `Select` (см. `lib/field.ts`): триггер стоит в форме
+          // рядом с ними и обязан давать те же 42px. Прежний `min-h-[38px]`
+          // убран — он был порогом снизу при выведенной высоте, а при заданной
+          // не срабатывает никогда: 20 + 2×10 отступа + 2 рамки уже 42.
+          "border-line-soft text-fg-2 hover:border-line hover:text-fg-1 rounded-control relative inline-flex w-full items-center gap-2 border px-3 py-2.5 text-[13px] leading-5 transition-colors",
+          disabled && "cursor-not-allowed opacity-50",
+          triggerClassName
+        )}
+      >
+        <PopoverTrigger asChild>
+          <button
+            type="button"
+            disabled={disabled}
+            className={cn(
+              "inline-flex min-w-0 grow cursor-pointer items-center justify-between gap-3 text-left outline-none",
+              "after:absolute after:inset-0 after:rounded-[inherit]",
+              "focus-visible:after:outline-accent-strong focus-visible:after:outline-2 focus-visible:after:outline-offset-2",
+              "disabled:cursor-not-allowed"
+            )}
+          >
+            <span className={hasValue ? "text-fg-1" : "text-fg-3"}>{label}</span>
+            <CalendarIcon size={14} className="text-fg-3 shrink-0" />
+          </button>
+        </PopoverTrigger>
+
+        {hasValue && onClear && !disabled ? (
+          <button
+            type="button"
+            aria-label={clearLabel ?? messages.common.clear}
+            onClick={onClear}
+            // `relative` поднимает крестик над растянутым псевдоэлементом кнопки,
+            // иначе клик по нему открывал бы панель вместо очистки.
+            className="bg-bg-3 text-fg-2 hover:text-fg-0 focus-visible:outline-accent-strong relative z-10 flex h-4 w-4 shrink-0 cursor-pointer items-center justify-center rounded-full transition-colors focus-visible:outline-2 focus-visible:outline-offset-2"
+          >
+            <CloseIcon size={10} aria-hidden />
+          </button>
+        ) : null}
+      </span>
+      <PopoverContent className={cn("w-auto p-0", contentClassName)} align="start">
+        <div className="flex items-stretch">
+          {activePresets.length > 0 ? (
+            <div className="border-line-soft flex flex-col gap-0.5 border-r p-2">
+              {activePresets.map((p) => (
+                <button
+                  key={p.period}
+                  type="button"
+                  onClick={() => {
+                    // Пресет ПОДРЕЗАЕТСЯ по границам: ограничения применялись
+                    // только к календарю, и «365 дней» уезжали за `minValue`
+                    // — то есть наружу шёл диапазон, который в календаре
+                    // выбрать нельзя вовсе.
+                    const clamped = clampRange(resolvePeriod(p.period, timeZone));
+                    // Пресет, целиком выпавший за границы, не выбирается: звать
+                    // `onChange` с невозможным диапазоном хуже, чем не ответить.
+                    if (!clamped) return;
+                    onChange(clamped, p.period);
+                    setOpen(false);
+                  }}
+                  className={cn(
+                    "cursor-pointer rounded-sm px-3 py-[7px] text-left text-[13px] font-medium whitespace-nowrap transition-colors",
+                    "focus-visible:outline-accent-strong focus-visible:outline-2 focus-visible:-outline-offset-2",
+                    p.period === period ? "bg-bg-3 text-fg-0" : "text-fg-1 hover:bg-bg-2"
+                  )}
+                >
+                  {p.label}
+                </button>
+              ))}
+            </div>
+          ) : null}
+
+          <div className="flex flex-col">
+            <RangeCalendar
+              value={range}
+              onChange={(next) => {
+                // Первый клик даёт диапазон «с 5 марта по 5 марта» — наружу его
+                // не отдаём: потребитель успел бы сходить с ним в сеть.
+                if (!next?.start || !next?.end) return;
+                onChange({ start: next.start.toString(), end: next.end.toString() }, null);
+                setOpen(false);
+              }}
+              minValue={minValue}
+              maxValue={maxValue}
+              isDateUnavailable={isDateUnavailable}
+              defaultFocusedValue={defaultFocusedValue}
+              locale={locale}
+              months={months}
+            />
+            {range ? (
+              <div className="border-line-soft text-fg-2 border-t px-3 py-2 text-[12px] empty:hidden">
+                {formatPeriodLength(
+                  { start: range.start.toString(), end: range.end.toString() },
+                  messages
+                )}
+              </div>
+            ) : null}
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+/**
+ * Разбирает пару ISO-строк в значение календаря; мусор превращает в «не hasValue».
+ *
+ * Обе границы обязаны быть валидны: половина диапазона фильтром не является,
+ * а показать её календарём нечем.
+ */
+function parseRange(value: DateRange | null | undefined) {
+  const start = parseDateOrNull(value?.start);
+  const end = parseDateOrNull(value?.end);
+  if (!start || !end) return null;
+  /*
+    ПЕРЕВЁРНУТЫЙ диапазон — тоже неразбираемый.
+
+    Календарём его не выбрать, но собрать руками в адресе можно:
+    `?from=2026-03-10&to=2026-03-01`. Обе даты разбирались, `hasValue` было
+    истинно, триггер показывал «10 мар 2026 — 01 мар 2026», календарь не
+    подсвечивал ничего (react-aria проверяет диапазон как `>= start && <= end`),
+    а подпись снизу через `periodLength` с её `Math.max(1, …)` уверенно
+    сообщала «1 день». Отбраковываем там же, где мусор.
+  */
+  if (start.compare(end) > 0) return null;
+  return { start, end };
+}
+
+/**
+ * Два месяца рядом — только когда для них есть место.
+ *
+ * Начинаем всегда с одного: на сервере `matchMedia` нет вовсе, и попытка
+ * угадать ширину до монтирования даёт расхождение разметки. Второй месяц
+ * появляется после первого рендера, когда ширину уже можно спросить.
+ */
+function useTwoMonths(): 1 | 2 {
+  const [two, setTwo] = useState(false);
+
+  useEffect(() => {
+    const mq = window.matchMedia("(min-width: 640px)");
+    setTwo(mq.matches);
+    const onChange = (e: MediaQueryListEvent) => setTwo(e.matches);
+    mq.addEventListener("change", onChange);
+    return () => mq.removeEventListener("change", onChange);
+  }, []);
+
+  return two ? 2 : 1;
+}

package/src/components/date-time/DateTimePicker.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import type { DateInput } from "../../lib/date.js";
+import { DatePicker } from "./DatePicker.js";
+import { TimePicker } from "./TimePicker.js";
+
+// Функции жили в этом файле; re-export — чтобы не ломать публичный API.
+export { maskTime, normalizeTime } from "../../lib/time.js";
+
+export interface DateTimePickerProps {
+  /** Дата в ISO-формате `ГГГГ-ММ-ДД`. */
+  date?: string | null;
+  /** Время в формате `ЧЧ:ММ`. */
+  time?: string | null;
+  /** Вызывается с ISO-датой `ГГГГ-ММ-ДД`, когда в календаре выбран день. */
+  onDateChange: (date: string) => void;
+  /** Вызывается со временем `ЧЧ:ММ`, когда ввод закончен или выбран слот из списка. */
+  onTimeChange: (time: string) => void;
+  /** Блокирует оба поля — дату и время. */
+  disabled?: boolean;
+  /**
+   * Границы календарные, то есть дневные, и ко времени не относятся.
+   *
+   * Ячейки календаря — `CalendarDate` без времени, и сравнение идёт по дню:
+   * `parseDate("2026-09-11").compare(parseDateTime("2026-09-11T14:00"))` — это
+   * ноль. Поэтому `minValue={…T14:00}` в смысле «не раньше чем через час» НЕ
+   * РАБОТАЕТ: тот же день с девятью утра пройдёт.
+   *
+   * Границ времени компонент не принимает намеренно. «Не раньше чем через час»
+   * — это правило бизнес-логики, а не свойство поля: оно зависит от часового
+   * пояса, который кит не знает принципиально (см. `timeZoneLabel`), и от
+   * момента отправки, а не отрисовки. Проверять его должен потребитель, там же,
+   * где он проверяет остальную форму.
+   *
+   * Значение — ISO-строка `ГГГГ-ММ-ДД`, как `date`; объект `@internationalized/date`
+   * тоже принимается.
+   */
+  minValue?: DateInput;
+  /** Самый поздний доступный день; граница календарная, как и `minValue`, ко времени не относится. */
+  maxValue?: DateInput;
+  /**
+   * Подпись зоны справа от времени: `MSK`, `UTC`.
+   *
+   * Проп, а не строка в разметке. До переезда в пакет здесь стоял хардкод
+   * `(MSK)` — надпись, никак не связанная с зоной, по которой сервер на самом
+   * деле публикует. Пакет зоны не знает и знать не должен: он показывает то,
+   * что ему передали, и по умолчанию — ничего.
+   */
+  timeZoneLabel?: string;
+  /** Часы поля времени: `24` (умолчание) или `12`, как у `TimePicker`. */
+  hourCycle?: 12 | 24;
+  /** Локаль подписи даты и календаря; по умолчанию локаль `UiProvider`. На поле времени не влияет. */
+  locale?: string;
+}
+
+/**
+ * Дата и время одной строкой.
+ *
+ * Время — `TimePicker`: то же поле с маской, что жило здесь раньше (ввод
+ * нормализуется по уходу фокуса, а не на каждое нажатие), плюс список слотов.
+ */
+export function DateTimePicker({
+  date,
+  time,
+  onDateChange,
+  onTimeChange,
+  disabled,
+  minValue,
+  maxValue,
+  timeZoneLabel,
+  hourCycle,
+  locale,
+}: DateTimePickerProps) {
+  return (
+    <div className="flex items-center gap-2">
+      <DatePicker
+        value={date}
+        onChange={onDateChange}
+        disabled={disabled}
+        minValue={minValue}
+        maxValue={maxValue}
+        locale={locale}
+      />
+
+      <span className="text-fg-4">·</span>
+
+      <TimePicker value={time} onChange={onTimeChange} hourCycle={hourCycle} disabled={disabled} />
+
+      {timeZoneLabel ? <span className="text-fg-3 text-[13px]">({timeZoneLabel})</span> : null}
+    </div>
+  );
+}

package/src/components/date-time/RangeCalendar.tsx

@@ -0,0 +1,156 @@
+"use client";
+
+import {
+  Button,
+  CalendarCell,
+  CalendarGrid,
+  CalendarGridBody,
+  CalendarGridHeader,
+  CalendarHeaderCell,
+  I18nProvider,
+  RangeCalendar as RangeCalendarRac,
+  type DateValue,
+  type RangeCalendarProps as RangeCalendarPropsRac,
+} from "react-aria-components";
+import { cn } from "../../lib/cn.js";
+import { ChevronLeftIcon, ChevronRightIcon } from "../../icons.js";
+import {
+  toDateBound,
+  toIsoDate,
+  toRangeValue,
+  type DateInput,
+  type DateRangeInput,
+} from "../../lib/date.js";
+import type { DateRange } from "../../lib/period.js";
+import { CalendarHeading, NAV_BUTTON_CLASS, WEEKDAY_CELL_CLASS, useToday } from "./Calendar.js";
+
+export interface RangeCalendarProps extends Omit<
+  RangeCalendarPropsRac<DateValue>,
+  "value" | "defaultValue" | "onChange" | "minValue" | "maxValue" | "defaultFocusedValue"
+> {
+  /**
+   * Выбранный период: `{ start, end }` объектов `@internationalized/date` или
+   * ISO-строк `ГГГГ-ММ-ДД` — вторые такие же, как `DateRange` у `DateRangePicker`.
+   * `null` — управляемое пустое значение. Если хоть одна граница не разбирается,
+   * период считается пустым: половина диапазона выбранным не бывает.
+   */
+  value?: DateRangeInput | null;
+  /** Начальный период неуправляемого календаря; те же два вида, что у `value`. */
+  defaultValue?: DateRangeInput | null;
+  /**
+   * Вызывается, когда выбраны обе границы. Первый аргумент — объект календаря,
+   * как у React Aria; второй — тот же период парой ISO-строк
+   * `ГГГГ-ММ-ДД`, как `DateRange` у `DateRangePicker`.
+   */
+  onChange?: (value: { start: DateValue; end: DateValue }, iso: DateRange) => void;
+  /** Самый ранний доступный день: объект календаря или ISO-строка `ГГГГ-ММ-ДД`. */
+  minValue?: DateInput;
+  /** Самый поздний доступный день; те же два вида, что у `minValue`. */
+  maxValue?: DateInput;
+  /** Месяц, на котором открывается неуправляемый календарь; те же два вида, что у `minValue`. */
+  defaultFocusedValue?: DateInput;
+  /** Классы на корень календаря: ширина, отступы, фон. */
+  className?: string;
+  /** Локаль подписей и первого дня недели — см. `Calendar`. */
+  locale?: string;
+  /**
+   * Сколько месяцев показать рядом: `1` или `2`; по умолчанию `1`.
+   *
+   * Сколько месяцев показать рядом. Два — рабочий вариант для диапазона:
+   * период, пересекающий границу месяца, иначе требует листать туда-обратно,
+   * теряя из виду уже выбранный конец. Один остаётся для узких экранов.
+   */
+  months?: 1 | 2;
+}
+
+/**
+ * Календарь диапазона.
+ *
+ * Концы диапазона заливаются акцентом, середина — приглушённой подложкой:
+ * иначе выбранные две недели читаются как двадцать одинаковых кнопок,
+ * и по картинке не видно, где начало.
+ */
+export function RangeCalendar({
+  className,
+  locale,
+  months = 1,
+  value,
+  defaultValue,
+  onChange,
+  minValue,
+  maxValue,
+  defaultFocusedValue,
+  ...props
+}: RangeCalendarProps) {
+  const now = useToday();
+
+  // Ячейка одна на оба месяца — иначе второй месяц пришлось бы описывать
+  // копией из семнадцати классов, и они разъехались бы с первой же правкой.
+  const cell = (offset?: { months: number }) => (
+    <CalendarGrid offset={offset} className="w-fit">
+      <CalendarGridHeader>
+        {(day) => <CalendarHeaderCell className={WEEKDAY_CELL_CLASS}>{day}</CalendarHeaderCell>}
+      </CalendarGridHeader>
+      <CalendarGridBody className="[&_td]:px-0">
+        {(date) => (
+          <CalendarCell
+            date={date}
+            className={cn(
+              "text-fg-1 relative flex size-9 cursor-pointer items-center justify-center rounded-none border border-transparent p-0 text-[13px] font-normal outline-none",
+              "duration-fast transition-colors",
+              "data-[hovered]:bg-bg-3 data-[hovered]:text-fg-0",
+              "data-[selected]:bg-accent-soft data-[selected]:text-fg-0",
+              "data-[selection-start]:bg-accent data-[selection-start]:text-text-on-accent",
+              "data-[selection-end]:bg-accent data-[selection-end]:text-text-on-accent",
+              "data-[selection-start]:rounded-l-lg data-[selection-start]:rounded-r-none",
+              "data-[selection-end]:rounded-l-none data-[selection-end]:rounded-r-lg",
+              "data-[selection-start]:data-[selection-end]:rounded-lg",
+              "data-[disabled]:pointer-events-none data-[disabled]:opacity-30",
+              "data-[unavailable]:pointer-events-none data-[unavailable]:line-through data-[unavailable]:opacity-30",
+              "data-[focus-visible]:outline-accent-strong data-[focus-visible]:z-10 data-[focus-visible]:outline data-[focus-visible]:outline-2",
+              now !== null &&
+                date.compare(now) === 0 &&
+                "after:bg-accent data-[selection-end]:after:bg-text-on-accent data-[selection-start]:after:bg-text-on-accent after:absolute after:bottom-1 after:left-1/2 after:size-[3px] after:-translate-x-1/2 after:rounded-full"
+            )}
+          />
+        )}
+      </CalendarGridBody>
+    </CalendarGrid>
+  );
+
+  const calendar = (
+    <RangeCalendarRac
+      {...props}
+      value={toRangeValue(value)}
+      defaultValue={toRangeValue(defaultValue)}
+      onChange={
+        onChange &&
+        ((next) => onChange(next, { start: toIsoDate(next.start), end: toIsoDate(next.end) }))
+      }
+      minValue={toDateBound(minValue)}
+      maxValue={toDateBound(maxValue)}
+      defaultFocusedValue={toDateBound(defaultFocusedValue)}
+      visibleDuration={{ months }}
+      className={cn("w-fit p-3 select-none", className)}
+    >
+      <header className="mb-1 flex items-center gap-1">
+        <Button slot="previous" className={NAV_BUTTON_CLASS}>
+          <ChevronLeftIcon size={15} />
+        </Button>
+        <CalendarHeading />
+        <Button slot="next" className={NAV_BUTTON_CLASS}>
+          <ChevronRightIcon size={15} />
+        </Button>
+      </header>
+
+      <div className="flex gap-4">
+        {cell()}
+        {months === 2 ? cell({ months: 1 }) : null}
+      </div>
+    </RangeCalendarRac>
+  );
+
+  // Тот же приём, что в `Calendar`: провайдер разворачивается только под явный
+  // проп, иначе локаль приходит сверху.
+  return locale ? <I18nProvider locale={locale}>{calendar}</I18nProvider> : calendar;
+}