@eifi1/ui-kit 0.4.0

package/dist/components/number-input.js

@@ -0,0 +1,114 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useRef, useState } from "react";
+import { CalculatorButton } from "./calculator.js";
+import { NumberPadSheet } from "./numpad-sheet.js";
+import { FIELD_BASE, FIELD_DISPLAY, FIELD_INVALID, FLOATING_INPUT_CLASS, FloatingField, PHONE_QUERY } from "./ui.js";
+import { cn } from "../lib/cn.js";
+import { commitExpression, sanitizeLive } from "../lib/calc.js";
+import { useMediaQuery } from "../hooks/use-media-query.js";
+function NumberInput({
+  value,
+  onChange,
+  onCommit,
+  label,
+  ariaLabel,
+  labels,
+  placeholder,
+  disabled,
+  autoFocus,
+  className,
+  inputClassName,
+  id,
+  calculator = true,
+  variant = "field",
+  hint,
+  invalid,
+  suffix
+}) {
+  const generatedId = useId();
+  const fieldId = id ?? generatedId;
+  const labelled = label !== void 0;
+  const isMobile = useMediaQuery(PHONE_QUERY, false);
+  const asDisplay = isMobile && variant === "display";
+  const showCalc = calculator && !disabled && !isMobile;
+  const [focused, setFocused] = useState(false);
+  const showNumpad = isMobile && !disabled && focused;
+  const inputRef = useRef(null);
+  const commit = () => {
+    const next = commitExpression(value);
+    if (next !== value) onChange(next);
+    onCommit?.(next);
+  };
+  const onKeyDown = (e) => {
+    if (e.key === "Enter") commit();
+  };
+  return /* @__PURE__ */ jsxs(
+    FloatingField,
+    {
+      className: cn("w-full", className),
+      htmlFor: fieldId,
+      label,
+      srOnlyLabel: asDisplay,
+      hint,
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: inputRef,
+            id: fieldId,
+            "aria-label": ariaLabel,
+            type: "text",
+            inputMode: isMobile ? "none" : "decimal",
+            autoComplete: "off",
+            autoFocus,
+            disabled,
+            placeholder: asDisplay ? placeholder ?? "0" : labelled ? " " : placeholder,
+            value,
+            onChange: (e) => onChange(sanitizeLive(e.target.value)),
+            onFocus: () => setFocused(true),
+            onBlur: () => {
+              commit();
+              setFocused(false);
+            },
+            onKeyDown,
+            "aria-invalid": invalid || void 0,
+            className: cn(
+              asDisplay ? cn(FIELD_DISPLAY, "text-4xl font-semibold leading-tight tracking-tight tabular-nums") : labelled ? FLOATING_INPUT_CLASS : FIELD_BASE,
+              inputClassName,
+              showCalc && suffix !== void 0 ? "pr-16" : showCalc ? "pr-9" : suffix !== void 0 ? "pr-8" : void 0,
+              invalid && FIELD_INVALID
+            )
+          }
+        ),
+        (showCalc || suffix !== void 0) && // One flex track for both, so the unit and the calculator sit side by side
+        // instead of stacking on the same corner — AmountInput's arrangement, which
+        // has carried a chip and a calculator together since #430.
+        /* @__PURE__ */ jsxs("div", { className: "absolute inset-y-0 right-0 flex items-center", children: [
+          showCalc && /* @__PURE__ */ jsx(
+            CalculatorButton,
+            {
+              value,
+              onChange,
+              className: "self-stretch px-2.5",
+              ariaLabel: labels?.calculatorTrigger,
+              labels: labels?.calculator
+            }
+          ),
+          suffix !== void 0 && /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              className: "pointer-events-none pr-3 text-xs font-medium text-slate-500 dark:text-slate-400",
+              children: suffix
+            }
+          )
+        ] }),
+        showNumpad && /* @__PURE__ */ jsx(NumberPadSheet, { value, onChange, onDone: () => inputRef.current?.blur(), label })
+      ]
+    }
+  );
+}
+export {
+  NumberInput
+};
+//# sourceMappingURL=number-input.js.map

