@eifi1/ui-kit 0.11.0 → 0.13.0

package/src/components/number-input.tsx

@@ -57,6 +57,15 @@ interface NumberInputProps {
   hint?: ReactNode;
   /** Required and unanswered — {@link FIELD_INVALID}. See {@link Input}'s `invalid`. */
   invalid?: boolean;
+  /**
+   * Set on the `<input>`, with `id` above. Declared so `Field`'s render-prop spread —
+   * `{(ids) => <NumberInput {...ids} … />}` — is typed and reaches the input: the hint
+   * and error are described, a required number is announced as required, and
+   * `aria-invalid` paints {@link FIELD_INVALID} the way `invalid` does.
+   */
+  "aria-describedby"?: string;
+  "aria-invalid"?: boolean | "true" | "false";
+  "aria-required"?: boolean | "true" | "false";
   /**
    * A static unit shown at the field's right edge — "%", "kg", "km/h".
    *
@@ -156,7 +165,10 @@ export function NumberInput({
   calculator = true,
   variant = "field",
   hint,
-  invalid,
+  invalid: invalidProp,
+  "aria-describedby": ariaDescribedBy,
+  "aria-invalid": ariaInvalid,
+  "aria-required": ariaRequired,
   suffix,
   step,
   min,
@@ -164,6 +176,7 @@ export function NumberInput({
 }: NumberInputProps) {
   const generatedId = useId();
   const fieldId = id ?? generatedId;
+  const invalid = Boolean(invalidProp) || ariaInvalid === true || ariaInvalid === "true";
   const labelled = label !== undefined;
   // On phones we suppress the OS keyboard (inputMode="none" below) for our own
   // calculator numpad, so the desktop popover trigger is hidden (feedback #334).
@@ -219,6 +232,7 @@ export function NumberInput({
         // keeps focus/caret); desktop keeps the native decimal keypad.
         inputMode={isMobile ? "none" : "decimal"}
         autoComplete="off"
+        // eslint-disable-next-line jsx-a11y/no-autofocus -- a documented prop the caller opts into (off by default); the field never takes focus on its own.
         autoFocus={autoFocus}
         disabled={disabled}
         // Display mode has no floating label to feed the blank-placeholder trick,
@@ -234,6 +248,8 @@ export function NumberInput({
         }}
         onKeyDown={onKeyDown}
         aria-invalid={invalid || undefined}
+        aria-describedby={ariaDescribedBy}
+        aria-required={ariaRequired}
         // The end padding sits last so it always wins over an inputClassName that
         // sets its own px. Both trailing controls can be on at once, so the room
         // they need is reserved together rather than by whichever happens to render:

package/src/components/numpad-sheet.tsx

@@ -99,11 +99,16 @@ export function NumberPadSheet({
   onDone,
   label,
   labels,
+  decimalMark = ".",
 }: {
   value: string;
   /** Fired with the raw (sanitised) field text on every key — same contract as
    * the host field's own `onChange`. */
   onChange: (value: string) => void;
+  /** The glyph on the decimal key — "," where the host shows a comma (AmountInput
+   *  in fr-CH, kastlan 40). The key still inserts a dot; the host's text is dot-form
+   *  underneath and `sanitizeLive` reads either. */
+  decimalMark?: "." | ",";
   /** Fired on "Done": the host blurs the input, which commits (evaluates) and
    * unmounts the sheet via its existing blur handler. */
   onDone: () => void;
@@ -231,7 +236,7 @@ export function NumberPadSheet({
               onClick={() => insert(key.ins)}
               className={cn(PAD_BTN, key.accent ? PAD_ACCENT : PAD_DIGIT)}
             >
-              {key.label}
+              {key.kind === "ins" && key.name === "decimal" ? decimalMark : key.label}
             </button>
           ),
         )}

package/src/components/page-header.tsx

@@ -2,21 +2,44 @@ import type { ComponentPropsWithoutRef, ElementType, ReactNode } from "react";
 import { cn } from "../lib/cn";
 import { SECTION_LABEL_CLASS } from "./text";
 
