@eifi1/ui-kit 0.4.0

package/dist/components/dropdown.d.ts

@@ -0,0 +1,98 @@
+import * as react from 'react';
+import { ReactNode, RefObject } from 'react';
+
+/**
+ * Open state + close-on-outside-click for the custom dropdowns (MultiSelect,
+ * CurrencySelect, AmountInput's currency picker, Combobox). Attach `wrapperRef`
+ * to the relatively-positioned container; the popover lives inside it so a click
+ * anywhere else closes it.
+ *
+ * ## Back closes the list, not the page behind it
+ *
+ * Keksdose live #309 rework: *"It shall only close it if it is prior open, and not
+ * when I am seeing the dialog."* Round one wired {@link PickerSheet} — the shape
+ * these lists take on a PHONE — into {@link useOverlayHistory}, and left the pointer
+ * shape out. So on a desktop one Back press over an open list still went past it to
+ * the dialog underneath: measured on his own budget, the transfer form's account list
+ * was showing and Back took the entire add card, amount and all. That is the same
+ * loss round one called *"discarding an edit in progress in order to dismiss a
+ * list"*, in the other shell.
+ *
+ * Every dropdown built on this hook is dismissible and is the topmost thing on screen
+ * while it is up, so the rule is the hook's rather than each caller's. `backCloses`
+ * is for the ONE case where a second entry would be wrong: a caller whose panel is
+ * itself a `PickerSheet`, which already registers one — both comboboxes swap shape at
+ * {@link PHONE_QUERY}, and two entries would cost two Back presses to close one sheet.
+ */
+declare function useDropdown<T extends HTMLElement = HTMLDivElement>({ backCloses, }?: {
+    backCloses?: boolean;
+}): {
+    open: boolean;
+    setOpen: react.Dispatch<react.SetStateAction<boolean>>;
+    wrapperRef: RefObject<T | null>;
+    panelRef: RefObject<HTMLDivElement | null>;
+};
+/**
+ * {@link useDropdown} plus a search box: clears the query and focuses the search
+ * input each time the panel opens, so typing filters immediately.
+ */
+declare function useDropdownSearch<T extends HTMLElement = HTMLDivElement>(): {
+    open: boolean;
+    setOpen: react.Dispatch<react.SetStateAction<boolean>>;
+    wrapperRef: RefObject<T | null>;
+    panelRef: RefObject<HTMLDivElement | null>;
+    query: string;
+    setQuery: react.Dispatch<react.SetStateAction<string>>;
+    inputRef: RefObject<HTMLInputElement | null>;
+};
+/** The search row (magnifier + text input) shared by the searchable dropdowns. */
+declare function DropdownSearchHeader({ query, onQueryChange, inputRef, placeholder, }: {
+    query: string;
+    onQueryChange: (v: string) => void;
+    inputRef: RefObject<HTMLInputElement | null>;
+    placeholder?: string;
+}): react.JSX.Element;
+/**
+ * The floating popover surface for the searchable dropdowns: bordered/shadowed
+ * panel, an optional `header` slot (search box, plus any actions), and a
+ * scrollable `<ul>` of `children` with an "empty" row when nothing matches.
+ *
+ * ## Anchored, or merely absolute
+ *
+ * Without `anchorRef` the panel is `position: absolute` inside whatever relative box
+ * the caller put it in, and the caller places it with `className` (`w-64`,
+ * `right-0 top-full`). That is fine in a page that does not scroll around it, and
+ * wrong the moment an ancestor has `overflow` — the panel is then CLIPPED by that
+ * ancestor's box, with no error and no scrollbar, just a list with its side sliced
+ * off. Keksdose dev#548 is what that looks like in practice: the app's own content
+ * scroller starts 280px from the left, the amount field's currency picker opens
+ * right-aligned and 256px wide, and in the transaction row editor its left third —
+ * the search box's first letter, and every row's currency symbol — was cut away.
+ *
+ * With `anchorRef` the panel is PORTALLED to `<body>` and positioned `fixed` against
+ * that trigger's rect, so no ancestor can clip it: the same treatment {@link Popover}
+ * already gives the calculator, and the same reason. It re-aligns on scroll and
+ * resize, flips above the trigger when the room is there instead (a phone keyboard
+ * eats the bottom of the screen), and is clamped to the viewport's edges so a trigger
+ * near either side cannot push it off-screen.
+ *
+ * Pass `panelRef` from {@link useDropdown} along with it: once portalled the panel is
+ * no longer inside the wrapper, so the outside-click handler has to be told about it
+ * or the first click on an option closes the list instead of choosing from it.
+ */
+declare function DropdownPanel({ header, empty, className, anchorRef, panelRef, width, align, children, }: {
+    header?: ReactNode;
+    empty?: boolean;
+    className?: string;
+    /** The trigger to hang off. Given, the panel portals and goes `fixed`. */
+    anchorRef?: RefObject<HTMLElement | null>;
+    /** {@link useDropdown}'s `panelRef`, so an outside-click sees this as inside. */
+    panelRef?: RefObject<HTMLDivElement | null>;
+    /** Panel width in px, for the anchored form (the CSS `w-*` cannot be measured). */
+    width?: number;
+    /** Which of the panel's edges lines up with the trigger's, room permitting. */
+    align?: "left" | "right";
+    children: ReactNode;
+}): react.JSX.Element | null;
+
+export { DropdownPanel, DropdownSearchHeader, useDropdown, useDropdownSearch };

package/dist/components/dropdown.js