package/dist/components/number-input.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/number-input.tsx"],"sourcesContent":["import { useId, useRef, useState } from \"react\";\nimport type { KeyboardEvent, ReactNode } from \"react\";\nimport { CalculatorButton, type CalculatorButtonLabels } from \"./calculator\";\nimport { NumberPadSheet } from \"./numpad-sheet\";\nimport { FIELD_BASE, FIELD_DISPLAY, FIELD_INVALID, FLOATING_INPUT_CLASS, FloatingField, PHONE_QUERY } from \"./ui\";\nimport { cn } from \"../lib/cn\";\nimport { commitExpression, sanitizeLive } from \"../lib/calc\";\nimport { useMediaQuery } from \"../hooks/use-media-query\";\n\ninterface NumberInputProps {\n  value: string;\n  /** Fired on every keystroke with the raw text (comma → dot, operators kept so\n   * a typed expression survives). */\n  onChange: (value: string) => void;\n  /** Fired on blur/Enter with the *evaluated* value — use this for save-on-blur\n   * fields so the save always sees the resolved number, never \"10+5\". */\n  onCommit?: (value: string) => void;\n  label?: ReactNode;\n  ariaLabel?: string;\n  /** Names for the calculator this field renders — its trigger, and the controls\n   *  inside the popover. English defaults, so a host that does not translate is\n   *  unaffected. */\n  labels?: { calculatorTrigger?: string; calculator?: CalculatorButtonLabels };\n  placeholder?: string;\n  disabled?: boolean;\n  autoFocus?: boolean;\n  /** Wrapper class. */\n  className?: string;\n  /** Overrides the input's own styling (merged after the field base). */\n  inputClassName?: string;\n  id?: string;\n  /** Show the calculator-popover trigger (default true). Set false for fields in\n   * an ephemeral close-on-blur editor, where clicking the icon would blur away\n   * and tear the editor down before the popover could open — inline typing\n   * (e.g. \"200+50\" → Enter) still evaluates there. */\n  calculator?: boolean;\n  /** {@link FIELD_DISPLAY} — on a phone, the figure at display size with the field\n   *  chrome dropped. The currency-free half of the same treatment `AmountInput`\n   *  carries, for a dialog whose whole point is the one number (a budget goal's\n   *  target); not for a field among many, and never for the compact inline\n   *  editors this control also serves. */\n  variant?: \"field\" | \"display\";\n  /** A {@link FieldHint} \"?\" on the label's own line, beside the label rather\n   *  than at the far end of the strip — the far end is where the calculator\n   *  lives, and a hint placed there landed on top of it (steering-design\n   *  feedback #48). */\n  hint?: ReactNode;\n  /** Required and unanswered — {@link FIELD_INVALID}. See {@link Input}'s `invalid`. */\n  invalid?: boolean;\n  /**\n   * A static unit shown at the field's right edge — \"%\", \"kg\", \"km/h\".\n   *\n   * The read-out half of {@link AmountInput}'s currency chip, and it exists for the\n   * same reason that one does: a unit belongs to the FIELD, not to the text, so\n   * typing it is a way to get it into the value. Keksdose had a percentage spelled\n   * three different ways across three screens — `<Input type=\"number\" step=\"0.01\">`\n   * for a loan rate, `step=\"0.1\"` for a tax rate, `inputMode=\"decimal\"` for a VAT\n   * rate — and none of the three showed a \"%\" anywhere near the box, so what the\n   * digits meant was a question the label alone had to answer.\n   *\n   * `aria-hidden`, like the currency read-out: it is a property of the field that\n   * the label already names (\"Interest rate (%)\"), and announcing it again after\n   * every value reads as part of the number.\n   */\n  suffix?: ReactNode;\n}\n\n/**\n * A numeric text field with a built-in calculator: type a calculation straight\n * in (e.g. \"12+5\", evaluated on blur/Enter) or click the trailing calculator\n * icon for a keypad. String `value`/`onChange` contract, mirroring\n * {@link AmountInput} — the currency-free counterpart for budgets, goals,\n * invoice totals and split lines.\n */\nexport function NumberInput({\n  value,\n  onChange,\n  onCommit,\n  label,\n  ariaLabel,\n  labels,\n  placeholder,\n  disabled,\n  autoFocus,\n  className,\n  inputClassName,\n  id,\n  calculator = true,\n  variant = \"field\",\n  hint,\n  invalid,\n  suffix,\n}: NumberInputProps) {\n  const generatedId = useId();\n  const fieldId = id ?? generatedId;\n  const labelled = label !== undefined;\n  // On phones we suppress the OS keyboard (inputMode=\"none\" below) for our own\n  // calculator numpad, so the desktop popover trigger is hidden (feedback #334).\n  const isMobile = useMediaQuery(PHONE_QUERY, false);\n  const asDisplay = isMobile && variant === \"display\";\n  const showCalc = calculator && !disabled && !isMobile;\n  const [focused, setFocused] = useState(false);\n  // On mobile, focusing opens the numpad bottom sheet instead of the native\n  // keyboard (#334); the ref lets its \"Done\" blur → commit + close.\n  const showNumpad = isMobile && !disabled && focused;\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const commit = () => {\n    const next = commitExpression(value);\n    if (next !== value) onChange(next);\n    onCommit?.(next);\n  };\n\n  const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === \"Enter\") commit();\n  };\n\n  return (\n    <FloatingField\n      className={cn(\"w-full\", className)}\n      htmlFor={fieldId}\n      label={label}\n      srOnlyLabel={asDisplay}\n      hint={hint}\n    >\n      <input\n        ref={inputRef}\n        id={fieldId}\n        aria-label={ariaLabel}\n        type=\"text\"\n        // Mobile: suppress the OS keyboard so the numpad sheet owns entry (field\n        // keeps focus/caret); desktop keeps the native decimal keypad.\n        inputMode={isMobile ? \"none\" : \"decimal\"}\n        autoComplete=\"off\"\n        autoFocus={autoFocus}\n        disabled={disabled}\n        // Display mode has no floating label to feed the blank-placeholder trick,\n        // and an empty borderless figure shows nothing — so it keeps whatever\n        // placeholder the caller gave, falling back to a zero to aim at.\n        placeholder={asDisplay ? (placeholder ?? \"0\") : labelled ? \" \" : placeholder}\n        value={value}\n        onChange={(e) => onChange(sanitizeLive(e.target.value))}\n        onFocus={() => setFocused(true)}\n        onBlur={() => {\n          commit();\n          setFocused(false);\n        }}\n        onKeyDown={onKeyDown}\n        aria-invalid={invalid || undefined}\n        // The right-padding sits last so it always wins over an inputClassName that\n        // sets its own px. Both trailing controls can be on at once, so the room\n        // they need is reserved together rather than by whichever happens to render:\n        // the calculator is ~36px and a short unit ~24px, and a field that reserved\n        // only one of them would let the digits run under the other.\n        className={cn(\n          asDisplay\n            ? cn(FIELD_DISPLAY, \"text-4xl font-semibold leading-tight tracking-tight tabular-nums\")\n            : labelled\n              ? FLOATING_INPUT_CLASS\n              : FIELD_BASE,\n          inputClassName,\n          showCalc && suffix !== undefined ? \"pr-16\" : showCalc ? \"pr-9\" : suffix !== undefined ? \"pr-8\" : undefined,\n          invalid && FIELD_INVALID,\n        )}\n      />\n      {(showCalc || suffix !== undefined) && (\n        // One flex track for both, so the unit and the calculator sit side by side\n        // instead of stacking on the same corner — AmountInput's arrangement, which\n        // has carried a chip and a calculator together since #430.\n        <div className=\"absolute inset-y-0 right-0 flex items-center\">\n          {showCalc && (\n            <CalculatorButton\n              value={value}\n              onChange={onChange}\n              className=\"self-stretch px-2.5\"\n              ariaLabel={labels?.calculatorTrigger}\n              labels={labels?.calculator}\n            />\n          )}\n          {suffix !== undefined && (\n            <span\n              aria-hidden\n              className=\"pointer-events-none pr-3 text-xs font-medium text-slate-500 dark:text-slate-400\"\n            >\n              {suffix}\n            </span>\n          )}\n        </div>\n      )}\n      {showNumpad && (\n        <NumberPadSheet value={value} onChange={onChange} onDone={() => inputRef.current?.blur()} label={label} />\n      )}\n    </FloatingField>\n  );\n}\n"],"mappings":"AA6HM,cA4CE,YA5CF;AA7HN,SAAS,OAAO,QAAQ,gBAAgB;AAExC,SAAS,wBAAqD;AAC9D,SAAS,sBAAsB;AAC/B,SAAS,YAAY,eAAe,eAAe,sBAAsB,eAAe,mBAAmB;AAC3G,SAAS,UAAU;AACnB,SAAS,kBAAkB,oBAAoB;AAC/C,SAAS,qBAAqB;AAmEvB,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AACF,GAAqB;AACnB,QAAM,cAAc,MAAM;AAC1B,QAAM,UAAU,MAAM;AACtB,QAAM,WAAW,UAAU;AAG3B,QAAM,WAAW,cAAc,aAAa,KAAK;AACjD,QAAM,YAAY,YAAY,YAAY;AAC1C,QAAM,WAAW,cAAc,CAAC,YAAY,CAAC;AAC7C,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAG5C,QAAM,aAAa,YAAY,CAAC,YAAY;AAC5C,QAAM,WAAW,OAAyB,IAAI;AAE9C,QAAM,SAAS,MAAM;AACnB,UAAM,OAAO,iBAAiB,KAAK;AACnC,QAAI,SAAS,MAAO,UAAS,IAAI;AACjC,eAAW,IAAI;AAAA,EACjB;AAEA,QAAM,YAAY,CAAC,MAAuC;AACxD,QAAI,EAAE,QAAQ,QAAS,QAAO;AAAA,EAChC;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,UAAU,SAAS;AAAA,MACjC,SAAS;AAAA,MACT;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,IAAI;AAAA,YACJ,cAAY;AAAA,YACZ,MAAK;AAAA,YAGL,WAAW,WAAW,SAAS;AAAA,YAC/B,cAAa;AAAA,YACb;AAAA,YACA;AAAA,YAIA,aAAa,YAAa,eAAe,MAAO,WAAW,MAAM;AAAA,YACjE;AAAA,YACA,UAAU,CAAC,MAAM,SAAS,aAAa,EAAE,OAAO,KAAK,CAAC;AAAA,YACtD,SAAS,MAAM,WAAW,IAAI;AAAA,YAC9B,QAAQ,MAAM;AACZ,qBAAO;AACP,yBAAW,KAAK;AAAA,YAClB;AAAA,YACA;AAAA,YACA,gBAAc,WAAW;AAAA,YAMzB,WAAW;AAAA,cACT,YACI,GAAG,eAAe,kEAAkE,IACpF,WACE,uBACA;AAAA,cACN;AAAA,cACA,YAAY,WAAW,SAAY,UAAU,WAAW,SAAS,WAAW,SAAY,SAAS;AAAA,cACjG,WAAW;AAAA,YACb;AAAA;AAAA,QACF;AAAA,SACE,YAAY,WAAW;AAAA;AAAA;AAAA,QAIvB,qBAAC,SAAI,WAAU,gDACZ;AAAA,sBACC;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA,WAAU;AAAA,cACV,WAAW,QAAQ;AAAA,cACnB,QAAQ,QAAQ;AAAA;AAAA,UAClB;AAAA,UAED,WAAW,UACV;AAAA,YAAC;AAAA;AAAA,cACC,eAAW;AAAA,cACX,WAAU;AAAA,cAET;AAAA;AAAA,UACH;AAAA,WAEJ;AAAA,QAED,cACC,oBAAC,kBAAe,OAAc,UAAoB,QAAQ,MAAM,SAAS,SAAS,KAAK,GAAG,OAAc;AAAA;AAAA;AAAA,EAE5G;AAEJ;","names":[]}