-/** `md` (default) is kastlan's `text-2xl` page title from `sm` up, a step smaller on a
- *  phone; `sm` is lenkbank's `text-lg` title on a dense tool page (projects-page.tsx). */
-export type PageHeaderSize = "sm" | "md";
+/**
+ * `md` (default) is kastlan's `text-2xl` page title from `sm` up, a step smaller on a
+ * phone; `sm` is lenkbank's `text-lg` title on a dense tool page (projects-page.tsx).
+ *
+ * `compact` (0.13) is keksdose's page title (keksdose F4): `text-xl font-semibold` at
+ * EVERY width — budgets, rules, accounts, transactions and budget pages all write
+ * exactly that `<h1>` by hand. It is `md`'s phone size without `md`'s step up to
+ * `text-2xl` on a wider screen, and without its `tracking-tight`, which keksdose's
+ * titles never had. A word and not a letter for the reason `ProgressBar`'s `slim` is
+ * one: the letters are taken in order, and there is none between `sm` and `md` — an
+ * `lg` or `xl` at `text-xl` would read as LARGER than `md`, which from `sm` up it is
+ * not.
+ */
+export type PageHeaderSize = "sm" | "compact" | "md";
 
 const TITLE: Record<PageHeaderSize, string> = {
   sm: "text-lg font-semibold",
+  compact: "text-xl font-semibold",
   md: "text-xl font-semibold tracking-tight sm:text-2xl",
 };
 