@@ -0,0 +1,122 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { Search } from "lucide-react";
+import { useAnchoredPanel } from "../hooks/use-anchored-panel.js";
+import { useOverlayHistory } from "../hooks/use-overlay-history.js";
+import { cn } from "../lib/cn.js";
+function useDropdown({
+  backCloses = true
+} = {}) {
+  const [open, setOpen] = useState(false);
+  const wrapperRef = useRef(null);
+  const panelRef = useRef(null);
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e) => {
+      const target = e.target;
+      const inside = (wrapperRef.current?.contains(target) ?? false) || (panelRef.current?.contains(target) ?? false);
+      if (!inside) setOpen(false);
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [open]);
+  useOverlayHistory(open && backCloses, useCallback(() => setOpen(false), []));
+  return { open, setOpen, wrapperRef, panelRef };
+}
+function useDropdownSearch() {
+  const { open, setOpen, wrapperRef, panelRef } = useDropdown();
+  const [query, setQuery] = useState("");
+  const inputRef = useRef(null);
+  useEffect(() => {
+    if (open) {
+      setQuery("");
+      requestAnimationFrame(() => inputRef.current?.focus());
+    }
+  }, [open]);
+  return { open, setOpen, wrapperRef, panelRef, query, setQuery, inputRef };
+}
+function DropdownSearchHeader({
+  query,
+  onQueryChange,
+  inputRef,
+  placeholder
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-slate-100 dark:border-slate-800 px-2 py-1.5", children: [
+    /* @__PURE__ */ jsx(Search, { className: "size-4 text-slate-400 dark:text-slate-500" }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: inputRef,
+        type: "text",
+        value: query,
+        onChange: (e) => onQueryChange(e.target.value),
+        placeholder,
+        className: "w-full bg-transparent text-sm outline-none placeholder:text-slate-400 dark:text-slate-100 dark:placeholder:text-slate-500"
+      }
+    )
+  ] });
+}
+function DropdownPanel({
+  header,
+  empty,
+  className,
+  anchorRef,
+  panelRef,
+  width = 256,
+  align = "right",
+  children
+}) {
+  const anchored = useAnchoredPanel(anchorRef ?? EMPTY_REF, Boolean(anchorRef));
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    header,
+    /* @__PURE__ */ jsxs("ul", { className: "overflow-y-auto py-1", children: [
+      children,
+      empty && /* @__PURE__ */ jsx("li", { className: "px-3 py-2 text-sm text-slate-500 dark:text-slate-400", children: "\u2014" })
+    ] })
+  ] });
+  if (!anchorRef) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: panelRef,
+        className: cn(
+          "absolute z-30 mt-1 rounded-md border border-slate-200 bg-white shadow-lg dark:border-slate-700 dark:bg-slate-900",
+          "[&>ul]:max-h-64",
+          className
+        ),
+        children: body
+      }
+    );
+  }
+  const rect = anchored.rect;
+  if (!rect) return null;
+  const wanted = align === "right" ? rect.right - width : rect.left;
+  const left = Math.min(Math.max(8, wanted), window.innerWidth - width - 8);
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: panelRef,
+        style: { position: "fixed", top: anchored.top, left, width, maxHeight: anchored.maxHeight },
+        className: cn(
+          "z-50 flex flex-col overflow-hidden rounded-md border border-slate-200 bg-white shadow-lg dark:border-slate-700 dark:bg-slate-900",
+          // The list, not the panel, is what scrolls: the search header has to stay put
+          // while the options move under it.
+          "[&>ul]:min-h-0 [&>ul]:flex-1",
+          className
+        ),
+        children: body
+      }
+    ),
+    document.body
+  );
+}
+const EMPTY_REF = { current: null };
+export {
+  DropdownPanel,
+  DropdownSearchHeader,
+  useDropdown,
+  useDropdownSearch
+};
+//# sourceMappingURL=dropdown.js.map

