@eifi1/ui-kit 0.4.0

package/dist/components/modal.js

@@ -0,0 +1,156 @@
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { cn } from "../lib/cn.js";
+import { useBodyScrollLock } from "../hooks/use-body-scroll-lock.js";
+import { useOverlayHistory } from "../hooks/use-overlay-history.js";
+import { useCloseTransition } from "../hooks/use-close-transition.js";
+function useDragOffset(enabled) {
+  const [offset, setOffset] = useState(null);
+  const from = useRef(null);
+  const onPointerMove = (e) => {
+    const start = from.current;
+    if (!start) return;
+    setOffset({ x: start.ox + e.clientX - start.x, y: start.oy + e.clientY - start.y });
+  };
+  const onPointerUp = () => {
+    from.current = null;
+    window.removeEventListener("pointermove", onPointerMove);
+    window.removeEventListener("pointerup", onPointerUp);
+  };
+  return {
+    style: offset ? { transform: `translate(${offset.x}px, ${offset.y}px)` } : void 0,
+    onPointerDown: !enabled ? void 0 : (e) => {
+      if (e.button !== 0 || window.innerWidth < 768) return;
+      const target = e.target;
+      if (target.closest("input,textarea,select,button,a,[role='button']")) return;
+      from.current = { x: e.clientX, y: e.clientY, ox: offset?.x ?? 0, oy: offset?.y ?? 0 };
+      window.addEventListener("pointermove", onPointerMove);
+      window.addEventListener("pointerup", onPointerUp);
+    }
+  };
+}
+function useBackdropClose(onClose) {
+  const pressStartedOnBackdrop = useRef(false);
+  return {
+    onMouseDown: (e) => {
+      pressStartedOnBackdrop.current = e.target === e.currentTarget;
+    },
+    onMouseUp: (e) => {
+      const started = pressStartedOnBackdrop.current;
+      pressStartedOnBackdrop.current = false;
+      if (started && e.target === e.currentTarget) onClose();
+    }
+  };
+}
+const FOCUSABLE = 'a[href],button:not([disabled]),textarea:not([disabled]),input:not([disabled]),select:not([disabled]),[tabindex]:not([tabindex="-1"])';
+function Modal({
+  onClose,
+  children,
+  size = "md",
+  className,
+  labelledBy,
+  onKeyDown,
+  fullBleed,
+  draggable
+}) {
+  const panelRef = useRef(null);
+  const drag = useDragOffset(Boolean(draggable));
+  const { closing, requestClose } = useCloseTransition(onClose);
+  const backdropClose = useBackdropClose(requestClose);
+  useOverlayHistory(true, requestClose);
+  useBodyScrollLock(true);
+  useEffect(() => {
+    const previouslyFocused = document.activeElement;
+    panelRef.current?.focus();
+    return () => {
+      previouslyFocused?.focus?.();
+    };
+  }, []);
+  const handleKeyDown = (e) => {
+    onKeyDown?.(e);
+    if (e.defaultPrevented) return;
+    if (e.key === "Escape") {
+      e.stopPropagation();
+      requestClose();
+      return;
+    }
+    if (e.key !== "Tab") return;
+    const focusables = panelRef.current?.querySelectorAll(FOCUSABLE);
+    if (!focusables || focusables.length === 0) {
+      e.preventDefault();
+      panelRef.current?.focus();
+      return;
+    }
+    const first = focusables[0];
+    const last = focusables[focusables.length - 1];
+    const active = document.activeElement;
+    if (e.shiftKey && (active === first || active === panelRef.current)) {
+      e.preventDefault();
+      last.focus();
+    } else if (!e.shiftKey && active === last) {
+      e.preventDefault();
+      first.focus();
+    }
+  };
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          // Live #320. The panel below rises only where it is bottom-anchored: from md up
+          // it is centred, and a centred box sliding up from off-screen reads as a
+          // different component arriving rather than as the same one settling.
+          closing ? "animate-overlay-out" : "animate-overlay",
+          "fixed inset-0 z-50 flex items-end justify-center bg-black/40 md:items-center",
+          fullBleed ? "p-0 md:p-4" : "p-4"
+        ),
+        ...backdropClose,
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: panelRef,
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": labelledBy,
+            tabIndex: -1,
+            onKeyDown: handleKeyDown,
+            onPointerDown: drag.onPointerDown,
+            style: drag.style,
+            className: cn(
+              closing ? "animate-sheet-out md:animate-none" : "animate-sheet md:animate-none",
+              "w-full rounded-lg border border-slate-200 bg-white shadow-sm outline-none dark:border-slate-800 dark:bg-slate-900",
+              { md: "max-w-md", lg: "max-w-lg", xl: "max-w-3xl" }[size],
+              // A panel taller than the screen has to scroll ITSELF. The backdrop is
+              // `fixed inset-0` and the body is scroll-locked while a dialog is open, so
+              // without this the overflow simply had nowhere to go: on a phone the panel
+              // is bottom-anchored, so it grew UPWARD past the top edge and the part that
+              // went past it could not be reached by any gesture (Keksdose live #254, on
+              // the price-merge dialog — but it was every dialog with more than a screen
+              // of content). `max-h-full` resolves against the backdrop's content box,
+              // which is the viewport minus its own padding, so the panel stops exactly
+              // where the screen does; `overscroll-contain` keeps the fling inside it.
+              //
+              // Three callers had already patched themselves with `max-h-[90vh]` +
+              // an inner scroller. Those still win — `cn` is tailwind-merge — and this is
+              // the default they should not have needed.
+              "max-h-full overflow-y-auto overscroll-contain",
+              "p-4",
+              // The grab affordance sits on the panel's own top strip: a drag handle of
+              // its own would be one more control in a dialog that is mostly one field.
+              draggable && "md:[&>*:first-child]:cursor-grab",
+              className
+            ),
+            children
+          }
+        )
+      }
+    ),
+    document.body
+  );
+}
+export {
+  Modal,
+  useBackdropClose
+};
+//# sourceMappingURL=modal.js.map