+/**
+ * How the title block and the actions sit below the `sm` breakpoint. From `sm` up both
+ * layouts are one row: title block at the start, actions at the end.
+ */
+export type PageHeaderMobileLayout = "stacked" | "inline";
+
+const ROW: Record<PageHeaderMobileLayout, string> = {
+  stacked: "flex-col gap-3 sm:flex-row sm:items-start sm:justify-between sm:gap-4",
+  inline: "flex-row items-center justify-between gap-2 sm:gap-4",
+};
+
 export interface PageHeaderProps extends Omit<ComponentPropsWithoutRef<"div">, "title"> {
   title: ReactNode;
   /** A sentence under the title. */
   description?: ReactNode;
   /** Buttons for the page — "New", "Export". At the title's end from `sm` up; under it,
-   *  wrapping, on a phone. */
+   *  wrapping, on a phone — unless {@link mobileLayout} is `inline`. */
   actions?: ReactNode;
   /** A `Breadcrumbs` trail, drawn above everything else. */
   breadcrumbs?: ReactNode;
@@ -27,6 +50,19 @@ export interface PageHeaderProps extends Omit<ComponentPropsWithoutRef<"div">, "
    *  header inside a page that already has its `h1` (a tab's own header). */
   as?: "h1" | "h2" | "h3";
   size?: PageHeaderSize;
+  /**
+   * `stacked` (default): on a phone the actions drop under the title and wrap, so a
+   * row of three buttons never pushes the title off the screen.
+   *
+   * `inline`: the actions stay beside the title on a phone too, vertically centred on
+   * it — keksdose's headers (transactions-page.tsx:515, `flex items-center
+   * justify-between gap-2`), which carry one or two icon-sized controls and were tuned
+   * for the phone in live #263. Adopting `PageHeader` must not undo that tuning, so the
+   * row stays a row (keksdose F4). The actions do NOT wrap or shrink here: `inline` is
+   * for a header whose actions are known to fit beside a phone-width title (an icon
+   * button, a month picker); a long title wraps to make room for them instead.
+   */
+  mobileLayout?: PageHeaderMobileLayout;
 }
 
 /**
@@ -48,6 +84,7 @@ export function PageHeader({
   eyebrow,
   as = "h1",
   size = "md",
+  mobileLayout = "stacked",
   className,
   ...rest
 }: PageHeaderProps) {
@@ -55,7 +92,7 @@ export function PageHeader({
   return (
     <div {...rest} className={cn("flex min-w-0 flex-col gap-2", className)}>
       {breadcrumbs}
-      <div className="flex min-w-0 flex-col gap-3 sm:flex-row sm:items-start sm:justify-between sm:gap-4">
+      <div className={cn("flex min-w-0", ROW[mobileLayout])}>
         <div className="min-w-0 flex-1">
           {eyebrow != null && <p className={cn(SECTION_LABEL_CLASS.xs, "mb-1")}>{eyebrow}</p>}
           <Heading className={cn("break-words text-[var(--text-primary)]", TITLE[size])}>{title}</Heading>

package/src/components/passkeys-setting.tsx

@@ -0,0 +1,331 @@
+import { useEffect, useRef, useState } from "react";
+import type { KeyboardEvent, ReactNode } from "react";
+import { KeyRound } from "lucide-react";
+import { cn } from "../lib/cn";
+import { useKitLocale } from "../i18n/kit-labels";
+import { Button, Card, EmptyState, Input } from "./ui";
+import { Skeleton } from "./skeleton";
+import { useAccountSettingsLabels } from "./account-settings-labels";
+import type { PasskeysSettingLabels } from "./account-settings-labels";
+
+/** One registered passkey, as the app's API lists it. */
+export interface PasskeyItem {
+  id: string | number;
+  name: string;
+  /** A `Date`, an ISO string or epoch ms. */
+  createdAt?: Date | string | number | null;
+  /** Null (or left out) reads as "Never used". */
+  lastUsedAt?: Date | string | number | null;
+}
+
+export interface PasskeysSettingProps {
+  /** `undefined` while the first load is in flight (or pass `loading`). */
+  passkeys: readonly PasskeyItem[] | undefined;
+  loading?: boolean;
+  /**
+   * Run the WebAuthn ceremony and register the passkey — app-side, since the options
+   * and the attestation are the app's server's business. Called with the trimmed name
+   * field, which may be EMPTY: pick your own default ("Passkey", the device name).
+   * Return the promise and the field clears when it resolves; a rejection (including
+   * the user cancelling the OS prompt) keeps what was typed.
+   */
+  onAdd: (name: string) => void | Promise<unknown>;
+  /** The ceremony is running. The add button says so and does not start a second one. */
+  adding?: boolean;
+  /** Offer "Rename" on each row. Return a promise to leave edit mode only on success. */
+  onRename?: (id: PasskeyItem["id"], name: string) => void | Promise<unknown>;
+  /** Offer "Delete" on each row — always behind an inline confirmation. */
+  onDelete?: (id: PasskeyItem["id"]) => void | Promise<unknown>;
+  /** A row whose rename or delete is in flight; its buttons are disabled. */
+  busyId?: PasskeyItem["id"] | null;
+  /** Show the name field above the add button. Default true. */
+  nameField?: boolean;
+  /**
+   * Shown INSTEAD of the list and the add button — passkeys are not supported by this
+   * browser, or the page is not a secure context. Its wording is the app's: only the
+   * app knows which of those it detected.
+   */
+  unavailable?: ReactNode;
+  /** A date for the "Added …" / "Last used …" lines. Default: the locale's medium date. */
+  formatDate?: (date: Date) => string;
+  /** Overrides the provider's locale for the default date format. */
+  locale?: string;
+  /** Prop > `<UiKitProvider labels={{ accountSettings: { passkeys } }}>` > English. */
+  labels?: Partial<PasskeysSettingLabels>;
+  className?: string;
+}
+
+/**
+ * The passkeys section of an account page: what is registered, when it was last used,
+ * rename and delete, and "Add passkey" — the fourth card beside `ProfileSetting`,
+ * `PasswordSetting` and `TwoFactorSetting`, and built the same way (a self-contained
+ * `<Card>` owning its transient form state; the app owns the data and the API).
+ *
+ * Lifted from kastlan's passkeys-card. **The WebAuthn ceremony stays app-side**:
+ * `navigator.credentials.create` needs options minted by the app's server and hands
+ * back an attestation only that server can verify, so the kit calls `onAdd` and waits.
+ *
+ * **Delete confirms inline**, in the row, rather than through `useConfirm`: this card
+ * must work in an app without a `ConfirmProvider`, and the question belongs next to
+ * the passkey it names. Focus moves to Cancel, as in every destructive confirm in the
+ * kit, so the Enter that pressed Delete cannot also answer it.
+ */
+export function PasskeysSetting({
+  passkeys,
+  loading,
+  onAdd,
+  adding = false,
+  onRename,
+  onDelete,
+  busyId,
+  nameField = true,
+  unavailable,
+  formatDate,
+  locale: localeProp,
+  labels: labelsProp,
+  className,
+}: PasskeysSettingProps) {
+  const labels = useAccountSettingsLabels("passkeys", labelsProp);
+  const locale = useKitLocale(localeProp);
+  const [name, setName] = useState("");
+
+  const date = (value: PasskeyItem["createdAt"]): string | null => {
+    if (value === null || value === undefined || value === "") return null;
+    const d = value instanceof Date ? value : new Date(value);
+    if (Number.isNaN(d.getTime())) return null;
+    return formatDate ? formatDate(d) : new Intl.DateTimeFormat(locale, { dateStyle: "medium" }).format(d);
+  };
+
+  const add = () => {
+    if (adding) return;
+    const typed = name;
+    Promise.resolve(onAdd(typed.trim()))
+      // Clear only what was sent: the field stays editable while the OS prompt is up.
+      .then(() => setName((current) => (current === typed ? "" : current)))
+      .catch(() => {});
+  };
+
+  const isLoading = loading || passkeys === undefined;
+  const items = passkeys ?? [];
+
+  const body = (() => {
+    if (unavailable != null && unavailable !== false) {
+      return <EmptyState variant="inline" size="sm" icon={<KeyRound />} title={unavailable} />;
+    }
+    return (
+      <>
+        {isLoading ? (
+          <Skeleton lines={2} label={labels.loading} />
+        ) : items.length === 0 ? (
+          <EmptyState variant="inline" size="sm" icon={<KeyRound />} title={labels.empty} />
+        ) : (
+          <ul aria-label={labels.list} className="divide-y divide-[var(--border)]">
+            {items.map((item) => (
+              <PasskeyRow
+                key={item.id}
+                item={item}
+                created={date(item.createdAt)}
+                lastUsed={date(item.lastUsedAt)}
+                busy={busyId !== undefined && busyId !== null && busyId === item.id}
+                onRename={onRename}
+                onDelete={onDelete}
+                labels={labels}
+              />
+            ))}
+          </ul>
+        )}
+        <div className="space-y-2 pt-1">
+          {nameField && (
+            <Input
+              label={labels.nameLabel}
+              placeholder={labels.namePlaceholder}
+              value={name}
+              maxLength={120}
+              onChange={(e) => setName(e.target.value)}
+              onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {
+                if (e.key === "Enter") {
+                  e.preventDefault();
+                  add();
+                }
+              }}
+            />
+          )}
+          <Button onClick={add} disabled={adding} aria-busy={adding || undefined}>
+            <KeyRound className="size-4" aria-hidden />
+            {adding ? labels.adding : labels.add}
+          </Button>
+        </div>
+      </>
+    );
+  })();
+
+  return (
+    <Card className={cn("p-4 space-y-3", className)}>
+      <div>
+        <div className="text-sm font-medium">{labels.title}</div>
+        <div className="text-xs text-[var(--text-muted)]">
+          {labels.description}
+        </div>
+      </div>
+      {body}
+    </Card>
+  );
+}
+
+type RowMode = "view" | "rename" | "delete";
+
+function PasskeyRow({
+  item,
+  created,
+  lastUsed,
+  busy,
+  onRename,
+  onDelete,
+  labels,
+}: {
+  item: PasskeyItem;
+  created: string | null;
+  lastUsed: string | null;
+  busy: boolean;
+  onRename?: PasskeysSettingProps["onRename"];
+  onDelete?: PasskeysSettingProps["onDelete"];
+  labels: PasskeysSettingLabels;
+}) {
+  const [mode, setMode] = useState<RowMode>("view");
+  const [draft, setDraft] = useState(item.name);
+  // Which button opened the sub-mode, so leaving it puts focus back there — the
+  // confirm or the field unmounts under the focus, which otherwise falls to <body>.
+  const [returnTo, setReturnTo] = useState<"rename" | "delete" | null>(null);
+  const cancelDeleteRef = useRef<HTMLButtonElement>(null);
+  const renameRef = useRef<HTMLInputElement>(null);
+  const renameButtonRef = useRef<HTMLButtonElement>(null);
+  const deleteButtonRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    if (mode === "delete") cancelDeleteRef.current?.focus();
+    else if (mode === "rename") renameRef.current?.select();
+    else if (returnTo) (returnTo === "rename" ? renameButtonRef : deleteButtonRef).current?.focus();
+  }, [mode, returnTo]);
+
+  const open = (next: "rename" | "delete") => {
+    setReturnTo(next);
+    setDraft(item.name);
+    setMode(next);
+  };
+  const leave = () => setMode("view");
+  const escapeLeaves = (e: KeyboardEvent<HTMLButtonElement>) => {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      e.stopPropagation();
+      leave();
+    }
+  };
+
+  const saveRename = () => {
+    const next = draft.trim();
+    if (!onRename || !next || busy) return;
+    if (next === item.name) {
+      leave();
+      return;
+    }
+    Promise.resolve(onRename(item.id, next))
+      .then(leave)
+      .catch(() => {});
+  };
+
+  const confirmDelete = () => {
+    if (!onDelete || busy) return;
+    // The row unmounts once the list refreshes; on a failure it stays, confirm open.
+    Promise.resolve(onDelete(item.id))
+      .then(() => setMode("view"))
+      .catch(() => {});
+  };
+
+  const meta = [created && labels.created(created), lastUsed ? labels.lastUsed(lastUsed) : labels.neverUsed]
+    .filter(Boolean)
+    .join(" · ");
+
+  if (mode === "rename") {
+    return (
+      <li className="flex flex-wrap items-center gap-2 py-2">
+        <Input
+          ref={renameRef}
+          aria-label={labels.renameField(item.name)}
+          className="min-w-0 flex-1"
+          value={draft}
+          maxLength={120}
+          onChange={(e) => setDraft(e.target.value)}
+          onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              saveRename();
+            } else if (e.key === "Escape") {
+              e.preventDefault();
+              e.stopPropagation();
+              leave();
+            }
+          }}
+        />
+        <Button size="sm" onClick={saveRename} disabled={busy || !draft.trim()}>
+          {labels.save}
+        </Button>
+        <Button size="sm" variant="ghost" onClick={leave}>
+          {labels.cancel}
+        </Button>
+      </li>
+    );
+  }
+
+  if (mode === "delete") {
+    return (
+      <li className="space-y-2 py-2">
+        <p role="alert" className="text-sm">
+          {labels.deleteConfirm(item.name)}
+        </p>
+        <div className="flex flex-wrap gap-2">
+          <Button size="sm" variant="danger" onClick={confirmDelete} onKeyDown={escapeLeaves} disabled={busy}>
+            {labels.confirmDelete}
+          </Button>
+          <Button ref={cancelDeleteRef} size="sm" variant="ghost" onClick={leave} onKeyDown={escapeLeaves}>
+            {labels.cancel}
+          </Button>
+        </div>
+      </li>
+    );
+  }
+
+  return (
+    <li className="flex items-center gap-3 py-2">
+      <KeyRound className="size-4 shrink-0 text-[var(--text-muted)]" aria-hidden />
+      <div className="min-w-0 flex-1">
+        <div className="truncate text-sm font-medium">{item.name}</div>
+        <div className="text-xs text-[var(--text-muted)]">{meta}</div>
+      </div>
+      {onRename && (
+        <Button
+          ref={renameButtonRef}
+          size="sm"
+          variant="ghost"
+          disabled={busy}
+          onClick={() => open("rename")}
+          aria-label={labels.renameItem(item.name)}
+        >
+          {labels.rename}
+        </Button>
+      )}
+      {onDelete && (
+        <Button
+          ref={deleteButtonRef}
+          size="sm"
+          variant="ghost"
+          tone="danger"
+          disabled={busy}
+          onClick={() => open("delete")}
+          aria-label={labels.deleteItem(item.name)}
+        >
+          {labels.delete}
+        </Button>
+      )}
+    </li>
+  );
+}