package/dist/components/dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/dropdown.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\nimport type { ReactNode, RefObject } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { Search } from \"lucide-react\";\nimport { useAnchoredPanel } from \"../hooks/use-anchored-panel\";\nimport { useOverlayHistory } from \"../hooks/use-overlay-history\";\nimport { cn } from \"../lib/cn\";\n\n/**\n * Open state + close-on-outside-click for the custom dropdowns (MultiSelect,\n * CurrencySelect, AmountInput's currency picker, Combobox). Attach `wrapperRef`\n * to the relatively-positioned container; the popover lives inside it so a click\n * anywhere else closes it.\n *\n * ## Back closes the list, not the page behind it\n *\n * Keksdose live #309 rework: *\"It shall only close it if it is prior open, and not\n * when I am seeing the dialog.\"* Round one wired {@link PickerSheet} — the shape\n * these lists take on a PHONE — into {@link useOverlayHistory}, and left the pointer\n * shape out. So on a desktop one Back press over an open list still went past it to\n * the dialog underneath: measured on his own budget, the transfer form's account list\n * was showing and Back took the entire add card, amount and all. That is the same\n * loss round one called *\"discarding an edit in progress in order to dismiss a\n * list\"*, in the other shell.\n *\n * Every dropdown built on this hook is dismissible and is the topmost thing on screen\n * while it is up, so the rule is the hook's rather than each caller's. `backCloses`\n * is for the ONE case where a second entry would be wrong: a caller whose panel is\n * itself a `PickerSheet`, which already registers one — both comboboxes swap shape at\n * {@link PHONE_QUERY}, and two entries would cost two Back presses to close one sheet.\n */\nexport function useDropdown<T extends HTMLElement = HTMLDivElement>({\n  backCloses = true,\n}: { backCloses?: boolean } = {}) {\n  const [open, setOpen] = useState(false);\n  const wrapperRef = useRef<T>(null);\n  // The panel, once it is PORTALLED (see {@link DropdownPanel}'s `anchorRef`): it is\n  // then a child of <body> rather than of the wrapper, so \"did the click land inside\n  // the wrapper\" answers no for every click on the list itself and the first option a\n  // user picked closed the dropdown without picking anything.\n  const panelRef = useRef<HTMLDivElement>(null);\n  useEffect(() => {\n    if (!open) return;\n    const handler = (e: MouseEvent) => {\n      const target = e.target as Node;\n      const inside =\n        (wrapperRef.current?.contains(target) ?? false) ||\n        (panelRef.current?.contains(target) ?? false);\n      if (!inside) setOpen(false);\n    };\n    document.addEventListener(\"mousedown\", handler);\n    return () => document.removeEventListener(\"mousedown\", handler);\n  }, [open]);\n  // Same close path Escape and an outside click take, so a list dismissed by Back\n  // cannot end up in a different state from one dismissed any other way.\n  useOverlayHistory(open && backCloses, useCallback(() => setOpen(false), []));\n  return { open, setOpen, wrapperRef, panelRef };\n}\n\n/**\n * {@link useDropdown} plus a search box: clears the query and focuses the search\n * input each time the panel opens, so typing filters immediately.\n */\nexport function useDropdownSearch<T extends HTMLElement = HTMLDivElement>() {\n  const { open, setOpen, wrapperRef, panelRef } = useDropdown<T>();\n  const [query, setQuery] = useState(\"\");\n  const inputRef = useRef<HTMLInputElement>(null);\n  useEffect(() => {\n    if (open) {\n      // eslint-disable-next-line react-hooks/set-state-in-effect -- reset the query on open\n      setQuery(\"\");\n      requestAnimationFrame(() => inputRef.current?.focus());\n    }\n  }, [open]);\n  return { open, setOpen, wrapperRef, panelRef, query, setQuery, inputRef };\n}\n\n/** The search row (magnifier + text input) shared by the searchable dropdowns. */\nexport function DropdownSearchHeader({\n  query,\n  onQueryChange,\n  inputRef,\n  placeholder,\n}: {\n  query: string;\n  onQueryChange: (v: string) => void;\n  inputRef: RefObject<HTMLInputElement | null>;\n  placeholder?: string;\n}) {\n  return (\n    <div className=\"flex items-center gap-2 border-b border-slate-100 dark:border-slate-800 px-2 py-1.5\">\n      <Search className=\"size-4 text-slate-400 dark:text-slate-500\" />\n      <input\n        ref={inputRef}\n        type=\"text\"\n        value={query}\n        onChange={(e) => onQueryChange(e.target.value)}\n        placeholder={placeholder}\n        className=\"w-full bg-transparent text-sm outline-none placeholder:text-slate-400 dark:text-slate-100 dark:placeholder:text-slate-500\"\n      />\n    </div>\n  );\n}\n\n/**\n * The floating popover surface for the searchable dropdowns: bordered/shadowed\n * panel, an optional `header` slot (search box, plus any actions), and a\n * scrollable `<ul>` of `children` with an \"empty\" row when nothing matches.\n *\n * ## Anchored, or merely absolute\n *\n * Without `anchorRef` the panel is `position: absolute` inside whatever relative box\n * the caller put it in, and the caller places it with `className` (`w-64`,\n * `right-0 top-full`). That is fine in a page that does not scroll around it, and\n * wrong the moment an ancestor has `overflow` — the panel is then CLIPPED by that\n * ancestor's box, with no error and no scrollbar, just a list with its side sliced\n * off. Keksdose dev#548 is what that looks like in practice: the app's own content\n * scroller starts 280px from the left, the amount field's currency picker opens\n * right-aligned and 256px wide, and in the transaction row editor its left third —\n * the search box's first letter, and every row's currency symbol — was cut away.\n *\n * With `anchorRef` the panel is PORTALLED to `<body>` and positioned `fixed` against\n * that trigger's rect, so no ancestor can clip it: the same treatment {@link Popover}\n * already gives the calculator, and the same reason. It re-aligns on scroll and\n * resize, flips above the trigger when the room is there instead (a phone keyboard\n * eats the bottom of the screen), and is clamped to the viewport's edges so a trigger\n * near either side cannot push it off-screen.\n *\n * Pass `panelRef` from {@link useDropdown} along with it: once portalled the panel is\n * no longer inside the wrapper, so the outside-click handler has to be told about it\n * or the first click on an option closes the list instead of choosing from it.\n */\nexport function DropdownPanel({\n  header,\n  empty,\n  className,\n  anchorRef,\n  panelRef,\n  width = 256,\n  align = \"right\",\n  children,\n}: {\n  header?: ReactNode;\n  empty?: boolean;\n  className?: string;\n  /** The trigger to hang off. Given, the panel portals and goes `fixed`. */\n  anchorRef?: RefObject<HTMLElement | null>;\n  /** {@link useDropdown}'s `panelRef`, so an outside-click sees this as inside. */\n  panelRef?: RefObject<HTMLDivElement | null>;\n  /** Panel width in px, for the anchored form (the CSS `w-*` cannot be measured). */\n  width?: number;\n  /** Which of the panel's edges lines up with the trigger's, room permitting. */\n  align?: \"left\" | \"right\";\n  children: ReactNode;\n}) {\n  const anchored = useAnchoredPanel(anchorRef ?? EMPTY_REF, Boolean(anchorRef));\n  const body = (\n    <>\n      {header}\n      {/* The anchored form caps its own height against the VISIBLE viewport and lets\n          this list have the rest; the absolute form keeps the fixed `max-h-64` it has\n          always had, applied by the wrapper below. */}\n      <ul className=\"overflow-y-auto py-1\">\n        {children}\n        {empty && <li className=\"px-3 py-2 text-sm text-slate-500 dark:text-slate-400\">—</li>}\n      </ul>\n    </>\n  );\n\n  if (!anchorRef) {\n    return (\n      <div\n        ref={panelRef}\n        className={cn(\n          \"absolute z-30 mt-1 rounded-md border border-slate-200 bg-white shadow-lg dark:border-slate-700 dark:bg-slate-900\",\n          \"[&>ul]:max-h-64\",\n          className,\n        )}\n      >\n        {body}\n      </div>\n    );\n  }\n\n  const rect = anchored.rect;\n  if (!rect) return null;\n  // Clamped exactly as `Popover` clamps: the panel may leave the trigger's edge to\n  // stay on screen, because a list half off the viewport is the bug this exists for.\n  const wanted = align === \"right\" ? rect.right - width : rect.left;\n  const left = Math.min(Math.max(8, wanted), window.innerWidth - width - 8);\n  return createPortal(\n    <div\n      ref={panelRef}\n      style={{ position: \"fixed\", top: anchored.top, left, width, maxHeight: anchored.maxHeight }}\n      className={cn(\n        \"z-50 flex flex-col overflow-hidden rounded-md border border-slate-200 bg-white shadow-lg dark:border-slate-700 dark:bg-slate-900\",\n        // The list, not the panel, is what scrolls: the search header has to stay put\n        // while the options move under it.\n        \"[&>ul]:min-h-0 [&>ul]:flex-1\",\n        className,\n      )}\n    >\n      {body}\n    </div>,\n    document.body,\n  );\n}\n\n/** A ref that is always null, for the un-anchored form — hooks may not be conditional. */\nconst EMPTY_REF: RefObject<HTMLElement | null> = { current: null };\n"],"mappings":"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","names":[]}

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