package/dist/components/modal.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/modal.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport type {\n  KeyboardEvent,\n  MouseEvent as ReactMouseEvent,\n  PointerEvent as ReactPointerEvent,\n  ReactNode,\n} from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useBodyScrollLock } from \"../hooks/use-body-scroll-lock\";\nimport { useOverlayHistory } from \"../hooks/use-overlay-history\";\nimport { useCloseTransition } from \"../hooks/use-close-transition\";\n\n/**\n * Drag the panel by its top strip, in pointer space (dev#460).\n *\n * Deliberately not a library and not persisted: the offset is component state that\n * dies with the dialog. It starts only on a press that lands on the panel's own\n * chrome — never on a field, a button or a link, which is what keeps \"drag to select\n * text in the textarea\" working. Above `md` only: below it the panel is a\n * full-width bottom sheet with nothing beside it to uncover.\n */\nfunction useDragOffset(enabled: boolean) {\n  const [offset, setOffset] = useState<{ x: number; y: number } | null>(null);\n  const from = useRef<{ x: number; y: number; ox: number; oy: number } | null>(null);\n\n  const onPointerMove = (e: PointerEvent) => {\n    const start = from.current;\n    if (!start) return;\n    setOffset({ x: start.ox + e.clientX - start.x, y: start.oy + e.clientY - start.y });\n  };\n  const onPointerUp = () => {\n    from.current = null;\n    window.removeEventListener(\"pointermove\", onPointerMove);\n    window.removeEventListener(\"pointerup\", onPointerUp);\n  };\n\n  return {\n    style: offset ? { transform: `translate(${offset.x}px, ${offset.y}px)` } : undefined,\n    onPointerDown: !enabled\n      ? undefined\n      : (e: ReactPointerEvent<HTMLDivElement>) => {\n          if (e.button !== 0 || window.innerWidth < 768) return;\n          const target = e.target as HTMLElement;\n          // Only the panel itself and its non-interactive chrome start a drag; a\n          // press inside any control belongs to that control.\n          if (target.closest(\"input,textarea,select,button,a,[role='button']\")) return;\n          from.current = { x: e.clientX, y: e.clientY, ox: offset?.x ?? 0, oy: offset?.y ?? 0 };\n          window.addEventListener(\"pointermove\", onPointerMove);\n          window.addEventListener(\"pointerup\", onPointerUp);\n        },\n  };\n}\n\n/**\n * Backdrop handlers that close only when a press starts AND ends on the\n * backdrop itself. A plain onClick fires on mouseup, so dragging a text\n * selection that starts inside the panel and releases over the backdrop would\n * dismiss the dialog (feedback #254) — and the reverse drag would too, since\n * click targets the common ancestor of the down/up elements.\n */\nexport function useBackdropClose(onClose: () => void) {\n  const pressStartedOnBackdrop = useRef(false);\n  return {\n    onMouseDown: (e: ReactMouseEvent<HTMLDivElement>) => {\n      pressStartedOnBackdrop.current = e.target === e.currentTarget;\n    },\n    onMouseUp: (e: ReactMouseEvent<HTMLDivElement>) => {\n      const started = pressStartedOnBackdrop.current;\n      pressStartedOnBackdrop.current = false;\n      if (started && e.target === e.currentTarget) onClose();\n    },\n  };\n}\n\n// Tab-cycle target set: the interactive descendants the focus trap rotates\n// through. Querying live (per keystroke) means dynamically rendered fields are\n// included automatically.\nconst FOCUSABLE =\n  'a[href],button:not([disabled]),textarea:not([disabled]),input:not([disabled]),select:not([disabled]),[tabindex]:not([tabindex=\"-1\"])';\n\nexport interface ModalProps {\n  /** Invoked on backdrop click and on Escape. */\n  onClose: () => void;\n  children: ReactNode;\n  /**\n   * Panel max-width: `md` (28rem), `lg` (32rem), `xl` (48rem).\n   *\n   * `xl` exists because two callers had already written `className=\"max-w-3xl\"` to\n   * reach it — the payee backfill's preview table and the price-merge dialog, both\n   * of which hold a list and several fields rather than one question. A caller\n   * patching a missing size IS the signal that the size is missing, and a\n   * hand-written width in a `className` is a width nothing else can line up with.\n   *\n   * The panel is `w-full` under every one of them, so the cap only bites once the\n   * viewport is wider than it: on a phone all three are the same full-width bottom\n   * sheet. Nothing here may introduce a `min-w-*`, which is what would break that.\n   */\n  size?: \"md\" | \"lg\" | \"xl\";\n  /** Extra classes for the panel (e.g. `space-y-3` for form content spacing). */\n  className?: string;\n  /** id of the heading element, wired to `aria-labelledby`. */\n  labelledBy?: string;\n  /**\n   * Extra key handling on the panel (e.g. Ctrl/Cmd+Enter to submit). Runs first;\n   * if it calls `preventDefault()` the built-in Escape/Tab handling is skipped\n   * for that event.\n   */\n  onKeyDown?: (e: KeyboardEvent<HTMLDivElement>) => void;\n  /**\n   * Drop the backdrop's mobile margin so the panel can reach the screen edges\n   * (a full-screen sheet on phones). The panel still needs its own\n   * `h-[100dvh] max-w-full rounded-none` classes via `className` to fill it; the\n   * desktop `md:p-4` margin is kept. Defaults to false (padded on all sizes).\n   */\n  fullBleed?: boolean;\n  /**\n   * Let the user drag the panel out of the way by its top edge (Keksdose feedback\n   * dev#460: *\"Make the feedback dialog draggable so I can see behind it if it\n   * blocks something.\"*).\n   *\n   * Opt-in, because it only makes sense for a dialog whose content is ABOUT the page\n   * behind it — the feedback composer is the case, an ordinary form is not, and a\n   * draggable panel that has nothing to reveal is a control that can only get lost.\n   *\n   * Pointer-only by design: it is a \"move this out of the way\" gesture, not a layout\n   * choice worth persisting, and the position resets when the dialog closes. On a\n   * phone the panel is a bottom sheet the width of the screen, so dragging is\n   * suppressed there — there is nothing beside it to see.\n   */\n  draggable?: boolean;\n}\n\n/**\n * Centered (bottom-sheet on mobile) modal dialog: dimmed backdrop, single\n * rounded panel. Owns the overlay mechanics that the hand-rolled dialogs each\n * re-implemented or lacked — backdrop-click + Escape to close, the platform Back\n * gesture (Keksdose feedback #172), background scroll lock (feedback #204), focus\n * into the panel on open and back to the trigger on close, a Tab focus trap, and\n * `role=\"dialog\"`/`aria-modal`.\n */\nexport function Modal({\n  onClose,\n  children,\n  size = \"md\",\n  className,\n  labelledBy,\n  onKeyDown,\n  fullBleed,\n  draggable,\n}: ModalProps) {\n  const panelRef = useRef<HTMLDivElement>(null);\n  const drag = useDragOffset(Boolean(draggable));\n  // The panel lowers itself before the caller unmounts it (live #320 rework). Every\n  // dismissal below goes through `requestClose`; `onClose` still does the closing, one\n  // animation later. A caller that closes the dialog ITSELF — after a save, say —\n  // unmounts with no exit, which is the documented limit of this.\n  const { closing, requestClose } = useCloseTransition(onClose);\n  const backdropClose = useBackdropClose(requestClose);\n  // Back means the same as Escape here. On a phone Escape doesn't exist, so without\n  // this the only way out of a dialog is finding its close button — and Back, the\n  // gesture everyone reaches for, navigated the page underneath instead (#172).\n  // Mounted only while open, hence the constant `true`.\n  useOverlayHistory(true, requestClose);\n\n  // Mounted only while open, hence the constant `true`. Through the shared hook and\n  // not by hand: this component's own save/restore copy was one half of the pair that\n  // left the page permanently unscrollable when a dialog containing an open sheet was\n  // closed — see the note in use-body-scroll-lock.ts.\n  useBodyScrollLock(true);\n\n  useEffect(() => {\n    const previouslyFocused = document.activeElement as HTMLElement | null;\n    // Focus the panel itself (not the first field) so opening doesn't pop the\n    // mobile keyboard, while still moving focus into the dialog for keyboard and\n    // screen-reader users.\n    panelRef.current?.focus();\n    return () => {\n      previouslyFocused?.focus?.();\n    };\n  }, []);\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(e);\n    if (e.defaultPrevented) return;\n    if (e.key === \"Escape\") {\n      e.stopPropagation();\n      requestClose();\n      return;\n    }\n    if (e.key !== \"Tab\") return;\n    // Keep Tab within the dialog. Elements inside a portal'd panel (e.g. an open\n    // dropdown) live outside this subtree, so this handler never fires for them\n    // — they manage their own focus.\n    const focusables = panelRef.current?.querySelectorAll<HTMLElement>(FOCUSABLE);\n    if (!focusables || focusables.length === 0) {\n      e.preventDefault();\n      panelRef.current?.focus();\n      return;\n    }\n    const first = focusables[0];\n    const last = focusables[focusables.length - 1];\n    const active = document.activeElement;\n    if (e.shiftKey && (active === first || active === panelRef.current)) {\n      e.preventDefault();\n      last.focus();\n    } else if (!e.shiftKey && active === last) {\n      e.preventDefault();\n      first.focus();\n    }\n  };\n\n  // Portal to <body> so the `fixed inset-0 z-50` overlay escapes whatever stacking\n  // context its caller sits in. Rendered inline, a modal opened from e.g. the top\n  // bar (a z-30 context) could paint BELOW a sibling z-30 sticky element like the\n  // expanded transaction editor (feedback #320). The tour/command-palette overlays\n  // already portal for the same reason.\n  return createPortal(\n    <div\n      className={cn(\n        // Live #320. The panel below rises only where it is bottom-anchored: from md up\n        // it is centred, and a centred box sliding up from off-screen reads as a\n        // different component arriving rather than as the same one settling.\n        closing ? \"animate-overlay-out\" : \"animate-overlay\",\n        \"fixed inset-0 z-50 flex items-end justify-center bg-black/40 md:items-center\",\n        fullBleed ? \"p-0 md:p-4\" : \"p-4\",\n      )}\n      {...backdropClose}\n    >\n      <div\n        ref={panelRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={labelledBy}\n        tabIndex={-1}\n        onKeyDown={handleKeyDown}\n        onPointerDown={drag.onPointerDown}\n        style={drag.style}\n        className={cn(\n          closing ? \"animate-sheet-out md:animate-none\" : \"animate-sheet md:animate-none\",\n          \"w-full rounded-lg border border-slate-200 bg-white shadow-sm outline-none dark:border-slate-800 dark:bg-slate-900\",\n          { md: \"max-w-md\", lg: \"max-w-lg\", xl: \"max-w-3xl\" }[size],\n          // A panel taller than the screen has to scroll ITSELF. The backdrop is\n          // `fixed inset-0` and the body is scroll-locked while a dialog is open, so\n          // without this the overflow simply had nowhere to go: on a phone the panel\n          // is bottom-anchored, so it grew UPWARD past the top edge and the part that\n          // went past it could not be reached by any gesture (Keksdose live #254, on\n          // the price-merge dialog — but it was every dialog with more than a screen\n          // of content). `max-h-full` resolves against the backdrop's content box,\n          // which is the viewport minus its own padding, so the panel stops exactly\n          // where the screen does; `overscroll-contain` keeps the fling inside it.\n          //\n          // Three callers had already patched themselves with `max-h-[90vh]` +\n          // an inner scroller. Those still win — `cn` is tailwind-merge — and this is\n          // the default they should not have needed.\n          \"max-h-full overflow-y-auto overscroll-contain\",\n          \"p-4\",\n          // The grab affordance sits on the panel's own top strip: a drag handle of\n          // its own would be one more control in a dialog that is mostly one field.\n          draggable && \"md:[&>*:first-child]:cursor-grab\",\n          className,\n        )}\n      >\n        {children}\n      </div>\n    </div>,\n    document.body,\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/multi-entity-combobox.d.ts

