@eifi1/ui-kit 0.53.0 → 0.55.0

package/src/components/input.tsx

@@ -1,394 +0,0 @@
-import { useId, useState } from "react";
-import { Eye, EyeOff } from "lucide-react";
-import type { ChangeEvent, InputHTMLAttributes, KeyboardEvent, MouseEvent, ReactNode, Ref } from "react";
-import { cn } from "../lib/cn";
-import { FOCUS_RING } from "./focus-ring";
-import { usePhoneLayout } from "../hooks/use-breakpoint";
-import { useKitLabels } from "../i18n/kit-labels";
-import type { CommitScope } from "./write-lock";
-import {
-  EndHintRow,
-  FieldCaption,
-  LockedReason,
-  mergeDescribedBy,
-  type DisabledReasonDisplay,
-  type FieldHelpProps,
-  useFieldError,
-  useFieldHint,
-  useLockReason,
-} from "./field-parts";
-import { DEFAULT_PASSWORD_REVEAL_LABELS } from "./field-base-labels";
-import {
-  CharacterCount,
-  FIELD_BASE,
-  FIELD_DISPLAY,
-  FIELD_INVALID,
-  FieldGroup,
-  FloatingField,
-  FLOATING_INPUT_CLASS,
-  FLOATING_PLACEHOLDER_ON_FOCUS,
-  fieldBelow,
-  hasPlaceholderText,
-  useCharacterCountLabels,
-  useTypedLength,
-  type CharacterCountLabels,
-  type PasswordRevealLabels,
-} from "./field-base";
-
-// Native date/time inputs only reveal the calendar via the tiny trailing icon;
-// open the picker on a click anywhere in the field instead (feedback #224).
-const PICKER_TYPES = new Set(["date", "datetime-local", "month", "time", "week"]);
-
-export interface InputProps extends InputHTMLAttributes<HTMLInputElement>, FieldHelpProps {
-  label?: ReactNode;
-  /** Classes for the `<input>` itself, as distinct from `className`, which
-   *  styles the field WRAPPER once a `label` turns this into a FloatingField.
-   *  Without it a labelled Input had no way to reach its own element — so
-   *  `tabular-nums` on a numeric text field, which NumberInput has supported
-   *  all along through the identically named prop, was simply unavailable. */
-  inputClassName?: string;
-  /** {@link FIELD_DISPLAY} — on a phone, drop the chrome and set the value as a
-   *  heading. For the one field a form is about (a feedback subject, an account
-   *  name), never for a stack of them. Labelled fields only: the label is what
-   *  the placeholder falls back to once it goes `sr-only`. */
-  variant?: "field" | "display";
-  /** The field is required and unanswered, or holds something that cannot be
-   *  saved — {@link FIELD_INVALID}, the same rose border/ring `Select` has worn
-   *  since feedback #235.
-   *
-   *  It exists here because writing `aria-invalid` by hand did NOT do this. The
-   *  attribute spreads onto the element and nothing styles it — there is no
-   *  `[aria-invalid]` rule in this package or in either consumer's stylesheet —
-   *  so three Keksdose dialogs flagged a mismatched passphrase to a screen reader
-   *  and painted the field exactly as if it were fine. Setting the prop sets the
-   *  attribute too, so the two can no longer be spelled separately. */
-  invalid?: boolean;
-  /** What is wrong with the value, in the caller's own words ("That IBAN has 21
-   *  digits"). Rendered under the field, pointed at by the control's
-   *  `aria-describedby` — MERGED with any the caller already passed — and implies
-   *  `invalid`, so the field paints as well as announces. `invalid` alone still
-   *  covers the case where the message lives elsewhere. See {@link useFieldError}. */
-  error?: ReactNode;
-  /**
-   * Standing advice for the field (keksdose K4: Input had `error` but no `hint`, so the
-   * app built the caption by hand under each field, and half of those never reached a
-   * screen reader). The {@link Select} rule, so every field reads alike:
-   *  - plain TEXT (a string or a number) is a caption UNDER the field, attached with
-   *    `aria-describedby` — after the caller's own ids, before the error's;
-   *  - anything else (a {@link FieldHint} "?") rides the label line beside the
-   *    animated label, as NumberInput's does — or, on a field with no label, sits at the
-   *    field's end edge outside the box, and `className` then styles that row.
-   */
-  hint?: ReactNode;
-  /**
-   * A live "12/80" under the field, with `maxLength` (keksdose K11 — the broadcast,
-   * support and handoff-note fields counted by hand). Read with the field as "12 of 80
-   * characters", and announced politely only on entering the last stretch and on
-   * reaching the limit — never on every keystroke. See {@link CharacterCount}. Ignored
-   * without a `maxLength`: a count with no limit is not what this answers. Counts
-   * UTF-16 code units, as `maxLength` itself does. Controlled, it counts `value`;
-   * uncontrolled, `defaultValue` and then every change event — a value written from
-   * outside without one (a form library's `reset`) shows from the next keystroke.
-   */
-  showCount?: boolean;
-  /** The counter's words. See {@link CharacterCountLabels}. */
-  countLabels?: Partial<CharacterCountLabels>;
-  /** Names for the password reveal toggle, English by default — it is the one
-   *  string this component renders on its own behalf, and a German form was
-   *  reading it out in English. See {@link PasswordRevealLabels}. */
-  passwordLabels?: Partial<PasswordRevealLabels>;
-  /**
-   * Why the value cannot be changed — {@link Button}'s `disabledReason`, for a text field
-   * that SAVES itself: a name committed on blur (0.34, KS U10 — Kurvenschmiede's segment
-   * and profile names, behind a local `CommitInput`). `disabled` takes the field out of
-   * the tab order, so the reason never reached a keyboard.
-   *
-   * With a reason the field stays in the tab order and shows its value, `readOnly` (the
-   * settled grey FIELD_BASE gives a `[readonly]` field) and `aria-disabled` — NumberInput's
-   * lock (0.33.1), Autocomplete's. Nothing a save listens to is reported: not `onChange`,
-   * not `onBlur` (on a field that saves itself, blur IS the save), and not Enter, which is
-   * swallowed so the field does not submit the form around it; the caller's `onKeyDown`
-   * still hears every other key. The reason is a line under the field at Large and on a
-   * touch screen, else in the kit {@link Tooltip} (`disabledReasonDisplay`), and on the
-   * input's `aria-describedby`, between the caption and the error. Wins over `disabled`.
-   */
-  disabledReason?: ReactNode;
-  /**
-   * Where the reason shows — {@link Button}'s `disabledReasonDisplay`: by default a line
-   * under the field at Large and on a touch screen, the tooltip otherwise (§4 "No fact
-   * only in a tooltip"; DUP-3, refactor audit 2026-10).
-   */
-  disabledReasonDisplay?: DisabledReasonDisplay;
-  /**
-   * This field COMMITS — {@link Button}'s `commit`: under a locked
-   * {@link WriteLockProvider} it is locked the `disabledReason` way with the lock's reason
-   * (which wins over its own). A field whose value only reaches the server through its
-   * form's Save leaves this off and stays editable under the lock — the Save takes
-   * `commit`. No provider, or an unlocked one: no effect.
-   */
-  commit?: CommitScope;
-  /** The `<input>`. A React 19 ref prop since 0.34 (MOD-4, refactor audit 2026-10): as
-   *  `forwardRef`, with a `displayName` line beside it, this module could not drop an
-   *  unused component, and `{ Spinner }` brought Input, Select and Textarea along. */
-  ref?: Ref<HTMLInputElement>;
-}
-
-/** What a locked {@link Input} swallows of a key: Enter, which would submit the form. */
-function swallowEnter(onKeyDown: ((e: KeyboardEvent<HTMLInputElement>) => void) | undefined) {
-  return (e: KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === "Enter") {
-      e.preventDefault();
-      return;
-    }
-    onKeyDown?.(e);
-  };
-}
-
-export function Input(props: InputProps) {
-  const {
-    ref,
-    className,
-    inputClassName,
-    label,
-    id,
-    placeholder,
-    type,
-    variant = "field",
-    invalid,
-    error,
-    hint,
-    help,
-    showCount,
-    countLabels,
-    passwordLabels,
-    disabledReason,
-    disabledReasonDisplay,
-    commit,
-    ...rest
-  } = props;
-  // Passed at all — even as `undefined` — the field keeps its box; see FieldGroup. The
-  // same for `hint` and `showCount` (keksdose, 0.22): a caption coming and going under
-  // the control must not rebuild it, or focus and the caret are lost mid-edit.
-  const reserve = "error" in props || "hint" in props || "showCount" in props;
-  const generated = useId();
-  const fieldId = id ?? generated;
-  const countId = useId();
-  const hintParts = useFieldHint(hint, rest["aria-describedby"], { help, name: label ?? rest["aria-label"] });
-  const maxLength = rest.maxLength;
-  const counting = Boolean(showCount) && typeof maxLength === "number" && maxLength > 0;
-  const length = useTypedLength(rest.value, rest.defaultValue);
-  const countText = useCharacterCountLabels(countLabels);
-  // The lock (0.34, KS U10): focusable, `readOnly`, nothing a save listens to is
-  // reported — see `disabledReason`.
-  const lock = useLockReason(commit, disabledReason);
-  const locked = lock.locked;
-  const { isInvalid, describedBy, errorEl } = useFieldError(
-    error,
-    invalid,
-    // Caller's, caption, count, a lock's reason — then the error, appended by the hook.
-    mergeDescribedBy(hintParts.describedBy, counting && countId, locked && lock.reasonId),
-    rest["aria-invalid"],
-  );
-  const counter = counting ? (
-    <CharacterCount
-      id={countId}
-      used={length.used}
-      max={maxLength}
-      labels={countText}
-      caption={<FieldCaption parts={hintParts} className="mt-0" />}
-    />
-  ) : null;
-  const below = fieldBelow(hintParts, counter, errorEl);
-  const onChange = locked
-    ? undefined
-    : counting
-      ? (e: ChangeEvent<HTMLInputElement>) => {
-          length.track(e.target.value);
-          rest.onChange?.(e);
-        }
-      : rest.onChange;
-  // Locked, these win over what the caller's spread carried: focusable rather than
-  // `disabled`, `readOnly`, no blur reported (blur is a self-saving field's save), and
-  // Enter swallowed. Spread AFTER `rest` on every branch's input.
-  const lockProps = locked
-    ? {
-        disabled: undefined,
-        readOnly: true,
-        "aria-disabled": true as const,
-        onBlur: undefined,
-        onKeyDown: swallowEnter(rest.onKeyDown),
-      }
-    : undefined;
-  // While locked the field sits in the reason's frame (the line, or the Tooltip), which
-  // becomes its outermost box — so `className` (a width, a flex or grid cell) moves onto
-  // that, as on Select, and the form keeps its layout. `block` so a full-width field
-  // stays full width in it.
-  const boxClass = locked ? undefined : className;
-  const withReason = (box: ReactNode) =>
-    locked ? (
-      <LockedReason lock={lock} display={disabledReasonDisplay} className={cn("block", className)}>
-        {box}
-      </LockedReason>
-    ) : (
-      box
-    );
-  const asDisplay = usePhoneLayout() && variant === "display";
-  // Password fields get a reveal toggle so users can check what they typed.
-  const isPassword = type === "password";
-  const [revealed, setRevealed] = useState(false);
-  const effectiveType = isPassword && revealed ? "text" : type;
-  const handleClick = PICKER_TYPES.has(type ?? "")
-    ? (e: MouseEvent<HTMLInputElement>) => {
-        rest.onClick?.(e);
-        try {
-          // showPicker throws if unsupported or not user-activated — a click is
-          // a valid activation, so this is safe; guard for older browsers.
-          (e.currentTarget as HTMLInputElement & { showPicker?: () => void }).showPicker?.();
-        } catch {
-          /* ignore */
-        }
-      }
-    : rest.onClick;
-  const passwordText = useKitLabels("passwordReveal", DEFAULT_PASSWORD_REVEAL_LABELS, passwordLabels);
-  const revealToggle = isPassword ? (
-    <button
-      type="button"
-      // `tabIndex={-1}` sat here, which made this a painted, clickable control that
-      // Tab stepped straight over — on the one field whose value cannot be checked by
-      // looking at it. There is no mouse-only case for a reveal toggle; the people who
-      // cannot see what they typed are exactly who it is for. It is a tab stop now,
-      // and it needs a focus ring of its own, because FIELD_BASE's ring belongs to the
-      // input underneath and stays put while focus moves onto the button on top of it.
-      onClick={() => setRevealed((v) => !v)}
-      // …and since it is a tab stop, a field the user may not edit must not hand the
-      // keyboard a control that shows what is in it — a locked one included.
-      disabled={rest.disabled || locked}
-      aria-label={revealed ? passwordText.hide : passwordText.show}
-      aria-pressed={revealed}
-      className={cn(
-        "absolute inset-y-0 end-0 flex items-center rounded-e-md px-2.5 text-placeholder transition-colors hover:text-secondary focus:outline-none disabled:cursor-default disabled:opacity-50",
-        FOCUS_RING,
-      )}
-    >
-      {revealed ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
-    </button>
-  ) : null;
-  if (label === undefined) {
-    // A "?" with no label line to ride goes at the end edge, outside the box, and
-    // `className` moves to that row (see `hint`); without one nothing moves.
-    const endHint = hintParts.labelHint;
-    const ownClass = endHint === undefined ? boxClass : undefined;
-    if (!isPassword) {
-      return (
-        <FieldGroup errorEl={below} reserve={reserve}>
-          {withReason(
-            <EndHintRow hint={endHint} className={boxClass}>
-              <input
-                ref={ref}
-                id={id}
-                type={type}
-                placeholder={placeholder}
-                {...rest}
-                {...lockProps}
-                // AFTER the spread, so the prop wins — but OR-ed with whatever the spread
-                // carried, or setting `invalid` would have quietly deleted a caller's own
-                // `aria-invalid`. The prop is the one that also paints; a bare attribute
-                // still announces, which is all it ever did.
-                aria-invalid={isInvalid || rest["aria-invalid"] || undefined}
-                // Likewise merged rather than replaced — see {@link useFieldError}.
-                aria-describedby={describedBy}
-                onClick={handleClick}
-                onChange={onChange}
-                className={cn(
-                  FIELD_BASE,
-                  ownClass,
-                  inputClassName,
-                  isInvalid && FIELD_INVALID,
-                  locked && "cursor-not-allowed",
-                )}
-              />
-            </EndHintRow>,
-          )}
-        </FieldGroup>
-      );
-    }
-    return (
-      <FieldGroup errorEl={below} reserve={reserve}>
-        {withReason(
-          <EndHintRow hint={endHint} className={boxClass}>
-            <div className={cn("relative", ownClass)}>
-              <input
-                ref={ref}
-                id={id}
-                type={effectiveType}
-                placeholder={placeholder}
-                {...rest}
-                {...lockProps}
-                aria-invalid={isInvalid || rest["aria-invalid"] || undefined}
-                aria-describedby={describedBy}
-                onChange={onChange}
-                className={cn(
-                  FIELD_BASE,
-                  "pe-9",
-                  inputClassName,
-                  isInvalid && FIELD_INVALID,
-                  locked && "cursor-not-allowed",
-                )}
-              />
-              {revealToggle}
-            </div>
-          </EndHintRow>,
-        )}
-      </FieldGroup>
-    );
-  }
-  const ownPlaceholder = hasPlaceholderText(placeholder);
-  return (
-    <FieldGroup errorEl={below} reserve={reserve}>
-      {withReason(
-        <FloatingField
-          className={boxClass}
-          htmlFor={fieldId}
-          label={label}
-          srOnlyLabel={asDisplay}
-          hint={hintParts.labelHint}
-        >
-          <input
-            ref={ref}
-            id={fieldId}
-            type={effectiveType}
-            // A labelled field with no placeholder of its own gets a single space, which
-            // feeds the floating label's peer-placeholder-shown trick. A caller's own is
-            // kept and shown on focus, once the label has floated out of its way (kastlan
-            // 8) — see FLOATING_PLACEHOLDER_ON_FOCUS. With the label sr-only there is no
-            // float left to drive, and an empty borderless line would say nothing at all
-            // — so there the label text is the placeholder when the caller gave none.
-            placeholder={
-              asDisplay
-                ? (placeholder ?? (typeof label === "string" ? label : " "))
-                : ownPlaceholder
-                  ? placeholder
-                  : " "
-            }
-            {...rest}
-            {...lockProps}
-            aria-invalid={isInvalid || rest["aria-invalid"] || undefined}
-            aria-describedby={describedBy}
-            onClick={handleClick}
-            onChange={onChange}
-            className={cn(
-              asDisplay
-                ? cn(FIELD_DISPLAY, "text-xl font-semibold leading-snug")
-                : cn(FLOATING_INPUT_CLASS, ownPlaceholder && FLOATING_PLACEHOLDER_ON_FOCUS),
-              isPassword && "pe-9",
-              inputClassName,
-              isInvalid && FIELD_INVALID,
-              locked && "cursor-not-allowed",
-            )}
-          />
-          {revealToggle}
-        </FloatingField>,
-      )}
-    </FieldGroup>
-  );
-}

package/src/components/jump-calendar.tsx

@@ -1,265 +0,0 @@
-// The date pickers' calendar with a month jump (`monthJump`, kastlan): MiniCalendar
-// under a ‹ caption › whose caption opens a month grid. Moved out of date-picker.tsx as
-// it was (MOD-9, refactor audit 2026-10); internal, both pickers reach it through
-// `PanelCalendar`.
-import { useId, useMemo, useRef, useState } from "react";
-import type { KeyboardEvent } from "react";
-import { ChevronDown, ChevronLeft, ChevronRight } from "lucide-react";
-import { cn } from "../lib/cn";
-import { monthKey, parseIsoDate } from "../lib/dates";
-import { upperFirst } from "../lib/text-case";
-import { useKitLabels } from "../i18n/kit-labels";
-import { DEFAULT_MINI_CALENDAR_LABELS, MiniCalendar, type MiniCalendarProps } from "./mini-calendar";
-import { DEFAULT_MONTH_PICKER_LABELS } from "./month-picker-labels";
-import { MonthGrid, clampKey, firstOfKey, shiftKey, yearArrowsBlocked } from "./month-grid";
-import { claimEscape } from "../hooks/use-dismiss";
-
-// ── Month jump (`monthJump`, kastlan) ─────────────────────────────────────
-
-/**
- * The month `MiniCalendar` opens on — the selection, or today, pulled inside the
- * bounds — worked out the way it does, so the caption drawn over a calendar that was
- * given no `month` names the month that calendar is showing.
- */
-function openingMonth(from: string, to: string, lo: Date | null, hi: Date | null): string {
-  const start = parseIsoDate(from) ?? parseIsoDate(to) ?? new Date();
-  if (lo && start < lo) return monthKey(lo);
-  if (hi && start > hi) return monthKey(hi);
-  return monthKey(start);
-}
-
-export type PanelCalendarProps = Pick<
-  MiniCalendarProps,
-  "mode" | "from" | "to" | "locale" | "min" | "max" | "labels" | "onSelect" | "focusOnOpen"
-> & {
-  /** See {@link DatePickerBaseProps.monthJump}. */
-  monthJump?: boolean;
-};
-
-/** The panel's calendar: the plain {@link MiniCalendar}, exactly as before — or, with
- *  `monthJump`, the same calendar under a caption that opens a month grid. */
-export function PanelCalendar({ monthJump, ...calendar }: PanelCalendarProps) {
-  return monthJump ? <JumpCalendar {...calendar} /> : <MiniCalendar {...calendar} />;
-}
-
-/** How the day grid is mounted: `key` remounts it, `month` is the month it follows
- *  (left out until the panel first moves, so it opens exactly where it always has), and
- *  `focus` is its `focusOnOpen`. */
-interface DayGridMount {
-  key: number;
-  month?: string;
-  focus: boolean;
-}
-
-/**
- * {@link MiniCalendar} with its navigation drawn here — ‹ caption › — so the caption can
- * be a button that swaps the days for a month grid ({@link DatePickerBaseProps.monthJump}).
- *
- * Built on the calendar's own `hideNavigation` / `month` / `onMonthChange`, not a fork
- * of it: the days, their keys, the range band and every announcement stay the
- * calendar's. What this keeps is `shown`, the month on screen, for the caption — fed by
- * the arrows here, by the calendar's `onMonthChange` (PageUp, arrowing off the edge),
- * and by the value, whose changes the calendar follows WITHOUT reporting them (a preset
- * under `apply` moves the grid to its start). That last one is mirrored below with
- * the calendar's own rule, and when it lands in another month the day grid is remounted
- * there rather than steered by `month`: a `month` that changes in the same render as the
- * value would win over the value's day, and the grid's tab stop would land on the
- * month's same-numbered day instead of the preset's start.
- *
- * The month grid is `MonthPicker`'s own {@link MonthGrid} (month-grid.tsx, one since
- * 0.52 — refactor audit 2026-10-30, DUP-11), with its words (`monthPicker` labels).
- */
-function JumpCalendar({
-  from = "",
-  to = "",
-  mode = "range",
-  locale,
-  min,
-  max,
-  labels,
-  onSelect,
-  focusOnOpen,
-}: Omit<PanelCalendarProps, "monthJump">) {
-  // The month arrows say what they said when the calendar drew them; the month grid
-  // says what `MonthPicker`'s says.
-  const calendarText = useKitLabels("miniCalendar", DEFAULT_MINI_CALENDAR_LABELS, labels);
-  const monthText = useKitLabels("monthPicker", DEFAULT_MONTH_PICKER_LABELS);
-  const id = useId();
-  const captionId = `${id}-caption`;
-  const hintId = `${id}-hint`;
-  const captionRef = useRef<HTMLButtonElement>(null);
-
-  const lo = min ? parseIsoDate(min) : null;
-  const hi = max ? parseIsoDate(max) : null;
-  const minKey = lo ? monthKey(lo) : null;
-  const maxKey = hi ? monthKey(hi) : null;
-
-  const [view, setView] = useState<"days" | "months">("days");
-  const [shown, setShown] = useState(() => openingMonth(from, to, lo, hi));
-  const [dayGrid, setDayGrid] = useState<DayGridMount>(() => ({ key: 0, focus: Boolean(focusOnOpen) }));
-  // The month holding the month grid's tab stop — and with it the year on show.
-  const [active, setActive] = useState(shown);
-
-  // The value moved from outside the day grid (a preset, a reset): follow the end that
-  // changed, by the calendar's own rule, and remount the days there — see above. Also
-  // what takes an open month grid back to the days when a preset is picked beside it.
-  const [lastValue, setLastValue] = useState({ from, to });
-  if (lastValue.from !== from || lastValue.to !== to) {
-    const changed = lastValue.from !== from ? from : to;
-    setLastValue({ from, to });
-    const next = parseIsoDate(changed) ?? parseIsoDate(from) ?? parseIsoDate(to);
-    const key = next ? monthKey(next) : null;
-    if (key && (key !== shown || view === "months")) {
-      setShown(key);
-      setView("days");
-      setDayGrid((d) => ({ key: d.key + 1, month: key, focus: false }));
-    }
-  }
-
-  const showMonth = (key: string) => {
-    setShown(key);
-    // Follows by `month`: the calendar keeps the day of the month (clamped), and the
-    // focus stays on the arrow being pressed.
-    setDayGrid((d) => ({ ...d, month: key }));
-  };
-  const openMonths = () => {
-    // The grid takes the focus onto this month as it mounts.
-    setActive(clampKey(shown, minKey, maxKey));
-    setView("months");
-  };
-  const closeMonths = (focusCaption: boolean) => {
-    setView("days");
-    setDayGrid((d) => ({ ...d, month: shown, focus: false }));
-    if (focusCaption) captionRef.current?.focus();
-  };
-  const pick = (key: string) => {
-    setShown(key);
-    setView("days");
-    // Picked to go there: the focus goes with it, onto the days.
-    setDayGrid((d) => ({ key: d.key + 1, month: key, focus: true }));
-  };
-
-  const inDays = view === "days";
-  // Escape in the month grid is "back", not "close": the month grid is a step INSIDE the
-  // panel, and losing the half-made range to a key meant to undo that step would be the
-  // worse surprise. Claimed on the kit's Escape stack (Wave 2, DUP-1) and stopped here,
-  // so neither the popover nor the phone sheet nor a dialog around them closes.
-  const escapeToDays = (e: KeyboardEvent<HTMLElement>) => {
-    if (e.key !== "Escape" || inDays) return;
-    claimEscape(e);
-    e.stopPropagation();
-    closeMonths(true);
-  };
-
-  const year = Number(active.slice(0, 4));
-  const yearBlocked = yearArrowsBlocked(active, minKey, maxKey);
-  const prevBlocked = !inDays && yearBlocked.previous;
-  const nextBlocked = !inDays && yearBlocked.next;
-
-  const longName = useMemo(() => new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }), [locale]);
-  const caption = inDays
-    ? upperFirst(longName.format(firstOfKey(shown)), locale)
-    : new Intl.DateTimeFormat(locale, { year: "numeric" }).format(new Date(year, 0, 1));
-
-  // The selection, as months: both ends, and the months between (a range's band).
-  const fromDate = parseIsoDate(from);
-  const toDate = parseIsoDate(to);
-  const fromKey = fromDate ? monthKey(fromDate) : null;
-  const toKey = toDate ? monthKey(toDate) : null;
-
-  // Aria-disabled rather than disabled, like the day cells: a focused button that
-  // turns `disabled` drops the focus to <body>, mid-panel.
-  const arrow =
-    "rounded p-1 text-muted hover:bg-hover aria-disabled:cursor-not-allowed aria-disabled:opacity-30 aria-disabled:hover:bg-transparent";
-
-  return (
-    <div className="select-none">
-      {/* The calendar's own row, redrawn: the same arrows in the same places. Each
-          button stays mounted across the two views and changes what it steps, so a
-          press never pulls the element out from under the pointer or the focus. */}
-      <div className="flex items-center justify-between gap-1 pb-1">
-        <button
-          type="button"
-          aria-label={inDays ? calendarText.previousMonth : monthText.previousYear}
-          aria-disabled={prevBlocked || undefined}
-          onClick={() => {
-            // Focus stays on the arrow being pressed — only the grid moves.
-            if (inDays) showMonth(shiftKey(shown, -1));
-            else if (!prevBlocked) setActive(shiftKey(active, -12));
-          }}
-          onKeyDown={escapeToDays}
-          className={arrow}
-        >
-          {/* Mirrored in RTL: "previous" points to the reading START, which is right. */}
-          <ChevronLeft className="size-4 rtl:-scale-x-100" aria-hidden />
-        </button>
-        <button
-          ref={captionRef}
-          type="button"
-          aria-expanded={!inDays}
-          aria-describedby={inDays ? hintId : undefined}
-          onClick={inDays ? openMonths : () => closeMonths(false)}
-          onKeyDown={escapeToDays}
-          className="inline-flex min-w-0 items-center gap-1 rounded px-1.5 py-0.5 text-xs font-medium text-secondary hover:bg-hover"
-        >
-          {/* The name is the text, so it says what is on screen; `aria-live` because
-              pressing an arrow leaves focus ON the arrow, and this is the only thing
-              that says where it went. It also names the month grid. */}
-          <span id={captionId} aria-live="polite" className="truncate">
-            {caption}
-          </span>
-          <ChevronDown aria-hidden className={cn("size-3.5 shrink-0 text-muted", !inDays && "rotate-180")} />
-        </button>
-        <button
-          type="button"
-          aria-label={inDays ? calendarText.nextMonth : monthText.nextYear}
-          aria-disabled={nextBlocked || undefined}
-          onClick={() => {
-            if (inDays) showMonth(shiftKey(shown, 1));
-            else if (!nextBlocked) setActive(shiftKey(active, 12));
-          }}
-          onKeyDown={escapeToDays}
-          className={arrow}
-        >
-          <ChevronRight className="size-4 rtl:-scale-x-100" aria-hidden />
-        </button>
-      </div>
-      {/* The caption's description — read through the reference, never on its own. */}
-      <span id={hintId} hidden>
-        {monthText.panel}
-      </span>
-      {inDays ? (
-        <MiniCalendar
-          key={dayGrid.key}
-          mode={mode}
-          from={from}
-          to={to}
-          locale={locale}
-          min={min}
-          max={max}
-          labels={labels}
-          onSelect={onSelect}
-          focusOnOpen={dayGrid.focus}
-          hideNavigation
-          month={dayGrid.month}
-          onMonthChange={showMonth}
-        />
-      ) : (
-        <MonthGrid
-          active={active}
-          onActiveChange={setActive}
-          onPick={pick}
-          from={fromKey}
-          to={toKey}
-          minKey={minKey}
-          maxKey={maxKey}
-          currentKey={monthKey(new Date())}
-          locale={locale}
-          cellName={monthText.month}
-          labelledBy={captionId}
-          onEscape={escapeToDays}
-        />
-      )}
-    </div>
-  );
-}