@eifi1/ui-kit 0.16.1 → 0.18.0

package/dist/components/danger-confirm.d.ts

@@ -1,6 +1,55 @@
 import * as react from 'react';
-import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { Ref, ComponentPropsWithoutRef, ReactNode } from 'react';
 
+/**
+ * How typed text is compared with the text it has to repeat — shared by
+ * `DangerConfirm`'s `phraseMatch` and `useConfirm`'s `typedMatch`.
+ *
+ * - `"trim"` ignores spaces around the typed text — a phone keyboard's autocomplete
+ *   likes to add one. Case counts: "delete" is not "DELETE".
+ * - `"exact"` compares character for character, spaces included.
+ * - `"caseless"` trims AND ignores case: for an e-mail address, whose domain is
+ *   case-insensitive and whose local part every real mail server treats so. Both apps'
+ *   "type the account's address" rules (keksdose's `TYPE_EMAIL`, Kurvenschmiede's
+ *   `TypedConfirm`) compared `trim().toLowerCase()`, and a capital the user's keyboard
+ *   put at the start must not make the right row look like the wrong one.
+ */
+type TypedMatch = "trim" | "exact" | "caseless";
+/** Whether `typed` repeats `target` under `mode` — see {@link TypedMatch}. Exported for
+ *  a caller that draws its own field (a dialog that also picks a recipient) and wants
+ *  the same rule as the kit's. */
+declare function typedMatches(typed: string, target: string, mode?: TypedMatch): boolean;
+/**
+ * Busy-while-a-promise-runs, for an action that MAY return one: `run(result, onResolved)`
+ * marks the caller pending until `result` settles, calls `onResolved` if it fulfilled,
+ * and only clears the flag if it rejected — the caller shows why and the user retries.
+ * Nothing runs after unmount. Shared by `DangerConfirm` and `ReauthDialog`, whose
+ * contract is the same: resolve = done, reject = stay put.
+ *
+ * @internal
+ */
+declare function usePromisePending(): {
+    pending: boolean;
+    run: (result: unknown, onResolved: () => void) => boolean;
+};
+/**
+ * The "prove it is you" field: a password input the browser's password manager fills
+ * with the CURRENT password (`autocomplete="current-password"`), never offers to
+ * generate a new one for. `readOnly` rather than `disabled` while busy: disabling the
+ * field that has focus (Enter was pressed in it) drops focus to <body>.
+ *
+ * @internal DangerConfirm's field. ReauthDialog spells it out with the field's own
+ * `error`, which keeps the `<input>` mounted while its message comes and goes.
+ */
+declare function CurrentPasswordInput({ inputRef, label, value, onValueChange, busy, invalid, describedBy, }: {
+    inputRef?: Ref<HTMLInputElement>;
+    label: string;
+    value: string;
+    onValueChange: (value: string) => void;
+    busy: boolean;
+    invalid?: boolean;
+    describedBy?: string;
+}): react.JSX.Element;
 /**
  * Every string the tile renders — the `dangerConfirm` namespace of
  * `<UiKitProvider labels>`, overridable per instance through `labels`. The arm and
@@ -59,9 +108,11 @@ interface DangerConfirmProps extends Omit<ComponentPropsWithoutRef<"div">, "onCh
      * How the typed text is compared with `phrase`. `"trim"` (default) ignores spaces
      * around it — a phone keyboard's autocomplete likes to add one. `"exact"` compares
      * character for character, spaces included, for an app whose contract is "type
-     * exactly this".
+     * exactly this". `"caseless"` (0.18) also ignores case — for a phrase that is an
+     * e-mail address (keksdose's "type the user's address" admin rule). See
+     * {@link TypedMatch}.
      */
-    phraseMatch?: "trim" | "exact";
+    phraseMatch?: TypedMatch;
     /** The warning above the fields. Defaults to `labels.prompt`. */
     prompt?: ReactNode;
     /** `"danger"` (default) for what cannot be undone; `"warning"` for what can, at a
@@ -112,4 +163,4 @@ interface DangerConfirmProps extends Omit<ComponentPropsWithoutRef<"div">, "onCh
  */
 declare function DangerConfirm({ onConfirm, requirePassword, phrase, phraseMatch, prompt, tone, armLabel, confirmLabel, busy: busyProp, disabled, lockedReason, armed: armedProp, onArmedChange, labels: labelsProp, className, ...rest }: DangerConfirmProps): react.JSX.Element;
 
-export { DEFAULT_DANGER_CONFIRM_LABELS, DangerConfirm, type DangerConfirmLabels, type DangerConfirmProps };
+export { CurrentPasswordInput, DEFAULT_DANGER_CONFIRM_LABELS, DangerConfirm, type DangerConfirmLabels, type DangerConfirmProps, type TypedMatch, typedMatches, usePromisePending };

package/dist/components/danger-confirm.js

@@ -1,10 +1,65 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useId, useRef, useState } from "react";
+import { useCallback, useEffect, useId, useRef, useState } from "react";
 import { cn } from "../lib/cn.js";
 import { useKitLabels } from "../i18n/kit-labels.js";
 import { Button, Input, Label, Spinner } from "./ui.js";
 import { Tooltip } from "./tooltip.js";