@@ -0,0 +1,47 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { ComboOption } from './combobox-core.js';
+import '../hooks/use-anchored-rect.js';
+import '../hooks/use-anchored-panel.js';
+
+interface MultiEntityComboboxProps<V extends string | number> {
+    /** Selected ids. */
+    value: V[];
+    onChange: (value: V[]) => void;
+    /** Already-loaded options (client-side filtered); also resolves selected labels. */
+    options?: ComboOption<V>[];
+    /** Async option source, debounced + race-safe. When set, `options` resolves
+     *  labels only. */
+    loadOptions?: (query: string) => Promise<ComboOption<V>[]>;
+    loading?: boolean;
+    label?: ReactNode;
+    placeholder?: string;
+    searchPlaceholder?: string;
+    emptyLabel?: string;
+    /** Trigger summary when 1+ selected (default: the labels joined by ", ", or
+     *  "N selected" when a label can't be resolved). */
+    itemLabel?: (count: number) => string;
+    clearable?: boolean;
+    clearLabel?: string;
+    /** The phone sheet's close button. Its own prop rather than a reuse of
+     *  `clearLabel`: "clear the selection" and "close this screen" are different
+     *  actions, and on a full-screen sheet the close button is the only way out —
+     *  so it is the one control here that MUST be in the reader's language. */
+    closeLabel?: string;
+    disabled?: boolean;
+    /** When set, a "create" row appears for a non-empty query with no exact match.
+     *  The panel stays open (adding the new entity to `value` is the caller's job). */
+    onCreate?: (query: string) => void;
+    createLabel?: (query: string) => string;
+    className?: string;
+    /** Required and unanswered — {@link FIELD_INVALID}. See {@link Input}'s `invalid`. */
+    invalid?: boolean;
+}
+/**
+ * Multi-value sibling of {@link EntityCombobox}: pick several entities by search,
+ * with the same async `loadOptions`/`onCreate` support. Rows show a checkbox and
+ * toggle without closing the panel; the trigger summarises the selection.
+ */
+declare function MultiEntityCombobox<V extends string | number>({ value, onChange, options, loadOptions, loading, label, placeholder, searchPlaceholder, emptyLabel, itemLabel, clearable, clearLabel, closeLabel, disabled, onCreate, createLabel, className, invalid, }: MultiEntityComboboxProps<V>): react.JSX.Element;
+
+export { MultiEntityCombobox, type MultiEntityComboboxProps };