@@ -0,0 +1,49 @@
+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 EntityComboboxProps<V extends string | number> {
+    /** Selected id, or null/undefined when nothing is selected. */
+    value: V | null | undefined;
+    /** Selecting an option emits its value; the clear button emits `null`. */
+    onChange: (value: V | null) => void;
+    /** Already-loaded options (client-side filtered). Also used to resolve the
+     *  trigger label for the current `value`. */
+    options?: ComboOption<V>[];
+    /** Async option source, debounced and called on open + as the query changes.
+     *  Stale responses are ignored. When set, `options` is used only for label
+     *  resolution, not as the result list. */
+    loadOptions?: (query: string) => Promise<ComboOption<V>[]>;
+    /** External loading flag (OR-ed with the internal async state). */
+    loading?: boolean;
+    label?: ReactNode;
+    placeholder?: string;
+    searchPlaceholder?: string;
+    emptyLabel?: 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. */
+    onCreate?: (query: string) => void;
+    createLabel?: (query: string) => string;
+    className?: string;
+    /** Required and unanswered — {@link FIELD_INVALID}. See {@link Input}'s `invalid`. */
+    invalid?: boolean;
+}
+/**
+ * An id-keyed, searchable entity picker: a field-styled trigger showing the
+ * selected item's label, and a portalled dropdown of `{label, sublabel, icon}`
+ * options — loaded up front via `options` or lazily via `loadOptions`. Built on
+ * the shared field/anchor/dismiss/search primitives (no cmdk/Radix). For picking
+ * several entities use {@link MultiEntityCombobox}.
+ */
+declare function EntityCombobox<V extends string | number>({ value, onChange, options, loadOptions, loading, label, placeholder, searchPlaceholder, emptyLabel, clearable, clearLabel, closeLabel, disabled, onCreate, createLabel, className, invalid, }: EntityComboboxProps<V>): react.JSX.Element;
+
+export { ComboOption, EntityCombobox, type EntityComboboxProps };

package/dist/components/entity-combobox.js

