@eifi1/ui-kit 0.54.0 → 0.55.0

package/src/components/money-field.tsx

@@ -1,76 +0,0 @@
-import type { ComponentProps, Ref } from "react";
-import { AmountInput } from "./amount-input";
-import { useMoneyDraft } from "./money-draft";
-
-type AmountInputProps = ComponentProps<typeof AmountInput>;
-
-export interface MoneyFieldProps extends Omit<
-  AmountInputProps,
-  "value" | "onChange" | "onCommit" | "negative" | "onNegativeChange" | "ref"
-> {
-  /** The amount, or `null` for an empty field. */
-  value: number | null;
-  /**
-   * The settled amount — on blur, on Enter, on the numpad's "=" and once per calculator
-   * session (its "=", or the pad closing on a newer result); never a half-typed "1200+". Rounded to the currency's minor unit (or
-   * `digits`) and clamped to `min` / `max`, like {@link AmountInput}. `null` when the
-   * field was emptied. Not fired when the settled amount equals `value`, so an
-   * Enter-then-blur saves once.
-   */
-  onCommit: (value: number | null) => void;
-  ref?: Ref<HTMLInputElement>;
-}
-
-/**
- * {@link AmountInput} with a NUMBER in and a number out, for money edited outside a
- * form — a budget row, a table cell (kastlan 52: new-budget-page edited a CHF amount per
- * row with `NumberField` because AmountInput is string-valued and reports every
- * keystroke, "1200+" included, so a number-state row needed its own parse-and-settle
- * glue). This is that glue, the same one `RhfMoneyField` has: the text being typed
- * lives here, and only a settled figure reaches `onCommit`.
- *
- * The currency chip, the calculator, the numpad, the locale's decimal mark, the
- * rounding to the currency's minor unit and `min` / `max` are AmountInput's. A caller-
- * owned sign (`negative`) is not offered: the figure here carries its own minus.
- *
- * So are two props a table cell needs (keksdose K4, K6): `error`, the message under the
- * field that paints and describes it like {@link Input}'s, and `calculator={false}`,
- * for an amount in a close-on-blur inline editor, where a click on the calculator icon
- * blurs the field and tears the editor down before the popover can open (typed
- * calculations still evaluate).
- *
- * `inputClassName` (0.23, keksdose G7) styles the `<input>` itself — `text-end` for a
- * money column — where `className` sizes the wrapper; see {@link AmountInput}'s.
- *
- * LOCKED (0.34, round 0.34 C2): a row that saves itself passes `commit` (or a
- * `disabledReason` of its own), AmountInput's — under a locked `WriteLockProvider` the
- * field stays in the tab order showing its amount, `readOnly`, with the lock's reason in
- * the kit Tooltip and its description; the calculator, the numpad and the currency
- * picker are off, and `onCommit` is never called. `disabled` takes it out of the tab
- * order, which is what a lock must not do.
- *
- * This, not a `NumberField` with `digits={2}`, is the number-valued field for money:
- * it settles to the CURRENCY's minor unit (JPY 0, CHF 2) and `digits` takes a unit
- * price's finer scale (kastlan 5).
- *
- * ```tsx
- * <MoneyField aria-label="Amount" currency="CHF" value={row.amount}
- *   onCommit={(amount) => updateRow(row.id, { amount })} />
- * ```
- */
-export function MoneyField({ value, onCommit, ref, ...props }: MoneyFieldProps) {
-  const money = useMoneyDraft(value);
-  return (
-    <AmountInput
-      {...props}
-      ref={ref}
-      value={money.draft}
-      onChange={money.change}
-      onCommit={(text) => {
-        // No number ("-" alone): the draft is back on the stored amount, nothing commits.
-        const next = money.settle(text);
-        if (next !== undefined && next !== value) onCommit(next);
-      }}
-    />
-  );
-}

package/src/components/month-grid.tsx