package/dist/components/multi-entity-combobox.js

@@ -0,0 +1,116 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { X } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { FieldChevron, FieldLabel, FIELD_TRIGGER, FIELD_FLOATING_PAD, FIELD_INVALID } from "./ui.js";
+import { ComboboxPanel, useComboboxCore } from "./combobox-core.js";
+function MultiEntityCombobox({
+  value,
+  onChange,
+  options,
+  loadOptions,
+  loading,
+  label,
+  placeholder,
+  searchPlaceholder = "Search",
+  emptyLabel = "No results",
+  itemLabel,
+  clearable,
+  clearLabel,
+  closeLabel,
+  disabled,
+  onCreate,
+  createLabel,
+  className,
+  invalid
+}) {
+  const core = useComboboxCore({ options, loadOptions, loading });
+  const { results, resolve, setOpen } = core;
+  const valueSet = useMemo(() => new Set(value), [value]);
+  const summary = (() => {
+    if (value.length === 0) return placeholder ?? "";
+    if (itemLabel) return itemLabel(value.length);
+    const chosen = value.map(resolve);
+    return chosen.every(Boolean) ? chosen.map((o) => o.label).join(", ") : `${value.length} selected`;
+  })();
+  const q = core.query.trim();
+  const showCreate = Boolean(onCreate) && q.length > 0 && !results.some((o) => o.label.toLowerCase() === q.toLowerCase());
+  const showClear = Boolean(clearable && value.length > 0 && !disabled);
+  const toggle = (o) => {
+    core.cacheRef.current.set(o.value, o);
+    if (valueSet.has(o.value)) onChange(value.filter((v) => v !== o.value));
+    else onChange([...value, o.value]);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+    label !== void 0 && /* @__PURE__ */ jsx(FieldLabel, { children: label }),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: core.triggerRef,
+        type: "button",
+        "aria-label": typeof label === "string" ? `${label}: ${summary}` : void 0,
+        disabled,
+        "aria-invalid": invalid || void 0,
+        onClick: () => !disabled && setOpen((o) => !o),
+        className: cn(
+          FIELD_TRIGGER,
+          "pr-9",
+          label !== void 0 && FIELD_FLOATING_PAD,
+          disabled && "cursor-not-allowed opacity-50",
+          invalid && FIELD_INVALID
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "min-w-0 truncate",
+                // Inherit FIELD_BASE's ink for a value, keep the placeholder grey — the
+                // same rule every field on a form row follows (Keksdose dev#477).
+                !value.length && "text-slate-400 dark:text-slate-500"
+              ),
+              children: summary
+            }
+          ),
+          showClear ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              role: "button",
+              tabIndex: -1,
+              "aria-label": clearLabel ?? "Clear",
+              onClick: (e) => {
+                e.stopPropagation();
+                onChange([]);
+              },
+              className: "absolute right-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-slate-400 hover:text-slate-600 dark:text-slate-500 dark:hover:text-slate-300",
+              children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+            }
+          ) : /* @__PURE__ */ jsx(FieldChevron, {})
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ComboboxPanel,
+      {
+        core,
+        multi: true,
+        sheetTitle: label ?? placeholder,
+        searchPlaceholder,
+        emptyLabel,
+        closeLabel,
+        isSelected: (v) => valueSet.has(v),
+        onChoose: toggle,
+        showCreate,
+        onCreate: () => {
+          onCreate?.(q);
+          core.setQuery("");
+        },
+        createContent: createLabel ? createLabel(q) : `Create \u201C${q}\u201D`
+      }
+    )
+  ] });
+}
+export {
+  MultiEntityCombobox
+};
+//# sourceMappingURL=multi-entity-combobox.js.map