@@ -0,0 +1,115 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+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 EntityCombobox({
+  value,
+  onChange,
+  options,
+  loadOptions,
+  loading,
+  label,
+  placeholder,
+  searchPlaceholder = "Search",
+  emptyLabel = "No results",
+  clearable,
+  clearLabel,
+  closeLabel,
+  disabled,
+  onCreate,
+  createLabel,
+  className,
+  invalid
+}) {
+  const core = useComboboxCore({ options, loadOptions, loading });
+  const { results, resolve, setOpen } = core;
+  const selectedOption = value == null ? null : resolve(value);
+  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 != null && !disabled);
+  const triggerText = selectedOption?.label ?? placeholder ?? "";
+  const choose = (o) => {
+    core.cacheRef.current.set(o.value, o);
+    onChange(o.value);
+    setOpen(false);
+  };
+  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}: ${triggerText}` : 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__ */ jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [
+            selectedOption?.icon && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: selectedOption.icon }),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "truncate",
+                  // A chosen value is the field's VALUE, so it is set in the same ink an
+                  // <input>'s value is — FIELD_BASE's own text colour, inherited rather
+                  // than restated (Keksdose dev#477). It used to be one notch lighter
+                  // than the typeahead fields beside it, which is visible when a picker
+                  // and a text field share a form row. Nothing selected keeps the
+                  // placeholder grey, which every field here agrees on.
+                  !selectedOption && "text-slate-400 dark:text-slate-500"
+                ),
+                children: selectedOption?.label ?? placeholder ?? ""
+              }
+            )
+          ] }),
+          showClear ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              role: "button",
+              tabIndex: -1,
+              "aria-label": clearLabel ?? "Clear",
+              onClick: (e) => {
+                e.stopPropagation();
+                onChange(null);
+              },
+              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,
+        sheetTitle: label ?? placeholder,
+        searchPlaceholder,
+        emptyLabel,
+        closeLabel,
+        isSelected: (v) => v === value,
+        onChoose: choose,
+        showCreate,
+        onCreate: () => {
+          onCreate?.(q);
+          setOpen(false);
+        },
+        createContent: createLabel ? createLabel(q) : `Create \u201C${q}\u201D`
+      }
+    )
+  ] });
+}
+export {
+  EntityCombobox
+};
+//# sourceMappingURL=entity-combobox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/entity-combobox.tsx"],"sourcesContent":["import 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 type { ComboOption } from \"./combobox-core\";\n\nexport interface EntityComboboxProps<V extends string | number> {\n  /** Selected id, or null/undefined when nothing is selected. */\n  value: V | null | undefined;\n  /** Selecting an option emits its value; the clear button emits `null`. */\n  onChange: (value: V | null) => void;\n  /** Already-loaded options (client-side filtered). Also used to resolve the\n   *  trigger label for the current `value`. */\n  options?: ComboOption<V>[];\n  /** Async option source, debounced and called on open + as the query changes.\n   *  Stale responses are ignored. When set, `options` is used only for label\n   *  resolution, not as the result list. */\n  loadOptions?: (query: string) => Promise<ComboOption<V>[]>;\n  /** External loading flag (OR-ed with the internal async state). */\n  loading?: boolean;\n  label?: ReactNode;\n  placeholder?: string;\n  searchPlaceholder?: string;\n  emptyLabel?: 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  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 * An id-keyed, searchable entity picker: a field-styled trigger showing the\n * selected item's label, and a portalled dropdown of `{label, sublabel, icon}`\n * options — loaded up front via `options` or lazily via `loadOptions`. Built on\n * the shared field/anchor/dismiss/search primitives (no cmdk/Radix). For picking\n * several entities use {@link MultiEntityCombobox}.\n */\nexport function EntityCombobox<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  clearable,\n  clearLabel,\n  closeLabel,\n  disabled,\n  onCreate,\n  createLabel,\n  className,\n  invalid,\n}: EntityComboboxProps<V>) {\n  const core = useComboboxCore<V>({ options, loadOptions, loading });\n  const { results, resolve, setOpen } = core;\n\n  const selectedOption = value == null ? null : resolve(value);\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 != null && !disabled);\n  /** What the closed control is showing — the second half of its accessible name. */\n  const triggerText = selectedOption?.label ?? placeholder ?? \"\";\n\n  const choose = (o: ComboOption<V>) => {\n    core.cacheRef.current.set(o.value, o);\n    onChange(o.value);\n    setOpen(false);\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}: ${triggerText}` : 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 className=\"flex min-w-0 items-center gap-2\">\n          {selectedOption?.icon && <span className=\"shrink-0\">{selectedOption.icon}</span>}\n          <span\n            className={cn(\n              \"truncate\",\n              // A chosen value is the field's VALUE, so it is set in the same ink an\n              // <input>'s value is — FIELD_BASE's own text colour, inherited rather\n              // than restated (Keksdose dev#477). It used to be one notch lighter\n              // than the typeahead fields beside it, which is visible when a picker\n              // and a text field share a form row. Nothing selected keeps the\n              // placeholder grey, which every field here agrees on.\n              !selectedOption && \"text-slate-400 dark:text-slate-500\",\n            )}\n          >\n            {selectedOption?.label ?? placeholder ?? \"\"}\n          </span>\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(null);\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        // 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) => v === value}\n        onChoose={choose}\n        showCreate={showCreate}\n        onCreate={() => {\n          onCreate?.(q);\n          setOpen(false);\n        }}\n        createContent={createLabel ? createLabel(q) : `Create “${q}”`}\n      />\n    </div>\n  );\n}\n"],"mappings":"AAuF8B,cAuBtB,YAvBsB;AAtF9B,SAAS,SAAS;AAClB,SAAS,UAAU;AACnB,SAAS,cAAc,YAAY,eAAe,oBAAoB,qBAAqB;AAC3F,SAAS,eAAe,uBAAyC;AA6C1D,SAAS,eAA0C;AAAA,EACxD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,oBAAoB;AAAA,EACpB,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA2B;AACzB,QAAM,OAAO,gBAAmB,EAAE,SAAS,aAAa,QAAQ,CAAC;AACjE,QAAM,EAAE,SAAS,SAAS,QAAQ,IAAI;AAEtC,QAAM,iBAAiB,SAAS,OAAO,OAAO,QAAQ,KAAK;AAC3D,QAAM,IAAI,KAAK,MAAM,KAAK;AAC1B,QAAM,aACJ,QAAQ,QAAQ,KAAK,EAAE,SAAS,KAAK,CAAC,QAAQ,KAAK,CAAC,MAAM,EAAE,MAAM,YAAY,MAAM,EAAE,YAAY,CAAC;AACrG,QAAM,YAAY,QAAQ,aAAa,SAAS,QAAQ,CAAC,QAAQ;AAEjE,QAAM,cAAc,gBAAgB,SAAS,eAAe;AAE5D,QAAM,SAAS,CAAC,MAAsB;AACpC,SAAK,SAAS,QAAQ,IAAI,EAAE,OAAO,CAAC;AACpC,aAAS,EAAE,KAAK;AAChB,YAAQ,KAAK;AAAA,EACf;AAEA,SACE,qBAAC,SAAI,WAAW,GAAG,YAAY,SAAS,GACrC;AAAA,cAAU,UAAa,oBAAC,cAAY,iBAAM;AAAA,IAC3C;AAAA,MAAC;AAAA;AAAA,QACC,KAAK,KAAK;AAAA,QACV,MAAK;AAAA,QAML,cACE,OAAO,UAAU,WAAW,GAAG,KAAK,KAAK,WAAW,KAAK;AAAA,QAE3D;AAAA,QACA,gBAAc,WAAW;AAAA,QACzB,SAAS,MAAM,CAAC,YAAY,QAAQ,CAAC,MAAM,CAAC,CAAC;AAAA,QAC7C,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA,UAAU,UAAa;AAAA,UACvB,YAAY;AAAA,UACZ,WAAW;AAAA,QACb;AAAA,QAEA;AAAA,+BAAC,UAAK,WAAU,mCACb;AAAA,4BAAgB,QAAQ,oBAAC,UAAK,WAAU,YAAY,yBAAe,MAAK;AAAA,YACzE;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW;AAAA,kBACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAOA,CAAC,kBAAkB;AAAA,gBACrB;AAAA,gBAEC,0BAAgB,SAAS,eAAe;AAAA;AAAA,YAC3C;AAAA,aACF;AAAA,UACC,YACC;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,UAAU;AAAA,cACV,cAAY,cAAc;AAAA,cAC1B,SAAS,CAAC,MAAM;AACd,kBAAE,gBAAgB;AAClB,yBAAS,IAAI;AAAA,cACf;AAAA,cACA,WAAU;AAAA,cAEV,8BAAC,KAAE,WAAU,UAAS;AAAA;AAAA,UACxB,IAEA,oBAAC,gBAAa;AAAA;AAAA;AAAA,IAElB;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QAGA,YAAY,SAAS;AAAA,QACrB;AAAA,QACA;AAAA,QACA;AAAA,QACA,YAAY,CAAC,MAAM,MAAM;AAAA,QACzB,UAAU;AAAA,QACV;AAAA,QACA,UAAU,MAAM;AACd,qBAAW,CAAC;AACZ,kBAAQ,KAAK;AAAA,QACf;AAAA,QACA,eAAe,cAAc,YAAY,CAAC,IAAI,gBAAW,CAAC;AAAA;AAAA,IAC5D;AAAA,KACF;AAEJ;","names":[]}