+function typedMatches(typed, target, mode = "trim") {
+  if (mode === "exact") return typed === target;
+  if (mode === "trim") return typed.trim() === target;
+  return typed.trim().toLowerCase() === target.trim().toLowerCase();
+}
+function usePromisePending() {
+  const [pending, setPending] = useState(false);
+  const mounted = useRef(true);
+  useEffect(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+    };
+  }, []);
+  const run = useCallback((result, onResolved) => {
+    if (!result || typeof result.then !== "function") return false;
+    setPending(true);
+    result.then(
+      () => {
+        if (!mounted.current) return;
+        setPending(false);
+        onResolved();
+      },
+      () => {
+        if (mounted.current) setPending(false);
+      }
+    );
+    return true;
+  }, []);
+  return { pending, run };
+}
+function CurrentPasswordInput({
+  inputRef,
+  label,
+  value,
+  onValueChange,
+  busy,
+  invalid,
+  describedBy
+}) {
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      ref: inputRef,
+      type: "password",
+      autoComplete: "current-password",
+      label,
+      value,
+      readOnly: busy,
+      invalid,
+      "aria-describedby": describedBy,
+      onChange: (e) => onValueChange(e.target.value)
+    }
+  );
+}
 const DEFAULT_DANGER_CONFIRM_LABELS = {
   arm: "Delete\u2026",
   confirm: "Delete",
@@ -36,7 +91,7 @@ function DangerConfirm({
   const armed = armedProp ?? armedState;
   const [password, setPassword] = useState("");
   const [typed, setTyped] = useState("");
-  const [pending, setPending] = useState(false);
+  const { pending, run } = usePromisePending();
   const busy = Boolean(busyProp) || pending;
   const promptId = useId();
   const reasonId = useId();
@@ -45,13 +100,6 @@ function DangerConfirm({
   const cancelId = useId();
   const firstFieldRef = useRef(null);
   const moveFocus = useRef(false);
-  const mounted = useRef(true);
-  useEffect(() => {
-    mounted.current = true;
-    return () => {
-      mounted.current = false;
-    };
-  }, []);
   const [wasArmed, setWasArmed] = useState(armed);
   if (wasArmed !== armed) {
     setWasArmed(armed);
@@ -81,24 +129,12 @@ function DangerConfirm({
   };
   const locked = lockedReason !== void 0 && lockedReason !== null && lockedReason !== false && lockedReason !== "";
   const passwordOk = !requirePassword || password !== "";
-  const phraseOk = phrase === void 0 || (phraseMatch === "exact" ? typed : typed.trim()) === phrase;
+  const phraseOk = phrase === void 0 || typedMatches(typed, phrase, phraseMatch);
   const canConfirm = passwordOk && phraseOk && !busy;
   const submit = (e) => {
     e.preventDefault();
     if (!canConfirm) return;
-    const result = onConfirm(requirePassword ? password : void 0);
-    if (!result || typeof result.then !== "function") return;
-    setPending(true);
-    result.then(
-      () => {
-        if (!mounted.current) return;
-        setPending(false);
-        setArmed(false);
-      },
-      () => {
-        if (mounted.current) setPending(false);
-      }
-    );
+    run(onConfirm(requirePassword ? password : void 0), () => setArmed(false));
   };
   const phrasePlaceholder = phrase === void 0 || labels.phrasePlaceholder === void 0 ? void 0 : typeof labels.phrasePlaceholder === "function" ? labels.phrasePlaceholder(phrase) : labels.phrasePlaceholder;
   const phraseLabel = phrase === void 0 ? "" : typeof labels.phrase === "function" ? labels.phrase(phrase) : labels.phrase;
@@ -162,15 +198,13 @@ function DangerConfirm({
           ] })
         ) : /* @__PURE__ */ jsx(Input, { label: phraseLabel, ...phraseFieldProps })),
         requirePassword && /* @__PURE__ */ jsx(
-          Input,
+          CurrentPasswordInput,
           {
-            ref: phrase === void 0 ? firstFieldRef : void 0,
-            type: "password",
-            autoComplete: "current-password",
+            inputRef: phrase === void 0 ? firstFieldRef : void 0,
             label: labels.password,
             value: password,
-            readOnly: busy,
-            onChange: (e) => setPassword(e.target.value)
+            busy,
+            onValueChange: setPassword
           }
         ),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
@@ -194,7 +228,10 @@ function DangerConfirm({
   ) });
 }
 export {
+  CurrentPasswordInput,
   DEFAULT_DANGER_CONFIRM_LABELS,
-  DangerConfirm
+  DangerConfirm,
+  typedMatches,
+  usePromisePending
 };
 //# sourceMappingURL=danger-confirm.js.map

package/dist/components/danger-confirm.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/danger-confirm.tsx"],"sourcesContent":["import { useEffect, useId, useRef, useState } from \"react\";\nimport type { ChangeEvent, ComponentPropsWithoutRef, FormEvent, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { Button, Input, Label, Spinner } from \"./ui\";\nimport { Tooltip } from \"./tooltip\";\n\n/**\n * Every string the tile renders — the `dangerConfirm` namespace of\n * `<UiKitProvider labels>`, overridable per instance through `labels`. The arm and\n * confirm buttons are usually worded per action (\"Delete budget\"), which is what the\n * `armLabel` / `confirmLabel` props are for; these are the fallbacks.\n */\nexport interface DangerConfirmLabels {\n  /** The button that arms the tile. */\n  arm: string;\n  /** The button that runs the action once the guards are satisfied. */\n  confirm: string;\n  cancel: string;\n  /** The warning above the fields, when no `prompt` is given. */\n  prompt: string;\n  /** Label of the password field (`requirePassword`). */\n  password: string;\n  /** Label of the type-to-confirm field. A FUNCTION of the phrase by default, like\n   *  every message that carries a value: where the phrase sits in the sentence moves\n   *  with the language. A plain STRING is taken as the finished label — for an app\n   *  whose catalogue already words it (\"Type DELETE to confirm\") and would otherwise\n   *  wrap it as `() => label`. */\n  phrase: string | ((phrase: string) => string);\n  /** Placeholder of the type-to-confirm field — a string, or a function of the\n   *  phrase (`(p) => p` echoes it). Optional and unset by default: the field keeps its\n   *  floating label, as before. Given, the label moves ABOVE the field (a floating\n   *  label occupies the empty field, which is exactly where a placeholder shows) and\n   *  the placeholder fills the field. An empty string means none. */\n  phrasePlaceholder?: string | ((phrase: string) => string);\n}\n\n/** `satisfies` rather than a type annotation, so `DEFAULT_DANGER_CONFIRM_LABELS.phrase`\n *  stays callable for a caller that composes its own label from it. */\nexport const DEFAULT_DANGER_CONFIRM_LABELS = {\n  arm: \"Delete…\",\n  confirm: \"Delete\",\n  cancel: \"Cancel\",\n  prompt: \"This cannot be undone.\",\n  password: \"Password\",\n  phrase: (phrase: string) => `Type “${phrase}” to confirm`,\n} satisfies DangerConfirmLabels;\n\nexport interface DangerConfirmProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  /**\n   * Runs the action, with the entered password when `requirePassword` is on.\n   *\n   * Return a promise and the tile manages itself: busy until it settles, disarmed\n   * (fields wiped) when it resolves, still armed when it rejects — so the user can\n   * correct a wrong password and retry. The rejection is not swallowed for you to\n   * miss: handle it (and show why) in the caller, as with any mutation.\n   */\n  onConfirm: (password?: string) => void | Promise<unknown>;\n  /** Show a password field; confirm stays disabled until it is filled. */\n  requirePassword?: boolean;\n  /** Show a \"type <phrase> to confirm\" field; confirm stays disabled until the field\n   *  matches (case-sensitive; surrounding spaces ignored unless `phraseMatch=\"exact\"`). */\n  phrase?: string;\n  /**\n   * How the typed text is compared with `phrase`. `\"trim\"` (default) ignores spaces\n   * around it — a phone keyboard's autocomplete likes to add one. `\"exact\"` compares\n   * character for character, spaces included, for an app whose contract is \"type\n   * exactly this\".\n   */\n  phraseMatch?: \"trim\" | \"exact\";\n  /** The warning above the fields. Defaults to `labels.prompt`. */\n  prompt?: ReactNode;\n  /** `\"danger\"` (default) for what cannot be undone; `\"warning\"` for what can, at a\n   *  cost (loading demo data over your own). Colours the prompt and the confirm. */\n  tone?: \"danger\" | \"warning\";\n  /** Visible text of the arm button; defaults to `labels.arm`. */\n  armLabel?: ReactNode;\n  /** Visible text of the confirm button; defaults to `labels.confirm`. */\n  confirmLabel?: ReactNode;\n  /** The action is running: confirm shows a spinner and nothing can be pressed. For a\n   *  caller that tracks the mutation itself (a `useMutation`'s `isPending`); a\n   *  promise returned from `onConfirm` does the same on its own. */\n  busy?: boolean;\n  /** The arm button is disabled. */\n  disabled?: boolean;\n  /**\n   * Why the action is not available — a read-only demo, a write lock, a missing\n   * permission. Disables the arm button like `disabled`, and SAYS so: the sentence is\n   * shown under the button and attached to it with `aria-describedby`, and the button\n   * stays focusable (`aria-disabled`) so a keyboard user can land on it and hear why.\n   *\n   * On the ARM button rather than the confirm: arming asks for a password, and asking\n   * for a password for a write that can never land is the worse of the two.\n   */\n  lockedReason?: ReactNode;\n  /** Controlled armed state. The parent can then collapse the tile from a mutation's\n   *  own `onSuccess` without returning a promise. */\n  armed?: boolean;\n  /** Called with the next armed state — on arm, cancel, and a resolved `onConfirm`. */\n  onArmedChange?: (armed: boolean) => void;\n  /** User-facing strings; see {@link DangerConfirmLabels}. */\n  labels?: Partial<DangerConfirmLabels>;\n}\n\n/**\n * An \"arm → confirm\" tile for destructive actions: one button, which expands into a\n * warning, an optional password field, an optional type-to-confirm field and a\n * confirm that stays disabled until every guard is satisfied.\n *\n * Keksdose hand-rolled it three times (load demo data, wipe everything, reset a\n * budget) and then as `shared/components/danger-confirm.tsx`; the only app-specific\n * part was its write-lock hook, which is `lockedReason` here.\n *\n * The fields are a `<form>`, so Enter confirms once the guards allow it. They are\n * wiped every time the tile disarms — a password must not sit in a collapsed tile.\n * Arming moves focus to the first field (or Cancel, when there is none — never to the\n * destructive button itself), and disarming moves it back to the arm button, so the\n * keyboard user is never left on an element that just vanished.\n */\nexport function DangerConfirm({\n  onConfirm,\n  requirePassword,\n  phrase,\n  phraseMatch = \"trim\",\n  prompt,\n  tone = \"danger\",\n  armLabel,\n  confirmLabel,\n  busy: busyProp,\n  disabled,\n  lockedReason,\n  armed: armedProp,\n  onArmedChange,\n  labels: labelsProp,\n  className,\n  ...rest\n}: DangerConfirmProps) {\n  const labels = useKitLabels(\"dangerConfirm\", DEFAULT_DANGER_CONFIRM_LABELS, labelsProp);\n  const [armedState, setArmedState] = useState(false);\n  const armed = armedProp ?? armedState;\n  const [password, setPassword] = useState(\"\");\n  const [typed, setTyped] = useState(\"\");\n  const [pending, setPending] = useState(false);\n  const busy = Boolean(busyProp) || pending;\n  // `readOnly` rather than `disabled` on the fields while busy: disabling the field\n  // that has focus (Enter was pressed in it) drops focus to <body>.\n  const promptId = useId();\n  const reasonId = useId();\n  const phraseFieldId = useId();\n\n  // The kit's Button takes no ref, so the two buttons focus is moved to are found by id.\n  const armId = useId();\n  const cancelId = useId();\n  const firstFieldRef = useRef<HTMLInputElement>(null);\n  // Focus moves only after a transition — never on mount, so a tile that renders armed\n  // (controlled) does not take the page's focus merely by existing.\n  const moveFocus = useRef(false);\n  const mounted = useRef(true);\n  useEffect(() => {\n    mounted.current = true;\n    return () => {\n      mounted.current = false;\n    };\n  }, []);\n\n  // A disarm from anywhere (cancel, a resolved confirm, the parent) wipes the fields.\n  // During render, like NumberField's draft, so no frame shows a collapsed tile that\n  // still holds a password.\n  const [wasArmed, setWasArmed] = useState(armed);\n  if (wasArmed !== armed) {\n    setWasArmed(armed);\n    if (!armed) {\n      setPassword(\"\");\n      setTyped(\"\");\n    }\n  }\n\n  const prevArmed = useRef(armed);\n  useEffect(() => {\n    const changed = prevArmed.current !== armed;\n    prevArmed.current = armed;\n    const byUser = moveFocus.current;\n    moveFocus.current = false;\n    if (!changed) return;\n    if (armed) {\n      if (byUser) (firstFieldRef.current ?? document.getElementById(cancelId))?.focus();\n      return;\n    }\n    // A controlled parent collapsing the tile from its own `onSuccess` did not go\n    // through `setArmed`; if focus went down with the form, bring it back too.\n    const lost = document.activeElement === null || document.activeElement === document.body;\n    if (byUser || lost) document.getElementById(armId)?.focus();\n  }, [armed, armId, cancelId]);\n\n  const setArmed = (next: boolean) => {\n    moveFocus.current = true;\n    if (armedProp === undefined) setArmedState(next);\n    onArmedChange?.(next);\n  };\n\n  const locked = lockedReason !== undefined && lockedReason !== null && lockedReason !== false && lockedReason !== \"\";\n  const passwordOk = !requirePassword || password !== \"\";\n  const phraseOk = phrase === undefined || (phraseMatch === \"exact\" ? typed : typed.trim()) === phrase;\n  const canConfirm = passwordOk && phraseOk && !busy;\n\n  const submit = (e: FormEvent) => {\n    e.preventDefault();\n    if (!canConfirm) return;\n    const result = onConfirm(requirePassword ? password : undefined);\n    if (!result || typeof (result as Promise<unknown>).then !== \"function\") return;\n    setPending(true);\n    (result as Promise<unknown>).then(\n      () => {\n        if (!mounted.current) return;\n        setPending(false);\n        setArmed(false);\n      },\n      () => {\n        // Stays armed, fields kept: the caller shows why, the user retries.\n        if (mounted.current) setPending(false);\n      },\n    );\n  };\n\n  const phrasePlaceholder =\n    phrase === undefined || labels.phrasePlaceholder === undefined\n      ? undefined\n      : typeof labels.phrasePlaceholder === \"function\"\n        ? labels.phrasePlaceholder(phrase)\n        : labels.phrasePlaceholder;\n\n  const phraseLabel =\n    phrase === undefined ? \"\" : typeof labels.phrase === \"function\" ? labels.phrase(phrase) : labels.phrase;\n  const phraseFieldProps = {\n    ref: firstFieldRef,\n    value: typed,\n    autoComplete: \"off\",\n    autoCapitalize: \"off\",\n    spellCheck: false,\n    readOnly: busy,\n    onChange: (e: ChangeEvent<HTMLInputElement>) => setTyped(e.target.value),\n  };\n\n  const toneText = tone === \"warning\" ? \"text-[var(--warning)]\" : \"text-[var(--danger)]\";\n\n  if (!armed) {\n    const arm = (\n      <Button\n        id={armId}\n        type=\"button\"\n        variant={tone === \"warning\" ? \"secondary\" : \"danger\"}\n        disabled={disabled}\n        aria-disabled={locked || undefined}\n        aria-describedby={locked ? reasonId : undefined}\n        onClick={() => {\n          if (!locked) setArmed(true);\n        }}\n        className=\"aria-disabled:cursor-not-allowed aria-disabled:opacity-50\"\n      >\n        {armLabel ?? labels.arm}\n      </Button>\n    );\n    return (\n      <div {...rest} className={cn(\"space-y-1\", className)}>\n        {locked ? (\n          // The reason on the button itself too, where the pointer that tried it is —\n          // the line below can sit out of view in a long settings card. Portalled, so\n          // a card that scrolls neither clips it nor grows by it.\n          //\n          // The button in a FRAGMENT on purpose: Tooltip clones an element child to\n          // add the bubble to its `aria-describedby`, and the button is already\n          // described by the visible line below — the same sentence twice, read out\n          // on every focus. A fragment is left as it is, so the bubble stays visual.\n          <Tooltip label={lockedReason} portal>\n            <>{arm}</>\n          </Tooltip>\n        ) : (\n          arm\n        )}\n        {locked && (\n          <p id={reasonId} className=\"text-xs text-[var(--text-muted)]\">\n            {lockedReason}\n          </p>\n        )}\n      </div>\n    );\n  }\n\n  return (\n    <div {...rest} className={cn(\"space-y-2\", className)}>\n      <form\n        className=\"space-y-2\"\n        aria-describedby={promptId}\n        aria-busy={busy || undefined}\n        onSubmit={submit}\n        noValidate\n      >\n        <p id={promptId} className={cn(\"text-xs font-medium\", toneText)}>\n          {prompt ?? labels.prompt}\n        </p>\n        {phrase !== undefined &&\n          (phrasePlaceholder ? (\n            // A static label above, so the placeholder has the empty field to itself.\n            <div className=\"space-y-1.5\">\n              <Label htmlFor={phraseFieldId}>{phraseLabel}</Label>\n              <Input id={phraseFieldId} placeholder={phrasePlaceholder} {...phraseFieldProps} />\n            </div>\n          ) : (\n            <Input label={phraseLabel} {...phraseFieldProps} />\n          ))}\n        {requirePassword && (\n          <Input\n            // The phrase field takes the ref when both are there — it comes first.\n            ref={phrase === undefined ? firstFieldRef : undefined}\n            type=\"password\"\n            autoComplete=\"current-password\"\n            label={labels.password}\n            value={password}\n            readOnly={busy}\n            onChange={(e) => setPassword(e.target.value)}\n          />\n        )}\n        <div className=\"flex flex-wrap gap-2\">\n          <Button id={cancelId} type=\"button\" variant=\"ghost\" disabled={busy} onClick={() => setArmed(false)}>\n            {labels.cancel}\n          </Button>\n          <Button\n            type=\"submit\"\n            variant={tone === \"warning\" ? \"primary\" : \"danger\"}\n            disabled={!canConfirm}\n            aria-busy={busy || undefined}\n          >\n            {busy && <Spinner label={null} className=\"h-4 w-4\" />}\n            {confirmLabel ?? labels.confirm}\n          </Button>\n        </div>\n      </form>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/danger-confirm.tsx"],"sourcesContent":["import { useCallback, useEffect, useId, useRef, useState } from \"react\";\nimport type { ChangeEvent, ComponentPropsWithoutRef, FormEvent, ReactNode, Ref } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { Button, Input, Label, Spinner } from \"./ui\";\nimport { Tooltip } from \"./tooltip\";\n\n/**\n * How typed text is compared with the text it has to repeat — shared by\n * `DangerConfirm`'s `phraseMatch` and `useConfirm`'s `typedMatch`.\n *\n * - `\"trim\"` ignores spaces around the typed text — a phone keyboard's autocomplete\n *   likes to add one. Case counts: \"delete\" is not \"DELETE\".\n * - `\"exact\"` compares character for character, spaces included.\n * - `\"caseless\"` trims AND ignores case: for an e-mail address, whose domain is\n *   case-insensitive and whose local part every real mail server treats so. Both apps'\n *   \"type the account's address\" rules (keksdose's `TYPE_EMAIL`, Kurvenschmiede's\n *   `TypedConfirm`) compared `trim().toLowerCase()`, and a capital the user's keyboard\n *   put at the start must not make the right row look like the wrong one.\n */\nexport type TypedMatch = \"trim\" | \"exact\" | \"caseless\";\n\n/** Whether `typed` repeats `target` under `mode` — see {@link TypedMatch}. Exported for\n *  a caller that draws its own field (a dialog that also picks a recipient) and wants\n *  the same rule as the kit's. */\nexport function typedMatches(typed: string, target: string, mode: TypedMatch = \"trim\"): boolean {\n  if (mode === \"exact\") return typed === target;\n  if (mode === \"trim\") return typed.trim() === target;\n  // `toLowerCase`, not `toLocaleLowerCase`: the comparison must not change with the\n  // reader's locale (a Turkish dotless i would otherwise fail an ASCII address).\n  return typed.trim().toLowerCase() === target.trim().toLowerCase();\n}\n\n/**\n * Busy-while-a-promise-runs, for an action that MAY return one: `run(result, onResolved)`\n * marks the caller pending until `result` settles, calls `onResolved` if it fulfilled,\n * and only clears the flag if it rejected — the caller shows why and the user retries.\n * Nothing runs after unmount. Shared by `DangerConfirm` and `ReauthDialog`, whose\n * contract is the same: resolve = done, reject = stay put.\n *\n * @internal\n */\nexport function usePromisePending() {\n  const [pending, setPending] = useState(false);\n  const mounted = useRef(true);\n  useEffect(() => {\n    mounted.current = true;\n    return () => {\n      mounted.current = false;\n    };\n  }, []);\n  const run = useCallback((result: unknown, onResolved: () => void): boolean => {\n    if (!result || typeof (result as Promise<unknown>).then !== \"function\") return false;\n    setPending(true);\n    (result as Promise<unknown>).then(\n      () => {\n        if (!mounted.current) return;\n        setPending(false);\n        onResolved();\n      },\n      () => {\n        if (mounted.current) setPending(false);\n      },\n    );\n    return true;\n  }, []);\n  return { pending, run };\n}\n\n/**\n * The \"prove it is you\" field: a password input the browser's password manager fills\n * with the CURRENT password (`autocomplete=\"current-password\"`), never offers to\n * generate a new one for. `readOnly` rather than `disabled` while busy: disabling the\n * field that has focus (Enter was pressed in it) drops focus to <body>.\n *\n * @internal DangerConfirm's field. ReauthDialog spells it out with the field's own\n * `error`, which keeps the `<input>` mounted while its message comes and goes.\n */\nexport function CurrentPasswordInput({\n  inputRef,\n  label,\n  value,\n  onValueChange,\n  busy,\n  invalid,\n  describedBy,\n}: {\n  inputRef?: Ref<HTMLInputElement>;\n  label: string;\n  value: string;\n  onValueChange: (value: string) => void;\n  busy: boolean;\n  invalid?: boolean;\n  describedBy?: string;\n}) {\n  return (\n    <Input\n      ref={inputRef}\n      type=\"password\"\n      autoComplete=\"current-password\"\n      label={label}\n      value={value}\n      readOnly={busy}\n      invalid={invalid}\n      aria-describedby={describedBy}\n      onChange={(e) => onValueChange(e.target.value)}\n    />\n  );\n}\n\n/**\n * Every string the tile renders — the `dangerConfirm` namespace of\n * `<UiKitProvider labels>`, overridable per instance through `labels`. The arm and\n * confirm buttons are usually worded per action (\"Delete budget\"), which is what the\n * `armLabel` / `confirmLabel` props are for; these are the fallbacks.\n */\nexport interface DangerConfirmLabels {\n  /** The button that arms the tile. */\n  arm: string;\n  /** The button that runs the action once the guards are satisfied. */\n  confirm: string;\n  cancel: string;\n  /** The warning above the fields, when no `prompt` is given. */\n  prompt: string;\n  /** Label of the password field (`requirePassword`). */\n  password: string;\n  /** Label of the type-to-confirm field. A FUNCTION of the phrase by default, like\n   *  every message that carries a value: where the phrase sits in the sentence moves\n   *  with the language. A plain STRING is taken as the finished label — for an app\n   *  whose catalogue already words it (\"Type DELETE to confirm\") and would otherwise\n   *  wrap it as `() => label`. */\n  phrase: string | ((phrase: string) => string);\n  /** Placeholder of the type-to-confirm field — a string, or a function of the\n   *  phrase (`(p) => p` echoes it). Optional and unset by default: the field keeps its\n   *  floating label, as before. Given, the label moves ABOVE the field (a floating\n   *  label occupies the empty field, which is exactly where a placeholder shows) and\n   *  the placeholder fills the field. An empty string means none. */\n  phrasePlaceholder?: string | ((phrase: string) => string);\n}\n\n/** `satisfies` rather than a type annotation, so `DEFAULT_DANGER_CONFIRM_LABELS.phrase`\n *  stays callable for a caller that composes its own label from it. */\nexport const DEFAULT_DANGER_CONFIRM_LABELS = {\n  arm: \"Delete…\",\n  confirm: \"Delete\",\n  cancel: \"Cancel\",\n  prompt: \"This cannot be undone.\",\n  password: \"Password\",\n  phrase: (phrase: string) => `Type “${phrase}” to confirm`,\n} satisfies DangerConfirmLabels;\n\nexport interface DangerConfirmProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  /**\n   * Runs the action, with the entered password when `requirePassword` is on.\n   *\n   * Return a promise and the tile manages itself: busy until it settles, disarmed\n   * (fields wiped) when it resolves, still armed when it rejects — so the user can\n   * correct a wrong password and retry. The rejection is not swallowed for you to\n   * miss: handle it (and show why) in the caller, as with any mutation.\n   */\n  onConfirm: (password?: string) => void | Promise<unknown>;\n  /** Show a password field; confirm stays disabled until it is filled. */\n  requirePassword?: boolean;\n  /** Show a \"type <phrase> to confirm\" field; confirm stays disabled until the field\n   *  matches (case-sensitive; surrounding spaces ignored unless `phraseMatch=\"exact\"`). */\n  phrase?: string;\n  /**\n   * How the typed text is compared with `phrase`. `\"trim\"` (default) ignores spaces\n   * around it — a phone keyboard's autocomplete likes to add one. `\"exact\"` compares\n   * character for character, spaces included, for an app whose contract is \"type\n   * exactly this\". `\"caseless\"` (0.18) also ignores case — for a phrase that is an\n   * e-mail address (keksdose's \"type the user's address\" admin rule). See\n   * {@link TypedMatch}.\n   */\n  phraseMatch?: TypedMatch;\n  /** The warning above the fields. Defaults to `labels.prompt`. */\n  prompt?: ReactNode;\n  /** `\"danger\"` (default) for what cannot be undone; `\"warning\"` for what can, at a\n   *  cost (loading demo data over your own). Colours the prompt and the confirm. */\n  tone?: \"danger\" | \"warning\";\n  /** Visible text of the arm button; defaults to `labels.arm`. */\n  armLabel?: ReactNode;\n  /** Visible text of the confirm button; defaults to `labels.confirm`. */\n  confirmLabel?: ReactNode;\n  /** The action is running: confirm shows a spinner and nothing can be pressed. For a\n   *  caller that tracks the mutation itself (a `useMutation`'s `isPending`); a\n   *  promise returned from `onConfirm` does the same on its own. */\n  busy?: boolean;\n  /** The arm button is disabled. */\n  disabled?: boolean;\n  /**\n   * Why the action is not available — a read-only demo, a write lock, a missing\n   * permission. Disables the arm button like `disabled`, and SAYS so: the sentence is\n   * shown under the button and attached to it with `aria-describedby`, and the button\n   * stays focusable (`aria-disabled`) so a keyboard user can land on it and hear why.\n   *\n   * On the ARM button rather than the confirm: arming asks for a password, and asking\n   * for a password for a write that can never land is the worse of the two.\n   */\n  lockedReason?: ReactNode;\n  /** Controlled armed state. The parent can then collapse the tile from a mutation's\n   *  own `onSuccess` without returning a promise. */\n  armed?: boolean;\n  /** Called with the next armed state — on arm, cancel, and a resolved `onConfirm`. */\n  onArmedChange?: (armed: boolean) => void;\n  /** User-facing strings; see {@link DangerConfirmLabels}. */\n  labels?: Partial<DangerConfirmLabels>;\n}\n\n/**\n * An \"arm → confirm\" tile for destructive actions: one button, which expands into a\n * warning, an optional password field, an optional type-to-confirm field and a\n * confirm that stays disabled until every guard is satisfied.\n *\n * Keksdose hand-rolled it three times (load demo data, wipe everything, reset a\n * budget) and then as `shared/components/danger-confirm.tsx`; the only app-specific\n * part was its write-lock hook, which is `lockedReason` here.\n *\n * The fields are a `<form>`, so Enter confirms once the guards allow it. They are\n * wiped every time the tile disarms — a password must not sit in a collapsed tile.\n * Arming moves focus to the first field (or Cancel, when there is none — never to the\n * destructive button itself), and disarming moves it back to the arm button, so the\n * keyboard user is never left on an element that just vanished.\n */\nexport function DangerConfirm({\n  onConfirm,\n  requirePassword,\n  phrase,\n  phraseMatch = \"trim\",\n  prompt,\n  tone = \"danger\",\n  armLabel,\n  confirmLabel,\n  busy: busyProp,\n  disabled,\n  lockedReason,\n  armed: armedProp,\n  onArmedChange,\n  labels: labelsProp,\n  className,\n  ...rest\n}: DangerConfirmProps) {\n  const labels = useKitLabels(\"dangerConfirm\", DEFAULT_DANGER_CONFIRM_LABELS, labelsProp);\n  const [armedState, setArmedState] = useState(false);\n  const armed = armedProp ?? armedState;\n  const [password, setPassword] = useState(\"\");\n  const [typed, setTyped] = useState(\"\");\n  const { pending, run } = usePromisePending();\n  const busy = Boolean(busyProp) || pending;\n  // `readOnly` rather than `disabled` on the fields while busy: disabling the field\n  // that has focus (Enter was pressed in it) drops focus to <body>.\n  const promptId = useId();\n  const reasonId = useId();\n  const phraseFieldId = useId();\n\n  // The kit's Button takes no ref, so the two buttons focus is moved to are found by id.\n  const armId = useId();\n  const cancelId = useId();\n  const firstFieldRef = useRef<HTMLInputElement>(null);\n  // Focus moves only after a transition — never on mount, so a tile that renders armed\n  // (controlled) does not take the page's focus merely by existing.\n  const moveFocus = useRef(false);\n\n  // A disarm from anywhere (cancel, a resolved confirm, the parent) wipes the fields.\n  // During render, like NumberField's draft, so no frame shows a collapsed tile that\n  // still holds a password.\n  const [wasArmed, setWasArmed] = useState(armed);\n  if (wasArmed !== armed) {\n    setWasArmed(armed);\n    if (!armed) {\n      setPassword(\"\");\n      setTyped(\"\");\n    }\n  }\n\n  const prevArmed = useRef(armed);\n  useEffect(() => {\n    const changed = prevArmed.current !== armed;\n    prevArmed.current = armed;\n    const byUser = moveFocus.current;\n    moveFocus.current = false;\n    if (!changed) return;\n    if (armed) {\n      if (byUser) (firstFieldRef.current ?? document.getElementById(cancelId))?.focus();\n      return;\n    }\n    // A controlled parent collapsing the tile from its own `onSuccess` did not go\n    // through `setArmed`; if focus went down with the form, bring it back too.\n    const lost = document.activeElement === null || document.activeElement === document.body;\n    if (byUser || lost) document.getElementById(armId)?.focus();\n  }, [armed, armId, cancelId]);\n\n  const setArmed = (next: boolean) => {\n    moveFocus.current = true;\n    if (armedProp === undefined) setArmedState(next);\n    onArmedChange?.(next);\n  };\n\n  const locked = lockedReason !== undefined && lockedReason !== null && lockedReason !== false && lockedReason !== \"\";\n  const passwordOk = !requirePassword || password !== \"\";\n  const phraseOk = phrase === undefined || typedMatches(typed, phrase, phraseMatch);\n  const canConfirm = passwordOk && phraseOk && !busy;\n\n  const submit = (e: FormEvent) => {\n    e.preventDefault();\n    if (!canConfirm) return;\n    // Disarms when it resolves; a rejection leaves it armed, fields kept: the caller\n    // shows why, the user retries.\n    run(onConfirm(requirePassword ? password : undefined), () => setArmed(false));\n  };\n\n  const phrasePlaceholder =\n    phrase === undefined || labels.phrasePlaceholder === undefined\n      ? undefined\n      : typeof labels.phrasePlaceholder === \"function\"\n        ? labels.phrasePlaceholder(phrase)\n        : labels.phrasePlaceholder;\n\n  const phraseLabel =\n    phrase === undefined ? \"\" : typeof labels.phrase === \"function\" ? labels.phrase(phrase) : labels.phrase;\n  const phraseFieldProps = {\n    ref: firstFieldRef,\n    value: typed,\n    autoComplete: \"off\",\n    autoCapitalize: \"off\",\n    spellCheck: false,\n    readOnly: busy,\n    onChange: (e: ChangeEvent<HTMLInputElement>) => setTyped(e.target.value),\n  };\n\n  const toneText = tone === \"warning\" ? \"text-[var(--warning)]\" : \"text-[var(--danger)]\";\n\n  if (!armed) {\n    const arm = (\n      <Button\n        id={armId}\n        type=\"button\"\n        variant={tone === \"warning\" ? \"secondary\" : \"danger\"}\n        disabled={disabled}\n        aria-disabled={locked || undefined}\n        aria-describedby={locked ? reasonId : undefined}\n        onClick={() => {\n          if (!locked) setArmed(true);\n        }}\n        className=\"aria-disabled:cursor-not-allowed aria-disabled:opacity-50\"\n      >\n        {armLabel ?? labels.arm}\n      </Button>\n    );\n    return (\n      <div {...rest} className={cn(\"space-y-1\", className)}>\n        {locked ? (\n          // The reason on the button itself too, where the pointer that tried it is —\n          // the line below can sit out of view in a long settings card. Portalled, so\n          // a card that scrolls neither clips it nor grows by it.\n          //\n          // The button in a FRAGMENT on purpose: Tooltip clones an element child to\n          // add the bubble to its `aria-describedby`, and the button is already\n          // described by the visible line below — the same sentence twice, read out\n          // on every focus. A fragment is left as it is, so the bubble stays visual.\n          <Tooltip label={lockedReason} portal>\n            <>{arm}</>\n          </Tooltip>\n        ) : (\n          arm\n        )}\n        {locked && (\n          <p id={reasonId} className=\"text-xs text-[var(--text-muted)]\">\n            {lockedReason}\n          </p>\n        )}\n      </div>\n    );\n  }\n\n  return (\n    <div {...rest} className={cn(\"space-y-2\", className)}>\n      <form\n        className=\"space-y-2\"\n        aria-describedby={promptId}\n        aria-busy={busy || undefined}\n        onSubmit={submit}\n        noValidate\n      >\n        <p id={promptId} className={cn(\"text-xs font-medium\", toneText)}>\n          {prompt ?? labels.prompt}\n        </p>\n        {phrase !== undefined &&\n          (phrasePlaceholder ? (\n            // A static label above, so the placeholder has the empty field to itself.\n            <div className=\"space-y-1.5\">\n              <Label htmlFor={phraseFieldId}>{phraseLabel}</Label>\n              <Input id={phraseFieldId} placeholder={phrasePlaceholder} {...phraseFieldProps} />\n            </div>\n          ) : (\n            <Input label={phraseLabel} {...phraseFieldProps} />\n          ))}\n        {requirePassword && (\n          <CurrentPasswordInput\n            // The phrase field takes the ref when both are there — it comes first.\n            inputRef={phrase === undefined ? firstFieldRef : undefined}\n            label={labels.password}\n            value={password}\n            busy={busy}\n            onValueChange={setPassword}\n          />\n        )}\n        <div className=\"flex flex-wrap gap-2\">\n          <Button id={cancelId} type=\"button\" variant=\"ghost\" disabled={busy} onClick={() => setArmed(false)}>\n            {labels.cancel}\n          </Button>\n          <Button\n            type=\"submit\"\n            variant={tone === \"warning\" ? \"primary\" : \"danger\"}\n            disabled={!canConfirm}\n            aria-busy={busy || undefined}\n          >\n            {busy && <Spinner label={null} className=\"h-4 w-4\" />}\n            {confirmLabel ?? labels.confirm}\n          </Button>\n        </div>\n      </form>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/data-table-cells.d.ts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
 import { DataTableLabels } from './data-table-labels.js';
-import { b as DataTableColumn } from '../data-table-CfVXtCeG.js';
+import { b as DataTableColumn } from '../data-table-3mi2R3so.js';
 import './data-table-sort.js';
 import './swipeable-row.js';
 

package/dist/components/data-table-filter-popover.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { b as DataTableColumn, f as FilterValue } from '../data-table-CfVXtCeG.js';
+import { b as DataTableColumn, f as FilterValue } from '../data-table-3mi2R3so.js';
 import { DataTableLabels } from './data-table-labels.js';
 import './data-table-sort.js';
 import './swipeable-row.js';

package/dist/components/data-table-filters.d.ts

@@ -1,4 +1,4 @@
-export { C as ColumnFilter, f as FilterValue, j as dateFilter, k as decodeFilterValue, l as decodeFilterValueOfType, m as defaultFilterState, n as encodeFilterValue, o as filterHref, p as isFilterActive, q as numberFilter, s as resolveFilter, t as rowMatches, u as selectFilter, v as textFilter } from '../data-table-CfVXtCeG.js';
+export { C as ColumnFilter, f as FilterValue, j as dateFilter, k as decodeFilterValue, l as decodeFilterValueOfType, m as defaultFilterState, n as encodeFilterValue, o as filterHref, p as isFilterActive, q as numberFilter, s as resolveFilter, t as rowMatches, u as selectFilter, v as textFilter } from '../data-table-3mi2R3so.js';
 import 'react';
 import './data-table-sort.js';
 import './swipeable-row.js';

package/dist/components/data-table.d.ts

@@ -1,5 +1,5 @@
 import 'react';
-export { D as DataTable, x as DataTableCellProps, a as DataTableChrome, b as DataTableColumn, c as DataTableDensity, y as DataTableHeadProps, d as DataTableProps, e as DataTableRowAction, F as FilterState, M as MobileSwipeActions, S as ServerPagination } from '../data-table-CfVXtCeG.js';
+export { D as DataTable, x as DataTableCellProps, a as DataTableChrome, b as DataTableColumn, c as DataTableDensity, y as DataTableHeadProps, d as DataTableProps, e as DataTableRowAction, F as FilterState, M as MobileSwipeActions, S as ServerPagination } from '../data-table-3mi2R3so.js';
 export { SortState } from './data-table-sort.js';
 import './swipeable-row.js';
 import './data-table-labels.js';

package/dist/components/data-table.js

@@ -1,7 +1,7 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createElement } from "react";
-import { Fragment as Fragment2, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment2, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import {
   ArrowDown,
@@ -87,6 +87,7 @@ function logicalAlign(className) {
     )
   );
 }
+const FOOTER_CELL = "sticky bottom-0 z-10 bg-[var(--bg-surface-2)] shadow-[inset_0_2px_0_var(--border-strong)]";
 const END_ALIGN = /(^|\s)text-end(?=\s|$)/;
 function cleanAttrs(attrs) {
   if (!attrs) return void 0;
@@ -180,6 +181,7 @@ function DataTable({
   locale: localeProp,
   storageKeyPrefix = DEFAULT_PERSIST_PREFIX,
   mobileExpandAsDialog = false,
+  mobileDialogBackCloses = true,
   mobileGroupBy,
   mobileGroupLabel,
   mobileCard,
@@ -194,7 +196,9 @@ function DataTable({
   frame = true,
   className,
   rowActions,
-  toolbar
+  toolbar,
+  footerLabel,
+  footer: footerProp
 }) {
   const compact = density === "compact";
   const minimal = chrome === "minimal";
@@ -435,7 +439,7 @@ function DataTable({
     if (!table) return [th];
     return [
       th,
-      ...Array.from(table.querySelectorAll("tbody [data-col]")).filter(
+      ...Array.from(table.querySelectorAll("tbody [data-col], tfoot [data-col]")).filter(
         (el) => el.dataset.col === key
       )
     ];
@@ -517,6 +521,11 @@ function DataTable({
   const visibleCount = visibleColumns.length;
   const totalCount = columns.length;
   const totalColSpan = visibleCount + (selection ? 1 : 0);
+  const hasFooterColumns = columns.some((c) => c.footer);
+  const showFooter = footerProp !== false && hasFooterColumns && sorted.length > 0;
+  const footerLabelCol = showFooter ? visibleColumns.find((c) => !c.footer && c.key !== ROW_ACTIONS_KEY) ?? visibleColumns[0] : void 0;
+  const footerValue = (col) => col.footer?.(sorted, slice);
+  const footerHeadingId = useId();
   const columnsCountLabel = rowActions ? labels.columnsCount(visibleCount - 1, totalCount - 1) : labels.columnsCount(visibleCount, totalCount);
   const isMdUp = useMediaQuery("(min-width: 768px)", true);
   const mobileColumns = visibleColumns.filter((c) => !c.mobileHidden);
@@ -782,6 +791,34 @@ function DataTable({
               ]
             }
           ),
+          showFooter && mobileColumns.some((c) => c.footer) && /* @__PURE__ */ jsxs(
+            "section",
+            {
+              "data-table-footer": "",
+              "aria-labelledby": footerLabel != null ? footerHeadingId : void 0,
+              className: cn(
+                "border-t-2 border-[var(--border-strong)] bg-[var(--bg-surface-2)]",
+                compact ? "px-3 py-2" : "px-4 py-3",
+                isLoading && "opacity-60 transition-opacity"
+              ),
+              children: [
+                footerLabel != null && /* @__PURE__ */ jsx("div", { id: footerHeadingId, className: cn("font-semibold", compact ? "mb-1 text-sm" : "mb-2"), children: footerLabel }),
+                /* @__PURE__ */ jsx(
+                  "dl",
+                  {
+                    className: cn(
+                      "grid grid-cols-[auto_1fr] gap-x-3",
+                      compact ? "gap-y-0.5 text-xs" : "gap-y-1 text-sm"
+                    ),
+                    children: mobileColumns.filter((c) => c.footer).map((col) => /* @__PURE__ */ jsxs(Fragment2, { children: [
+                      /* @__PURE__ */ jsx("dt", { className: "self-center text-xs uppercase tracking-wide text-[var(--text-muted)]", children: col.header }),
+                      /* @__PURE__ */ jsx("dd", { className: "min-w-0 self-center font-semibold text-[var(--text-primary)]", children: footerValue(col) })
+                    ] }, col.key))
+                  }
+                )
+              ]
+            }
+          ),
           isServer && /* @__PURE__ */ jsx(
             Pagination,
             {
@@ -803,6 +840,7 @@ function DataTable({
               onClose: closeDialog,
               closeLabel: labels.close,
               header: mobileDialogRow ? mobilePrimaryCol?.cell(mobileDialogRow) : null,
+              backCloses: mobileDialogBackCloses,
               children: mobileDialogContent
             }
           )
@@ -1102,6 +1140,58 @@ function DataTable({
                             ) })
                           ]
                         }
+                      ),
+                      showFooter && // Sticky to the scroller's bottom edge for the same reason the header is
+                      // sticky to its top: the body scrolls inside a bounded wrapper, and a
+                      // total that scrolls away with the last row is a total nobody sees on a
+                      // 25-row page. Each cell carries its own background and its own `sticky`,
+                      // as the header's do — `position: sticky` on a `<tfoot>` is not reliable.
+                      /* @__PURE__ */ jsx(
+                        "tfoot",
+                        {
+                          "data-table-footer": "",
+                          className: cn(
+                            "font-semibold text-[var(--text-primary)]",
+                            isLoading && "opacity-60 transition-opacity"
+                          ),
+                          children: /* @__PURE__ */ jsxs("tr", { children: [
+                            selection && /* @__PURE__ */ jsx(
+                              "td",
+                              {
+                                className: cn(
+                                  FOOTER_CELL,
+                                  compact ? "w-8 px-2 py-1" : "w-10 px-3 py-2"
+                                )
+                              }
+                            ),
+                            visibleColumns.map((col) => {
+                              const width = widths[col.key];
+                              const pinned = width ? { width, minWidth: width, maxWidth: width } : void 0;
+                              const isLabel = col === footerLabelCol;
+                              const Cell = isLabel ? "th" : "td";
+                              return /* @__PURE__ */ jsx(
+                                Cell,
+                                {
+                                  "data-col": col.key,
+                                  scope: isLabel ? "row" : void 0,
+                                  style: pinned,
+                                  className: cn(
+                                    FOOTER_CELL,
+                                    "align-top",
+                                    compact ? "px-2 py-1" : "px-3 py-2",
+                                    width && "overflow-hidden text-ellipsis",
+                                    // A `<th>` centres by default; the label reads from the start
+                                    // like the cells above it, unless the column says otherwise.
+                                    isLabel && "text-start",
+                                    logicalAlign(col.className)
+                                  ),
+                                  children: col.footer ? footerValue(col) : isLabel ? footerLabel : null
+                                },
+                                col.key
+                              );
+                            })
+                          ] })
+                        }
                       )
                     ]
                   }