package/dist/components/multi-entity-combobox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/multi-entity-combobox.tsx"],"sourcesContent":["import { useMemo, type ReactNode } from \"react\";\nimport { X } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { FieldChevron, FieldLabel, FIELD_TRIGGER, FIELD_FLOATING_PAD, FIELD_INVALID } from \"./ui\";\nimport { ComboboxPanel, useComboboxCore, type ComboOption } from \"./combobox-core\";\n\nexport interface MultiEntityComboboxProps<V extends string | number> {\n  /** Selected ids. */\n  value: V[];\n  onChange: (value: V[]) => void;\n  /** Already-loaded options (client-side filtered); also resolves selected labels. */\n  options?: ComboOption<V>[];\n  /** Async option source, debounced + race-safe. When set, `options` resolves\n   *  labels only. */\n  loadOptions?: (query: string) => Promise<ComboOption<V>[]>;\n  loading?: boolean;\n  label?: ReactNode;\n  placeholder?: string;\n  searchPlaceholder?: string;\n  emptyLabel?: string;\n  /** Trigger summary when 1+ selected (default: the labels joined by \", \", or\n   *  \"N selected\" when a label can't be resolved). */\n  itemLabel?: (count: number) => string;\n  clearable?: boolean;\n  clearLabel?: string;\n  /** The phone sheet's close button. Its own prop rather than a reuse of\n   *  `clearLabel`: \"clear the selection\" and \"close this screen\" are different\n   *  actions, and on a full-screen sheet the close button is the only way out —\n   *  so it is the one control here that MUST be in the reader's language. */\n  closeLabel?: string;\n  disabled?: boolean;\n  /** When set, a \"create\" row appears for a non-empty query with no exact match.\n   *  The panel stays open (adding the new entity to `value` is the caller's job). */\n  onCreate?: (query: string) => void;\n  createLabel?: (query: string) => string;\n  className?: string;\n  /** Required and unanswered — {@link FIELD_INVALID}. See {@link Input}'s `invalid`. */\n  invalid?: boolean;\n}\n\n/**\n * Multi-value sibling of {@link EntityCombobox}: pick several entities by search,\n * with the same async `loadOptions`/`onCreate` support. Rows show a checkbox and\n * toggle without closing the panel; the trigger summarises the selection.\n */\nexport function MultiEntityCombobox<V extends string | number>({\n  value,\n  onChange,\n  options,\n  loadOptions,\n  loading,\n  label,\n  placeholder,\n  searchPlaceholder = \"Search\",\n  emptyLabel = \"No results\",\n  itemLabel,\n  clearable,\n  clearLabel,\n  closeLabel,\n  disabled,\n  onCreate,\n  createLabel,\n  className,\n  invalid,\n}: MultiEntityComboboxProps<V>) {\n  const core = useComboboxCore<V>({ options, loadOptions, loading });\n  const { results, resolve, setOpen } = core;\n\n  const valueSet = useMemo(() => new Set(value), [value]);\n  const summary = (() => {\n    if (value.length === 0) return placeholder ?? \"\";\n    if (itemLabel) return itemLabel(value.length);\n    const chosen = value.map(resolve);\n    return chosen.every(Boolean)\n      ? chosen.map((o) => o!.label).join(\", \")\n      : `${value.length} selected`;\n  })();\n\n  const q = core.query.trim();\n  const showCreate =\n    Boolean(onCreate) && q.length > 0 && !results.some((o) => o.label.toLowerCase() === q.toLowerCase());\n  const showClear = Boolean(clearable && value.length > 0 && !disabled);\n\n  const toggle = (o: ComboOption<V>) => {\n    core.cacheRef.current.set(o.value, o);\n    if (valueSet.has(o.value)) onChange(value.filter((v) => v !== o.value));\n    else onChange([...value, o.value]);\n    // Stay open — multi-select keeps adding.\n  };\n\n  return (\n    <div className={cn(\"relative\", className)}>\n      {label !== undefined && <FieldLabel>{label}</FieldLabel>}\n      <button\n        ref={core.triggerRef}\n        type=\"button\"\n        // The label is a floating <span>, not a <label for>, so without this the\n        // trigger's accessible name is whatever value happens to be selected —\n        // \"Checking\" with nothing saying it is the account. The label AND the\n        // value, because `aria-label` replaces the content rather than adding to\n        // it, and a control that announces only its name has lost the answer.\n        aria-label={\n          typeof label === \"string\" ? `${label}: ${summary}` : undefined\n        }\n        disabled={disabled}\n        aria-invalid={invalid || undefined}\n        onClick={() => !disabled && setOpen((o) => !o)}\n        className={cn(\n          FIELD_TRIGGER,\n          \"pr-9\",\n          label !== undefined && FIELD_FLOATING_PAD,\n          disabled && \"cursor-not-allowed opacity-50\",\n          invalid && FIELD_INVALID,\n        )}\n      >\n        <span\n          className={cn(\n            \"min-w-0 truncate\",\n            // Inherit FIELD_BASE's ink for a value, keep the placeholder grey — the\n            // same rule every field on a form row follows (Keksdose dev#477).\n            !value.length && \"text-slate-400 dark:text-slate-500\",\n          )}\n        >\n          {summary}\n        </span>\n        {showClear ? (\n          <span\n            role=\"button\"\n            tabIndex={-1}\n            aria-label={clearLabel ?? \"Clear\"}\n            onClick={(e) => {\n              e.stopPropagation();\n              onChange([]);\n            }}\n            className=\"absolute right-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-slate-400 hover:text-slate-600 dark:text-slate-500 dark:hover:text-slate-300\"\n          >\n            <X className=\"size-4\" />\n          </span>\n        ) : (\n          <FieldChevron />\n        )}\n      </button>\n      <ComboboxPanel\n        core={core}\n        multi\n        // On a phone the panel becomes a full-screen sheet, which needs the field's\n        // own label to say what it is asking for (live #200).\n        sheetTitle={label ?? placeholder}\n        searchPlaceholder={searchPlaceholder}\n        emptyLabel={emptyLabel}\n        closeLabel={closeLabel}\n        isSelected={(v) => valueSet.has(v)}\n        onChoose={toggle}\n        showCreate={showCreate}\n        onCreate={() => {\n          onCreate?.(q);\n          core.setQuery(\"\");\n        }}\n        createContent={createLabel ? createLabel(q) : `Create “${q}”`}\n      />\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/multi-select.d.ts