package/dist/components/file-dropzone.d.ts

@@ -0,0 +1,18 @@
+import * as react from 'react';
+
+/** Drag-and-drop file picker shared by the import wizards (YNAB zip, CAMT xml).
+ * Validation failures toast `invalidMessage`; the chosen file is echoed with
+ * its size, otherwise `emptyLabel` + `hint` describe what to drop. */
+declare function FileDropzone({ file, onFileSelected, accept, isValid, invalidMessage, dropLabel, browseLabel, emptyLabel, hint, }: {
+    file: File | null;
+    onFileSelected: (file: File) => void;
+    accept: string;
+    isValid: (file: File) => boolean;
+    invalidMessage: string;
+    dropLabel: string;
+    browseLabel: string;
+    emptyLabel: string;
+    hint: string;
+}): react.JSX.Element;
+
+export { FileDropzone };

package/dist/components/file-dropzone.js

@@ -0,0 +1,101 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { toast } from "sonner";
+import { Upload } from "lucide-react";
+import { Button } from "./ui.js";
+import { cn } from "../lib/cn.js";
+function FileDropzone({
+  file,
+  onFileSelected,
+  accept,
+  isValid,
+  invalidMessage,
+  dropLabel,
+  browseLabel,
+  emptyLabel,
+  hint
+}) {
+  const [dragOver, setDragOver] = useState(false);
+  const fileInputRef = useRef(null);
+  const acceptFile = (f) => {
+    if (!f) return;
+    if (!isValid(f)) {
+      toast.error(invalidMessage);
+      return;
+    }
+    onFileSelected(f);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      onDragEnter: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (e.dataTransfer.types.includes("Files")) setDragOver(true);
+      },
+      onDragOver: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        e.dataTransfer.dropEffect = "copy";
+        if (!dragOver && e.dataTransfer.types.includes("Files")) setDragOver(true);
+      },
+      onDragLeave: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (e.currentTarget.contains(e.relatedTarget)) return;
+        setDragOver(false);
+      },
+      onDrop: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setDragOver(false);
+        acceptFile(e.dataTransfer.files?.[0]);
+      },
+      onClick: () => fileInputRef.current?.click(),
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          fileInputRef.current?.click();
+        }
+      },
+      role: "button",
+      tabIndex: 0,
+      "aria-label": dropLabel,
+      className: cn(
+        "flex cursor-pointer flex-col items-center justify-center gap-2 rounded-md border-2 border-dashed px-4 py-6 text-center transition-colors",
+        dragOver ? "border-slate-500 bg-slate-100 dark:border-slate-300 dark:bg-slate-800" : "border-slate-300 hover:border-slate-400 dark:border-slate-700 dark:hover:border-slate-500"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Upload, { className: "size-5 text-slate-500 dark:text-slate-400" }),
+        /* @__PURE__ */ jsx("div", { className: "text-sm text-slate-700 dark:text-slate-200", children: file ? /* @__PURE__ */ jsx("span", { className: "font-medium", children: file.name }) : emptyLabel }),
+        /* @__PURE__ */ jsx("div", { className: "text-xs text-slate-500 dark:text-slate-400", children: file ? `${Math.round(file.size / 1024)} KB` : hint }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "secondary",
+            onClick: (e) => {
+              e.stopPropagation();
+              fileInputRef.current?.click();
+            },
+            children: browseLabel
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: fileInputRef,
+            type: "file",
+            accept,
+            onChange: (e) => acceptFile(e.target.files?.[0]),
+            className: "sr-only"
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  FileDropzone
+};
+//# sourceMappingURL=file-dropzone.js.map