package/dist/components/numpad-sheet.d.ts

@@ -0,0 +1,45 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+/**
+ * A full calculator keypad rendered as a bottom sheet — the mobile counterpart to
+ * the desktop {@link CalculatorButton} popover, and the replacement for the old
+ * under-the-field operator bar (`MathKeys`, feedback #334).
+ *
+ * A native app (YNAB) can swap the system keyboard for its own keypad; a PWA
+ * cannot — but it CAN suppress the OS keyboard with `inputMode="none"` on the
+ * host field and paint its own keypad in the freed space. So the host input keeps
+ * real focus/caret/selection + the existing value/commit contract, while this
+ * sheet drives it: digits + operators + a live `= …` preview, evaluated through
+ * the shared {@link evaluateExpression} engine. Desktop is untouched (it keeps the
+ * native keyboard and the calculator popover); the host gates this to mobile.
+ *
+ * Buttons commit through the host's `onChange`/blur, so the sheet is stateless —
+ * the field text is the single source of truth. `onPointerDown` preventDefault on
+ * the root keeps the host input focused (caret stays, keyboard stays hidden) as
+ * the user taps keys; the buttons' `onClick` still fires.
+ */
+/** Screen-reader names for the pad itself and its three non-digit keys. */
+interface NumberPadSheetLabels {
+    pad?: string;
+    backspace?: string;
+    clear?: string;
+    equals?: string;
+}
+declare function NumberPadSheet({ value, onChange, onDone, label, labels, }: {
+    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;
+    /** Fired on "Done": the host blurs the input, which commits (evaluates) and
+     * unmounts the sheet via its existing blur handler. */
+    onDone: () => void;
+    /** Optional field label, echoed in the sheet header so the user still knows
+     * which field they're editing when the sheet covers it. */
+    label?: ReactNode;
+    /** Screen-reader names for the pad itself and its three non-digit keys. The
+     * digits and operators need none — their visible glyph IS the name. */
+    labels?: NumberPadSheetLabels;
+}): react.ReactPortal;
+
+export { NumberPadSheet, type NumberPadSheetLabels };

package/dist/components/numpad-sheet.js

@@ -0,0 +1,102 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+import { Delete } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { evaluateExpression, formatResult, sanitizeLive } from "../lib/calc.js";
+const PAD_KEYS = [
+  { kind: "ins", label: "7", ins: "7" },
+  { kind: "ins", label: "8", ins: "8" },
+  { kind: "ins", label: "9", ins: "9" },
+  { kind: "ins", label: "\xF7", ins: "\xF7", accent: true },
+  { kind: "ins", label: "4", ins: "4" },
+  { kind: "ins", label: "5", ins: "5" },
+  { kind: "ins", label: "6", ins: "6" },
+  { kind: "ins", label: "\xD7", ins: "\xD7", accent: true },
+  { kind: "ins", label: "1", ins: "1" },
+  { kind: "ins", label: "2", ins: "2" },
+  { kind: "ins", label: "3", ins: "3" },
+  { kind: "ins", label: "\u2212", ins: "-", accent: true },
+  { kind: "ins", label: ".", ins: "." },
+  { kind: "ins", label: "0", ins: "0" },
+  { kind: "back" },
+  { kind: "ins", label: "+", ins: "+", accent: true }
+];
+const PAD_BTN = "flex h-14 items-center justify-center rounded-lg text-lg font-medium transition-transform select-none focus:outline-none active:scale-[0.97]";
+const PAD_DIGIT = "bg-[var(--bg-surface-2)] text-[var(--text-primary)] active:bg-[var(--border)]";
+const PAD_ACCENT = "bg-[var(--border)] text-[var(--text-primary)] active:bg-[var(--bg-surface-2)]";
+function NumberPadSheet({
+  value,
+  onChange,
+  onDone,
+  label,
+  labels
+}) {
+  const result = evaluateExpression(value);
+  const preview = result !== null && formatResult(result) !== value.trim() ? `= ${formatResult(result)}` : "";
+  const insert = (ch) => onChange(sanitizeLive(value + ch));
+  const backspace = () => onChange(value.slice(0, -1));
+  const clearAll = () => onChange("");
+  const equals = () => {
+    if (result !== null) onChange(formatResult(result));
+  };
+  const sheet = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "group",
+      "aria-label": labels?.pad ?? "Number pad",
+      onPointerDown: (e) => e.preventDefault(),
+      className: "fixed inset-x-0 bottom-0 z-50 border-t border-[var(--border)] bg-[var(--bg-surface)] px-2 pt-2 shadow-[0_-4px_24px_rgba(0,0,0,0.12)]",
+      style: { paddingBottom: "max(0.5rem, env(safe-area-inset-bottom))" },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-end justify-between gap-3 px-2 pb-2", children: [
+          label != null && /* @__PURE__ */ jsx("span", { className: "truncate pb-1 text-xs font-medium text-[var(--money-neutral)]", children: label }),
+          /* @__PURE__ */ jsxs("div", { className: "ml-auto min-w-0 text-right", children: [
+            /* @__PURE__ */ jsx("div", { className: "truncate font-mono text-lg leading-tight text-[var(--text-primary)]", children: value || "0" }),
+            /* @__PURE__ */ jsx("div", { className: "h-4 font-mono text-xs text-[var(--money-neutral)]", children: preview })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "grid grid-cols-4 gap-1.5", children: PAD_KEYS.map(
+          (key, i) => key.kind === "back" ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": labels?.backspace ?? "Backspace",
+              onClick: backspace,
+              className: cn(PAD_BTN, PAD_ACCENT),
+              children: /* @__PURE__ */ jsx(Delete, { className: "size-5" })
+            },
+            "back"
+          ) : /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": key.label,
+              onClick: () => insert(key.ins),
+              className: cn(PAD_BTN, key.accent ? PAD_ACCENT : PAD_DIGIT),
+              children: key.label
+            },
+            `${key.ins}-${i}`
+          )
+        ) }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-1.5 grid grid-cols-4 gap-1.5", children: [
+          /* @__PURE__ */ jsx("button", { type: "button", "aria-label": labels?.clear ?? "Clear", onClick: clearAll, className: cn(PAD_BTN, PAD_ACCENT), children: "C" }),
+          /* @__PURE__ */ jsx("button", { type: "button", "aria-label": labels?.equals ?? "Equals", onClick: equals, className: cn(PAD_BTN, PAD_ACCENT), children: "=" }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onDone,
+              className: cn(PAD_BTN, "col-span-2 bg-[var(--brand)] text-[var(--brand-contrast)] active:bg-[var(--brand-hover)]"),
+              children: "Done"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+  return createPortal(sheet, document.body);
+}
+export {
+  NumberPadSheet
+};
+//# sourceMappingURL=numpad-sheet.js.map