@@ -0,0 +1,39 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+interface MultiSelectOption {
+    value: string | number;
+    label: string;
+    hint?: string;
+}
+interface Props {
+    options: MultiSelectOption[];
+    values: (string | number)[];
+    onChange: (next: (string | number)[]) => void;
+    /** Displayed when no value is selected (i.e. "all"). Defaults to "All"; pass a
+     * translated string for i18n. */
+    allLabel?: string;
+    /** Singular/plural countable label, used when 1+ items are selected. */
+    itemLabel?: (count: number) => string;
+    placeholder?: string;
+    /** Embedded top-boundary label, matching the native Input/Select fields. */
+    label?: ReactNode;
+    /** Search-box placeholder (default "Search"). */
+    searchLabel?: string;
+    /** "Select all" action label (default "Select all"). */
+    selectAllLabel?: string;
+    /** "Clear" action label (default "Clear"). */
+    clearLabel?: string;
+    className?: string;
+    /** Extra classes for the open dropdown PANEL — the way to widen it past its
+     *  16rem default when the rows carry more than a label (Keksdose feedback #147). */
+    panelClassName?: string;
+    /** Required and unanswered — {@link FIELD_INVALID}, the same rose border the
+     *  native `Select` has worn since feedback #235. Every field-styled control in
+     *  this package carries it now, so a form can mark any of its fields rather than
+     *  only the one that happened to have it first. */
+    invalid?: boolean;
+}
+declare function MultiSelect({ options, values, onChange, allLabel, itemLabel, placeholder, label, searchLabel, selectAllLabel, clearLabel, className, panelClassName, invalid, }: Props): react.JSX.Element;
+
+export { MultiSelect, type MultiSelectOption };

package/dist/components/multi-select.js

@@ -0,0 +1,132 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Check } from "lucide-react";
+import { FieldChevron, FieldLabel, FIELD_TRIGGER, FIELD_INVALID, FIELD_FLOATING_PAD } from "./ui.js";
+import { cn } from "../lib/cn.js";
+import { DropdownPanel, DropdownSearchHeader, useDropdownSearch } from "./dropdown.js";
+function MultiSelect({
+  options,
+  values,
+  onChange,
+  allLabel,
+  itemLabel,
+  placeholder,
+  label,
+  searchLabel = "Search",
+  selectAllLabel = "Select all",
+  clearLabel = "Clear",
+  className,
+  panelClassName,
+  invalid
+}) {
+  const { open, setOpen, wrapperRef, query, setQuery, inputRef } = useDropdownSearch();
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return options;
+    return options.filter(
+      (o) => o.label.toLowerCase().includes(q) || (o.hint ?? "").toLowerCase().includes(q)
+    );
+  }, [options, query]);
+  const valueSet = useMemo(() => new Set(values), [values]);
+  const allChecked = options.length > 0 && options.every((o) => valueSet.has(o.value));
+  const anyChecked = values.length > 0;
+  const selectedSummary = (() => {
+    if (!anyChecked) return allLabel ?? placeholder ?? "All";
+    if (allChecked) return allLabel ?? placeholder ?? "All";
+    return itemLabel ? itemLabel(values.length) : `${values.length}`;
+  })();
+  const toggle = (val) => {
+    if (valueSet.has(val)) onChange(values.filter((v) => v !== val));
+    else onChange([...values, val]);
+  };
+  const selectAll = () => onChange(options.map((o) => o.value));
+  const clearAll = () => onChange([]);
+  return /* @__PURE__ */ jsxs("div", { ref: wrapperRef, className: cn("relative", className), children: [
+    label !== void 0 && /* @__PURE__ */ jsx(FieldLabel, { children: label }),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen((v) => !v),
+        "aria-invalid": invalid || void 0,
+        className: cn(FIELD_TRIGGER, "pr-9", label !== void 0 && FIELD_FLOATING_PAD, invalid && FIELD_INVALID),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "truncate", children: selectedSummary }),
+          /* @__PURE__ */ jsx(FieldChevron, {})
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsx(
+      DropdownPanel,
+      {
+        className: cn("w-64", panelClassName),
+        empty: filtered.length === 0,
+        header: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            DropdownSearchHeader,
+            {
+              query,
+              onQueryChange: setQuery,
+              inputRef,
+              placeholder: searchLabel
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 px-2 py-1.5 text-xs", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: selectAll,
+                disabled: allChecked,
+                className: "rounded px-2 py-0.5 text-slate-600 hover:bg-slate-100 disabled:opacity-40 dark:text-slate-300 dark:hover:bg-slate-800",
+                children: selectAllLabel
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: clearAll,
+                disabled: !anyChecked,
+                className: "rounded px-2 py-0.5 text-slate-600 hover:bg-slate-100 disabled:opacity-40 dark:text-slate-300 dark:hover:bg-slate-800",
+                children: clearLabel
+              }
+            )
+          ] })
+        ] }),
+        children: filtered.map((o) => {
+          const checked = valueSet.has(o.value);
+          return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => toggle(o.value),
+              className: cn(
+                "flex w-full items-center justify-between gap-2 px-3 py-1.5 text-sm text-left hover:bg-slate-50 dark:hover:bg-slate-800",
+                checked && "bg-slate-100/60 dark:bg-slate-800/60"
+              ),
+              children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2 min-w-0", children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "flex size-4 shrink-0 items-center justify-center rounded border",
+                      checked ? "border-slate-900 bg-slate-900 text-white dark:border-slate-100 dark:bg-slate-100 dark:text-slate-900" : "border-slate-300 bg-white dark:border-slate-600 dark:bg-slate-900"
+                    ),
+                    children: checked && /* @__PURE__ */ jsx(Check, { className: "size-3" })
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "truncate text-slate-900 dark:text-slate-100", children: o.label }),
+                o.hint && /* @__PURE__ */ jsx("span", { className: "truncate text-xs text-slate-400 dark:text-slate-500", children: o.hint })
+              ] })
+            }
+          ) }, o.value);
+        })
+      }
+    )
+  ] });
+}
+export {
+  MultiSelect
+};
+//# sourceMappingURL=multi-select.js.map