package/dist/components/file-dropzone.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/file-dropzone.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\nimport { toast } from \"sonner\";\nimport { Upload } from \"lucide-react\";\nimport { Button } from \"./ui\";\nimport { cn } from \"../lib/cn\";\n\n/** Drag-and-drop file picker shared by the import wizards (YNAB zip, CAMT xml).\n * Validation failures toast `invalidMessage`; the chosen file is echoed with\n * its size, otherwise `emptyLabel` + `hint` describe what to drop. */\nexport function FileDropzone({\n  file,\n  onFileSelected,\n  accept,\n  isValid,\n  invalidMessage,\n  dropLabel,\n  browseLabel,\n  emptyLabel,\n  hint,\n}: {\n  file: File | null;\n  onFileSelected: (file: File) => void;\n  accept: string;\n  isValid: (file: File) => boolean;\n  invalidMessage: string;\n  dropLabel: string;\n  browseLabel: string;\n  emptyLabel: string;\n  hint: string;\n}) {\n  const [dragOver, setDragOver] = useState(false);\n  const fileInputRef = useRef<HTMLInputElement>(null);\n\n  const acceptFile = (f: File | undefined | null) => {\n    if (!f) return;\n    if (!isValid(f)) {\n      toast.error(invalidMessage);\n      return;\n    }\n    onFileSelected(f);\n  };\n\n  return (\n    <div\n      onDragEnter={(e) => {\n        e.preventDefault();\n        e.stopPropagation();\n        if (e.dataTransfer.types.includes(\"Files\")) setDragOver(true);\n      }}\n      onDragOver={(e) => {\n        e.preventDefault();\n        e.stopPropagation();\n        e.dataTransfer.dropEffect = \"copy\";\n        if (!dragOver && e.dataTransfer.types.includes(\"Files\")) setDragOver(true);\n      }}\n      onDragLeave={(e) => {\n        e.preventDefault();\n        e.stopPropagation();\n        if (e.currentTarget.contains(e.relatedTarget as Node)) return;\n        setDragOver(false);\n      }}\n      onDrop={(e) => {\n        e.preventDefault();\n        e.stopPropagation();\n        setDragOver(false);\n        acceptFile(e.dataTransfer.files?.[0]);\n      }}\n      onClick={() => fileInputRef.current?.click()}\n      onKeyDown={(e) => {\n        if (e.key === \"Enter\" || e.key === \" \") {\n          e.preventDefault();\n          fileInputRef.current?.click();\n        }\n      }}\n      role=\"button\"\n      tabIndex={0}\n      aria-label={dropLabel}\n      className={cn(\n        \"flex cursor-pointer flex-col items-center justify-center gap-2 rounded-md border-2 border-dashed px-4 py-6 text-center transition-colors\",\n        dragOver\n          ? \"border-slate-500 bg-slate-100 dark:border-slate-300 dark:bg-slate-800\"\n          : \"border-slate-300 hover:border-slate-400 dark:border-slate-700 dark:hover:border-slate-500\",\n      )}\n    >\n      <Upload className=\"size-5 text-slate-500 dark:text-slate-400\" />\n      <div className=\"text-sm text-slate-700 dark:text-slate-200\">\n        {file ? <span className=\"font-medium\">{file.name}</span> : emptyLabel}\n      </div>\n      <div className=\"text-xs text-slate-500 dark:text-slate-400\">\n        {file ? `${Math.round(file.size / 1024)} KB` : hint}\n      </div>\n      <Button\n        type=\"button\"\n        variant=\"secondary\"\n        onClick={(e) => {\n          e.stopPropagation();\n          fileInputRef.current?.click();\n        }}\n      >\n        {browseLabel}\n      </Button>\n      <input\n        ref={fileInputRef}\n        type=\"file\"\n        accept={accept}\n        onChange={(e) => acceptFile(e.target.files?.[0])}\n        className=\"sr-only\"\n      />\n    </div>\n  );\n}\n"],"mappings":"AA2CI,SAyCE,KAzCF;AA3CJ,SAAS,QAAQ,gBAAgB;AACjC,SAAS,aAAa;AACtB,SAAS,cAAc;AACvB,SAAS,cAAc;AACvB,SAAS,UAAU;AAKZ,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAUG;AACD,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,eAAe,OAAyB,IAAI;AAElD,QAAM,aAAa,CAAC,MAA+B;AACjD,QAAI,CAAC,EAAG;AACR,QAAI,CAAC,QAAQ,CAAC,GAAG;AACf,YAAM,MAAM,cAAc;AAC1B;AAAA,IACF;AACA,mBAAe,CAAC;AAAA,EAClB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAa,CAAC,MAAM;AAClB,UAAE,eAAe;AACjB,UAAE,gBAAgB;AAClB,YAAI,EAAE,aAAa,MAAM,SAAS,OAAO,EAAG,aAAY,IAAI;AAAA,MAC9D;AAAA,MACA,YAAY,CAAC,MAAM;AACjB,UAAE,eAAe;AACjB,UAAE,gBAAgB;AAClB,UAAE,aAAa,aAAa;AAC5B,YAAI,CAAC,YAAY,EAAE,aAAa,MAAM,SAAS,OAAO,EAAG,aAAY,IAAI;AAAA,MAC3E;AAAA,MACA,aAAa,CAAC,MAAM;AAClB,UAAE,eAAe;AACjB,UAAE,gBAAgB;AAClB,YAAI,EAAE,cAAc,SAAS,EAAE,aAAqB,EAAG;AACvD,oBAAY,KAAK;AAAA,MACnB;AAAA,MACA,QAAQ,CAAC,MAAM;AACb,UAAE,eAAe;AACjB,UAAE,gBAAgB;AAClB,oBAAY,KAAK;AACjB,mBAAW,EAAE,aAAa,QAAQ,CAAC,CAAC;AAAA,MACtC;AAAA,MACA,SAAS,MAAM,aAAa,SAAS,MAAM;AAAA,MAC3C,WAAW,CAAC,MAAM;AAChB,YAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,YAAE,eAAe;AACjB,uBAAa,SAAS,MAAM;AAAA,QAC9B;AAAA,MACF;AAAA,MACA,MAAK;AAAA,MACL,UAAU;AAAA,MACV,cAAY;AAAA,MACZ,WAAW;AAAA,QACT;AAAA,QACA,WACI,0EACA;AAAA,MACN;AAAA,MAEA;AAAA,4BAAC,UAAO,WAAU,6CAA4C;AAAA,QAC9D,oBAAC,SAAI,WAAU,8CACZ,iBAAO,oBAAC,UAAK,WAAU,eAAe,eAAK,MAAK,IAAU,YAC7D;AAAA,QACA,oBAAC,SAAI,WAAU,8CACZ,iBAAO,GAAG,KAAK,MAAM,KAAK,OAAO,IAAI,CAAC,QAAQ,MACjD;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,SAAS,CAAC,MAAM;AACd,gBAAE,gBAAgB;AAClB,2BAAa,SAAS,MAAM;AAAA,YAC9B;AAAA,YAEC;AAAA;AAAA,QACH;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,MAAK;AAAA,YACL;AAAA,YACA,UAAU,CAAC,MAAM,WAAW,EAAE,OAAO,QAAQ,CAAC,CAAC;AAAA,YAC/C,WAAU;AAAA;AAAA,QACZ;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/full-bleed-dialog.d.ts