package/dist/components/numpad-sheet.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/numpad-sheet.tsx"],"sourcesContent":["import { createPortal } from \"react-dom\";\nimport { Delete } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { evaluateExpression, formatResult, sanitizeLive } from \"../lib/calc\";\n\n/**\n * A full calculator keypad rendered as a bottom sheet — the mobile counterpart to\n * the desktop {@link CalculatorButton} popover, and the replacement for the old\n * under-the-field operator bar (`MathKeys`, feedback #334).\n *\n * A native app (YNAB) can swap the system keyboard for its own keypad; a PWA\n * cannot — but it CAN suppress the OS keyboard with `inputMode=\"none\"` on the\n * host field and paint its own keypad in the freed space. So the host input keeps\n * real focus/caret/selection + the existing value/commit contract, while this\n * sheet drives it: digits + operators + a live `= …` preview, evaluated through\n * the shared {@link evaluateExpression} engine. Desktop is untouched (it keeps the\n * native keyboard and the calculator popover); the host gates this to mobile.\n *\n * Buttons commit through the host's `onChange`/blur, so the sheet is stateless —\n * the field text is the single source of truth. `onPointerDown` preventDefault on\n * the root keeps the host input focused (caret stays, keyboard stays hidden) as\n * the user taps keys; the buttons' `onClick` still fires.\n */\n/** Screen-reader names for the pad itself and its three non-digit keys. */\nexport interface NumberPadSheetLabels {\n  pad?: string;\n  backspace?: string;\n  clear?: string;\n  equals?: string;\n}\n\ntype PadKey =\n  | { kind: \"ins\"; label: string; ins: string; accent?: boolean }\n  | { kind: \"back\" };\n\n// Insert chars that survive `sanitizeLive` (it keeps `× ÷` and ASCII `+ - * /`\n// but strips the unicode minus `−`, so minus inserts an ASCII \"-\" while showing\n// the nicer glyph). The evaluator normalises `× ÷` back to `* /`.\nconst PAD_KEYS: PadKey[] = [\n  { kind: \"ins\", label: \"7\", ins: \"7\" },\n  { kind: \"ins\", label: \"8\", ins: \"8\" },\n  { kind: \"ins\", label: \"9\", ins: \"9\" },\n  { kind: \"ins\", label: \"÷\", ins: \"÷\", accent: true },\n  { kind: \"ins\", label: \"4\", ins: \"4\" },\n  { kind: \"ins\", label: \"5\", ins: \"5\" },\n  { kind: \"ins\", label: \"6\", ins: \"6\" },\n  { kind: \"ins\", label: \"×\", ins: \"×\", accent: true },\n  { kind: \"ins\", label: \"1\", ins: \"1\" },\n  { kind: \"ins\", label: \"2\", ins: \"2\" },\n  { kind: \"ins\", label: \"3\", ins: \"3\" },\n  { kind: \"ins\", label: \"−\", ins: \"-\", accent: true },\n  { kind: \"ins\", label: \".\", ins: \".\" },\n  { kind: \"ins\", label: \"0\", ins: \"0\" },\n  { kind: \"back\" },\n  { kind: \"ins\", label: \"+\", ins: \"+\", accent: true },\n];\n\nconst PAD_BTN =\n  \"flex h-14 items-center justify-center rounded-lg text-lg font-medium transition-transform select-none focus:outline-none active:scale-[0.97]\";\nconst PAD_DIGIT = \"bg-[var(--bg-surface-2)] text-[var(--text-primary)] active:bg-[var(--border)]\";\nconst PAD_ACCENT = \"bg-[var(--border)] text-[var(--text-primary)] active:bg-[var(--bg-surface-2)]\";\n\nexport function NumberPadSheet({\n  value,\n  onChange,\n  onDone,\n  label,\n  labels,\n}: {\n  value: string;\n  /** Fired with the raw (sanitised) field text on every key — same contract as\n   * the host field's own `onChange`. */\n  onChange: (value: string) => void;\n  /** Fired on \"Done\": the host blurs the input, which commits (evaluates) and\n   * unmounts the sheet via its existing blur handler. */\n  onDone: () => void;\n  /** Optional field label, echoed in the sheet header so the user still knows\n   * which field they're editing when the sheet covers it. */\n  label?: ReactNode;\n  /** Screen-reader names for the pad itself and its three non-digit keys. The\n   * digits and operators need none — their visible glyph IS the name. */\n  labels?: NumberPadSheetLabels;\n}) {\n  // NO `useBodyScrollLock`, and that is the point of the control (Keksdose live\n  // #317: *\"Background not scrollable when the amount input calculator field is\n  // open\"*).\n  //\n  // This sheet is a KEYBOARD, not a dialog. It is opened by focusing a field and\n  // exists only because a PWA cannot swap the system keyboard for its own — so it\n  // suppresses the OS keyboard with `inputMode=\"none\"` and paints itself in the\n  // freed space. An OS keyboard does not freeze the page behind it; it takes the\n  // bottom of the screen and leaves you free to scroll what is left, which is how\n  // you reach the field you are typing into when the keys cover it.\n  //\n  // Locking here made the page unreachable at exactly the moment it matters most:\n  // correcting a receipt total against the running line sum, where the figure you\n  // are comparing against sits below the keypad. The other four holders of that\n  // hook are all modal — `Modal`, `PickerSheet`, `FullBleedDialog`, the DataTable\n  // row dialog — and they stay locked, because for them the page behind is not\n  // part of the task.\n  //\n  // The pad still does not scroll ITSELF away under a stray drag: the root's\n  // `onPointerDown` preventDefault (below) keeps the host input focused and eats\n  // the gesture on the sheet, so a touch that starts on a key is not a page scroll.\n\n  const result = evaluateExpression(value);\n  const preview = result !== null && formatResult(result) !== value.trim() ? `= ${formatResult(result)}` : \"\";\n\n  const insert = (ch: string) => onChange(sanitizeLive(value + ch));\n  const backspace = () => onChange(value.slice(0, -1));\n  const clearAll = () => onChange(\"\");\n  const equals = () => {\n    if (result !== null) onChange(formatResult(result));\n  };\n\n  const sheet = (\n    <div\n      role=\"group\"\n      aria-label={labels?.pad ?? \"Number pad\"}\n      // Keep the host input focused when tapping the pad: preventDefault on\n      // pointerdown blocks the focus/blur, while the buttons' click still fires.\n      onPointerDown={(e) => e.preventDefault()}\n      className=\"fixed inset-x-0 bottom-0 z-50 border-t border-[var(--border)] bg-[var(--bg-surface)] px-2 pt-2 shadow-[0_-4px_24px_rgba(0,0,0,0.12)]\"\n      style={{ paddingBottom: \"max(0.5rem, env(safe-area-inset-bottom))\" }}\n    >\n      {/* Header display: which field + the running expression and live result, so\n          the value stays visible even when the sheet covers the field. */}\n      <div className=\"flex items-end justify-between gap-3 px-2 pb-2\">\n        {label != null && (\n          <span className=\"truncate pb-1 text-xs font-medium text-[var(--money-neutral)]\">{label}</span>\n        )}\n        <div className=\"ml-auto min-w-0 text-right\">\n          <div className=\"truncate font-mono text-lg leading-tight text-[var(--text-primary)]\">{value || \"0\"}</div>\n          <div className=\"h-4 font-mono text-xs text-[var(--money-neutral)]\">{preview}</div>\n        </div>\n      </div>\n\n      <div className=\"grid grid-cols-4 gap-1.5\">\n        {PAD_KEYS.map((key, i) =>\n          key.kind === \"back\" ? (\n            <button\n              key=\"back\"\n              type=\"button\"\n              aria-label={labels?.backspace ?? \"Backspace\"}\n              onClick={backspace}\n              className={cn(PAD_BTN, PAD_ACCENT)}\n            >\n              <Delete className=\"size-5\" />\n            </button>\n          ) : (\n            <button\n              key={`${key.ins}-${i}`}\n              type=\"button\"\n              aria-label={key.label}\n              onClick={() => insert(key.ins)}\n              className={cn(PAD_BTN, key.accent ? PAD_ACCENT : PAD_DIGIT)}\n            >\n              {key.label}\n            </button>\n          ),\n        )}\n      </div>\n\n      <div className=\"mt-1.5 grid grid-cols-4 gap-1.5\">\n        <button type=\"button\" aria-label={labels?.clear ?? \"Clear\"} onClick={clearAll} className={cn(PAD_BTN, PAD_ACCENT)}>\n          C\n        </button>\n        <button type=\"button\" aria-label={labels?.equals ?? \"Equals\"} onClick={equals} className={cn(PAD_BTN, PAD_ACCENT)}>\n          =\n        </button>\n        <button\n          type=\"button\"\n          onClick={onDone}\n          className={cn(PAD_BTN, \"col-span-2 bg-[var(--brand)] text-[var(--brand-contrast)] active:bg-[var(--brand-hover)]\")}\n        >\n          Done\n        </button>\n      </div>\n    </div>\n  );\n\n  return createPortal(sheet, document.body);\n}\n"],"mappings":"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","names":[]}