package/dist/components/multi-select.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/multi-select.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { Check } from \"lucide-react\";\nimport { FieldChevron, FieldLabel, FIELD_TRIGGER, FIELD_INVALID, FIELD_FLOATING_PAD } from \"./ui\";\nimport { cn } from \"../lib/cn\";\nimport { DropdownPanel, DropdownSearchHeader, useDropdownSearch } from \"./dropdown\";\n\nexport interface MultiSelectOption {\n  value: string | number;\n  label: string;\n  hint?: string;\n}\n\ninterface Props {\n  options: MultiSelectOption[];\n  values: (string | number)[];\n  onChange: (next: (string | number)[]) => void;\n  /** Displayed when no value is selected (i.e. \"all\"). Defaults to \"All\"; pass a\n   * translated string for i18n. */\n  allLabel?: string;\n  /** Singular/plural countable label, used when 1+ items are selected. */\n  itemLabel?: (count: number) => string;\n  placeholder?: string;\n  /** Embedded top-boundary label, matching the native Input/Select fields. */\n  label?: ReactNode;\n  /** Search-box placeholder (default \"Search\"). */\n  searchLabel?: string;\n  /** \"Select all\" action label (default \"Select all\"). */\n  selectAllLabel?: string;\n  /** \"Clear\" action label (default \"Clear\"). */\n  clearLabel?: string;\n  className?: string;\n  /** Extra classes for the open dropdown PANEL — the way to widen it past its\n   *  16rem default when the rows carry more than a label (Keksdose feedback #147). */\n  panelClassName?: string;\n  /** Required and unanswered — {@link FIELD_INVALID}, the same rose border the\n   *  native `Select` has worn since feedback #235. Every field-styled control in\n   *  this package carries it now, so a form can mark any of its fields rather than\n   *  only the one that happened to have it first. */\n  invalid?: boolean;\n}\n\nexport function MultiSelect({\n  options,\n  values,\n  onChange,\n  allLabel,\n  itemLabel,\n  placeholder,\n  label,\n  searchLabel = \"Search\",\n  selectAllLabel = \"Select all\",\n  clearLabel = \"Clear\",\n  className,\n  panelClassName,\n  invalid,\n}: Props) {\n  const { open, setOpen, wrapperRef, query, setQuery, inputRef } = useDropdownSearch();\n\n  const filtered = useMemo(() => {\n    const q = query.trim().toLowerCase();\n    if (!q) return options;\n    return options.filter(\n      (o) =>\n        o.label.toLowerCase().includes(q) ||\n        (o.hint ?? \"\").toLowerCase().includes(q),\n    );\n  }, [options, query]);\n\n  const valueSet = useMemo(() => new Set(values), [values]);\n  const allChecked = options.length > 0 && options.every((o) => valueSet.has(o.value));\n  const anyChecked = values.length > 0;\n  const selectedSummary = (() => {\n    if (!anyChecked) return allLabel ?? placeholder ?? \"All\";\n    if (allChecked) return allLabel ?? placeholder ?? \"All\";\n    return itemLabel ? itemLabel(values.length) : `${values.length}`;\n  })();\n\n  const toggle = (val: string | number) => {\n    if (valueSet.has(val)) onChange(values.filter((v) => v !== val));\n    else onChange([...values, val]);\n  };\n\n  const selectAll = () => onChange(options.map((o) => o.value));\n  const clearAll = () => onChange([]);\n\n  return (\n    <div ref={wrapperRef} className={cn(\"relative\", className)}>\n      {label !== undefined && <FieldLabel>{label}</FieldLabel>}\n      <button\n        type=\"button\"\n        onClick={() => setOpen((v) => !v)}\n        aria-invalid={invalid || undefined}\n        className={cn(FIELD_TRIGGER, \"pr-9\", label !== undefined && FIELD_FLOATING_PAD, invalid && FIELD_INVALID)}\n      >\n        {/* The summary IS the field's value, so it inherits FIELD_BASE's ink rather\n            than restating a lighter one (Keksdose dev#477). */}\n        <span className=\"truncate\">{selectedSummary}</span>\n        <FieldChevron />\n      </button>\n      {open && (\n        <DropdownPanel\n          // 16rem by default; `panelClassName` is how a caller widens it (Keksdose\n          // feedback #147: the market picker's rows carry a postcode, a town, a\n          // distance and a receipt count, all of which were being truncated). The\n          // override used to be applied from the OUTSIDE with a\n          // `[&>div]:w-full` descendant selector, which worked and was a hack —\n          // \"change the package\" was the right call.\n          className={cn(\"w-64\", panelClassName)}\n          empty={filtered.length === 0}\n          header={\n            <>\n              <DropdownSearchHeader\n                query={query}\n                onQueryChange={setQuery}\n                inputRef={inputRef}\n                placeholder={searchLabel}\n              />\n              <div className=\"flex items-center justify-between gap-2 px-2 py-1.5 text-xs\">\n                <button\n                  type=\"button\"\n                  onClick={selectAll}\n                  disabled={allChecked}\n                  className=\"rounded px-2 py-0.5 text-slate-600 hover:bg-slate-100 disabled:opacity-40 dark:text-slate-300 dark:hover:bg-slate-800\"\n                >\n                  {selectAllLabel}\n                </button>\n                <button\n                  type=\"button\"\n                  onClick={clearAll}\n                  disabled={!anyChecked}\n                  className=\"rounded px-2 py-0.5 text-slate-600 hover:bg-slate-100 disabled:opacity-40 dark:text-slate-300 dark:hover:bg-slate-800\"\n                >\n                  {clearLabel}\n                </button>\n              </div>\n            </>\n          }\n        >\n          {filtered.map((o) => {\n              const checked = valueSet.has(o.value);\n              return (\n                <li key={o.value}>\n                  <button\n                    type=\"button\"\n                    onClick={() => toggle(o.value)}\n                    className={cn(\n                      \"flex w-full items-center justify-between gap-2 px-3 py-1.5 text-sm text-left hover:bg-slate-50 dark:hover:bg-slate-800\",\n                      checked && \"bg-slate-100/60 dark:bg-slate-800/60\",\n                    )}\n                  >\n                    <span className=\"flex items-center gap-2 min-w-0\">\n                      <span\n                        className={cn(\n                          \"flex size-4 shrink-0 items-center justify-center rounded border\",\n                          checked\n                            ? \"border-slate-900 bg-slate-900 text-white dark:border-slate-100 dark:bg-slate-100 dark:text-slate-900\"\n                            : \"border-slate-300 bg-white dark:border-slate-600 dark:bg-slate-900\",\n                        )}\n                      >\n                        {checked && <Check className=\"size-3\" />}\n                      </span>\n                      <span className=\"truncate text-slate-900 dark:text-slate-100\">{o.label}</span>\n                      {o.hint && (\n                        <span className=\"truncate text-xs text-slate-400 dark:text-slate-500\">\n                          {o.hint}\n                        </span>\n                      )}\n                    </span>\n                  </button>\n                </li>\n              );\n            })}\n        </DropdownPanel>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/number-input.d.ts