package/src/components/picker-sheet.tsx

@@ -3,6 +3,7 @@ import { createPortal } from "react-dom";
 import { X } from "lucide-react";
 import type { ComponentPropsWithoutRef, KeyboardEvent, ReactNode, RefObject } from "react";
 import { cn } from "../lib/cn";
+import { CLIPS_ATTRIBUTE } from "../lib/clipping";
 import { DropdownSearchHeader } from "./dropdown";
 import { useBodyScrollLock } from "../hooks/use-body-scroll-lock";
 import { useOverlayHistory } from "../hooks/use-overlay-history";
@@ -153,6 +154,9 @@ export function PickerSheet({
 
   if (!open || typeof document === "undefined") return null;
   return createPortal(
+    /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- the dialog
+       container, per the APG dialog pattern: `onKeyDown` is Escape-to-close for whatever
+       inside it holds focus, and `onMouseDown` only stops propagation (live #328). */
     <div
       // Spread FIRST, and every attribute below it deliberately wins: `style`,
       // `onMouseDown` and `onKeyDown` here are not styling choices, they are live
@@ -237,7 +241,12 @@ export function PickerSheet({
       />
       {/* min-h-0 so the LIST scrolls rather than the dialog growing past the
           viewport — a flex child defaults to min-height:auto. */}
-      <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain">{children}</div>
+      {/* Marked as the scroller it is (`CLIPS_ATTRIBUTE`), so a Tooltip in a row —
+          `Combobox`'s `optionAdornment` — portals out under jsdom as it does in the
+          browser rather than joining the option's name (keksdose E8). */}
+      <div {...{ [CLIPS_ATTRIBUTE]: "" }} className="min-h-0 flex-1 overflow-y-auto overscroll-contain">
+        {children}
+      </div>
     </div>,
     document.body,
   );

package/src/components/pie-chart-labels.ts

@@ -0,0 +1,32 @@
+// All user-facing strings for `PieChart`, as the `pieChart` namespace of
+// `<UiKitProvider labels>`, and per chart the `labels` prop over that.
+//
+// A module of its own, with no recharts in it, for the reason `series-chart-labels`
+// is one: the label registry (src/i18n) imports the defaults, and must not pull the
+// chart library in behind them.
+
+export interface PieChartLabels {
+  /** Accessible name of the group of keyboard stops laid over the slices — one tab
+   *  stop, arrow keys between them. */
+  slices: string;
+  /**
+   * One slice's accessible name. `value` arrives through `formatValue`, `percent` as
+   * the slice's share of what is drawn, already formatted in the locale ("42 %" in
+   * German, "42%" in English) — the function only arranges them.
+   */
+  slice: (label: string, value: string, percent: string) => string;
+  /** The caption over the donut's centre figure. */
+  total: string;
+  /** What a chart with nothing to draw says, when the caller passes no `empty`. */
+  empty: string;
+  /** Accessible name of the chart's legend (a group of switches, one per slice). */
+  legend: string;
+}
+
+export const DEFAULT_PIE_CHART_LABELS: PieChartLabels = {
+  slices: "Chart slices",
+  slice: (label, value, percent) => `${label}: ${value} (${percent})`,
+  total: "Total",
+  empty: "No data",
+  legend: "Categories",
+};