package/dist/components/picker-sheet.d.ts

@@ -0,0 +1,44 @@
+import * as react from 'react';
+import { ReactNode, RefObject } from 'react';
+
+/**
+ * The PHONE presentation of a picker: a full-screen dialog with a search box at
+ * the top and the list filling everything below it (Keksdose live #200).
+ *
+ * *"Paid as full screen dialog with input. Similar to the account select that
+ * already appears as full screen."* The account field is a native `<select>`, and
+ * a phone browser renders that as a full-screen list — so the app's own pickers,
+ * which are anchored dropdown panels, were the odd ones out: a 320px-tall panel
+ * squeezed between the field and the keyboard, showing three or four rows of a
+ * list that might have two hundred entries.
+ *
+ * What this fixes beyond size: the panel had to be *placed* (above/below, tracking
+ * the visual viewport as the keyboard opened — see `useAnchoredPanel`), and every
+ * one of those decisions is a chance to be wrong on a screen this small. A sheet
+ * has no placement. It also gives the search input somewhere unambiguous to live,
+ * which is the other half of the request: *"add filler possibility to the account
+ * select or even better right to the hoc the account select is derived from"* —
+ * so this lives in the shared picker, not in one form's copy of it.
+ *
+ * Rows are `min-h-11` (44px): the touch target the rest of the app uses. The list
+ * scrolls, the header does not, and the body behind it is scroll-locked so a drag
+ * that overshoots the list does not move the page underneath.
+ */
+declare function PickerSheet({ open, onClose, title, query, onQueryChange, searchPlaceholder, inputRef, closeLabel, children, }: {
+    open: boolean;
+    onClose: () => void;
+    /** The field's own label — a sheet that fills the screen has to say what it is
+     *  asking for, which the anchored panel got for free by sitting under it. */
+    title?: ReactNode;
+    query: string;
+    onQueryChange: (value: string) => void;
+    searchPlaceholder?: string;
+    inputRef?: RefObject<HTMLInputElement | null>;
+    closeLabel?: string;
+    children: ReactNode;
+}): react.ReactPortal | null;
+/** A row inside a {@link PickerSheet} — the phone-sized version of a dropdown row,
+ *  so a list is comfortable to hit with a thumb rather than merely legible. */
+declare const SHEET_ROW_CLASS: string;
+
+export { PickerSheet, SHEET_ROW_CLASS };

package/dist/components/picker-sheet.js

@@ -0,0 +1,78 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+import { X } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { DropdownSearchHeader } from "./dropdown.js";
+import { useBodyScrollLock } from "../hooks/use-body-scroll-lock.js";
+import { useOverlayHistory } from "../hooks/use-overlay-history.js";
+import { useVisualViewport } from "../hooks/use-anchored-panel.js";
+function PickerSheet({
+  open,
+  onClose,
+  title,
+  query,
+  onQueryChange,
+  searchPlaceholder,
+  inputRef,
+  closeLabel = "Close",
+  children
+}) {
+  useBodyScrollLock(open);
+  useOverlayHistory(open, onClose);
+  const vv = useVisualViewport(open);
+  const ownRef = useRef(null);
+  const searchRef = inputRef ?? ownRef;
+  useEffect(() => {
+    if (open) searchRef.current?.focus();
+  }, [open, searchRef]);
+  if (!open || typeof document === "undefined") return null;
+  return createPortal(
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": typeof title === "string" ? title : void 0,
+        onMouseDown: (e) => e.stopPropagation(),
+        style: vv ? { top: vv.top, height: vv.height, bottom: "auto" } : void 0,
+        className: "fixed inset-0 z-50 flex flex-col bg-white dark:bg-slate-900",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-slate-200 px-3 py-2 dark:border-slate-700", children: [
+            /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-sm font-semibold text-slate-900 dark:text-slate-100", children: title }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": closeLabel,
+                onClick: onClose,
+                className: "rounded p-1.5 text-slate-500 hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-800",
+                children: /* @__PURE__ */ jsx(X, { className: "size-5" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            DropdownSearchHeader,
+            {
+              query,
+              onQueryChange,
+              inputRef: searchRef,
+              placeholder: searchPlaceholder
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-y-auto overscroll-contain", children })
+        ]
+      }
+    ),
+    document.body
+  );
+}
+const SHEET_ROW_CLASS = cn(
+  "flex min-h-11 w-full items-center gap-2 px-4 py-2 text-left text-base",
+  "text-slate-900 hover:bg-slate-50 dark:text-slate-100 dark:hover:bg-slate-800"
+);
+export {
+  PickerSheet,
+  SHEET_ROW_CLASS
+};
+//# sourceMappingURL=picker-sheet.js.map