@@ -0,0 +1,74 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { CalculatorButtonLabels } from './calculator.js';
+
+interface NumberInputProps {
+    value: string;
+    /** Fired on every keystroke with the raw text (comma → dot, operators kept so
+     * a typed expression survives). */
+    onChange: (value: string) => void;
+    /** Fired on blur/Enter with the *evaluated* value — use this for save-on-blur
+     * fields so the save always sees the resolved number, never "10+5". */
+    onCommit?: (value: string) => void;
+    label?: ReactNode;
+    ariaLabel?: string;
+    /** Names for the calculator this field renders — its trigger, and the controls
+     *  inside the popover. English defaults, so a host that does not translate is
+     *  unaffected. */
+    labels?: {
+        calculatorTrigger?: string;
+        calculator?: CalculatorButtonLabels;
+    };
+    placeholder?: string;
+    disabled?: boolean;
+    autoFocus?: boolean;
+    /** Wrapper class. */
+    className?: string;
+    /** Overrides the input's own styling (merged after the field base). */
+    inputClassName?: string;
+    id?: string;
+    /** Show the calculator-popover trigger (default true). Set false for fields in
+     * an ephemeral close-on-blur editor, where clicking the icon would blur away
+     * and tear the editor down before the popover could open — inline typing
+     * (e.g. "200+50" → Enter) still evaluates there. */
+    calculator?: boolean;
+    /** {@link FIELD_DISPLAY} — on a phone, the figure at display size with the field
+     *  chrome dropped. The currency-free half of the same treatment `AmountInput`
+     *  carries, for a dialog whose whole point is the one number (a budget goal's
+     *  target); not for a field among many, and never for the compact inline
+     *  editors this control also serves. */
+    variant?: "field" | "display";
+    /** A {@link FieldHint} "?" on the label's own line, beside the label rather
+     *  than at the far end of the strip — the far end is where the calculator
+     *  lives, and a hint placed there landed on top of it (steering-design
+     *  feedback #48). */
+    hint?: ReactNode;
+    /** Required and unanswered — {@link FIELD_INVALID}. See {@link Input}'s `invalid`. */
+    invalid?: boolean;
+    /**
+     * A static unit shown at the field's right edge — "%", "kg", "km/h".
+     *
+     * The read-out half of {@link AmountInput}'s currency chip, and it exists for the
+     * same reason that one does: a unit belongs to the FIELD, not to the text, so
+     * typing it is a way to get it into the value. Keksdose had a percentage spelled
+     * three different ways across three screens — `<Input type="number" step="0.01">`
+     * for a loan rate, `step="0.1"` for a tax rate, `inputMode="decimal"` for a VAT
+     * rate — and none of the three showed a "%" anywhere near the box, so what the
+     * digits meant was a question the label alone had to answer.
+     *
+     * `aria-hidden`, like the currency read-out: it is a property of the field that
+     * the label already names ("Interest rate (%)"), and announcing it again after
+     * every value reads as part of the number.
+     */
+    suffix?: ReactNode;
+}
+/**
+ * A numeric text field with a built-in calculator: type a calculation straight
+ * in (e.g. "12+5", evaluated on blur/Enter) or click the trailing calculator
+ * icon for a keypad. String `value`/`onChange` contract, mirroring
+ * {@link AmountInput} — the currency-free counterpart for budgets, goals,
+ * invoice totals and split lines.
+ */
+declare function NumberInput({ value, onChange, onCommit, label, ariaLabel, labels, placeholder, disabled, autoFocus, className, inputClassName, id, calculator, variant, hint, invalid, suffix, }: NumberInputProps): react.JSX.Element;
+
+export { NumberInput };