@kenlo/sds-design-system 0.9.9

package/components/DatePicker/DatePicker.css

@@ -0,0 +1,429 @@
+/* SDS DatePicker.
+   Ported from kdls-design-system v2.5.1 (0f3edf8) components/DatePicker/DatePicker.css
+   by scripts/port-css.mjs. Divergences beyond the mechanical rename are noted inline.
+
+   Rules removed with the brand families they targeted:
+     [data-color-scheme="lya"] .sds-datepicker__day--selected
+     [data-color-scheme="lya"] .sds-datepicker__year-item--selected
+     [data-color-scheme="lya"] .sds-datepicker__day--today
+ */
+
+/* The dark theme's range highlight was rgba(41, 142, 230, 0.15) in three places — Kenlo
+   blue at 15%, written into a component that carries no brand, and the reason the override
+   exists at all is that --color-primary-10 is too pale on a dark background.
+
+   It is now the scheme's own colour at the same 15%, which is what the literal was for
+   whichever scheme is installed. It reads the -solid companion rather than the slot
+   itself: the slot can hold a gradient, and color-mix cannot take one. *//* =========================================================
+   SDS Datepicker
+   Figma: node 2932:8901 / 1945:24854
+   ========================================================= */
+
+/* ── Root wrapper (trigger + floating panel) ── */
+.sds-datepicker-root {
+  display: inline-block;
+}
+.sds-datepicker-root .sds-input-phone-wrap--hug {
+  min-width: 200px;
+}
+.sds-datepicker-root .sds-input__native {
+  field-sizing: content;
+  caret-color: transparent;
+}
+/* Pointer cursor on the trigger input (it's not an editable field) */
+.sds-datepicker-root .sds-input,
+.sds-datepicker-root .sds-input__native {
+  cursor: pointer;
+}
+/* Wait cursor when isLoading */
+.sds-datepicker-root--loading,
+.sds-datepicker-root--loading .sds-input,
+.sds-datepicker-root--loading .sds-input__native {
+  cursor: wait;
+}
+/* disabled overrides the trigger input's cursor:pointer (higher specificity) */
+.sds-datepicker-root .sds-input.sds-input--disabled,
+.sds-datepicker-root .sds-input--disabled .sds-input__native {
+  cursor: not-allowed;
+}
+/* ── Chevron rotation when open ── */
+.sds-datepicker-root .sds-input__icon--right:not(.sds-input__icon--right--clickable),
+.sds-datepicker-root .sds-pill__icon-right:not(.sds-pill__icon-right--clickable) {
+  transition: transform 200ms ease;
+}
+.sds-datepicker-root--open .sds-input__icon--right:not(.sds-input__icon--right--clickable),
+.sds-datepicker-root--open .sds-pill__icon-right:not(.sds-pill__icon-right--clickable) {
+  transform: rotate(180deg);
+}
+.sds-datepicker-root--fill {
+  width: 100%;
+}
+.sds-datepicker-root--fill .sds-floating,
+.sds-datepicker-root--fill .sds-input-wrapper {
+  width: 100%;
+}
+/* ── Calendar panel ── */
+.sds-datepicker {
+  width: 296px;
+  background: var(--component-bg-color);
+  border: 1px solid var(--border-static-color);
+  border-radius: var(--radius-md); /* corner-radius-medium = 12px default */
+  box-shadow: var(--shadow-drop-md);
+  overflow: hidden;
+  font-family: var(--font-family-base);
+  user-select: none;
+}
+/* ── Header (nav row) ── */
+.sds-datepicker__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-2) var(--spacing-1) var(--spacing-2) var(--spacing-4);
+  border-bottom: 1px solid var(--color-neutral-10);
+}
+.sds-datepicker__nav {
+  display: flex;
+  gap: 0;
+}
+/* ── The calendar is a table, and stays one ──────────────────────────────────
+   `display: flex` on the <table>, the <tr>s and the <th>s took the table apart: a flex
+   container is not a table box, so the browser drops the row and cell roles with it, and
+   a screen reader reads the whole weekday row as one run — "DSTQQSS" followed by every
+   long name in sequence — instead of seven column headers. The port exists to give this
+   grid real headers; laying it out with flex threw that away again.
+
+   `table-layout: fixed` is what the flex was for: it gives the seven columns equal width
+   without anything having to claim `flex: 1`. */
+.sds-datepicker__grid {
+  width: 100%;
+  table-layout: fixed;
+  border-collapse: collapse;
+  padding: var(--spacing-2);
+}
+.sds-datepicker__weekdays {
+  background: var(--color-neutral-10);
+}
+/* A <tr>. It needs no layout of its own now that the table lays itself out — the rule is
+   here because the class is written, and a class with no rule behind it is a class nobody
+   can tell is dead. */
+.sds-datepicker__week-row {
+  height: 40px;
+}
+.sds-datepicker__weekdays th {
+  height: 40px;
+  padding: 0;
+  font-size: var(--font-size-body-md);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-neutral-50);
+  text-align: center;
+  vertical-align: middle;
+}
+.sds-datepicker__day {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  vertical-align: middle;
+  border: none;
+  background: transparent;
+  /* soft, the install default — the four schemes are set below, and this cell needs its
+     own numbers rather than the ladder. See the note there. */
+  border-radius: 11px;
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-body-md);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: -0.4px;
+  color: var(--color-neutral-90);
+  cursor: pointer;
+  transition: background-color 120ms ease;
+  flex-shrink: 0;
+  outline: none;
+}
+.sds-datepicker__day:hover:not(.sds-datepicker__day--disabled) {
+  background: var(--color-opacity-05);
+}
+.sds-datepicker__day:focus-visible {
+  box-shadow: var(--focus-ring);
+}
+.sds-datepicker__day--other {
+  color: var(--color-neutral-40);
+}
+.sds-datepicker__day--today {
+  border: 1px solid var(--color-primary-50-solid);
+  color: var(--color-primary-50-solid);
+  font-weight: var(--font-weight-semibold);
+}
+.sds-datepicker__day--selected {
+  background: var(--color-primary-50) !important;
+  color: var(--color-on-primary) !important;
+  font-weight: var(--font-weight-medium);
+  border: none;
+}
+/* ── Footer ── */
+.sds-datepicker__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-4);
+  border-top: 1px solid var(--color-neutral-10);
+}
+/* ── Year picker grid ── */
+.sds-datepicker__year-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  row-gap: 1rem;
+  padding: var(--spacing-2);
+}
+.sds-datepicker__year-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 40px;
+  border: none;
+  background: transparent;
+  border-radius: 11px;  /* soft, the install default — schemes at the end of the file */
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-body-md);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: -0.4px;
+  color: var(--color-neutral-90);
+  cursor: pointer;
+  transition: background-color 120ms ease;
+  outline: none;
+}
+.sds-datepicker__year-item:hover {
+  background: var(--color-opacity-05);
+}
+.sds-datepicker__year-item:focus-visible {
+  box-shadow: var(--focus-ring);
+}
+.sds-datepicker__year-item--today {
+  border: 1px solid var(--color-primary-50-solid);
+  color: var(--color-primary-50-solid);
+  font-weight: var(--font-weight-semibold);
+}
+.sds-datepicker__year-item--selected {
+  background: var(--color-primary-50) !important;
+  color: var(--color-on-primary) !important;
+  font-weight: var(--font-weight-bold);
+}
+/* ── Range selection ── */
+/* A <td>, sized by the fixed table layout rather than by a flex basis. */
+.sds-datepicker__day-wrap {
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  text-align: center;
+}
+.sds-datepicker__day-wrap--in-range {
+  background: var(--color-primary-10);
+}
+.sds-datepicker__day-wrap--range-start {
+  background: linear-gradient(to right, transparent 50%, var(--color-primary-10) 50%);
+}
+.sds-datepicker__day-wrap--range-end {
+  background: linear-gradient(to left, transparent 50%, var(--color-primary-10) 50%);
+}
+/* ── Month picker grid (navigation) ── */
+.sds-datepicker__month-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  row-gap: 1rem;
+  padding: var(--spacing-2);
+}
+.sds-datepicker__month-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 40px;
+  border: none;
+  background: transparent;
+  border-radius: 11px;  /* soft, the install default — schemes at the end of the file */
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-body-md);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: -0.4px;
+  color: var(--color-neutral-90);
+  cursor: pointer;
+  transition: background-color 120ms ease;
+  outline: none;
+}
+.sds-datepicker__month-item:hover {
+  background: var(--color-opacity-05);
+}
+.sds-datepicker__month-item:focus-visible {
+  box-shadow: var(--focus-ring);
+}
+.sds-datepicker__month-item--today {
+  border: 1px solid var(--color-primary-50-solid);
+  color: var(--color-primary-50-solid);
+  font-weight: var(--font-weight-semibold);
+}
+.sds-datepicker__month-item--selected {
+  background: var(--color-primary-50) !important;
+  color: var(--color-on-primary) !important;
+  font-weight: var(--font-weight-medium);
+}
+/* ── Disabled (whole calendar) — cursor on the wrapper; the trigger (Input/Pill) already blocks on its own ── */
+.sds-datepicker--disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+/* ── Disabled day cells ── */
+.sds-datepicker__day--disabled {
+  color: var(--color-neutral-40);
+  cursor: not-allowed;
+}
+/* ── Dark mode ── */
+[data-theme="dark"] .sds-datepicker {
+  border-color: var(--border-interactive-color);
+  box-shadow: var(--shadow-drop-lg);
+}
+[data-theme="dark"] .sds-datepicker__header {
+  border-bottom-color: var(--border-static-color);
+}
+[data-theme="dark"] .sds-datepicker__day--other {
+  color: var(--color-neutral-50);
+}
+[data-theme="dark"] .sds-datepicker__footer {
+  border-top-color: var(--border-static-color);
+}
+[data-theme="dark"] .sds-datepicker__day-wrap--in-range {
+  background: color-mix(in srgb, var(--color-primary-50-solid) 15%, transparent);
+}
+[data-theme="dark"] .sds-datepicker__day-wrap--range-start {
+  background: linear-gradient(to right, transparent 50%, color-mix(in srgb, var(--color-primary-50-solid) 15%, transparent) 50%);
+}
+[data-theme="dark"] .sds-datepicker__day-wrap--range-end {
+  background: linear-gradient(to left, transparent 50%, color-mix(in srgb, var(--color-primary-50-solid) 15%, transparent) 50%);
+}
+/* ── Only-time: same width and height as the time panel in hasTime ── */
+.sds-datepicker--only-time {
+  width: 90px;
+  height: 370px; /* header 56 + border 1 + weekdays 40 + grid 5sem 216 + border 1 + footer 56 */
+  display: flex;
+  flex-direction: column;
+}
+.sds-datepicker--only-time .sds-datepicker__time-panel {
+  position: static;
+  width: 100%;
+  border-left: none;
+  flex: 1;
+  min-height: 0;
+}
+.sds-datepicker--only-time .sds-datepicker__footer {
+  justify-content: center;
+}
+/* ── Has-time: extra width on the right via absolute positioning ── */
+.sds-datepicker--has-time {
+  position: relative;
+  width: 386px;
+}
+.sds-datepicker__calendar-col {
+  width: 296px;
+}
+.sds-datepicker__time-panel {
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 90px;
+  border-left: 1px solid var(--border-static-color);
+  background: var(--component-bg-color);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: var(--spacing-0-5) 0;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+/* ── Time list ── */
+.sds-datepicker__time-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  flex: 1;
+  overflow-y: auto;
+}
+/* ── Time slot button ── */
+.sds-datepicker__time-slot {
+  text-align: left;
+  padding: var(--spacing-1) var(--spacing-2);
+  margin: 0 var(--spacing-2);
+  border-radius: var(--radius-sm);
+  border: none;
+  background: transparent;
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-body-md);
+  color: var(--body-color);
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background-color 120ms ease;
+}
+.sds-datepicker__time-slot:hover:not(.sds-datepicker__time-slot--disabled) {
+  background: var(--color-opacity-05);
+}
+.sds-datepicker__time-slot--selected {
+  background: var(--color-opacity-05);
+  color: var(--color-neutral-90);
+  font-weight: var(--font-weight-bold);
+}
+.sds-datepicker__time-slot--disabled {
+  color: var(--color-neutral-40);
+  cursor: not-allowed;
+}
+
+/* The grid is a <table> rather than nested divs — see the component header. These take the
+   table's own spacing off so the cells sit exactly where the divs did. */
+.sds-datepicker__grid {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+.sds-datepicker__grid th {
+  font-weight: inherit;
+  padding: 0;
+}
+
+.sds-datepicker__grid td {
+  padding: 0;
+}
+
+/* A wrapper for the invisible weekday name, which must not take part in the layout. */
+.sds-datepicker__weekdays th > span[aria-hidden] {
+  display: block;
+}
+
+/* ── Corner radius schemes ────────────────────────────────────────────────────
+   The same numbers as the Pill, because it is the same control: 40px tall. Rafael, after
+   watching me invent a third set: the dropdown's items are 40px like a pill, so the radius
+   can be the pill's for each scheme.
+
+       height 40px    flat 0    soft 11px    medium 15px    rounded 20px (a circle)
+       as a fraction  0         0.275        0.375          0.5
+
+   Two earlier tries are worth naming, because each was right about one half. `--radius-lg`
+   fixed `flat` and left `soft`, `medium` and `rounded` as three identical circles — every
+   value past half of 40px is clamped to 20. `--radius-sm` gave four distinct values and
+   stopped at 16px, so `rounded` was a rounded square; Rafael: no `rounded` the day has to
+   be really round.
+
+   The bare values above are `soft`'s, because an install that never picks a scheme has no
+   attribute at all and falls through to them. See Pill.css for the long version. */
+[data-radius="flat"] .sds-datepicker__day { border-radius: 0; }
+[data-radius="flat"] .sds-datepicker__month-item { border-radius: 0; }
+[data-radius="flat"] .sds-datepicker__year-item { border-radius: 0; }
+
+[data-radius="soft"] .sds-datepicker__day { border-radius: 11px; }
+[data-radius="soft"] .sds-datepicker__month-item { border-radius: 11px; }
+[data-radius="soft"] .sds-datepicker__year-item { border-radius: 11px; }
+
+[data-radius="medium"] .sds-datepicker__day { border-radius: 15px; }
+[data-radius="medium"] .sds-datepicker__month-item { border-radius: 15px; }
+[data-radius="medium"] .sds-datepicker__year-item { border-radius: 15px; }
+
+[data-radius="rounded"] .sds-datepicker__day { border-radius: var(--radius-full); }
+[data-radius="rounded"] .sds-datepicker__month-item { border-radius: var(--radius-full); }
+[data-radius="rounded"] .sds-datepicker__year-item { border-radius: var(--radius-full); }

package/components/DatePicker/date-logic.js

@@ -0,0 +1,225 @@
+/**
+ * Everything the DatePicker knows about dates, with no DOM in sight.
+ *
+ * Ported from kdls-design-system v2.5.1 (0f3edf8) components/DatePicker/DatePicker.tsx and
+ * dateUtils.ts, where it is spread across the render body of a 575-line component. Dates
+ * are where off-by-ones live — a month grid that starts on the wrong weekday, a range whose
+ * ends are the wrong way round, a "last 30 days" that is 29 or 31 — and none of it needs a
+ * browser to test.
+ */
+
+export const MONTHS = [
+  'Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho',
+  'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro',
+];
+
+export const MONTHS_SHORT = [
+  'Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez',
+];
+
+/** Sunday first, as the grid is laid out. Two S's and two Q's is Portuguese, not a typo. */
+export const WEEKDAYS = ['D', 'S', 'T', 'Q', 'Q', 'S', 'S'];
+
+/** The full names, for the header a screen reader reads. KDLS has only the initials. */
+export const WEEKDAY_NAMES = [
+  'domingo', 'segunda-feira', 'terça-feira', 'quarta-feira',
+  'quinta-feira', 'sexta-feira', 'sábado',
+];
+
+export const pad2 = (n) => String(n).padStart(2, '0');
+
+export const formatDate = (d) => `${pad2(d.getDate())} ${MONTHS_SHORT[d.getMonth()]} ${d.getFullYear()}`;
+export const formatTime = (d) => `${pad2(d.getHours())}:${pad2(d.getMinutes())}`;
+
+/** The same day, whatever the time on it. */
+export const isSameDay = (a, b) => Boolean(a) && Boolean(b)
+  && a.getFullYear() === b.getFullYear()
+  && a.getMonth() === b.getMonth()
+  && a.getDate() === b.getDate();
+
+/** Midnight on the day of `date`, which is what comparing days means. */
+export const startOfDay = (date) => new Date(date.getFullYear(), date.getMonth(), date.getDate());
+
+/**
+ * What the trigger says.
+ *
+ * The range cases are KDLS's and they are the reason this is worth testing: a whole month
+ * reads as "Março 2026", two days in one month as "01 — 15 Mar 2026", and only a range that
+ * crosses a year spells both sides out.
+ */
+export function triggerLabel({ isRange, value, hasTime, onlyTime }) {
+  if (isRange) {
+    const start = value?.start ?? null;
+    const end = value?.end ?? null;
+    if (!start) return '';
+    if (!end) return `${formatDate(start)} — ...`;
+
+    const sameYear = start.getFullYear() === end.getFullYear();
+    const sameMonth = sameYear && start.getMonth() === end.getMonth();
+
+    if (sameMonth) {
+      const lastDay = new Date(start.getFullYear(), start.getMonth() + 1, 0).getDate();
+      if (start.getDate() === 1 && end.getDate() === lastDay) {
+        return `${MONTHS[start.getMonth()]} ${start.getFullYear()}`;
+      }
+      return `${pad2(start.getDate())} — ${pad2(end.getDate())} ${MONTHS_SHORT[start.getMonth()]} ${start.getFullYear()}`;
+    }
+    if (sameYear) {
+      return `${pad2(start.getDate())} ${MONTHS_SHORT[start.getMonth()]} — ${pad2(end.getDate())} ${MONTHS_SHORT[end.getMonth()]} ${end.getFullYear()}`;
+    }
+    return `${formatDate(start)} — ${formatDate(end)}`;
+  }
+
+  if (!value) return '';
+  if (onlyTime) return formatTime(value);
+  if (hasTime) return `${formatDate(value)} — ${formatTime(value)}`;
+  return formatDate(value);
+}
+
+/** The bounds once disablePast and disableFuture have had their say. */
+export function effectiveBounds({ minDate, maxDate, disablePast, disableFuture, today = new Date() }) {
+  const midnight = startOfDay(today);
+  const min = minDate && disablePast
+    ? (minDate.getTime() > midnight.getTime() ? minDate : midnight)
+    : minDate ?? (disablePast ? midnight : undefined);
+  const max = maxDate && disableFuture
+    ? (maxDate.getTime() < midnight.getTime() ? maxDate : midnight)
+    : maxDate ?? (disableFuture ? midnight : undefined);
+  return { min, max };
+}
+
+export function isDisabledDate(date, options = {}) {
+  const {
+    min, max, filterDate, disableToday, excludeDates, includeDates, today = new Date(),
+  } = options;
+
+  const day = startOfDay(date).getTime();
+  if (min && day < startOfDay(min).getTime()) return true;
+  if (max && day > startOfDay(max).getTime()) return true;
+  if (filterDate && !filterDate(date)) return true;
+  if (disableToday && isSameDay(date, today)) return true;
+  if (excludeDates?.some((d) => isSameDay(d, date))) return true;
+  if (includeDates?.length && !includeDates.some((d) => isSameDay(d, date))) return true;
+  return false;
+}
+
+/**
+ * The six-or-so weeks a month is drawn in, with the days either side that fill the corners.
+ *
+ * `current` says whether a cell belongs to the month being shown — the greyed-out ones at
+ * each end are still real dates and still selectable, which is KDLS's behaviour.
+ */
+export function monthGrid(year, month) {
+  const firstWeekday = new Date(year, month, 1).getDay();
+  const daysInMonth = new Date(year, month + 1, 0).getDate();
+  const daysInPrevious = new Date(year, month, 0).getDate();
+
+  const cells = [];
+  for (let i = firstWeekday - 1; i >= 0; i--) {
+    cells.push({ date: new Date(year, month - 1, daysInPrevious - i), current: false });
+  }
+  for (let day = 1; day <= daysInMonth; day++) {
+    cells.push({ date: new Date(year, month, day), current: true });
+  }
+  while (cells.length % 7 !== 0) {
+    cells.push({
+      date: new Date(year, month + 1, cells.length - daysInMonth - firstWeekday + 1),
+      current: false,
+    });
+  }
+
+  const weeks = [];
+  for (let i = 0; i < cells.length; i += 7) weeks.push(cells.slice(i, i + 7));
+  return weeks;
+}
+
+/** The sixteen years the year picker shows, aligned so the pages never shift. */
+export function yearGrid(year) {
+  const base = Math.floor(year / 16) * 16;
+  return Array.from({ length: 16 }, (_, i) => base + i);
+}
+
+export const DEFAULT_TIME_INTERVAL = 60;
+
+/** Every time slot in a day, at the given spacing. */
+export function timeSlots(step = DEFAULT_TIME_INTERVAL, today = new Date()) {
+  const slots = [];
+  const y = today.getFullYear();
+  const m = today.getMonth();
+  const d = today.getDate();
+  for (let hour = 0; hour < 24; hour++) {
+    for (let minute = 0; minute < 60; minute += step) {
+      slots.push(new Date(y, m, d, hour, minute));
+    }
+  }
+  return slots;
+}
+
+export function isDisabledTime(slot, options = {}) {
+  const {
+    min, max, onlyTime, hasTime, reference, filterTime, includeTimes, excludeTimes,
+  } = options;
+
+  const slotMinutes = slot.getHours() * 60 + slot.getMinutes();
+
+  if (min) {
+    const minMinutes = min.getHours() * 60 + min.getMinutes();
+    const minCarriesTime = min.getHours() !== 0 || min.getMinutes() !== 0;
+    if (onlyTime) {
+      if (slotMinutes < minMinutes) return true;
+    } else if (hasTime && minCarriesTime && reference && isSameDay(reference, min)) {
+      if (slotMinutes < minMinutes) return true;
+    }
+  }
+
+  if (max) {
+    const maxMinutes = max.getHours() * 60 + max.getMinutes();
+    const maxCarriesTime = max.getHours() !== 23 || max.getMinutes() !== 59;
+    if (onlyTime) {
+      if (slotMinutes > maxMinutes) return true;
+    } else if (hasTime && maxCarriesTime && reference && isSameDay(reference, max)) {
+      if (slotMinutes > maxMinutes) return true;
+    }
+  }
+
+  const sameClock = (t) => t.getHours() === slot.getHours() && t.getMinutes() === slot.getMinutes();
+  if (filterTime && !filterTime(slot)) return true;
+  if (includeTimes?.length && !includeTimes.some(sameClock)) return true;
+  if (excludeTimes?.some(sameClock)) return true;
+  return false;
+}
+
+/** Strictly between the two ends, whichever way round they were given. */
+export function isBetween(date, start, end) {
+  if (!start || !end) return false;
+  const t = date.getTime();
+  const lo = Math.min(start.getTime(), end.getTime());
+  const hi = Math.max(start.getTime(), end.getTime());
+  return t > lo && t < hi;
+}
+
+/** The two ends of a range, in order. */
+export function orderRange(a, b) {
+  return a.getTime() < b.getTime() ? { start: a, end: b } : { start: b, end: a };
+}
+
+/**
+ * A minDate for "the last n days".
+ *
+ * includeToday counts today as one of the n. Carried from KDLS's dateUtils, where the
+ * doc comment is the only thing that makes the off-by-one legible.
+ */
+export function lastDays(n, includeToday = true, today = new Date()) {
+  const d = new Date(today);
+  d.setHours(0, 0, 0, 0);
+  d.setDate(d.getDate() - (includeToday ? n - 1 : n));
+  return d;
+}
+
+/** A maxDate for "the next n days". */
+export function nextDays(n, includeToday = true, today = new Date()) {
+  const d = new Date(today);
+  d.setHours(0, 0, 0, 0);
+  d.setDate(d.getDate() + (includeToday ? n - 1 : n));
+  return d;
+}