package/dist/components/picker-sheet.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/picker-sheet.tsx"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { X } from \"lucide-react\";\nimport type { ReactNode, RefObject } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { DropdownSearchHeader } from \"./dropdown\";\nimport { useBodyScrollLock } from \"../hooks/use-body-scroll-lock\";\nimport { useOverlayHistory } from \"../hooks/use-overlay-history\";\nimport { useVisualViewport } from \"../hooks/use-anchored-panel\";\n\n/**\n * The PHONE presentation of a picker: a full-screen dialog with a search box at\n * the top and the list filling everything below it (Keksdose live #200).\n *\n * *\"Paid as full screen dialog with input. Similar to the account select that\n * already appears as full screen.\"* The account field is a native `<select>`, and\n * a phone browser renders that as a full-screen list — so the app's own pickers,\n * which are anchored dropdown panels, were the odd ones out: a 320px-tall panel\n * squeezed between the field and the keyboard, showing three or four rows of a\n * list that might have two hundred entries.\n *\n * What this fixes beyond size: the panel had to be *placed* (above/below, tracking\n * the visual viewport as the keyboard opened — see `useAnchoredPanel`), and every\n * one of those decisions is a chance to be wrong on a screen this small. A sheet\n * has no placement. It also gives the search input somewhere unambiguous to live,\n * which is the other half of the request: *\"add filler possibility to the account\n * select or even better right to the hoc the account select is derived from\"* —\n * so this lives in the shared picker, not in one form's copy of it.\n *\n * Rows are `min-h-11` (44px): the touch target the rest of the app uses. The list\n * scrolls, the header does not, and the body behind it is scroll-locked so a drag\n * that overshoots the list does not move the page underneath.\n */\nexport function PickerSheet({\n  open,\n  onClose,\n  title,\n  query,\n  onQueryChange,\n  searchPlaceholder,\n  inputRef,\n  closeLabel = \"Close\",\n  children,\n}: {\n  open: boolean;\n  onClose: () => void;\n  /** The field's own label — a sheet that fills the screen has to say what it is\n   *  asking for, which the anchored panel got for free by sitting under it. */\n  title?: ReactNode;\n  query: string;\n  onQueryChange: (value: string) => void;\n  searchPlaceholder?: string;\n  inputRef?: RefObject<HTMLInputElement | null>;\n  closeLabel?: string;\n  children: ReactNode;\n}) {\n  useBodyScrollLock(open);\n  /**\n   * Back closes THE SHEET, not the dialog it was opened from (Keksdose live #309:\n   * *\"Mouse Back does not only close the select but also the whole edit or create\n   * dialog which is cumbersome.\"*).\n   *\n   * The sheet is a full-screen overlay over whatever opened it, and on a phone that\n   * is almost always the row editor — which DOES push a history entry\n   * (`data-table.tsx`). So the sheet was invisible to Back: one press popped the\n   * editor's entry and took the whole dialog with it, discarding an edit in progress\n   * in order to dismiss a list.\n   *\n   * `useOverlayHistory` was built for exactly this nesting — its stack unwinds\n   * last-in-first-out, and the U-12 regression test in its own suite is written\n   * around \"a Modal and a PickerSheet inside it\". The sheet simply never called it.\n   *\n   * Nothing else has to change: the hook is a no-op while `open` is false, and it\n   * pops its own entry when the sheet closes some other way (the X, a row, the\n   * backdrop) so history does not accumulate husks.\n   */\n  useOverlayHistory(open, onClose);\n  // The visible region, while the sheet is up — see the `style` below for why a\n  // full-screen sheet cannot simply be `inset-0` on a phone (live #328).\n  const vv = useVisualViewport(open);\n  // The sheet focuses its OWN search box when it opens (Keksdose live #212: *\"make\n  // the text input filter active on select click\"*).\n  //\n  // The callers tried: `Combobox`'s field does `setOpen(true); sheetInputRef.current\n  // ?.focus()` in one `onFocus`, so the focus call runs while the sheet is still\n  // unmounted and the ref is null — and the chevron's `onMouseDown` preventDefaults\n  // to keep focus on the field, so opening that way never even attempted it. Neither\n  // is fixable from outside: only the sheet knows when its input exists.\n  //\n  // A fallback ref means a caller that does not need the handle still gets the\n  // focus, rather than the behaviour depending on whether a prop was passed.\n  const ownRef = useRef<HTMLInputElement | null>(null);\n  const searchRef = inputRef ?? ownRef;\n  useEffect(() => {\n    if (open) searchRef.current?.focus();\n  }, [open, searchRef]);\n\n  if (!open || typeof document === \"undefined\") return null;\n  return createPortal(\n    <div\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-label={typeof title === \"string\" ? title : undefined}\n      // The sheet is PORTALLED to <body>, so it is not inside the field's own\n      // wrapper — and `useDropdown` closes on any document mousedown landing\n      // outside that wrapper. Tapping a row therefore unmounted the row (open →\n      // false) before its CLICK could fire, so the tap selected nothing at all and\n      // the sheet just vanished (Keksdose dev#477).\n      //\n      // It bit whichever sheet commits on `onClick` — the payee field's, since live\n      // #200, where it hid behind the free-text value the search box was already\n      // setting; and the account field's the moment dev#477 moved it onto the inline\n      // picker. `ComboboxPanel`'s rows happen to commit on `onMouseDown`, so they\n      // beat the document listener and were never affected — which is luck, not a\n      // design, and exactly why the fix belongs to the sheet.\n      //\n      // Stopping the mousedown here rather than teaching every caller about the\n      // portal: the sheet is modal and full-screen, so \"a click in here is not an\n      // outside click\" is a property of the sheet, not of whoever opened it.\n      onMouseDown={(e) => e.stopPropagation()}\n      // ⚠️ `inset-0` was the whole of Keksdose live #328: *\"When the keyboard overlays\n      // the entries I cannot scroll past them … to see also the last entries. Happens\n      // when browsing the account select.\"*\n      //\n      // This sheet FOCUSES ITS OWN SEARCH BOX on open (see above), so the keyboard is\n      // up every single time it is used on a phone. On Android that shrinks the visual\n      // viewport and leaves the LAYOUT viewport alone — `inset-0` is the layout\n      // viewport — so the sheet kept its full height with its bottom third behind the\n      // keyboard. The list below is `flex-1 overflow-y-auto`, so it sized itself to\n      // that hidden height too: it scrolled to ITS end while the last rows were still\n      // under the keys, and no gesture could bring them out. Nothing was clipped and\n      // nothing looked broken, which is why it reads as \"I cannot scroll past them\".\n      //\n      // `visualViewport` is the API that answers rather than hints (the live #292\n      // lesson): it reports the region actually on screen, keyboard and pinch-pan\n      // included, and it fires on the keyboard opening and closing. Pinned to that box,\n      // the sheet ends where the keys begin and the list's own scroll covers the rest.\n      // `useVisualViewport` returns null when there is nothing to correct, and then\n      // this is character-for-character the sheet that was here before.\n      style={vv ? { top: vv.top, height: vv.height, bottom: \"auto\" } : undefined}\n      className=\"fixed inset-0 z-50 flex flex-col bg-white dark:bg-slate-900\"\n    >\n      <div className=\"flex items-center gap-2 border-b border-slate-200 px-3 py-2 dark:border-slate-700\">\n        <span className=\"min-w-0 flex-1 truncate text-sm font-semibold text-slate-900 dark:text-slate-100\">\n          {title}\n        </span>\n        <button\n          type=\"button\"\n          aria-label={closeLabel}\n          onClick={onClose}\n          className=\"rounded p-1.5 text-slate-500 hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-800\"\n        >\n          <X className=\"size-5\" />\n        </button>\n      </div>\n      <DropdownSearchHeader\n        query={query}\n        onQueryChange={onQueryChange}\n        inputRef={searchRef}\n        placeholder={searchPlaceholder}\n      />\n      {/* min-h-0 so the LIST scrolls rather than the dialog growing past the\n          viewport — a flex child defaults to min-height:auto. */}\n      <div className=\"min-h-0 flex-1 overflow-y-auto overscroll-contain\">{children}</div>\n    </div>,\n    document.body,\n  );\n}\n\n/** A row inside a {@link PickerSheet} — the phone-sized version of a dropdown row,\n *  so a list is comfortable to hit with a thumb rather than merely legible. */\nexport const SHEET_ROW_CLASS = cn(\n  \"flex min-h-11 w-full items-center gap-2 px-4 py-2 text-left text-base\",\n  \"text-slate-900 hover:bg-slate-50 dark:text-slate-100 dark:hover:bg-slate-800\",\n);\n"],"mappings":"AA8IM,SACE,KADF;AA9IN,SAAS,WAAW,cAAc;AAClC,SAAS,oBAAoB;AAC7B,SAAS,SAAS;AAElB,SAAS,UAAU;AACnB,SAAS,4BAA4B;AACrC,SAAS,yBAAyB;AAClC,SAAS,yBAAyB;AAClC,SAAS,yBAAyB;AAyB3B,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;AACF,GAYG;AACD,oBAAkB,IAAI;AAoBtB,oBAAkB,MAAM,OAAO;AAG/B,QAAM,KAAK,kBAAkB,IAAI;AAYjC,QAAM,SAAS,OAAgC,IAAI;AACnD,QAAM,YAAY,YAAY;AAC9B,YAAU,MAAM;AACd,QAAI,KAAM,WAAU,SAAS,MAAM;AAAA,EACrC,GAAG,CAAC,MAAM,SAAS,CAAC;AAEpB,MAAI,CAAC,QAAQ,OAAO,aAAa,YAAa,QAAO;AACrD,SAAO;AAAA,IACL;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAW;AAAA,QACX,cAAY,OAAO,UAAU,WAAW,QAAQ;AAAA,QAiBhD,aAAa,CAAC,MAAM,EAAE,gBAAgB;AAAA,QAoBtC,OAAO,KAAK,EAAE,KAAK,GAAG,KAAK,QAAQ,GAAG,QAAQ,QAAQ,OAAO,IAAI;AAAA,QACjE,WAAU;AAAA,QAEV;AAAA,+BAAC,SAAI,WAAU,qFACb;AAAA,gCAAC,UAAK,WAAU,oFACb,iBACH;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,cAAY;AAAA,gBACZ,SAAS;AAAA,gBACT,WAAU;AAAA,gBAEV,8BAAC,KAAE,WAAU,UAAS;AAAA;AAAA,YACxB;AAAA,aACF;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA,UAAU;AAAA,cACV,aAAa;AAAA;AAAA,UACf;AAAA,UAGA,oBAAC,SAAI,WAAU,qDAAqD,UAAS;AAAA;AAAA;AAAA,IAC/E;AAAA,IACA,SAAS;AAAA,EACX;AACF;AAIO,MAAM,kBAAkB;AAAA,EAC7B;AAAA,EACA;AACF;","names":[]}