@@ -1,229 +0,0 @@
-// The year's twelve months as a grid: what MonthPicker opens, and what DatePicker's month
-// jump (JumpCalendar) swaps in for the days. One component since 0.52 (refactor audit
-// 2026-10-30, DUP-11): the two were copies — the same keys, bounds and cells — and had
-// drifted, only JumpCalendar's rows being the 44px touch target. Internal; not re-exported
-// from the barrel.
-import { useEffect, useMemo, useRef } from "react";
-import type { KeyboardEvent } from "react";
-import { cn } from "../lib/cn";
-import { horizontalStep } from "../lib/direction";
-import { pad } from "../lib/dates";
-import { upperFirst } from "../lib/text-case";
-import { FOCUS_RING_WIDTH } from "./focus-ring";
-
-/** Months per row: a year is four rows of three. */
-export const MONTH_COLUMNS = 3;
-
-/** A "YYYY-MM" key as a count of months, and back: month arithmetic with no `Date`
- *  rollover to step around. */
-export const monthIndex = (key: string) => Number(key.slice(0, 4)) * 12 + Number(key.slice(5, 7)) - 1;
-export const keyOfIndex = (index: number) =>
-  `${String(Math.floor(index / 12)).padStart(4, "0")}-${pad((index % 12) + 1)}`;
-export const shiftKey = (key: string, delta: number) => keyOfIndex(monthIndex(key) + delta);
-/** The 1st of a "YYYY-MM" month, for `Intl` to name. */
-export const firstOfKey = (key: string) => new Date(Number(key.slice(0, 4)), Number(key.slice(5, 7)) - 1, 1);
-
-/** `key` pulled inside the bounds — where a grid opens when the value is outside them. */
-export function clampKey(key: string, minKey: string | null, maxKey: string | null): string {
-  if (minKey && key < minKey) return minKey;
-  if (maxKey && key > maxKey) return maxKey;
-  return key;
-}
-
-/**
- * Which of the year arrows over a grid on `active`'s year are dead: an arrow is, once
- * EVERY month of the year it leads to is out of bounds. The arrows are their owner's —
- * MonthPicker's sit around the year, JumpCalendar's double as its month arrows — and they
- * stay focusable either way (`aria-disabled`, refactor audit 2026-10-30, INP-4).
- */
-export function yearArrowsBlocked(
-  active: string,
-  minKey: string | null,
-  maxKey: string | null,
-): { previous: boolean; next: boolean } {
-  const year = Number(active.slice(0, 4));
-  return {
-    previous: Boolean(minKey && year - 1 < Number(minKey.slice(0, 4))),
-    next: Boolean(maxKey && year + 1 > Number(maxKey.slice(0, 4))),
-  };
-}
-
-export interface MonthGridProps {
-  /** The month holding the tab stop, "YYYY-MM" — and with it the year on show. Its owner
-   *  keeps it, because the owner's year arrows move it too. */
-  active: string;
-  /** The keys moved the tab stop; the grid moves the focus after it. */
-  onActiveChange: (key: string) => void;
-  /** A month inside the bounds was picked (a click, Enter, Space). */
-  onPick: (key: string) => void;
-  /** The selection, as months: a single month is both ends, and a range's months between
-   *  them are its band. `null` for none. */
-  from: string | null;
-  to: string | null;
-  minKey: string | null;
-  maxKey: string | null;
-  /** The month to ring as "now". */
-  currentKey: string;
-  locale: string | undefined;
-  /** A cell's accessible name, given "August 2026" — `monthPicker.month`. */
-  cellName: (monthYear: string) => string;
-  /** The id of what names the grid: the year caption above it. */
-  labelledBy: string;
-  /** Escape in the grid. Left out, it travels on to the popover around it, which closes. */
-  onEscape?: (e: KeyboardEvent<HTMLButtonElement>) => void;
-}
-
-/**
- * A grid in the APG sense, like `MiniCalendar`'s days: one tab stop (the roving
- * tabindex), the arrows walk the months — left/right by one, up/down by a row of three —
- * and walking off either end of the year MOVES the year rather than stopping; Home/End
- * the row, PageUp/PageDown a year. Out-of-bounds months are `aria-disabled`, not
- * `disabled`, so the roving tab stop never falls into a hole. The focus lands on the tab
- * stop when the grid mounts: both owners mount it only when asked to pick a month.
- */
-export function MonthGrid({
-  active,
-  onActiveChange,
-  onPick,
-  from,
-  to,
-  minKey,
-  maxKey,
-  currentKey,
-  locale,
-  cellName,
-  labelledBy,
-  onEscape,
-}: MonthGridProps) {
-  const gridRef = useRef<HTMLDivElement>(null);
-  const year = Number(active.slice(0, 4));
-  const outOfBounds = (key: string) => Boolean((minKey && key < minKey) || (maxKey && key > maxKey));
-
-  // Short names for the cells — upper-cased the one way (DUP-11); MonthPicker's CSS
-  // `capitalize` and JumpCalendar's `upperFirst` agreed only because "Aug" is one word —
-  // and "Month YYYY" for their accessible names.
-  const shortNames = useMemo(() => {
-    const fmt = new Intl.DateTimeFormat(locale, { month: "short" });
-    return Array.from({ length: 12 }, (_, i) => upperFirst(fmt.format(new Date(2000, i, 1)), locale));
-  }, [locale]);
-  const longName = useMemo(() => new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }), [locale]);
-
-  // Mounted to pick a month: land on it. In MonthPicker this runs before the popover's
-  // focus trap (a child's effect fires first), which then keeps this focus.
-  useEffect(() => {
-    gridRef.current?.querySelector<HTMLElement>('[tabindex="0"]')?.focus();
-  }, []);
-
-  // A month whose cell must take focus after the next commit. Arrowing across a year's
-  // edge relabels the same twelve buttons, so the one to focus is a DIFFERENT button from
-  // the one the key landed on.
-  const pendingFocus = useRef<string | null>(null);
-  useEffect(() => {
-    const key = pendingFocus.current;
-    if (!key) return;
-    pendingFocus.current = null;
-    gridRef.current?.querySelector<HTMLElement>(`[data-month="${key}"]`)?.focus();
-  });
-
-  const onCellKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {
-    if (e.key === "Escape") {
-      onEscape?.(e);
-      return;
-    }
-    // Left and right are VISUAL directions: in a right-to-left panel the grid runs the
-    // other way. The panel is portalled, but its owner puts the field's `dir` on it, so
-    // the nearest `dir` is right.
-    const step = horizontalStep(e.key, e.currentTarget);
-    const col = (monthIndex(active) % 12) % MONTH_COLUMNS;
-    let delta: number;
-    switch (step ? "horizontal" : e.key) {
-      case "horizontal":
-        delta = step;
-        break;
-      case "ArrowUp":
-        delta = -MONTH_COLUMNS;
-        break;
-      case "ArrowDown":
-        delta = MONTH_COLUMNS;
-        break;
-      case "Home":
-        delta = -col;
-        break;
-      case "End":
-        delta = MONTH_COLUMNS - 1 - col;
-        break;
-      case "PageUp":
-        delta = -12;
-        break;
-      case "PageDown":
-        delta = 12;
-        break;
-      default:
-        return;
-    }
-    // Before the no-op check: these keys also scroll the panel, and a month that cannot
-    // move still must not move the page.
-    e.preventDefault();
-    if (delta === 0) return;
-    const next = shiftKey(active, delta);
-    pendingFocus.current = next;
-    onActiveChange(next);
-  };
-
-  const low = from ?? to;
-  const high = to ?? from;
-
-  return (
-    <div ref={gridRef} role="grid" aria-labelledby={labelledBy} className="grid gap-1">
-      {Array.from({ length: 12 / MONTH_COLUMNS }, (_, row) => (
-        <div key={row} role="row" className="grid grid-cols-3 gap-1">
-          {Array.from({ length: MONTH_COLUMNS }, (_, c) => {
-            const index = row * MONTH_COLUMNS + c;
-            const key = keyOfIndex(year * 12 + index);
-            const disabled = outOfBounds(key);
-            const selected = low !== null && high !== null && key >= low && key <= high;
-            const end = key === from || key === to;
-            const current = key === currentKey;
-            return (
-              <button
-                key={c}
-                type="button"
-                role="gridcell"
-                data-month={key}
-                tabIndex={key === active ? 0 : -1}
-                aria-label={cellName(longName.format(firstOfKey(key)))}
-                aria-selected={selected}
-                aria-disabled={disabled || undefined}
-                aria-current={current ? "date" : undefined}
-                onClick={() => {
-                  // The guard `disabled` would have been; see the component note.
-                  if (!disabled) onPick(key);
-                }}
-                onKeyDown={onCellKeyDown}
-                className={cn(
-                  // 44px rows: the touch-target size, and four of them stand as tall as a
-                  // month of days, so JumpCalendar's panel does not jump as its views swap.
-                  "h-11 rounded px-1 text-sm tabular-nums transition-colors",
-                  FOCUS_RING_WIDTH,
-                  "focus-visible:outline-none focus-visible:ring-inset",
-                  // A --brand ring on a --brand fill exists only in the DOM.
-                  end && !disabled ? "focus-visible:ring-brand-contrast" : "focus-visible:ring-brand",
-                  disabled
-                    ? "cursor-not-allowed text-placeholder"
-                    : end
-                      ? "bg-brand text-brand-contrast hover:bg-brand-hover"
-                      : selected
-                        ? "bg-brand-soft font-medium text-brand-muted hover:bg-brand-soft-hover"
-                        : "text-primary hover:bg-hover",
-                  current && !selected && !disabled && "ring-1 ring-inset ring-strong",
-                )}
-              >
-                {shortNames[index]}
-              </button>
-            );
-          })}
-        </div>
-      ))}
-    </div>
-  );
-}

package/src/components/month-picker-labels.ts

@@ -1,22 +0,0 @@
-// The English words of ./month-picker, in a module with no component code: the English
-// catalogue (src/i18n/defaults.ts) imports them without the component, so `en` loads as one
-// chunk like the other languages (0.34, KS U8). ./month-picker re-exports them.
-
-import type { MonthPickerLabels } from "./month-picker";
-
-/** The English starting point every override is merged onto. Exported (unlike the
- *  calendar's) because it is asked for by name: a host building its own translation
- *  table can spread it rather than re-typing four keys to change one. */
-export const DEFAULT_MONTH_PICKER_LABELS: MonthPickerLabels = {
-  previousYear: "Previous year",
-  nextYear: "Next year",
-  panel: "Choose a month",
-  month: (monthYear) => monthYear,
-  previousMonth: "Previous month",
-  nextMonth: "Next month",
-  today: "Today",
-  yearPanel: "Choose a year",
-  earlierYears: "Earlier years",
-  laterYears: "Later years",
-  thisYear: "This year",
-};