@@ -0,0 +1,57 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+/**
+ * The phone's full-screen dialog: a panel that covers the viewport edge to edge.
+ *
+ * Not {@link Modal}, and that is a decision rather than an omission. Keksdose feedback
+ * #32: the inset panel #204 shipped left a strip of page showing beside it on a phone,
+ * and tapping that strip dismissed a form mid-edit. With no backdrop exposed there is
+ * nothing to mis-tap, so the X is the way out — `backdropClose` stays wired for any
+ * layout that does leave a backdrop visible, and costs nothing where none is.
+ *
+ * ## Why it is a component
+ *
+ * It was markup inside `data-table.tsx`, where it is the phone's row EDITOR. Keksdose
+ * live #307's follow-up needed the same shell for the transactions CREATE card —
+ * *"Is the creation window of the tx still different than the edit window? Since the tx
+ * list still appears below when scrolling down?"* — and the two answers to that are
+ * either one component or two copies that drift. Every previous convergence in that app
+ * drifted the moment a second surface was written beside the first, which is what
+ * `field-layer-parity` exists to catch one layer down.
+ *
+ * So the panel, the header strip, the scrolling body, the body-scroll lock and the Back
+ * handling are all here, once.
+ *
+ * ## What the caller still owns
+ *
+ * The HEADER's content, because the two callers name themselves differently: the row
+ * editor shows the row's own first column, the create card a plain title. And `open`,
+ * because who decides is the caller's business — see {@link backCloses}.
+ */
+declare function FullBleedDialog({ open, onClose, header, closeLabel, children, backCloses, className, }: {
+    open: boolean;
+    /** The X, the backdrop (where one shows) and — unless {@link backCloses} is off —
+     *  the platform Back gesture all call this. */
+    onClose: () => void;
+    /** What the header strip shows beside the close button. */
+    header?: ReactNode;
+    closeLabel: string;
+    children: ReactNode;
+    /**
+     * Push a history entry so Back dismisses this dialog instead of navigating
+     * (Keksdose feedback #172). On by default, because a full-screen form that ignores
+     * the phone's universal "go back" gesture does not merely fail to close — the
+     * navigation lands somewhere else with the form still notionally open.
+     *
+     * **Off for a caller whose open state is already in the URL.** The transactions
+     * create card is `?action=new`, so Back already pops it through the router; a
+     * sentinel on top of that would cost two presses to close one dialog. One owner of
+     * the Back press, always.
+     */
+    backCloses?: boolean;
+    /** Extra classes for the PANEL (not the backdrop). */
+    className?: string;
+}): react.ReactPortal | null;
+
+export { FullBleedDialog };