package/dist/components/popover.d.ts

@@ -0,0 +1,20 @@
+import * as react from 'react';
+import { RefObject, ReactNode } from 'react';
+
+interface PopoverProps {
+    trigger: (state: {
+        open: boolean;
+        toggle: () => void;
+        ref: RefObject<HTMLButtonElement | null>;
+    }) => ReactNode;
+    children: (close: () => void) => ReactNode;
+    width?: number;
+}
+/**
+ * Portal-rendered popover anchored under its trigger button. The panel is fixed
+ * to the viewport (so table/overflow ancestors can't clip it) and re-aligns on
+ * scroll/resize; it closes on outside-click and Escape.
+ */
+declare function Popover({ trigger, children, width }: PopoverProps): react.JSX.Element;
+
+export { Popover };

package/dist/components/popover.js

@@ -0,0 +1,46 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { useAnchoredPanel } from "../hooks/use-anchored-panel.js";
+import { useEscapeKey, useOutsideClick } from "../hooks/use-dismiss.js";
+const POPOVER_WIDTH = 288;
+function Popover({ trigger, children, width = POPOVER_WIDTH }) {
+  const triggerRef = useRef(null);
+  const panelRef = useRef(null);
+  const [open, setOpen] = useState(false);
+  const close = () => setOpen(false);
+  const toggle = () => setOpen((v) => !v);
+  const placement = useAnchoredPanel(triggerRef, open);
+  const rect = placement.rect;
+  const pos = rect ? {
+    top: placement.top,
+    left: Math.min(Math.max(8, rect.right - width), window.innerWidth - width - 8)
+  } : null;
+  useOutsideClick([triggerRef, panelRef], close, open);
+  useEscapeKey(close, open);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    trigger({ open, toggle, ref: triggerRef }),
+    open && pos && createPortal(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: panelRef,
+          style: {
+            position: "fixed",
+            top: pos.top,
+            left: pos.left,
+            width,
+            maxHeight: placement.maxHeight
+          },
+          className: "z-50 overflow-y-auto rounded-md border border-slate-200 bg-white p-3 shadow-lg dark:border-slate-700 dark:bg-slate-900",
+          children: children(close)
+        }
+      ),
+      document.body
+    )
+  ] });
+}
+export {
+  Popover
+};
+//# sourceMappingURL=popover.js.map

package/dist/components/popover.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/popover.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\nimport type { ReactNode, RefObject } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useAnchoredPanel } from \"../hooks/use-anchored-panel\";\nimport { useEscapeKey, useOutsideClick } from \"../hooks/use-dismiss\";\n\ninterface PopoverProps {\n  trigger: (state: { open: boolean; toggle: () => void; ref: RefObject<HTMLButtonElement | null> }) => ReactNode;\n  children: (close: () => void) => ReactNode;\n  width?: number;\n}\n\nconst POPOVER_WIDTH = 288;\n\n/**\n * Portal-rendered popover anchored under its trigger button. The panel is fixed\n * to the viewport (so table/overflow ancestors can't clip it) and re-aligns on\n * scroll/resize; it closes on outside-click and Escape.\n */\nexport function Popover({ trigger, children, width = POPOVER_WIDTH }: PopoverProps) {\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const panelRef = useRef<HTMLDivElement>(null);\n  const [open, setOpen] = useState(false);\n  const close = () => setOpen(false);\n  const toggle = () => setOpen((v) => !v);\n\n  // Align the panel's right edge to the trigger's and clamp it horizontally; the\n  // hook owns the vertical half — below by default, flipped above (and height-capped)\n  // when that is where the room is, e.g. once a mobile keyboard has eaten the bottom\n  // of the screen (feedback #135). It re-measures on scroll/resize.\n  const placement = useAnchoredPanel(triggerRef, open);\n  const rect = placement.rect;\n  const pos = rect\n    ? {\n        top: placement.top,\n        left: Math.min(Math.max(8, rect.right - width), window.innerWidth - width - 8),\n      }\n    : null;\n\n  useOutsideClick([triggerRef, panelRef], close, open);\n  useEscapeKey(close, open);\n\n  return (\n    <>\n      {trigger({ open, toggle, ref: triggerRef })}\n      {open && pos &&\n        createPortal(\n          <div\n            ref={panelRef}\n            style={{\n              position: \"fixed\",\n              top: pos.top,\n              left: pos.left,\n              width,\n              maxHeight: placement.maxHeight,\n            }}\n            className=\"z-50 overflow-y-auto rounded-md border border-slate-200 bg-white p-3 shadow-lg dark:border-slate-700 dark:bg-slate-900\"\n          >\n            {children(close)}\n          </div>,\n          document.body,\n        )}\n    </>\n  );\n}\n"],"mappings":"AA2CI,mBAIM,KAJN;AA3CJ,SAAS,QAAQ,gBAAgB;AAEjC,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AACjC,SAAS,cAAc,uBAAuB;AAQ9C,MAAM,gBAAgB;AAOf,SAAS,QAAQ,EAAE,SAAS,UAAU,QAAQ,cAAc,GAAiB;AAClF,QAAM,aAAa,OAA0B,IAAI;AACjD,QAAM,WAAW,OAAuB,IAAI;AAC5C,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,QAAQ,MAAM,QAAQ,KAAK;AACjC,QAAM,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC;AAMtC,QAAM,YAAY,iBAAiB,YAAY,IAAI;AACnD,QAAM,OAAO,UAAU;AACvB,QAAM,MAAM,OACR;AAAA,IACE,KAAK,UAAU;AAAA,IACf,MAAM,KAAK,IAAI,KAAK,IAAI,GAAG,KAAK,QAAQ,KAAK,GAAG,OAAO,aAAa,QAAQ,CAAC;AAAA,EAC/E,IACA;AAEJ,kBAAgB,CAAC,YAAY,QAAQ,GAAG,OAAO,IAAI;AACnD,eAAa,OAAO,IAAI;AAExB,SACE,iCACG;AAAA,YAAQ,EAAE,MAAM,QAAQ,KAAK,WAAW,CAAC;AAAA,IACzC,QAAQ,OACP;AAAA,MACE;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,OAAO;AAAA,YACL,UAAU;AAAA,YACV,KAAK,IAAI;AAAA,YACT,MAAM,IAAI;AAAA,YACV;AAAA,YACA,WAAW,UAAU;AAAA,UACvB;AAAA,UACA,WAAU;AAAA,UAET,mBAAS,KAAK;AAAA;AAAA,MACjB;AAAA,MACA,SAAS;AAAA,IACX;AAAA,KACJ;AAEJ;","names":[]}

package/dist/components/search-field.d.ts

@@ -0,0 +1,52 @@
+import * as react from 'react';
+import { InputHTMLAttributes } from 'react';
+
+interface SearchFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "onChange" | "type"> {
+    value: string;
+    /** The typed text. Emitted as a plain string, not an event: every caller of the
+     *  four this replaced wanted the string, and one of them held it in a URL param
+     *  rather than in state. */
+    onChange: (value: string) => void;
+    /** The field's accessible name. Required, and deliberately not defaulted to the
+     *  placeholder: a placeholder disappears the moment someone types, so a field
+     *  named only by one is unnamed exactly when a screen-reader user is working in
+     *  it. Two of the boxes this replaced had no name but the placeholder. */
+    label: string;
+    /** Names the clear button. Omit it and no clear button is rendered — which is a
+     *  decision, not a default: a filter you can type into and not untype is the
+     *  complaint that produced the button on three of these four screens. */
+    clearLabel?: string;
+    className?: string;
+}
+/**
+ * The page-level filter box: a search icon, a `type="search"` input, and a clear
+ * "×" that appears once there is something to clear.
+ *
+ * ## Why it is a component
+ *
+ * Keksdose had four of these and no two agreed. Two were character-identical
+ * twenty-line copies (the settings catalogue filter and the tour list filter) —
+ * the same absolute icon at `left-3`, the same `pl-9 pr-9`, the same
+ * `[&::-webkit-search-cancel-button]:appearance-none`, the same conditional clear
+ * button at `right-2` — differing only in which state setter they called. The
+ * third (the admin support queue) was the same idea at `left-2`/`size-3.5`/`pl-7`
+ * with no clear button and no `type="search"`, so it had neither the `searchbox`
+ * role nor a way to empty itself. The fourth (the bank picker) was a bare `<Input
+ * placeholder="Search">`: no icon, no clear, and no accessible name at all once
+ * the placeholder went away.
+ *
+ * None of that is a design decision anyone made; it is four people solving the
+ * same problem on four days. A shared component is how the fourth screen gets the
+ * clear button the first one earned.
+ *
+ * ## The two X's
+ *
+ * `type="search"` is what gives the field its `searchbox` role — and, in Chrome, a
+ * NATIVE clear cross that paints right next to ours, so a non-empty box shows two
+ * X's an inch apart. Ours is the one that survives: it carries an accessible name
+ * and matches the app's other icon buttons, and it returns focus to the input so
+ * the next query can be typed straight away.
+ */
+declare const SearchField: react.ForwardRefExoticComponent<SearchFieldProps & react.RefAttributes<HTMLInputElement>>;
+
+export { SearchField, type SearchFieldProps };